@chayns-ui/core 0.2.1 → 0.3.0

package/README.md

@@ -38,8 +38,11 @@ import '@chayns-ui/core/button.css';
 |---|---|
 | `Button`, `IconButton` | `@chayns-ui/core/button.css` |
 | `Card` | `@chayns-ui/core/card.css` |
+| `Avatar`, `AvatarGroup` | `@chayns-ui/core/avatar.css` |
 | `List`, `ListItem` | `@chayns-ui/core/list.css` |
 | `Accordion`, `AccordionGroup` | `@chayns-ui/core/accordion.css` |
+| `Popup`, `PopupList` | `@chayns-ui/core/popup.css` |
+| `SplitButton` | `@chayns-ui/core/split-button.css` |
 
 Alternativ lädt `@chayns-ui/core/styles.css` das gebündelte CSS aller Komponenten.
 

package/dist/avatar.css

@@ -0,0 +1,104 @@
+@layer chayns.components {
+  .chayns-avatar {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--avatar);
+    block-size: var(--avatar);
+    overflow: visible;
+    border-radius: 50%;
+    background: var(--accent);
+    color: var(--on-accent);
+    font-size: var(--fs-body);
+    font-weight: 600;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .chayns-avatar--tone-0 {
+    background: var(--accent);
+  }
+
+  .chayns-avatar--tone-1 {
+    background: var(--accent-hover);
+  }
+
+  .chayns-avatar--tone-2 {
+    background: var(--accent-active);
+  }
+
+  .chayns-avatar--small {
+    inline-size: var(--avatar-sm);
+    block-size: var(--avatar-sm);
+    font-size: var(--fs-meta);
+  }
+
+  .chayns-avatar__image {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+
+  .chayns-avatar__initials {
+    display: block;
+  }
+
+  .chayns-avatar__badge {
+    position: absolute;
+    inset-inline-end: -2px;
+    inset-block-end: -2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--k16);
+    block-size: var(--k16);
+    border: 2px solid var(--surface);
+    border-radius: 50%;
+    background: var(--surface);
+    color: var(--accent);
+    font-size: var(--fs-micro);
+    line-height: 1;
+  }
+
+  .chayns-avatar-group {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .chayns-avatar-group > .chayns-avatar,
+  .chayns-avatar-group__overflow {
+    position: relative;
+    margin-inline-start: calc(-1 * var(--k8));
+    border: 2px solid var(--surface);
+  }
+
+  .chayns-avatar-group > :first-child {
+    margin-inline-start: 0;
+  }
+
+  .chayns-avatar-group__overflow {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--avatar);
+    block-size: var(--avatar);
+    border-radius: 50%;
+    background: var(--surface-alt);
+    color: var(--accent);
+    font-size: var(--fs-meta);
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .chayns-avatar-group--small .chayns-avatar-group__overflow {
+    inline-size: var(--avatar-sm);
+    block-size: var(--avatar-sm);
+    font-size: var(--fs-micro);
+  }
+}

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

@@ -1,4 +1,4 @@
 import type { AccordionProps } from './Accordion.types.js';
-declare function Accordion({ children, className, defaultOpen, disabled, id, onOpenChange, open, title, }: AccordionProps): import("react").JSX.Element;
+declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, title, }: AccordionProps) => import("react").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,SAAS,EACT,WAAmB,EACnB,QAAgB,EAChB,EAAE,EACF,YAAY,EACZ,IAAI,EACJ,KAAK,GACN,EAAE,cAAc,+BA8EhB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,SAAS,GAAI,gFAShB,cAAc,gCA8EhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/accordion/Accordion.js

@@ -2,7 +2,7 @@ import { AccordionDepthContext, AccordionGroupContext } from "./AccordionContext
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useId, useState } from "react";
 //#region src/components/accordion/Accordion.tsx
-function Accordion({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, title }) {
+var Accordion = ({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, title }) => {
 	const depth = useContext(AccordionDepthContext);
 	const group = useContext(AccordionGroupContext);
 	const generatedId = useId();
@@ -65,7 +65,7 @@ function Accordion({ children, className, defaultOpen = false, disabled = false,
 			})
 		})]
 	});
