@dnanpm/ui-components 0.0.5 → 0.2.0

package/README.md

@@ -17,7 +17,7 @@ React component library for the DNA Design System. Built with TypeScript, CSS Mo
 - Themed with design tokens from `@dnanpm/design-tokens`
 - Supports server-side rendering and tree-shaking
 - Comprehensive documentation and examples
-- Single CSS file for easier consumption
+- One-line CSS setup via `styles.css`
 - Selective exports for optimal bundle sizes
 
 ## Installation
@@ -29,54 +29,23 @@ pnpm add @dnanpm/ui-components @dnanpm/design-tokens
 ## Usage
 
 ```tsx
-import { Box, Button, Dialog, Tooltip } 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>
-
-            <Tooltip content="Additional context lives behind the same DNA API.">
-                <Button aria-label="Show more information" variant="secondary">
-                    Hover me
-                </Button>
-            </Tooltip>
-
-            <Dialog
-                trigger={<Button>Open dialog</Button>}
-                title="Project details"
-                description="Implementation stays internal to the design system."
-                footer={<Button>Done</Button>}
-            >
-                <p>
-                    Consumers use the same component contract regardless of what powers it
-                    underneath.
-                </p>
-            </Dialog>
-        </div>
-    );
+    return <Breadcrumb items={items} />;
 }
 ```
 
 ## Implementation Model
 
-This package now supports two contributor paths under one public API surface:
-
-- `Plain React` components, written entirely in-house.
-- `Base UI` components, where the public DNA API is built on top of a headless library primitive directly in the component file.
-
-Consumers should not need to know which path a component uses. Public names, props, and behavior belong to DNA; implementation choices stay internal.
-
-Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
+Components are written as plain React function components with CSS Modules and BEM naming. Design tokens are available as CSS custom properties: `var(--color-semantic-foreground-default)`, `var(--spacing-ui-md)`, etc.
 
 ### Tree-shaking
 
