ui-lab-registry 0.3.44 → 0.3.45

package/dist/components/Checkbox/examples/06-consent-form.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Checkbox, Flex } from 'ui-lab-components';
+export const metadata = {
+    title: 'Consent Form',
+    description: 'A required checkbox can gate a form action while optional choices remain independent.',
+};
+export default function Example() {
+    const [accepted, setAccepted] = useState(false);
+    const [updates, setUpdates] = useState(false);
+    return (_jsxs(Flex, { direction: "column", gap: "md", style: { width: 320 }, children: [_jsx(Checkbox, { id: "consent-terms", label: "I agree to the terms", helper: "Required to create a workspace.", checked: accepted, onChange: (event) => setAccepted(event.currentTarget.checked) }), _jsx(Checkbox, { id: "consent-updates", label: "Send product updates", checked: updates, onChange: (event) => setUpdates(event.currentTarget.checked) }), _jsx(Button, { variant: "primary", isDisabled: !accepted, styles: { root: 'w-full' }, children: "Continue" })] }));
+}
+//# sourceMappingURL=06-consent-form.js.map

package/dist/components/Checkbox/examples/06-consent-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"06-consent-form.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/examples/06-consent-form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,uFAAuF;CACrG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,aACrD,KAAC,QAAQ,IACP,EAAE,EAAC,eAAe,EAClB,KAAK,EAAC,sBAAsB,EAC5B,MAAM,EAAC,iCAAiC,EACxC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAC7D,EACF,KAAC,QAAQ,IACP,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAC5D,EACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAElE,IACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Checkbox/examples/index.d.ts

@@ -1,5 +1,13 @@
-export { default as Example1 } from './01-basic-checkbox.js';
-export { metadata as metadata1 } from './01-basic-checkbox.js';
-export { default as Example2 } from './02-checkbox-group-with-descriptions.js';
-export { metadata as metadata2 } from './02-checkbox-group-with-descriptions.js';
+export { default as Example1 } from './01-basic-states.js';
+export { metadata as metadata1 } from './01-basic-states.js';
+export { default as Example2 } from './02-helper-text.js';
+export { metadata as metadata2 } from './02-helper-text.js';
+export { default as Example3 } from './03-controlled.js';
+export { metadata as metadata3 } from './03-controlled.js';
+export { default as Example4 } from './04-group.js';
+export { metadata as metadata4 } from './04-group.js';
+export { default as Example5 } from './05-indeterminate.js';
+export { metadata as metadata5 } from './05-indeterminate.js';
+export { default as Example6 } from './06-consent-form.js';
+export { metadata as metadata6 } from './06-consent-form.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Checkbox/examples/index.js

@@ -1,5 +1,13 @@
-export { default as Example1 } from './01-basic-checkbox.js';
-export { metadata as metadata1 } from './01-basic-checkbox.js';
-export { default as Example2 } from './02-checkbox-group-with-descriptions.js';
-export { metadata as metadata2 } from './02-checkbox-group-with-descriptions.js';
+export { default as Example1 } from './01-basic-states.js';
+export { metadata as metadata1 } from './01-basic-states.js';
+export { default as Example2 } from './02-helper-text.js';
+export { metadata as metadata2 } from './02-helper-text.js';
+export { default as Example3 } from './03-controlled.js';
+export { metadata as metadata3 } from './03-controlled.js';
+export { default as Example4 } from './04-group.js';
+export { metadata as metadata4 } from './04-group.js';
+export { default as Example5 } from './05-indeterminate.js';
+export { metadata as metadata5 } from './05-indeterminate.js';
+export { default as Example6 } from './06-consent-form.js';
+export { metadata as metadata6 } from './06-consent-form.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Checkbox/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Checkbox/examples.json