-}
+};
 //#endregion
 export { Accordion as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { useContext, useId, useState } from 'react';\n\nimport { AccordionDepthContext, AccordionGroupContext } from './AccordionContext.js';\nimport type { AccordionProps } from './Accordion.types.js';\n\nfunction Accordion({\n  children,\n  className,\n  defaultOpen = false,\n  disabled = false,\n  id,\n  onOpenChange,\n  open,\n  title,\n}: AccordionProps) {\n  const depth = useContext(AccordionDepthContext);\n  const group = useContext(AccordionGroupContext);\n  const generatedId = useId();\n  const baseId = id ?? generatedId;\n  const headerId = `${baseId}-header`;\n  const panelId = `${baseId}-panel`;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  let isOpen: boolean;\n  if (group) {\n    isOpen = group.isOpen(baseId);\n  } else if (open !== undefined) {\n    isOpen = open;\n  } else {\n    isOpen = uncontrolledOpen;\n  }\n\n  const handleToggle = () => {\n    if (group) {\n      group.toggle(baseId);\n      return;\n    }\n\n    const nextOpen = !isOpen;\n    if (open === undefined) setUncontrolledOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n  };\n\n  const grouped = group !== null;\n  const wrapped = !grouped && depth > 0;\n  const variantClassName = grouped\n    ? 'chayns-accordion--grouped'\n    : wrapped\n      ? 'chayns-accordion--wrapped'\n      : 'chayns-accordion--standalone';\n\n  const rootClassName = [\n    'chayns-accordion',\n    variantClassName,\n    isOpen ? 'chayns-accordion--open' : null,\n    disabled ? 'chayns-accordion--disabled' : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClassName}>\n      <button\n        aria-controls={panelId}\n        aria-expanded={isOpen}\n        className=\"chayns-accordion__header\"\n        disabled={disabled}\n        id={headerId}\n        onClick={handleToggle}\n        type=\"button\"\n      >\n        <i aria-hidden=\"true\" className=\"chayns-accordion__chevron far fa-chevron-right\" />\n        <span className=\"chayns-accordion__title\">{title}</span>\n      </button>\n      <div\n        aria-labelledby={headerId}\n        className=\"chayns-accordion__panel\"\n        id={panelId}\n        role=\"region\"\n      >\n        <div className=\"chayns-accordion__inner\">\n          <div className=\"chayns-accordion__content\">\n            <AccordionDepthContext.Provider value={depth + 1}>\n              {children}\n            </AccordionDepthContext.Provider>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":";;;;AAKA,SAAS,UAAU,EACjB,UACA,WACA,cAAc,OACd,WAAW,OACX,IACA,cACA,MACA,SACiB;CACjB,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,UAAU,GAAG,OAAO;CAE1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CAEpE,IAAI;CACJ,IAAI,OACF,SAAS,MAAM,OAAO,MAAM;MACvB,IAAI,SAAS,KAAA,GAClB,SAAS;MAET,SAAS;CAGX,MAAM,qBAAqB;EACzB,IAAI,OAAO;GACT,MAAM,OAAO,MAAM;GACnB;EACF;EAEA,MAAM,WAAW,CAAC;EAClB,IAAI,SAAS,KAAA,GAAW,oBAAoB,QAAQ;EACpD,eAAe,QAAQ;CACzB;CAEA,MAAM,UAAU,UAAU;CAQ1B,MAAM,gBAAgB;EACpB;EAPuB,UACrB,8BAFY,CAAC,WAAW,QAAQ,IAI9B,8BACA;EAKJ,SAAS,2BAA2B;EACpC,WAAW,+BAA+B;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,qBAAC,UAAD;GACE,iBAAe;GACf,iBAAe;GACf,WAAU;GACA;GACV,IAAI;GACJ,SAAS;GACT,MAAK;GAPP,UAAA,CASE,oBAAC,KAAD;IAAG,eAAY;IAAO,WAAU;GAAkD,CAAA,GAClF,oBAAC,QAAD;IAAM,WAAU;IAA2B,UAAA;GAAY,CAAA,CACjD;EACR,CAAA,GAAA,oBAAC,OAAD;GACE,mBAAiB;GACjB,WAAU;GACV,IAAI;GACJ,MAAK;GAEL,UAAA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,sBAAsB,UAAvB;MAAgC,OAAO,QAAQ;MAC5C;KAC6B,CAAA;IAC7B,CAAA;GACF,CAAA;EACF,CAAA,CACF;;AAET"}
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { useContext, useId, useState } from 'react';\n\nimport { AccordionDepthContext, AccordionGroupContext } from './AccordionContext.js';\nimport type { AccordionProps } from './Accordion.types.js';\n\nconst Accordion = ({\n  children,\n  className,\n  defaultOpen = false,\n  disabled = false,\n  id,\n  onOpenChange,\n  open,\n  title,\n}: AccordionProps) => {\n  const depth = useContext(AccordionDepthContext);\n  const group = useContext(AccordionGroupContext);\n  const generatedId = useId();\n  const baseId = id ?? generatedId;\n  const headerId = `${baseId}-header`;\n  const panelId = `${baseId}-panel`;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  let isOpen: boolean;\n  if (group) {\n    isOpen = group.isOpen(baseId);\n  } else if (open !== undefined) {\n    isOpen = open;\n  } else {\n    isOpen = uncontrolledOpen;\n  }\n\n  const handleToggle = () => {\n    if (group) {\n      group.toggle(baseId);\n      return;\n    }\n\n    const nextOpen = !isOpen;\n    if (open === undefined) setUncontrolledOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n  };\n\n  const grouped = group !== null;\n  const wrapped = !grouped && depth > 0;\n  const variantClassName = grouped\n    ? 'chayns-accordion--grouped'\n    : wrapped\n      ? 'chayns-accordion--wrapped'\n      : 'chayns-accordion--standalone';\n\n  const rootClassName = [\n    'chayns-accordion',\n    variantClassName,\n    isOpen ? 'chayns-accordion--open' : null,\n    disabled ? 'chayns-accordion--disabled' : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClassName}>\n      <button\n        aria-controls={panelId}\n        aria-expanded={isOpen}\n        className=\"chayns-accordion__header\"\n        disabled={disabled}\n        id={headerId}\n        onClick={handleToggle}\n        type=\"button\"\n      >\n        <i aria-hidden=\"true\" className=\"chayns-accordion__chevron far fa-chevron-right\" />\n        <span className=\"chayns-accordion__title\">{title}</span>\n      </button>\n      <div\n        aria-labelledby={headerId}\n        className=\"chayns-accordion__panel\"\n        id={panelId}\n        role=\"region\"\n      >\n        <div className=\"chayns-accordion__inner\">\n          <div className=\"chayns-accordion__content\">\n            <AccordionDepthContext.Provider value={depth + 1}>\n              {children}\n            </AccordionDepthContext.Provider>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Accordion;\n"],"mappings":";;;;AAKA,IAAM,aAAa,EACjB,UACA,WACA,cAAc,OACd,WAAW,OACX,IACA,cACA,MACA,YACoB;CACpB,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,UAAU,GAAG,OAAO;CAE1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CAEpE,IAAI;CACJ,IAAI,OACF,SAAS,MAAM,OAAO,MAAM;MACvB,IAAI,SAAS,KAAA,GAClB,SAAS;MAET,SAAS;CAGX,MAAM,qBAAqB;EACzB,IAAI,OAAO;GACT,MAAM,OAAO,MAAM;GACnB;EACF;EAEA,MAAM,WAAW,CAAC;EAClB,IAAI,SAAS,KAAA,GAAW,oBAAoB,QAAQ;EACpD,eAAe,QAAQ;CACzB;CAEA,MAAM,UAAU,UAAU;CAQ1B,MAAM,gBAAgB;EACpB;EAPuB,UACrB,8BAFY,CAAC,WAAW,QAAQ,IAI9B,8BACA;EAKJ,SAAS,2BAA2B;EACpC,WAAW,+BAA+B;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,qBAAC,UAAD;GACE,iBAAe;GACf,iBAAe;GACf,WAAU;GACA;GACV,IAAI;GACJ,SAAS;GACT,MAAK;GAPP,UAAA,CASE,oBAAC,KAAD;IAAG,eAAY;IAAO,WAAU;GAAkD,CAAA,GAClF,oBAAC,QAAD;IAAM,WAAU;IAA2B,UAAA;GAAY,CAAA,CACjD;EACR,CAAA,GAAA,oBAAC,OAAD;GACE,mBAAiB;GACjB,WAAU;GACV,IAAI;GACJ,MAAK;GAEL,UAAA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,sBAAsB,UAAvB;MAAgC,OAAO,QAAQ;MAC5C;KAC6B,CAAA;IAC7B,CAAA;GACF,CAAA;EACF,CAAA,CACF;;AAET"}

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

