@dynamic-mockups/design-system 0.1.0

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

@@ -0,0 +1,87 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./Tooltip";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Tooltip").TooltipProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        content: {
+            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 Default: Story;
+export declare const OnIcon: Story;
+export declare const LongText: Story;
+export declare const OnDisabledButton: Story;
+export declare const MultipleTooltips: Story;
+export declare const WithKeyboardShortcut: Story;
+export declare const InteractiveColorPicker: Story;

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * Atoms
+ * Basic building blocks of the design system
+ */
+export * from "./Accordion";
+export * from "./AlertDialog";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./DropdownMenu";
+export * from "./HoverCard";
+export * from "./Label";
+export * from "./Popover";
+export * from "./Progress";
+export * from "./ProgressBar";
+export * from "./RadioGroup";
+export * from "./ScrollArea";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Slider";
+export * from "./Stepper";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./Toast";
+export * from "./Toggle";
+export * from "./Tooltip";

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

@@ -0,0 +1,9 @@
+/**
+ * Components
+ * Central export for all components organized by Atomic Design
+ */
+export * from "./atoms";
+export * from "./molecules";
+export * from "./organisms";
+export * from "./templates";
+export * from "./pages";

package/dist/src/components/molecules/CheckboxChip/CheckboxChip.d.ts

@@ -0,0 +1,65 @@
+/**
+ * CheckboxChip Component
+ * A checkbox chip/tag component with optional icon and checked state
+ */
+import React from "react";
+import { type ColorToken } from "../../../tokens";
+import "./CheckboxChip.scss";
+export type { ColorToken } from "../../../tokens";
+export interface CheckboxChipProps {
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Whether the chip is checked
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Solar icon name (optional)
+     */
+    icon?: string;
+    /**
+     * Whether the chip is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Change handler
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Color token for checked border
+     */
+    checkedBorderColorToken?: ColorToken;
+    /**
+     * Color token for checked background
+     */
+    checkedBackgroundColorToken?: ColorToken;
+    /**
+     * Color token for checked text
+     */
+    checkedTextColorToken?: ColorToken;
+    /**
+     * Color token for checked icon
+     */
+    checkedIconColorToken?: ColorToken;
+    /**
+     * Color token for default border
+     */
+    defaultBorderColorToken?: ColorToken;
+    /**
+     * Color token for default text
+     */
+    defaultTextColorToken?: ColorToken;
+    /**
+     * Color token for default icon
+     */
+    defaultIconColorToken?: ColorToken;
+}
+export declare const CheckboxChip: React.ForwardRefExoticComponent<CheckboxChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/molecules/CheckboxChip/CheckboxChip.stories.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const chipMeta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./CheckboxChip").CheckboxChipProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        icon: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        checked: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default chipMeta;
+type ChipStory = StoryObj<typeof chipMeta>;
+export declare const UncheckedNoIcon: ChipStory;
+export declare const UncheckedWithIcon: ChipStory;
+export declare const CheckedNoIcon: ChipStory;
+export declare const CheckedWithIcon: ChipStory;
+export declare const Disabled: ChipStory;
+export declare const InteractiveSingleChip: ChipStory;
+declare const groupMeta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./CheckboxChipGroup").CheckboxChipGroupProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        options: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        value: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        maxRows: {
+            control: "number";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export { groupMeta };
+type GroupStory = StoryObj<typeof groupMeta>;
+export declare const TwoRowsNoScroll: GroupStory;
+export declare const FourRowsFigmaDesign: GroupStory;
+export declare const FiveRowsWithScroll: GroupStory;
+export declare const OneRowNoScroll: GroupStory;
+export declare const ThreeRowsNoScroll: GroupStory;
+export declare const WithoutIcons: GroupStory;
+export declare const MixedIcons: GroupStory;
+export declare const InteractiveGroup: GroupStory;
+export declare const CustomColors: GroupStory;

package/dist/src/components/molecules/CheckboxChip/CheckboxChipGroup.d.ts

@@ -0,0 +1,63 @@
+/**
+ * CheckboxChipGroup Component
+ * A group of checkbox chips with automatic scroll handling
+ */
+import React from "react";
+import type { ColorToken } from "./CheckboxChip";
+import "./CheckboxChip.scss";
+export type { ColorToken } from "../../../tokens";
+export interface CheckboxChipOption {
+    /**
+     * Unique identifier
+     */
+    value: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional icon
+     */
+    icon?: string;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+}
+export interface CheckboxChipGroupProps {
+    /**
+     * Array of chip options
+     */
+    options: CheckboxChipOption[];
+    /**
+     * Array of selected values
+     */
+    value?: string[];
+    /**
+     * Change handler
+     */
+    onChange?: (value: string[]) => void;
+    /**
+     * Maximum number of rows before scrolling
+     * @default 4
+     */
+    maxRows?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Color tokens for checked state
+     */
+    checkedBorderColorToken?: ColorToken;
+    checkedBackgroundColorToken?: ColorToken;
+    checkedTextColorToken?: ColorToken;
+    checkedIconColorToken?: ColorToken;
+    /**
+     * Color tokens for default state
+     */
+    defaultBorderColorToken?: ColorToken;
+    defaultTextColorToken?: ColorToken;
+    defaultIconColorToken?: ColorToken;
+}
+export declare const CheckboxChipGroup: React.ForwardRefExoticComponent<CheckboxChipGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/molecules/RadioSelector/RadioSelector.d.ts

@@ -0,0 +1,72 @@
+/**
+ * RadioSelector Component
+ * A radio selector component with icon, title, and optional subtext
+ */
+import React from "react";
+import { type ColorToken } from "../../../tokens";
+import "./RadioSelector.scss";
+export type { ColorToken } from "../../../tokens";
+export interface RadioSelectorProps {
+    /**
+     * Current state of the radio selector
+     * @default 'default'
+     */
+    state?: "default" | "active";
+    /**
+     * Whether to show the icon
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Whether to show the body text (subtext)
+     * @default true
+     */
+    showSubtext?: boolean;
+    /**
+     * Solar icon name for the left icon
+     * @default 'folder-bold'
+     */
+    icon?: string;
+    /**
+     * Title text
+     */
+    title: string;
+    /**
+     * Subtext description
+     */
+    subtext?: string;
+    /**
+     * Whether the selector is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Color token for active border
+     */
+    activeBorderColorToken?: ColorToken;
+    /**
+     * Color token for active background
+     */
+    activeBackgroundColorToken?: ColorToken;
+    /**
+     * Color token for active text
+     */
+    activeTextColorToken?: ColorToken;
+    /**
+     * Color token for default border
+     */
+    defaultBorderColorToken?: ColorToken;
+    /**
+     * Color token for default text
+     */
+    defaultTextColorToken?: ColorToken;
+}
+export declare const RadioSelector: React.ForwardRefExoticComponent<RadioSelectorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/molecules/RadioSelector/RadioSelector.stories.d.ts

@@ -0,0 +1,118 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./RadioSelector";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./RadioSelector").RadioSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        subtext: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        icon: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        state: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        showIcon: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        showSubtext: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        activeBorderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        activeBackgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        activeTextColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultBorderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultTextColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultWithIconAndSubtext: Story;
+export declare const DefaultWithIconNoSubtext: Story;
+export declare const DefaultNoIconWithSubtext: Story;
+export declare const DefaultNoIconNoSubtext: Story;
+export declare const ActiveWithIconAndSubtext: Story;
+export declare const ActiveWithIconNoSubtext: Story;
+export declare const ActiveNoIconWithSubtext: Story;
+export declare const ActiveNoIconNoSubtext: Story;
+export declare const Disabled: Story;
+export declare const DifferentIcons: Story;
+export declare const AllStates: Story;
+export declare const Interactive: Story;
+export declare const TokenCustomization: Story;