@@ -1,12 +1,32 @@
 {
-    "01-basic-checkbox": {
-        "title": "Basic Checkbox",
-        "description": "A simple checkbox with a label. Use this as the standard checkbox input in your forms.",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Checkbox } from 'ui-lab-components';\n\nexport default function Example() {\n  const [checked, setChecked] = React.useState(false);\n\n  return (\n    <Checkbox\n      checked={checked}\n      onChange={(e) => setChecked(e.target.checked)}\n      label=\"Accept terms and conditions\"\n    />\n  );\n}"
-    },
-    "02-checkbox-group-with-descriptions": {
-        "title": "Checkbox Group with Descriptions",
-        "description": "Multiple checkboxes grouped together as a settings panel. Each checkbox includes a label and helper text for context.",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Checkbox, Card, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    push: false,\n    sms: false,\n    marketing: false,\n  });\n\n  const handleChange = (key: keyof typeof notifications) => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setNotifications(prev => ({ ...prev, [key]: e.target.checked }));\n  };\n\n  return (\n    <Card>\n      <Card.Header>\n        <h3 className=\"text-lg font-medium text-foreground-100\">Notification Preferences</h3>\n        <p className=\"text-sm text-foreground-400\">Choose how you want to be notified.</p>\n      </Card.Header>\n      <Card.Body>\n        <Flex direction=\"column\" gap=\"lg\">\n          <Checkbox\n            checked={notifications.email}\n            onChange={handleChange('email')}\n            label=\"Email notifications\"\n            helperText=\"Receive updates about your account activity via email.\"\n          />\n          <Checkbox\n            checked={notifications.push}\n            onChange={handleChange('push')}\n            label=\"Push notifications\"\n            helperText=\"Get instant alerts on your device for important updates.\"\n          />\n          <Checkbox\n            checked={notifications.sms}\n            onChange={handleChange('sms')}\n            label=\"SMS notifications\"\n            helperText=\"Receive text messages for critical alerts and reminders.\"\n          />\n          <Checkbox\n            checked={notifications.marketing}\n            onChange={handleChange('marketing')}\n            label=\"Marketing emails\"\n            helperText=\"Stay informed about new features, tips, and special offers.\"\n          />\n        </Flex>\n      </Card.Body>\n    </Card>\n  );\n}"
+    "01-basic-states": {
+        "title": "Basic States",
+        "description": "The default checkbox states: unchecked, checked, disabled, and disabled checked.",
+        "code": "import { Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 280 }}>\n      <Checkbox id=\"basic-unchecked\" label=\"Unchecked\" />\n      <Checkbox id=\"basic-checked\" label=\"Checked\" defaultChecked />\n      <Checkbox id=\"basic-disabled\" label=\"Disabled\" disabled />\n      <Checkbox id=\"basic-disabled-checked\" label=\"Disabled checked\" disabled defaultChecked />\n    </Flex>\n  );\n}"
+    },
+    "02-helper-text": {
+        "title": "Helper and Error Text",
+        "description": "A labeled checkbox can include supporting text and an invalid state for form feedback.",
+        "code": "import { Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"lg\" style={{ width: 320 }}>\n      <Checkbox\n        id=\"helper-release-notes\"\n        label=\"Release notes\"\n        helper=\"Get a short product update when a new version ships.\"\n        defaultChecked\n      />\n      <Checkbox\n        id=\"helper-terms\"\n        label=\"Accept terms\"\n        helper=\"You must accept the terms before continuing.\"\n        helperTextError\n        aria-invalid=\"true\"\n      />\n    </Flex>\n  );\n}"
+    },
+    "03-controlled": {
+        "title": "Controlled",
+        "description": "Use checked and onChange when checkbox state is owned by the surrounding interface.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Button, Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [checked, setChecked] = useState(true);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Checkbox\n        id=\"controlled-email\"\n        label=\"Email notifications\"\n        helper={checked ? 'Notifications are enabled.' : 'Notifications are paused.'}\n        checked={checked}\n        onChange={(event) => setChecked(event.currentTarget.checked)}\n      />\n      <Button variant=\"secondary\" onClick={() => setChecked((value) => !value)}>\n        {checked ? 'Turn off' : 'Turn on'}\n      </Button>\n    </Flex>\n  );\n}"
+    },
+    "04-group": {
+        "title": "Checkbox Group",
+        "description": "Use a small group when a user can select any number of related options.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Checkbox, Flex } from 'ui-lab-components';\n\nconst subscriptionOptions = [\n  'Product updates',\n  'Security alerts',\n  'Billing reminders',\n];\n\nexport default function Example() {\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(['Product updates', 'Security alerts'])\n  );\n\n  const toggleOption = (option: string) => {\n    setSelected((current) => {\n      const next = new Set(current);\n      next.has(option) ? next.delete(option) : next.add(option);\n      return next;\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <div>\n        <p className=\"text-sm font-medium text-foreground-100\">Subscriptions</p>\n        <p className=\"text-xs text-foreground-400\">Choose the emails this workspace receives.</p>\n      </div>\n      <Flex direction=\"column\" gap=\"sm\">\n        {subscriptionOptions.map((option) => (\n          <Checkbox\n            key={option}\n            id={`subscription-${option.toLowerCase().replace(/ /g, '-')}`}\n            label={option}\n            checked={selected.has(option)}\n            onChange={() => toggleOption(option)}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  );\n}"
+    },
+    "05-indeterminate": {
+        "title": "Indeterminate",
+        "description": "A parent checkbox can show partial selection when only some child options are checked.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Checkbox, Divider, Flex } from 'ui-lab-components';\n\nconst tableColumns = ['Name', 'Email', 'Role', 'Last active'];\n\nexport default function Example() {\n  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(\n    new Set(['Name', 'Email'])\n  );\n\n  const allSelected = visibleColumns.size === tableColumns.length;\n  const isIndeterminate = visibleColumns.size > 0 && !allSelected;\n\n  const toggleAll = () => {\n    setVisibleColumns(allSelected ? new Set() : new Set(tableColumns));\n  };\n\n  const toggleColumn = (column: string) => {\n    setVisibleColumns((current) => {\n      const next = new Set(current);\n      next.has(column) ? next.delete(column) : next.add(column);\n      return next;\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 280 }}>\n      <Checkbox\n        id=\"columns-all\"\n        label=\"Show all columns\"\n        checked={allSelected}\n        isIndeterminate={isIndeterminate}\n        onChange={toggleAll}\n      />\n      <Divider />\n      <Flex direction=\"column\" gap=\"sm\" styles={{ root: 'pl-8' }}>\n        {tableColumns.map((column) => (\n          <Checkbox\n            key={column}\n            id={`column-${column.toLowerCase().replace(/ /g, '-')}`}\n            label={column}\n            checked={visibleColumns.has(column)}\n            onChange={() => toggleColumn(column)}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  );\n}"
+    },
+    "06-consent-form": {
+        "title": "Consent Form",
+        "description": "A required checkbox can gate a form action while optional choices remain independent.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Button, Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [accepted, setAccepted] = useState(false);\n  const [updates, setUpdates] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 320 }}>\n      <Checkbox\n        id=\"consent-terms\"\n        label=\"I agree to the terms\"\n        helper=\"Required to create a workspace.\"\n        checked={accepted}\n        onChange={(event) => setAccepted(event.currentTarget.checked)}\n      />\n      <Checkbox\n        id=\"consent-updates\"\n        label=\"Send product updates\"\n        checked={updates}\n        onChange={(event) => setUpdates(event.currentTarget.checked)}\n      />\n      <Button variant=\"primary\" isDisabled={!accepted} styles={{ root: 'w-full' }}>\n        Continue\n      </Button>\n    </Flex>\n  );\n}"
     }
 }