@@ -1,37 +1,82 @@
 import type { ReactNode } from 'react';
-/** Props for a single disclosure accordion. */
+/**
+ * @description Props for a single disclosure accordion: a header button that
+ * expands and collapses an associated content region. Nesting an `Accordion`
+ * inside another `Accordion`'s content is automatically detected via React
+ * context and rendered as the "Wrapped" presentation — there is no separate
+ * component or prop for that case.
+ */
 export interface AccordionProps {
-    /** Visible, localized header label used as the accessible name. */
+    /**
+     * @description Visible, localized header label used as the accordion's
+     * accessible name.
+     */
     title: ReactNode;
-    /** Panel content revealed when the accordion is open. */
+    /**
+     * @description Panel content revealed when the accordion is open.
+     */
     children?: ReactNode;
-    /** Controlled open state. Ignored when inside an AccordionGroup. */
+    /**
+     * @description Controlled open state. Ignored when the accordion is
+     * rendered inside an `AccordionGroup`, which owns exclusivity instead.
+     */
     open?: boolean;
-    /** Uncontrolled initial open state. Ignored when inside an AccordionGroup. */
+    /**
+     * @description Uncontrolled initial open state. Ignored when inside an
+     * `AccordionGroup`.
+     * @default false
+     */
     defaultOpen?: boolean;
-    /** Called with the next open state on user toggle. */
+    /**
+     * @description Called with the next open state on user toggle, for both
+     * the controlled and uncontrolled usage.
+     */
     onOpenChange?: (open: boolean) => void;
-    /** Disables the header trigger. */
+    /**
+     * @description Disables the header trigger, preventing toggling.
+     * @default false
+     */
     disabled?: boolean;
     /**
-     * Stable id used to wire header and panel and, inside an AccordionGroup, to
-     * identify the item. Falls back to a generated id.
+     * @description Stable id used to wire the header and panel via ARIA and,
+     * inside an `AccordionGroup`, to identify this item. Falls back to a
+     * generated id when omitted.
      */
     id?: string;
-    /** Additional class names on the accordion root element. */
+    /**
+     * @description Additional class names appended to the accordion root
+     * element.
+     */
     className?: string;
 }
