@chayns-ui/core 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/README.md +51 -1
  2. package/dist/avatar.css +104 -0
  3. package/dist/components/accordion/Accordion.d.ts +1 -1
  4. package/dist/components/accordion/Accordion.d.ts.map +1 -1
  5. package/dist/components/accordion/Accordion.js +2 -2
  6. package/dist/components/accordion/Accordion.js.map +1 -1
  7. package/dist/components/accordion/Accordion.types.d.ts +61 -16
  8. package/dist/components/accordion/Accordion.types.d.ts.map +1 -1
  9. package/dist/components/accordion-group/AccordionGroup.d.ts +4 -0
  10. package/dist/components/accordion-group/AccordionGroup.d.ts.map +1 -0
  11. package/dist/components/{accordion → accordion-group}/AccordionGroup.js +4 -4
  12. package/dist/components/accordion-group/AccordionGroup.js.map +1 -0
  13. package/dist/components/avatar/Avatar.d.ts +4 -0
  14. package/dist/components/avatar/Avatar.d.ts.map +1 -0
  15. package/dist/components/avatar/Avatar.js +48 -0
  16. package/dist/components/avatar/Avatar.js.map +1 -0
  17. package/dist/components/avatar/Avatar.types.d.ts +46 -0
  18. package/dist/components/avatar/Avatar.types.d.ts.map +1 -0
  19. package/dist/components/avatar-group/AvatarGroup.d.ts +4 -0
  20. package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -0
  21. package/dist/components/avatar-group/AvatarGroup.js +26 -0
  22. package/dist/components/avatar-group/AvatarGroup.js.map +1 -0
  23. package/dist/components/avatar-group/AvatarGroup.types.d.ts +33 -0
  24. package/dist/components/avatar-group/AvatarGroup.types.d.ts.map +1 -0
  25. package/dist/components/button/Button.d.ts.map +1 -1
  26. package/dist/components/button/Button.js +6 -3
  27. package/dist/components/button/Button.js.map +1 -1
  28. package/dist/components/button/Button.types.d.ts +39 -25
  29. package/dist/components/button/Button.types.d.ts.map +1 -1
  30. package/dist/components/button/button-icon/ButtonIcon.d.ts +7 -0
  31. package/dist/components/button/button-icon/ButtonIcon.d.ts.map +1 -0
  32. package/dist/components/button/button-icon/ButtonIcon.js +17 -0
  33. package/dist/components/button/button-icon/ButtonIcon.js.map +1 -0
  34. package/dist/components/card/Card.d.ts +1 -1
  35. package/dist/components/card/Card.d.ts.map +1 -1
  36. package/dist/components/card/Card.js +2 -2
  37. package/dist/components/card/Card.js.map +1 -1
  38. package/dist/components/card/Card.types.d.ts +16 -3
  39. package/dist/components/card/Card.types.d.ts.map +1 -1
  40. package/dist/components/{button → icon-button}/IconButton.d.ts +1 -1
  41. package/dist/components/icon-button/IconButton.d.ts.map +1 -0
  42. package/dist/components/{button → icon-button}/IconButton.js +7 -4
  43. package/dist/components/icon-button/IconButton.js.map +1 -0
  44. package/dist/components/icon-button/IconButton.types.d.ts +43 -0
  45. package/dist/components/icon-button/IconButton.types.d.ts.map +1 -0
  46. package/dist/components/list/List.d.ts +1 -1
  47. package/dist/components/list/List.d.ts.map +1 -1
  48. package/dist/components/list/List.js +2 -2
  49. package/dist/components/list/List.js.map +1 -1
  50. package/dist/components/list/List.types.d.ts +62 -14
  51. package/dist/components/list/List.types.d.ts.map +1 -1
  52. package/dist/components/list-item/ListItem.d.ts +4 -0
  53. package/dist/components/list-item/ListItem.d.ts.map +1 -0
  54. package/dist/components/list-item/ListItem.js +42 -0
  55. package/dist/components/list-item/ListItem.js.map +1 -0
  56. package/dist/components/list-item/list-item-body/ListItemBody.d.ts +10 -0
  57. package/dist/components/list-item/list-item-body/ListItemBody.d.ts.map +1 -0
  58. package/dist/components/list-item/list-item-body/ListItemBody.js +30 -0
  59. package/dist/components/list-item/list-item-body/ListItemBody.js.map +1 -0
  60. package/dist/components/popup/Popup.d.ts +4 -0
  61. package/dist/components/popup/Popup.d.ts.map +1 -0
  62. package/dist/components/popup/Popup.js +107 -0
  63. package/dist/components/popup/Popup.js.map +1 -0
  64. package/dist/components/popup/Popup.types.d.ts +18 -0
  65. package/dist/components/popup/Popup.types.d.ts.map +1 -0
  66. package/dist/components/popup/PopupList.d.ts +4 -0
  67. package/dist/components/popup/PopupList.d.ts.map +1 -0
  68. package/dist/components/popup/PopupList.js +44 -0
  69. package/dist/components/popup/PopupList.js.map +1 -0
  70. package/dist/components/split-button/SplitButton.d.ts +4 -0
  71. package/dist/components/split-button/SplitButton.d.ts.map +1 -0
  72. package/dist/components/split-button/SplitButton.js +52 -0
  73. package/dist/components/split-button/SplitButton.js.map +1 -0
  74. package/dist/components/split-button/SplitButton.types.d.ts +12 -0
  75. package/dist/components/split-button/SplitButton.types.d.ts.map +1 -0
  76. package/dist/index.d.ts +21 -8
  77. package/dist/index.d.ts.map +1 -1
  78. package/dist/index.js +9 -4
  79. package/dist/list.css +8 -1
  80. package/dist/popup.css +34 -0
  81. package/dist/split-button.css +128 -0
  82. package/dist/styles.css +3 -0
  83. package/package.json +11 -19
  84. package/dist/components/accordion/AccordionGroup.d.ts +0 -4
  85. package/dist/components/accordion/AccordionGroup.d.ts.map +0 -1
  86. package/dist/components/accordion/AccordionGroup.js.map +0 -1
  87. package/dist/components/accordion/index.d.ts +0 -4
  88. package/dist/components/accordion/index.d.ts.map +0 -1
  89. package/dist/components/accordion/index.js +0 -3
  90. package/dist/components/button/ButtonIcon.d.ts +0 -7
  91. package/dist/components/button/ButtonIcon.d.ts.map +0 -1
  92. package/dist/components/button/ButtonIcon.js +0 -19
  93. package/dist/components/button/ButtonIcon.js.map +0 -1
  94. package/dist/components/button/IconButton.d.ts.map +0 -1
  95. package/dist/components/button/IconButton.js.map +0 -1
  96. package/dist/components/button/buttonClassName.d.ts +0 -3
  97. package/dist/components/button/buttonClassName.d.ts.map +0 -1
  98. package/dist/components/button/buttonClassName.js +0 -9
  99. package/dist/components/button/buttonClassName.js.map +0 -1
  100. package/dist/components/button/index.d.ts +0 -4
  101. package/dist/components/button/index.d.ts.map +0 -1
  102. package/dist/components/button/index.js +0 -3
  103. package/dist/components/card/index.d.ts +0 -3
  104. package/dist/components/card/index.d.ts.map +0 -1
  105. package/dist/components/card/index.js +0 -2
  106. package/dist/components/list/ListItem.d.ts +0 -4
  107. package/dist/components/list/ListItem.d.ts.map +0 -1
  108. package/dist/components/list/ListItem.js +0 -67
  109. package/dist/components/list/ListItem.js.map +0 -1
  110. package/dist/components/list/index.d.ts +0 -4
  111. package/dist/components/list/index.d.ts.map +0 -1
  112. package/dist/components/list/index.js +0 -3
