@dnanpm/ui-components 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,15 @@
1
+ ISC License
2
+
3
+ Copyright (c) DNA Online Services
4
+
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted, provided that the above
7
+ copyright notice and this permission notice appear in all copies.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10
+ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11
+ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12
+ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13
+ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14
+ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15
+ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # UI Components
1
+ # DNA UI Components
2
2
 
3
3
  [![npm version](https://badge.fury.io/js/%40dnanpm%2Fui-components.svg)](https://badge.fury.io/js/%40dnanpm%2Fui-components)
4
4
 
@@ -16,6 +16,8 @@ React component library for the DNA Design System. Built with TypeScript, CSS Mo
16
16
  - Themed with design tokens from `@dnanpm/design-tokens`
17
17
  - Supports server-side rendering and tree-shaking
18
18
  - Comprehensive documentation and examples
19
+ - Single CSS file for easier consumption
20
+ - Selective exports for optimal bundle sizes
19
21
 
20
22
  ## Installation
21
23
 
@@ -48,6 +50,18 @@ function App() {
48
50
 
49
51
  Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
50
52
 
53
+ ### Tree-shaking
54
+
55
+ This package uses selective exports to optimize bundle sizes. Import only what you need:
56
+
57
+ ```tsx
58
+ // ✅ Good: Named imports (tree-shakeable)
59
+ import { Button, Box } from '@dnanpm/ui-components';
60
+
61
+ // ❌ Avoid: Wildcard imports (larger bundle)
62
+ import * as UI from '@dnanpm/ui-components';
63
+ ```
64
+
51
65
  ## Contributing
52
66
 
53
67
  See [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC"}
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/utils/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/cn';\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/cn';\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 CHANGED
@@ -1,3 +1,6 @@
1
- export * from './components';
2
- export { cn } from './utils';
1
+ export { Box } from './components/Box';
2
+ export { Button } from './components/Button';
3
+ export type { BoxProps, BoxElevation } from './components/Box';
4
+ export type { ButtonProps } from './components/Button';
5
+ export { cn } from './utils/cn';
3
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC"}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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;"}
1
+ {"version":3,"file":"index.js","sources":["../src/utils/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/cn';\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/cn';\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;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/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"}
@@ -1,2 +1,2 @@
1
- export { cn } from './cn/cn';
1
+ export { cn } from './cn';
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dnanpm/ui-components",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "DNA Design System - React UI Components",
5
5
  "author": "DNA Oy",
6
6
  "license": "ISC",
@@ -47,14 +47,15 @@
47
47
  "node": ">=24"
48
48
  },
49
49
  "peerDependencies": {
50
- "react": "^18.0.0 || ^19.0.0"
50
+ "react": "^18.0.0 || ^19.0.0",
51
+ "react-dom": "^18.0.0 || ^19.0.0"
51
52
  },
52
53
  "devDependencies": {
53
54
  "@dnanpm/design-tokens": "workspace:*",
54
55
  "@repo/eslint-config": "workspace:*",
55
56
  "@repo/typescript-config": "workspace:*",
56
- "@storybook/react-vite": "^10.2.17",
57
- "@storybook/addon-docs": "^10.2.8",
57
+ "@storybook/react-vite": "^10.3.1",
58
+ "@storybook/addon-docs": "^10.3.1",
58
59
  "@testing-library/jest-dom": "^6.6.3",
59
60
  "@testing-library/react": "^16.1.0",
60
61
  "@testing-library/user-event": "^14.5.2",
@@ -1 +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"}
File without changes