@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/SegmentedControl/domains/SegmentedControlItemFormatted.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=SegmentedControlItemFormatted.js.map

package/SegmentedControl/domains/SegmentedControlItemFormatter.js

@@ -1,13 +1,14 @@
-export class SegmentedControlItemFormatter {
-  static format(item) {
-    return {
-      id: item.id,
-      label: item.label,
-      value: String(item.value),
-      disabled: item.disabled,
-      icon: item.icon
-    };
-  }
+class SegmentedControlItemFormatter {
+    static format(item) {
+        return {
+            id: item.id,
+            label: item.label,
+            value: String(item.value),
+            disabled: item.disabled,
+            icon: item.icon
+        };
+    }
 }
+export { SegmentedControlItemFormatter };
 
 //# sourceMappingURL=SegmentedControlItemFormatter.js.map

package/SegmentedControl/domains/SegmentedControlItemFormatter.js.map

@@ -1 +1 @@
-{"version":3,"names":["SegmentedControlItemFormatter","format","item","id","label","value","String","disabled","icon"],"sources":["SegmentedControlItemFormatter.ts"],"sourcesContent":["import type { SegmentedControlItemFormatted } from \"./SegmentedControlItemFormatted.js\";\nimport type { SegmentedControlItem } from \"./SegmentedControlItem.js\";\n\nexport class SegmentedControlItemFormatter {\n    static format(item: SegmentedControlItem): SegmentedControlItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: String(item.value),\n            disabled: item.disabled,\n            icon: item.icon\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,6BAA6B,CAAC;EACvC,OAAOC,MAAMA,CAACC,IAA0B,EAAiC;IACrE,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,KAAK,EAAEC,MAAM,CAACJ,IAAI,CAACG,KAAK,CAAC;MACzBE,QAAQ,EAAEL,IAAI,CAACK,QAAQ;MACvBC,IAAI,EAAEN,IAAI,CAACM;IACf,CAAC;EACL;AACJ","ignoreList":[]}
+{"version":3,"file":"SegmentedControl/domains/SegmentedControlItemFormatter.js","sources":["../../../src/SegmentedControl/domains/SegmentedControlItemFormatter.ts"],"sourcesContent":["import type { SegmentedControlItemFormatted } from \"./SegmentedControlItemFormatted.js\";\nimport type { SegmentedControlItem } from \"./SegmentedControlItem.js\";\n\nexport class SegmentedControlItemFormatter {\n    static format(item: SegmentedControlItem): SegmentedControlItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: String(item.value),\n            disabled: item.disabled,\n            icon: item.icon\n        };\n    }\n}\n"],"names":["SegmentedControlItemFormatter","item","String"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAA0B,EAAiC;QACrE,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOC,OAAOD,KAAK,KAAK;YACxB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;QACnB;IACJ;AACJ"}

package/SegmentedControl/domains/SegmentedControlItemParams.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=SegmentedControlItemParams.js.map

package/SegmentedControl/domains/index.js

@@ -2,5 +2,3 @@ export * from "./SegmentedControlItem.js";
 export * from "./SegmentedControlItemParams.js";
 export * from "./SegmentedControlItemFormatted.js";
 export * from "./SegmentedControlItemFormatter.js";
-
-//# sourceMappingURL=index.js.map

package/SegmentedControl/index.js

@@ -1,5 +1,3 @@
 export * from "./SegmentedControl.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";
-
-//# sourceMappingURL=index.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -1,102 +1,92 @@
-import * as React from "react";
 import { cn, cva } from "../../utils.js";
 import { useSegmentedControl } from "./useSegmentedControl.js";
 import { Icon } from "../../Icon/index.js";
-
-/**
- * Segmented Control Item Button
- */
-const segmentedControlItemVariants = cva(["inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md", "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0", "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"], {
-  variants: {
-    variant: {
-      light: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
-      dimmed: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
-      ghost: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:bg-neutral-dark/5", "hover:data-[state=inactive]:bg-neutral-dark/5", "active:data-[state=inactive]:bg-neutral-dark/5"]
+import * as __rspack_external_react from "react";
+const segmentedControlItemVariants = cva([
+    "inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md",
+    "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs",
+    "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0",
+    "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+], {
+    variants: {
+        variant: {
+            light: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80",
+                "hover:data-[state=inactive]:text-neutral-primary",
+                "hover:data-[state=inactive]:bg-neutral-base/80",
+                "active:data-[state=inactive]:bg-neutral-base/80"
+            ],
+            dimmed: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80",
+                "hover:data-[state=inactive]:text-neutral-primary",
+                "hover:data-[state=inactive]:bg-neutral-base/80",
+                "active:data-[state=inactive]:bg-neutral-base/80"
+            ],
+            ghost: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:bg-neutral-dark/5",
+                "hover:data-[state=inactive]:bg-neutral-dark/5",
+                "active:data-[state=inactive]:bg-neutral-dark/5"
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: "light"
     }
-  },
-  defaultVariants: {
-    variant: "light"
-  }
 });
 const segmentedControlRootVariants = cva("inline-flex rounded-md p-xxs gap-xs", {
-  variants: {
-    variant: {
-      light: "bg-neutral-light",
-      dimmed: "bg-neutral-dimmed",
-      ghost: ""
+    variants: {
+        variant: {
+            light: "bg-neutral-light",
+            dimmed: "bg-neutral-dimmed",
+            ghost: ""
+        }
+    },
+    defaultVariants: {
+        variant: "light"
     }
-  },
-  defaultVariants: {
-    variant: "light"
-  }
 });
-const SegmentedControlItemButton = ({
-  item,
-  isActive,
-  onValueChange,
-  variant,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("button", Object.assign({
-    type: "button",
-    role: "radio",
-    "aria-checked": isActive,
-    "data-state": isActive ? "active" : "inactive",
-    disabled: item.disabled,
-    onClick: () => onValueChange(item.value),
-    className: cn(segmentedControlItemVariants({
-      variant
-    }), className)
-  }, props), item.icon && /*#__PURE__*/React.createElement(Icon, {
-    icon: item.icon,
-    size: "sm",
-    label: String(item.label),
-    color: "neutral-strong"
-  }), item.label);
-};
-
-/**
- * Segmented Control Primitive
- */
-
-const SegmentedControlRenderer = ({
-  items,
-  changeValue,
-  value,
-  variant = "light",
-  className,
-  disabled
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    className: cn(segmentedControlRootVariants({
-      variant
-    }), className)
-  }, items.map(item => /*#__PURE__*/React.createElement(SegmentedControlItemButton, {
-    key: item.id,
-    item: {
-      ...item,
-      disabled: disabled || item.disabled
-    },
-    isActive: value === item.value,
-    onValueChange: changeValue,
-    variant: variant
-  })));
-};
-
-/**
- * Segmented Control Primitive Component
- */
-const SegmentedControlPrimitive = props => {
-  const {
-    vm,
-    changeValue
-  } = useSegmentedControl(props);
-  return /*#__PURE__*/React.createElement(SegmentedControlRenderer, Object.assign({}, props, {
-    items: vm.items,
-    changeValue: changeValue
-  }));
+const SegmentedControlItemButton = ({ item, isActive, onValueChange, variant, className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": isActive,
+        "data-state": isActive ? "active" : "inactive",
+        disabled: item.disabled,
+        onClick: ()=>onValueChange(item.value),
+        className: cn(segmentedControlItemVariants({
+            variant
+        }), className),
+        ...props
+    }, item.icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        icon: item.icon,
+        size: "sm",
+        label: String(item.label),
+        color: "neutral-strong"
+    }), item.label);
+const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        role: "radiogroup",
+        className: cn(segmentedControlRootVariants({
+            variant
+        }), className)
+    }, items.map((item)=>/*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlItemButton, {
+            key: item.id,
+            item: {
+                ...item,
+                disabled: disabled || item.disabled
+            },
+            isActive: value === item.value,
+            onValueChange: changeValue,
+            variant: variant
+        })));
+const SegmentedControlPrimitive = (props)=>{
+    const { vm, changeValue } = useSegmentedControl(props);
+    return /*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlRenderer, {
+        ...props,
+        items: vm.items,
+        changeValue: changeValue
+    });
 };
 export { SegmentedControlPrimitive, SegmentedControlRenderer };
 

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","useSegmentedControl","Icon","segmentedControlItemVariants","variants","variant","light","dimmed","ghost","defaultVariants","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","className","props","createElement","Object","assign","type","role","disabled","onClick","value","icon","size","label","String","color","SegmentedControlRenderer","items","changeValue","map","key","id","SegmentedControlPrimitive","vm"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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"}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js

@@ -1,138 +1,157 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
 import { Icon } from "../../Icon/index.js";
-import { ReactComponent as LockIcon } from "@webiny/icons/notifications.svg";
+import { ReactComponent } from "@webiny/icons/notifications.svg";
 const meta = {
-  title: "Components/Form Primitives/SegmentedControl",
-  component: SegmentedControlPrimitive,
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
-      value: value,
-      onChange: value => setValue(value)
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
-  }
+    title: "Components/Form Primitives/SegmentedControl",
+    component: SegmentedControlPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+            ...args,
+            value: value,
+            onChange: (value)=>setValue(value)
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, value)));
+    }
 };
-export default meta;
-const items = [{
-  label: "Item 1",
-  value: "item1"
-}, {
-  label: "Item 2",
-  value: "item2"
-}, {
-  label: "Item 3",
-  value: "item3"
-}, {
-  label: "Item 4",
-  value: "item4"
-}];
-const itemsWithIcons = [{
-  label: "Item 1",
-  value: "item1",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 2",
-  value: "item2",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 3",
-  value: "item3",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 4",
-  value: "item4",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}];
-export const Default = {
-  args: {
-    items
-  }
+const SegmentedControlPrimitive_stories = meta;
+const items = [
+    {
+        label: "Item 1",
+        value: "item1"
+    },
+    {
+        label: "Item 2",
+        value: "item2"
+    },
+    {
+        label: "Item 3",
+        value: "item3"
+    },
+    {
+        label: "Item 4",
+        value: "item4"
+    }
+];
+const itemsWithIcons = [
+    {
+        label: "Item 1",
+        value: "item1",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 2",
+        value: "item2",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 3",
+        value: "item3",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 4",
+        value: "item4",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    }
+];
+const Default = {
+    args: {
+        items: items
+    }
 };
-export const WithDefaultOption = {
-  args: {
-    items,
-    value: "item2"
-  }
+const WithDefaultOption = {
+    args: {
+        items: items,
+        value: "item2"
+    }
 };
-export const WithIcons = {
-  args: {
-    items: itemsWithIcons,
-    value: "item1"
-  }
+const WithIcons = {
+    args: {
+        items: itemsWithIcons,
+        value: "item1"
+    }
 };
-export const VariantLight = {
-  args: {
-    items,
-    value: "item1",
-    variant: "light"
-  }
+const VariantLight = {
+    args: {
+        items: items,
+        value: "item1",
+        variant: "light"
+    }
 };
-export const VariantDimmed = {
-  args: {
-    items,
-    value: "item1",
-    variant: "dimmed"
-  }
+const VariantDimmed = {
+    args: {
+        items: items,
+        value: "item1",
+        variant: "dimmed"
+    }
 };
-export const VariantGhost = {
-  render: args => {
-    const [value, setValue] = useState(args.value || "item1");
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-md rounded-md bg-neutral-light"
-    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
-      items: items,
-      value: value,
-      onChange: value => setValue(value),
-      variant: "ghost"
-    })));
-  }
+const VariantGhost = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value || "item1");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "p-md rounded-md bg-neutral-light"
+        }, /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+            ...args,
+            items: items,
+            value: value,
+            onChange: (value)=>setValue(value),
+            variant: "ghost"
+        }));
+    }
 };
-export const Disabled = {
-  args: {
-    items,
-    value: "item2",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        items: items,
+        value: "item2",
+        disabled: true
+    }
 };
-export const PartiallyDisabled = {
-  args: {
-    items: [{
-      label: "Item 1",
-      value: "item1"
-    }, {
-      label: "Item 2 (disabled)",
-      value: "item2",
-      disabled: true
-    }, {
-      label: "Item 3",
-      value: "item3"
-    }, {
-      label: "Item 4 (disabled)",
-      value: "item4",
-      disabled: true
-    }],
-    value: "item1"
-  }
+const PartiallyDisabled = {
+    args: {
+        items: [
+            {
+                label: "Item 1",
+                value: "item1"
+            },
+            {
+                label: "Item 2 (disabled)",
+                value: "item2",
+                disabled: true
+            },
+            {
+                label: "Item 3",
+                value: "item3"
+            },
+            {
+                label: "Item 4 (disabled)",
+                value: "item4",
+                disabled: true
+            }
+        ],
+        value: "item1"
+    }
 };
+export default SegmentedControlPrimitive_stories;
+export { Default, Disabled, PartiallyDisabled, VariantDimmed, VariantGhost, VariantLight, WithDefaultOption, WithIcons };
 
 //# sourceMappingURL=SegmentedControlPrimitive.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SegmentedControlPrimitive","Icon","ReactComponent","LockIcon","meta","title","component","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","onChange","items","label","itemsWithIcons","icon","Default","WithDefaultOption","WithIcons","VariantLight","variant","VariantDimmed","VariantGhost","Disabled","disabled","PartiallyDisabled"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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"}

package/SegmentedControl/primitives/index.js

@@ -1,5 +1,3 @@
 export * from "./SegmentedControlPrimitive.js";
 export * from "./useSegmentedControl.js";
 export * from "./presenters/SegmentedControlPresenter.js";
-
-//# sourceMappingURL=index.js.map