@5voltfx/design-system 0.1.1 → 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/dist/chunk-2KHDM6UP.js +58 -0
- package/dist/chunk-2KHDM6UP.js.map +1 -0
- package/dist/chunk-45346SXP.js +65 -0
- package/dist/chunk-45346SXP.js.map +1 -0
- package/dist/chunk-BAISLPWP.js +14 -0
- package/dist/chunk-BAISLPWP.js.map +1 -0
- package/dist/chunk-CT2TMR44.js +1 -0
- package/dist/chunk-CT2TMR44.js.map +1 -0
- package/dist/chunk-DD5VKG3L.js +22 -0
- package/dist/chunk-DD5VKG3L.js.map +1 -0
- package/dist/chunk-HLP2MPQ6.js +110 -0
- package/dist/chunk-HLP2MPQ6.js.map +1 -0
- package/dist/chunk-HPOL5NKF.js +22 -0
- package/dist/chunk-HPOL5NKF.js.map +1 -0
- package/dist/chunk-I3NS5MAC.js +23 -0
- package/dist/chunk-I3NS5MAC.js.map +1 -0
- package/dist/chunk-LPEUQ2DE.js +48 -0
- package/dist/chunk-LPEUQ2DE.js.map +1 -0
- package/dist/chunk-LY5MPGW2.js +129 -0
- package/dist/chunk-LY5MPGW2.js.map +1 -0
- package/dist/chunk-NJ2SBQYA.js +1208 -0
- package/dist/chunk-NJ2SBQYA.js.map +1 -0
- package/dist/chunk-R42A3ZCY.js +16 -0
- package/dist/chunk-R42A3ZCY.js.map +1 -0
- package/dist/chunk-UZW4E2UH.js +206 -0
- package/dist/chunk-UZW4E2UH.js.map +1 -0
- package/dist/chunk-VRGTUKSJ.js +20 -0
- package/dist/chunk-VRGTUKSJ.js.map +1 -0
- package/dist/chunk-YLUQANAI.js +1023 -0
- package/dist/chunk-YLUQANAI.js.map +1 -0
- package/dist/chunk-ZVUDPTFZ.js +76 -0
- package/dist/chunk-ZVUDPTFZ.js.map +1 -0
- package/dist/components/Accordion/Accordion.d.ts +29 -0
- package/dist/components/Accordion/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion/index.css +58 -0
- package/dist/components/Accordion/index.css.map +1 -0
- package/dist/components/Accordion/index.d.ts +2 -0
- package/dist/components/Accordion/index.d.ts.map +1 -0
- package/dist/components/Accordion/index.js +7 -0
- package/dist/components/Accordion/index.js.map +1 -0
- package/dist/components/Button/Button.d.ts +8 -0
- package/dist/components/Button/Button.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/Card/Card.d.ts +6 -0
- package/dist/components/Card/Card.d.ts.map +1 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/Card/index.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +15 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/index.css +57 -0
- package/dist/components/Checkbox/index.css.map +1 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Checkbox/index.js +7 -0
- package/dist/components/Checkbox/index.js.map +1 -0
- package/dist/components/DialNav/DialNav.d.ts +48 -0
- package/dist/components/DialNav/DialNav.d.ts.map +1 -0
- package/dist/components/DialNav/geometry.d.ts +159 -0
- package/dist/components/DialNav/geometry.d.ts.map +1 -0
- package/dist/components/DialNav/index.css +321 -0
- package/dist/components/DialNav/index.css.map +1 -0
- package/dist/components/DialNav/index.d.ts +2 -0
- package/dist/components/DialNav/index.d.ts.map +1 -0
- package/dist/components/DialNav/index.js +8 -0
- package/dist/components/DialNav/index.js.map +1 -0
- package/dist/components/DialNav/variants/Concentric.d.ts +10 -0
- package/dist/components/DialNav/variants/Concentric.d.ts.map +1 -0
- package/dist/components/DialNav/variants/RatchetFan.d.ts +12 -0
- package/dist/components/DialNav/variants/RatchetFan.d.ts.map +1 -0
- package/dist/components/DialNav/variants/Volvelle.d.ts +12 -0
- package/dist/components/DialNav/variants/Volvelle.d.ts.map +1 -0
- package/dist/components/Footer/Footer.d.ts +15 -0
- package/dist/components/Footer/Footer.d.ts.map +1 -0
- package/dist/components/Footer/index.d.ts +2 -0
- package/dist/components/Footer/index.d.ts.map +1 -0
- package/dist/components/FormField/FormField.d.ts +27 -0
- package/dist/components/FormField/FormField.d.ts.map +1 -0
- package/dist/components/FormField/index.css +31 -0
- package/dist/components/FormField/index.css.map +1 -0
- package/dist/components/FormField/index.d.ts +2 -0
- package/dist/components/FormField/index.d.ts.map +1 -0
- package/dist/components/FormField/index.js +8 -0
- package/dist/components/FormField/index.js.map +1 -0
- package/dist/components/Header/Header.d.ts +15 -0
- package/dist/components/Header/Header.d.ts.map +1 -0
- package/dist/components/Header/index.d.ts +2 -0
- package/dist/components/Header/index.d.ts.map +1 -0
- package/dist/components/Input/Input.d.ts +16 -0
- package/dist/components/Input/Input.d.ts.map +1 -0
- package/dist/components/Input/index.css +45 -0
- package/dist/components/Input/index.css.map +1 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Input/index.d.ts.map +1 -0
- package/dist/components/Input/index.js +7 -0
- package/dist/components/Input/index.js.map +1 -0
- package/dist/components/Label/Label.d.ts +15 -0
- package/dist/components/Label/Label.d.ts.map +1 -0
- package/dist/components/Label/index.css +14 -0
- package/dist/components/Label/index.css.map +1 -0
- package/dist/components/Label/index.d.ts +2 -0
- package/dist/components/Label/index.d.ts.map +1 -0
- package/dist/components/Label/index.js +8 -0
- package/dist/components/Label/index.js.map +1 -0
- package/dist/components/Layout/Container.d.ts +6 -0
- package/dist/components/Layout/Container.d.ts.map +1 -0
- package/dist/components/Layout/Grid.d.ts +9 -0
- package/dist/components/Layout/Grid.d.ts.map +1 -0
- package/dist/components/Layout/Stack.d.ts +10 -0
- package/dist/components/Layout/Stack.d.ts.map +1 -0
- package/dist/components/Layout/index.d.ts +4 -0
- package/dist/components/Layout/index.d.ts.map +1 -0
- package/dist/components/Menu/Menu.d.ts +30 -0
- package/dist/components/Menu/Menu.d.ts.map +1 -0
- package/dist/components/Menu/index.css +77 -0
- package/dist/components/Menu/index.css.map +1 -0
- package/dist/components/Menu/index.d.ts +2 -0
- package/dist/components/Menu/index.d.ts.map +1 -0
- package/dist/components/Menu/index.js +7 -0
- package/dist/components/Menu/index.js.map +1 -0
- package/dist/components/Modal/Modal.d.ts +24 -0
- package/dist/components/Modal/Modal.d.ts.map +1 -0
- package/dist/components/Modal/index.css +101 -0
- package/dist/components/Modal/index.css.map +1 -0
- package/dist/components/Modal/index.d.ts +2 -0
- package/dist/components/Modal/index.d.ts.map +1 -0
- package/dist/components/Modal/index.js +7 -0
- package/dist/components/Modal/index.js.map +1 -0
- package/dist/components/Nav/Nav.d.ts +10 -0
- package/dist/components/Nav/Nav.d.ts.map +1 -0
- package/dist/components/Nav/index.d.ts +2 -0
- package/dist/components/Nav/index.d.ts.map +1 -0
- package/dist/components/Radio/Radio.d.ts +17 -0
- package/dist/components/Radio/Radio.d.ts.map +1 -0
- package/dist/components/Radio/RadioGroup.d.ts +25 -0
- package/dist/components/Radio/RadioGroup.d.ts.map +1 -0
- package/dist/components/Radio/RadioGroupContext.d.ts +7 -0
- package/dist/components/Radio/RadioGroupContext.d.ts.map +1 -0
- package/dist/components/Radio/index.css +57 -0
- package/dist/components/Radio/index.css.map +1 -0
- package/dist/components/Radio/index.d.ts +3 -0
- package/dist/components/Radio/index.d.ts.map +1 -0
- package/dist/components/Radio/index.js +9 -0
- package/dist/components/Radio/index.js.map +1 -0
- package/dist/components/Select/Select.d.ts +18 -0
- package/dist/components/Select/Select.d.ts.map +1 -0
- package/dist/components/Select/index.css +52 -0
- package/dist/components/Select/index.css.map +1 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Select/index.js +7 -0
- package/dist/components/Select/index.js.map +1 -0
- package/dist/components/SlideRuleNav/SlideRuleNav.d.ts +54 -0
- package/dist/components/SlideRuleNav/SlideRuleNav.d.ts.map +1 -0
- package/dist/components/SlideRuleNav/geometry.d.ts +168 -0
- package/dist/components/SlideRuleNav/geometry.d.ts.map +1 -0
- package/dist/components/SlideRuleNav/index.css +196 -0
- package/dist/components/SlideRuleNav/index.css.map +1 -0
- package/dist/components/SlideRuleNav/index.d.ts +2 -0
- package/dist/components/SlideRuleNav/index.d.ts.map +1 -0
- package/dist/components/SlideRuleNav/index.js +8 -0
- package/dist/components/SlideRuleNav/index.js.map +1 -0
- package/dist/components/SlideRuleNav/variants/CursorRule.d.ts +11 -0
- package/dist/components/SlideRuleNav/variants/CursorRule.d.ts.map +1 -0
- package/dist/components/SlideRuleNav/variants/SlideStator.d.ts +13 -0
- package/dist/components/SlideRuleNav/variants/SlideStator.d.ts.map +1 -0
- package/dist/components/SlideRuleNav/variants/VernierCarriage.d.ts +13 -0
- package/dist/components/SlideRuleNav/variants/VernierCarriage.d.ts.map +1 -0
- package/dist/components/Switch/Switch.d.ts +15 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -0
- package/dist/components/Switch/index.css +49 -0
- package/dist/components/Switch/index.css.map +1 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Switch/index.d.ts.map +1 -0
- package/dist/components/Switch/index.js +7 -0
- package/dist/components/Switch/index.js.map +1 -0
- package/dist/components/Tabs/Tabs.d.ts +34 -0
- package/dist/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs/index.css +54 -0
- package/dist/components/Tabs/index.css.map +1 -0
- package/dist/components/Tabs/index.d.ts +2 -0
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/dist/components/Tabs/index.js +7 -0
- package/dist/components/Tabs/index.js.map +1 -0
- package/dist/components/Textarea/Textarea.d.ts +16 -0
- package/dist/components/Textarea/Textarea.d.ts.map +1 -0
- package/dist/components/Textarea/index.css +36 -0
- package/dist/components/Textarea/index.css.map +1 -0
- package/dist/components/Textarea/index.d.ts +2 -0
- package/dist/components/Textarea/index.d.ts.map +1 -0
- package/dist/components/Textarea/index.js +7 -0
- package/dist/components/Textarea/index.js.map +1 -0
- package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts +4 -0
- package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts.map +1 -0
- package/dist/components/ThemeSwitcher/index.d.ts +2 -0
- package/dist/components/ThemeSwitcher/index.d.ts.map +1 -0
- package/dist/components/Typography/Heading.d.ts +9 -0
- package/dist/components/Typography/Heading.d.ts.map +1 -0
- package/dist/components/Typography/Text.d.ts +9 -0
- package/dist/components/Typography/Text.d.ts.map +1 -0
- package/dist/components/Typography/index.d.ts +3 -0
- package/dist/components/Typography/index.d.ts.map +1 -0
- package/dist/components/_shared/useDetentTravel.d.ts +87 -0
- package/dist/components/_shared/useDetentTravel.d.ts.map +1 -0
- package/dist/components/_shared/usePointerDrag.d.ts +24 -0
- package/dist/components/_shared/usePointerDrag.d.ts.map +1 -0
- package/dist/components/_shared/useReducedMotion.d.ts +7 -0
- package/dist/components/_shared/useReducedMotion.d.ts.map +1 -0
- package/dist/components/_shared/validateStationCount.d.ts +13 -0
- package/dist/components/_shared/validateStationCount.d.ts.map +1 -0
- package/dist/index.css +1175 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +26 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +70 -10
- package/dist/index.js.map +1 -1
- package/dist/theme/ThemeContext.d.ts +2 -0
- package/dist/theme/ThemeContext.d.ts.map +1 -0
- package/dist/theme/ThemeProvider.d.ts +12 -0
- package/dist/theme/ThemeProvider.d.ts.map +1 -0
- package/dist/theme/themeConstants.d.ts +8 -0
- package/dist/theme/themeConstants.d.ts.map +1 -0
- package/dist/theme/useTheme.d.ts +2 -0
- package/dist/theme/useTheme.d.ts.map +1 -0
- package/package.json +21 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/Label.css","../../../src/components/FormField/FormField.css"],"sourcesContent":[".ds-label {\n display: inline-flex;\n align-items: center;\n gap: var(--ds-space-1);\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-100);\n font-weight: var(--ds-font-weight-medium);\n color: var(--ds-color-font-0);\n}\n\n.ds-label__required {\n color: var(--ds-color-danger);\n}\n",".ds-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--ds-space-2);\n}\n\n.ds-form-field__help {\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-100);\n color: var(--ds-color-font-1);\n}\n\n.ds-form-field__error {\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-100);\n color: var(--ds-color-danger);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;;;ACZA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generic header shell with brand/nav/actions slots, so each site's
|
|
3
|
+
* bespoke chrome (song-chart's auth-aware menu + fullscreen toggle,
|
|
4
|
+
* mattwelker.com's audio-loop toggle + Venmo link, 5voltfx.com's plain
|
|
5
|
+
* logo-with-text-fallback) stays app-specific and is passed in rather
|
|
6
|
+
* than encoded into this component.
|
|
7
|
+
*/
|
|
8
|
+
export function Header({ brand, brandHref, links, actions, className, }: {
|
|
9
|
+
brand: any;
|
|
10
|
+
brandHref?: string | undefined;
|
|
11
|
+
links?: never[] | undefined;
|
|
12
|
+
actions: any;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
}): import("react").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.jsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH;;;;;;gCAkBC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Text-like input. Controlled or uncontrolled — all native <input> props pass
|
|
3
|
+
* through via `...rest` (value/defaultValue, onChange, type, placeholder, …).
|
|
4
|
+
*
|
|
5
|
+
* @param {object} props
|
|
6
|
+
* @param {"sm"|"md"|"lg"} [props.size] - Control height/padding. Default "md".
|
|
7
|
+
* @param {boolean} [props.invalid] - Applies error styling + aria-invalid.
|
|
8
|
+
* @param {string} [props.className]
|
|
9
|
+
* @returns {import("react").ReactElement}
|
|
10
|
+
*/
|
|
11
|
+
export function Input({ size, invalid, className, ...rest }: {
|
|
12
|
+
size?: "md" | "sm" | "lg" | undefined;
|
|
13
|
+
invalid?: boolean | undefined;
|
|
14
|
+
className?: string | undefined;
|
|
15
|
+
}): import("react").ReactElement;
|
|
16
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.jsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,6DALG;IAA+B,IAAI;IACX,OAAO;IACR,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAexC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/* src/components/Input/Input.css */
|
|
2
|
+
.ds-input {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
font-family: var(--ds-font-body);
|
|
6
|
+
font-size: var(--ds-font-size-200);
|
|
7
|
+
line-height: var(--ds-line-height-normal);
|
|
8
|
+
color: var(--ds-color-font-0);
|
|
9
|
+
background-color: var(--ds-color-field-bg);
|
|
10
|
+
border: 1px solid var(--ds-color-field-border);
|
|
11
|
+
border-radius: var(--ds-radius-md);
|
|
12
|
+
transition: border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard), box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
13
|
+
}
|
|
14
|
+
.ds-input::placeholder {
|
|
15
|
+
color: var(--ds-color-font-1);
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
.ds-input--sm {
|
|
19
|
+
padding: var(--ds-space-2) var(--ds-space-3);
|
|
20
|
+
font-size: var(--ds-font-size-100);
|
|
21
|
+
}
|
|
22
|
+
.ds-input--md {
|
|
23
|
+
padding: var(--ds-space-3) var(--ds-space-4);
|
|
24
|
+
}
|
|
25
|
+
.ds-input--lg {
|
|
26
|
+
padding: var(--ds-space-4) var(--ds-space-5);
|
|
27
|
+
font-size: var(--ds-font-size-300);
|
|
28
|
+
}
|
|
29
|
+
.ds-input:focus-visible {
|
|
30
|
+
outline: none;
|
|
31
|
+
border-color: var(--ds-color-focus-ring);
|
|
32
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);
|
|
33
|
+
}
|
|
34
|
+
.ds-input--invalid {
|
|
35
|
+
border-color: var(--ds-color-danger);
|
|
36
|
+
}
|
|
37
|
+
.ds-input--invalid:focus-visible {
|
|
38
|
+
border-color: var(--ds-color-danger);
|
|
39
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-danger) 30%, transparent);
|
|
40
|
+
}
|
|
41
|
+
.ds-input:disabled {
|
|
42
|
+
opacity: 0.5;
|
|
43
|
+
cursor: not-allowed;
|
|
44
|
+
}
|
|
45
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Input/Input.css"],"sourcesContent":[".ds-input {\n display: block;\n width: 100%;\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-200);\n line-height: var(--ds-line-height-normal);\n color: var(--ds-color-font-0);\n background-color: var(--ds-color-field-bg);\n border: 1px solid var(--ds-color-field-border);\n border-radius: var(--ds-radius-md);\n transition:\n border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard),\n box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);\n}\n\n.ds-input::placeholder {\n color: var(--ds-color-font-1);\n opacity: 1;\n}\n\n.ds-input--sm {\n padding: var(--ds-space-2) var(--ds-space-3);\n font-size: var(--ds-font-size-100);\n}\n\n.ds-input--md {\n padding: var(--ds-space-3) var(--ds-space-4);\n}\n\n.ds-input--lg {\n padding: var(--ds-space-4) var(--ds-space-5);\n font-size: var(--ds-font-size-300);\n}\n\n.ds-input:focus-visible {\n outline: none;\n border-color: var(--ds-color-focus-ring);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);\n}\n\n.ds-input--invalid {\n border-color: var(--ds-color-danger);\n}\n\n.ds-input--invalid:focus-visible {\n border-color: var(--ds-color-danger);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--ds-color-danger) 30%, transparent);\n}\n\n.ds-input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,SAAO;AACP,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cACE,aAAa,IAAI,2BAA2B,IAAI,0BAA0B,EAC1E,WAAW,IAAI,2BAA2B,IAAI;AAClD;AAEA,CAfC,QAeQ;AACP,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AAC/B,aAAW,IAAI;AACjB;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AACjC;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AAC/B,aAAW,IAAI;AACjB;AAEA,CAlCC,QAkCQ;AACP,WAAS;AACT,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAChB,UAAU,GAAG,IAAI,EAAE,IAAI,uBAAuB,GAAG,EAAE;AACvD;AAEA,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CAJC,iBAIiB;AAChB,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAChB,UAAU,GAAG,IAAI,EAAE,IAAI,mBAAmB,GAAG,EAAE;AACnD;AAEA,CAnDC,QAmDQ;AACP,WAAS;AACT,UAAQ;AACV;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Form label primitive. Used standalone or rendered internally by FormField.
|
|
3
|
+
*
|
|
4
|
+
* @param {object} props
|
|
5
|
+
* @param {import("react").ReactNode} [props.children]
|
|
6
|
+
* @param {boolean} [props.required] - Appends a required marker.
|
|
7
|
+
* @param {string} [props.className]
|
|
8
|
+
* @returns {import("react").ReactElement}
|
|
9
|
+
*/
|
|
10
|
+
export function Label({ required, className, children, ...rest }: {
|
|
11
|
+
children?: import("react").ReactNode;
|
|
12
|
+
required?: boolean | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
}): import("react").ReactElement;
|
|
15
|
+
//# sourceMappingURL=Label.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.jsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,kEALG;IAA0C,QAAQ,GAA1C,OAAO,OAAO,EAAE,SAAS;IACT,QAAQ;IACT,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAgBxC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* src/components/Label/Label.css */
|
|
2
|
+
.ds-label {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--ds-space-1);
|
|
6
|
+
font-family: var(--ds-font-body);
|
|
7
|
+
font-size: var(--ds-font-size-100);
|
|
8
|
+
font-weight: var(--ds-font-weight-medium);
|
|
9
|
+
color: var(--ds-color-font-0);
|
|
10
|
+
}
|
|
11
|
+
.ds-label__required {
|
|
12
|
+
color: var(--ds-color-danger);
|
|
13
|
+
}
|
|
14
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Label/Label.css"],"sourcesContent":[".ds-label {\n display: inline-flex;\n align-items: center;\n gap: var(--ds-space-1);\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-100);\n font-weight: var(--ds-font-weight-medium);\n color: var(--ds-color-font-0);\n}\n\n.ds-label__required {\n color: var(--ds-color-danger);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Container.jsx"],"names":[],"mappings":"AAEA;;;;gCAOC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export function Grid({ as: Component, columns, gap, className, style, ...rest }: {
|
|
2
|
+
[x: string]: any;
|
|
3
|
+
as?: string | undefined;
|
|
4
|
+
columns?: number | undefined;
|
|
5
|
+
gap?: string | undefined;
|
|
6
|
+
className?: string | undefined;
|
|
7
|
+
style: any;
|
|
8
|
+
}): import("react").JSX.Element;
|
|
9
|
+
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Grid.jsx"],"names":[],"mappings":"AAEA;;;;;;;gCAmBC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function Stack({ as: Component, gap, direction, align, className, style, ...rest }: {
|
|
2
|
+
[x: string]: any;
|
|
3
|
+
as?: string | undefined;
|
|
4
|
+
gap?: string | undefined;
|
|
5
|
+
direction?: string | undefined;
|
|
6
|
+
align: any;
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
style: any;
|
|
9
|
+
}): import("react").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Stack.jsx"],"names":[],"mappings":"AAEA;;;;;;;;gCAqBC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {object} MenuItem
|
|
3
|
+
* @property {import("react").ReactNode} label
|
|
4
|
+
* @property {() => void} [onSelect]
|
|
5
|
+
* @property {boolean} [disabled]
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Dropdown menu: a trigger button that toggles a popover list. Closes on
|
|
9
|
+
* outside click and Escape; Up/Down arrows move a roving focus between items,
|
|
10
|
+
* Enter/Space activates. Uses role="menu"/"menuitem".
|
|
11
|
+
*
|
|
12
|
+
* @param {object} props
|
|
13
|
+
* @param {import("react").ReactNode} props.trigger - Trigger button content.
|
|
14
|
+
* @param {MenuItem[]} props.items
|
|
15
|
+
* @param {"start"|"end"} [props.align] - Which edge the menu aligns to. Default "start".
|
|
16
|
+
* @param {string} [props.className]
|
|
17
|
+
* @returns {import("react").ReactElement}
|
|
18
|
+
*/
|
|
19
|
+
export function Menu({ trigger, items, align, className }: {
|
|
20
|
+
trigger: import("react").ReactNode;
|
|
21
|
+
items: MenuItem[];
|
|
22
|
+
align?: "start" | "end" | undefined;
|
|
23
|
+
className?: string | undefined;
|
|
24
|
+
}): import("react").ReactElement;
|
|
25
|
+
export type MenuItem = {
|
|
26
|
+
label: import("react").ReactNode;
|
|
27
|
+
onSelect?: (() => void) | undefined;
|
|
28
|
+
disabled?: boolean | undefined;
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.jsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH;;;;;;;;;;;GAWG;AACH,2DANG;IAAyC,OAAO,EAAxC,OAAO,OAAO,EAAE,SAAS;IACP,KAAK,EAAvB,QAAQ,EAAE;IACY,KAAK;IACZ,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAiIxC;;WAhJa,OAAO,OAAO,EAAE,SAAS;sBACnB,IAAI"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/* src/components/Menu/Menu.css */
|
|
2
|
+
.ds-menu {
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
}
|
|
6
|
+
.ds-menu__trigger {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--ds-space-2);
|
|
10
|
+
padding: var(--ds-space-3) var(--ds-space-4);
|
|
11
|
+
font-family: var(--ds-font-body);
|
|
12
|
+
font-size: var(--ds-font-size-200);
|
|
13
|
+
font-weight: var(--ds-font-weight-medium);
|
|
14
|
+
color: var(--ds-color-font-0);
|
|
15
|
+
background-color: var(--ds-color-field-bg);
|
|
16
|
+
border: 1px solid var(--ds-color-field-border);
|
|
17
|
+
border-radius: var(--ds-radius-md);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
}
|
|
20
|
+
.ds-menu__trigger:focus-visible {
|
|
21
|
+
outline: 2px solid var(--ds-color-focus-ring);
|
|
22
|
+
outline-offset: 2px;
|
|
23
|
+
}
|
|
24
|
+
.ds-menu__list {
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: calc(100% + var(--ds-space-2));
|
|
27
|
+
z-index: var(--ds-z-dropdown);
|
|
28
|
+
min-width: 12rem;
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: var(--ds-space-2);
|
|
31
|
+
list-style: none;
|
|
32
|
+
background-color: var(--ds-color-bg-1);
|
|
33
|
+
border: 1px solid var(--ds-color-bw-1);
|
|
34
|
+
border-radius: var(--ds-radius-md);
|
|
35
|
+
box-shadow: var(--ds-shadow-md);
|
|
36
|
+
animation: ds-menu-open var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
|
|
37
|
+
}
|
|
38
|
+
.ds-menu__list--start {
|
|
39
|
+
left: 0;
|
|
40
|
+
}
|
|
41
|
+
.ds-menu__list--end {
|
|
42
|
+
right: 0;
|
|
43
|
+
}
|
|
44
|
+
.ds-menu__item {
|
|
45
|
+
display: block;
|
|
46
|
+
width: 100%;
|
|
47
|
+
padding: var(--ds-space-2) var(--ds-space-3);
|
|
48
|
+
text-align: left;
|
|
49
|
+
font-family: var(--ds-font-body);
|
|
50
|
+
font-size: var(--ds-font-size-200);
|
|
51
|
+
color: var(--ds-color-font-0);
|
|
52
|
+
background: transparent;
|
|
53
|
+
border: none;
|
|
54
|
+
border-radius: var(--ds-radius-sm);
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
}
|
|
57
|
+
.ds-menu__item:hover:not(:disabled),
|
|
58
|
+
.ds-menu__item:focus-visible {
|
|
59
|
+
background-color: var(--ds-color-bw-1);
|
|
60
|
+
outline: none;
|
|
61
|
+
}
|
|
62
|
+
.ds-menu__item:disabled {
|
|
63
|
+
opacity: 0.5;
|
|
64
|
+
cursor: not-allowed;
|
|
65
|
+
}
|
|
66
|
+
@keyframes ds-menu-open {
|
|
67
|
+
from {
|
|
68
|
+
opacity: 0;
|
|
69
|
+
transform: translateY(-4px);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
@media (prefers-reduced-motion: reduce) {
|
|
73
|
+
.ds-menu__list {
|
|
74
|
+
animation: none;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Menu/Menu.css"],"sourcesContent":[".ds-menu {\n position: relative;\n display: inline-block;\n}\n\n.ds-menu__trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ds-space-2);\n padding: var(--ds-space-3) var(--ds-space-4);\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-200);\n font-weight: var(--ds-font-weight-medium);\n color: var(--ds-color-font-0);\n background-color: var(--ds-color-field-bg);\n border: 1px solid var(--ds-color-field-border);\n border-radius: var(--ds-radius-md);\n cursor: pointer;\n}\n\n.ds-menu__trigger:focus-visible {\n outline: 2px solid var(--ds-color-focus-ring);\n outline-offset: 2px;\n}\n\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--ds-space-2));\n z-index: var(--ds-z-dropdown);\n min-width: 12rem;\n margin: 0;\n padding: var(--ds-space-2);\n list-style: none;\n background-color: var(--ds-color-bg-1);\n border: 1px solid var(--ds-color-bw-1);\n border-radius: var(--ds-radius-md);\n box-shadow: var(--ds-shadow-md);\n animation: ds-menu-open var(--ds-motion-duration-fast)\n var(--ds-motion-ease-standard);\n}\n\n.ds-menu__list--start {\n left: 0;\n}\n.ds-menu__list--end {\n right: 0;\n}\n\n.ds-menu__item {\n display: block;\n width: 100%;\n padding: var(--ds-space-2) var(--ds-space-3);\n text-align: left;\n font-family: var(--ds-font-body);\n font-size: var(--ds-font-size-200);\n color: var(--ds-color-font-0);\n background: transparent;\n border: none;\n border-radius: var(--ds-radius-sm);\n cursor: pointer;\n}\n\n.ds-menu__item:hover:not(:disabled),\n.ds-menu__item:focus-visible {\n background-color: var(--ds-color-bw-1);\n outline: none;\n}\n\n.ds-menu__item:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n@keyframes ds-menu-open {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ds-menu__list {\n animation: none;\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI,cAAc,IAAI;AAC/B,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,UAAQ;AACV;AAEA,CAfC,gBAegB;AACf,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAEA,CAAC;AACC,YAAU;AACV,OAAK,KAAK,KAAK,EAAE,IAAI;AACrB,WAAS,IAAI;AACb,aAAW;AACX,UAAQ;AACR,WAAS,IAAI;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,aAAW,aAAa,IAAI,2BAC1B,IAAI;AACR;AAEA,CAAC;AACC,QAAM;AACR;AACA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,WAAS,IAAI,cAAc,IAAI;AAC/B,cAAY;AACZ,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACX,cAAY;AACZ,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACV;AAEA,CAdC,aAca,MAAM,KAAK;AACzB,CAfC,aAea;AACZ,oBAAkB,IAAI;AACtB,WAAS;AACX;AAEA,CApBC,aAoBa;AACZ,WAAS;AACT,UAAQ;AACV;AAEA,WApCa;AAqCX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,QAAO,wBAAyB;AAC9B,GAxDD;AAyDG,eAAW;AACb;AACF;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accessible dialog rendered in a portal on document.body. Handles focus trap,
|
|
3
|
+
* Escape-to-close, backdrop click, body scroll lock, and returns focus to the
|
|
4
|
+
* element that was focused before it opened. Nothing renders when `open` is
|
|
5
|
+
* false.
|
|
6
|
+
*
|
|
7
|
+
* @param {object} props
|
|
8
|
+
* @param {boolean} props.open
|
|
9
|
+
* @param {() => void} props.onClose
|
|
10
|
+
* @param {import("react").ReactNode} [props.title]
|
|
11
|
+
* @param {"sm"|"md"|"lg"} [props.size] - Panel max-width. Default "md".
|
|
12
|
+
* @param {import("react").ReactNode} [props.children]
|
|
13
|
+
* @param {string} [props.className]
|
|
14
|
+
* @returns {import("react").ReactPortal | null}
|
|
15
|
+
*/
|
|
16
|
+
export function Modal({ open, onClose, title, size, children, className, }: {
|
|
17
|
+
open: boolean;
|
|
18
|
+
onClose: () => void;
|
|
19
|
+
title?: import("react").ReactNode;
|
|
20
|
+
size?: "md" | "sm" | "lg" | undefined;
|
|
21
|
+
children?: import("react").ReactNode;
|
|
22
|
+
className?: string | undefined;
|
|
23
|
+
}): import("react").ReactPortal | null;
|
|
24
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.jsx"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;GAcG;AACH,4EARG;IAAuB,IAAI,EAAnB,OAAO;IACW,OAAO,EAAzB,MAAM,IAAI;IACwB,KAAK,GAAvC,OAAO,OAAO,EAAE,SAAS;IACF,IAAI;IACO,QAAQ,GAA1C,OAAO,OAAO,EAAE,SAAS;IACV,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,WAAW,GAAG,IAAI,CAsG9C"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/* src/components/Modal/Modal.css */
|
|
2
|
+
.ds-modal {
|
|
3
|
+
position: fixed;
|
|
4
|
+
inset: 0;
|
|
5
|
+
z-index: var(--ds-z-modal);
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
padding: var(--ds-space-4);
|
|
10
|
+
}
|
|
11
|
+
.ds-modal__backdrop {
|
|
12
|
+
position: fixed;
|
|
13
|
+
inset: 0;
|
|
14
|
+
z-index: var(--ds-z-overlay);
|
|
15
|
+
background-color: color-mix(in srgb, var(--ds-color-bw-0) 60%, transparent);
|
|
16
|
+
animation: ds-modal-fade var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
17
|
+
}
|
|
18
|
+
.ds-modal__panel {
|
|
19
|
+
position: relative;
|
|
20
|
+
z-index: var(--ds-z-modal);
|
|
21
|
+
width: 100%;
|
|
22
|
+
max-height: calc(100vh - 2 * var(--ds-space-6));
|
|
23
|
+
overflow-y: auto;
|
|
24
|
+
background-color: var(--ds-color-bg-1);
|
|
25
|
+
color: var(--ds-color-font-0);
|
|
26
|
+
border: 1px solid var(--ds-color-bw-1);
|
|
27
|
+
border-radius: var(--ds-radius-lg);
|
|
28
|
+
box-shadow: var(--ds-shadow-lg);
|
|
29
|
+
animation: ds-modal-rise var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
30
|
+
}
|
|
31
|
+
.ds-modal__panel--sm {
|
|
32
|
+
max-width: 24rem;
|
|
33
|
+
}
|
|
34
|
+
.ds-modal__panel--md {
|
|
35
|
+
max-width: 34rem;
|
|
36
|
+
}
|
|
37
|
+
.ds-modal__panel--lg {
|
|
38
|
+
max-width: 48rem;
|
|
39
|
+
}
|
|
40
|
+
.ds-modal__panel:focus-visible {
|
|
41
|
+
outline: none;
|
|
42
|
+
}
|
|
43
|
+
.ds-modal__header {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
gap: var(--ds-space-4);
|
|
48
|
+
padding: var(--ds-space-5) var(--ds-space-5) 0;
|
|
49
|
+
}
|
|
50
|
+
.ds-modal__title {
|
|
51
|
+
margin: 0;
|
|
52
|
+
font-family: var(--ds-font-body);
|
|
53
|
+
font-weight: var(--ds-font-weight-bold);
|
|
54
|
+
font-size: var(--ds-font-size-400);
|
|
55
|
+
line-height: var(--ds-line-height-tight);
|
|
56
|
+
}
|
|
57
|
+
.ds-modal__close {
|
|
58
|
+
display: inline-flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
width: 2rem;
|
|
62
|
+
height: 2rem;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
font-size: var(--ds-font-size-400);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
color: var(--ds-color-font-1);
|
|
67
|
+
background: transparent;
|
|
68
|
+
border: none;
|
|
69
|
+
border-radius: var(--ds-radius-pill);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
|
|
72
|
+
}
|
|
73
|
+
.ds-modal__close:hover {
|
|
74
|
+
background-color: var(--ds-color-bw-1);
|
|
75
|
+
color: var(--ds-color-font-0);
|
|
76
|
+
}
|
|
77
|
+
.ds-modal__close:focus-visible {
|
|
78
|
+
outline: 2px solid var(--ds-color-focus-ring);
|
|
79
|
+
outline-offset: 2px;
|
|
80
|
+
}
|
|
81
|
+
.ds-modal__body {
|
|
82
|
+
padding: var(--ds-space-5);
|
|
83
|
+
}
|
|
84
|
+
@keyframes ds-modal-fade {
|
|
85
|
+
from {
|
|
86
|
+
opacity: 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
@keyframes ds-modal-rise {
|
|
90
|
+
from {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
transform: translateY(8px);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
@media (prefers-reduced-motion: reduce) {
|
|
96
|
+
.ds-modal__backdrop,
|
|
97
|
+
.ds-modal__panel {
|
|
98
|
+
animation: none;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Modal/Modal.css"],"sourcesContent":[".ds-modal {\n position: fixed;\n inset: 0;\n z-index: var(--ds-z-modal);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--ds-space-4);\n}\n\n.ds-modal__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--ds-z-overlay);\n background-color: color-mix(in srgb, var(--ds-color-bw-0) 60%, transparent);\n animation: ds-modal-fade var(--ds-motion-duration-base)\n var(--ds-motion-ease-standard);\n}\n\n.ds-modal__panel {\n position: relative;\n z-index: var(--ds-z-modal);\n width: 100%;\n max-height: calc(100vh - 2 * var(--ds-space-6));\n overflow-y: auto;\n background-color: var(--ds-color-bg-1);\n color: var(--ds-color-font-0);\n border: 1px solid var(--ds-color-bw-1);\n border-radius: var(--ds-radius-lg);\n box-shadow: var(--ds-shadow-lg);\n animation: ds-modal-rise var(--ds-motion-duration-base)\n var(--ds-motion-ease-standard);\n}\n\n.ds-modal__panel--sm {\n max-width: 24rem;\n}\n.ds-modal__panel--md {\n max-width: 34rem;\n}\n.ds-modal__panel--lg {\n max-width: 48rem;\n}\n\n.ds-modal__panel:focus-visible {\n outline: none;\n}\n\n.ds-modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ds-space-4);\n padding: var(--ds-space-5) var(--ds-space-5) 0;\n}\n\n.ds-modal__title {\n margin: 0;\n font-family: var(--ds-font-body);\n font-weight: var(--ds-font-weight-bold);\n font-size: var(--ds-font-size-400);\n line-height: var(--ds-line-height-tight);\n}\n\n.ds-modal__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n flex-shrink: 0;\n font-size: var(--ds-font-size-400);\n line-height: 1;\n color: var(--ds-color-font-1);\n background: transparent;\n border: none;\n border-radius: var(--ds-radius-pill);\n cursor: pointer;\n transition: background-color var(--ds-motion-duration-fast)\n var(--ds-motion-ease-standard);\n}\n\n.ds-modal__close:hover {\n background-color: var(--ds-color-bw-1);\n color: var(--ds-color-font-0);\n}\n\n.ds-modal__close:focus-visible {\n outline: 2px solid var(--ds-color-focus-ring);\n outline-offset: 2px;\n}\n\n.ds-modal__body {\n padding: var(--ds-space-5);\n}\n\n@keyframes ds-modal-fade {\n from {\n opacity: 0;\n }\n}\n\n@keyframes ds-modal-rise {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ds-modal__backdrop,\n .ds-modal__panel {\n animation: none;\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS,IAAI;AACb,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS,IAAI;AACf;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS,IAAI;AACb,oBAAkB,UAAU,GAAG,IAAI,EAAE,IAAI,iBAAiB,GAAG,EAAE;AAC/D,aAAW,cAAc,IAAI,2BAC3B,IAAI;AACR;AAEA,CAAC;AACC,YAAU;AACV,WAAS,IAAI;AACb,SAAO;AACP,cAAY,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACjC,cAAY;AACZ,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,aAAW,cAAc,IAAI,2BAC3B,IAAI;AACR;AAEA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,aAAW;AACb;AAEA,CAzBC,eAyBe;AACd,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,WAAS,IAAI,cAAc,IAAI,cAAc;AAC/C;AAEA,CAAC;AACC,UAAQ;AACR,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,eAAa;AACb,aAAW,IAAI;AACf,eAAa;AACb,SAAO,IAAI;AACX,cAAY;AACZ,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,iBAAiB,IAAI,2BAC/B,IAAI;AACR;AAEA,CAlBC,eAkBe;AACd,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEA,CAvBC,eAuBe;AACd,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS,IAAI;AACf;AAEA,WAjFa;AAkFX;AACE,aAAS;AACX;AACF;AAEA,WAxEa;AAyEX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,QAAO,wBAAyB;AAC9B,GApGD;AAAA,EAqGC,CA5FD;AA6FG,eAAW;AACb;AACF;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generic nav-links list. Generalizes 5voltfx.com's Navbar.jsx (active
|
|
3
|
+
* underline via NavLink), song-chart's SiteHeader nav, and mattwelker.com's
|
|
4
|
+
* PageNav link list into one component driven by a `links` array.
|
|
5
|
+
*/
|
|
6
|
+
export function Nav({ links, className }: {
|
|
7
|
+
links?: never[] | undefined;
|
|
8
|
+
className?: string | undefined;
|
|
9
|
+
}): import("react").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=Nav.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/Nav.jsx"],"names":[],"mappings":"AAGA;;;;GAIG;AACH;;;gCAoBC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Radio button with a styled indicator over a native <input type="radio">.
|
|
3
|
+
* Inside a RadioGroup it inherits `name` and selection state automatically;
|
|
4
|
+
* standalone, pass `name`/`checked`/`onChange` yourself via `...rest`.
|
|
5
|
+
*
|
|
6
|
+
* @param {object} props
|
|
7
|
+
* @param {import("react").ReactNode} [props.label] - Visible label text.
|
|
8
|
+
* @param {string} [props.value] - This option's value (used by RadioGroup).
|
|
9
|
+
* @param {string} [props.className]
|
|
10
|
+
* @returns {import("react").ReactElement}
|
|
11
|
+
*/
|
|
12
|
+
export function Radio({ label, value, className, ...rest }: {
|
|
13
|
+
label?: import("react").ReactNode;
|
|
14
|
+
value?: string | undefined;
|
|
15
|
+
className?: string | undefined;
|
|
16
|
+
}): import("react").ReactElement;
|
|
17
|
+
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.jsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,4DALG;IAA0C,KAAK,GAAvC,OAAO,OAAO,EAAE,SAAS;IACV,KAAK;IACL,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CA0BxC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Groups Radios under one `name` with a single controlled selection. Provide
|
|
3
|
+
* either an `options` array or Radio children.
|
|
4
|
+
*
|
|
5
|
+
* @param {object} props
|
|
6
|
+
* @param {string} [props.name] - Shared input name. Auto-generated if omitted.
|
|
7
|
+
* @param {string} [props.value] - Currently selected value (controlled).
|
|
8
|
+
* @param {(value: string) => void} [props.onChange]
|
|
9
|
+
* @param {{ value: string, label: import("react").ReactNode }[]} [props.options]
|
|
10
|
+
* @param {import("react").ReactNode} [props.children]
|
|
11
|
+
* @param {string} [props.className]
|
|
12
|
+
* @returns {import("react").ReactElement}
|
|
13
|
+
*/
|
|
14
|
+
export function RadioGroup({ name, value, onChange, options, children, className, ...rest }: {
|
|
15
|
+
name?: string | undefined;
|
|
16
|
+
value?: string | undefined;
|
|
17
|
+
onChange?: ((value: string) => void) | undefined;
|
|
18
|
+
options?: {
|
|
19
|
+
value: string;
|
|
20
|
+
label: import("react").ReactNode;
|
|
21
|
+
}[] | undefined;
|
|
22
|
+
children?: import("react").ReactNode;
|
|
23
|
+
className?: string | undefined;
|
|
24
|
+
}): import("react").ReactElement;
|
|
25
|
+
//# sourceMappingURL=RadioGroup.d.ts.map
|