package/dist/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAYtD,QAAA,MAAM,gBAAgB,EAAE,UAAU,EAoCjC,CAAC;AAQF,eAAO,MAAM,cAAc,EAAE,eAkD5B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoBtD,QAAA,MAAM,gBAAgB,EAAE,UAAU,EAyBjC,CAAC;AAQF,eAAO,MAAM,cAAc,EAAE,eAiD5B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/dist/components/Checkbox/index.js

@@ -1,25 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-checkbox.js';
-import Example2, { metadata as metadata2 } from './examples/02-checkbox-group-with-descriptions.js';
+import Example1, { metadata as metadata1 } from './examples/01-basic-states.js';
+import Example2, { metadata as metadata2 } from './examples/02-helper-text.js';
+import Example3, { metadata as metadata3 } from './examples/03-controlled.js';
+import Example4, { metadata as metadata4 } from './examples/04-group.js';
+import Example5, { metadata as metadata5 } from './examples/05-indeterminate.js';
+import Example6, { metadata as metadata6 } from './examples/06-consent-form.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
-    { id: '01-basic-checkbox', Component: Example1, metadata: metadata1 },
-    { id: '02-checkbox-group-with-descriptions', Component: Example2, metadata: metadata2 },
+    { id: '01-basic-states', Component: Example1, metadata: metadata1 },
+    { id: '02-helper-text', Component: Example2, metadata: metadata2 },
+    { id: '03-controlled', Component: Example3, metadata: metadata3 },
+    { id: '04-group', Component: Example4, metadata: metadata4 },
+    { id: '05-indeterminate', Component: Example5, metadata: metadata5 },
+    { id: '06-consent-form', Component: Example6, metadata: metadata6 },
 ];
 const checkboxControls = [
-    {
-        name: 'size',
-        label: 'Size',
-        type: 'select',
-        options: [
-            { label: 'Small', value: 'sm' },
-            { label: 'Medium', value: 'md' },
-            { label: 'Large', value: 'lg' },
-        ],
-        defaultValue: 'md',
-    },
     {
         name: 'checked',
         label: 'Checked',
@@ -63,7 +60,7 @@ export const checkboxDetail = {
             code: checkboxBasicCode,
             preview: _jsx(Checkbox, { label: "Accept terms and conditions" }),
             controls: checkboxControls,
-            renderPreview: (props) => (_jsx(Checkbox, { size: props.size, checked: props.checked ?? false, onChange: (e) => props.handleControlChange('checked', e.target.checked), disabled: props.disabled, label: props.label })),
+            renderPreview: (props) => (_jsx(Checkbox, { checked: props.checked ?? false, onChange: (e) => props.handleControlChange('checked', e.target.checked), disabled: props.disabled, label: props.label })),
         },
         ...loadComponentExamples(examplesData, examplesJson),
     ],

package/dist/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Color/examples/01-basic-color-picker.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=01-basic-color-picker.d.ts.map

package/dist/components/Color/examples/01-basic-color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-basic-color-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/01-basic-color-picker.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAQ9B"}

package/dist/components/Color/examples/01-basic-color-picker.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from 'ui-lab-components';
+export const metadata = {
+    title: 'Color Trigger',
+    description: 'An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.',
+};
+export default function Example() {
+    return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Color, { defaultValue: "#3b82f6", size: "md", children: _jsx(Color.Trigger, { "aria-label": "Choose color" }) }) }));
+}
+//# sourceMappingURL=01-basic-color-picker.js.map

