@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.4

package/SegmentedControl/SegmentedControlTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabs.js","sources":["../../src/SegmentedControl/SegmentedControlTabs.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { Tabs } from \"radix-ui\";\nimport { cn, withStaticProps } from \"~/utils.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport {\n    SegmentedControlTabsContext,\n    type SegmentedTabItem\n} from \"./SegmentedControlTabsContext.js\";\nimport { SegmentedControlTab } from \"./SegmentedControlTab.js\";\n\nexport interface SegmentedControlTabsProps {\n    children: React.ReactNode;\n    variant?: SegmentedControlPrimitiveProps[\"variant\"];\n    defaultValue?: string;\n    className?: string;\n}\n\nconst BaseSegmentedControlTabs = ({\n    children,\n    variant,\n    defaultValue,\n    className\n}: SegmentedControlTabsProps) => {\n    const [tabs, setTabs] = useState<SegmentedTabItem[]>([]);\n    const [activeTab, setActiveTab] = useState(defaultValue ?? \"\");\n\n    useEffect(() => {\n        if (!activeTab && tabs.length > 0) {\n            setActiveTab(tabs[0].value);\n        }\n    }, [tabs]);\n\n    const items = useMemo(\n        () =>\n            tabs\n                .filter(tab => tab.visible !== false)\n                .map(tab => ({\n                    value: tab.value,\n                    label: tab.trigger,\n                    icon: tab.icon,\n                    disabled: tab.disabled\n                })),\n        [tabs]\n    );\n\n    const context = useMemo(\n        () => ({\n            activeTab,\n            setActiveTab,\n            addTab(tab: SegmentedTabItem) {\n                setTabs(prev => {\n                    const idx = prev.findIndex(t => t.value === tab.value);\n                    if (idx > -1) {\n                        return [...prev.slice(0, idx), tab, ...prev.slice(idx + 1)];\n                    }\n                    return [...prev, tab];\n                });\n            },\n            removeTab(id: string) {\n                setTabs(prev => prev.filter(t => t.id !== id));\n            }\n        }),\n        [activeTab, setActiveTab]\n    );\n\n    return (\n        <SegmentedControlTabsContext.Provider value={context}>\n            <Tabs.Root value={activeTab} onValueChange={setActiveTab} className={className}>\n                <SegmentedControlPrimitive\n                    items={items}\n                    value={activeTab}\n                    onChange={setActiveTab}\n                    variant={variant}\n                    fullWidth\n                />\n                {tabs.map(tab => (\n                    <Tabs.Content\n                        key={tab.id}\n                        value={tab.value}\n                        forceMount\n                        className={cn(\"focus-visible:outline-none\", \"data-[state=inactive]:hidden\")}\n                    >\n                        {tab.content}\n                    </Tabs.Content>\n                ))}\n                {children}\n            </Tabs.Root>\n        </SegmentedControlTabsContext.Provider>\n    );\n};\n\nexport const SegmentedControlTabs = withStaticProps(BaseSegmentedControlTabs, {\n    Tab: SegmentedControlTab\n});\n"],"names":["BaseSegmentedControlTabs","children","variant","defaultValue","className","tabs","setTabs","useState","activeTab","setActiveTab","useEffect","items","useMemo","tab","context","prev","idx","t","id","SegmentedControlTabsContext","Tabs","SegmentedControlPrimitive","cn","SegmentedControlTabs","withStaticProps","SegmentedControlTab"],"mappings":";;;;;;AAkBA,MAAMA,2BAA2B,CAAC,EAC9BC,QAAQ,EACRC,OAAO,EACPC,YAAY,EACZC,SAAS,EACe;IACxB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAA6B,EAAE;IACvD,MAAM,CAACC,WAAWC,aAAa,GAAGF,SAASJ,gBAAgB;IAE3DO,UAAU;QACN,IAAI,CAACF,aAAaH,KAAK,MAAM,GAAG,GAC5BI,aAAaJ,IAAI,CAAC,EAAE,CAAC,KAAK;IAElC,GAAG;QAACA;KAAK;IAET,MAAMM,QAAQC,QACV,IACIP,KACK,MAAM,CAACQ,CAAAA,MAAOA,AAAgB,UAAhBA,IAAI,OAAO,EACzB,GAAG,CAACA,CAAAA,MAAQ;gBACT,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,OAAO;gBAClB,MAAMA,IAAI,IAAI;gBACd,UAAUA,IAAI,QAAQ;YAC1B,KACR;QAACR;KAAK;IAGV,MAAMS,UAAUF,QACZ,IAAO;YACHJ;YACAC;YACA,QAAOI,GAAqB;gBACxBP,QAAQS,CAAAA;oBACJ,MAAMC,MAAMD,KAAK,SAAS,CAACE,CAAAA,IAAKA,EAAE,KAAK,KAAKJ,IAAI,KAAK;oBACrD,IAAIG,MAAM,IACN,OAAO;2BAAID,KAAK,KAAK,CAAC,GAAGC;wBAAMH;2BAAQE,KAAK,KAAK,CAACC,MAAM;qBAAG;oBAE/D,OAAO;2BAAID;wBAAMF;qBAAI;gBACzB;YACJ;YACA,WAAUK,EAAU;gBAChBZ,QAAQS,CAAAA,OAAQA,KAAK,MAAM,CAACE,CAAAA,IAAKA,EAAE,EAAE,KAAKC;YAC9C;QACJ,IACA;QAACV;QAAWC;KAAa;IAG7B,OAAO,WAAP,GACI,oBAACU,4BAA4B,QAAQ;QAAC,OAAOL;qBACzC,oBAACM,KAAK,IAAI;QAAC,OAAOZ;QAAW,eAAeC;QAAc,WAAWL;qBACjE,oBAACiB,2BAAyBA;QACtB,OAAOV;QACP,OAAOH;QACP,UAAUC;QACV,SAASP;QACT;QAEHG,KAAK,GAAG,CAACQ,CAAAA,MAAAA,WAAAA,GACN,oBAACO,KAAK,OAAO;YACT,KAAKP,IAAI,EAAE;YACX,OAAOA,IAAI,KAAK;YAChB;YACA,WAAWS,GAAG,8BAA8B;WAE3CT,IAAI,OAAO,IAGnBZ;AAIjB;AAEO,MAAMsB,uBAAuBC,gBAAgBxB,0BAA0B;IAC1E,KAAKyB;AACT"}

