@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.
- package/README.md +51 -1
- package/dist/avatar.css +104 -0
- package/dist/components/accordion/Accordion.d.ts +1 -1
- package/dist/components/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/accordion/Accordion.js +2 -2
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/Accordion.types.d.ts +61 -16
- package/dist/components/accordion/Accordion.types.d.ts.map +1 -1
- package/dist/components/accordion-group/AccordionGroup.d.ts +4 -0
- package/dist/components/accordion-group/AccordionGroup.d.ts.map +1 -0
- package/dist/components/{accordion → accordion-group}/AccordionGroup.js +4 -4
- package/dist/components/accordion-group/AccordionGroup.js.map +1 -0
- package/dist/components/avatar/Avatar.d.ts +4 -0
- package/dist/components/avatar/Avatar.d.ts.map +1 -0
- package/dist/components/avatar/Avatar.js +48 -0
- package/dist/components/avatar/Avatar.js.map +1 -0
- package/dist/components/avatar/Avatar.types.d.ts +46 -0
- package/dist/components/avatar/Avatar.types.d.ts.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts +4 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.js +26 -0
- package/dist/components/avatar-group/AvatarGroup.js.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.types.d.ts +33 -0
- package/dist/components/avatar-group/AvatarGroup.types.d.ts.map +1 -0
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +6 -3
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/Button.types.d.ts +39 -25
- package/dist/components/button/Button.types.d.ts.map +1 -1
- package/dist/components/button/button-icon/ButtonIcon.d.ts +7 -0
- package/dist/components/button/button-icon/ButtonIcon.d.ts.map +1 -0
- package/dist/components/button/button-icon/ButtonIcon.js +17 -0
- package/dist/components/button/button-icon/ButtonIcon.js.map +1 -0
- package/dist/components/card/Card.d.ts +1 -1
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +2 -2
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.types.d.ts +16 -3
- package/dist/components/card/Card.types.d.ts.map +1 -1
- package/dist/components/{button → icon-button}/IconButton.d.ts +1 -1
- package/dist/components/icon-button/IconButton.d.ts.map +1 -0
- package/dist/components/{button → icon-button}/IconButton.js +7 -4
- package/dist/components/icon-button/IconButton.js.map +1 -0
- package/dist/components/icon-button/IconButton.types.d.ts +43 -0
- package/dist/components/icon-button/IconButton.types.d.ts.map +1 -0
- package/dist/components/list/List.d.ts +1 -1
- package/dist/components/list/List.d.ts.map +1 -1
- package/dist/components/list/List.js +2 -2
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/list/List.types.d.ts +62 -14
- package/dist/components/list/List.types.d.ts.map +1 -1
- package/dist/components/list-item/ListItem.d.ts +4 -0
- package/dist/components/list-item/ListItem.d.ts.map +1 -0
- package/dist/components/list-item/ListItem.js +42 -0
- package/dist/components/list-item/ListItem.js.map +1 -0
- package/dist/components/list-item/list-item-body/ListItemBody.d.ts +10 -0
- package/dist/components/list-item/list-item-body/ListItemBody.d.ts.map +1 -0
- package/dist/components/list-item/list-item-body/ListItemBody.js +30 -0
- package/dist/components/list-item/list-item-body/ListItemBody.js.map +1 -0
- package/dist/components/popup/Popup.d.ts +4 -0
- package/dist/components/popup/Popup.d.ts.map +1 -0
- package/dist/components/popup/Popup.js +107 -0
- package/dist/components/popup/Popup.js.map +1 -0
- package/dist/components/popup/Popup.types.d.ts +18 -0
- package/dist/components/popup/Popup.types.d.ts.map +1 -0
- package/dist/components/popup/PopupList.d.ts +4 -0
- package/dist/components/popup/PopupList.d.ts.map +1 -0
- package/dist/components/popup/PopupList.js +44 -0
- package/dist/components/popup/PopupList.js.map +1 -0
- package/dist/components/split-button/SplitButton.d.ts +4 -0
- package/dist/components/split-button/SplitButton.d.ts.map +1 -0
- package/dist/components/split-button/SplitButton.js +52 -0
- package/dist/components/split-button/SplitButton.js.map +1 -0
- package/dist/components/split-button/SplitButton.types.d.ts +12 -0
- package/dist/components/split-button/SplitButton.types.d.ts.map +1 -0
- package/dist/index.d.ts +21 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -4
- package/dist/list.css +8 -1
- package/dist/popup.css +34 -0
- package/dist/split-button.css +128 -0
- package/dist/styles.css +3 -0
- package/package.json +11 -19
- package/dist/components/accordion/AccordionGroup.d.ts +0 -4
- package/dist/components/accordion/AccordionGroup.d.ts.map +0 -1
- package/dist/components/accordion/AccordionGroup.js.map +0 -1
- package/dist/components/accordion/index.d.ts +0 -4
- package/dist/components/accordion/index.d.ts.map +0 -1
- package/dist/components/accordion/index.js +0 -3
- package/dist/components/button/ButtonIcon.d.ts +0 -7
- package/dist/components/button/ButtonIcon.d.ts.map +0 -1
- package/dist/components/button/ButtonIcon.js +0 -19
- package/dist/components/button/ButtonIcon.js.map +0 -1
- package/dist/components/button/IconButton.d.ts.map +0 -1
- package/dist/components/button/IconButton.js.map +0 -1
- package/dist/components/button/buttonClassName.d.ts +0 -3
- package/dist/components/button/buttonClassName.d.ts.map +0 -1
- package/dist/components/button/buttonClassName.js +0 -9
- package/dist/components/button/buttonClassName.js.map +0 -1
- package/dist/components/button/index.d.ts +0 -4
- package/dist/components/button/index.d.ts.map +0 -1
- package/dist/components/button/index.js +0 -3
- package/dist/components/card/index.d.ts +0 -3
- package/dist/components/card/index.d.ts.map +0 -1
- package/dist/components/card/index.js +0 -2
- package/dist/components/list/ListItem.d.ts +0 -4
- package/dist/components/list/ListItem.d.ts.map +0 -1
- package/dist/components/list/ListItem.js +0 -67
- package/dist/components/list/ListItem.js.map +0 -1
- package/dist/components/list/index.d.ts +0 -4
- package/dist/components/list/index.d.ts.map +0 -1
- 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
|
|
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.
|
package/dist/avatar.css
ADDED
|
@@ -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
|
|
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,
|
|
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
|
-
|
|
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\
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* @description Visible, localized header label used as the accordion's
|
|
12
|
+
* accessible name.
|
|
13
|
+
*/
|
|
5
14
|
title: ReactNode;
|
|
6
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* @description Panel content revealed when the accordion is open.
|
|
17
|
+
*/
|
|
7
18
|
children?: ReactNode;
|
|
8
|
-
/**
|
|
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
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* @description Uncontrolled initial open state. Ignored when inside an
|
|
26
|
+
* `AccordionGroup`.
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
11
29
|
defaultOpen?: boolean;
|
|
12
|
-
/**
|
|
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
|
-
/**
|
|
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
|
|
18
|
-
* identify
|
|
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
|
-
/**
|
|
46
|
+
/**
|
|
47
|
+
* @description Additional class names appended to the accordion root
|
|
48
|
+
* element.
|
|
49
|
+
*/
|
|
22
50
|
className?: string;
|
|
23
51
|
}
|
|
24
|
-
/**
|
|
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
|
-
/**
|
|
58
|
+
/**
|
|
59
|
+
* @description `Accordion` items belonging to the group.
|
|
60
|
+
*/
|
|
27
61
|
children?: ReactNode;
|
|
28
|
-
/**
|
|
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
|
-
/**
|
|
67
|
+
/**
|
|
68
|
+
* @description Uncontrolled id of the initially open item.
|
|
69
|
+
* @default null
|
|
70
|
+
*/
|
|
31
71
|
defaultOpenId?: string | null;
|
|
32
|
-
/**
|
|
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
|
-
/**
|
|
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
|
|
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 "
|
|
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
|
-
|
|
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 @@
|
|
|
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 @@
|
|
|
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;
|
|
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 =
|
|
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';\
|
|
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"}
|