@dynamic-mockups/design-system 0.2.14 → 0.2.17

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Accordion").AccordionProps & React.RefAttributes<HTMLDivElement>> & {
+        Item: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        Header: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+        Trigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Multiple: Story;

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

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

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

@@ -0,0 +1,49 @@
+/**
+ * Alert Component
+ * A static alert/banner component (different from AlertDialog)
+ * Built on top of Radix UI Callout
+ */
+import React from "react";
+import { Callout } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Alert.scss";
+export type { ColorToken } from "../../../../tokens";
+export type AlertVariant = "soft" | "surface" | "outline";
+export type AlertColor = "blue" | "green" | "yellow" | "red" | "gray";
+export interface AlertProps extends Omit<React.ComponentPropsWithoutRef<typeof Callout.Root>, "size" | "variant" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Alert variant
+     * @default 'soft'
+     */
+    variant?: AlertVariant;
+    /**
+     * Alert color
+     * @default 'blue'
+     */
+    color?: AlertColor;
+    /**
+     * Alert title
+     */
+    title?: string;
+    /**
+     * Alert message
+     */
+    message?: string;
+    /**
+     * Icon element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Alert").AlertProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Variants: Story;

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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { AlertDialog as RadixAlertDialog } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./AlertDialog.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface AlertDialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Content>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const AlertDialog: React.FC<RadixAlertDialog.RootProps> & {
+    Trigger: React.ForwardRefExoticComponent<RadixAlertDialog.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<RadixAlertDialog.TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<RadixAlertDialog.DescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<RadixAlertDialog.ActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<RadixAlertDialog.CancelProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/themes/components/alert-dialog").RootProps> & {
+        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/alert-dialog").TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Content: React.ForwardRefExoticComponent<import("./AlertDialog").AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+        Title: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/alert-dialog").TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+        Description: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/alert-dialog").DescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+        Action: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/alert-dialog").ActionProps & React.RefAttributes<HTMLButtonElement>>;
+        Cancel: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/alert-dialog").CancelProps & React.RefAttributes<HTMLButtonElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomButtons: Story;
+export declare const WithCustomColors: Story;

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * AspectRatio Component
+ */
+import React from "react";
+import type { AspectRatioProps as RadixAspectRatioProps } from "@radix-ui/themes";
+import "./AspectRatio.scss";
+export interface AspectRatioProps extends Omit<RadixAspectRatioProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    className?: string;
+}
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/ui-components/AspectRatio/AspectRatio.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("./AspectRatio").AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Square: Story;
+export declare const Video: Story;

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

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

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