package/README.md CHANGED
@@ -1,3 +1,53 @@
1
1
  # @chayns-ui/core
2
2
 
3
- React Core UI components. Consumers import component JavaScript and CSS explicitly.
3
+ Barrierefreie React-Core-Komponenten für chayns UI. ESM-only, ohne
4
+ Business-Logik, ohne Laufzeit-CSS-Injektion. Komponenten- und Token-CSS werden
5
+ ausdrücklich importiert, damit Tree-Shaking nur das Genutzte ins Bundle nimmt.
6
+
7
+ - **Storybook (Live):** https://tobitsoftware.github.io/chayns-ui/
8
+ - **Repository & Mitwirken:** https://github.com/TobitSoftware/chayns-ui
9
+
10
+ ## Installation
11
+
12
+ ```sh
13
+ pnpm add @chayns-ui/core @chayns-ui/tokens react
14
+ ```
15
+
16
+ `react >= 19.2` ist eine Peer Dependency. `@chayns-ui/tokens` liefert die
17
+ Design-Token-Basis.
18
+
19
+ ## Verwendung
20
+
21
+ ```tsx
22
+ import { Button, IconButton } from '@chayns-ui/core';
23
+
24
+ // Einmal pro App:
25
+ import '@chayns-ui/tokens/baseline.css';
26
+ import '@chayns-ui/tokens/patch.css';
27
+
28
+ // Pro genutzter Komponente:
29
+ import '@chayns-ui/core/button.css';
30
+
31
+ <Button icon="fa-floppy-disk" variant="primary">Speichern</Button>;
32
+ <IconButton aria-label="Optionen" icon="fa-ellipsis" variant="ghost" />;
33
+ ```
34
+
35
+ ## Enthaltene Komponenten
36
+
37
+ | Import | CSS-Export |
38
+ |---|---|
39
+ | `Button`, `IconButton` | `@chayns-ui/core/button.css` |
40
+ | `Card` | `@chayns-ui/core/card.css` |
41
+ | `Avatar`, `AvatarGroup` | `@chayns-ui/core/avatar.css` |
42
+ | `List`, `ListItem` | `@chayns-ui/core/list.css` |
43
+ | `Accordion`, `AccordionGroup` | `@chayns-ui/core/accordion.css` |
44
+ | `Popup`, `PopupList` | `@chayns-ui/core/popup.css` |
45
+ | `SplitButton` | `@chayns-ui/core/split-button.css` |
46
+
47
+ Alternativ lädt `@chayns-ui/core/styles.css` das gebündelte CSS aller Komponenten.
48
+
49
+ ## Hinweise
50
+
51
+ Die Bibliothek lädt keine Fonts, injiziert kein CSS und kalibriert keine
52
+ Accent-Farbe zur Laufzeit. Farb-, Dichte- und Motion-Eingaben kommen aus den
53
+ Design Tokens der Anwendung.
@@ -0,0 +1,104 @@
1
+ @layer chayns.components {
2
+ .chayns-avatar {
3
+ position: relative;
4
+ display: inline-flex;
5
+ flex: none;
6
+ align-items: center;
7
+ justify-content: center;
8
+ inline-size: var(--avatar);
9
+ block-size: var(--avatar);
10
+ overflow: visible;
11
+ border-radius: 50%;
12
+ background: var(--accent);
13
+ color: var(--on-accent);
14
+ font-size: var(--fs-body);
15
+ font-weight: 600;
16
+ line-height: 1;
17
+ vertical-align: middle;
18
+ }
19
+
20
+ .chayns-avatar--tone-0 {
21
+ background: var(--accent);
22
+ }
23
+
24
+ .chayns-avatar--tone-1 {
25
+ background: var(--accent-hover);
26
+ }
27
+
28
+ .chayns-avatar--tone-2 {
29
+ background: var(--accent-active);
30
+ }
31
+
32
+ .chayns-avatar--small {
33
+ inline-size: var(--avatar-sm);
34
+ block-size: var(--avatar-sm);
35
+ font-size: var(--fs-meta);
36
+ }
37
+
38
+ .chayns-avatar__image {
39
+ display: block;
40
+ inline-size: 100%;
41
+ block-size: 100%;
42
+ border-radius: inherit;
43
+ object-fit: cover;
44
+ }
45
+
46
+ .chayns-avatar__initials {
47
+ display: block;
48
+ }
49
+
50
+ .chayns-avatar__badge {
51
+ position: absolute;
52
+ inset-inline-end: -2px;
53
+ inset-block-end: -2px;
54
+ display: inline-flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ inline-size: var(--k16);
58
+ block-size: var(--k16);
59
+ border: 2px solid var(--surface);
60
+ border-radius: 50%;
61
+ background: var(--surface);
62
+ color: var(--accent);
63
+ font-size: var(--fs-micro);
64
+ line-height: 1;
65
+ }
66
+
67
+ .chayns-avatar-group {
68
+ display: inline-flex;
69
+ align-items: center;
70
+ vertical-align: middle;
71
+ }
72
+
73
+ .chayns-avatar-group > .chayns-avatar,
74
+ .chayns-avatar-group__overflow {
75
+ position: relative;
76
+ margin-inline-start: calc(-1 * var(--k8));
77
+ border: 2px solid var(--surface);
78
+ }
79
+
80
+ .chayns-avatar-group > :first-child {
81
+ margin-inline-start: 0;
82
+ }
83
+
84
+ .chayns-avatar-group__overflow {
85
+ display: inline-flex;
86
+ flex: none;
87
+ align-items: center;
88
+ justify-content: center;
89
+ inline-size: var(--avatar);
90
+ block-size: var(--avatar);
91
+ border-radius: 50%;
92
+ background: var(--surface-alt);
93
+ color: var(--accent);
94
+ font-size: var(--fs-meta);
95
+ font-weight: 600;
96
+ line-height: 1;
97
+ }
98
+
99
+ .chayns-avatar-group--small .chayns-avatar-group__overflow {
100
+ inline-size: var(--avatar-sm);
101
+ block-size: var(--avatar-sm);
102
+ font-size: var(--fs-micro);
103
+ }
104
+ }
@@ -1,4 +1,4 @@
1
1
  import type { AccordionProps } from './Accordion.types.js';
