@dynamic-mockups/design-system 0.1.0

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

@@ -0,0 +1,117 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./CTABox";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./CTABox").CTABoxProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        heading: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        description: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        buttonText: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        buttonDisabled: {
+            control: "boolean";
+            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;
+            };
+        };
+        labelColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        headingColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        descriptionColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        buttonBackgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        buttonTextColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const DisabledButton: Story;
+export declare const DifferentContent: Story;
+export declare const ShortContent: Story;
+export declare const LongContent: Story;
+export declare const GreenTheme: Story;
+export declare const PurpleTheme: Story;
+export declare const OrangeTheme: Story;
+export declare const InteractiveColorPicker: Story;
+export declare const VariousWidths: Story;

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

@@ -0,0 +1,65 @@
+/**
+ * OnboardingInfoBox Component
+ * An organism that displays onboarding information with a title and list of features
+ */
+import React from "react";
+import { type ColorToken } from "../../../tokens";
+import "./OnboardingInfoBox.scss";
+export type { ColorToken } from "../../../tokens";
+export interface OnboardingInfoItem {
+    /**
+     * Solar icon name
+     */
+    icon: string;
+    /**
+     * Item title
+     */
+    title: string;
+    /**
+     * Item description
+     */
+    description: string;
+}
+export interface OnboardingInfoBoxProps {
+    /**
+     * Main heading/title
+     */
+    title: string;
+    /**
+     * Array of info items to display
+     */
+    items: OnboardingInfoItem[];
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Color token for the background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for the border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for the title text
+     */
+    titleColorToken?: ColorToken;
+    /**
+     * Color token for item backgrounds
+     */
+    itemBackgroundColorToken?: ColorToken;
+    /**
+     * Color token for item title text
+     */
+    itemTitleColorToken?: ColorToken;
+    /**
+     * Color token for item description text
+     */
+    itemDescriptionColorToken?: ColorToken;
+    /**
+     * Color token for icons
+     */
+    iconColorToken?: ColorToken;
+}
+export declare const OnboardingInfoBox: React.ForwardRefExoticComponent<OnboardingInfoBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/organisms/OnboardingInfoBox/OnboardingInfoBox.stories.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./OnboardingInfoBox";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./OnboardingInfoBox").OnboardingInfoBoxProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        items: {
+            control: "object";
+            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;
+            };
+        };
+        titleColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        itemBackgroundColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        itemTitleColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        itemDescriptionColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        iconColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const GettingStarted: Story;
+export declare const FeatureHighlights: Story;
+export declare const TwoItems: Story;
+export declare const SingleItem: Story;
+export declare const CustomColors: Story;
+export declare const InteractiveColorPicker: Story;
+export declare const LongContent: Story;

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

@@ -0,0 +1,8 @@
+/**
+ * Organisms
+ * Complex UI components composed of molecules and atoms
+ */
+export { OnboardingInfoBox } from "./OnboardingInfoBox/OnboardingInfoBox";
+export type { OnboardingInfoBoxProps, OnboardingInfoItem, } from "./OnboardingInfoBox/OnboardingInfoBox";
+export { CTABox } from "./CTABox/CTABox";
+export type { CTABoxProps } from "./CTABox/CTABox";

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

@@ -0,0 +1,5 @@
+/**
+ * Pages
+ * Complete page implementations using templates
+ */
+export {};

package/dist/src/components/templates/OnboardingTemplate/OnboardingTemplate.d.ts