package/dist/components/Color/examples/01-basic-color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-basic-color-picker.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/01-basic-color-picker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,kHAAkH;CAChI,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,KAAK,IAAC,YAAY,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACrC,KAAC,KAAK,CAAC,OAAO,kBAAY,cAAc,GAAG,GACrC,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Color/examples/02-color-picker-opacity.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-color-picker-opacity.d.ts.map

package/dist/components/Color/examples/02-color-picker-opacity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-color-picker-opacity.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/02-color-picker-opacity.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAkB9B"}

package/dist/components/Color/examples/02-color-picker-opacity.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+export const metadata = {
+    title: 'Controlled Color Trigger',
+    description: 'A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.',
+};
+export default function Example() {
+    const [color, setColor] = useState('#ef4444');
+    return (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Color, { value: color, onChange: setColor, showOpacity: true, size: "md", children: _jsx(Color.Trigger, { "aria-label": "Choose accent color" }) }), _jsxs("div", { className: "text-sm text-foreground-400", children: ["Selected: ", color] })] }));
+}
+//# sourceMappingURL=02-color-picker-opacity.js.map

package/dist/components/Color/examples/02-color-picker-opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-color-picker-opacity.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/02-color-picker-opacity.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,0BAA0B;IACjC,WAAW,EAAE,yGAAyG;CACvH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,IAAI,EACjB,IAAI,EAAC,IAAI,YAET,KAAC,KAAK,CAAC,OAAO,kBAAY,qBAAqB,GAAG,GAC5C,EACR,eAAK,SAAS,EAAC,6BAA6B,2BAC/B,KAAK,IACZ,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Color/examples/03-color-picker-preview.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-color-picker-preview.d.ts.map