2
- declare function Accordion({ children, className, defaultOpen, disabled, id, onOpenChange, open, title, }: AccordionProps): import("react").JSX.Element;
2
+ declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, title, }: AccordionProps) => import("react").JSX.Element;
3
3
  export default Accordion;
4
4
  //# sourceMappingURL=Accordion.d.ts.map
@@ -1 +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"}
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,gCA8EhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -2,7 +2,7 @@ import { AccordionDepthContext, AccordionGroupContext } from "./AccordionContext
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useContext, useId, useState } from "react";
4
4
  //#region src/components/accordion/Accordion.tsx
5
- function Accordion({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, title }) {
5
+ var Accordion = ({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, title }) => {
6
6
  const depth = useContext(AccordionDepthContext);
7
7
  const group = useContext(AccordionGroupContext);
8
8
  const generatedId = useId();
@@ -65,7 +65,7 @@ function Accordion({ children, className, defaultOpen = false, disabled = false,
65
65
  })
66
66
  })]
67
67
  });
68
- }
68
+ };
69
69
  //#endregion
70
70
  export { Accordion as default };
71
71
 
@@ -1 +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"}
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-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"}
@@ -1,37 +1,82 @@
1
1
  import type { ReactNode } from 'react';
2
- /** Props for a single disclosure accordion. */
2
+ /**
3
+ * @description Props for a single disclosure accordion: a header button that
4
+ * expands and collapses an associated content region. Nesting an `Accordion`
5
+ * inside another `Accordion`'s content is automatically detected via React
6
+ * context and rendered as the "Wrapped" presentation — there is no separate
7
+ * component or prop for that case.
8
+ */
3
9
  export interface AccordionProps {
4
- /** Visible, localized header label used as the accessible name. */
10
+ /**
11
+ * @description Visible, localized header label used as the accordion's
12
+ * accessible name.
13
+ */
5
14
  title: ReactNode;
6
- /** Panel content revealed when the accordion is open. */
15
+ /**
16
+ * @description Panel content revealed when the accordion is open.
17
+ */
7
18
  children?: ReactNode;
8
- /** Controlled open state. Ignored when inside an AccordionGroup. */
19
+ /**
20
+ * @description Controlled open state. Ignored when the accordion is
21
+ * rendered inside an `AccordionGroup`, which owns exclusivity instead.
22
+ */
9
23
  open?: boolean;
10
- /** Uncontrolled initial open state. Ignored when inside an AccordionGroup. */
24
+ /**
25
+ * @description Uncontrolled initial open state. Ignored when inside an
26
+ * `AccordionGroup`.
27
+ * @default false
28
+ */
11
29
  defaultOpen?: boolean;
12
- /** Called with the next open state on user toggle. */
30
+ /**
31
+ * @description Called with the next open state on user toggle, for both
32
+ * the controlled and uncontrolled usage.
33
+ */
13
34
  onOpenChange?: (open: boolean) => void;
14
- /** Disables the header trigger. */
35
+ /**
36
+ * @description Disables the header trigger, preventing toggling.
37
+ * @default false
38
+ */
15
39
  disabled?: boolean;
16
40
  /**
17
- * Stable id used to wire header and panel and, inside an AccordionGroup, to
18
- * identify the item. Falls back to a generated id.
41
+ * @description Stable id used to wire the header and panel via ARIA and,
42
+ * inside an `AccordionGroup`, to identify this item. Falls back to a
43
+ * generated id when omitted.
19
44
  */
20
45
  id?: string;
21
- /** Additional class names on the accordion root element. */
46
+ /**
47
+ * @description Additional class names appended to the accordion root
48
+ * element.
49
+ */
22
50
  className?: string;
23
51
  }
