@dnanpm/ui-components 0.0.0

package/README.md

@@ -0,0 +1,69 @@
+# UI Components
+
+React component library for the DNA Design System. Built with TypeScript, CSS Modules, and design tokens.
+
+**NPM:** [`@dnanpm/ui-components`](https://www.npmjs.com/package/@dnanpm/ui-components)
+
+## Installation
+
+```bash
+pnpm add @dnanpm/ui-components @dnanpm/design-tokens
+```
+
+## Usage
+
+```tsx
+import { Button, Box } from '@dnanpm/ui-components';
+import '@dnanpm/ui-components/styles.css';
+
+function App() {
+    return (
+        <div>
+            <Button variant="primary">Primary Button</Button>
+            <Button variant="secondary" size="small">
+                Small Secondary
+            </Button>
+            <Button loading>Processing...</Button>
+
+            <Box elevation="high">
+                <h2>Elevated Content</h2>
+            </Box>
+        </div>
+    );
+}
+```
+
+Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
+
+## Components
+
+### Button
+
+**Variants:** `primary` | `secondary`  
+**Sizes:** `default` | `small`  
+**Features:** Loading states, full width, polymorphic (button/anchor)
+
+### Box
+
+**Elevations:** `none` | `low` | `high` | `extraHigh`  
+**Features:** Polymorphic rendering, ref forwarding
+
+## Development
+
+```bash
+pnpm build        # Build library
+pnpm dev          # Watch mode
+pnpm test         # Run tests
+pnpm lint         # Lint code
+pnpm type-check   # Type checking
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.
+
+## Resources
+
+- [How to Add a Component](../../docs/how-to/HOW-TO-COMPONENT.md)
+- [How to Publish](../../docs/how-to/HOW-TO-PUBLISH.md)
+- [How to Changelog](../../docs/how-to/HOW-TO-CHANGELOG.md)

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Box Component
+ *
+ * A versatile container component with elevation (shadow) variants.
+ * Can be rendered as any HTML element using the polymorphic `as` prop.
+ *
+ * Features:
+ * - Polymorphic: Render as any element (div, section, article, etc.)
+ * - Elevation: Four shadow depth levels (none, low, high, extraHigh)
+ * - Ref forwarding supported
+ * - Uses design tokens for consistent shadows
+ *
+ * @example
+ * // Basic box with no elevation
+ * <Box>Content</Box>
+ *
+ * // Box with elevation
+ * <Box elevation="high">Elevated content</Box>
+ *
+ * // Box as section element
+ * <Box as="section" elevation="low">Section content</Box>
+ */
+export declare const Box: import('react').ForwardRefExoticComponent<import('./Box.types').BaseBoxProps & import('react').HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,eAAO,MAAM,GAAG,0KAUf,CAAC"}

package/dist/components/Box/Box.types.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type BoxElevation = 'none' | 'low' | 'high' | 'extraHigh';
+export interface BaseBoxProps {
+    /**
+     * The element type to render
+     * @default "div"
+     */
+    readonly as?: React.ElementType;
+    /**
+     * The elevation level (shadow depth) of the box
+     * @default "none"
+     */
+    readonly elevation?: BoxElevation;
+    /**
+     * The content of the box
+     */
+    readonly children?: React.ReactNode;
+    /**
+     * Custom className to apply to the box
+     */
+    readonly className?: string;
+}
+export type BoxProps = BaseBoxProps & React.HTMLAttributes<HTMLElement>;
+//# sourceMappingURL=Box.types.d.ts.map

package/dist/components/Box/Box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,CAAC;AAEjE,MAAM,WAAW,YAAY;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Box } from './Box';
+export type { BoxProps, BoxElevation } from './Box.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './Button.types';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,+HAoDlB,CAAC"}

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+interface BaseButtonProps {
+    /**
+     * The visual style variant of the button
+     * @default "primary"
+     */
+    readonly variant?: 'primary' | 'secondary';
+    /**
+     * The size variant of the button
+     * @default "default"
+     */
+    readonly size?: 'default' | 'small';
+    /**
+     * The content of the button
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Whether the button should take full width
+     * @default false
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Custom className to apply to the button
+     */
+    readonly className?: string;
+}
+interface ButtonAsButton extends BaseButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className'> {
+    /**
+     * Render as a different element (button or anchor)
+     * @default "button"
+     */
+    readonly as?: 'button';
+}
+interface ButtonAsAnchor extends BaseButtonProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'className'> {
+    /**
+     * Render as a different element (button or anchor)
+     */
+    readonly as: 'a';
+    /**
+     * The URL to link to (required when as="a")
+     */
+    readonly href: string;
+}
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+export {};
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/components/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,UAAU,cACN,SACI,eAAe,EACf,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACjF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,UAAU,cACN,SACI,eAAe,EACf,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACjF;;OAEG;IACH,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Box';
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/dist/index.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+const box = "_box_5e7g9_14";
+const styles$1 = {
+  box,
+  "box--none": "_box--none_5e7g9_23",
+  "box--low": "_box--low_5e7g9_27",
+  "box--high": "_box--high_5e7g9_31",
+  "box--extraHigh": "_box--extraHigh_5e7g9_35"
+};
+const Box = react.forwardRef(
+  ({ as: Component = "div", elevation = "none", children, className, ...props }, ref) => {
+    const classes = cn(styles$1.box, styles$1[`box--${elevation}`], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classes, ...props, children });
+  }
+);
+Box.displayName = "Box";
+const button = "_button_1p878_15";
+const styles = {
+  button,
+  "button--primary": "_button--primary_1p878_45",
+  "button--secondary": "_button--secondary_1p878_58",
+  "button--default": "_button--default_1p878_73",
+  "button--small": "_button--small_1p878_77",
+  "button--fullWidth": "_button--fullWidth_1p878_84",
+  "button--loading": "_button--loading_1p878_89"
+};
+const Button = react.forwardRef(
+  (props, ref) => {
+    const {
+      as = "button",
+      variant = "primary",
+      size = "default",
+      fullWidth = false,
+      loading = false,
+      children,
+      className,
+      ...restProps
+    } = props;
+    const classes = cn(
+      styles.button,
+      styles[`button--${variant}`],
+      styles[`button--${size}`],
+      {
+        [styles["button--fullWidth"]]: fullWidth,
+        [styles["button--loading"]]: loading
+      },
+      className
+    );
+    const content = loading ? "Loading..." : children;
+    if (as === "a") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          className: classes,
+          ...restProps,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        ...restProps,
+        disabled: loading || restProps.disabled,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+exports.Box = Box;
+exports.Button = Button;
+exports.cn = cn;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/utils/cn/cn.ts","../src/components/Box/Box.tsx","../src/components/Button/Button.tsx"],"sourcesContent":["/**\n * Utility function to conditionally join class names.\n * A minimal alternative to clsx/classnames without external dependencies.\n */\nexport function cn(\n    ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n    const classes: string[] = [];\n\n    for (const input of inputs) {\n        if (!input) continue;\n\n        if (typeof input === 'string') {\n            classes.push(input);\n        } else if (typeof input === 'object') {\n            for (const [key, value] of Object.entries(input)) {\n                if (value) {\n                    classes.push(key);\n                }\n            }\n        }\n    }\n\n    return classes.join(' ');\n}\n","/**\n * Box Component\n *\n * A versatile container component with elevation (shadow) variants.\n * Can be rendered as any HTML element using the polymorphic `as` prop.\n *\n * Features:\n * - Polymorphic: Render as any element (div, section, article, etc.)\n * - Elevation: Four shadow depth levels (none, low, high, extraHigh)\n * - Ref forwarding supported\n * - Uses design tokens for consistent shadows\n *\n * @example\n * // Basic box with no elevation\n * <Box>Content</Box>\n *\n * // Box with elevation\n * <Box elevation=\"high\">Elevated content</Box>\n *\n * // Box as section element\n * <Box as=\"section\" elevation=\"low\">Section content</Box>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport { BoxProps } from './Box.types';\nimport styles from './Box.module.css';\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n    ({ as: Component = 'div', elevation = 'none', children, className, ...props }, ref) => {\n        const classes = cn(styles.box, styles[`box--${elevation}`], className);\n\n        return (\n            <Component ref={ref} className={classes} {...props}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nBox.displayName = 'Box';\n","/**\n * Button Component\n *\n * This component demonstrates both approaches for using design tokens:\n * 1. CSS Variables: Used in Button.module.css (e.g., var(--colors-primitive-pink-500))\n * 2. JavaScript Imports: Available for programmatic use\n *\n * Features:\n * - Polymorphic: Can render as button or anchor (link)\n * - Variants: primary, secondary\n * - Sizes: default, small\n * - States: loading, disabled\n * - Layout: fullWidth option\n * - Ref forwarding supported\n *\n * @example\n * // Basic button\n * <Button variant=\"primary\">Click me</Button>\n *\n * // As link\n * <Button as=\"a\" href=\"/path\">Navigate</Button>\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport type { ButtonProps } from './Button.types';\nimport styles from './Button.module.css';\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (props, ref) => {\n        const {\n            as = 'button',\n            variant = 'primary',\n            size = 'default',\n            fullWidth = false,\n            loading = false,\n            children,\n            className,\n            ...restProps\n        } = props;\n\n        const classes = cn(\n            styles.button,\n            styles[`button--${variant}`],\n            styles[`button--${size}`],\n            {\n                [styles['button--fullWidth']]: fullWidth,\n                [styles['button--loading']]: loading,\n            },\n            className,\n        );\n\n        const content = loading ? 'Loading...' : children;\n\n        if (as === 'a') {\n            return (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    className={classes}\n                    {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {content}\n                </a>\n            );\n        }\n\n        return (\n            <button\n                ref={ref as React.Ref<HTMLButtonElement>}\n                type=\"button\"\n                className={classes}\n                {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n                disabled={\n                    loading || (restProps as React.ButtonHTMLAttributes<HTMLButtonElement>).disabled\n                }\n            >\n                {content}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["forwardRef","styles","jsx"],"mappings":";;;;AAIO,SAAS,MACT,QACG;AACN,QAAM,UAAoB,CAAA;AAE1B,aAAW,SAAS,QAAQ;AACxB,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC3B,cAAQ,KAAK,KAAK;AAAA,IACtB,WAAW,OAAO,UAAU,UAAU;AAClC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,YAAI,OAAO;AACP,kBAAQ,KAAK,GAAG;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO,QAAQ,KAAK,GAAG;AAC3B;;;;;;;;;ACIO,MAAM,MAAMA,MAAAA;AAAAA,EACf,CAAC,EAAE,IAAI,YAAY,OAAO,YAAY,QAAQ,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACnF,UAAM,UAAU,GAAGC,SAAO,KAAKA,SAAO,QAAQ,SAAS,EAAE,GAAG,SAAS;AAErE,0CACK,WAAA,EAAU,KAAU,WAAW,SAAU,GAAG,OACxC,UACL;AAAA,EAER;AACJ;AAEA,IAAI,cAAc;;;;;;;;;;;ACTX,MAAM,SAASD,MAAAA;AAAAA,EAClB,CAAC,OAAO,QAAQ;AACZ,UAAM;AAAA,MACF,KAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACH;AAEJ,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,MACP,OAAO,WAAW,OAAO,EAAE;AAAA,MAC3B,OAAO,WAAW,IAAI,EAAE;AAAA,MACxB;AAAA,QACI,CAAC,OAAO,mBAAmB,CAAC,GAAG;AAAA,QAC/B,CAAC,OAAO,iBAAiB,CAAC,GAAG;AAAA,MAAA;AAAA,MAEjC;AAAA,IAAA;AAGJ,UAAM,UAAU,UAAU,eAAe;AAEzC,QAAI,OAAO,KAAK;AACZ,aACIE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAEA,WACIA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,QACV,GAAI;AAAA,QACL,UACI,WAAY,UAA4D;AAAA,QAG3E,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,OAAO,cAAc;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { cn } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+const box = "_box_5e7g9_14";
+const styles$1 = {
+  box,
+  "box--none": "_box--none_5e7g9_23",
+  "box--low": "_box--low_5e7g9_27",
+  "box--high": "_box--high_5e7g9_31",
+  "box--extraHigh": "_box--extraHigh_5e7g9_35"
+};
+const Box = forwardRef(
+  ({ as: Component = "div", elevation = "none", children, className, ...props }, ref) => {
+    const classes = cn(styles$1.box, styles$1[`box--${elevation}`], className);
+    return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...props, children });
+  }
+);
+Box.displayName = "Box";
+const button = "_button_1p878_15";
+const styles = {
+  button,
+  "button--primary": "_button--primary_1p878_45",
+  "button--secondary": "_button--secondary_1p878_58",
+  "button--default": "_button--default_1p878_73",
+  "button--small": "_button--small_1p878_77",
+  "button--fullWidth": "_button--fullWidth_1p878_84",
+  "button--loading": "_button--loading_1p878_89"
+};
+const Button = forwardRef(
+  (props, ref) => {
+    const {
+      as = "button",
+      variant = "primary",
+      size = "default",
+      fullWidth = false,
+      loading = false,
+      children,
+      className,
+      ...restProps
+    } = props;
+    const classes = cn(
+      styles.button,
+      styles[`button--${variant}`],
+      styles[`button--${size}`],
+      {
+        [styles["button--fullWidth"]]: fullWidth,
+        [styles["button--loading"]]: loading
+      },
+      className
+    );
+    const content = loading ? "Loading..." : children;
+    if (as === "a") {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          className: classes,
+          ...restProps,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        ...restProps,
+        disabled: loading || restProps.disabled,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Box,
+  Button,
+  cn
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils/cn/cn.ts","../src/components/Box/Box.tsx","../src/components/Button/Button.tsx"],"sourcesContent":["/**\n * Utility function to conditionally join class names.\n * A minimal alternative to clsx/classnames without external dependencies.\n */\nexport function cn(\n    ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n    const classes: string[] = [];\n\n    for (const input of inputs) {\n        if (!input) continue;\n\n        if (typeof input === 'string') {\n            classes.push(input);\n        } else if (typeof input === 'object') {\n            for (const [key, value] of Object.entries(input)) {\n                if (value) {\n                    classes.push(key);\n                }\n            }\n        }\n    }\n\n    return classes.join(' ');\n}\n","/**\n * Box Component\n *\n * A versatile container component with elevation (shadow) variants.\n * Can be rendered as any HTML element using the polymorphic `as` prop.\n *\n * Features:\n * - Polymorphic: Render as any element (div, section, article, etc.)\n * - Elevation: Four shadow depth levels (none, low, high, extraHigh)\n * - Ref forwarding supported\n * - Uses design tokens for consistent shadows\n *\n * @example\n * // Basic box with no elevation\n * <Box>Content</Box>\n *\n * // Box with elevation\n * <Box elevation=\"high\">Elevated content</Box>\n *\n * // Box as section element\n * <Box as=\"section\" elevation=\"low\">Section content</Box>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport { BoxProps } from './Box.types';\nimport styles from './Box.module.css';\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n    ({ as: Component = 'div', elevation = 'none', children, className, ...props }, ref) => {\n        const classes = cn(styles.box, styles[`box--${elevation}`], className);\n\n        return (\n            <Component ref={ref} className={classes} {...props}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nBox.displayName = 'Box';\n","/**\n * Button Component\n *\n * This component demonstrates both approaches for using design tokens:\n * 1. CSS Variables: Used in Button.module.css (e.g., var(--colors-primitive-pink-500))\n * 2. JavaScript Imports: Available for programmatic use\n *\n * Features:\n * - Polymorphic: Can render as button or anchor (link)\n * - Variants: primary, secondary\n * - Sizes: default, small\n * - States: loading, disabled\n * - Layout: fullWidth option\n * - Ref forwarding supported\n *\n * @example\n * // Basic button\n * <Button variant=\"primary\">Click me</Button>\n *\n * // As link\n * <Button as=\"a\" href=\"/path\">Navigate</Button>\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport type { ButtonProps } from './Button.types';\nimport styles from './Button.module.css';\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (props, ref) => {\n        const {\n            as = 'button',\n            variant = 'primary',\n            size = 'default',\n            fullWidth = false,\n            loading = false,\n            children,\n            className,\n            ...restProps\n        } = props;\n\n        const classes = cn(\n            styles.button,\n            styles[`button--${variant}`],\n            styles[`button--${size}`],\n            {\n                [styles['button--fullWidth']]: fullWidth,\n                [styles['button--loading']]: loading,\n            },\n            className,\n        );\n\n        const content = loading ? 'Loading...' : children;\n\n        if (as === 'a') {\n            return (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    className={classes}\n                    {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {content}\n                </a>\n            );\n        }\n\n        return (\n            <button\n                ref={ref as React.Ref<HTMLButtonElement>}\n                type=\"button\"\n                className={classes}\n                {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n                disabled={\n                    loading || (restProps as React.ButtonHTMLAttributes<HTMLButtonElement>).disabled\n                }\n            >\n                {content}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["styles"],"mappings":";;AAIO,SAAS,MACT,QACG;AACN,QAAM,UAAoB,CAAA;AAE1B,aAAW,SAAS,QAAQ;AACxB,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC3B,cAAQ,KAAK,KAAK;AAAA,IACtB,WAAW,OAAO,UAAU,UAAU;AAClC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,YAAI,OAAO;AACP,kBAAQ,KAAK,GAAG;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO,QAAQ,KAAK,GAAG;AAC3B;;;;;;;;;ACIO,MAAM,MAAM;AAAA,EACf,CAAC,EAAE,IAAI,YAAY,OAAO,YAAY,QAAQ,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACnF,UAAM,UAAU,GAAGA,SAAO,KAAKA,SAAO,QAAQ,SAAS,EAAE,GAAG,SAAS;AAErE,+BACK,WAAA,EAAU,KAAU,WAAW,SAAU,GAAG,OACxC,UACL;AAAA,EAER;AACJ;AAEA,IAAI,cAAc;;;;;;;;;;;ACTX,MAAM,SAAS;AAAA,EAClB,CAAC,OAAO,QAAQ;AACZ,UAAM;AAAA,MACF,KAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACH;AAEJ,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,MACP,OAAO,WAAW,OAAO,EAAE;AAAA,MAC3B,OAAO,WAAW,IAAI,EAAE;AAAA,MACxB;AAAA,QACI,CAAC,OAAO,mBAAmB,CAAC,GAAG;AAAA,QAC/B,CAAC,OAAO,iBAAiB,CAAC,GAAG;AAAA,MAAA;AAAA,MAEjC;AAAA,IAAA;AAGJ,UAAM,UAAU,UAAU,eAAe;AAEzC,QAAI,OAAO,KAAK;AACZ,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,QACV,GAAI;AAAA,QACL,UACI,WAAY,UAA4D;AAAA,QAG3E,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,OAAO,cAAc;"}

package/dist/styles.css

@@ -0,0 +1,327 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --colors-primitive-neutral-100: #ffffff;
+  --colors-primitive-neutral-200: #f7f7f7;
+  --colors-primitive-neutral-300: #efeeed;
+  --colors-primitive-neutral-400: #e7e5e3;
+  --colors-primitive-neutral-500: #d4d2ce;
+  --colors-primitive-neutral-600: #948b89;
+  --colors-primitive-neutral-700: #505050;
+  --colors-primitive-neutral-800: #121212;
+  --colors-primitive-neutral-900: #000000;
+  --colors-primitive-pink-200: #ffbfe0;
+  --colors-primitive-pink-300: #ff82c1;
+  --colors-primitive-pink-400: #f7007f;
+  --colors-primitive-pink-500: #da0070;
+  --colors-primitive-pink-600: #ae005a;
+  --colors-primitive-plum-200: #792a59;
+  --colors-primitive-plum-300: #732654;
+  --colors-primitive-plum-400: #69214c;
+  --colors-primitive-plum-500: #551c3e;
+  --colors-primitive-plum-600: #441632;
+  --colors-primitive-sand-200: #fdfbfa;
+  --colors-primitive-sand-300: #f8f4f1;
+  --colors-primitive-sand-400: #efeae4;
+  --colors-primitive-sand-500: #ede8e1;
+  --colors-primitive-sand-600: #cabca7;
+  --colors-primitive-lemon-300: #fffaba;
+  --colors-primitive-lemon-400: #fff9a3;
+  --colors-primitive-lemon-500: #fff347;
+  --colors-primitive-orange-300: #ffdbad;
+  --colors-primitive-orange-400: #ffca85;
+  --colors-primitive-orange-500: #ffa633;
+  --colors-primitive-orange-600: #eb6600;
+  --colors-primitive-sky-300: #96e4f8;
+  --colors-primitive-sky-400: #77dcf5;
+  --colors-primitive-sky-500: #2ecaf0;
+  --colors-primitive-blue-400: #d8e9ff;
+  --colors-primitive-blue-500: #0064e2;
+  --colors-primitive-red-500: #dd0a0a;
+  --colors-primitive-green-500: #008500;
+  --colors-primitive-teal-500: #0b7c99;
+  --colors-semantic-foreground-default: #121212;
+  --colors-semantic-foreground-muted: #505050;
+  --colors-semantic-foreground-inverse: #ffffff;
+  --colors-semantic-foreground-primary-strong: #da0070;
+  --colors-semantic-foreground-primary-mid: #ff82c1;
+  --colors-semantic-foreground-primary-soft: #ffbfe0;
+  --colors-semantic-foreground-secondary-strong: #551c3e;
+  --colors-semantic-foreground-secondary-mid: #69214c;
+  --colors-semantic-foreground-secondary-soft: #792a59;
+  --colors-semantic-foreground-status-error: #dd0a0a;
+  --colors-semantic-foreground-status-warning: #eb6600;
+  --colors-semantic-foreground-status-success: #008500;
+  --colors-semantic-foreground-status-info: #0b7c99;
+  --colors-semantic-foreground-link: #da0070;
+  --colors-semantic-foreground-link-inverse: #ffffff;
+  --colors-semantic-foreground-link-hover: #ae005a;
+  --colors-semantic-foreground-link-inverse-hover: rgba(255, 255, 255, 0.8);
+  --colors-semantic-surface-base: #ffffff;
+  --colors-semantic-surface-neutral-soft: #fdfbfa;
+  --colors-semantic-surface-neutral-mid: #f8f4f1;
+  --colors-semantic-surface-neutral-strong: #ede8e1;
+  --colors-semantic-surface-primary-strong: #da0070;
+  --colors-semantic-surface-primary-mid: #ff82c1;
+  --colors-semantic-surface-primary-soft: #ffbfe0;
+  --colors-semantic-surface-secondary-strong: #551c3e;
+  --colors-semantic-surface-secondary-mid: #69214c;
+  --colors-semantic-surface-secondary-soft: #792a59;
+  --colors-semantic-border-neutral-mid: #d4d2ce;
+  --colors-semantic-border-neutral-soft: #e7e5e3;
+  --colors-semantic-border-neutral-base: #efeeed;
+  --colors-semantic-border-neutral-strong: #948b89;
+  --colors-semantic-border-secondary: #551c3e;
+  --colors-semantic-border-primary: #da0070;
+  --colors-semantic-border-focus: #0064e2;
+  --colors-semantic-border-inverse: #ffffff;
+  --colors-semantic-border-error: #dd0a0a;
+  --colors-semantic-border-warning: #eb6600;
+  --colors-semantic-border-success: #008500;
+  --colors-semantic-border-info: #0b7c99;
+  --colors-semantic-utility-focus-soft: #d8e9ff;
+  --colors-semantic-utility-focus-strong: #0064e2;
+  --colors-semantic-utility-overlay-strong: rgba(85, 28, 62, 0.4);
+  --colors-semantic-utility-overlay-soft: rgba(85, 28, 62, 0.1);
+  --colors-semantic-status-info: #0b7c99;
+  --colors-semantic-status-success: #008500;
+  --colors-semantic-status-warning: #eb6600;
+  --colors-semantic-status-error: #dd0a0a;
+  --colors-semantic-accent-lemon-300: #fffaba;
+  --colors-semantic-accent-lemon-400: #fff9a3;
+  --colors-semantic-accent-lemon-500: #fff347;
+  --colors-semantic-accent-orange-300: #ffdbad;
+  --colors-semantic-accent-orange-400: #ffca85;
+  --colors-semantic-accent-orange-500: #ffa633;
+  --colors-semantic-accent-sky-300: #96e4f8;
+  --colors-semantic-accent-sky-400: #77dcf5;
+  --colors-semantic-accent-sky-500: #2ecaf0;
+  --colors-semantic-interactive-primary-default: #da0070;
+  --colors-semantic-interactive-primary-hover: #ae005a;
+  --colors-semantic-interactive-primary-active: #f7007f;
+  --colors-semantic-interactive-primary-disabled: rgba(218, 0, 112, 0.3);
+  --colors-semantic-interactive-primary-focus: #ae005a;
+  --colors-semantic-interactive-secondary-default: #551c3e;
+  --colors-semantic-interactive-secondary-hover: #441632;
+  --colors-semantic-interactive-secondary-focus: #441632;
+  --colors-semantic-interactive-secondary-active: #732654;
+  --colors-semantic-interactive-secondary-disabled: rgba(85, 28, 62, 0.3);
+  --colors-semantic-interactive-neutral-default: #ede8e1;
+  --colors-semantic-interactive-neutral-hover: #cabca7;
+  --colors-semantic-interactive-neutral-focus: #cabca7;
+  --colors-semantic-interactive-neutral-active: #efeae4;
+  --colors-semantic-interactive-neutral-disabled: rgba(237, 232, 225, 0.3);
+  --colors-semantic-interactive-focus-ring: #0064e2;
+  --colors-semantic-interactive-focus-ring-weak: #d8e9ff;
+  --spacing-ui-md: 16px;
+  --spacing-ui-lg: 20px;
+  --spacing-ui-sm: 12px;
+  --spacing-ui-xl: 24px;
+  --spacing-ui-xs: 8px;
+  --spacing-ui-xxs: 4px;
+  --spacing-ui-xxl: 32px;
+  --spacing-ui-none: 0px;
+  --spacing-primitive-size0: 0px;
+  --spacing-primitive-size8: 8px;
+  --spacing-primitive-size16: 16px;
+  --spacing-primitive-size24: 24px;
+  --spacing-primitive-size32: 32px;
+  --spacing-primitive-size40: 40px;
+  --spacing-primitive-size12: 12px;
+  --spacing-primitive-size20: 20px;
+  --spacing-primitive-size4: 4px;
+  --spacing-primitive-size2: 2px;
+  --spacing-primitive-size48: 48px;
+  --spacing-primitive-size56: 56px;
+  --spacing-primitive-size64: 64px;
+  --spacing-primitive-size72: 72px;
+  --spacing-primitive-size80: 80px;
+  --spacing-primitive-size88: 88px;
+  --spacing-primitive-size96: 96px;
+  --spacing-primitive-size104: 104px;
+  --spacing-primitive-size112: 112px;
+  --spacing-primitive-size120: 120px;
+  --spacing-primitive-size128: 128px;
+  --spacing-primitive-size136: 136px;
+  --spacing-primitive-size144: 144px;
+  --spacing-primitive-size152: 152px;
+  --spacing-primitive-size160: 160px;
+  --spacing-layout-none: 0px;
+  --spacing-layout-xxs: 16px;
+  --spacing-layout-xs: 32px;
+  --spacing-layout-sm: 48px;
+  --spacing-layout-md: 64px;
+  --spacing-layout-lg: 80px;
+  --spacing-layout-xl: 96px;
+  --spacing-layout-xxl: 112px;
+  --radius-semantic-none: 0px;
+  --radius-semantic-sm: 4px;
+  --radius-semantic-md: 8px;
+  --radius-semantic-lg: 12px;
+  --radius-semantic-full: 1000px;
+  --radius-primitive-size0: 0px;
+  --radius-primitive-size4: 4px;
+  --radius-primitive-size8: 8px;
+  --radius-primitive-size12: 12px;
+  --radius-primitive-size1000: 1000px;
+  --borderwidth-semantic-none: 0px;
+  --borderwidth-semantic-xs: 1px;
+  --borderwidth-semantic-md: 3px;
+  --borderwidth-semantic-lg: 4px;
+  --borderwidth-semantic-xl: 5px;
+  --borderwidth-semantic-xxl: 6px;
+  --borderwidth-semantic-sm: 2px;
+  --borderwidth-primitive-size0: 0px;
+  --borderwidth-primitive-size1: 1px;
+  --borderwidth-primitive-size2: 2px;
+  --borderwidth-primitive-size3: 3px;
+  --borderwidth-primitive-size4: 4px;
+  --borderwidth-primitive-size5: 5px;
+  --borderwidth-primitive-size6: 6px;
+}
+
+html {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+
+    scroll-behavior: smooth;
+}
+/**
+ * Box Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ *
+ * Elevation shadows based on DNA Design System specifications:
+ * - None: No shadow
+ * - Low: Subtle depth (0 2px 16px rgba(18, 18, 18, 0.06))
+ * - High: Medium depth (0 6px 24px rgba(18, 18, 18, 0.08))
+ * - Extra High: Maximum depth (0 8px 64px rgba(18, 18, 18, 0.16))
+ */
+
+._box_5e7g9_14 {
+    display: block;
+    padding: var(--spacing-ui-md, 1rem);
+    border-radius: var(--radius-semantic-md, 0.5rem);
+    background-color: var(--colors-primitive-neutral-0, #ffffff);
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+/* Elevation Variants */
+._box--none_5e7g9_23 {
+    box-shadow: none;
+}
+
+._box--low_5e7g9_27 {
+    box-shadow: 0 2px 16px rgba(18, 18, 18, 0.06);
+}
+
+._box--high_5e7g9_31 {
+    box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
+}
+
+._box--extraHigh_5e7g9_35 {
+    box-shadow: 0 8px 64px rgba(18, 18, 18, 0.16);
+}
+/**
+ * Button Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ *
+ * Examples:
+ * - Colors: var(--colors-primitive-pink-500)
+ * - Spacing: var(--spacing-ui-md)
+ * - Border radius: var(--radius-semantic-md)
+ *
+ * Fallback values are defined in src/styles/base.css
+ */
+
+._button_1p878_15 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    padding: 0 var(--spacing-ui-md, 1rem);
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+        sans-serif;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: var(--radius-semantic-md, 0.5rem);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+._button_1p878_15:focus-visible {
+    outline: 2px solid var(--colors-primitive-utility-focusstrong, #1d4ed8);
+    outline-offset: 2px;
+}
+
+._button_1p878_15:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Button Variants */
+._button--primary_1p878_45 {
+    background-color: var(--colors-primitive-pink-500, #ec4899);
+    color: white;
+}
+
+._button--primary_1p878_45:hover:not(:disabled) {
+    background-color: var(--colors-primitive-pink-600, #db2777);
+}
+
+._button--primary_1p878_45:active:not(:disabled) {
+    background-color: var(--colors-primitive-pink-400, #f472b6);
+}
+
+._button--secondary_1p878_58 {
+    background-color: var(--colors-primitive-neutral-100, #f5f5f5);
+    color: var(--colors-primitive-neutral-900, #171717);
+    border-color: var(--colors-primitive-neutral-300, #d4d4d4);
+}
+
+._button--secondary_1p878_58:hover:not(:disabled) {
+    background-color: var(--colors-primitive-neutral-200, #e5e5e5);
+}
+
+._button--secondary_1p878_58:active:not(:disabled) {
+    background-color: var(--colors-primitive-neutral-300, #d4d4d4);
+}
+
+/* Size Variants */
+._button--default_1p878_73 {
+    /* Default size (already set in base styles) */
+}
+
+._button--small_1p878_77 {
+    height: 2rem;
+    padding: 0 var(--spacing-ui-sm, 0.75rem);
+    font-size: 0.75rem;
+}
+
+/* Layout Modifiers */
+._button--fullWidth_1p878_84 {
+    width: 100%;
+}
+
+/* State Modifiers */
+._button--loading_1p878_89 {
+    opacity: 0.7;
+    cursor: wait;
+}
+
+._button--loading_1p878_89:hover {
+    /* Prevent hover effects when loading */
+    background-color: inherit;
+}

package/dist/utils/cn/cn.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility function to conditionally join class names.
+ * A minimal alternative to clsx/classnames without external dependencies.
+ */
+export declare function cn(...inputs: (string | undefined | null | false | Record<string, boolean>)[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/utils/cn/cn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,EAAE,CACd,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,GAC3E,MAAM,CAkBR"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn/cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@dnanpm/ui-components",
+  "version": "0.0.0",
+  "description": "DNA Design System - React UI Components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui-components",
+    "react",
+    "design-system",
+    "DTCG"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.2.17",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.2",
+    "jsdom": "^28.1.0",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "@dnanpm/design-tokens": "0.0.1",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DNA-Online-Services/dna-design-system.git",
+    "directory": "packages/ui-components"
+  },
+  "homepage": "https://github.com/DNA-Online-Services/dna-design-system/tree/main/packages/ui-components#readme",
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "clean": "rm -rf dist node_modules",
+    "type-check": "tsc --noEmit",
+    "tar": "bash scripts/generate-tar.sh"
+  }
+}