package/SegmentedControl/SegmentedControlTabsContext.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+export interface SegmentedTabItem {
+    id: string;
+    value: string;
+    trigger: React.ReactNode;
+    icon?: React.ReactElement;
+    content: React.ReactNode;
+    disabled?: boolean;
+    visible?: boolean;
+}
+interface SegmentedControlTabsContextValue {
+    addTab: (tab: SegmentedTabItem) => void;
+    removeTab: (id: string) => void;
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}
+export declare const SegmentedControlTabsContext: React.Context<SegmentedControlTabsContextValue>;
+export declare const useSegmentedTabs: () => SegmentedControlTabsContextValue;
+export {};

package/SegmentedControl/SegmentedControlTabsContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const SegmentedControlTabsContext = createContext({
+    addTab: ()=>void 0,
+    removeTab: ()=>void 0,
+    activeTab: "",
+    setActiveTab: ()=>void 0
+});
+const useSegmentedTabs = ()=>useContext(SegmentedControlTabsContext);
+export { SegmentedControlTabsContext, useSegmentedTabs };
+
+//# sourceMappingURL=SegmentedControlTabsContext.js.map

package/SegmentedControl/SegmentedControlTabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabsContext.js","sources":["../../src/SegmentedControl/SegmentedControlTabsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type React from \"react\";\n\nexport interface SegmentedTabItem {\n    id: string;\n    value: string;\n    trigger: React.ReactNode;\n    icon?: React.ReactElement;\n    content: React.ReactNode;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\ninterface SegmentedControlTabsContextValue {\n    addTab: (tab: SegmentedTabItem) => void;\n    removeTab: (id: string) => void;\n    activeTab: string;\n    setActiveTab: (tab: string) => void;\n}\n\nexport const SegmentedControlTabsContext = createContext<SegmentedControlTabsContextValue>({\n    addTab: () => undefined,\n    removeTab: () => undefined,\n    activeTab: \"\",\n    setActiveTab: () => undefined\n});\n\nexport const useSegmentedTabs = () => useContext(SegmentedControlTabsContext);\n"],"names":["SegmentedControlTabsContext","createContext","undefined","useSegmentedTabs","useContext"],"mappings":";AAoBO,MAAMA,8BAA8BC,cAAgD;IACvF,QAAQ,IAAMC;IACd,WAAW,IAAMA;IACjB,WAAW;IACX,cAAc,IAAMA;AACxB;AAEO,MAAMC,mBAAmB,IAAMC,WAAWJ"}

package/SegmentedControl/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";

package/SegmentedControl/index.js