-/** Props for a group of mutually exclusive accordions. */
+/**
+ * @description Props for a group of mutually exclusive accordions: at most
+ * one child `Accordion` is open at a time, and the group renders its
+ * children as one joined surface.
+ */
 export interface AccordionGroupProps {
-    /** Accordion items belonging to the group. */
+    /**
+     * @description `Accordion` items belonging to the group.
+     */
     children?: ReactNode;
-    /** Controlled id of the currently open item, or null when all are closed. */
+    /**
+     * @description Controlled id of the currently open item, or `null` when
+     * all items are closed.
+     */
     openId?: string | null;
-    /** Uncontrolled id of the initially open item. */
+    /**
+     * @description Uncontrolled id of the initially open item.
+     * @default null
+     */
     defaultOpenId?: string | null;
-    /** Called with the next open item id, or null when the group closes. */
+    /**
+     * @description Called with the next open item id, or `null` when the group
+     * closes entirely, for both the controlled and uncontrolled usage.
+     */
     onOpenChange?: (openId: string | null) => void;
-    /** Additional class names on the group root element. */
+    /**
+     * @description Additional class names appended to the group root element.
+     */
     className?: string;
 }
 //# sourceMappingURL=Accordion.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,mEAAmE;IACnE,KAAK,EAAE,SAAS,CAAC;IAEjB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEvB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE/C,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/accordion-group/AccordionGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionGroupProps } from '../accordion/Accordion.types.js';
+declare const AccordionGroup: ({ children, className, defaultOpenId, onOpenChange, openId, }: AccordionGroupProps) => import("react").JSX.Element;
+export default AccordionGroup;
+//# sourceMappingURL=AccordionGroup.d.ts.map

package/dist/components/accordion-group/AccordionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-group/AccordionGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAE3E,QAAA,MAAM,cAAc,GAAI,+DAMrB,mBAAmB,gCA6BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/{accordion → accordion-group}/AccordionGroup.js

@@ -1,8 +1,8 @@
-import { AccordionGroupContext } from "./AccordionContext.js";
+import { AccordionGroupContext } from "../accordion/AccordionContext.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
-//#region src/components/accordion/AccordionGroup.tsx
-function AccordionGroup({ children, className, defaultOpenId = null, onOpenChange, openId }) {
+//#region src/components/accordion-group/AccordionGroup.tsx
+var AccordionGroup = ({ children, className, defaultOpenId = null, onOpenChange, openId }) => {
 	const [uncontrolledOpenId, setUncontrolledOpenId] = useState(defaultOpenId);
 	const isControlled = openId !== void 0;
 	const currentOpenId = isControlled ? openId : uncontrolledOpenId;
@@ -28,7 +28,7 @@ function AccordionGroup({ children, className, defaultOpenId = null, onOpenChang
 			children
 		})
 	});
-}
+};
 //#endregion
 export { AccordionGroup as default };
 