24
- /** Props for a group of mutually exclusive accordions. */
52
+ /**
53
+ * @description Props for a group of mutually exclusive accordions: at most
54
+ * one child `Accordion` is open at a time, and the group renders its
55
+ * children as one joined surface.
56
+ */
25
57
  export interface AccordionGroupProps {
26
- /** Accordion items belonging to the group. */
58
+ /**
59
+ * @description `Accordion` items belonging to the group.
60
+ */
27
61
  children?: ReactNode;
28
- /** Controlled id of the currently open item, or null when all are closed. */
62
+ /**
63
+ * @description Controlled id of the currently open item, or `null` when
64
+ * all items are closed.
65
+ */
29
66
  openId?: string | null;
30
- /** Uncontrolled id of the initially open item. */
67
+ /**
68
+ * @description Uncontrolled id of the initially open item.
69
+ * @default null
70
+ */
31
71
  defaultOpenId?: string | null;
32
- /** Called with the next open item id, or null when the group closes. */
72
+ /**
73
+ * @description Called with the next open item id, or `null` when the group
74
+ * closes entirely, for both the controlled and uncontrolled usage.
75
+ */
33
76
  onOpenChange?: (openId: string | null) => void;
34
- /** Additional class names on the group root element. */
77
+ /**
78
+ * @description Additional class names appended to the group root element.
79
+ */
35
80
  className?: string;
36
81
  }