@@ -1,3 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -32,6 +32,10 @@ interface SegmentedControlPrimitiveProps {
      * Disabled state for all items.
      */
     disabled?: boolean;
+    /**
+     * Stretch the control to fill its container width, with buttons sharing space equally.
+     */
+    fullWidth?: boolean;
 }
 interface SegmentedControlVm {
     items: SegmentedControlItemFormatted[];
@@ -40,7 +44,7 @@ interface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {
     items: SegmentedControlItemFormatted[];
     changeValue: (value: string) => void;
 }
-declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled }: SegmentedControlRendererProps) => React.JSX.Element;
+declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled, fullWidth }: SegmentedControlRendererProps) => React.JSX.Element;
 /**
  * Segmented Control Primitive Component
  */

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -65,11 +65,11 @@ const SegmentedControlItemButton = ({ item, isActive, onValueChange, variant, cl
         label: String(item.label),
         color: "neutral-strong"
     }), item.label);
-const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled, fullWidth })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
         role: "radiogroup",
         className: cn(segmentedControlRootVariants({
             variant
-        }), className)
+        }), fullWidth && "flex w-full", className)
     }, items.map((item)=>/*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlItemButton, {
             key: item.id,
             item: {
@@ -78,7 +78,8 @@ const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light"
             },
             isActive: value === item.value,
             onValueChange: changeValue,
-            variant: variant
+            variant: variant,
+            className: fullWidth ? "flex-1" : void 0
         })));
 const SegmentedControlPrimitive = (props)=>{
     const { vm, changeValue } = useSegmentedControl(props);

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled\n}: SegmentedControlRendererProps) => {\n    return (\n        <div role=\"radiogroup\" className={cn(segmentedControlRootVariants({ variant }), className)}>\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"names":["segmentedControlItemVariants","cva","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","variant","className","props","cn","Icon","String","SegmentedControlRenderer","items","changeValue","value","disabled","SegmentedControlPrimitive","vm","useSegmentedControl"],"mappings":";;;;AAYA,MAAMA,+BAA+BC,IACjC;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAGJ,MAAMC,+BAA+BD,IAAI,uCAAuC;IAC5E,UAAU;QACN,SAAS;YACL,OAAO;YACP,QAAQ;YACR,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYA,MAAME,6BAA6B,CAAC,EAChCC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACT,GAAGC,OACqB,GACjB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,MAAK;QACL,gBAAcJ;QACd,cAAYA,WAAW,WAAW;QAClC,UAAUD,KAAK,QAAQ;QACvB,SAAS,IAAME,cAAcF,KAAK,KAAK;QACvC,WAAWM,GAAGV,6BAA6B;YAAEO;QAAQ,IAAIC;QACxD,GAAGC,KAAK;OAERL,KAAK,IAAI,IAAI,WAAJ,GACN,sCAACO,MAAIA;QACD,MAAMP,KAAK,IAAI;QACf,MAAM;QACN,OAAOQ,OAAOR,KAAK,KAAK;QACxB,OAAO;QAGdA,KAAK,KAAK;AAyCvB,MAAMS,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLT,UAAU,OAAO,EACjBC,SAAS,EACTS,QAAQ,EACoB,GACrB,WAAP,GACI,sCAAC;QAAI,MAAK;QAAa,WAAWP,GAAGR,6BAA6B;YAAEK;QAAQ,IAAIC;OAC3EM,MAAM,GAAG,CAACV,CAAAA,OAAAA,WAAAA,GACP,sCAACD,4BAA0BA;YACvB,KAAKC,KAAK,EAAE;YACZ,MAAM;gBAAE,GAAGA,IAAI;gBAAE,UAAUa,YAAYb,KAAK,QAAQ;YAAC;YACrD,UAAUY,UAAUZ,KAAK,KAAK;YAC9B,eAAeW;YACf,SAASR;;AAU7B,MAAMW,4BAA4B,CAACT;IAC/B,MAAM,EAAEU,EAAE,EAAEJ,WAAW,EAAE,GAAGK,oBAAoBX;IAChD,OAAO,WAAP,GAAO,sCAACI,0BAAwBA;QAAE,GAAGJ,KAAK;QAAE,OAAOU,GAAG,KAAK;QAAE,aAAaJ;;AAC9E"}
+{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n    /**\n     * Stretch the control to fill its container width, with buttons sharing space equally.\n     */\n    fullWidth?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled,\n    fullWidth\n}: SegmentedControlRendererProps) => {\n    return (\n        <div\n            role=\"radiogroup\"\n            className={cn(\n                segmentedControlRootVariants({ variant }),\n                fullWidth && \"flex w-full\",\n                className\n            )}\n        >\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                    className={fullWidth ? \"flex-1\" : undefined}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"names":["segmentedControlItemVariants","cva","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","variant","className","props","cn","Icon","String","SegmentedControlRenderer","items","changeValue","value","disabled","fullWidth","undefined","SegmentedControlPrimitive","vm","useSegmentedControl"],"mappings":";;;;AAYA,MAAMA,+BAA+BC,IACjC;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAGJ,MAAMC,+BAA+BD,IAAI,uCAAuC;IAC5E,UAAU;QACN,SAAS;YACL,OAAO;YACP,QAAQ;YACR,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYA,MAAME,6BAA6B,CAAC,EAChCC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACT,GAAGC,OACqB,GACjB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,MAAK;QACL,gBAAcJ;QACd,cAAYA,WAAW,WAAW;QAClC,UAAUD,KAAK,QAAQ;QACvB,SAAS,IAAME,cAAcF,KAAK,KAAK;QACvC,WAAWM,GAAGV,6BAA6B;YAAEO;QAAQ,IAAIC;QACxD,GAAGC,KAAK;OAERL,KAAK,IAAI,IAAI,WAAJ,GACN,sCAACO,MAAIA;QACD,MAAMP,KAAK,IAAI;QACf,MAAM;QACN,OAAOQ,OAAOR,KAAK,KAAK;QACxB,OAAO;QAGdA,KAAK,KAAK;AA6CvB,MAAMS,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLT,UAAU,OAAO,EACjBC,SAAS,EACTS,QAAQ,EACRC,SAAS,EACmB,GACrB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,WAAWR,GACPR,6BAA6B;YAAEK;QAAQ,IACvCW,aAAa,eACbV;OAGHM,MAAM,GAAG,CAACV,CAAAA,OAAAA,WAAAA,GACP,sCAACD,4BAA0BA;YACvB,KAAKC,KAAK,EAAE;YACZ,MAAM;gBAAE,GAAGA,IAAI;gBAAE,UAAUa,YAAYb,KAAK,QAAQ;YAAC;YACrD,UAAUY,UAAUZ,KAAK,KAAK;YAC9B,eAAeW;YACf,SAASR;YACT,WAAWW,YAAY,WAAWC;;AAUtD,MAAMC,4BAA4B,CAACX;IAC/B,MAAM,EAAEY,EAAE,EAAEN,WAAW,EAAE,GAAGO,oBAAoBb;IAChD,OAAO,WAAP,GAAO,sCAACI,0BAAwBA;QAAE,GAAGJ,KAAK;QAAE,OAAOY,GAAG,KAAK;QAAE,aAAaN;;AAC9E"}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
 declare const meta: Meta<typeof SegmentedControlPrimitive>;
 export default meta;
@@ -11,3 +11,4 @@ export declare const VariantDimmed: Story;
 export declare const VariantGhost: Story;
 export declare const Disabled: Story;
 export declare const PartiallyDisabled: Story;
+export declare const FullWidth: Story;

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js

@@ -151,7 +151,14 @@ const PartiallyDisabled = {
         value: "item1"
     }
 };
+const FullWidth = {
+    args: {
+        items: items,
+        value: "item1",
+        fullWidth: true
+    }
+};
 export default SegmentedControlPrimitive_stories;
-export { Default, Disabled, PartiallyDisabled, VariantDimmed, VariantGhost, VariantLight, WithDefaultOption, WithIcons };
+export { Default, Disabled, FullWidth, PartiallyDisabled, VariantDimmed, VariantGhost, VariantLight, WithDefaultOption, WithIcons };
 
 //# sourceMappingURL=SegmentedControlPrimitive.stories.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.stories.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n"],"names":["meta","SegmentedControlPrimitive","args","value","setValue","useState","items","itemsWithIcons","Icon","LockIcon","Default","WithDefaultOption","WithIcons","VariantLight","VariantDimmed","VariantGhost","Disabled","PartiallyDisabled"],"mappings":";;;;AAMA,MAAMA,OAA+C;IACjD,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASC,SAASD;0BAEhC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA;IAI9C;AACJ;AAEA,0CAAeH;AAIf,MAAMM,QAAQ;IACV;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;CACrC;AAED,MAAMC,iBAAiB;IACnB;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;CACtF;AAEM,MAAMC,UAAiB;IAC1B,MAAM;QACFJ,OAAAA;IACJ;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACFL,OAAAA;QACA,OAAO;IACX;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;QACF,OAAOL;QACP,OAAO;IACX;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACFP,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,MAAM;QACFR,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMS,eAAsB;IAC/B,QAAQb,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOI;YACP,OAAOH;YACP,UAAUA,CAAAA,QAASC,SAASD;YAC5B,SAAQ;;IAIxB;AACJ;AAEO,MAAMa,WAAkB;IAC3B,MAAM;QACFV,OAAAA;QACA,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;YAC7D;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;SAChE;QACD,OAAO;IACX;AACJ"}
+{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.stories.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n\nexport const FullWidth: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        fullWidth: true\n    }\n};\n"],"names":["meta","SegmentedControlPrimitive","args","value","setValue","useState","items","itemsWithIcons","Icon","LockIcon","Default","WithDefaultOption","WithIcons","VariantLight","VariantDimmed","VariantGhost","Disabled","PartiallyDisabled","FullWidth"],"mappings":";;;;AAMA,MAAMA,OAA+C;IACjD,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASC,SAASD;0BAEhC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA;IAI9C;AACJ;AAEA,0CAAeH;AAIf,MAAMM,QAAQ;IACV;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;CACrC;AAED,MAAMC,iBAAiB;IACnB;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;CACtF;AAEM,MAAMC,UAAiB;IAC1B,MAAM;QACFJ,OAAAA;IACJ;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACFL,OAAAA;QACA,OAAO;IACX;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;QACF,OAAOL;QACP,OAAO;IACX;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACFP,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,MAAM;QACFR,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMS,eAAsB;IAC/B,QAAQb,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOI;YACP,OAAOH;YACP,UAAUA,CAAAA,QAASC,SAASD;YAC5B,SAAQ;;IAIxB;AACJ;AAEO,MAAMa,WAAkB;IAC3B,MAAM;QACFV,OAAAA;QACA,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;YAC7D;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;SAChE;QACD,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACFZ,OAAAA;QACA,OAAO;QACP,WAAW;IACf;AACJ"}

