@dynamic-mockups/design-system 0.2.14 → 0.2.17

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

@@ -1,29 +1,50 @@
 /**
  * Atoms
  * Basic building blocks of the design system
+ * Organized by: Layout, Typography, UI Components
  */
-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";
+export * from "./layout/Grid";
+export * from "./layout/Container";
+export * from "./layout/Section";
+export * from "./typography/Blockquote";
+export * from "./typography/Code";
+export * from "./typography/Em";
+export * from "./typography/Kbd";
+export * from "./typography/Quote";
+export * from "./typography/Strong";
+export * from "./typography/Label";
+export * from "./typography/Link";
+export * from "./ui-components/Accordion";
+export * from "./ui-components/Alert";
+export * from "./ui-components/AlertDialog";
+export * from "./ui-components/AspectRatio";
+export * from "./ui-components/Avatar";
+export * from "./ui-components/Badge";
+export * from "./ui-components/Button";
+export * from "./ui-components/Callout";
+export * from "./ui-components/Card";
+export * from "./ui-components/Checkbox";
+export * from "./ui-components/ContextMenu";
+export * from "./ui-components/DataList";
+export * from "./ui-components/Dialog";
+export * from "./ui-components/DropdownMenu";
+export * from "./ui-components/HoverCard";
+export * from "./ui-components/IconButton";
+export * from "./ui-components/Inset";
+export * from "./ui-components/Popover";
+export * from "./ui-components/Progress";
+export * from "./ui-components/ProgressBar";
+export * from "./ui-components/RadioGroup";
+export * from "./ui-components/ScrollArea";
+export * from "./ui-components/Select";
+export * from "./ui-components/Separator";
+export * from "./ui-components/Skeleton";
+export * from "./ui-components/Slider";
+export * from "./ui-components/Spinner";
+export * from "./ui-components/Stepper";
+export * from "./ui-components/Switch";
+export * from "./ui-components/Table";
+export * from "./ui-components/Tabs";
+export * from "./ui-components/TextArea";
+export * from "./ui-components/TextField";
+export * from "./ui-components/Tooltip";