37
82
  //# sourceMappingURL=Accordion.types.d.ts.map
@@ -1 +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"}
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"}
@@ -0,0 +1,4 @@
1
+ import type { AccordionGroupProps } from '../accordion/Accordion.types.js';
2
+ declare const AccordionGroup: ({ children, className, defaultOpenId, onOpenChange, openId, }: AccordionGroupProps) => import("react").JSX.Element;
3
+ export default AccordionGroup;
4
+ //# sourceMappingURL=AccordionGroup.d.ts.map
@@ -0,0 +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"}
@@ -1,8 +1,8 @@
1
- import { AccordionGroupContext } from "./AccordionContext.js";
1
+ import { AccordionGroupContext } from "../accordion/AccordionContext.js";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useCallback, useMemo, useState } from "react";
4
- //#region src/components/accordion/AccordionGroup.tsx
5
- function AccordionGroup({ children, className, defaultOpenId = null, onOpenChange, openId }) {
4
+ //#region src/components/accordion-group/AccordionGroup.tsx
5
+ var AccordionGroup = ({ children, className, defaultOpenId = null, onOpenChange, openId }) => {
6
6
  const [uncontrolledOpenId, setUncontrolledOpenId] = useState(defaultOpenId);
7
7
  const isControlled = openId !== void 0;
8
8
  const currentOpenId = isControlled ? openId : uncontrolledOpenId;
@@ -28,7 +28,7 @@ function AccordionGroup({ children, className, defaultOpenId = null, onOpenChang
28
28
  children
29
29
  })
30
30
  });
