@dynamic-mockups/design-system 0.1.0

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

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

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

@@ -0,0 +1,44 @@
+/**
+ * Card Component
+ * A card component that extends Radix UI Card
+ */
+import React from "react";
+import type { CardProps as RadixCardProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Card.scss";
+export type { ColorToken } from "../../../tokens";
+export type CardSize = "1" | "2" | "3" | "4" | "5";
+export type CardVariant = "surface" | "classic" | "ghost";
+export interface CardProps extends Omit<RadixCardProps, "size" | "variant" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Card size
+     * @default '1'
+     */
+    size?: CardSize;
+    /**
+     * Card variant
+     * @default 'surface'
+     */
+    variant?: CardVariant;
+    /**
+     * Color token for card background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for card border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for card text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Card content
+     */
+    children?: React.ReactNode;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,103 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Card";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Card").CardProps & 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;
+            };
+        };
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        borderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        textColorToken: {
+            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 Default: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const ProductCard: Story;
+export declare const UserProfileCard: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * Checkbox Component
+ * A checkbox component that extends Radix UI Checkbox
+ */
+import React from "react";
+import type { CheckboxProps as RadixCheckboxProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Checkbox.scss";
+export type { ColorToken } from "../../../tokens";
+export type CheckboxSize = "1" | "2" | "3";
+export type CheckboxColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning";
+export interface CheckboxProps extends Omit<RadixCheckboxProps, "size" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Checkbox size
+     * @default '2'
+     */
+    size?: CheckboxSize;
+    /**
+     * Checkbox color
+     * @default 'primary'
+     */
+    color?: CheckboxColor;
+    /**
+     * Label text for the checkbox
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, checkbox shows error state
+     */
+    error?: string;
+    /**
+     * Color token for the checkbox background (unchecked state)
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for the checkbox background (checked state)
+     */
+    checkedColorToken?: ColorToken;
+    /**
+     * Color token for the checkbox border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for the checkmark icon
+     */
+    checkmarkColorToken?: ColorToken;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,168 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Checkbox";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Checkbox").CheckboxProps & 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;
+            };
+        };
+        error: {
+            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;
+            };
+        };
+        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: "select";
+            options: (string | boolean)[];
+            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;
+            };
+        };
+        borderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        checkmarkColorToken: {
+            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 WithError: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const Group: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * Dialog Component
+ * A dialog component that extends Radix UI Dialog
+ */
+import React from "react";
+import type { DialogProps as RadixDialogProps } from "@radix-ui/react-dialog";
+import { type ColorToken } from "../../../tokens";
+import "./Dialog.scss";
+export type { ColorToken } from "../../../tokens";
+export interface DialogProps extends Omit<RadixDialogProps, "children"> {
+    /**
+     * Dialog trigger element
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Dialog title
+     */
+    title?: string;
+    /**
+     * Dialog description
+     */
+    description?: string;
+    /**
+     * Dialog content
+     */
+    children?: React.ReactNode;
+    /**
+     * Show close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Color token for overlay background
+     */
+    overlayColorToken?: ColorToken;
+    /**
+     * Color token for dialog background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for title text
+     */
+    titleColorToken?: ColorToken;
+    /**
+     * Color token for description text
+     */
+    descriptionColorToken?: ColorToken;
+    /**
+     * Custom className for content
+     */
+    className?: string;
+}
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,122 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Dialog";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Dialog").DialogProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        title: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        description: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        showClose: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        overlayColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        titleColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        descriptionColorToken: {
+            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 WithForm: Story;
+export declare const LongContent: Story;
+export declare const WithoutClose: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,61 @@
+/**
+ * DropdownMenu Component
+ * A dropdown menu component that extends Radix UI DropdownMenu
+ */
+import React from "react";
+import { DropdownMenu as RadixDropdownMenu } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./DropdownMenu.scss";
+export type { ColorToken } from "../../../tokens";
+export type DropdownMenuSize = "1" | "2";
+export type DropdownMenuVariant = "solid" | "soft";
+type DropdownMenuRootProps = React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Root>;
+type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>;
+export interface DropdownMenuItem {
+    label: string;
+    value: string;
+    shortcut?: string;
+    color?: "red" | "blue" | "green";
+    disabled?: boolean;
+}
+export interface DropdownMenuProps extends Omit<DropdownMenuRootProps, "children"> {
+    /**
+     * Dropdown menu trigger element
+     */
+    trigger: React.ReactNode;
+    /**
+     * Array of menu items
+     */
+    items: DropdownMenuItem[];
+    /**
+     * Menu size
+     * @default '2'
+     */
+    size?: DropdownMenuSize;
+    /**
+     * Menu variant
+     * @default 'solid'
+     */
+    variant?: DropdownMenuVariant;
+    /**
+     * Callback when item is selected
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Color token for menu background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for menu item text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Content props for positioning
+     */
+    contentProps?: Partial<DropdownMenuContentProps>;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;