@dynamic-mockups/design-system 0.1.0

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

@@ -0,0 +1,165 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Switch";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Switch").SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        helperText: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        radius: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        highContrast: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultChecked: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        checked: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        labelPosition: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        checkedColorToken: {
+            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 WithLabel: Story;
+export declare const WithHelperText: Story;
+export declare const LabelLeft: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export { Switch as default } from "./Switch";

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

@@ -0,0 +1,35 @@
+/**
+ * Tabs Component
+ * A tabs component that extends Radix UI Tabs
+ */
+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";
+type TabsRootProps = React.ComponentPropsWithoutRef<typeof RadixTabs.Root>;
+export interface TabItem {
+    value: string;
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<TabsRootProps, "children"> {
+    /**
+     * Array of tab items
+     */
+    tabs: TabItem[];
+    /**
+     * Color token for active tab
+     */
+    activeColorToken?: ColorToken;
+    /**
+     * Color token for tab text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,83 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Tabs";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Tabs").TabsProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        tabs: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultValue: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        activeColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        m: {
+            table: {
+                disable: true;
+            };
+        };
+        mx: {
+            table: {
+                disable: true;
+            };
+        };
+        my: {
+            table: {
+                disable: true;
+            };
+        };
+        mt: {
+            table: {
+                disable: true;
+            };
+        };
+        mr: {
+            table: {
+                disable: true;
+            };
+        };
+        mb: {
+            table: {
+                disable: true;
+            };
+        };
+        ml: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ProductInfo: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,59 @@
+/**
+ * Toast Component
+ * A toast notification component using Radix UI Themes Callout for toast-like notifications
+ */
+import React from "react";
+import { Callout } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Toast.scss";
+export type { ColorToken } from "../../../tokens";
+export type ToastSize = "1" | "2" | "3";
+export type ToastVariant = "soft" | "surface" | "outline";
+export type ToastColor = "blue" | "green" | "red" | "yellow" | "gray";
+type CalloutRootProps = React.ComponentPropsWithoutRef<typeof Callout.Root>;
+export interface ToastProps extends Omit<CalloutRootProps, "size" | "variant" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Toast size
+     * @default '2'
+     */
+    size?: ToastSize;
+    /**
+     * Toast variant
+     * @default 'soft'
+     */
+    variant?: ToastVariant;
+    /**
+     * Toast color
+     * @default 'blue'
+     */
+    color?: ToastColor;
+    /**
+     * Toast title
+     */
+    title?: string;
+    /**
+     * Toast message
+     */
+    message?: string;
+    /**
+     * Icon element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Color token for toast background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for toast text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Content
+     */
+    children?: React.ReactNode;
+}
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,118 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Toast";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Toast").ToastProps & React.RefAttributes<HTMLDivElement>>;
+    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;
+            };
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        title: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        message: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        icon: {
+            control: false;
+            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 Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Toast } from "./Toast";
+export type { ToastProps, ToastSize, ToastVariant, ToastColor } from "./Toast";

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

@@ -0,0 +1,20 @@
+/**
+ * Toggle Component
+ * A toggle button component that extends Radix UI Switch as a toggle
+ */
+import React from "react";
+import type { SwitchProps as RadixSwitchProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Toggle.scss";
+export type { ColorToken } from "../../../tokens";
+export type ToggleSize = "1" | "2" | "3";
+export type ToggleColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning";
+export interface ToggleProps extends Omit<RadixSwitchProps, "size" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    size?: ToggleSize;
+    color?: ToggleColor;
+    label?: string;
+    backgroundColorToken?: ColorToken;
+    activeColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,118 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Toggle";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Toggle").ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        color: {
+            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: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        activeColorToken: {
+            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 WithLabel: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle";
+export type { ToggleProps, ToggleSize, ToggleColor } from "./Toggle";

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

@@ -0,0 +1,32 @@
+/**
+ * Tooltip Component
+ * A tooltip component that extends Radix UI Tooltip
+ */
+import React from "react";
+import type { TooltipProps as RadixTooltipProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Tooltip.scss";
+export type { ColorToken } from "../../../tokens";
+export interface TooltipProps extends Omit<RadixTooltipProps, "children" | "content"> {
+    /**
+     * Trigger element
+     */
+    children: React.ReactNode;
+    /**
+     * Tooltip content
+     */
+    content: React.ReactNode;
+    /**
+     * Color token for tooltip background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for tooltip text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;