package/dist/src/components/molecules/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Molecules
+ * Combinations of atoms that form more complex UI elements
+ */
+export { RadioSelector } from "./RadioSelector/RadioSelector";
+export type { RadioSelectorProps } from "./RadioSelector/RadioSelector";
+export { CheckboxChip } from "./CheckboxChip/CheckboxChip";
+export type { CheckboxChipProps } from "./CheckboxChip/CheckboxChip";
+export { CheckboxChipGroup } from "./CheckboxChip/CheckboxChipGroup";
+export type { CheckboxChipGroupProps, CheckboxChipOption, } from "./CheckboxChip/CheckboxChipGroup";

package/dist/src/components/organisms/CTABox/CTABox.d.ts

@@ -0,0 +1,69 @@
+/**
+ * CTABox Component
+ * A call-to-action box with label, heading, description, and action button
+ */
+import React from "react";
+import { type ColorToken } from "../../../tokens";
+import "./CTABox.scss";
+export type { ColorToken } from "../../../tokens";
+export interface CTABoxProps {
+    /**
+     * Small uppercase label text
+     */
+    label: string;
+    /**
+     * Main heading text
+     */
+    heading: string;
+    /**
+     * Description text
+     */
+    description: string;
+    /**
+     * Button text
+     * @default 'Get Started'
+     */
+    buttonText?: string;
+    /**
+     * Button click handler
+     */
+    onButtonClick?: () => void;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    buttonDisabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Color token for the background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for the border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for the label text
+     */
+    labelColorToken?: ColorToken;
+    /**
+     * Color token for the heading text
+     */
+    headingColorToken?: ColorToken;
+    /**
+     * Color token for the description text
+     */
+    descriptionColorToken?: ColorToken;
+    /**
+     * Color token for the button background
+     */
+    buttonBackgroundColorToken?: ColorToken;
+    /**
+     * Color token for the button text
+     */
+    buttonTextColorToken?: ColorToken;
+}
+export declare const CTABox: React.ForwardRefExoticComponent<CTABoxProps & React.RefAttributes<HTMLDivElement>>;