package/dist/components/Color/examples/03-color-picker-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-color-picker-preview.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-color-picker-preview.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAgB9B"}

package/dist/components/Color/examples/03-color-picker-preview.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+export const metadata = {
+    title: 'Inline Color Area',
+    description: 'Color.Area can be composed directly inside Color when the picker should stay visible.',
+};
+export default function Example() {
+    const [color, setColor] = useState('#8b5cf6');
+    return (_jsx("div", { className: "flex flex-col gap-4 items-center", children: _jsx(Color, { value: color, onChange: setColor, showPreview: true, format: "hex", size: "md", children: _jsx(Color.Area, {}) }) }));
+}
+//# sourceMappingURL=03-color-picker-preview.js.map

package/dist/components/Color/examples/03-color-picker-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-color-picker-preview.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-color-picker-preview.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,uFAAuF;CACrG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,IAAI,EACjB,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,IAAI,YAET,KAAC,KAAK,CAAC,IAAI,KAAG,GACR,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Color/examples/04-color-slider-primitive.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-color-slider-primitive.d.ts.map

package/dist/components/Color/examples/04-color-slider-primitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-color-slider-primitive.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/04-color-slider-primitive.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAoC9B"}

package/dist/components/Color/examples/04-color-slider-primitive.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+export const metadata = {
+    title: 'Standalone Color Slider',
+    description: 'Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.',
+};
+export default function Example() {
+    const [hue, setHue] = useState(215);
+    const [opacity, setOpacity] = useState(0.72);
+    const baseColor = `hsl(${hue} 100% 50%)`;
+    const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;
+    return (_jsxs("div", { className: "w-72 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-sm border border-background-700", style: { backgroundColor: previewColor }, "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0 flex-1 text-sm text-foreground-300", children: [_jsxs("div", { children: ["Hue ", Math.round(hue), " deg"] }), _jsxs("div", { children: ["Opacity ", Math.round(opacity * 100), "%"] })] })] }), _jsx(Color.Slider, { "aria-label": "Accent hue", value: hue, onChange: setHue }), _jsx(Color.Slider, { type: "opacity", "aria-label": "Accent opacity", value: opacity, onChange: setOpacity, color: baseColor })] }));
+}
+//# sourceMappingURL=04-color-slider-primitive.js.map

package/dist/components/Color/examples/04-color-slider-primitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-color-slider-primitive.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/04-color-slider-primitive.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,0GAA0G;CACxH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;IACzC,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,OAAO,GAAG,CAAC;IAEzD,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,yBAAyB,aACtC,cACE,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,iBAC5B,MAAM,GAClB,EACF,eAAK,SAAS,EAAC,4CAA4C,aACzD,kCAAU,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAW,EACpC,sCAAc,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,SAAQ,IAC3C,IACF,EAEN,KAAC,KAAK,CAAC,MAAM,kBACA,YAAY,EACvB,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,MAAM,GAChB,EAEF,KAAC,KAAK,CAAC,MAAM,IACX,IAAI,EAAC,SAAS,gBACH,gBAAgB,EAC3B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,SAAS,GAChB,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Color/examples/index.d.ts

@@ -1,4 +1,9 @@
-export { default as BasicColor } from './01-basic-color.js';
-export { default as OpacitySlider } from './02-opacity-slider.js';
-export { default as FormatSwitching } from './03-format-switching.js';
+export { default as Example1 } from './01-basic-color-picker.js';
+export { metadata as metadata1 } from './01-basic-color-picker.js';
+export { default as Example2 } from './02-color-picker-opacity.js';
+export { metadata as metadata2 } from './02-color-picker-opacity.js';
+export { default as Example3 } from './03-color-picker-preview.js';
+export { metadata as metadata3 } from './03-color-picker-preview.js';
+export { default as Example4 } from './04-color-slider-primitive.js';
+export { metadata as metadata4 } from './04-color-slider-primitive.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Color/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/Color/examples/index.js

