@chayns-ui/core 0.4.2 → 0.6.0

package/dist/avatar.css

@@ -5,8 +5,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--avatar);
-    block-size: var(--avatar);
+    inline-size: var(--k44);
+    block-size: var(--k44);
     overflow: visible;
     border-radius: 50%;
     background: var(--accent);
@@ -30,11 +30,22 @@
   }
 
   .chayns-avatar--small {
-    inline-size: var(--avatar-sm);
-    block-size: var(--avatar-sm);
+    inline-size: var(--k36);
+    block-size: var(--k36);
     font-size: var(--fs-meta);
   }
 
+  .chayns-avatar--default {
+    inline-size: var(--k44);
+    block-size: var(--k44);
+  }
+
+  .chayns-avatar--large {
+    inline-size: var(--k52);
+    block-size: var(--k52);
+    font-size: var(--fs-subtitle);
+  }
+
   .chayns-avatar__image {
     display: block;
     inline-size: 100%;
@@ -86,8 +97,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--avatar);
-    block-size: var(--avatar);
+    inline-size: var(--k44);
+    block-size: var(--k44);
     border-radius: 50%;
     background: var(--surface-alt);
     color: var(--accent);
@@ -97,8 +108,14 @@
   }
 
   .chayns-avatar-group--small .chayns-avatar-group__overflow {
-    inline-size: var(--avatar-sm);
-    block-size: var(--avatar-sm);
+    inline-size: var(--k36);
+    block-size: var(--k36);
     font-size: var(--fs-micro);
   }
+
+  .chayns-avatar-group--large .chayns-avatar-group__overflow {
+    inline-size: var(--k52);
+    block-size: var(--k52);
+    font-size: var(--fs-body);
+  }
 }

package/dist/badge.css

