@dynamic-mockups/design-system 0.1.0

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

@@ -0,0 +1,52 @@
+/**
+ * Accordion Component
+ * An accordion component that extends Radix UI Accordion
+ */
+import React from "react";
+import type { AccordionSingleProps, AccordionMultipleProps } from "@radix-ui/react-accordion";
+import { type ColorToken } from "../../../tokens";
+import "./Accordion.scss";
+export type { ColorToken } from "../../../tokens";
+export type AccordionType = "single" | "multiple";
+export interface AccordionItemData {
+    value: string;
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+}
+export interface BaseAccordionProps {
+    /**
+     * Accordion type - single allows one item open, multiple allows many
+     * @default 'single'
+     */
+    type?: AccordionType;
+    /**
+     * Array of accordion items
+     */
+    items: AccordionItemData[];
+    /**
+     * Default open value(s)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Color token for trigger text
+     */
+    triggerColorToken?: ColorToken;
+    /**
+     * Color token for content text
+     */
+    contentColorToken?: ColorToken;
+    /**
+     * Color token for border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export type AccordionProps = BaseAccordionProps & (Omit<AccordionSingleProps, "type" | "children"> | Omit<AccordionMultipleProps, "type" | "children">);
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,109 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Accordion";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Accordion").AccordionProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        items: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultValue: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        triggerColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        contentColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        borderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            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 Single: Story;
+export declare const Multiple: Story;
+export declare const FAQ: Story;
+export declare const RichContent: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * AlertDialog Component
+ * An alert dialog component that extends Radix UI AlertDialog
+ */
+import React from "react";
+import type { AlertDialogProps as RadixAlertDialogProps } from "@radix-ui/react-alert-dialog";
+import { type ColorToken } from "../../../tokens";
+import "./AlertDialog.scss";
+export type { ColorToken } from "../../../tokens";
+export interface AlertDialogProps extends Omit<RadixAlertDialogProps, "children"> {
+    /**
+     * Alert dialog trigger element
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Alert dialog title
+     */
+    title: string;
+    /**
+     * Alert dialog description
+     */
+    description: string;
+    /**
+     * Cancel button text
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * Action button text
+     * @default 'Confirm'
+     */
+    actionText?: string;
+    /**
+     * Callback when action button is clicked
+     */
+    onAction?: () => void;
+    /**
+     * Callback when cancel button is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * 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;
+    /**
+     * Color token for action button background
+     */
+    actionColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,144 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./AlertDialog";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./AlertDialog").AlertDialogProps & 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;
+            };
+        };
+        cancelText: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        actionText: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onAction: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onCancel: {
+            control: false;
+            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;
+            };
+        };
+        actionColorToken: {
+            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 CustomText: Story;
+export declare const WithCallback: Story;
+export declare const DangerAction: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,54 @@
+/**
+ * Avatar Component
+ * An avatar component that extends Radix UI Avatar
+ */
+import React from "react";
+import type { AvatarProps as RadixAvatarProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Avatar.scss";
+export type { ColorToken } from "../../../tokens";
+export type AvatarSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+export type AvatarVariant = "solid" | "soft";
+export type AvatarRadius = "none" | "small" | "medium" | "large" | "full";
+export interface AvatarProps extends Omit<RadixAvatarProps, "size" | "variant" | "radius" | "fallback" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Avatar size
+     * @default '3'
+     */
+    size?: AvatarSize;
+    /**
+     * Avatar variant
+     * @default 'soft'
+     */
+    variant?: AvatarVariant;
+    /**
+     * Border radius preset
+     * @default 'full'
+     */
+    radius?: AvatarRadius;
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Fallback text (usually initials)
+     */
+    fallback?: string;
+    /**
+     * Color token for avatar background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for fallback text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,119 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Avatar";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Avatar").AvatarProps & 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;
+            };
+        };
+        radius: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        src: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        alt: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        fallback: {
+            control: "text";
+            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 WithImage: Story;
+export declare const WithFallback: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const Radius: Story;
+export declare const WithImages: Story;
+export declare const UserList: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,58 @@
+/**
+ * Badge Component
+ * A flexible badge component that extends Radix UI with icon support
+ */
+import React from "react";
+import type { BadgeProps as RadixBadgeProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Badge.scss";
+export type { ColorToken } from "../../../tokens";
+export type BadgeVariant = "solid" | "soft" | "outline" | "surface";
+export type BadgeSize = "1" | "2" | "3";
+export type BadgeColor = "accent" | "neutral" | "error" | "success" | "warning" | "info" | "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 interface BadgeProps extends Omit<RadixBadgeProps, "color" | "variant" | "size" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Badge variant style
+     * @default 'soft'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Badge size
+     * @default '1'
+     */
+    size?: BadgeSize;
+    /**
+     * Badge color - supports custom brand colors and Radix UI colors
+     * @default 'accent'
+     */
+    color?: BadgeColor;
+    /**
+     * Enable high contrast mode
+     * @default false
+     */
+    highContrast?: boolean;
+    /**
+     * Color token for the badge background
+     * @default undefined (uses color prop)
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for the badge text
+     * @default undefined (uses variant defaults)
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Color token for the badge border (outline variant)
+     * @default undefined (uses variant defaults)
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Icon to display before the badge text
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Badge text content
+     */
+    children?: React.ReactNode;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;