@dynamic-mockups/design-system 0.1.0

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

@@ -0,0 +1,109 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./DropdownMenu";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        items: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onSelect: {
+            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 Default: Story;
+export declare const WithColors: Story;
+export declare const WithDisabled: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { DropdownMenu } from "./DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuItem, DropdownMenuSize, DropdownMenuVariant } from "./DropdownMenu";

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

@@ -0,0 +1,38 @@
+/**
+ * HoverCard Component
+ * A hover card component that extends Radix UI HoverCard
+ */
+import React from "react";
+import { HoverCard as RadixHoverCard } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./HoverCard.scss";
+export type { ColorToken } from "../../../tokens";
+type HoverCardRootProps = React.ComponentPropsWithoutRef<typeof RadixHoverCard.Root>;
+type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof RadixHoverCard.Content>;
+export interface HoverCardProps extends Omit<HoverCardRootProps, "children"> {
+    /**
+     * Trigger element that shows the hover card
+     */
+    trigger: React.ReactNode;
+    /**
+     * Content to display in the hover card
+     */
+    children: React.ReactNode;
+    /**
+     * Color token for hover card background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for hover card text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Content props for positioning and styling
+     */
+    contentProps?: Partial<HoverCardContentProps>;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const HoverCard: React.ForwardRefExoticComponent<HoverCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,86 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./HoverCard";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./HoverCard").HoverCardProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        children: {
+            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 Default: Story;
+export declare const UserProfile: Story;
+export declare const ProductInfo: Story;
+export declare const Tooltip: Story;
+export declare const LinkPreview: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * Label Component
+ * A label component that extends Radix UI Label
+ */
+import React from "react";
+import type { TextProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Label.scss";
+export type { ColorToken } from "../../../tokens";
+export type LabelSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+export type LabelWeight = "light" | "regular" | "medium" | "bold";
+export interface LabelProps extends Omit<TextProps, "size" | "weight" | "as" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    size?: LabelSize;
+    weight?: LabelWeight;
+    textColorToken?: ColorToken;
+    htmlFor?: string;
+    required?: boolean;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,100 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Label";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Label").LabelProps & React.RefAttributes<HTMLLabelElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        weight: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        htmlFor: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        required: {
+            control: "boolean";
+            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 Required: Story;
+export declare const Sizes: Story;
+export declare const Weights: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Label } from "./Label";
+export type { LabelProps, LabelSize, LabelWeight } from "./Label";

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

@@ -0,0 +1,44 @@
+/**
+ * Popover Component
+ * A popover component that extends Radix UI Popover
+ */
+import React from "react";
+import { Popover as RadixPopover } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Popover.scss";
+export type { ColorToken } from "../../../tokens";
+export type PopoverSize = "1" | "2" | "3" | "4";
+type PopoverRootProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Content>;
+export interface PopoverProps extends Omit<PopoverRootProps, "children"> {
+    /**
+     * Trigger element that opens the popover
+     */
+    trigger: React.ReactNode;
+    /**
+     * Content to display in the popover
+     */
+    children: React.ReactNode;
+    /**
+     * Popover size
+     * @default '1'
+     */
+    size?: PopoverSize;
+    /**
+     * Color token for popover background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for popover text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Content props for positioning
+     */
+    contentProps?: Partial<PopoverContentProps>;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,94 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Popover";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Popover").PopoverProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            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 WithForm: Story;
+export declare const ColorPicker: Story;
+export declare const ShareDialog: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Popover } from "./Popover";
+export type { PopoverProps, PopoverSize } from "./Popover";

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

@@ -0,0 +1,45 @@
+/**
+ * Progress Component
+ * A progress component that extends Radix UI Progress
+ */
+import React from "react";
+import type { ProgressProps as RadixProgressProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./Progress.scss";
+export type { ColorToken } from "../../../tokens";
+export type ProgressSize = "1" | "2" | "3";
+export type ProgressVariant = "classic" | "surface" | "soft";
+export interface ProgressProps extends Omit<RadixProgressProps, "size" | "variant" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Progress size
+     * @default '2'
+     */
+    size?: ProgressSize;
+    /**
+     * Progress variant
+     * @default 'classic'
+     */
+    variant?: ProgressVariant;
+    /**
+     * Progress value (0-100)
+     */
+    value?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Color token for progress bar background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for progress bar fill
+     */
+    fillColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,108 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Progress";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Progress").ProgressProps & 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;
+            };
+        };
+        value: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        max: {
+            control: "number";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        fillColorToken: {
+            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 DifferentValues: Story;
+export declare const Animated: Story;
+export declare const FileUpload: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1,2 @@
+export { Progress } from "./Progress";
+export type { ProgressProps, ProgressSize, ProgressVariant } from "./Progress";