@@ -1,4 +1,9 @@
-export { default as BasicColor } from './01-basic-color.js';
-export { default as OpacitySlider } from './02-opacity-slider.js';
-export { default as FormatSwitching } from './03-format-switching.js';
+export { default as Example1 } from './01-basic-color-picker.js';
+export { metadata as metadata1 } from './01-basic-color-picker.js';
+export { default as Example2 } from './02-color-picker-opacity.js';
+export { metadata as metadata2 } from './02-color-picker-opacity.js';
+export { default as Example3 } from './03-color-picker-preview.js';
+export { metadata as metadata3 } from './03-color-picker-preview.js';
+export { default as Example4 } from './04-color-slider-primitive.js';
+export { metadata as metadata4 } from './04-color-slider-primitive.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Color/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/Color/examples.json

@@ -1,12 +1,22 @@
 {
-    "01-basic-color": {
-        "title": "Basic Color",
-        "description": "A simple color component with default configuration showing hex format.",
-        "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#FF6B6B');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          format=\"hex\"\n          defaultValue=\"#FF6B6B\"\n        />\n      </div>\n    </div>\n  );\n}"
+    "01-basic-color-picker": {
+        "title": "Color Trigger",
+        "description": "An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.",
+        "code": "\"use client\";\n\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Color defaultValue=\"#3b82f6\" size=\"md\">\n        <Color.Trigger aria-label=\"Choose color\" />\n      </Color>\n    </div>\n  );\n}"
     },
-    "02-opacity-slider": {
-        "title": "Opacity Slider",
-        "description": "Color picker with opacity/alpha slider enabled for transparent color selection.",
-        "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          showOpacity\n          format=\"rgb\"\n          defaultValue=\"rgba(106, 90, 205, 0.75)\"\n        />\n      </div>\n    </div>\n  );\n}"
+    "02-color-picker-opacity": {
+        "title": "Controlled Color Trigger",
+        "description": "A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#ef4444');\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center\">\n      <Color\n        value={color}\n        onChange={setColor}\n        showOpacity={true}\n        size=\"md\"\n      >\n        <Color.Trigger aria-label=\"Choose accent color\" />\n      </Color>\n      <div className=\"text-sm text-foreground-400\">\n        Selected: {color}\n      </div>\n    </div>\n  );\n}"
+    },
+    "03-color-picker-preview": {
+        "title": "Inline Color Area",
+        "description": "Color.Area can be composed directly inside Color when the picker should stay visible.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#8b5cf6');\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center\">\n      <Color\n        value={color}\n        onChange={setColor}\n        showPreview={true}\n        format=\"hex\"\n        size=\"md\"\n      >\n        <Color.Area />\n      </Color>\n    </div>\n  );\n}"
+    },
+    "04-color-slider-primitive": {
+        "title": "Standalone Color Slider",
+        "description": "Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.",
+        "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [hue, setHue] = useState(215);\n  const [opacity, setOpacity] = useState(0.72);\n\n  const baseColor = `hsl(${hue} 100% 50%)`;\n  const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;\n\n  return (\n    <div className=\"w-72 space-y-4\">\n      <div className=\"flex items-center gap-3\">\n        <div\n          className=\"h-10 w-10 rounded-sm border border-background-700\"\n          style={{ backgroundColor: previewColor }}\n          aria-hidden=\"true\"\n        />\n        <div className=\"min-w-0 flex-1 text-sm text-foreground-300\">\n          <div>Hue {Math.round(hue)} deg</div>\n          <div>Opacity {Math.round(opacity * 100)}%</div>\n        </div>\n      </div>\n\n      <Color.Slider\n        aria-label=\"Accent hue\"\n        value={hue}\n        onChange={setHue}\n      />\n\n      <Color.Slider\n        type=\"opacity\"\n        aria-label=\"Accent opacity\"\n        value={opacity}\n        onChange={setOpacity}\n        color={baseColor}\n      />\n    </div>\n  );\n}"
     }
 }

package/dist/components/Color/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Color/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAYtD,QAAA,MAAM,aAAa,EAAE,UAAU,EAkC9B,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,eA0CzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Color/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAgBtD,QAAA,MAAM,aAAa,EAAE,UAAU,EAkC9B,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,eA0CzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}

package/dist/components/Color/index.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-color.js';
-import Example2, { metadata as metadata2 } from './examples/02-opacity-slider.js';
+import Example1, { metadata as metadata1 } from './examples/01-basic-color-picker.js';
+import Example2, { metadata as metadata2 } from './examples/02-color-picker-opacity.js';
+import Example3, { metadata as metadata3 } from './examples/03-color-picker-preview.js';
+import Example4, { metadata as metadata4 } from './examples/04-color-slider-primitive.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 // Define examplesData locally
 const examplesData = [
-    { id: '01-basic-color', Component: Example1, metadata: metadata1 },
-    { id: '02-opacity-slider', Component: Example2, metadata: metadata2 },
+    { id: '01-basic-color-picker', Component: Example1, metadata: metadata1 },
+    { id: '02-color-picker-opacity', Component: Example2, metadata: metadata2 },
+    { id: '03-color-picker-preview', Component: Example3, metadata: metadata3 },
+    { id: '04-color-slider-primitive', Component: Example4, metadata: metadata4 },
 ];
 const colorControls = [
     {

package/dist/components/Color/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Color/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,8BAA8B;AAC9B,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IAClE,EAAE,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACtE,CAAC;AAEF,MAAM,aAAa,GAAiB;IAClC;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;SAChC;QACD,YAAY,EAAE,IAAI;KACnB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,KAAK;KACpB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;SAC/B;QACD,YAAY,EAAE,KAAK;KACpB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;EAOrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,2IAA2I;IACxJ,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,oIAEI,EACJ,cAAI,SAAS,EAAC,sCAAsC,aAClD,6EAA0D,EAC1D,iFAAyD,EACzD,6EAA0D,EAC1D,kEAA+C,EAC/C,8EAA2D,EAC3D,sEAAmD,IAChD,EACL,sMAEI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,+BAA+B;YAC5C,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,KAAC,KAAK,IAAC,YAAY,EAAC,SAAS,GAAG;YACzC,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,IACJ,YAAY,EAAC,SAAS,EACtB,IAAI,EAAE,KAAK,CAAC,IAA0B,EACtC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,MAAuB,EACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACH;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Color/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Expand/examples/01-basic.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=01-basic.d.ts.map

package/dist/components/Expand/examples/01-basic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-basic.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/01-basic.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAU9B"}

package/dist/components/Expand/examples/01-basic.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Expand } from 'ui-lab-components';
+export const metadata = {
+    title: 'Basic',
+    description: 'Preset mode using the title prop — the simplest way to render a labeled expandable section.',
+};
+export default function Example() {
+    return (_jsx("div", { className: "w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700", children: _jsx(Expand, { title: "What is UI Lab?", children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: "UI Lab is a component library built for building beautiful, accessible interfaces with a consistent design system." }) }) }));
+}
+//# sourceMappingURL=01-basic.js.map

