@dnanpm/ui-components 0.0.4 → 0.1.0

package/README.md

@@ -1,6 +1,6 @@
 # DNA UI Components
 
-[![npm version](https://badge.fury.io/js/%40dnanpm%2Fui-components.svg)](https://badge.fury.io/js/%40dnanpm%2Fui-components)
+[![npm version](https://img.shields.io/npm/v/%40dnanpm%2Fui-components?logo=npm)](https://www.npmjs.com/package/@dnanpm/ui-components)
 
 > ⚠️ **Under Heavy Development** — This package is actively being developed. Breaking changes may occur between minor versions during the 0.x release cycle.
 
@@ -12,6 +12,7 @@ React component library for the DNA Design System. Built with TypeScript, CSS Mo
 ## Features
 
 - Accessible, responsive, and customizable components
+- Canonical DNA component APIs with swappable internal implementations
 - Built with TypeScript and CSS Modules
 - Themed with design tokens from `@dnanpm/design-tokens`
 - Supports server-side rendering and tree-shaking
@@ -28,27 +29,23 @@ pnpm add @dnanpm/ui-components @dnanpm/design-tokens
 ## Usage
 
 ```tsx
-import { Button, Box } from '@dnanpm/ui-components';
+import { Breadcrumb } from '@dnanpm/ui-components';
 import '@dnanpm/ui-components/styles.css';
 
+const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Mobile Plans', href: '/products/mobile' },
+];
+
 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>
-    );
+    return <Breadcrumb items={items} />;
 }
 ```
 
-Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
+## Implementation Model
+
+Components are written as plain React, with `forwardRef`, CSS Modules, and BEM naming. Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
 
 ### Tree-shaking
 
@@ -56,7 +53,7 @@ This package uses selective exports to optimize bundle sizes. Import only what y
 
 ```tsx
 // ✅ Good: Named imports (tree-shakeable)
-import { Button, Box } from '@dnanpm/ui-components';
+import { Breadcrumb } from '@dnanpm/ui-components';
 
 // ❌ Avoid: Wildcard imports (larger bundle)
 import * as UI from '@dnanpm/ui-components';

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Accordion_utils = require("./Accordion.utils.cjs");
+const Accordion_module = require("./Accordion.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Accordion = react.forwardRef(function Accordion2({ variant = "box", autoCollapsible = false, children, className, ...props }, ref) {
+  const groupName = react.useId();
+  const contextValue = react.useMemo(
+    () => ({ variant, groupName: autoCollapsible ? groupName : void 0 }),
+    [variant, autoCollapsible, groupName]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Accordion_utils.AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn(Accordion_module.default.accordion, Accordion_module.default[`accordion--${variant}`], className),
+      ...props,
+      children
+    }
+  ) });
+});
+Accordion.displayName = "Accordion";
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.cjs.map

package/dist/components/Accordion/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\nimport { AccordionContext } from './Accordion.utils';\nimport styles from './Accordion.module.css';\nimport type { AccordionProps } from './Accordion.types';\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n    { variant = 'box', autoCollapsible = false, children, className, ...props },\n    ref,\n) {\n    const groupName = useId();\n    const contextValue = useMemo(\n        () => ({ variant, groupName: autoCollapsible ? groupName : undefined }),\n        [variant, autoCollapsible, groupName],\n    );\n\n    return (\n        <AccordionContext.Provider value={contextValue}>\n            <div\n                ref={ref}\n                className={cn(styles.accordion, styles[`accordion--${variant}`], className)}\n                {...props}\n            >\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n});\n\nAccordion.displayName = 'Accordion';\n"],"names":["forwardRef","Accordion","useId","useMemo","jsx","AccordionContext","cn","styles"],"mappings":";;;;;;;AAMO,MAAM,YAAYA,MAAAA,WAA2C,SAASC,WACzE,EAAE,UAAU,OAAO,kBAAkB,OAAO,UAAU,WAAW,GAAG,MAAA,GACpE,KACF;AACE,QAAM,YAAYC,MAAAA,MAAA;AAClB,QAAM,eAAeC,MAAAA;AAAAA,IACjB,OAAO,EAAE,SAAS,WAAW,kBAAkB,YAAY,OAAA;AAAA,IAC3D,CAAC,SAAS,iBAAiB,SAAS;AAAA,EAAA;AAGxC,SACIC,2BAAAA,IAACC,gBAAAA,iBAAiB,UAAjB,EAA0B,OAAO,cAC9B,UAAAD,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWE,GAAAA,GAAGC,iBAAAA,QAAO,WAAWA,iBAAAA,QAAO,cAAc,OAAO,EAAE,GAAG,SAAS;AAAA,MACzE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAET;AAER,CAAC;AAED,UAAU,cAAc;;"}

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,19 @@
+@layer dna-design-system {/**
+ * Accordion Component Styles
+ *
+ * Layout wrapper that spaces AccordionItem children evenly.
+ */
+
+._accordion_oi7d7_7 {
+    display: flex;
+    flex-direction: column;
+}
+
+._accordion--box_oi7d7_12 {
+    gap: var(--spacing-ui-md);
+}
+
+._accordion--panel_oi7d7_16 {
+    gap: 0;
+}
+}

package/dist/components/Accordion/Accordion.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,2GAqBpB,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo } from "react";
+import { AccordionContext } from "./Accordion.utils.js";
+import styles from "./Accordion.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Accordion = forwardRef(function Accordion2({ variant = "box", autoCollapsible = false, children, className, ...props }, ref) {
+  const groupName = useId();
+  const contextValue = useMemo(
+    () => ({ variant, groupName: autoCollapsible ? groupName : void 0 }),
+    [variant, autoCollapsible, groupName]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(styles.accordion, styles[`accordion--${variant}`], className),
+      ...props,
+      children
+    }
+  ) });
+});
+Accordion.displayName = "Accordion";
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\nimport { AccordionContext } from './Accordion.utils';\nimport styles from './Accordion.module.css';\nimport type { AccordionProps } from './Accordion.types';\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n    { variant = 'box', autoCollapsible = false, children, className, ...props },\n    ref,\n) {\n    const groupName = useId();\n    const contextValue = useMemo(\n        () => ({ variant, groupName: autoCollapsible ? groupName : undefined }),\n        [variant, autoCollapsible, groupName],\n    );\n\n    return (\n        <AccordionContext.Provider value={contextValue}>\n            <div\n                ref={ref}\n                className={cn(styles.accordion, styles[`accordion--${variant}`], className)}\n                {...props}\n            >\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n});\n\nAccordion.displayName = 'Accordion';\n"],"names":["Accordion"],"mappings":";;;;;AAMO,MAAM,YAAY,WAA2C,SAASA,WACzE,EAAE,UAAU,OAAO,kBAAkB,OAAO,UAAU,WAAW,GAAG,MAAA,GACpE,KACF;AACE,QAAM,YAAY,MAAA;AAClB,QAAM,eAAe;AAAA,IACjB,OAAO,EAAE,SAAS,WAAW,kBAAkB,YAAY,OAAA;AAAA,IAC3D,CAAC,SAAS,iBAAiB,SAAS;AAAA,EAAA;AAGxC,SACI,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAC9B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,GAAG,OAAO,WAAW,OAAO,cAAc,OAAO,EAAE,GAAG,SAAS;AAAA,MACzE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAET;AAER,CAAC;AAED,UAAU,cAAc;"}

package/dist/components/Accordion/Accordion.module.css.cjs

@@ -0,0 +1,12 @@
+require('./Accordion.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const accordion = "_accordion_oi7d7_7";
+const styles = {
+  accordion,
+  "accordion--box": "_accordion--box_oi7d7_12",
+  "accordion--panel": "_accordion--panel_oi7d7_16"
+};
+exports.accordion = accordion;
+exports.default = styles;
+//# sourceMappingURL=Accordion.module.css.cjs.map

package/dist/components/Accordion/Accordion.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/Accordion/Accordion.module.css.js

@@ -0,0 +1,12 @@
+import './Accordion.css';
+const accordion = "_accordion_oi7d7_7";
+const styles = {
+  accordion,
+  "accordion--box": "_accordion--box_oi7d7_12",
+  "accordion--panel": "_accordion--panel_oi7d7_16"
+};
+export {
+  accordion,
+  styles as default
+};
+//# sourceMappingURL=Accordion.module.css.js.map

package/dist/components/Accordion/Accordion.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Visual style variant that controls spacing between items.
+     * - `box`: 16px gap between items
+     * - `panel`: no gap between items (items stack flush)
+     * @default 'box'
+     */
+    readonly variant?: 'box' | 'panel';
+    /**
+     * When true, only one AccordionItem can be open at a time.
+     * Uses the native `<details>` `name` attribute to create an exclusive group.
+     * @default false
+     */
+    readonly autoCollapsible?: boolean;
+    /**
+     * AccordionItem elements to render within the accordion group.
+     */
+    readonly children: ReactNode;
+}
+//# sourceMappingURL=Accordion.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,cAAe,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACnE;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC"}

package/dist/components/Accordion/Accordion.utils.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const AccordionContext = react.createContext({ variant: "box" });
+const useAccordionContext = () => react.useContext(AccordionContext);
+exports.AccordionContext = AccordionContext;
+exports.useAccordionContext = useAccordionContext;
+//# sourceMappingURL=Accordion.utils.cjs.map

package/dist/components/Accordion/Accordion.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.utils.cjs","sources":["../../../src/components/Accordion/Accordion.utils.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface AccordionContextValue {\n    variant: 'box' | 'panel';\n    groupName?: string;\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>({ variant: 'box' });\n\nexport const useAccordionContext = () => useContext(AccordionContext);\n"],"names":["createContext","useContext"],"mappings":";;;AAOO,MAAM,mBAAmBA,MAAAA,cAAqC,EAAE,SAAS,OAAO;AAEhF,MAAM,sBAAsB,MAAMC,MAAAA,WAAW,gBAAgB;;;"}

package/dist/components/Accordion/Accordion.utils.d.ts

@@ -0,0 +1,8 @@
+interface AccordionContextValue {
+    variant: 'box' | 'panel';
+    groupName?: string;
+}
+export declare const AccordionContext: import('react').Context<AccordionContextValue>;
+export declare const useAccordionContext: () => AccordionContextValue;
+export {};
+//# sourceMappingURL=Accordion.utils.d.ts.map

package/dist/components/Accordion/Accordion.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.utils.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC3B,OAAO,EAAE,KAAK,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,gDAA2D,CAAC;AAEzF,eAAO,MAAM,mBAAmB,6BAAqC,CAAC"}

package/dist/components/Accordion/Accordion.utils.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const AccordionContext = createContext({ variant: "box" });
+const useAccordionContext = () => useContext(AccordionContext);
+export {
+  AccordionContext,
+  useAccordionContext
+};
+//# sourceMappingURL=Accordion.utils.js.map

package/dist/components/Accordion/Accordion.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.utils.js","sources":["../../../src/components/Accordion/Accordion.utils.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface AccordionContextValue {\n    variant: 'box' | 'panel';\n    groupName?: string;\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>({ variant: 'box' });\n\nexport const useAccordionContext = () => useContext(AccordionContext);\n"],"names":[],"mappings":";AAOO,MAAM,mBAAmB,cAAqC,EAAE,SAAS,OAAO;AAEhF,MAAM,sBAAsB,MAAM,WAAW,gBAAgB;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/AccordionItem/AccordionItem.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const Accordion_utils = require("../Accordion/Accordion.utils.cjs");
+const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const AccordionItem_module = require("./AccordionItem.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const AccordionItem = react.forwardRef(
+  function AccordionItem2({ label, variant: variantProp, image, imageSize, children, className, name, ...props }, ref) {
+    const { variant: contextVariant, groupName } = Accordion_utils.useAccordionContext();
+    const variant = variantProp ?? contextVariant;
+    const resolvedImageSize = image ? imageSize ?? "md" : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "details",
+      {
+        ref,
+        className: cn.cn(
+          AccordionItem_module["accordion-item"],
+          AccordionItem_module[`accordion-item--${variant}`],
+          variant === "box" && elevation_module.default.elevationLow,
+          className
+        ),
+        ...props,
+        name: groupName ?? name,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "summary",
+            {
+              className: cn.cn(AccordionItem_module["accordion-item__summary"], focus_module.default.focusableInset),
+              children: [
+                image && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn.cn(
+                      AccordionItem_module["accordion-item__image"],
+                      resolvedImageSize && AccordionItem_module[`accordion-item__image--${resolvedImageSize}`]
+                    ),
+                    children: image
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: AccordionItem_module["accordion-item__label"], children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, { className: AccordionItem_module["accordion-item__chevron"], "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: AccordionItem_module["accordion-item__content"], children })
+        ]
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+exports.AccordionItem = AccordionItem;
+//# sourceMappingURL=AccordionItem.cjs.map

package/dist/components/AccordionItem/AccordionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.cjs","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(\n    function AccordionItem(\n        { label, variant: variantProp, image, imageSize, children, className, name, ...props },\n        ref,\n    ) {\n        const { variant: contextVariant, groupName } = useAccordionContext();\n        const variant = variantProp ?? contextVariant;\n        const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n        return (\n            <details\n                ref={ref}\n                className={cn(\n                    styles['accordion-item'],\n                    styles[`accordion-item--${variant}`],\n                    variant === 'box' && elevationStyles.elevationLow,\n                    className,\n                )}\n                {...props}\n                name={groupName ?? name}\n            >\n                <summary\n                    className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}\n                >\n                    {image && (\n                        <span\n                            className={cn(\n                                styles['accordion-item__image'],\n                                resolvedImageSize &&\n                                    styles[`accordion-item__image--${resolvedImageSize}`],\n                            )}\n                        >\n                            {image}\n                        </span>\n                    )}\n                    <span className={styles['accordion-item__label']}>{label}</span>\n                    <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n                </summary>\n                <div className={styles['accordion-item__content']}>{children}</div>\n            </details>\n        );\n    },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n"],"names":["forwardRef","AccordionItem","useAccordionContext","jsxs","cn","styles","elevationStyles","focusStyles","jsx","ChevronDown"],"mappings":";;;;;;;;;;AASO,MAAM,gBAAgBA,MAAAA;AAAAA,EACzB,SAASC,eACL,EAAE,OAAO,SAAS,aAAa,OAAO,WAAW,UAAU,WAAW,MAAM,GAAG,MAAA,GAC/E,KACF;AACE,UAAM,EAAE,SAAS,gBAAgB,UAAA,IAAcC,gBAAAA,oBAAA;AAC/C,UAAM,UAAU,eAAe;AAC/B,UAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,WACIC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACPC,qBAAO,gBAAgB;AAAA,UACvBA,qBAAO,mBAAmB,OAAO,EAAE;AAAA,UACnC,YAAY,SAASC,iBAAAA,QAAgB;AAAA,UACrC;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QACJ,MAAM,aAAa;AAAA,QAEnB,UAAA;AAAA,UAAAH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWC,GAAAA,GAAGC,qBAAO,yBAAyB,GAAGE,aAAAA,QAAY,cAAc;AAAA,cAE1E,UAAA;AAAA,gBAAA,SACGC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,WAAWJ,GAAAA;AAAAA,sBACPC,qBAAO,uBAAuB;AAAA,sBAC9B,qBACIA,qBAAO,0BAA0B,iBAAiB,EAAE;AAAA,oBAAA;AAAA,oBAG3D,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,+CAGR,QAAA,EAAK,WAAWA,qBAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,+CACxDI,MAAAA,aAAA,EAAY,WAAWJ,qBAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,yCAEjF,OAAA,EAAI,WAAWA,qBAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzE;AACJ;AAEA,cAAc,cAAc;;"}

package/dist/components/AccordionItem/AccordionItem.css

@@ -0,0 +1,128 @@
+@layer dna-design-system {/**
+ * AccordionItem Component Styles
+ *
+ * Uses native <details> element for expand/collapse behavior.
+ * Two variants: box (elevated card) and panel (flat bordered).
+ */
+
+/* === Box variant === */
+
+._accordion-item--box_1724u_10 {
+    background: var(--colors-semantic-surface-base);
+    color: var(--colors-semantic-foreground-default);
+}
+
+/* === Panel variant === */
+/* Inherits text color from parent context intentionally */
+
+._accordion-item--panel_1724u_18 {
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--colors-semantic-border-neutral-mid);
+}
+
+/* === Summary (clickable header) === */
+
+._accordion-item__summary_1724u_24 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-lg);
+    padding: var(--spacing-ui-md) var(--spacing-ui-lg);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    border-radius: var(--radius-semantic-md);
+}
+
+/* Remove default marker in all browsers */
+._accordion-item__summary_1724u_24::-webkit-details-marker,
+._accordion-item__summary_1724u_24::marker {
+    display: none;
+}
+
+/* === Image === */
+
+._accordion-item__image_1724u_43 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    overflow: hidden;
+
+    & > img,
+    & > svg {
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+    }
+}
+
+/* === Image size variants === */
+
+._accordion-item__image--sm_1724u_60 {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+._accordion-item__image--md_1724u_65 {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+._accordion-item__image--lg_1724u_70 {
+    width: 5rem;
+    height: 5rem;
+}
+
+/* === Label === */
+
+._accordion-item__label_1724u_77 {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 700;
+}
+
+/* === Chevron icon === */
+
+._accordion-item__chevron_1724u_85 {
+    flex: 0 0 auto;
+    width: 1.5rem;
+    height: 1.5rem;
+    transition: transform 0.2s ease-in-out;
+}
+
+._accordion-item_1724u_10[open] > ._accordion-item__summary_1724u_24 ._accordion-item__chevron_1724u_85 {
+    transform: rotate(180deg);
+}
+
+/* === Content area === */
+
+._accordion-item__content_1724u_98 {
+    padding: 0 var(--spacing-ui-lg) var(--spacing-ui-lg);
+
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* === Animation === */
+._accordion-item_1724u_10::details-content {
+    display: block;
+    block-size: 0;
+    opacity: 0;
+    overflow: hidden;
+    @supports (interpolate-size: allow-keywords) {
+        transition-property: block-size, content-visibility, opacity;
+        transition-duration: 0.2s;
+        transition-timing-function: ease-in-out;
+        transition-behavior: allow-discrete;
+    }
+}
+._accordion-item_1724u_10[open]::details-content {
+    /* Fallback for browsers that don't support calc-size() function */
+    block-size: auto;
+    opacity: 1;
+    @supports (interpolate-size: allow-keywords) {
+        /* calc-size() function allows transition to height: auto; */
+        block-size: calc-size(auto, size);
+    }
+}
+}

package/dist/components/AccordionItem/AccordionItem.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,mHA0CzB,CAAC"}

package/dist/components/AccordionItem/AccordionItem.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDown } from "@dnanpm/icons";
+import { useAccordionContext } from "../Accordion/Accordion.utils.js";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./AccordionItem.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const AccordionItem = forwardRef(
+  function AccordionItem2({ label, variant: variantProp, image, imageSize, children, className, name, ...props }, ref) {
+    const { variant: contextVariant, groupName } = useAccordionContext();
+    const variant = variantProp ?? contextVariant;
+    const resolvedImageSize = image ? imageSize ?? "md" : void 0;
+    return /* @__PURE__ */ jsxs(
+      "details",
+      {
+        ref,
+        className: cn(
+          styles["accordion-item"],
+          styles[`accordion-item--${variant}`],
+          variant === "box" && elevationStyles.elevationLow,
+          className
+        ),
+        ...props,
+        name: groupName ?? name,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "summary",
+            {
+              className: cn(styles["accordion-item__summary"], focusStyles.focusableInset),
+              children: [
+                image && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      styles["accordion-item__image"],
+                      resolvedImageSize && styles[`accordion-item__image--${resolvedImageSize}`]
+                    ),
+                    children: image
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: styles["accordion-item__label"], children: label }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: styles["accordion-item__chevron"], "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles["accordion-item__content"], children })
+        ]
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+export {
+  AccordionItem
+};
+//# sourceMappingURL=AccordionItem.js.map

package/dist/components/AccordionItem/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sources":["../../../src/components/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ChevronDown } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { useAccordionContext } from '../Accordion/Accordion.utils';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './AccordionItem.module.css';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(\n    function AccordionItem(\n        { label, variant: variantProp, image, imageSize, children, className, name, ...props },\n        ref,\n    ) {\n        const { variant: contextVariant, groupName } = useAccordionContext();\n        const variant = variantProp ?? contextVariant;\n        const resolvedImageSize = image ? (imageSize ?? 'md') : undefined;\n\n        return (\n            <details\n                ref={ref}\n                className={cn(\n                    styles['accordion-item'],\n                    styles[`accordion-item--${variant}`],\n                    variant === 'box' && elevationStyles.elevationLow,\n                    className,\n                )}\n                {...props}\n                name={groupName ?? name}\n            >\n                <summary\n                    className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}\n                >\n                    {image && (\n                        <span\n                            className={cn(\n                                styles['accordion-item__image'],\n                                resolvedImageSize &&\n                                    styles[`accordion-item__image--${resolvedImageSize}`],\n                            )}\n                        >\n                            {image}\n                        </span>\n                    )}\n                    <span className={styles['accordion-item__label']}>{label}</span>\n                    <ChevronDown className={styles['accordion-item__chevron']} aria-hidden=\"true\" />\n                </summary>\n                <div className={styles['accordion-item__content']}>{children}</div>\n            </details>\n        );\n    },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n"],"names":["AccordionItem"],"mappings":";;;;;;;;AASO,MAAM,gBAAgB;AAAA,EACzB,SAASA,eACL,EAAE,OAAO,SAAS,aAAa,OAAO,WAAW,UAAU,WAAW,MAAM,GAAG,MAAA,GAC/E,KACF;AACE,UAAM,EAAE,SAAS,gBAAgB,UAAA,IAAc,oBAAA;AAC/C,UAAM,UAAU,eAAe;AAC/B,UAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,WAAW;AAAA,UACP,OAAO,gBAAgB;AAAA,UACvB,OAAO,mBAAmB,OAAO,EAAE;AAAA,UACnC,YAAY,SAAS,gBAAgB;AAAA,UACrC;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QACJ,MAAM,aAAa;AAAA,QAEnB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,GAAG,OAAO,yBAAyB,GAAG,YAAY,cAAc;AAAA,cAE1E,UAAA;AAAA,gBAAA,SACG;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,WAAW;AAAA,sBACP,OAAO,uBAAuB;AAAA,sBAC9B,qBACI,OAAO,0BAA0B,iBAAiB,EAAE;AAAA,oBAAA;AAAA,oBAG3D,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,oCAGR,QAAA,EAAK,WAAW,OAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,oCACxD,aAAA,EAAY,WAAW,OAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAEjF,OAAA,EAAI,WAAW,OAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzE;AACJ;AAEA,cAAc,cAAc;"}

package/dist/components/AccordionItem/AccordionItem.module.css.cjs

@@ -0,0 +1,17 @@
+require('./AccordionItem.css');
+"use strict";
+const styles = {
+  "accordion-item--box": "_accordion-item--box_1724u_10",
+  "accordion-item--panel": "_accordion-item--panel_1724u_18",
+  "accordion-item__summary": "_accordion-item__summary_1724u_24",
+  "accordion-item__image": "_accordion-item__image_1724u_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_1724u_60",
+  "accordion-item__image--md": "_accordion-item__image--md_1724u_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_1724u_70",
+  "accordion-item__label": "_accordion-item__label_1724u_77",
+  "accordion-item__chevron": "_accordion-item__chevron_1724u_85",
+  "accordion-item": "_accordion-item_1724u_10",
+  "accordion-item__content": "_accordion-item__content_1724u_98"
+};
+module.exports = styles;
+//# sourceMappingURL=AccordionItem.module.css.cjs.map

package/dist/components/AccordionItem/AccordionItem.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/AccordionItem/AccordionItem.module.css.js

@@ -0,0 +1,18 @@
+import './AccordionItem.css';
+const styles = {
+  "accordion-item--box": "_accordion-item--box_1724u_10",
+  "accordion-item--panel": "_accordion-item--panel_1724u_18",
+  "accordion-item__summary": "_accordion-item__summary_1724u_24",
+  "accordion-item__image": "_accordion-item__image_1724u_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_1724u_60",
+  "accordion-item__image--md": "_accordion-item__image--md_1724u_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_1724u_70",
+  "accordion-item__label": "_accordion-item__label_1724u_77",
+  "accordion-item__chevron": "_accordion-item__chevron_1724u_85",
+  "accordion-item": "_accordion-item_1724u_10",
+  "accordion-item__content": "_accordion-item__content_1724u_98"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=AccordionItem.module.css.js.map

package/dist/components/AccordionItem/AccordionItem.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type ImageSize = 'sm' | 'md' | 'lg';
+export interface AccordionItemProps extends ComponentPropsWithoutRef<'details'> {
+    /**
+     * The visible label text displayed in the summary row.
+     */
+    readonly label: string;
+    /**
+     * Visual style variant.
+     * - `box`: elevated card with rounded corners and full border
+     * - `panel`: flat style with bottom border only
+     * @default 'box'
+     */
+    readonly variant?: 'box' | 'panel';
+    /**
+     * Optional image or icon element rendered before the label in the summary row.
+     */
+    readonly image?: ReactNode;
+    /**
+     * Size of the square image area in the summary row.
+     * Defaults to `md` when `image` is provided and `imageSize` is not set.
+     * - `sm`: 24×24 px
+     * - `md`: 40×40 px
+     * - `lg`: 80×80 px
+     */
+    readonly imageSize?: ImageSize;
+    /**
+     * The expandable content area. Can contain any React elements.
+     */
+    readonly children: ReactNode;
+}
+//# sourceMappingURL=AccordionItem.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.types.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem/AccordionItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,SAAS,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC"}