@webiny/admin-ui 6.0.0-alpha.0

package/Skeleton/Skeleton.mdx

@@ -0,0 +1,219 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SkeletonStories from './Skeleton.stories';
+
+<Meta of={SkeletonStories} />
+
+# Skeleton
+
+The Skeleton component is a placeholder UI element used to indicate that content is loading. It provides a visual representation of the content's structure before the actual content is loaded, improving the perceived performance and user experience during loading states.
+
+## Usage
+
+<Canvas of={SkeletonStories.Documentation} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SkeletonStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+```
+
+## Examples
+
+### Types
+
+The Skeleton component supports three different types: `area`, `text`, and `thumbnail`.
+
+#### Area
+
+The default type, used for general content areas.
+
+<Canvas of={SkeletonStories.Area} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const AreaSkeletonExample = () => {
+    return <Skeleton type="area" className="wby-w-1/2 wby-h-32" />;
+};
+
+export default AreaSkeletonExample;
+` } } />
+
+#### Text
+
+Used for text content, spans the full width of its container.
+
+<Canvas of={SkeletonStories.Text} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const TextSkeletonExample = () => {
+    return <Skeleton type="text" />;
+};
+
+export default TextSkeletonExample;
+` } } />
+
+#### Thumbnail
+
+Used for square-shaped content like images or avatars.
+
+<Canvas of={SkeletonStories.Thumbnail} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThumbnailSkeletonExample = () => {
+    return <Skeleton type="thumbnail" />;
+};
+
+export default ThumbnailSkeletonExample;
+` } } />
+
+### Sizes
+
+The Skeleton component comes in various sizes to match different content dimensions.
+
+#### Extra Small (XS)
+
+<Canvas of={SkeletonStories.ExtraSmall} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XsSkeletonExample = () => {
+    return <Skeleton size="xs" />;
+};
+
+export default XsSkeletonExample;
+` } } />
+
+#### Small (SM)
+
+<Canvas of={SkeletonStories.Small} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SmSkeletonExample = () => {
+    return <Skeleton size="sm" />;
+};
+
+export default SmSkeletonExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={SkeletonStories.Medium} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const MdSkeletonExample = () => {
+    return <Skeleton size="md" />;
+};
+
+export default MdSkeletonExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={SkeletonStories.Large} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const LgSkeletonExample = () => {
+    return <Skeleton size="lg" />;
+};
+
+export default LgSkeletonExample;
+` } } />
+
+#### Extra Large (XL)
+
+<Canvas of={SkeletonStories.ExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XlSkeletonExample = () => {
+    return <Skeleton size="xl" />;
+};
+
+export default XlSkeletonExample;
+` } } />
+
+#### Double Extra Large (XXL)
+
+<Canvas of={SkeletonStories.DoubleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XxlSkeletonExample = () => {
+    return <Skeleton size="xxl" />;
+};
+
+export default XxlSkeletonExample;
+` } } />
+
+#### Triple Extra Large (3XL)
+
+<Canvas of={SkeletonStories.TripleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThreeXlSkeletonExample = () => {
+    return <Skeleton size="3xl" />;
+};
+
+export default ThreeXlSkeletonExample;
+` } } />
+
+### Complex Layouts
+
+You can combine multiple Skeleton components to create more complex loading states.
+
+<Canvas of={SkeletonStories.MultipleAreas} source={ { code: `
+import React from "react";
+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>
+            <div>
+                <Skeleton type="area" className="wby-w-32 wby-h-full" />
+            </div>
+        </div>
+    );
+};
+
+export default MultipleAreasExample;
+` } } />

package/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./Skeleton";
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Text: Story;
+export declare const Thumbnail: Story;
+export declare const Area: Story;
+export declare const MultipleAreas: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const DoubleExtraLarge: Story;
+export declare const TripleExtraLarge: Story;
+export declare const Documentation: Story;

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { Skeleton } from "./Skeleton";
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "padded"
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "thumbnail", "area"]
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    }
+  }
+};
+export default meta;
+export const Default = {};
+export const Text = {
+  args: {
+    type: "text"
+  }
+};
+export const Thumbnail = {
+  args: {
+    type: "thumbnail"
+  }
+};
+export const Area = {
+  args: {
+    type: "area",
+    className: "wby-w-1/2 wby-h-32"
+  }
+};
+export const MultipleAreas = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-gap-md"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-32"
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-32"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-full"
+  })))
+};
+export const ExtraSmall = {
+  args: {
+    size: "xs"
+  }
+};
+export const Small = {
+  args: {
+    size: "sm"
+  }
+};
+export const Medium = {
+  args: {
+    size: "md"
+  }
+};
+export const Large = {
+  args: {
+    size: "lg"
+  }
+};
+export const ExtraLarge = {
+  args: {
+    size: "xl"
+  }
+};
+export const DoubleExtraLarge = {
+  args: {
+    size: "xxl"
+  }
+};
+export const TripleExtraLarge = {
+  args: {
+    size: "3xl"
+  }
+};
+export const Documentation = {
+  args: {
+    type: "area",
+    size: "lg"
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      description: "The type of skeleton to display",
+      options: ["text", "thumbnail", "area"]
+    },
+    size: {
+      control: "select",
+      description: "The size of the skeleton",
+      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    }
+  }
+};
+
+//# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +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":[]}

package/Skeleton/index.d.ts

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

package/Skeleton/index.js

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

package/Skeleton/index.js.map

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

package/Slider/Slider.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { SliderPrimitiveProps } from "./primitives";
+import { FormComponentProps } from "../FormComponent";
+/**
+ * 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;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, 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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Slider, type SliderProps };

package/Slider/Slider.js

@@ -0,0 +1,100 @@
+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";
+
+/**
+ * Slider Renderer with side label
+ */
+
+const SliderRendererWithSideValue = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-flex wby-flex-row wby-items-center wby-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-2/12 wby-pr-sm"
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: props.label,
+    required: props.required,
+    disabled: props.disabled,
+    invalid: props.invalid,
+    weight: "light"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-9/12"
+  }, /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, props)), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-1/12 wby-pl-sm wby-text-right"
+  }, /*#__PURE__*/React.createElement(SliderValue, {
+    value: props.textValue,
+    disabled: props.disabled
+  })));
+};
+
+/**
+ * Slider
+ */
+
+const DecoratableSlider = ({
+  description,
+  note,
+  validation,
+  labelPosition,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = validationIsValid === false;
+  const {
+    vm,
+    changeValue,
+    commitValue
+  } = useSlider(props);
+  if (labelPosition === "side") {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(FormComponentDescription, {
+      text: description,
+      disabled: props.disabled
+    }), /*#__PURE__*/React.createElement(SliderRendererWithSideValue, Object.assign({}, props, vm, {
+      invalid: invalid,
+      onValueChange: changeValue,
+      onValueCommit: commitValue
+    })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+      text: validationMessage,
+      invalid: invalid,
+      disabled: props.disabled
+    }), /*#__PURE__*/React.createElement(FormComponentNote, {
+      text: note,
+      disabled: props.disabled
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: /*#__PURE__*/React.createElement(Label, {
+      text: props.label,
+      value: vm.textValue
+    }),
+    disabled: props.disabled,
+    required: props.required,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, Object.assign({}, props, vm, {
+    onValueChange: changeValue,
+    onValueCommit: commitValue
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: props.disabled
+  }));
+};
+const Slider = makeDecoratable("Slider", DecoratableSlider);
+export { Slider };
+
+//# sourceMappingURL=Slider.js.map

package/Slider/Slider.js.map

@@ -0,0 +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 {\n    SliderPrimitiveRenderer,\n    SliderPrimitiveProps,\n    SliderPrimitiveRendererProps,\n    useSlider,\n    SliderValue\n} from \"./primitives\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\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":[]}

package/Slider/Slider.mdx

@@ -0,0 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SliderStories from './Slider.stories';
+
+<Meta of={SliderStories} />
+
+# Slider
+
+The Slider component is an interactive input control that allows users to select a value from a range by moving a thumb along a track. It provides a visual and intuitive way for users to adjust numeric values within a predefined range.
+
+## Usage
+
+<Canvas of={SliderStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Slider } from "@webiny/admin-ui";
+
+const SliderExample = () => {
+    const [value, setValue] = useState(50);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue: number) => {
+        setValue(newValue);
+
+        if (newValue === 0) {
+            setValidation({ isValid: false, message: "Please select a value" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Slider
+                label="Volume Level"
+                description="Adjust the volume level of your device"
+                note="Note: Higher values may cause distortion on some devices"
+                min={0}
+                max={100}
+                step={1}
+                value={value}
+                required={true}
+                onValueChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => \`\${value}%\`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SliderExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Slider/Slider.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]}/>
+
+```tsx
+import React, { useState } from "react";
+import { Slider } from "@webiny/admin-ui";
+
+const SliderExample = () => {
+    const [value, setValue] = useState(50);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue: number) => {
+        setValue(newValue);
+
+        if (newValue === 0) {
+            setValidation({ isValid: false, message: "Please select a value" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Slider
+                label="Volume Level"
+                description="Adjust the volume level of your device"
+                note="Note: Higher values may cause distortion on some devices"
+                min={0}
+                max={100}
+                step={1}
+                value={value}
+                required={true}
+                onValueChange={handleChange}
+                showTooltip={true}
+                transformValue={(value) => `${value}%`}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SliderExample;
+```

package/Slider/Slider.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const WithSideLabel: Story;
+export declare const WithSideLabelRequired: Story;
+export declare const WithSideLabelAndDescription: Story;
+export declare const WithSideLabelAndNotes: Story;
+export declare const WithSideLabelAndErrors: Story;
+export declare const WithSideLabelDisabled: Story;
+export declare const WithSideLabelFullExample: Story;
+export declare const Documentation: Story;