@@ -84,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,32 @@
+"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 = ({
+  variant = "box",
+  autoCollapsible = false,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  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
+    }
+  ) });
+};
+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 { 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 = ({\n    variant = 'box',\n    autoCollapsible = false,\n    children,\n    className,\n    ref,\n    ...props\n}: AccordionProps) => {\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"],"names":["useId","useMemo","jsx","AccordionContext","cn","styles"],"mappings":";;;;;;;AAMO,MAAM,YAAY,CAAC;AAAA,EACtB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAsB;AAClB,QAAM,YAAYA,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;;"}

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: ({ variant, autoCollapsible, children, className, ref, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//# 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,GAAI,kEAOvB,cAAc,4CAkBhB,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { 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 = ({
+  variant = "box",
+  autoCollapsible = false,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  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
+    }
+  ) });
+};
+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 { 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 = ({\n    variant = 'box',\n    autoCollapsible = false,\n    children,\n    className,\n    ref,\n    ...props\n}: AccordionProps) => {\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"],"names":[],"mappings":";;;;;AAMO,MAAM,YAAY,CAAC;AAAA,EACtB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAsB;AAClB,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;"}

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 { ComponentPropsWithRef, ReactNode } from 'react';
+export interface AccordionProps extends ComponentPropsWithRef<'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,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAChE;;;;;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 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 = ({
+  label,
+  variant: variantProp,
+  image,
+  imageSize,
+  children,
+  className,
+  name,
+  ref,
+  ...props
+}) => {
+  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 })
+      ]
+    }
+  );
+};
+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 { 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 = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\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 className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\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"],"names":["useAccordionContext","jsxs","cn","styles","elevationStyles","focusStyles","jsx","ChevronDown"],"mappings":";;;;;;;;;AAQO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAcA,gBAAAA,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,qBAAO,gBAAgB;AAAA,QACvBA,qBAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAASC,iBAAAA,QAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACJ,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAAH,2BAAAA,KAAC,WAAA,EAAQ,WAAWC,MAAGC,qBAAO,yBAAyB,GAAGE,aAAAA,QAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACGC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWJ,GAAAA;AAAAA,gBACPC,qBAAO,uBAAuB;AAAA,gBAC9B,qBACIA,qBAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,yCAGR,QAAA,EAAK,WAAWA,qBAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,yCACxDI,MAAAA,aAAA,EAAY,WAAWJ,qBAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,uCACC,OAAA,EAAI,WAAWA,qBAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;;"}

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_8bxcn_10 {
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+}
+
+/* === Panel variant === */
+/* Inherits text color from parent context intentionally */
+
+._accordion-item--panel_8bxcn_18 {
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+}
+
+/* === Summary (clickable header) === */
+
+._accordion-item__summary_8bxcn_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_8bxcn_24::-webkit-details-marker,
+._accordion-item__summary_8bxcn_24::marker {
+    display: none;
+}
+
+/* === Image === */
+
+._accordion-item__image_8bxcn_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_8bxcn_60 {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+._accordion-item__image--md_8bxcn_65 {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+._accordion-item__image--lg_8bxcn_70 {
+    width: 5rem;
+    height: 5rem;
+}
+
+/* === Label === */
+
+._accordion-item__label_8bxcn_77 {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: var(--typography-font-weight-bold);
+}
+
+/* === Chevron icon === */
+
+._accordion-item__chevron_8bxcn_85 {
+    flex: 0 0 auto;
+    width: 1.5rem;
+    height: 1.5rem;
+    transition: transform 0.2s ease-in-out;
+}
+
+._accordion-item_8bxcn_10[open] > ._accordion-item__summary_8bxcn_24 ._accordion-item__chevron_8bxcn_85 {
+    transform: rotate(180deg);
+}
+
+/* === Content area === */
+
+._accordion-item__content_8bxcn_98 {
+    padding: 0 var(--spacing-ui-lg) var(--spacing-ui-lg);
+
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* === Animation === */
+._accordion-item_8bxcn_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_8bxcn_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: ({ label, variant: variantProp, image, imageSize, children, className, name, ref, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+//# 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":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,GAAI,6FAU3B,kBAAkB,4CAmCpB,CAAC"}

package/dist/components/AccordionItem/AccordionItem.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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 = ({
+  label,
+  variant: variantProp,
+  image,
+  imageSize,
+  children,
+  className,
+  name,
+  ref,
+  ...props
+}) => {
+  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 })
+      ]
+    }
+  );
+};
+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 { 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 = ({\n    label,\n    variant: variantProp,\n    image,\n    imageSize,\n    children,\n    className,\n    name,\n    ref,\n    ...props\n}: AccordionItemProps) => {\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 className={cn(styles['accordion-item__summary'], focusStyles.focusableInset)}>\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"],"names":[],"mappings":";;;;;;;AAQO,MAAM,gBAAgB,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA0B;AACtB,QAAM,EAAE,SAAS,gBAAgB,UAAA,IAAc,oBAAA;AAC/C,QAAM,UAAU,eAAe;AAC/B,QAAM,oBAAoB,QAAS,aAAa,OAAQ;AAExD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,OAAO,gBAAgB;AAAA,QACvB,OAAO,mBAAmB,OAAO,EAAE;AAAA,QACnC,YAAY,SAAS,gBAAgB;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MACJ,MAAM,aAAa;AAAA,MAEnB,UAAA;AAAA,QAAA,qBAAC,WAAA,EAAQ,WAAW,GAAG,OAAO,yBAAyB,GAAG,YAAY,cAAc,GAC/E,UAAA;AAAA,UAAA,SACG;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW;AAAA,gBACP,OAAO,uBAAuB;AAAA,gBAC9B,qBACI,OAAO,0BAA0B,iBAAiB,EAAE;AAAA,cAAA;AAAA,cAG3D,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAGR,QAAA,EAAK,WAAW,OAAO,uBAAuB,GAAI,UAAA,OAAM;AAAA,8BACxD,aAAA,EAAY,WAAW,OAAO,yBAAyB,GAAG,eAAY,OAAA,CAAO;AAAA,QAAA,GAClF;AAAA,4BACC,OAAA,EAAI,WAAW,OAAO,yBAAyB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;"}

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_8bxcn_10",
+  "accordion-item--panel": "_accordion-item--panel_8bxcn_18",
+  "accordion-item__summary": "_accordion-item__summary_8bxcn_24",
+  "accordion-item__image": "_accordion-item__image_8bxcn_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_8bxcn_60",
+  "accordion-item__image--md": "_accordion-item__image--md_8bxcn_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_8bxcn_70",
+  "accordion-item__label": "_accordion-item__label_8bxcn_77",
+  "accordion-item__chevron": "_accordion-item__chevron_8bxcn_85",
+  "accordion-item": "_accordion-item_8bxcn_10",
+  "accordion-item__content": "_accordion-item__content_8bxcn_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_8bxcn_10",
+  "accordion-item--panel": "_accordion-item--panel_8bxcn_18",
+  "accordion-item__summary": "_accordion-item__summary_8bxcn_24",
+  "accordion-item__image": "_accordion-item__image_8bxcn_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_8bxcn_60",
+  "accordion-item__image--md": "_accordion-item__image--md_8bxcn_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_8bxcn_70",
+  "accordion-item__label": "_accordion-item__label_8bxcn_77",
+  "accordion-item__chevron": "_accordion-item__chevron_8bxcn_85",
+  "accordion-item": "_accordion-item_8bxcn_10",
+  "accordion-item__content": "_accordion-item__content_8bxcn_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 { ComponentPropsWithRef, ReactNode } from 'react';
+export type ImageSize = 'sm' | 'md' | 'lg';
+export interface AccordionItemProps extends ComponentPropsWithRef<'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