package/dist/src/components/atoms/layout/Container/Container.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Container Component
+ * A container component that extends Radix UI Container
+ */
+import React from "react";
+import type { ContainerProps as RadixContainerProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Container.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface ContainerProps extends Omit<RadixContainerProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/layout/Container/Container.stories.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Container").ContainerProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;

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

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

package/dist/src/components/atoms/layout/Grid/Grid.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Grid Component
+ * A grid layout component that extends Radix UI Grid
+ */
+import React from "react";
+import type { GridProps as RadixGridProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Grid.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface GridProps extends Omit<RadixGridProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/layout/Grid/Grid.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("./Grid").GridProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        columns: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        rows: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        gap: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Responsive: Story;
+export declare const CustomTemplate: Story;

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

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

package/dist/src/components/atoms/layout/Section/Section.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Section Component
+ * A section component that extends Radix UI Section
+ */
+import React from "react";
+import type { SectionProps as RadixSectionProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Section.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface SectionProps extends Omit<RadixSectionProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/atoms/layout/Section/Section.stories.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Section").SectionProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        backgroundColorToken: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;

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

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

package/dist/src/components/atoms/typography/Blockquote/Blockquote.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Blockquote Component
+ * A blockquote component that extends Radix UI Blockquote
+ */
+import React from "react";
+import type { BlockquoteProps as RadixBlockquoteProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Blockquote.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface BlockquoteProps extends Omit<RadixBlockquoteProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Color token for border
+     */
+    borderColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;

package/dist/src/components/atoms/typography/Blockquote/Blockquote.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Blockquote").BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAuthor: Story;
+export declare const Sizes: Story;

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

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

package/dist/src/components/atoms/typography/Code/Code.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Code Component
+ * A code component that extends Radix UI Code
+ */
+import React from "react";
+import type { CodeProps as RadixCodeProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Code.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface CodeProps extends Omit<RadixCodeProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;

package/dist/src/components/atoms/typography/Code/Code.stories.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Code").CodeProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InSentence: Story;
+export declare const Variants: Story;
+export declare const Colors: Story;

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

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

package/dist/src/components/atoms/typography/Em/Em.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Em Component
+ * An emphasis component that extends Radix UI Em
+ */
+import React from "react";
+import type { EmProps as RadixEmProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Em.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface EmProps extends Omit<RadixEmProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Em: React.ForwardRefExoticComponent<EmProps & React.RefAttributes<HTMLElement>>;

package/dist/src/components/atoms/typography/Em/Em.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Em").EmProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Standalone: Story;

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

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

package/dist/src/components/atoms/typography/Kbd/Kbd.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Kbd Component
+ * A keyboard shortcut component that extends Radix UI Kbd
+ */
+import React from "react";
+import type { KbdProps as RadixKbdProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Kbd.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface KbdProps extends Omit<RadixKbdProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Color token for background
+     */
+    backgroundColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;

package/dist/src/components/atoms/typography/Kbd/Kbd.stories.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Kbd").KbdProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InSentence: Story;
+export declare const Shortcuts: Story;
+export declare const Sizes: Story;

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * Label Component
+ * A label component that extends Radix UI Text with as="label" and custom color tokens
+ */
+import React from "react";
+import { Text } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Label.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Text>, "as" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/src/components/atoms/{Label → typography/Label}/Label.stories.d.ts

@@ -32,20 +32,6 @@ declare const meta: {
                 category: string;
             };
         };
-        htmlFor: {
-            control: "text";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        required: {
-            control: "boolean";
-            description: string;
-            table: {
-                category: string;
-            };
-        };
         textColorToken: {
             control: "select";
             options: ColorToken[];
@@ -94,7 +80,6 @@ declare const meta: {
 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/typography/Label/index.d.ts

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

package/dist/src/components/atoms/typography/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { LinkProps as RadixLinkProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Link.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface LinkProps extends Omit<RadixLinkProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    textColorToken?: ColorToken;
+    className?: string;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/src/components/atoms/typography/Link/Link.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Link").LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InSentence: Story;
+export declare const Underline: Story;

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

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

package/dist/src/components/atoms/typography/Quote/Quote.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Quote Component
+ * A quote component that extends Radix UI Quote
+ */
+import React from "react";
+import type { QuoteProps as RadixQuoteProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Quote.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface QuoteProps extends Omit<RadixQuoteProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Quote: React.ForwardRefExoticComponent<QuoteProps & React.RefAttributes<HTMLQuoteElement>>;

package/dist/src/components/atoms/typography/Quote/Quote.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Quote").QuoteProps & React.RefAttributes<HTMLQuoteElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Nested: Story;

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

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

package/dist/src/components/atoms/typography/Strong/Strong.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Strong Component
+ * A strong emphasis component that extends Radix UI Strong
+ */
+import React from "react";
+import type { StrongProps as RadixStrongProps } from "@radix-ui/themes";
+import { type ColorToken } from "../../../../tokens";
+import "./Strong.scss";
+export type { ColorToken } from "../../../../tokens";
+export interface StrongProps extends Omit<RadixStrongProps, "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"> {
+    /**
+     * Color token for text
+     */
+    textColorToken?: ColorToken;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare const Strong: React.ForwardRefExoticComponent<StrongProps & React.RefAttributes<HTMLElement>>;

package/dist/src/components/atoms/typography/Strong/Strong.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Strong").StrongProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Standalone: Story;
+export declare const Multiple: Story;

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

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

package/dist/src/components/atoms/ui-components/Accordion/Accordion.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Accordion Component
+ * A collapsible accordion component using Radix UI primitives
+ */
+import React from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import type { AccordionSingleProps, AccordionMultipleProps } from "@radix-ui/react-accordion";
+import { type ColorToken } from "../../../../tokens";
+import "./Accordion.scss";
+export type { ColorToken } from "../../../../tokens";
+type BaseAccordionProps = {
+    backgroundColorToken?: ColorToken;
+    textColorToken?: ColorToken;
+    borderColorToken?: ColorToken;
+    className?: string;
+};
+export type AccordionProps = BaseAccordionProps & (Omit<AccordionSingleProps, "className"> | Omit<AccordionMultipleProps, "className">);
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};