package/dist/components/Expand/examples/01-basic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-basic.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/01-basic.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,6FAA6F;CAC3G,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,cAAK,SAAS,EAAC,wFAAwF,YACrG,KAAC,MAAM,IAAC,KAAK,EAAC,iBAAiB,YAC7B,YAAG,SAAS,EAAC,uCAAuC,mIAEhD,GACG,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/02-accordion.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-accordion.d.ts.map

package/dist/components/Expand/examples/02-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/02-accordion.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAoBF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAiB9B"}

package/dist/components/Expand/examples/02-accordion.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Expand } from 'ui-lab-components';
+export const metadata = {
+    title: 'Accordion',
+    description: 'Controlled expand group where only one item can be open at a time.',
+};
+const items = [
+    {
+        id: 'shipping',
+        title: 'Shipping & Delivery',
+        content: 'Standard shipping takes 3–5 business days. Express options are available at checkout for next-day delivery.',
+    },
+    {
+        id: 'returns',
+        title: 'Returns & Refunds',
+        content: 'Items can be returned within 30 days of purchase. Refunds are processed within 5–7 business days after we receive the item.',
+    },
+    {
+        id: 'warranty',
+        title: 'Warranty',
+        content: 'All products include a 12-month manufacturer warranty. Extended coverage can be purchased at checkout.',
+    },
+];
+export default function Example() {
+    const [open, setOpen] = useState('shipping');
+    return (_jsx("div", { className: "w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700", children: items.map((item) => (_jsx(Expand, { title: item.title, isExpanded: open === item.id, onExpandedChange: (expanded) => setOpen(expanded ? item.id : null), children: _jsx("p", { className: "text-sm text-foreground-400 px-3 py-3", children: item.content }) }, item.id))) }));
+}
+//# sourceMappingURL=02-accordion.js.map

