@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Sidebar/stories/useHash.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+/**
+ * A hook that returns the current URL hash and updates
+ * whenever it changes (via hashchange event or popstate).
+ *
+ * @returns The current hash value
+ */
+export const useHash = () => {
+  const getHash = () => {
+    return window.location.hash;
+  };
+  const [hash, setHash] = useState(getHash);
+  useEffect(() => {
+    const handleHashChange = () => {
+      setHash(getHash());
+    };
+
+    // Listen for hash changes (including from our Link component)
+    window.addEventListener("hashchange", handleHashChange);
+
+    // Also listen for popstate (back/forward navigation)
+    window.addEventListener("popstate", handleHashChange);
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+      window.removeEventListener("popstate", handleHashChange);
+    };
+  }, []);
+  return hash;
+};
+
+//# sourceMappingURL=useHash.js.map

package/Sidebar/stories/useHash.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useEffect","useHash","getHash","window","location","hash","setHash","handleHashChange","addEventListener","removeEventListener"],"sources":["useHash.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\n/**\n * A hook that returns the current URL hash and updates\n * whenever it changes (via hashchange event or popstate).\n *\n * @returns The current hash value\n */\nexport const useHash = (): string => {\n    const getHash = () => {\n        return window.location.hash;\n    };\n\n    const [hash, setHash] = useState<string>(getHash);\n\n    useEffect(() => {\n        const handleHashChange = () => {\n            setHash(getHash());\n        };\n\n        // Listen for hash changes (including from our Link component)\n        window.addEventListener(\"hashchange\", handleHashChange);\n\n        // Also listen for popstate (back/forward navigation)\n        window.addEventListener(\"popstate\", handleHashChange);\n\n        return () => {\n            window.removeEventListener(\"hashchange\", handleHashChange);\n            window.removeEventListener(\"popstate\", handleHashChange);\n        };\n    }, []);\n\n    return hash;\n};\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,OAAO;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAc;EACjC,MAAMC,OAAO,GAAGA,CAAA,KAAM;IAClB,OAAOC,MAAM,CAACC,QAAQ,CAACC,IAAI;EAC/B,CAAC;EAED,MAAM,CAACA,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAASG,OAAO,CAAC;EAEjDF,SAAS,CAAC,MAAM;IACZ,MAAMO,gBAAgB,GAAGA,CAAA,KAAM;MAC3BD,OAAO,CAACJ,OAAO,CAAC,CAAC,CAAC;IACtB,CAAC;;IAED;IACAC,MAAM,CAACK,gBAAgB,CAAC,YAAY,EAAED,gBAAgB,CAAC;;IAEvD;IACAJ,MAAM,CAACK,gBAAgB,CAAC,UAAU,EAAED,gBAAgB,CAAC;IAErD,OAAO,MAAM;MACTJ,MAAM,CAACM,mBAAmB,CAAC,YAAY,EAAEF,gBAAgB,CAAC;MAC1DJ,MAAM,CAACM,mBAAmB,CAAC,UAAU,EAAEF,gBAAgB,CAAC;IAC5D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOF,IAAI;AACf,CAAC","ignoreList":[]}

package/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const skeletonVariants: (props?: ({
-    type?: "text" | "area" | "thumbnail" | null | undefined;
+    type?: "area" | "text" | "thumbnail" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
@@ -19,7 +19,7 @@ declare const Skeleton: (({ size, type, className, ...props }: SkeletonProps) =>
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
         original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Skeleton/Skeleton.js

@@ -1,20 +1,20 @@
 import React from "react";
-import { cn, cva, makeDecoratable } from "../utils";
-const skeletonVariants = cva("wby-animate-skeleton-pulse wby-rounded-sm", {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
   variants: {
     type: {
-      text: "wby-w-full",
-      thumbnail: "wby-aspect-square",
-      area: "wby-size-full"
+      text: "w-full",
+      thumbnail: "aspect-square",
+      area: "size-full"
     },
     size: {
-      xs: "wby-h-[8px]",
-      sm: "wby-h-[12px]",
-      md: "wby-h-[16px]",
-      lg: "wby-h-[24px]",
-      xl: "wby-h-[32px]",
-      xxl: "wby-h-[40px]",
-      "3xl": "wby-h-[48px]"
+      xs: "h-sm",
+      sm: "h-sm-extra",
+      md: "h-md",
+      lg: "h-lg",
+      xl: "h-xl",
+      xxl: "h-[40px]",
+      "3xl": "h-xxl"
     }
   },
   compoundVariants: [
@@ -22,11 +22,11 @@ const skeletonVariants = cva("wby-animate-skeleton-pulse wby-rounded-sm", {
   {
     type: "thumbnail",
     size: "xs",
-    class: "!wby-hidden"
+    class: "hidden!"
   }, {
     type: "text",
     size: "3xl",
-    class: "!wby-hidden"
+    class: "hidden!"
   }],
   defaultVariants: {
     type: "area",

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","skeletonVariants","variants","type","text","thumbnail","area","size","xs","sm","md","lg","xl","xxl","compoundVariants","class","defaultVariants","DecoratableSkeleton","className","props","createElement","Object","assign","Skeleton"],"sources":["Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst skeletonVariants = cva(\"wby-animate-skeleton-pulse wby-rounded-sm\", {\n    variants: {\n        type: {\n            text: \"wby-w-full\",\n            thumbnail: \"wby-aspect-square\",\n            area: \"wby-size-full\"\n        },\n        size: {\n            xs: \"wby-h-[8px]\",\n            sm: \"wby-h-[12px]\",\n            md: \"wby-h-[16px]\",\n            lg: \"wby-h-[24px]\",\n            xl: \"wby-h-[32px]\",\n            xxl: \"wby-h-[40px]\",\n            \"3xl\": \"wby-h-[48px]\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"!wby-hidden\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"!wby-hidden\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,2CAA2C,EAAE;EACtEG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,YAAY;MAClBC,SAAS,EAAE,mBAAmB;MAC9BC,IAAI,EAAE;IACV,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,GAAG,EAAE,cAAc;MACnB,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIX,IAAI,EAAE,WAAW;IACjBI,IAAI,EAAE,IAAI;IACVQ,KAAK,EAAE;EACX,CAAC,EACD;IACIZ,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE,KAAK;IACXQ,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbb,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAMF,MAAMU,mBAAmB,GAAGA,CAAC;EAAEV,IAAI;EAAEJ,IAAI;EAAEe,SAAS;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAChF,oBAAOtB,KAAA,CAAAuB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEpB,EAAE,CAACG,gBAAgB,CAAC;MAAEM,IAAI;MAAEJ;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GAAKC,KAAK,CAAG,CAAC;AACzF,CAAC;AAED,MAAMI,QAAQ,GAAGvB,eAAe,CAAC,UAAU,EAAEiB,mBAAmB,CAAC;AAEjE,SAASM,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","skeletonVariants","variants","type","text","thumbnail","area","size","xs","sm","md","lg","xl","xxl","compoundVariants","class","defaultVariants","DecoratableSkeleton","className","props","createElement","Object","assign","Skeleton"],"sources":["Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,mCAAmC,EAAE;EAC9DG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,QAAQ;MACdC,SAAS,EAAE,eAAe;MAC1BC,IAAI,EAAE;IACV,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,GAAG,EAAE,UAAU;MACf,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIX,IAAI,EAAE,WAAW;IACjBI,IAAI,EAAE,IAAI;IACVQ,KAAK,EAAE;EACX,CAAC,EACD;IACIZ,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE,KAAK;IACXQ,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbb,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAMF,MAAMU,mBAAmB,GAAGA,CAAC;EAAEV,IAAI;EAAEJ,IAAI;EAAEe,SAAS;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAChF,oBAAOtB,KAAA,CAAAuB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEpB,EAAE,CAACG,gBAAgB,CAAC;MAAEM,IAAI;MAAEJ;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GAAKC,KAAK,CAAG,CAAC;AACzF,CAAC;AAED,MAAMI,QAAQ,GAAGvB,eAAe,CAAC,UAAU,EAAEiB,mBAAmB,CAAC;AAEjE,SAASM,QAAQ","ignoreList":[]}

package/Skeleton/Skeleton.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as SkeletonStories from './Skeleton.stories';
 
@@ -62,7 +62,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const AreaSkeletonExample = () => {
-    return <Skeleton type="area" className="wby-w-1/2 wby-h-32" />;
+    return <Skeleton type="area" className="w-1/2 h-32" />;
 };
 
 export default AreaSkeletonExample;
@@ -203,13 +203,13 @@ import { Skeleton } from "@webiny/admin-ui";
 
 const MultipleAreasExample = () => {
     return (
-        <div className="wby-flex wby-gap-md">
-            <div className="wby-flex wby-flex-col wby-gap-md">
-                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
-                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+        <div className="flex gap-md">
+            <div className="flex flex-col gap-md">
+                <Skeleton type="area" className={"w-32 h-32"} />
+                <Skeleton type="area" className={"w-32 h-32"} />
             </div>
             <div>
-                <Skeleton type="area" className="wby-w-32 wby-h-full" />
+                <Skeleton type="area" className="w-32 h-full" />
             </div>
         </div>
     );

package/Skeleton/Skeleton.stories.d.ts

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

package/Skeleton/Skeleton.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Skeleton } from "./Skeleton";
+import { Skeleton } from "./Skeleton.js";
 const meta = {
   title: "Components/Skeleton",
   component: Skeleton,
@@ -32,23 +32,23 @@ export const Thumbnail = {
 export const Area = {
   args: {
     type: "area",
-    className: "wby-w-1/2 wby-h-32"
+    className: "w-1/2 h-32"
   }
 };
 export const MultipleAreas = {
   render: () => /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-md"
+    className: "flex gap-md"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-gap-md"
+    className: "flex flex-col gap-md"
   }, /*#__PURE__*/React.createElement(Skeleton, {
     type: "area",
-    className: "wby-w-32 wby-h-32"
+    className: "w-32 h-32"
   }), /*#__PURE__*/React.createElement(Skeleton, {
     type: "area",
-    className: "wby-w-32 wby-h-32"
+    className: "w-32 h-32"
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
     type: "area",
-    className: "wby-w-32 wby-h-full"
+    className: "w-32 h-full"
   })))
 };
 export const ExtraSmall = {

package/Skeleton/Skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Skeleton","meta","title","component","parameters","layout","argTypes","type","control","options","size","Default","Text","args","Thumbnail","Area","className","MultipleAreas","render","createElement","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation","description"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"wby-w-1/2 wby-h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <div className=\"wby-flex wby-flex-col wby-gap-md\">\n                <Skeleton type=\"area\" className={\"wby-w-32 wby-h-32\"} />\n                <Skeleton type=\"area\" className={\"wby-w-32 wby-h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"wby-w-32 wby-h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Skeleton","meta","title","component","parameters","layout","argTypes","type","control","options","size","Default","Text","args","Thumbnail","Area","className","MultipleAreas","render","createElement","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation","description"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Skeleton/index.d.ts

@@ -1 +1 @@
-export * from "./Skeleton";
+export * from "./Skeleton.js";

package/Skeleton/index.js

@@ -1,3 +1,3 @@
-export * from "./Skeleton";
+export * from "./Skeleton.js";
 
 //# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Skeleton.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Slider/Slider.d.ts

@@ -1,27 +1,27 @@
 import * as React from "react";
-import type { SliderPrimitiveProps } from "./primitives";
-import type { FormComponentProps } from "../FormComponent";
+import type { SliderPrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 /**
  * Slider
  */
 type SliderProps = FormComponentProps & SliderPrimitiveProps & {
     labelPosition?: "top" | "side";
 };
-declare const Slider: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-    original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const Slider: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+    original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    original: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Slider/Slider.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { Label } from "../Label";
-import { makeDecoratable } from "../utils";
-import { SliderPrimitiveRenderer, useSlider, SliderValue } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { Label } from "../Label/index.js";
+import { makeDecoratable } from "../utils.js";
+import { SliderPrimitiveRenderer, useSlider, SliderValue } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 
 /**
  * Slider Renderer with side label
@@ -10,9 +10,9 @@ import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel
 
 const SliderRendererWithSideValue = props => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-flex wby-flex-row wby-items-center wby-justify-between"
+    className: "w-full flex flex-row items-center justify-between"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-basis-2/12 wby-pr-sm"
+    className: "basis-2/12 pr-sm"
   }, /*#__PURE__*/React.createElement(Label, {
     text: props.label,
     required: props.required,
@@ -20,9 +20,9 @@ const SliderRendererWithSideValue = props => {
     invalid: props.invalid,
     weight: "light"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "wby-basis-9/12"
+    className: "basis-9/12"
   }, /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, props)), /*#__PURE__*/React.createElement("div", {
-    className: "wby-basis-1/12 wby-pl-sm wby-text-right"
+    className: "basis-1/12 pl-sm text-right"
   }, /*#__PURE__*/React.createElement(SliderValue, {
     value: props.textValue,
     disabled: props.disabled
@@ -36,6 +36,7 @@ const SliderRendererWithSideValue = props => {
 const DecoratableSlider = ({
   description,
   note,
+  hint,
   validation,
   labelPosition,
   ...props
@@ -52,7 +53,7 @@ const DecoratableSlider = ({
   } = useSlider(props);
   if (labelPosition === "side") {
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement(FormComponentDescription, {
       text: description,
       disabled: props.disabled
@@ -70,8 +71,9 @@ const DecoratableSlider = ({
     }));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    hint: hint,
     text: /*#__PURE__*/React.createElement(Label, {
       text: props.label,
       value: vm.textValue

package/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","makeDecoratable","SliderPrimitiveRenderer","useSlider","SliderValue","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","SliderRendererWithSideValue","props","createElement","className","text","label","required","disabled","invalid","weight","value","textValue","DecoratableSlider","description","note","validation","labelPosition","isValid","validationIsValid","message","validationMessage","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit","Slider"],"sources":["Slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label } from \"~/Label\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { SliderPrimitiveProps, SliderPrimitiveRendererProps } from \"./primitives\";\nimport { SliderPrimitiveRenderer, useSlider, SliderValue } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\n/**\n * Slider Renderer with side label\n */\ninterface SliderRendererWithSideValueProps extends SliderPrimitiveRendererProps {\n    label?: React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nconst SliderRendererWithSideValue = (props: SliderRendererWithSideValueProps) => {\n    return (\n        <div className={\"wby-w-full wby-flex wby-flex-row wby-items-center wby-justify-between\"}>\n            <div className={\"wby-basis-2/12 wby-pr-sm\"}>\n                <Label\n                    text={props.label}\n                    required={props.required}\n                    disabled={props.disabled}\n                    invalid={props.invalid}\n                    weight={\"light\"}\n                />\n            </div>\n            <div className={\"wby-basis-9/12\"}>\n                <SliderPrimitiveRenderer {...props} />\n            </div>\n            <div className={\"wby-basis-1/12 wby-pl-sm wby-text-right\"}>\n                <SliderValue value={props.textValue} disabled={props.disabled} />\n            </div>\n        </div>\n    );\n};\n\n/**\n * Slider\n */\ntype SliderProps = FormComponentProps &\n    SliderPrimitiveProps & {\n        labelPosition?: \"top\" | \"side\";\n    };\n\nconst DecoratableSlider = ({\n    description,\n    note,\n    validation,\n    labelPosition,\n    ...props\n}: SliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = validationIsValid === false;\n\n    const { vm, changeValue, commitValue } = useSlider(props);\n\n    if (labelPosition === \"side\") {\n        return (\n            <div className={\"wby-w-full\"}>\n                <FormComponentDescription text={description} disabled={props.disabled} />\n                <SliderRendererWithSideValue\n                    {...props}\n                    {...vm}\n                    invalid={invalid}\n                    onValueChange={changeValue}\n                    onValueCommit={commitValue}\n                />\n                <FormComponentErrorMessage\n                    text={validationMessage}\n                    invalid={invalid}\n                    disabled={props.disabled}\n                />\n                <FormComponentNote text={note} disabled={props.disabled} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={<Label text={props.label} value={vm.textValue} />}\n                disabled={props.disabled}\n                required={props.required}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <SliderPrimitiveRenderer\n                {...props}\n                {...vm}\n                onValueChange={changeValue}\n                onValueCommit={commitValue}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\nconst Slider = makeDecoratable(\"Slider\", DecoratableSlider);\n\nexport { Slider, type SliderProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Label","makeDecoratable","SliderPrimitiveRenderer","useSlider","SliderValue","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","SliderRendererWithSideValue","props","createElement","className","text","label","required","disabled","invalid","weight","value","textValue","DecoratableSlider","description","note","hint","validation","labelPosition","isValid","validationIsValid","message","validationMessage","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit","Slider"],"sources":["Slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label } from \"~/Label/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SliderPrimitiveProps, SliderPrimitiveRendererProps } from \"./primitives/index.js\";\nimport { SliderPrimitiveRenderer, useSlider, SliderValue } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\n/**\n * Slider Renderer with side label\n */\ninterface SliderRendererWithSideValueProps extends SliderPrimitiveRendererProps {\n    label?: React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nconst SliderRendererWithSideValue = (props: SliderRendererWithSideValueProps) => {\n    return (\n        <div className={\"w-full flex flex-row items-center justify-between\"}>\n            <div className={\"basis-2/12 pr-sm\"}>\n                <Label\n                    text={props.label}\n                    required={props.required}\n                    disabled={props.disabled}\n                    invalid={props.invalid}\n                    weight={\"light\"}\n                />\n            </div>\n            <div className={\"basis-9/12\"}>\n                <SliderPrimitiveRenderer {...props} />\n            </div>\n            <div className={\"basis-1/12 pl-sm text-right\"}>\n                <SliderValue value={props.textValue} disabled={props.disabled} />\n            </div>\n        </div>\n    );\n};\n\n/**\n * Slider\n */\ntype SliderProps = FormComponentProps &\n    SliderPrimitiveProps & {\n        labelPosition?: \"top\" | \"side\";\n    };\n\nconst DecoratableSlider = ({\n    description,\n    note,\n    hint,\n    validation,\n    labelPosition,\n    ...props\n}: SliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = validationIsValid === false;\n\n    const { vm, changeValue, commitValue } = useSlider(props);\n\n    if (labelPosition === \"side\") {\n        return (\n            <div className={\"w-full\"}>\n                <FormComponentDescription text={description} disabled={props.disabled} />\n                <SliderRendererWithSideValue\n                    {...props}\n                    {...vm}\n                    invalid={invalid}\n                    onValueChange={changeValue}\n                    onValueCommit={commitValue}\n                />\n                <FormComponentErrorMessage\n                    text={validationMessage}\n                    invalid={invalid}\n                    disabled={props.disabled}\n                />\n                <FormComponentNote text={note} disabled={props.disabled} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                hint={hint}\n                text={<Label text={props.label} value={vm.textValue} />}\n                disabled={props.disabled}\n                required={props.required}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <SliderPrimitiveRenderer\n                {...props}\n                {...vm}\n                onValueChange={changeValue}\n                onValueCommit={commitValue}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\nconst Slider = makeDecoratable(\"Slider\", DecoratableSlider);\n\nexport { Slider, type SliderProps };\n"],"mappings":"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","ignoreList":[]}

package/Slider/Slider.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as SliderStories from './Slider.stories';
 
@@ -105,4 +105,4 @@ const SliderExample = () => {
 };
 
 export default SliderExample;
-```
+```

package/Slider/Slider.stories.d.ts

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

package/Slider/Slider.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Slider } from "./Slider";
+import { Slider } from "./Slider.js";
 const meta = {
   title: "Components/Form/Slider",
   component: Slider,
@@ -243,8 +243,7 @@ export const Documentation = {
       defaultValue: true
     },
     transformValue: {
-      description: "Function to transform the numeric value to display text",
-      control: "none"
+      description: "Function to transform the numeric value to display text"
     },
     labelPosition: {
       description: "Position of the label relative to the slider",
@@ -252,16 +251,13 @@ export const Documentation = {
       options: ["top", "side"]
     },
     validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "Object containing validation state and message. Please refer to the example code for details on usage."
     },
     onValueChange: {
-      description: "Function called when the slider value changes",
-      control: "none"
+      description: "Function called when the slider value changes"
     },
     onValueCommit: {
-      description: "Function called when the slider value is committed (on release)",
-      control: "none"
+      description: "Function called when the slider value is committed (on release)"
     }
   }
 };

package/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","Slider","meta","title","component","argTypes","onValueChange","action","onValueCommit","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","WithSideLabel","labelPosition","WithSideLabelRequired","WithSideLabelAndDescription","WithSideLabelAndNotes","WithSideLabelAndErrors","WithSideLabelDisabled","WithSideLabelFullExample","Documentation","setValidation","handleChange","newValue","showTooltip","transformValue","min","max","step","undefined","options"],"sources":["Slider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Slider } from \"./Slider\";\n\nconst meta: Meta<typeof Slider> = {\n    title: \"Components/Form/Slider\",\n    component: Slider,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" },\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 <Slider {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Slider>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: 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 WithSideLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        labelPosition: \"side\"\n    }\n};\n\nexport const WithSideLabelRequired: Story = {\n    args: {\n        ...WithSideLabel.args,\n        required: true\n    }\n};\n\nexport const WithSideLabelAndDescription: Story = {\n    args: {\n        ...WithSideLabel.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithSideLabelAndNotes: Story = {\n    args: {\n        ...WithSideLabel.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithSideLabelAndErrors: Story = {\n    args: {\n        ...WithSideLabel.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabelDisabled: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithSideLabelFullExample: Story = {\n    args: {\n        ...WithSideLabel.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(args.value || 50);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value ?? 50);\n        }, [args.value]);\n\n        const handleChange = (newValue: number) => {\n            setValue(newValue);\n\n            if (args.required && newValue === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && value === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <Slider\n                {...args}\n                value={value}\n                onValueChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Volume Level\",\n        required: true,\n        disabled: false,\n        description: \"Adjust the volume level of your device\",\n        note: \"Note: Higher values may cause distortion on some devices\",\n        min: 0,\n        max: 100,\n        step: 1,\n        value: 50,\n        showTooltip: true,\n        transformValue: (value: number) => `${value}%`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the slider\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the slider when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        min: {\n            description: \"Minimum value for the slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the slider\",\n            control: \"number\"\n        },\n        value: {\n            description: \"Current value of the slider\",\n            control: \"number\"\n        },\n        showTooltip: {\n            description: \"Whether to show a tooltip with the current value\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description: \"Function to transform the numeric value to display text\",\n            control: \"none\"\n        },\n        labelPosition: {\n            description: \"Position of the label relative to the slider\",\n            control: \"radio\",\n            options: [\"top\", \"side\"]\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        onValueChange: {\n            description: \"Function called when the slider value changes\",\n            control: \"none\"\n        },\n        onValueCommit: {\n            description: \"Function called when the slider value is committed (on release)\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAElD,SAASC,MAAM;AAEf,MAAMC,IAAyB,GAAG;EAC9BC,KAAK,EAAE,wBAAwB;EAC/BC,SAAS,EAAEH,MAAM;EACjBI,QAAQ,EAAE;IACNC,aAAa,EAAE;MAAEC,MAAM,EAAE;IAAgB,CAAC;IAC1CC,aAAa,EAAE;MAAED,MAAM,EAAE;IAAgB,CAAC;IAC1CE,QAAQ,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAACgB,IAAI,CAACC,KAAK,CAAC;IAC9C,oBAAOlB,KAAA,CAAAoB,aAAA,CAACjB,MAAM,EAAAkB,MAAA,CAAAC,MAAA,KAAKL,IAAI;MAAEC,KAAK,EAAEA,KAAM;MAACV,aAAa,EAAEU,KAAK,IAAIC,QAAQ,CAACD,KAAK;IAAE,EAAE,CAAC;EACtF;AACJ,CAAC;AAED,eAAed,IAAI;AAGnB,OAAO,MAAMmB,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,SAAgB,GAAG;EAC5BP,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfQ,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpCT,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfQ,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,eAAsB,GAAG;EAClCX,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfY,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5Bb,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfc,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7Bf,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfgB,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BnB,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfQ,KAAK,EAAE,iBAAiB;IACxBd,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAM0B,WAAkB,GAAG;EAC9BpB,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfQ,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,aAAoB,GAAG;EAChCrB,IAAI,EAAE;IACF,GAAGM,OAAO,CAACN,IAAI;IACfQ,KAAK,EAAE,iBAAiB;IACxBc,aAAa,EAAE;EACnB;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCvB,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBU,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMc,2BAAkC,GAAG;EAC9CxB,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBY,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMa,qBAA4B,GAAG;EACxCzB,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBc,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMY,sBAA6B,GAAG;EACzC1B,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBgB,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMS,qBAA4B,GAAG;EACxC3B,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBQ,KAAK,EAAE,iBAAiB;IACxBd,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMkC,wBAA+B,GAAG;EAC3C5B,IAAI,EAAE;IACF,GAAGqB,aAAa,CAACrB,IAAI;IACrBQ,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMW,aAAoB,GAAG;EAChC9B,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAACgB,IAAI,CAACC,KAAK,IAAI,EAAE,CAAC;IACpD,MAAM,CAACe,UAAU,EAAEc,aAAa,CAAC,GAAG9C,QAAQ,CAAC;MAAEiC,OAAO,EAAE,IAAI;MAAEC,OAAO,EAAE;IAAG,CAAC,CAAC;;IAE5E;IACAjC,SAAS,CAAC,MAAM;MACZiB,QAAQ,CAACF,IAAI,CAACC,KAAK,IAAI,EAAE,CAAC;IAC9B,CAAC,EAAE,CAACD,IAAI,CAACC,KAAK,CAAC,CAAC;IAEhB,MAAM8B,YAAY,GAAIC,QAAgB,IAAK;MACvC9B,QAAQ,CAAC8B,QAAQ,CAAC;MAElB,IAAIhC,IAAI,CAACU,QAAQ,IAAIsB,QAAQ,KAAK,CAAC,EAAE;QACjCF,aAAa,CAAC;UAAEb,OAAO,EAAE,KAAK;UAAEC,OAAO,EAAE;QAAwB,CAAC,CAAC;MACvE,CAAC,MAAM;QACHY,aAAa,CAAC;UAAEb,OAAO,EAAE,IAAI;UAAEC,OAAO,EAAE;QAAG,CAAC,CAAC;MACjD;IACJ,CAAC;;IAED;IACAjC,SAAS,CAAC,MAAM;MACZ,IAAIe,IAAI,CAACU,QAAQ,IAAIT,KAAK,KAAK,CAAC,EAAE;QAC9B6B,aAAa,CAAC;UAAEb,OAAO,EAAE,KAAK;UAAEC,OAAO,EAAE;QAAwB,CAAC,CAAC;MACvE,CAAC,MAAM;QACHY,aAAa,CAAC;UAAEb,OAAO,EAAE,IAAI;UAAEC,OAAO,EAAE;QAAG,CAAC,CAAC;MACjD;IACJ,CAAC,EAAE,CAAClB,IAAI,CAACU,QAAQ,EAAET,KAAK,CAAC,CAAC;IAE1B,oBACIlB,KAAA,CAAAoB,aAAA,CAACjB,MAAM,EAAAkB,MAAA,CAAAC,MAAA,KACCL,IAAI;MACRC,KAAK,EAAEA,KAAM;MACbV,aAAa,EAAEwC,YAAa;MAC5Bf,UAAU,EAAEA,UAAW;MACvBN,QAAQ,EAAEV,IAAI,CAACU,QAAS;MACxBuB,WAAW,EAAEjC,IAAI,CAACiC,WAAY;MAC9BC,cAAc,EAAElC,IAAI,CAACkC;IAAe,EACvC,CAAC;EAEV,CAAC;EACDlC,IAAI,EAAE;IACFQ,KAAK,EAAE,cAAc;IACrBE,QAAQ,EAAE,IAAI;IACdhB,QAAQ,EAAE,KAAK;IACfkB,WAAW,EAAE,wCAAwC;IACrDE,IAAI,EAAE,0DAA0D;IAChEqB,GAAG,EAAE,CAAC;IACNC,GAAG,EAAE,GAAG;IACRC,IAAI,EAAE,CAAC;IACPpC,KAAK,EAAE,EAAE;IACTgC,WAAW,EAAE,IAAI;IACjBC,cAAc,EAAGjC,KAAa,IAAK,GAAGA,KAAK,GAAG;IAC9Ce,UAAU,EAAEsB;EAChB,CAAC;EACDhD,QAAQ,EAAE;IACNkB,KAAK,EAAE;MACHI,WAAW,EAAE,2BAA2B;MACxCjB,OAAO,EAAE;IACb,CAAC;IACDe,QAAQ,EAAE;MACNE,WAAW,EAAE,2CAA2C;MACxDjB,OAAO,EAAE;IACb,CAAC;IACDD,QAAQ,EAAE;MACNkB,WAAW,EAAE,sCAAsC;MACnDjB,OAAO,EAAE;IACb,CAAC;IACDiB,WAAW,EAAE;MACTA,WAAW,EAAE,6CAA6C;MAC1DjB,OAAO,EAAE;IACb,CAAC;IACDmB,IAAI,EAAE;MACFF,WAAW,EAAE,sCAAsC;MACnDjB,OAAO,EAAE;IACb,CAAC;IACDwC,GAAG,EAAE;MACDvB,WAAW,EAAE,8BAA8B;MAC3CjB,OAAO,EAAE;IACb,CAAC;IACDyC,GAAG,EAAE;MACDxB,WAAW,EAAE,8BAA8B;MAC3CjB,OAAO,EAAE;IACb,CAAC;IACD0C,IAAI,EAAE;MACFzB,WAAW,EAAE,+BAA+B;MAC5CjB,OAAO,EAAE;IACb,CAAC;IACDM,KAAK,EAAE;MACHW,WAAW,EAAE,6BAA6B;MAC1CjB,OAAO,EAAE;IACb,CAAC;IACDsC,WAAW,EAAE;MACTrB,WAAW,EAAE,kDAAkD;MAC/DjB,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB,CAAC;IACDsC,cAAc,EAAE;MACZtB,WAAW,EAAE,yDAAyD;MACtEjB,OAAO,EAAE;IACb,CAAC;IACD2B,aAAa,EAAE;MACXV,WAAW,EAAE,8CAA8C;MAC3DjB,OAAO,EAAE,OAAO;MAChB4C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM;IAC3B,CAAC;IACDvB,UAAU,EAAE;MACRJ,WAAW,EACP,wGAAwG;MAC5GjB,OAAO,EAAE;IACb,CAAC;IACDJ,aAAa,EAAE;MACXqB,WAAW,EAAE,+CAA+C;MAC5DjB,OAAO,EAAE;IACb,CAAC;IACDF,aAAa,EAAE;MACXmB,WAAW,EAAE,iEAAiE;MAC9EjB,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","Slider","meta","title","component","argTypes","onValueChange","action","onValueCommit","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","WithSideLabel","labelPosition","WithSideLabelRequired","WithSideLabelAndDescription","WithSideLabelAndNotes","WithSideLabelAndErrors","WithSideLabelDisabled","WithSideLabelFullExample","Documentation","setValidation","handleChange","newValue","showTooltip","transformValue","min","max","step","undefined","options"],"sources":["Slider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Slider } from \"./Slider.js\";\n\nconst meta: Meta<typeof Slider> = {\n    title: \"Components/Form/Slider\",\n    component: Slider,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" },\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 <Slider {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Slider>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: 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 WithSideLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        labelPosition: \"side\"\n    }\n};\n\nexport const WithSideLabelRequired: Story = {\n    args: {\n        ...WithSideLabel.args,\n        required: true\n    }\n};\n\nexport const WithSideLabelAndDescription: Story = {\n    args: {\n        ...WithSideLabel.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithSideLabelAndNotes: Story = {\n    args: {\n        ...WithSideLabel.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithSideLabelAndErrors: Story = {\n    args: {\n        ...WithSideLabel.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabelDisabled: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithSideLabelFullExample: Story = {\n    args: {\n        ...WithSideLabel.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(args.value || 50);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value ?? 50);\n        }, [args.value]);\n\n        const handleChange = (newValue: number) => {\n            setValue(newValue);\n\n            if (args.required && newValue === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && value === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <Slider\n                {...args}\n                value={value}\n                onValueChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Volume Level\",\n        required: true,\n        disabled: false,\n        description: \"Adjust the volume level of your device\",\n        note: \"Note: Higher values may cause distortion on some devices\",\n        min: 0,\n        max: 100,\n        step: 1,\n        value: 50,\n        showTooltip: true,\n        transformValue: (value: number) => `${value}%`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the slider\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the slider when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        min: {\n            description: \"Minimum value for the slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the slider\",\n            control: \"number\"\n        },\n        value: {\n            description: \"Current value of the slider\",\n            control: \"number\"\n        },\n        showTooltip: {\n            description: \"Whether to show a tooltip with the current value\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description: \"Function to transform the numeric value to display text\"\n        },\n        labelPosition: {\n            description: \"Position of the label relative to the slider\",\n            control: \"radio\",\n            options: [\"top\", \"side\"]\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValueChange: {\n            description: \"Function called when the slider value changes\"\n        },\n        onValueCommit: {\n            description: \"Function called when the slider value is committed (on release)\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Slider/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Slider";
-export * from "./primitives";
+export * from "./Slider.js";
+export * from "./primitives/index.js";

package/Slider/index.js

@@ -1,4 +1,4 @@
-export * from "./Slider";
-export * from "./primitives";
+export * from "./Slider.js";
+export * from "./primitives/index.js";
 
 //# sourceMappingURL=index.js.map

package/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Slider\";\nexport * from \"./primitives\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Slider.js\";\nexport * from \"./primitives/index.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Slider/primitives/SliderPrimitive.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Slider as SliderPrimitives } from "radix-ui";
-import { type SliderThumbProps } from "./components";
+import { type SliderThumbProps } from "./components/index.js";
 type SliderRootProps = Omit<SliderPrimitives.SliderProps, "min"> & {
     min: number;
 };

package/Slider/primitives/SliderPrimitive.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useSlider } from "./useSlider";
-import { SliderRoot, SliderThumb, SliderTrack } from "./components";
+import { useSlider } from "./useSlider.js";
+import { SliderRoot, SliderThumb, SliderTrack } from "./components/index.js";
 const SliderPrimitiveRenderer = ({
   tooltipSide,
   textValue,
@@ -8,7 +8,7 @@ const SliderPrimitiveRenderer = ({
   ...sliderProps
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-h-md wby-w-full"
+    className: "flex h-md w-full"
   }, /*#__PURE__*/React.createElement(SliderRoot, sliderProps, /*#__PURE__*/React.createElement(SliderTrack, null), /*#__PURE__*/React.createElement(SliderThumb, {
     textValue: textValue,
     showTooltip: showTooltip,

package/Slider/primitives/SliderPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useSlider","SliderRoot","SliderThumb","SliderTrack","SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","createElement","className","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit"],"sources":["SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"wby-flex wby-h-md wby-w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps\n    extends Omit<\n        SliderPrimitives.SliderProps,\n        \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n    > {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS;AAClB,SAASC,UAAU,EAAEC,WAAW,EAAEC,WAAW;AAQ7C,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACX,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAA+B,gBAC3CX,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAKO,WAAW,eACvBT,KAAA,CAAAU,aAAA,CAACN,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IACRI,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA;EAAY,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;AAiBD,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAC9C,MAAM;IAAEG,EAAE;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGjB,SAAS,CAAC;IAAE,GAAGc,SAAS;IAAED;EAAe,CAAC,CAAC;EAEpF,oBACId,KAAA,CAAAU,aAAA,CAACL,uBAAuB,EAAAc,MAAA,CAAAC,MAAA,KAChBL,SAAS,EACTC,EAAE;IACNK,aAAa,EAAEJ,WAAY;IAC3BK,aAAa,EAAEJ;EAAY,EAC9B,CAAC;AAEV,CAAC;AAED,SACIN,eAAe,EACfP,uBAAuB","ignoreList":[]}
+{"version":3,"names":["React","useSlider","SliderRoot","SliderThumb","SliderTrack","SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","createElement","className","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit"],"sources":["SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider.js\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components/index.js\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps\n    extends Omit<\n        SliderPrimitives.SliderProps,\n        \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n    > {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS;AAClB,SAASC,UAAU,EAAEC,WAAW,EAAEC,WAAW;AAQ7C,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACX,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BX,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAKO,WAAW,eACvBT,KAAA,CAAAU,aAAA,CAACN,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IACRI,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA;EAAY,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;AAiBD,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAC9C,MAAM;IAAEG,EAAE;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGjB,SAAS,CAAC;IAAE,GAAGc,SAAS;IAAED;EAAe,CAAC,CAAC;EAEpF,oBACId,KAAA,CAAAU,aAAA,CAACL,uBAAuB,EAAAc,MAAA,CAAAC,MAAA,KAChBL,SAAS,EACTC,EAAE;IACNK,aAAa,EAAEJ,WAAY;IAC3BK,aAAa,EAAEJ;EAAY,EAC9B,CAAC;AAEV,CAAC;AAED,SACIN,eAAe,EACfP,uBAAuB","ignoreList":[]}

package/Slider/primitives/SliderPrimitive.stories.d.ts

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