@dynamic-mockups/design-system 0.2.9 → 0.2.11

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

@@ -0,0 +1,62 @@
+/**
+ * TextArea Component
+ * A textarea component that extends Radix UI TextArea
+ */
+import React from "react";
+import type { TextAreaProps as RadixTextAreaProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../tokens";
+import "./TextArea.scss";
+export type { ColorToken } from "../../../tokens";
+export type TextAreaSize = "1" | "2" | "3";
+export type TextAreaColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning";
+export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+export interface TextAreaProps extends Omit<RadixTextAreaProps, "size" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * TextArea size
+     * @default '2'
+     */
+    size?: TextAreaSize;
+    /**
+     * TextArea color
+     * @default 'primary'
+     */
+    color?: TextAreaColor;
+    /**
+     * Label text for the textarea
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the textarea
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, textarea shows error state
+     */
+    error?: string;
+    /**
+     * Resize behavior
+     * @default 'vertical'
+     */
+    resize?: TextAreaResize;
+    /**
+     * Color token for the textarea background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for the textarea border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Color token for the textarea text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Color token for the placeholder text
+     */
+    placeholderColorToken?: ColorToken;
+    /**
+     * Color token for the focus border
+     */
+    focusBorderColorToken?: ColorToken;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,178 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+import type { ColorToken } from "./TextArea";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./TextArea").TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        placeholder: {
+            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;
+            };
+        };
+        resize: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        rows: {
+            control: "number";
+            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;
+            };
+        };
+        placeholderColorToken: {
+            control: "select";
+            options: ColorToken[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        focusBorderColorToken: {
+            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 WithValue: Story;
+export declare const Disabled: Story;
+export declare const DisabledWithValue: Story;
+export declare const Sizes: Story;
+export declare const ResizeOptions: Story;
+export declare const Colors: Story;
+export declare const Variants: Story;
+export declare const CustomRows: Story;
+export declare const LongFormExample: Story;
+export declare const InteractiveColorPicker: Story;

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

@@ -0,0 +1 @@
+export * from "./TextArea";

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

@@ -0,0 +1,97 @@
+/**
+ * Modal Component
+ * A modal dialog component with Header, Content, and Footer sections built on top of the Dialog atom
+ */
+import React from "react";
+import type { DialogProps as RadixDialogProps } from "@radix-ui/react-dialog";
+import { type ColorToken } from "../../../tokens";
+import "./Modal.scss";
+export type { ColorToken } from "../../../tokens";
+export interface ModalProps extends Omit<RadixDialogProps, "children"> {
+    /**
+     * Modal trigger element
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Modal content (typically Modal.Header, Modal.Content, Modal.Footer)
+     */
+    children?: React.ReactNode;
+    /**
+     * Show close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Color token for overlay background
+     */
+    overlayColorToken?: ColorToken;
+    /**
+     * Color token for modal background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Custom className for content
+     */
+    className?: string;
+    /**
+     * Modal width
+     * @default '405px'
+     */
+    width?: string;
+}
+export interface ModalHeaderProps {
+    /**
+     * Header title
+     */
+    title: string;
+    /**
+     * Header description/subtitle
+     */
+    description?: string;
+    /**
+     * Color token for title text
+     */
+    titleColorToken?: ColorToken;
+    /**
+     * Color token for description text
+     */
+    descriptionColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Children elements
+     */
+    children?: React.ReactNode;
+}
+export interface ModalContentProps {
+    /**
+     * Content children
+     */
+    children: React.ReactNode;
+    /**
+     * Maximum height for scrollable content
+     * @default '480px'
+     */
+    maxHeight?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export interface ModalFooterProps {
+    /**
+     * Footer children (typically action buttons)
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,64 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Modal").ModalProps & React.RefAttributes<HTMLDivElement>> & {
+        Header: React.ForwardRefExoticComponent<import("./Modal").ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+        Content: React.ForwardRefExoticComponent<import("./Modal").ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+        Footer: React.ForwardRefExoticComponent<import("./Modal").ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        showClose: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        overlayColorToken: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        width: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicModal: Story;
+export declare const TwoActionButtons: Story;
+export declare const ThreeActionButtons: Story;
+export declare const FlagMockupModal: Story;
+export declare const ScrollableContent: Story;
+export declare const NoCloseButton: Story;
+export declare const CustomWidth: Story;
+export declare const NoDescription: Story;
+export declare const FormModal: Story;
+export declare const InfoModal: Story;
+export declare const MinimalContent: Story;

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

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ColorToken, } from "./Modal";

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

@@ -8,3 +8,5 @@ export { CheckboxChip } from "./CheckboxChip/CheckboxChip";
 export type { CheckboxChipProps } from "./CheckboxChip/CheckboxChip";
 export { CheckboxChipGroup } from "./CheckboxChip/CheckboxChipGroup";
 export type { CheckboxChipGroupProps, CheckboxChipOption, } from "./CheckboxChip/CheckboxChipGroup";
+export { Modal } from "./Modal/Modal";
+export type { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, } from "./Modal/Modal";

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

@@ -0,0 +1,27 @@
+/**
+ * FlagBadMockups Organism
+ * A multi-step modal flow for flagging bad mockups
+ * Flow: Flag Modal → Form Modal (if "Something else") → Info Modal
+ */
+import React from "react";
+import "./FlagBadMockups.scss";
+export type { ColorToken } from "../../../tokens";
+export interface FlagBadMockupsProps {
+    /**
+     * Trigger button element (optional, defaults to "Flag this mockup" button)
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Callback when the flow is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when feedback is submitted with selected reason and optional feedback text
+     */
+    onSubmit?: (reason: string, feedback?: string) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const FlagBadMockups: React.ForwardRefExoticComponent<FlagBadMockupsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./FlagBadMockups").FlagBadMockupsProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        trigger: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onClose: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onSubmit: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        className: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomTrigger: Story;
+export declare const InteractiveDemo: Story;
+export declare const FlowExample: Story;

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

@@ -0,0 +1,2 @@
+export { FlagBadMockups } from "./FlagBadMockups";
+export type { FlagBadMockupsProps, ColorToken } from "./FlagBadMockups";

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

@@ -6,3 +6,5 @@ export { OnboardingInfoBox } from "./OnboardingInfoBox/OnboardingInfoBox";
 export type { OnboardingInfoBoxProps, OnboardingInfoItem, } from "./OnboardingInfoBox/OnboardingInfoBox";
 export { CTABox } from "./CTABox/CTABox";
 export type { CTABoxProps } from "./CTABox/CTABox";
+export { FlagBadMockups } from "./FlagBadMockups/FlagBadMockups";
+export type { FlagBadMockupsProps } from "./FlagBadMockups/FlagBadMockups";

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

@@ -24,8 +24,8 @@ import type { OnboardingFlowConfig } from "./OnboardingFlow.types";
  *
  * BUILDING PRODUCT/WORKFLOW PATH (building-product):
  *   1. Journey stage → 2. Business type → Branch:
- *      - If "Startup": 3. Role & Team size (combined) → 4. Startup Builder result (4 steps)
- *      - If "Established Company": 3. Role & Team size (combined) → 4. Enterprise Partner result (4 steps)
+ *      - If "Startup": 3. Role & Team size (combined) → 4. Website → 5. Startup Builder result (5 steps)
+ *      - If "Established Company": 3. Role & Team size (combined) → 4. Website → 5. Enterprise Partner result (5 steps)
  *      - If "Agency/Automation/Solopreneur": 3. Integration type → Branch:
  *          * "Simple": Embed Builder result (4 steps)
  *          * "Automations": Workflow Automator result (4 steps)

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

@@ -8,7 +8,7 @@ import type { OnboardingInfoItem } from "../../organisms/OnboardingInfoBox/Onboa
 /**
  * Type of onboarding step variation
  */
-export type OnboardingStepType = "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "launcher" | "artwork" | "split-screen";
+export type OnboardingStepType = "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "text-input" | "launcher" | "artwork" | "split-screen";
 /**
  * Base step configuration shared across all step types
  */
@@ -117,6 +117,20 @@ export interface OnboardingDoubleRadioStep extends OnboardingStepBase {
      */
     secondDataKey: string;
 }
+/**
+ * Text input step configuration
+ */
+export interface OnboardingTextInputStep extends OnboardingStepBase {
+    type: "text-input";
+    /**
+     * Placeholder text for the input field
+     */
+    placeholder?: string;
+    /**
+     * Key in the data object where the text value is stored
+     */
+    dataKey: string;
+}
 /**
  * Launcher step configuration (informational with CTA)
  */
@@ -152,7 +166,7 @@ export interface OnboardingArtworkStep extends OnboardingStepBase {
 /**
  * Union type of all possible step configurations
  */
-export type OnboardingStep = OnboardingRadioStep | OnboardingCheckboxStep | OnboardingButtonsPlusRadioStep | OnboardingKnowYourCustomerStep | OnboardingDoubleRadioStep | OnboardingLauncherStep | OnboardingArtworkStep;
+export type OnboardingStep = OnboardingRadioStep | OnboardingCheckboxStep | OnboardingButtonsPlusRadioStep | OnboardingKnowYourCustomerStep | OnboardingDoubleRadioStep | OnboardingTextInputStep | OnboardingLauncherStep | OnboardingArtworkStep;
 /**
  * Complete onboarding flow configuration
  */

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

@@ -16,7 +16,7 @@ export interface OnboardingTemplateProps {
     /**
      * Template variation type
      */
-    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "launcher" | "artwork" | "split-screen";
+    variation: "radio" | "checkbox-no-icon" | "checkbox-with-icon" | "buttons-plus-radio" | "know-your-customer" | "double-radio" | "text-input" | "launcher" | "artwork" | "split-screen";
     /**
      * Current step (1-based)
      */
@@ -129,6 +129,18 @@ export interface OnboardingTemplateProps {
      * Second radio option change handler
      */
     onSecondRadioChange?: (value: string) => void;
+    /**
+     * Text input value
+     */
+    textInputValue?: string;
+    /**
+     * Text input change handler
+     */
+    onTextInputChange?: (value: string) => void;
+    /**
+     * Text input placeholder
+     */
+    textInputPlaceholder?: string;
     /**
      * Icon name for launcher variation (Solar icon)
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-mockups/design-system",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
   "main": "dist/index.js",
   "module": "dist/index.mjs",