package/Select/Select.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Select } from "../Select/index.js";
 declare const meta: Meta<typeof Select>;
 export default meta;

package/Select/Select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Select } from \"~/Select/index.js\";\n\nconst meta: Meta<typeof Select> = {\n    title: \"Components/Form/Select\",\n    component: Select,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Select {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"CAT\", label: \"Central Africa Time (UTC+2)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" },\n            { value: \"CST_CHINA\", label: \"China Standard Time (UTC+8)\" },\n            { value: \"JST\", label: \"Japan Standard Time (UTC+9)\" },\n            { value: \"AWST\", label: \"Australian Western Standard Time (UTC+8)\" },\n            { value: \"NZST\", label: \"New Zealand Standard Time (UTC+12)\" },\n            { value: \"FJT\", label: \"Fiji Time (UTC+12)\" },\n            { value: \"ART\", label: \"Argentina Time (UTC-3)\" },\n            { value: \"BOT\", label: \"Bolivia Time (UTC-4)\" },\n            { value: \"BRT\", label: \"Brasilia Time (UTC-3)\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Time Zone\",\n        description: \"Select your preferred time zone\",\n        note: \"This setting will affect how times are displayed throughout the application\",\n        required: true,\n        disabled: false,\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" }\n        ]\n    }\n};\n"],"names":["meta","Select","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","newValue"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACrD;AACJ;AAEA,uBAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;YACxD;gBAAE,OAAO;gBAAa,OAAO;YAA8B;YAC3D;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAQ,OAAO;YAA2C;YACnE;gBAAE,OAAO;gBAAQ,OAAO;YAAqC;YAC7D;gBAAE,OAAO;gBAAO,OAAO;YAAqB;YAC5C;gBAAE,OAAO;gBAAO,OAAO;YAAyB;YAChD;gBAAE,OAAO;gBAAO,OAAO;YAAuB;YAC9C;gBAAE,OAAO;gBAAO,OAAO;YAAwB;SAClD;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GAAO,oBAACJ,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUY,CAAAA,WAAYX,SAASW;;IAC1E;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;SAC3D;IACL;AACJ"}
+{"version":3,"file":"Select/Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Select } from \"~/Select/index.js\";\n\nconst meta: Meta<typeof Select> = {\n    title: \"Components/Form/Select\",\n    component: Select,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Select {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"CAT\", label: \"Central Africa Time (UTC+2)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" },\n            { value: \"CST_CHINA\", label: \"China Standard Time (UTC+8)\" },\n            { value: \"JST\", label: \"Japan Standard Time (UTC+9)\" },\n            { value: \"AWST\", label: \"Australian Western Standard Time (UTC+8)\" },\n            { value: \"NZST\", label: \"New Zealand Standard Time (UTC+12)\" },\n            { value: \"FJT\", label: \"Fiji Time (UTC+12)\" },\n            { value: \"ART\", label: \"Argentina Time (UTC-3)\" },\n            { value: \"BOT\", label: \"Bolivia Time (UTC-4)\" },\n            { value: \"BRT\", label: \"Brasilia Time (UTC-3)\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Time Zone\",\n        description: \"Select your preferred time zone\",\n        note: \"This setting will affect how times are displayed throughout the application\",\n        required: true,\n        disabled: false,\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" }\n        ]\n    }\n};\n"],"names":["meta","Select","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","newValue"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACrD;AACJ;AAEA,uBAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;YACxD;gBAAE,OAAO;gBAAa,OAAO;YAA8B;YAC3D;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAQ,OAAO;YAA2C;YACnE;gBAAE,OAAO;gBAAQ,OAAO;YAAqC;YAC7D;gBAAE,OAAO;gBAAO,OAAO;YAAqB;YAC5C;gBAAE,OAAO;gBAAO,OAAO;YAAyB;YAChD;gBAAE,OAAO;gBAAO,OAAO;YAAuB;YAC9C;gBAAE,OAAO;gBAAO,OAAO;YAAwB;SAClD;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GAAO,oBAACJ,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUY,CAAAA,WAAYX,SAASW;;IAC1E;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;SAC3D;IACL;AACJ"}