31
- }
31
+ };
32
32
  //#endregion
33
33
  export { AccordionGroup as default };
34
34
 
@@ -0,0 +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"}
@@ -0,0 +1,4 @@
1
+ import type { AvatarProps } from './Avatar.types.js';
2
+ declare const Avatar: ({ alt, badge, className, id, name, size, src }: AvatarProps) => import("react").JSX.Element;
3
+ export default Avatar;
4
+ //# sourceMappingURL=Avatar.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,48 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ //#region src/components/avatar/Avatar.tsx
4
+ var getInitials = (name) => {
5
+ const words = name.trim().split(/\s+/).filter(Boolean);
6
+ if (words.length === 0) return "";
7
+ return `${words[0]?.charAt(0) ?? ""}${words.length > 1 ? words.at(-1)?.charAt(0) ?? "" : ""}`.toUpperCase();
8
+ };
9
+ var getTone = (name) => {
10
+ let hash = 0;
11
+ for (const character of name) hash = hash * 31 + character.codePointAt(0) >>> 0;
12
+ return hash % 3;
13
+ };
14
+ var Avatar = ({ alt, badge, className, id, name, size = "default", src }) => {
15
+ const [failedSource, setFailedSource] = useState();
16
+ const showImage = Boolean(src) && failedSource !== src;
17
+ const initials = getInitials(name);
18
+ const tone = getTone(name);
19
+ return /* @__PURE__ */ jsxs("span", {
20
+ "aria-label": alt ?? name,
21
+ className: [
22
+ "chayns-avatar",
23
+ `chayns-avatar--tone-${tone}`,
24
+ size === "small" ? "chayns-avatar--small" : null,
25
+ className
26
+ ].filter(Boolean).join(" "),
27
+ id,
28
+ role: "img",
29
+ children: [showImage ? /* @__PURE__ */ jsx("img", {
30
+ alt: "",
31
+ className: "chayns-avatar__image",
32
+ onError: () => setFailedSource(src),
33
+ src
34
+ }) : /* @__PURE__ */ jsx("span", {
35
+ "aria-hidden": "true",
36
+ className: "chayns-avatar__initials",
37
+ children: initials
38
+ }), badge ? /* @__PURE__ */ jsx("span", {
39
+ "aria-hidden": "true",
40
+ className: "chayns-avatar__badge",
41
+ children: badge
42
+ }) : null]
43
+ });
44
+ };
45
+ //#endregion
46
+ export { Avatar as default };
47
+
48
+ //# sourceMappingURL=Avatar.js.map
@@ -0,0 +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"}
@@ -0,0 +1,46 @@
1
+ import type { ReactNode } from 'react';
2
+ /**
3
+ * @description Props for a single circular identity avatar: an image with a
4
+ * deterministic initials-and-tone fallback. `size` is a designer-approved
5
+ * local geometry variant for this component, not a global S/M/L density
6
+ * variant.
7
+ */
8
+ export interface AvatarProps {
9
+ /**
10
+ * @description Full name used to derive both the accessible name (unless
11
+ * `alt` is given) and the initials fallback shown when no image is
12
+ * available.
13
+ */
14
+ name: string;
15
+ /**
16
+ * @description Avatar geometry variant.
17
+ * @default 'default'
18
+ */
19
+ size?: 'default' | 'small';
20
+ /**
21
+ * @description Optional image source. Initials are shown instead when
22
+ * omitted or when the image fails to load.
23
+ */
24
+ src?: string;
25
+ /**
26
+ * @description Optional accessible name override for the avatar, used
27
+ * instead of `name` when the visible identity text differs from the
28
+ * accessible name.
29
+ */
30
+ alt?: string;
31
+ /**
32
+ * @description Decorative content positioned at the lower edge of the
33
+ * avatar, for example a presence or status marker. Always rendered
34
+ * `aria-hidden` — any meaning it conveys must also be available elsewhere.
35
+ */
36
+ badge?: ReactNode;
37
+ /**
38
+ * @description Additional class names appended to the avatar root element.
39
+ */
40
+ className?: string;
41
+ /**
42
+ * @description Optional id on the avatar root element.
43
+ */
44
+ id?: string;
45
+ }
46
+ //# sourceMappingURL=Avatar.types.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,4 @@
1
+ import type { AvatarGroupProps } from './AvatarGroup.types.js';
2
+ declare const AvatarGroup: ({ children, className, id, max, size }: AvatarGroupProps) => import("react").JSX.Element;
3
+ export default AvatarGroup;
4
+ //# sourceMappingURL=AvatarGroup.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,26 @@
1
+ import { jsxs } from "react/jsx-runtime";
2
+ import { Children, cloneElement, isValidElement } from "react";
3
+ //#region src/components/avatar-group/AvatarGroup.tsx
4
+ var AvatarGroup = ({ children, className, id, max, size = "default" }) => {
5
+ const avatars = Children.toArray(children).filter((child) => isValidElement(child));
6
+ const limited = typeof max === "number" && max > 0;
7
+ const visibleCount = limited ? Math.max(max - 1, 0) : avatars.length;
8
+ const overflowCount = limited && avatars.length > max ? avatars.length - visibleCount : 0;
9
+ return /* @__PURE__ */ jsxs("span", {
10
+ className: [
11
+ "chayns-avatar-group",
12
+ size === "small" ? "chayns-avatar-group--small" : null,
13
+ className
14
+ ].filter(Boolean).join(" "),
15
+ id,
16
+ children: [avatars.slice(0, visibleCount).map((avatar) => cloneElement(avatar, { size })), overflowCount > 0 ? /* @__PURE__ */ jsxs("span", {
17
+ "aria-hidden": "true",
18
+ className: "chayns-avatar-group__overflow",
19
+ children: ["+", overflowCount]
20
+ }) : null]
21
+ });
22
+ };
23
+ //#endregion
24
+ export { AvatarGroup as default };
25
+
26
+ //# sourceMappingURL=AvatarGroup.js.map
@@ -0,0 +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"}
@@ -0,0 +1,33 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { AvatarProps } from '../avatar/Avatar.types.js';
3
+ /**
4
+ * @description Props for a compact, overlapping stack of `Avatar` children
5
+ * with an overflow tile once `max` is exceeded.
6
+ */
7
+ export interface AvatarGroupProps {
8
+ /**
9
+ * @description `Avatar` children displayed with overlap, in order.
10
+ */
11
+ children?: ReactNode;
12
+ /**
13
+ * @description Maximum number of visible tiles, including the overflow
14
+ * tile shown for any remaining avatars beyond this count. Omit to render
15
+ * every child without an overflow tile.
16
+ */
17
+ max?: number;
18
+ /**
19
+ * @description Size applied uniformly to every `Avatar` child and to the
20
+ * overflow tile; overrides each child's own `size`.
21
+ * @default 'default'
22
+ */
23
+ size?: AvatarProps['size'];
24
+ /**
25
+ * @description Additional class names appended to the group root element.
26
+ */
27
+ className?: string;
28
+ /**
29
+ * @description Optional id on the group root element.
30
+ */
31
+ id?: string;
32
+ }
33
+ //# sourceMappingURL=AvatarGroup.types.d.ts.map
@@ -0,0 +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"}
@@ -1 +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"}
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;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"}
@@ -1,9 +1,12 @@
1
- import ButtonIcon from "./ButtonIcon.js";
2
- import { getButtonClassName } from "./buttonClassName.js";
1
+ import ButtonIcon from "./button-icon/ButtonIcon.js";
3
2
  import { jsx, jsxs } from "react/jsx-runtime";
4
3
  //#region src/components/button/Button.tsx
5
4
  function Button({ children, className, icon, type = "button", variant, ...buttonProps }) {
6
- const resolvedClassName = getButtonClassName("chayns-button", variant, className);
5
+ const resolvedClassName = [
6
+ "chayns-button",
7
+ `chayns-button--${variant}`,
8
+ className
9
+ ].filter(Boolean).join(" ");
7
10
  return /* @__PURE__ */ jsxs("button", {
8
11
  ...buttonProps,
9
12
  className: resolvedClassName,
@@ -1 +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"}
1
+ {"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"}