feat(ui): added onValueChange to tabs component (#61)

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
Co-authored-by: Claude <claude@users.noreply.github.com>

Author: 3 people

packages/demo/src/content/components/tabs.mdx

@@ -173,20 +173,21 @@ Combine icons with the filled background variant for a more prominent tab design
 
 ---
 
-| Prop                 | Type                        | Default         | Description                                                                                                                               |
-| -------------------- | --------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                 | `string`                    | **Required**    | A unique identifier for the tabs instance. Used internally for the animated indicator's layoutId.                                         |
-| `items`              | `Array<TabItem>`            | **Required**    | An array of tab items. See TabItem structure below.                                                                                       |
-| `className`          | `string`                    | —               | Additional CSS classes to apply to the tabs container.                                                                                    |
-| `tabsListBackground` | `"transparent" \| "filled"` | `"transparent"` | The background style for the tabs list. `"transparent"` shows tabs with a transparent background, `"filled"` applies a filled background. |
+| Name                 | Description                                                              | Type                      | Default       | Required |
+| -------------------- | ------------------------------------------------------------------------ | ------------------------- | ------------- | -------- |
+| `id`                 | Unique identifier for the tabs instance, used for the animated indicator | `string`                  | -             | ✅       |
+| `items`              | Array of tab items (see TabItem structure below)                         | `Array<TabItem>`          | -             | ✅       |
+| `defaultValue`       | The value of the tab that should be active by default                    | `string`                  | First item    | ❌       |
+| `tabsListBackground` | Background style for the tabs list                                       | `transparent`, `filled`   | `transparent` | ❌       |
+| `onValueChange`      | Callback fired when the active tab changes                               | `(value: string) => void` | -             | ❌       |
 
 ### TabItem Structure
 
 Each item in the `items` array should have the following structure:
 
-| Property  | Type                           | Required | Description                                                                                                     |
-| --------- | ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------- |
-| `label`   | `string`                       | Yes      | The text label displayed on the tab trigger.                                                                    |
-| `value`   | `string`                       | Yes      | A unique value that identifies this tab. Used for state management and content matching.                        |
-| `icon`    | `React.ReactElement \| string` | No       | Optional icon to display alongside the label. Can be a string (icon name from Lucide React) or a React element. |
-| `content` | `React.ReactNode`              | Yes      | The content to display when this tab is active. Can be any valid React node.                                    |
+| Name      | Description                                                  | Type                           | Default | Required |
+| --------- | ------------------------------------------------------------ | ------------------------------ | ------- | -------- |
+| `label`   | Text label displayed on the tab trigger                      | `string`                       | -       | ✅       |
+| `value`   | Unique value that identifies this tab                        | `string`                       | -       | ✅       |
+| `icon`    | Icon to display alongside the label (Lucide name or element) | `React.ReactElement`, `string` | -       | ❌       |
+| `content` | Content to display when this tab is active                   | `React.ReactNode`              | -       | ✅       |

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/tabs/tabs.tsx

@@ -21,15 +21,25 @@ interface TabsProps {
   }[];
   className?: string;
   tabsListBackground?: 'transparent' | 'filled';
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
 }
 
-const Tabs = ({ id, items, className, tabsListBackground = 'transparent' }: TabsProps) => {
-  const [activeTab, setActiveTab] = useState(items[0].value);
+const Tabs = ({
+  id,
+  items,
+  className,
+  tabsListBackground = 'transparent',
+  defaultValue,
+  onValueChange,
+}: TabsProps) => {
+  const [activeTab, setActiveTab] = useState(defaultValue ?? items[0].value);
 
   const isFilled = tabsListBackground === 'filled';
 
   const handleValueChange = (newTab: string) => {
     setActiveTab(newTab);
+    onValueChange?.(newTab);
   };
 
   const renderIcon = (icon?: React.ReactElement | string) => {