package/Select/primitives/SelectPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SelectPrimitive } from "./SelectPrimitive.js";
 declare const meta: Meta<typeof SelectPrimitive>;
 export default meta;

package/Select/primitives/SelectPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/SelectPrimitive.stories.js","sources":["../../../src/Select/primitives/SelectPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { SelectPrimitive } from \"./SelectPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SelectPrimitive> = {\n    title: \"Components/Form Primitives/Select\",\n    component: SelectPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\", \"ghost\"] },\n        size: { control: \"select\", options: [\"md\", \"lg\", \"xl\"] },\n        disabled: { control: \"boolean\" },\n        invalid: { control: \"boolean\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SelectPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SelectPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />\n    }\n};\n\nexport const WithEndIconIcon: Story = {\n    args: {\n        ...Default.args,\n        endIcon: <SearchIcon />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />,\n        endIcon: <ChevronRight />\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithOptionGroups: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"North America\",\n                options: [\n                    { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n                    { label: \"Central Standard Time (CST)\", value: \"cst\" },\n                    { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n                ]\n            },\n            {\n                label: \"Europe & Africa\",\n                options: [\n                    { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n                    { label: \"Central European Time (CET)\", value: \"cet\" },\n                    { label: \"Central Africa Time (CAT)\", value: \"cat\" }\n                ]\n            },\n            {\n                label: \"Asia\",\n                options: [\n                    { label: \"India Standard Time (IST)\", value: \"ist\" },\n                    { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n                    { label: \"Japan Standard Time (JST)\", value: \"jst\" }\n                ]\n            },\n            {\n                label: \"Australia & Pacific\",\n                options: [\n                    { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n                    { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n                    { label: \"Fiji Time (FJT)\", value: \"fjt\" }\n                ]\n            },\n            {\n                label: \"South America\",\n                options: [\n                    { label: \"Argentina Time (ART)\", value: \"art\" },\n                    { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n                    { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n                ]\n            }\n        ]\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SelectPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(undefined)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SelectPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithCustomPlaceholder","WithStartIcon","SearchIcon","WithEndIconIcon","WithStartAndEndIcons","ChevronRight","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithFormattedOptions","WithOptionGroups","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button","undefined"],"mappings":"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"}
+{"version":3,"file":"Select/primitives/SelectPrimitive.stories.js","sources":["../../../src/Select/primitives/SelectPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { SelectPrimitive } from \"./SelectPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SelectPrimitive> = {\n    title: \"Components/Form Primitives/Select\",\n    component: SelectPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\", \"ghost\"] },\n        size: { control: \"select\", options: [\"md\", \"lg\", \"xl\"] },\n        disabled: { control: \"boolean\" },\n        invalid: { control: \"boolean\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SelectPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SelectPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />\n    }\n};\n\nexport const WithEndIconIcon: Story = {\n    args: {\n        ...Default.args,\n        endIcon: <SearchIcon />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />,\n        endIcon: <ChevronRight />\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithOptionGroups: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"North America\",\n                options: [\n                    { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n                    { label: \"Central Standard Time (CST)\", value: \"cst\" },\n                    { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n                ]\n            },\n            {\n                label: \"Europe & Africa\",\n                options: [\n                    { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n                    { label: \"Central European Time (CET)\", value: \"cet\" },\n                    { label: \"Central Africa Time (CAT)\", value: \"cat\" }\n                ]\n            },\n            {\n                label: \"Asia\",\n                options: [\n                    { label: \"India Standard Time (IST)\", value: \"ist\" },\n                    { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n                    { label: \"Japan Standard Time (JST)\", value: \"jst\" }\n                ]\n            },\n            {\n                label: \"Australia & Pacific\",\n                options: [\n                    { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n                    { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n                    { label: \"Fiji Time (FJT)\", value: \"fjt\" }\n                ]\n            },\n            {\n                label: \"South America\",\n                options: [\n                    { label: \"Argentina Time (ART)\", value: \"art\" },\n                    { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n                    { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n                ]\n            }\n        ]\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SelectPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(undefined)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SelectPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithCustomPlaceholder","WithStartIcon","SearchIcon","WithEndIconIcon","WithStartAndEndIcons","ChevronRight","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithFormattedOptions","WithOptionGroups","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button","undefined"],"mappings":"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"}

