@dynamic-mockups/design-system 0.2.14 → 0.2.17

package/dist/src/components/atoms/ui-components/Select/Select.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Select as RadixSelect } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Select.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    borderColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Select: React.FC<RadixSelect.RootProps> & {
+    Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<RadixSelect.ContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<RadixSelect.ItemProps & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<RadixSelect.GroupProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<RadixSelect.LabelProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<RadixSelect.SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/src/components/atoms/ui-components/Select/Select.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from "@storybook/react-vite";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/themes/components/select").RootProps> & {
+        Trigger: React.ForwardRefExoticComponent<import("./Select").SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Content: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/select").ContentProps & React.RefAttributes<HTMLDivElement>>;
+        Item: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/select").ItemProps & React.RefAttributes<HTMLDivElement>>;
+        Group: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/select").GroupProps & React.RefAttributes<HTMLDivElement>>;
+        Label: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/select").LabelProps & React.RefAttributes<HTMLDivElement>>;
+        Separator: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/select").SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/atoms/ui-components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectTriggerProps, ColorToken } from "./Select";

package/dist/src/components/atoms/ui-components/Separator/Separator.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Separator as RadixSeparator } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Separator.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface SeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSeparator>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    colorToken?: ColorToken;
+    className?: string;
+}
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/ui-components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export { Separator } from "./Separator";
+export type { SeparatorProps } from "./Separator";

package/dist/src/components/atoms/ui-components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { SkeletonProps as RadixSkeletonProps } from "@radix-ui/themes";
+import "./Skeleton.scss";
+export interface SkeletonProps extends Omit<RadixSkeletonProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    className?: string;
+}
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/src/components/atoms/ui-components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Skeleton").SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Card: Story;

package/dist/src/components/atoms/ui-components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";