@@ -0,0 +1,15 @@
+/**
+ * Avatar Component
+ * An avatar component that extends Radix UI Avatar with custom color tokens
+ */
+import React from "react";
+import { Avatar as RadixAvatar } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Avatar.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixAvatar>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -33,6 +33,14 @@ declare const meta: {
                 category: string;
             };
         };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
         src: {
             control: "text";
             description: string;

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

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

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

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

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

@@ -1,17 +1,15 @@
 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>>;
+    component: React.ForwardRefExoticComponent<import("./Badge").BadgeProps & React.RefAttributes<HTMLSpanElement>>;
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
-        size: {
-            control: "select";
-            options: string[];
+        children: {
+            control: "text";
             description: string;
             table: {
                 category: string;
@@ -25,69 +23,56 @@ declare const meta: {
                 category: string;
             };
         };
-        placeholder: {
-            control: "text";
+        color: {
+            control: "select";
+            options: string[];
             description: string;
             table: {
                 category: string;
             };
         };
-        options: {
-            control: "object";
+        size: {
+            control: "select";
+            options: string[];
             description: string;
             table: {
                 category: string;
             };
         };
-        backgroundColorToken: {
-            control: "select";
-            options: ColorToken[];
+        highContrast: {
+            control: "boolean";
             description: string;
             table: {
                 category: string;
             };
         };
-        textColorToken: {
+        radius: {
             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: {
+        backgroundColorToken: {
+            control: false;
+            description: string;
             table: {
-                disable: boolean;
+                category: string;
             };
         };
-        mb: {
+        textColorToken: {
+            control: false;
+            description: string;
             table: {
-                disable: boolean;
+                category: string;
             };
         };
-        ml: {
+        borderColorToken: {
+            control: false;
+            description: string;
             table: {
-                disable: boolean;
+                category: string;
             };
         };
     };
@@ -95,7 +80,6 @@ declare const meta: {
 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;
+export declare const Colors: Story;
+export declare const WithCustomColors: Story;

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * Button Component
+ * A flexible button component that extends Radix UI with custom color tokens
+ */
+import React from "react";
+import { Button as RadixButton } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Button.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface ButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixButton>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    borderColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,32 +1,24 @@
 import React from "react";
 import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./Switch";
+import type { ColorToken } from "./Button";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Switch").SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+    component: React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
-        label: {
+        children: {
             control: "text";
             description: string;
             table: {
                 category: string;
             };
         };
-        helperText: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        size: {
+        variant: {
             control: "select";
             options: string[];
-            description: string;
             table: {
                 category: string;
             };
@@ -39,10 +31,9 @@ declare const meta: {
                 category: string;
             };
         };
-        variant: {
+        size: {
             control: "select";
             options: string[];
-            description: string;
             table: {
                 category: string;
             };
@@ -62,36 +53,23 @@ declare const meta: {
                 category: string;
             };
         };
-        disabled: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        defaultChecked: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        checked: {
-            control: "boolean";
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
             description: string;
             table: {
                 category: string;
             };
         };
-        labelPosition: {
+        textColorToken: {
             control: "select";
-            options: string[];
+            options: ColorToken[];
             description: string;
             table: {
                 category: string;
             };
         };
-        backgroundColorToken: {
+        borderColorToken: {
             control: "select";
             options: ColorToken[];
             description: string;
@@ -99,17 +77,16 @@ declare const meta: {
                 category: string;
             };
         };
-        checkedColorToken: {
-            control: "select";
-            options: ColorToken[];
+        disabled: {
+            control: "boolean";
             description: string;
             table: {
                 category: string;
             };
         };
-        thumbColorToken: {
+        type: {
             control: "select";
-            options: ColorToken[];
+            options: string[];
             description: string;
             table: {
                 category: string;
@@ -150,16 +127,22 @@ declare const meta: {
                 disable: boolean;
             };
         };
+        asChild: {
+            table: {
+                disable: true;
+            };
+        };
     };
 };
 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 SoftVariant: Story;
+export declare const OutlineVariant: Story;
+export declare const GhostVariant: Story;
 export declare const Disabled: Story;
-export declare const DisabledChecked: Story;
 export declare const Sizes: Story;
-export declare const Colors: Story;
+export declare const AllVariants: Story;
+export declare const RadixColors: Story;
+export declare const TokenCustomization: Story;
 export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,3 @@
+export { Button } from "./Button";
+export type { ButtonProps, ColorToken } from "./Button";
+export { Button as default } from "./Button";

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Callout as RadixCallout } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Callout.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface CalloutProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixCallout.Root>, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLDivElement>> & {
+    Icon: React.ForwardRefExoticComponent<RadixCallout.IconProps & React.RefAttributes<HTMLDivElement>>;
+    Text: React.ForwardRefExoticComponent<RadixCallout.TextProps & React.RefAttributes<HTMLParagraphElement>>;
+};

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Callout").CalloutProps & React.RefAttributes<HTMLDivElement>> & {
+        Icon: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/callout").IconProps & React.RefAttributes<HTMLDivElement>>;
+        Text: React.ForwardRefExoticComponent<import("@radix-ui/themes/components/callout").TextProps & React.RefAttributes<HTMLParagraphElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Colors: Story;

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

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

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

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

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

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

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

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