package/Separator/Separator.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Separator } from "./Separator.js";
 declare const meta: Meta<typeof Separator>;
 export default meta;

package/Separator/Separator.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator/Separator.stories.js","sources":["../../src/Separator/Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Separator } from \"./Separator.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true,\n        children: undefined,\n        labelPosition: \"middle\"\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        },\n        children: {\n            description:\n                \"Optional label text to display with the separator. Text will use text-neutral-primary text-md font-semibold styles.\",\n            control: \"text\"\n        },\n        labelPosition: {\n            description: \"Position of the label when children are provided.\",\n            control: \"select\",\n            options: [\"start\", \"middle\", \"end\"]\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"flex justify-center h-6 text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Transparent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Transparent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator is transparent and not visible\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"transparent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Base: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Base Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-white\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"base\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Muted: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Muted Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-muted\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"muted\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Strong: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Strong Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-strong\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"strong\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Accent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Accent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-primary\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"accent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const AllVariants: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Transparent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"transparent\" />\n                    <Text size=\"sm\">{\"Not visible\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Base\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"base\" />\n                    <Text size=\"sm\">{\"bg-white\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Dimmed (default)\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"dimmed\" />\n                    <Text size=\"sm\">{\"bg-neutral-dimmed\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Muted\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"muted\" />\n                    <Text size=\"sm\">{\"bg-neutral-muted\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Strong\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"strong\" />\n                    <Text size=\"sm\">{\"bg-neutral-strong\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Accent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"accent\" />\n                    <Text size=\"sm\">{\"bg-primary\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelMiddle: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label in the middle\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned in the center (default)\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"middle\">\n                        {\"OR\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"middle\">\n                        {\"Section Title\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"middle\">\n                        {\"Important\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelStart: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at start\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the beginning\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"start\">\n                        {\"Start\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"start\">\n                        {\"Section 1\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"start\">\n                        {\"New Feature\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelEnd: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at end\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the end\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"end\">\n                        {\"End\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"end\">\n                        {\"See More\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"end\">\n                        {\"Continue\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelVertical: Story = {\n    render: () => {\n        return (\n            <div>\n                <Heading level={6} className=\"mb-4\">\n                    {\"Vertical separator with labels\"}\n                </Heading>\n                <div className=\"flex gap-8\" style={{ height: \"200px\" }}>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Start\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"dimmed\" labelPosition=\"start\">\n                            {\"Top\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Middle\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"muted\" labelPosition=\"middle\">\n                            {\"Center\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"End\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"accent\" labelPosition=\"end\">\n                            {\"Bottom\"}\n                        </Separator>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","Separator","Story","Documentation","undefined","props","Heading","Text","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin","Transparent","Base","Muted","Strong","Accent","AllVariants","WithLabelMiddle","WithLabelStart","WithLabelEnd","WithLabelVertical"],"mappings":"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"}
+{"version":3,"file":"Separator/Separator.stories.js","sources":["../../src/Separator/Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Separator } from \"./Separator.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true,\n        children: undefined,\n        labelPosition: \"middle\"\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        },\n        children: {\n            description:\n                \"Optional label text to display with the separator. Text will use text-neutral-primary text-md font-semibold styles.\",\n            control: \"text\"\n        },\n        labelPosition: {\n            description: \"Position of the label when children are provided.\",\n            control: \"select\",\n            options: [\"start\", \"middle\", \"end\"]\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\", \"accent\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"flex justify-center h-6 text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Transparent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Transparent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator is transparent and not visible\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"transparent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Base: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Base Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-white\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"base\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Muted: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Muted Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-muted\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"muted\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Strong: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Strong Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-neutral-strong\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"strong\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Accent: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"space-y-1\">\n                    <Heading level={6}>{\"Accent Variant\"}</Heading>\n                    <Text size=\"sm\" className={\"text-neutral-strong\"}>\n                        {\"This separator uses bg-primary\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} variant=\"accent\" />\n                <div className=\"flex items-center h-6 text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const AllVariants: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Transparent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"transparent\" />\n                    <Text size=\"sm\">{\"Not visible\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Base\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"base\" />\n                    <Text size=\"sm\">{\"bg-white\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Dimmed (default)\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"dimmed\" />\n                    <Text size=\"sm\">{\"bg-neutral-dimmed\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Muted\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"muted\" />\n                    <Text size=\"sm\">{\"bg-neutral-muted\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Strong\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"strong\" />\n                    <Text size=\"sm\">{\"bg-neutral-strong\"}</Text>\n                </div>\n                <div>\n                    <Heading level={6}>{\"Accent\"}</Heading>\n                    <Separator margin={\"lg\"} variant=\"accent\" />\n                    <Text size=\"sm\">{\"bg-primary\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelMiddle: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label in the middle\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned in the center (default)\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"middle\">\n                        {\"OR\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"middle\">\n                        {\"Section Title\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"middle\">\n                        {\"Important\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelStart: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at start\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the beginning\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"start\">\n                        {\"Start\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"start\">\n                        {\"Section 1\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"start\">\n                        {\"New Feature\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelEnd: Story = {\n    render: () => {\n        return (\n            <div className=\"space-y-8\">\n                <div>\n                    <Heading level={6}>{\"Separator with label at end\"}</Heading>\n                    <Text size=\"sm\" className=\"text-neutral-strong mb-4\">\n                        {\"Label is positioned at the end\"}\n                    </Text>\n                    <Separator variant=\"dimmed\" labelPosition=\"end\">\n                        {\"End\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"muted\" labelPosition=\"end\">\n                        {\"See More\"}\n                    </Separator>\n                </div>\n                <div>\n                    <Separator variant=\"accent\" labelPosition=\"end\">\n                        {\"Continue\"}\n                    </Separator>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithLabelVertical: Story = {\n    render: () => {\n        return (\n            <div>\n                <Heading level={6} className=\"mb-4\">\n                    {\"Vertical separator with labels\"}\n                </Heading>\n                <div className=\"flex gap-8\" style={{ height: \"200px\" }}>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Start\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"dimmed\" labelPosition=\"start\">\n                            {\"Top\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"Middle\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"muted\" labelPosition=\"middle\">\n                            {\"Center\"}\n                        </Separator>\n                    </div>\n                    <div className=\"flex flex-col items-center\">\n                        <Text size=\"sm\" className=\"text-neutral-strong mb-2\">\n                            {\"End\"}\n                        </Text>\n                        <Separator orientation=\"vertical\" variant=\"accent\" labelPosition=\"end\">\n                            {\"Bottom\"}\n                        </Separator>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","Separator","Story","Documentation","undefined","props","Heading","Text","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin","Transparent","Base","Muted","Strong","Accent","AllVariants","WithLabelMiddle","WithLabelStart","WithLabelEnd","WithLabelVertical"],"mappings":"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"}

package/Sidebar/Sidebar.d.ts

@@ -65,6 +65,7 @@ declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
             }>) => (props: unknown) => React.JSX.Element;
         };
         Action: ({ element, showOnHover, className, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+        Badge: ({ text }: import("./components/items/SidebarMenuItemBadge.js").SidebarMenuItemBadgeProps) => React.JSX.Element;
     };
     Link: ((props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element) & {
         original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element;
@@ -105,6 +106,7 @@ declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
             }>) => (props: unknown) => React.JSX.Element;
         };
         Action: ({ element, showOnHover, className, ...props }: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+        Badge: ({ text }: import("./components/items/SidebarMenuItemBadge.js").SidebarMenuItemBadgeProps) => React.JSX.Element;
     };
     Group: ((props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element) & {
         original: (props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element;

package/Sidebar/Sidebar.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Sidebar } from "./Sidebar.js";
 declare const meta: Meta<typeof Sidebar>;
 export default meta;