@@ -0,0 +1,46 @@
+@layer chayns.components {
+  .chayns-badge {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--k5);
+    padding: var(--k4) var(--k12);
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: var(--fs-caption);
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  .chayns-badge--md {
+    gap: var(--k6);
+    padding: var(--k5) var(--k12);
+    font-size: var(--fs-meta);
+  }
+
+  .chayns-badge--neutral {
+    background: var(--surface-alt);
+    color: var(--text-2);
+  }
+
+  .chayns-badge--accent {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-badge--success {
+    /* stylelint-disable-next-line custom-property-pattern */
+    background: var(--success-bg);
+    color: var(--text);
+  }
+
+  .chayns-badge--warning {
+    background: var(--warning-bg);
+    color: var(--text);
+  }
+
+  .chayns-badge--danger {
+    background: var(--danger-bg);
+    color: var(--text);
+  }
+}

package/dist/combo-box.css

@@ -0,0 +1,144 @@
+@layer chayns.components {
+  .chayns-combo-box {
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  .chayns-combo-box__input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid var(--input-border);
+    border-radius: 10px;
+    background: var(--surface);
+    color: var(--text);
+    font: inherit;
+    line-height: 1.2;
+    outline: none;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
+  }
+
+  .chayns-combo-box__input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-combo-box__label {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 10px;
+    padding-inline: var(--k5);
+    background: var(--surface);
+    color: var(--text-3);
+    font-size: var(--fs-body);
+    line-height: 1.2;
+    pointer-events: none;
+    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform-origin: left center;
+    transition:
+      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      color 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .chayns-combo-box--open .chayns-combo-box__label,
+  .chayns-combo-box__input:not(:placeholder-shown) + .chayns-combo-box__label {
+    color: var(--accent);
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-combo-box__chips {
+    position: absolute;
+    inset: 1.5px var(--input-px) auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--k5);
+    pointer-events: none;
+    transform: translateY(var(--input-py));
+  }
+
+  .chayns-combo-box__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--k5);
+    padding: var(--k3) var(--k9);
+    border-radius: 999px;
+    background: var(--accent);
+    color: var(--on-accent);
+    font-size: var(--fs-caption);
+    font-weight: 500;
+  }
+
+  .chayns-combo-box__popup {
+    position: absolute;
+    inset-block-start: calc(100% + var(--k4));
+    inset-inline: 0;
+    z-index: var(--z-popover);
+    max-block-size: min(320px, 50vh);
+    overflow: auto;
+    padding: var(--k6);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+    box-shadow: var(--shadow-pop);
+  }
+
+  .chayns-combo-box__option {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--k40);
+    padding: var(--k9) var(--k12);
+    border-radius: 8px;
+    color: var(--text);
+    cursor: pointer;
+    font-size: var(--fs-body);
+  }
+
+  .chayns-combo-box__option:hover,
+  .chayns-combo-box__option--active {
+    background: var(--surface-alt);
+  }
+
+  .chayns-combo-box__option--selected {
+    color: var(--accent);
+    font-weight: 600;
+  }
+
+  .chayns-combo-box__checkbox {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--k18);
+    block-size: var(--k18);
+    margin-inline-end: var(--k8);
+    border: 1.5px solid var(--input-border);
+    border-radius: var(--k4);
+    background: var(--surface);
+  }
+
+  .chayns-combo-box__checkbox[data-checked='true'] {
+    border-color: var(--accent);
+    background: var(--accent);
+  }
+
+  .chayns-combo-box__checkbox[data-checked='true']::after {
+    inline-size: var(--k8);
+    block-size: var(--k4);
+    border-block-end: 2px solid var(--on-accent);
+    border-inline-start: 2px solid var(--on-accent);
+    content: '';
+    transform: rotate(-45deg) translate(1px, -1px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-combo-box__input,
+    .chayns-combo-box__label {
+      transition: none;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
 import type { AccordionProps } from './Accordion.types.js';
-declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, title, }: AccordionProps) => import("react").JSX.Element;
+declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, ref, title, ...rootProps }: 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,QAAA,MAAM,SAAS,GAAI,gFAShB,cAAc,gCAiFhB,CAAC;AAEF,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,kGAWhB,cAAc,gCAkFhB,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
-var Accordion = ({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, title }) => {
+var Accordion = ({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, ref, title, ...rootProps }) => {
 	const depth = useContext(AccordionDepthContext);
 	const group = useContext(AccordionGroupContext);
 	const generatedId = useId();
@@ -10,12 +10,13 @@ var Accordion = ({ children, className, defaultOpen = false, disabled = false, i
 	const headerId = `${baseId}-header`;
 	const panelId = `${baseId}-panel`;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const isGrouped = group !== null && depth === 0;
 	let isOpen;
-	if (group) isOpen = group.isOpen(baseId);
+	if (isGrouped) isOpen = group.isOpen(baseId);
 	else if (open !== void 0) isOpen = open;
 	else isOpen = uncontrolledOpen;
 	const handleToggle = () => {
-		if (group) {
+		if (isGrouped) {
 			group.toggle(baseId);
 			return;
 		}
@@ -23,16 +24,18 @@ var Accordion = ({ children, className, defaultOpen = false, disabled = false, i
 		if (open === void 0) setUncontrolledOpen(nextOpen);
 		onOpenChange?.(nextOpen);
 	};
-	const grouped = group !== null;
 	const rootClassName = [
 		"chayns-accordion",
-		grouped ? "chayns-accordion--grouped" : !grouped && depth > 0 ? "chayns-accordion--wrapped" : "chayns-accordion--standalone",
+		isGrouped ? "chayns-accordion--grouped" : depth > 0 ? "chayns-accordion--wrapped" : "chayns-accordion--standalone",
 		isOpen ? "chayns-accordion--open" : null,
 		disabled ? "chayns-accordion--disabled" : null,
 		className
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
 		className: rootClassName,
+		id,
+		ref,
 		children: [/* @__PURE__ */ jsxs("button", {
 			"aria-controls": panelId,
 			"aria-expanded": isOpen,

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\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-hidden={!isOpen}\n        aria-labelledby={headerId}\n        className=\"chayns-accordion__panel\"\n        id={panelId}\n        inert={!isOpen}\n        role=\"region\"\n        style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}\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,eAAa,CAAC;GACd,mBAAiB;GACjB,WAAU;GACV,IAAI;GACJ,OAAO,CAAC;GACR,MAAK;GACL,OAAO,EAAE,kBAAkB,SAAS,QAAQ,MAAM;GAElD,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  ref,\n  title,\n  ...rootProps\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  const isGrouped = group !== null && depth === 0;\n\n  let isOpen: boolean;\n  if (isGrouped) {\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 (isGrouped) {\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 wrapped = depth > 0;\n  const variantClassName = isGrouped\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 {...rootProps} className={rootClassName} id={id} ref={ref}>\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-hidden={!isOpen}\n        aria-labelledby={headerId}\n        className=\"chayns-accordion__panel\"\n        id={panelId}\n        inert={!isOpen}\n        role=\"region\"\n        style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}\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,KACA,OACA,GAAG,gBACiB;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,MAAM,YAAY,UAAU,QAAQ,UAAU;CAE9C,IAAI;CACJ,IAAI,WACF,SAAS,MAAM,OAAO,MAAM;MACvB,IAAI,SAAS,KAAA,GAClB,SAAS;MAET,SAAS;CAGX,MAAM,qBAAqB;EACzB,IAAI,WAAW;GACb,MAAM,OAAO,MAAM;GACnB;EACF;EAEA,MAAM,WAAW,CAAC;EAClB,IAAI,SAAS,KAAA,GAAW,oBAAoB,QAAQ;EACpD,eAAe,QAAQ;CACzB;CASA,MAAM,gBAAgB;EACpB;EAPuB,YACrB,8BAFY,QAAQ,IAIlB,8BACA;EAKJ,SAAS,2BAA2B;EACpC,WAAW,+BAA+B;EAC1C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAmB;EAAS;EAA3D,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,eAAa,CAAC;GACd,mBAAiB;GACjB,WAAU;GACV,IAAI;GACJ,OAAO,CAAC;GACR,MAAK;GACL,OAAO,EAAE,kBAAkB,SAAS,QAAQ,MAAM;GAElD,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,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 /**
  * @description Props for a single disclosure accordion: a header button that
  * expands and collapses an associated content region. Nesting an `Accordion`
@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
  * context and rendered as the "Wrapped" presentation — there is no separate
  * component or prop for that case.
  */
-export interface AccordionProps {
+export interface AccordionProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'id' | 'title'> {
     /**
      * @description Visible, localized header label used as the accordion's
      * accessible name.
@@ -54,7 +54,7 @@ export interface AccordionProps {
  * one child `Accordion` is open at a time, and the group renders its
  * children as one joined surface.
  */
-export interface AccordionGroupProps {
+export interface AccordionGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * @description `Accordion` items belonging to the group.
      */

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;;;;;;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"}
+{"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;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,IAAI,GAAG,OAAO,CAC5B;IACC;;;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,mBAAoB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF;;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

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

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

@@ -1 +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"}
+{"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,iFAQrB,mBAAmB,gCA+BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -2,7 +2,7 @@ import { AccordionGroupContext } from "../accordion/AccordionContext.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 //#region src/components/accordion-group/AccordionGroup.tsx
-var AccordionGroup = ({ children, className, defaultOpenId = null, onOpenChange, openId }) => {
+var AccordionGroup = ({ children, className, defaultOpenId = null, onOpenChange, openId, ref, ...rootProps }) => {
 	const [uncontrolledOpenId, setUncontrolledOpenId] = useState(defaultOpenId);
 	const isControlled = openId !== void 0;
 	const currentOpenId = isControlled ? openId : uncontrolledOpenId;
@@ -24,7 +24,9 @@ var AccordionGroup = ({ children, className, defaultOpenId = null, onOpenChange,
 	return /* @__PURE__ */ jsx(AccordionGroupContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			...rootProps,
 			className: rootClassName,
+			ref,
 			children
 		})
 	});

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

@@ -1 +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"}
+{"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  ref,\n  ...rootProps\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 {...rootProps} className={rootClassName} ref={ref}>\n        {children}\n      </div>\n    </AccordionGroupContext.Provider>\n  );\n};\n\nexport default AccordionGroup;\n"],"mappings":";;;;AAMA,IAAM,kBAAkB,EACtB,UACA,WACA,gBAAgB,MAChB,cACA,QACA,KACA,GAAG,gBACsB;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,GAAI;GAAW,WAAW;GAAoB;GAChD;EACE,CAAA;CACyB,CAAA;AAEpC"}

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

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

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

@@ -1 +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"}
+{"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,sHA2CV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 //#region src/components/avatar/Avatar.tsx
 var getInitials = (name) => {
 	const words = name.trim().split(/\s+/).filter(Boolean);
@@ -11,21 +11,22 @@ var getTone = (name) => {
 	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 }) => {
+var Avatar = forwardRef(function Avatar({ alt, badge, className, name, size = "default", src, ...spanProps }, ref) {
 	const [failedSource, setFailedSource] = useState();
 	const showImage = Boolean(src) && failedSource !== src;
 	const initials = getInitials(name);
 	const tone = getTone(name);
 	return /* @__PURE__ */ jsxs("span", {
+		...spanProps,
 		"aria-label": alt ?? name,
 		className: [
 			"chayns-avatar",
 			`chayns-avatar--tone-${tone}`,
-			size === "small" ? "chayns-avatar--small" : null,
+			`chayns-avatar--${size}`,
 			className
 		].filter(Boolean).join(" "),
-		id,
 		role: "img",
+		ref,
 		children: [showImage ? /* @__PURE__ */ jsx("img", {
 			alt: "",
 			className: "chayns-avatar__image",
@@ -41,7 +42,7 @@ var Avatar = ({ alt, badge, className, id, name, size = "default", src }) => {
 			children: badge
 		}) : null]
 	});
-};
+});
 //#endregion
 export { Avatar as default };
 

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

@@ -1 +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"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, 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 = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { alt, badge, className, name, size = 'default', src, ...spanProps },\n  ref,\n) {\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      {...spanProps}\n      aria-label={alt ?? name}\n      className={[\n        'chayns-avatar',\n        `chayns-avatar--tone-${tone}`,\n        `chayns-avatar--${size}`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"img\"\n      ref={ref}\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,SAAS,WAAyC,SAAS,OAC/D,EAAE,KAAK,OAAO,WAAW,MAAM,OAAO,WAAW,KAAK,GAAG,aACzD,KACA;CACA,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,GAAI;EACJ,cAAY,OAAO;EACnB,WAAW;GACT;GACA,uBAAuB;GACvB,kBAAkB;GAClB;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,MAAK;EACA;EAZP,UAAA,CAcG,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,CAAC"}

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

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithRef, 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 {
+export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role' | 'aria-label'> {
     /**
      * @description Full name used to derive both the accessible name (unless
      * `alt` is given) and the initials fallback shown when no image is
@@ -16,7 +16,7 @@ export interface AvatarProps {
      * @description Avatar geometry variant.
      * @default 'default'
      */
-    size?: 'default' | 'small';
+    size?: 'default' | 'small' | 'large';
     /**
      * @description Optional image source. Initials are shown instead when
      * omitted or when the image fails to load.
@@ -34,13 +34,5 @@ export interface AvatarProps {
      * `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

@@ -1 +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"}
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,qBAAqB,CAAC,MAAM,CAAC,EAC7B,UAAU,GAAG,MAAM,GAAG,YAAY,CACnC;IACC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAErC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}

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

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

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

@@ -1 +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"}
+{"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,2HA6Bf,CAAC;AAEH,eAAe,WAAW,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement } from "react";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
 //#region src/components/avatar-group/AvatarGroup.tsx
-var AvatarGroup = ({ children, className, id, max, size = "default" }) => {
+var AvatarGroup = forwardRef(function AvatarGroup({ children, className, max, size = "default", ...spanProps }, ref) {
 	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;
@@ -9,17 +9,18 @@ var AvatarGroup = ({ children, className, id, max, size = "default" }) => {
 	return /* @__PURE__ */ jsxs("span", {
 		className: [
 			"chayns-avatar-group",
-			size === "small" ? "chayns-avatar-group--small" : null,
+			`chayns-avatar-group--${size}`,
 			className
 		].filter(Boolean).join(" "),
-		id,
+		...spanProps,
+		ref,
 		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 };
 

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

@@ -1 +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"}
+{"version":3,"file":"AvatarGroup.js","names":[],"sources":["../../../src/components/avatar-group/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, forwardRef, isValidElement } from 'react';\n\nimport type { AvatarProps } from '../avatar/Avatar.types.js';\nimport type { AvatarGroupProps } from './AvatarGroup.types.js';\n\nconst AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(function AvatarGroup(\n  { children, className, max, size = 'default', ...spanProps },\n  ref,\n) {\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={['chayns-avatar-group', `chayns-avatar-group--${size}`, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...spanProps}\n      ref={ref}\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,cAAc,WAA8C,SAAS,YACzE,EAAE,UAAU,WAAW,KAAK,OAAO,WAAW,GAAG,aACjD,KACA;CACA,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;GAAC;GAAuB,wBAAwB;GAAQ;EAAS,CAAC,CAC1E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,GAAI;EACC;EALP,UAAA,CAOG,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,CAAC"}

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

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithRef, 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 {
+export interface AvatarGroupProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
     /**
      * @description `Avatar` children displayed with overlap, in order.
      */
@@ -21,13 +21,5 @@ export interface AvatarGroupProps {
      * @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

@@ -1 +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"}
+{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACvF;;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;CAC5B"}

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps } from './Badge.types.js';
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,QAAA,MAAM,KAAK,qHAwBT,CAAC;AAEH,eAAe,KAAK,CAAC"}