package/dist/components/accordion-group/AccordionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.js","names":[],"sources":["../../../src/components/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { AccordionGroupContext } from '../accordion/AccordionContext.js';\nimport type { AccordionGroupContextValue } from '../accordion/AccordionContext.js';\nimport type { AccordionGroupProps } from '../accordion/Accordion.types.js';\n\nconst AccordionGroup = ({\n  children,\n  className,\n  defaultOpenId = null,\n  onOpenChange,\n  openId,\n}: AccordionGroupProps) => {\n  const [uncontrolledOpenId, setUncontrolledOpenId] = useState<string | null>(defaultOpenId);\n\n  const isControlled = openId !== undefined;\n  const currentOpenId = isControlled ? openId : uncontrolledOpenId;\n\n  const isOpen = useCallback((id: string) => currentOpenId === id, [currentOpenId]);\n\n  const toggle = useCallback(\n    (id: string) => {\n      const nextOpenId = currentOpenId === id ? null : id;\n      if (!isControlled) setUncontrolledOpenId(nextOpenId);\n      onOpenChange?.(nextOpenId);\n    },\n    [currentOpenId, isControlled, onOpenChange],\n  );\n\n  const contextValue = useMemo<AccordionGroupContextValue>(\n    () => ({ isOpen, toggle }),\n    [isOpen, toggle],\n  );\n\n  const rootClassName = ['chayns-accordion-group', className].filter(Boolean).join(' ');\n\n  return (\n    <AccordionGroupContext.Provider value={contextValue}>\n      <div className={rootClassName}>{children}</div>\n    </AccordionGroupContext.Provider>\n  );\n};\n\nexport default AccordionGroup;\n"],"mappings":";;;;AAMA,IAAM,kBAAkB,EACtB,UACA,WACA,gBAAgB,MAChB,cACA,aACyB;CACzB,MAAM,CAAC,oBAAoB,yBAAyB,SAAwB,aAAa;CAEzF,MAAM,eAAe,WAAW,KAAA;CAChC,MAAM,gBAAgB,eAAe,SAAS;CAE9C,MAAM,SAAS,aAAa,OAAe,kBAAkB,IAAI,CAAC,aAAa,CAAC;CAEhF,MAAM,SAAS,aACZ,OAAe;EACd,MAAM,aAAa,kBAAkB,KAAK,OAAO;EACjD,IAAI,CAAC,cAAc,sBAAsB,UAAU;EACnD,eAAe,UAAU;CAC3B,GACA;EAAC;EAAe;EAAc;CAAY,CAC5C;CAEA,MAAM,eAAe,eACZ;EAAE;EAAQ;CAAO,IACxB,CAAC,QAAQ,MAAM,CACjB;CAEA,MAAM,gBAAgB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpF,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAChB,CAAA;AAEpC"}

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './Avatar.types.js';
+declare const Avatar: ({ alt, badge, className, id, name, size, src }: AvatarProps) => import("react").JSX.Element;
+export default Avatar;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsBrD,QAAA,MAAM,MAAM,GAAI,gDAA4D,WAAW,gCAuCtF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/avatar/Avatar.tsx
+var getInitials = (name) => {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "";
+	return `${words[0]?.charAt(0) ?? ""}${words.length > 1 ? words.at(-1)?.charAt(0) ?? "" : ""}`.toUpperCase();
+};
+var getTone = (name) => {
+	let hash = 0;
+	for (const character of name) hash = hash * 31 + character.codePointAt(0) >>> 0;
+	return hash % 3;
+};
+var Avatar = ({ alt, badge, className, id, name, size = "default", src }) => {
+	const [failedSource, setFailedSource] = useState();
+	const showImage = Boolean(src) && failedSource !== src;
+	const initials = getInitials(name);
+	const tone = getTone(name);
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-label": alt ?? name,
+		className: [
+			"chayns-avatar",
+			`chayns-avatar--tone-${tone}`,
+			size === "small" ? "chayns-avatar--small" : null,
+			className
+		].filter(Boolean).join(" "),
+		id,
+		role: "img",
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			alt: "",
+			className: "chayns-avatar__image",
+			onError: () => setFailedSource(src),
+			src
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-avatar__initials",
+			children: initials
+		}), badge ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-avatar__badge",
+			children: badge
+		}) : null]
+	});
+};
+//#endregion
+export { Avatar as default };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { AvatarProps } from './Avatar.types.js';\n\nconst getInitials = (name: string) => {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n\n  const first = words[0]?.charAt(0) ?? '';\n  const last = words.length > 1 ? (words.at(-1)?.charAt(0) ?? '') : '';\n  return `${first}${last}`.toUpperCase();\n};\n\nconst getTone = (name: string) => {\n  let hash = 0;\n  for (const character of name) {\n    hash = (hash * 31 + character.codePointAt(0)!) >>> 0;\n  }\n\n  return hash % 3;\n};\n\nconst Avatar = ({ alt, badge, className, id, name, size = 'default', src }: AvatarProps) => {\n  const [failedSource, setFailedSource] = useState<string>();\n  const showImage = Boolean(src) && failedSource !== src;\n  const initials = getInitials(name);\n  const tone = getTone(name);\n\n  return (\n    <span\n      aria-label={alt ?? name}\n      className={[\n        'chayns-avatar',\n        `chayns-avatar--tone-${tone}`,\n        size === 'small' ? 'chayns-avatar--small' : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      role=\"img\"\n    >\n      {showImage ? (\n        <img\n          alt=\"\"\n          className=\"chayns-avatar__image\"\n          onError={() => setFailedSource(src)}\n          src={src}\n        />\n      ) : (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__initials\">\n          {initials}\n        </span>\n      )}\n      {badge ? (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__badge\">\n          {badge}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;AAIA,IAAM,eAAe,SAAiB;CACpC,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GACnB,OAAO;CAKT,OAAO,GAFO,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,KACxB,MAAM,SAAS,IAAK,MAAM,GAAG,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,KAAM,KACzC,YAAY;AACvC;AAEA,IAAM,WAAW,SAAiB;CAChC,IAAI,OAAO;CACX,KAAK,MAAM,aAAa,MACtB,OAAQ,OAAO,KAAK,UAAU,YAAY,CAAC,MAAQ;CAGrD,OAAO,OAAO;AAChB;AAEA,IAAM,UAAU,EAAE,KAAK,OAAO,WAAW,IAAI,MAAM,OAAO,WAAW,UAAuB;CAC1F,MAAM,CAAC,cAAc,mBAAmB,SAAiB;CACzD,MAAM,YAAY,QAAQ,GAAG,KAAK,iBAAiB;CACnD,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,OAAO,QAAQ,IAAI;CAEzB,OACE,qBAAC,QAAD;EACE,cAAY,OAAO;EACnB,WAAW;GACT;GACA,uBAAuB;GACvB,SAAS,UAAU,yBAAyB;GAC5C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACP;EACJ,MAAK;EAXP,UAAA,CAaG,YACC,oBAAC,OAAD;GACE,KAAI;GACJ,WAAU;GACV,eAAe,gBAAgB,GAAG;GAC7B;EACN,CAAA,IAED,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,GAEP,QACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,IACJ,IACA;;AAEV"}

package/dist/components/avatar/Avatar.types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+/**
+ * @description Props for a single circular identity avatar: an image with a
+ * deterministic initials-and-tone fallback. `size` is a designer-approved
+ * local geometry variant for this component, not a global S/M/L density
+ * variant.
+ */
+export interface AvatarProps {
+    /**
+     * @description Full name used to derive both the accessible name (unless
+     * `alt` is given) and the initials fallback shown when no image is
+     * available.
+     */
+    name: string;
+    /**
+     * @description Avatar geometry variant.
+     * @default 'default'
+     */
+    size?: 'default' | 'small';
+    /**
+     * @description Optional image source. Initials are shown instead when
+     * omitted or when the image fails to load.
+     */
+    src?: string;
+    /**
+     * @description Optional accessible name override for the avatar, used
+     * instead of `name` when the visible identity text differs from the
+     * accessible name.
+     */
+    alt?: string;
+    /**
+     * @description Decorative content positioned at the lower edge of the
+     * avatar, for example a presence or status marker. Always rendered
+     * `aria-hidden` — any meaning it conveys must also be available elsewhere.
+     */
+    badge?: ReactNode;
+    /**
+     * @description Additional class names appended to the avatar root element.
+     */
+    className?: string;
+    /**
+     * @description Optional id on the avatar root element.
+     */
+    id?: string;
+}
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/avatar/Avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE3B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/components/avatar-group/AvatarGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupProps } from './AvatarGroup.types.js';
+declare const AvatarGroup: ({ children, className, id, max, size }: AvatarGroupProps) => import("react").JSX.Element;
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/avatar-group/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/AvatarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,QAAA,MAAM,WAAW,GAAI,wCAAoD,gBAAgB,gCA6BxF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/avatar-group/AvatarGroup.js

@@ -0,0 +1,26 @@
+import { jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/avatar-group/AvatarGroup.tsx
+var AvatarGroup = ({ children, className, id, max, size = "default" }) => {
+	const avatars = Children.toArray(children).filter((child) => isValidElement(child));
+	const limited = typeof max === "number" && max > 0;
+	const visibleCount = limited ? Math.max(max - 1, 0) : avatars.length;
+	const overflowCount = limited && avatars.length > max ? avatars.length - visibleCount : 0;
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			"chayns-avatar-group",
+			size === "small" ? "chayns-avatar-group--small" : null,
+			className
+		].filter(Boolean).join(" "),
+		id,
+		children: [avatars.slice(0, visibleCount).map((avatar) => cloneElement(avatar, { size })), overflowCount > 0 ? /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			className: "chayns-avatar-group__overflow",
+			children: ["+", overflowCount]
+		}) : null]
+	});
+};
+//#endregion
+export { AvatarGroup as default };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/avatar-group/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","names":[],"sources":["../../../src/components/avatar-group/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement } from 'react';\n\nimport type { AvatarProps } from '../avatar/Avatar.types.js';\nimport type { AvatarGroupProps } from './AvatarGroup.types.js';\n\nconst AvatarGroup = ({ children, className, id, max, size = 'default' }: AvatarGroupProps) => {\n  const avatars = Children.toArray(children).filter((child) => isValidElement<AvatarProps>(child));\n  const limited = typeof max === 'number' && max > 0;\n  const visibleCount = limited ? Math.max(max - 1, 0) : avatars.length;\n  const overflowCount = limited && avatars.length > max ? avatars.length - visibleCount : 0;\n\n  return (\n    <span\n      className={[\n        'chayns-avatar-group',\n        size === 'small' ? 'chayns-avatar-group--small' : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n    >\n      {avatars.slice(0, visibleCount).map((avatar) =>\n        cloneElement(avatar, {\n          size,\n        }),\n      )}\n      {overflowCount > 0 ? (\n        <span aria-hidden=\"true\" className=\"chayns-avatar-group__overflow\">\n          +{overflowCount}\n        </span>\n      ) : null}\n    </span>\n  );\n};\n\nexport default AvatarGroup;\n"],"mappings":";;;AAKA,IAAM,eAAe,EAAE,UAAU,WAAW,IAAI,KAAK,OAAO,gBAAkC;CAC5F,MAAM,UAAU,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAAQ,UAAU,eAA4B,KAAK,CAAC;CAC/F,MAAM,UAAU,OAAO,QAAQ,YAAY,MAAM;CACjD,MAAM,eAAe,UAAU,KAAK,IAAI,MAAM,GAAG,CAAC,IAAI,QAAQ;CAC9D,MAAM,gBAAgB,WAAW,QAAQ,SAAS,MAAM,QAAQ,SAAS,eAAe;CAExF,OACE,qBAAC,QAAD;EACE,WAAW;GACT;GACA,SAAS,UAAU,+BAA+B;GAClD;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACP;EARN,UAAA,CAUG,QAAQ,MAAM,GAAG,YAAY,CAAC,CAAC,KAAK,WACnC,aAAa,QAAQ,EACnB,KACF,CAAC,CACH,GACC,gBAAgB,IACf,qBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAnC,UAAA,CAAmE,KAC/D,aACE;EACJ,CAAA,IAAA,IACA;;AAEV"}

package/dist/components/avatar-group/AvatarGroup.types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { AvatarProps } from '../avatar/Avatar.types.js';
+/**
+ * @description Props for a compact, overlapping stack of `Avatar` children
+ * with an overflow tile once `max` is exceeded.
+ */
+export interface AvatarGroupProps {
+    /**
+     * @description `Avatar` children displayed with overlap, in order.
+     */
+    children?: ReactNode;
+    /**
+     * @description Maximum number of visible tiles, including the overflow
+     * tile shown for any remaining avatars beyond this count. Omit to render
+     * every child without an overflow tile.
+     */
+    max?: number;
+    /**
+     * @description Size applied uniformly to every `Avatar` child and to the
+     * overflow tile; overrides each child's own `size`.
+     * @default 'default'
+     */
+    size?: AvatarProps['size'];
+    /**
+     * @description Additional class names appended to the group root element.
+     */
+    className?: string;
+    /**
+     * @description Optional id on the group root element.
+     */
+    id?: string;
+}
+//# sourceMappingURL=AvatarGroup.types.d.ts.map

package/dist/components/avatar-group/AvatarGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAe,EACf,OAAO,EACP,GAAG,WAAW,EACf,EAAE,WAAW,+BASb;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAe,EACf,OAAO,EACP,GAAG,WAAW,EACf,EAAE,WAAW,+BAWb;AAED,eAAe,MAAM,CAAC"}

package/dist/components/button/Button.js

@@ -1,9 +1,12 @@
-import ButtonIcon from "./ButtonIcon.js";
-import { getButtonClassName } from "./buttonClassName.js";
+import ButtonIcon from "./button-icon/ButtonIcon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
 function Button({ children, className, icon, type = "button", variant, ...buttonProps }) {
-	const resolvedClassName = getButtonClassName("chayns-button", variant, className);
+	const resolvedClassName = [
+		"chayns-button",
+		`chayns-button--${variant}`,
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("button", {
 		...buttonProps,
 		className: resolvedClassName,

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from './Button.types.js';\nimport ButtonIcon from './ButtonIcon.js';\nimport { getButtonClassName } from './buttonClassName.js';\n\nfunction Button({\n  children,\n  className,\n  icon,\n  type = 'button',\n  variant,\n  ...buttonProps\n}: ButtonProps) {\n  const resolvedClassName = getButtonClassName('chayns-button', variant, className);\n\n  return (\n    <button {...buttonProps} className={resolvedClassName} type={type}>\n      {icon ? <ButtonIcon icon={icon} /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport default Button;\n"],"mappings":";;;;AAIA,SAAS,OAAO,EACd,UACA,WACA,MACA,OAAO,UACP,SACA,GAAG,eACW;CACd,MAAM,oBAAoB,mBAAmB,iBAAiB,SAAS,SAAS;CAEhF,OACE,qBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAyB;EAA7D,UAAA,CACG,OAAO,oBAAC,YAAD,EAAkB,KAAO,CAAA,IAAI,MACpC,QACK;;AAEZ"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from './Button.types.js';\nimport ButtonIcon from './button-icon/ButtonIcon.js';\n\nfunction Button({\n  children,\n  className,\n  icon,\n  type = 'button',\n  variant,\n  ...buttonProps\n}: ButtonProps) {\n  const resolvedClassName = ['chayns-button', `chayns-button--${variant}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button {...buttonProps} className={resolvedClassName} type={type}>\n      {icon ? <ButtonIcon icon={icon} /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport default Button;\n"],"mappings":";;;AAGA,SAAS,OAAO,EACd,UACA,WACA,MACA,OAAO,UACP,SACA,GAAG,eACW;CACd,MAAM,oBAAoB;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CAChF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAyB;EAA7D,UAAA,CACG,OAAO,oBAAC,YAAD,EAAkB,KAAO,CAAA,IAAI,MACpC,QACK;;AAEZ"}

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

@@ -1,35 +1,49 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-/** Supported visual emphasis levels for Button and IconButton. */
+/**
+ * @description Supported visual emphasis levels for {@link ButtonProps} and
+ * `IconButtonProps`. Milestone 1 supports exactly these four values; there is
+ * no default variant and no fifth value.
+ * @see {@link https://tappqa.tobit.com/Bodywork/DesignSystem/#buttons | DesignSystem — Buttons & Aktionen}
+ */
 export type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger';
-/** FontAwesome Classic icon name with a Regular and Solid pair. */
+/**
+ * @description A FontAwesome Classic icon name in its Regular form (e.g.
+ * `fa-plus`). Button and IconButton resolve the matching Solid weight
+ * internally and cross-fade between the two on hover/active; consumers must
+ * not pass a pre-resolved weight and must supply a name that has both a
+ * Regular and a Solid glyph available.
+ */
 export type ButtonIcon = `fa-${string}`;
-/** Visible content that gives a Button its accessible name. */
+/**
+ * @description Visible content that gives a `Button` its accessible name.
+ * Excludes `boolean`, `null` and `undefined` so a `Button` can never be
+ * rendered without real, visible label content.
+ */
 export type ButtonContent = Exclude<ReactNode, boolean | null | undefined>;
-/** Props for a visible-label native action button. */
+/**
+ * @description Props for a visible-label native action button. Renders a
+ * native `<button>` and forwards all remaining native button props, events,
+ * `className` and `ref`.
+ */
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-    /** Visual emphasis that communicates the action's role. */
+    /**
+     * @description Visual emphasis that communicates the action's role within
+     * its action scope. At most one `primary` action should exist per closed
+     * action scope (page, card, dialog, drawer, form, wizard step, or closed
+     * accordion content).
+     */
     variant: ButtonVariant;
-    /** Optional leading FontAwesome Classic icon name. */
+    /**
+     * @description Optional leading FontAwesome Classic icon name. Always
+     * rendered before `children`; there is no trailing-icon or icon-only mode
+     * on `Button` itself — use `IconButton` for an icon-only action.
+     */
     icon?: ButtonIcon;
-    /** Visible, non-empty content used as the button label. */
+    /**
+     * @description Visible, non-empty content used as the button label. Loading
+     * state, polymorphism (rendering as something other than a native button)
+     * and navigation are explicitly not part of the Milestone 1 API.
+     */
     children: ButtonContent;
 }
-type IconButtonAccessibleName = {
-    /** Localized accessible name when no external label element exists. */
-    'aria-label': string;
-    'aria-labelledby'?: never;
-} | {
-    'aria-label'?: never;
-    /** ID of the element that provides the localized accessible name. */
-    'aria-labelledby': string;
-};
-interface IconButtonBaseProps extends Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'children'> {
-    /** Visual emphasis that communicates the action's role. */
-    variant: ButtonVariant;
-    /** FontAwesome Classic icon name rendered Regular at rest and Solid on interaction. */
-    icon: ButtonIcon;
-}
-/** Props for a compact native action button with a required accessible name. */
-export type IconButtonProps = IconButtonBaseProps & IconButtonAccessibleName;
-export {};
 //# sourceMappingURL=Button.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,CAAC;AAExC,+DAA+D;AAC/D,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E,sDAAsD;AACtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF,2DAA2D;IAC3D,OAAO,EAAE,aAAa,CAAC;IAEvB,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,2DAA2D;IAC3D,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,KAAK,wBAAwB,GACzB;IACE,uEAAuE;IACvE,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAC;IAErB,qEAAqE;IACrE,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEN,UAAU,mBAAoB,SAAQ,IAAI,CACxC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC9C;IACC,2DAA2D;IAC3D,OAAO,EAAE,aAAa,CAAC;IAEvB,uFAAuF;IACvF,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,wBAAwB,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;OAKG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB"}