@dynamic-mockups/design-system 0.2.14 → 0.2.17

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

@@ -1,62 +0,0 @@
-/**
- * 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

@@ -1,178 +0,0 @@
-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/Toast/Toast.d.ts

@@ -1,59 +0,0 @@
-/**
- * Toast Component
- * A toast notification component using Radix UI Themes Callout for toast-like notifications
- */
-import React from "react";
-import { Callout } from "@radix-ui/themes";
-import { type ColorToken } from "../../../tokens";
-import "./Toast.scss";
-export type { ColorToken } from "../../../tokens";
-export type ToastSize = "1" | "2" | "3";
-export type ToastVariant = "soft" | "surface" | "outline";
-export type ToastColor = "blue" | "green" | "red" | "yellow" | "gray";
-type CalloutRootProps = React.ComponentPropsWithoutRef<typeof Callout.Root>;
-export interface ToastProps extends Omit<CalloutRootProps, "size" | "variant" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
-    /**
-     * Toast size
-     * @default '2'
-     */
-    size?: ToastSize;
-    /**
-     * Toast variant
-     * @default 'soft'
-     */
-    variant?: ToastVariant;
-    /**
-     * Toast color
-     * @default 'blue'
-     */
-    color?: ToastColor;
-    /**
-     * Toast title
-     */
-    title?: string;
-    /**
-     * Toast message
-     */
-    message?: string;
-    /**
-     * Icon element
-     */
-    icon?: React.ReactNode;
-    /**
-     * Color token for toast background
-     */
-    backgroundColorToken?: ColorToken;
-    /**
-     * Color token for toast text
-     */
-    textColorToken?: ColorToken;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Content
-     */
-    children?: React.ReactNode;
-}
-export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,118 +0,0 @@
-import React from "react";
-import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./Toast";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./Toast").ToastProps & 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;
-            };
-        };
-        color: {
-            control: "select";
-            options: string[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        title: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        message: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        icon: {
-            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 Success: Story;
-export declare const Error: Story;
-export declare const Warning: Story;
-export declare const Info: Story;
-export declare const Sizes: Story;
-export declare const Variants: Story;
-export declare const InteractiveColorPicker: Story;

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

@@ -1,2 +0,0 @@
-export { Toast } from "./Toast";
-export type { ToastProps, ToastSize, ToastVariant, ToastColor } from "./Toast";

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

@@ -1,20 +0,0 @@
-/**
- * Toggle Component
- * A toggle button component that extends Radix UI Switch as a toggle
- */
-import React from "react";
-import type { SwitchProps as RadixSwitchProps } from "@radix-ui/themes";
-import { type ColorToken } from "../../../tokens";
-import "./Toggle.scss";
-export type { ColorToken } from "../../../tokens";
-export type ToggleSize = "1" | "2" | "3";
-export type ToggleColor = "primary" | "secondary" | "accent" | "success" | "error" | "warning";
-export interface ToggleProps extends Omit<RadixSwitchProps, "size" | "color" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
-    size?: ToggleSize;
-    color?: ToggleColor;
-    label?: string;
-    backgroundColorToken?: ColorToken;
-    activeColorToken?: ColorToken;
-    textColorToken?: ColorToken;
-}
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,118 +0,0 @@
-import React from "react";
-import type { StoryObj } from "@storybook/react-vite";
-import type { ColorToken } from "./Toggle";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./Toggle").ToggleProps & React.RefAttributes<HTMLButtonElement>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        label: {
-            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;
-            };
-        };
-        disabled: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        defaultChecked: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        backgroundColorToken: {
-            control: "select";
-            options: ColorToken[];
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        activeColorToken: {
-            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 WithLabel: Story;
-export declare const Checked: Story;
-export declare const Disabled: Story;
-export declare const Sizes: Story;
-export declare const Colors: Story;
-export declare const InteractiveColorPicker: Story;

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

@@ -1,2 +0,0 @@
-export { Toggle } from "./Toggle";
-export type { ToggleProps, ToggleSize, ToggleColor } from "./Toggle";

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

@@ -1,32 +0,0 @@
-/**
- * Tooltip Component
- * A tooltip component that extends Radix UI Tooltip
- */
-import React from "react";
-import type { TooltipProps as RadixTooltipProps } from "@radix-ui/themes";
-import { type ColorToken } from "../../../tokens";
-import "./Tooltip.scss";
-export type { ColorToken } from "../../../tokens";
-export interface TooltipProps extends Omit<RadixTooltipProps, "children" | "content"> {
-    /**
-     * Trigger element
-     */
-    children: React.ReactNode;
-    /**
-     * Tooltip content
-     */
-    content: React.ReactNode;
-    /**
-     * Color token for tooltip background
-     */
-    backgroundColorToken?: ColorToken;
-    /**
-     * Color token for tooltip text
-     */
-    textColorToken?: ColorToken;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,87 +0,0 @@
-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;