@@ -0,0 +1,185 @@
+/**
+ * OnboardingTemplate
+ * Full onboarding page template with multiple variations
+ */
+import React from "react";
+import type { CheckboxChipOption } from "../../molecules/CheckboxChip/CheckboxChipGroup";
+import type { OnboardingInfoItem } from "../../organisms/OnboardingInfoBox/OnboardingInfoBox";
+import "./OnboardingTemplate.scss";
+export interface OnboardingRadioOption {
+    value: string;
+    icon: string;
+    title: string;
+    description: string;
+}
+export interface OnboardingTemplateProps {
+    /**
+     * Template variation type
+     */
+    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "launcher" | "artwork";
+    /**
+     * Current step (1-based)
+     */
+    currentStep?: number;
+    /**
+     * Total number of steps
+     */
+    totalSteps?: number;
+    /**
+     * Logo image source
+     */
+    logoSrc?: string;
+    /**
+     * Welcome heading text
+     */
+    welcomeHeading?: string;
+    /**
+     * Welcome subtext
+     */
+    welcomeSubtext?: string;
+    /**
+     * Main headline question
+     */
+    headline?: string;
+    /**
+     * List of radio options
+     */
+    radioOptions?: OnboardingRadioOption[];
+    /**
+     * Selected radio option value
+     */
+    selectedRadioOption?: string;
+    /**
+     * Radio option change handler
+     */
+    onRadioOptionChange?: (value: string) => void;
+    /**
+     * List of checkbox chip options
+     */
+    checkboxOptions?: CheckboxChipOption[];
+    /**
+     * Selected checkbox chip values
+     */
+    selectedCheckboxOptions?: string[];
+    /**
+     * Checkbox chip change handler
+     */
+    onCheckboxOptionsChange?: (values: string[]) => void;
+    /**
+     * Yes/No question text
+     */
+    yesNoQuestion?: string;
+    /**
+     * Yes/No answer
+     */
+    yesNoAnswer?: "yes" | "no" | null;
+    /**
+     * Yes/No answer change handler
+     */
+    onYesNoChange?: (answer: "yes" | "no") => void;
+    /**
+     * Second question text (shown when Yes is selected)
+     */
+    secondQuestion?: string;
+    /**
+     * First section question text
+     */
+    firstSectionQuestion?: string;
+    /**
+     * First section checkbox options
+     */
+    firstSectionOptions?: CheckboxChipOption[];
+    /**
+     * Selected first section option value (single selection)
+     */
+    selectedFirstOption?: string;
+    /**
+     * First section option change handler
+     */
+    onFirstOptionChange?: (value: string) => void;
+    /**
+     * Second section question text
+     */
+    secondSectionQuestion?: string;
+    /**
+     * Second section checkbox options
+     */
+    secondSectionOptions?: CheckboxChipOption[];
+    /**
+     * Selected second section option value (single selection)
+     */
+    selectedSecondOption?: string;
+    /**
+     * Second section option change handler
+     */
+    onSecondOptionChange?: (value: string) => void;
+    /**
+     * Icon name for launcher variation (Solar icon)
+     */
+    launcherIcon?: string;
+    /**
+     * Headline text for launcher variation
+     */
+    launcherHeadline?: string;
+    /**
+     * Main text below headline for launcher variation
+     */
+    launcherText?: string;
+    /**
+     * Subtext/description for launcher variation
+     */
+    launcherSubtext?: string;
+    /**
+     * Title for the info box
+     */
+    infoBoxTitle?: string;
+    /**
+     * Items to display in the info box
+     */
+    infoBoxItems?: OnboardingInfoItem[];
+    /**
+     * Label for the CTA box
+     */
+    ctaLabel?: string;
+    /**
+     * Heading for the CTA box
+     */
+    ctaHeading?: string;
+    /**
+     * Description for the CTA box
+     */
+    ctaDescription?: string;
+    /**
+     * Button text for the CTA box
+     */
+    ctaButtonText?: string;
+    /**
+     * CTA button click handler
+     */
+    onCTAClick?: () => void;
+    /**
+     * Background image for artwork variation
+     */
+    artworkBackgroundImage?: string;
+    /**
+     * Main artwork image for artwork variation
+     */
+    artworkImage?: string;
+    /**
+     * Continue button click handler
+     */
+    onContinue?: () => void;
+    /**
+     * Back button click handler
+     */
+    onBack?: () => void;
+    /**
+     * Continue button disabled state
+     */
+    continueDisabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const OnboardingTemplate: React.ForwardRefExoticComponent<OnboardingTemplateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/templates/OnboardingTemplate/OnboardingTemplate.stories.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./OnboardingTemplate").OnboardingTemplateProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Variation1_Radio: Story;
+export declare const Variation2_CheckboxNoIcon: Story;
+export declare const Variation1_NoSelection: Story;
+export declare const Variation2_NoSelection: Story;
+export declare const Variation3_CheckboxWithIcon: Story;
+export declare const Variation3_NoSelection: Story;
+export declare const Variation4_ButtonsPlusRadio: Story;
+export declare const Variation4_NoState: Story;
+export declare const Variation4_NoAnswer: Story;
+export declare const Variation5_KnowYourCustomer: Story;
+export declare const Variation5_NoSelection: Story;
+export declare const Variation5_PartialSelection: Story;
+export declare const Variation6_Launcher: Story;
+export declare const Variation7_Artwork: Story;

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

@@ -0,0 +1,6 @@
+/**
+ * Templates
+ * Page-level layouts that arrange organisms
+ */
+export { OnboardingTemplate } from "./OnboardingTemplate/OnboardingTemplate";
+export type { OnboardingTemplateProps, OnboardingRadioOption, } from "./OnboardingTemplate/OnboardingTemplate";

package/dist/src/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Design System
+ * Main entry point for the design system package
+ */
+export * from "./tokens";
+export * from "./theme";
+export * from "./components";
+export { Theme as RadixTheme } from "@radix-ui/themes";
+export declare const stylesheets: {
+    readonly radixTheme: "@radix-ui/themes/styles.css";
+    readonly atoms: {
+        readonly button: "./components/atoms/Button/Button.scss";
+        readonly input: "./components/atoms/Input/Input.scss";
+        readonly switch: "./components/atoms/Switch/Switch.scss";
+        readonly checkbox: "./components/atoms/Checkbox/Checkbox.scss";
+    };
+    readonly molecules: {
+        readonly select: "./components/molecules/Select/Select.scss";
+        readonly menuItem: "./components/molecules/MenuItem/MenuItem.scss";
+    };
+};

package/dist/src/tests/storybook/ColorTokenSelect.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Tests for ColorTokenSelect component
+ */
+export {};

package/dist/src/theme/ThemeProvider.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Theme Provider Component
+ * Wraps the application and provides theme context
+ */
+import React from "react";
+import { Theme } from "./theme";
+interface ThemeContextValue {
+    theme: Theme;
+}
+export declare const useTheme: () => ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+    /**
+     * Radix UI Theme appearance
+     */
+    appearance?: "light" | "dark" | "inherit";
+    /**
+     * Radix UI Theme accent color
+     */
+    accentColor?: "blue" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow";
+    /**
+     * Radix UI Theme gray scale
+     */
+    grayColor?: "gray" | "mauve" | "slate" | "sage" | "olive" | "sand";
+    /**
+     * Radix UI Theme radius
+     */
+    radius?: "none" | "small" | "medium" | "large" | "full";
+    /**
+     * Radix UI Theme scaling
+     */
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%";
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./ThemeProvider";

package/dist/src/theme/theme.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Theme Configuration
+ * Defines the theme structure and allows customization
+ */
+import { tokens } from "../tokens";
+export interface ThemeConfig {
+    colors: typeof tokens.colors;
+    spacing: typeof tokens.spacing;
+    radii: typeof tokens.radii;
+    typography: typeof tokens.typography;
+    shadows: typeof tokens.shadows;
+}
+export declare const defaultTheme: ThemeConfig;
+/**
+ * Create a custom theme by merging with the default theme
+ */
+export declare function createTheme(customTheme?: Partial<ThemeConfig>): ThemeConfig;
+export type Theme = ThemeConfig;

package/dist/src/tokens/colorTokens.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Color Token Types and Utilities
+ *
+ * Centralized color token type definitions and utilities for the design system.
+ * All color tokens are based on Radix UI CSS variables with support for:
+ * - Light/Dark mode (automatic via Radix UI CSS variables)
+ * - Alpha transparency variants (a1-a12)
+ * - Full color scales (1-12) for each color family
+ */
+/**
+ * All available color tokens in the design system
+ *
+ * Color Scale System:
+ * - 1-12: Solid colors from lightest to darkest
+ * - a1-a12: Alpha/transparent variants from most transparent to most opaque
+ *
+ * Light/Dark Mode:
+ * - Radix UI CSS variables automatically adapt to light/dark mode
+ * - No separate light/dark tokens needed - handled by CSS variable values
+ */
+export type ColorToken = "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-a1" | "gray-a2" | "gray-a3" | "gray-a4" | "gray-a5" | "gray-a6" | "gray-a7" | "gray-a8" | "gray-a9" | "gray-a10" | "gray-a11" | "gray-a12" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-a1" | "blue-a2" | "blue-a3" | "blue-a4" | "blue-a5" | "blue-a6" | "blue-a7" | "blue-a8" | "blue-a9" | "blue-a10" | "blue-a11" | "blue-a12" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-a1" | "green-a2" | "green-a3" | "green-a4" | "green-a5" | "green-a6" | "green-a7" | "green-a8" | "green-a9" | "green-a10" | "green-a11" | "green-a12" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-a1" | "red-a2" | "red-a3" | "red-a4" | "red-a5" | "red-a6" | "red-a7" | "red-a8" | "red-a9" | "red-a10" | "red-a11" | "red-a12" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-a1" | "orange-a2" | "orange-a3" | "orange-a4" | "orange-a5" | "orange-a6" | "orange-a7" | "orange-a8" | "orange-a9" | "orange-a10" | "orange-a11" | "orange-a12" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-a1" | "purple-a2" | "purple-a3" | "purple-a4" | "purple-a5" | "purple-a6" | "purple-a7" | "purple-a8" | "purple-a9" | "purple-a10" | "purple-a11" | "purple-a12" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-a1" | "cyan-a2" | "cyan-a3" | "cyan-a4" | "cyan-a5" | "cyan-a6" | "cyan-a7" | "cyan-a8" | "cyan-a9" | "cyan-a10" | "cyan-a11" | "cyan-a12" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-a1" | "pink-a2" | "pink-a3" | "pink-a4" | "pink-a5" | "pink-a6" | "pink-a7" | "pink-a8" | "pink-a9" | "pink-a10" | "pink-a11" | "pink-a12" | "amber-1" | "amber-2" | "amber-3" | "amber-4" | "amber-5" | "amber-6" | "amber-7" | "amber-8" | "amber-9" | "amber-10" | "amber-11" | "amber-12" | "amber-a1" | "amber-a2" | "amber-a3" | "amber-a4" | "amber-a5" | "amber-a6" | "amber-a7" | "amber-a8" | "amber-a9" | "amber-a10" | "amber-a11" | "amber-a12" | "accent-1" | "accent-2" | "accent-3" | "accent-4" | "accent-5" | "accent-6" | "accent-7" | "accent-8" | "accent-9" | "accent-10" | "accent-11" | "accent-12" | "accent-a1" | "accent-a2" | "accent-a3" | "accent-a4" | "accent-a5" | "accent-a6" | "accent-a7" | "accent-a8" | "accent-a9" | "accent-a10" | "accent-a11" | "accent-a12";
+/**
+ * Convert a color token to a CSS variable reference
+ *
+ * @param token - The color token to convert
+ * @returns CSS variable reference string (e.g., 'var(--blue-9)')
+ *
+ * @example
+ * ```ts
+ * const bgColor = getColorTokenVar('blue-9'); // 'var(--blue-9)'
+ * style={{ backgroundColor: bgColor }}
+ * ```
+ */
+export declare const getColorTokenVar: (token: ColorToken) => string;
+/**
+ * Type guard to check if a string is a valid color token
+ *
+ * @param value - The value to check
+ * @returns True if the value is a valid ColorToken
+ *
+ * @example
+ * ```ts
+ * if (isColorToken('blue-9')) {
+ *   // TypeScript knows this is a ColorToken
+ * }
+ * ```
+ */
+export declare const isColorToken: (value: string) => value is ColorToken;
+/**
+ * Color families available in the design system
+ */
+export declare const COLOR_FAMILIES: readonly ["gray", "blue", "green", "red", "orange", "purple", "cyan", "pink", "amber", "accent"];
+export type ColorFamily = (typeof COLOR_FAMILIES)[number];
+/**
+ * Color scale levels (1-12)
+ */
+export declare const COLOR_SCALES: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export type ColorScaleLevel = (typeof COLOR_SCALES)[number];

package/dist/src/tokens/colorTokens.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Tests for Color Token utilities
+ */
+export {};