@dynamic-mockups/design-system 0.1.0

package/dist/src/components/atoms/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ScrollArea Component
+ * A scroll area component that extends Radix UI ScrollArea
+ */
+import React from "react";
+import type { ScrollAreaProps as RadixScrollAreaProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./ScrollArea.scss";
+export type { ColorToken } from "../../../tokens";
+export type ScrollAreaSize = "1" | "2" | "3";
+export type ScrollAreaScrollbars = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends Omit<RadixScrollAreaProps, "size" | "scrollbars" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Scroll area size
+     * @default '1'
+     */
+    size?: ScrollAreaSize;
+    /**
+     * Which scrollbars to show
+     * @default 'vertical'
+     */
+    scrollbars?: ScrollAreaScrollbars;
+    /**
+     * Color token for scrollbar
+     */
+    scrollbarColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Content
+     */
+    children?: React.ReactNode;
+}
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/ScrollArea/ScrollArea.stories.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./ScrollArea";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./ScrollArea").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        scrollbars: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        scrollbarColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        children: {
+            control: false;
+            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: {
+            table: {
+                disable: boolean;
+            };
+        };
+        ml: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const Both: Story;
+export declare const InteractiveColorPicker: Story;

package/dist/src/components/atoms/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from "./ScrollArea";
+export type { ScrollAreaProps, ScrollAreaSize, ScrollAreaScrollbars } from "./ScrollArea";

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

@@ -0,0 +1,55 @@
+/**
+ * Select Component
+ * A select component that extends Radix UI Select
+ */
+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 type SelectSize = "1" | "2" | "3";
+export type SelectVariant = "surface" | "classic" | "soft" | "ghost";
+type SelectRootProps = React.ComponentPropsWithoutRef<typeof RadixSelect.Root>;
+type SelectContentProps = React.ComponentPropsWithoutRef<typeof RadixSelect.Content>;
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectRootProps, "children"> {
+    /**
+     * Select size
+     * @default '2'
+     */
+    size?: SelectSize;
+    /**
+     * Select variant
+     * @default 'surface'
+     */
+    variant?: SelectVariant;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Array of select options
+     */
+    options: SelectOption[];
+    /**
+     * Color token for select background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for select text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Content props
+     */
+    contentProps?: Partial<SelectContentProps>;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,101 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Select";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Select").SelectProps & 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;
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        options: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textColorToken: {
+            control: "select";
+            options: ColorToken[];
+            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: {
+            table: {
+                disable: boolean;
+            };
+        };
+        ml: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
+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 WithDisabled: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectOption, SelectSize, SelectVariant } from "./Select";

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

@@ -0,0 +1,17 @@
+/**
+ * Separator Component
+ * A separator component that extends Radix UI Separator
+ */
+import React from "react";
+import type { SeparatorProps as RadixSeparatorProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Separator.scss";
+export type { ColorToken } from "../../../tokens";
+export type SeparatorSize = "1" | "2" | "3" | "4";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends Omit<RadixSeparatorProps, "size" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    size?: SeparatorSize;
+    orientation?: SeparatorOrientation;
+    colorToken?: ColorToken;
+}
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/Separator/Separator.stories.d.ts

@@ -0,0 +1,79 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Separator";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Separator").SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        colorToken: {
+            control: "select";
+            options: ColorToken[];
+            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: {
+            table: {
+                disable: boolean;
+            };
+        };
+        ml: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Sizes: Story;
+export declare const WithContent: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,55 @@
+/**
+ * Slider Component
+ * A slider component that extends Radix UI Slider
+ */
+import React from "react";
+import type { SliderProps as RadixSliderProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Slider.scss";
+export type { ColorToken } from "../../../tokens";
+export type SliderSize = "1" | "2" | "3";
+export type SliderVariant = "classic" | "surface" | "soft";
+export interface SliderProps extends Omit<RadixSliderProps, "size" | "variant" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Slider size
+     * @default '2'
+     */
+    size?: SliderSize;
+    /**
+     * Slider variant
+     * @default 'classic'
+     */
+    variant?: SliderVariant;
+    /**
+     * Default value(s)
+     */
+    defaultValue?: number[];
+    /**
+     * Min value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Max value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Color token for slider track
+     */
+    trackColorToken?: ColorToken;
+    /**
+     * Color token for slider thumb
+     */
+    thumbColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/src/components/atoms/Slider/Slider.stories.d.ts

@@ -0,0 +1,115 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Slider";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Slider").SliderProps & React.RefAttributes<HTMLSpanElement>>;
+    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;
+            };
+        };
+        defaultValue: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        min: {
+            control: "number";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        max: {
+            control: "number";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        step: {
+            control: "number";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        trackColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        thumbColorToken: {
+            control: "select";
+            options: ColorToken[];
+            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: {
+            table: {
+                disable: boolean;
+            };
+        };
+        ml: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
+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;

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

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

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

@@ -0,0 +1,100 @@
+/**
+ * Stepper Component
+ * A step-based progress indicator with step text display
+ */
+import React from "react";
+import type { ProgressProps as RadixProgressProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Stepper.scss";
+export type { ColorToken } from "../../../tokens";
+export type StepperVariant = "classic" | "surface" | "soft";
+export type StepperSize = "1" | "2" | "3";
+export type StepperColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning" | "info" | "neutral" | "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky";
+export type DisplayType = "steps" | "percentage";
+export type TextPosition = "left" | "right" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface StepperProps extends Omit<RadixProgressProps, "color" | "variant" | "size" | "value" | "max" | "duration" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Stepper variant style
+     * @default 'surface'
+     */
+    variant?: StepperVariant;
+    /**
+     * Stepper size
+     * @default '2'
+     */
+    size?: StepperSize;
+    /**
+     * Stepper color - supports custom brand colors and Radix UI colors
+     * @default 'primary'
+     */
+    color?: StepperColor;
+    /**
+     * Color token for the progress bar fill
+     * @default undefined (uses color prop)
+     */
+    barColorToken?: ColorToken;
+    /**
+     * Color token for the progress bar background
+     * @default 'gray-a3'
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Enable high contrast mode
+     * @default false
+     */
+    highContrast?: boolean;
+    /**
+     * Current step number (1-based)
+     * @default 1
+     */
+    currentStep?: number;
+    /**
+     * Total number of steps
+     * @default 4
+     */
+    totalSteps?: number;
+    /**
+     * Animation duration (e.g., "300ms", "1s")
+     */
+    duration?: `${number}ms` | `${number}s`;
+    /**
+     * Border radius preset
+     */
+    radius?: "none" | "small" | "medium" | "large" | "full";
+    /**
+     * Display type: steps or percentage
+     * @default 'steps'
+     */
+    displayType?: DisplayType;
+    /**
+     * Position of the progress text
+     * @default 'left'
+     */
+    textPosition?: TextPosition;
+    /**
+     * Color token for the text
+     * @default 'gray-12'
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Whether to show the step/percentage text
+     * @default true
+     */
+    showStepText?: boolean;
+    /**
+     * Custom step text format. Use {current} and {total} as placeholders
+     * @default "Step {current}/{total}"
+     */
+    stepTextFormat?: string;
+    /**
+     * Starting text (e.g., "Start")
+     * @default undefined
+     */
+    startText?: string;
+    /**
+     * Ending text (e.g., "Complete")
+     * @default undefined
+     */
+    endText?: string;
+}
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;