package/dist/components/Expand/examples/02-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-accordion.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/02-accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,oEAAoE;CAClF,CAAC;AAEF,MAAM,KAAK,GAAG;IACZ;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,qBAAqB;QAC5B,OAAO,EAAE,6GAA6G;KACvH;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,mBAAmB;QAC1B,OAAO,EAAE,6HAA6H;KACvI;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,wGAAwG;KAClH;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAgB,UAAU,CAAC,CAAC;IAE5D,OAAO,CACL,cAAK,SAAS,EAAC,wFAAwF,YACpG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,MAAM,IAEL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,KAAK,IAAI,CAAC,EAAE,EAC5B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAElE,YAAG,SAAS,EAAC,uCAAuC,YAAE,IAAI,CAAC,OAAO,GAAK,IALlE,IAAI,CAAC,EAAE,CAML,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/03-custom-trigger.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-custom-trigger.d.ts.map

package/dist/components/Expand/examples/03-custom-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-custom-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/03-custom-trigger.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAqB9B"}

package/dist/components/Expand/examples/03-custom-trigger.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand, Flex, Badge } from 'ui-lab-components';
+import { FaUser } from 'react-icons/fa6';
+export const metadata = {
+    title: 'Custom Trigger',
+    description: 'Compound mode with a fully composed trigger — custom icon, badge, and layout.',
+};
+export default function Example() {
+    return (_jsx("div", { className: "w-full max-w-sm border border-background-700 rounded-sm", children: _jsxs(Expand, { children: [_jsxs(Expand.Trigger, { children: [_jsxs(Flex, { align: "center", gap: "xs", className: "flex-1 px-3 py-2.5", children: [_jsx(FaUser, { className: "text-foreground-400 text-xs shrink-0" }), _jsx("span", { className: "text-sm font-medium", children: "Account Settings" }), _jsx(Badge, { className: "ml-auto mr-2", children: "New" })] }), _jsx(Expand.Icon, {})] }), _jsx(Expand.Divider, {}), _jsx(Expand.Content, { children: _jsx(Flex, { direction: "column", gap: "xs", className: "px-3 py-3", children: _jsx("p", { className: "text-sm text-foreground-400", children: "Manage your profile, password, and notification preferences." }) }) })] }) }));
+}
+//# sourceMappingURL=03-custom-trigger.js.map

package/dist/components/Expand/examples/03-custom-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-custom-trigger.js","sourceRoot":"","sources":["../../../../src/components/Expand/examples/03-custom-trigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,+EAA+E;CAC7F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,cAAK,SAAS,EAAC,yDAAyD,YACtE,MAAC,MAAM,eACL,MAAC,MAAM,CAAC,OAAO,eACb,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,aAC1D,KAAC,MAAM,IAAC,SAAS,EAAC,sCAAsC,GAAG,EAC3D,eAAM,SAAS,EAAC,qBAAqB,iCAAwB,EAC7D,KAAC,KAAK,IAAC,SAAS,EAAC,cAAc,oBAAY,IACtC,EACP,KAAC,MAAM,CAAC,IAAI,KAAG,IACA,EACjB,KAAC,MAAM,CAAC,OAAO,KAAG,EAClB,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,YACrD,YAAG,SAAS,EAAC,6BAA6B,6EAAiE,GACtG,GACQ,IACV,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Expand/examples/04-directions.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-directions.d.ts.map

package/dist/components/Expand/examples/04-directions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-directions.d.ts","sourceRoot":"","sources":["../../../../src/components/Expand/examples/04-directions.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAyB9B"}