package/dist/src/components/atoms/ui-components/Slider/Slider.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Slider as RadixSlider } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Slider.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSlider>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    fillColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/src/components/atoms/{Slider → ui-components/Slider}/Slider.stories.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./Slider";
+import React from "react";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./Slider").SliderProps & React.RefAttributes<HTMLSpanElement>>;
@@ -9,99 +8,68 @@ declare const meta: {
     };
     tags: string[];
     argTypes: {
-        size: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        variant: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
         defaultValue: {
-            control: "object";
+            control: false;
             description: string;
             table: {
                 category: string;
             };
         };
         min: {
-            control: "number";
+            control: {
+                type: "number";
+            };
             description: string;
             table: {
                 category: string;
             };
         };
         max: {
-            control: "number";
+            control: {
+                type: "number";
+            };
             description: string;
             table: {
                 category: string;
             };
         };
         step: {
-            control: "number";
+            control: {
+                type: "number";
+            };
             description: string;
             table: {
                 category: string;
             };
         };
-        trackColorToken: {
+        size: {
             control: "select";
-            options: ColorToken[];
+            options: string[];
             description: string;
             table: {
                 category: string;
             };
         };
-        thumbColorToken: {
+        variant: {
             control: "select";
-            options: ColorToken[];
+            options: string[];
             description: string;
             table: {
                 category: string;
             };
         };
-        m: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mx: {
-            table: {
-                disable: boolean;
-            };
-        };
-        my: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mt: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mr: {
-            table: {
-                disable: boolean;
-            };
-        };
-        mb: {
+        backgroundColorToken: {
+            control: false;
+            description: string;
             table: {
-                disable: boolean;
+                category: string;
             };
         };
-        ml: {
+        fillColorToken: {
+            control: false;
+            description: string;
             table: {
-                disable: boolean;
+                category: string;
             };
         };
     };
@@ -110,6 +78,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Sizes: Story;
-export declare const Variants: Story;
-export declare const VolumeControl: Story;
-export declare const InteractiveColorPicker: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/atoms/ui-components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps, ColorToken } from "./Slider";

package/dist/src/components/atoms/ui-components/Spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { SpinnerProps as RadixSpinnerProps } from "@radix-ui/themes";
+import "./Spinner.scss";
+export interface SpinnerProps extends Omit<RadixSpinnerProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    className?: string;
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/src/components/atoms/ui-components/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Spinner").SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/dist/src/components/atoms/ui-components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";

package/dist/src/components/atoms/ui-components/Stepper/Stepper.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Stepper Component
+ * A step indicator/progress bar with customizable display options
+ */
+import React from "react";
+import { type ColorToken } from "../../../../tokens";
+import "./Stepper.scss";
+export type { ColorToken } from "../../../../tokens";
+export type StepperDisplayType = "progress" | "steps" | "both";
+export type StepperTextPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "none";
+export type StepperSize = "1" | "2" | "3";
+export interface StepperProps {
+    /**
+     * Current step number
+     */
+    currentStep: number;
+    /**
+     * Total number of steps
+     */
+    totalSteps: number;
+    /**
+     * Display type - progress bar, step numbers, or both
+     * @default 'both'
+     */
+    displayType?: StepperDisplayType;
+    /**
+     * Position of the step text
+     * @default 'top-left'
+     */
+    textPosition?: StepperTextPosition;
+    /**
+     * Size of the progress bar
+     * @default '2'
+     */
+    size?: StepperSize;
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for fill
+     */
+    fillColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/ui-components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,64 @@
+import type { StoryObj } from "@storybook/react-vite";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Stepper").StepperProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        currentStep: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        totalSteps: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        displayType: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textPosition: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StepsOnly: Story;
+export declare const ProgressOnly: Story;
+export declare const DifferentPositions: Story;

package/dist/src/components/atoms/ui-components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper } from "./Stepper";
+export type { StepperProps, StepperDisplayType, StepperTextPosition, StepperSize, ColorToken } from "./Stepper";

package/dist/src/components/atoms/ui-components/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Switch as RadixSwitch } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Switch.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSwitch>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    borderColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/atoms/ui-components/Switch/Switch.stories.d.ts

@@ -0,0 +1,61 @@
+import type { StoryObj } from "@storybook/react-vite";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Switch").SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultChecked: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        borderColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/atoms/ui-components/Table/Table.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Table as RadixTable } from "@radix-ui/themes";
+import "./Table.scss";
+export interface TableProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTable.Root>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    className?: string;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> & {
+    Header: React.ForwardRefExoticComponent<RadixTable.HeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+    Body: React.ForwardRefExoticComponent<RadixTable.BodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+    Row: React.ForwardRefExoticComponent<RadixTable.RowProps & React.RefAttributes<HTMLTableRowElement>>;
+    ColumnHeaderCell: React.ForwardRefExoticComponent<RadixTable.ColumnHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
+    Cell: React.ForwardRefExoticComponent<RadixTable.CellProps & React.RefAttributes<HTMLTableDataCellElement>>;
+    RowHeaderCell: React.ForwardRefExoticComponent<RadixTable.RowHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
+};

package/dist/src/components/atoms/ui-components/Table/Table.stories.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Table").TableProps & React.RefAttributes<HTMLTableElement>> & {
+        Header: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").HeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+        Body: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").BodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+        Row: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").RowProps & React.RefAttributes<HTMLTableRowElement>>;
+        ColumnHeaderCell: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").ColumnHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
+        Cell: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").CellProps & React.RefAttributes<HTMLTableDataCellElement>>;
+        RowHeaderCell: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/table").RowHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/components/atoms/ui-components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from "./Table";
+export type { TableProps } from "./Table";

package/dist/src/components/atoms/ui-components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Tabs as RadixTabs } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Tabs.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface TabsRootProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>> & {
+    List: React.ForwardRefExoticComponent<RadixTabs.ListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<RadixTabs.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<RadixTabs.ContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/src/components/atoms/ui-components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Tabs").TabsRootProps & React.RefAttributes<HTMLDivElement>> & {
+        List: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/tabs").ListProps & React.RefAttributes<HTMLDivElement>>;
+        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/tabs").TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Content: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/tabs").ContentProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ProductInfo: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/atoms/ui-components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabsRootProps, ColorToken } from "./Tabs";

package/dist/src/components/atoms/ui-components/TextArea/TextArea.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { TextArea as RadixTextArea } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./TextArea.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface TextAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTextArea>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    borderColorToken?: ColorToken;
+    className?: string;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/atoms/ui-components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,68 @@
+import type { StoryObj } from "@storybook/react-vite";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./TextArea").TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        borderColorToken: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const WithCustomColors: Story;

package/dist/src/components/atoms/ui-components/TextField/TextField.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TextField as RadixTextField } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./TextField.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface TextFieldProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTextField.Root>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;