@octavius2929-personal/design-system 0.13.0 → 0.15.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/index.cjs +658 -330
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -865
- package/dist/index.d.ts +53 -865
- package/dist/index.js +582 -254
- package/dist/index.js.map +1 -1
- package/package.json +3 -11
- package/LICENSE +0 -21
- package/README.md +0 -117
package/dist/index.js
CHANGED
|
@@ -26,6 +26,46 @@ function useToggle(initial = false) {
|
|
|
26
26
|
// src/components/container/index.tsx
|
|
27
27
|
import { forwardRef } from "react";
|
|
28
28
|
|
|
29
|
+
// src/testing/use-test-id.ts
|
|
30
|
+
import { useMemo as useMemo2 } from "react";
|
|
31
|
+
|
|
32
|
+
// src/testing/compose.ts
|
|
33
|
+
function normalizeSegment(seg) {
|
|
34
|
+
return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
35
|
+
}
|
|
36
|
+
function composeTestId(parts) {
|
|
37
|
+
return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// src/testing/context/test-id-context.tsx
|
|
41
|
+
import { createContext, useContext, useMemo } from "react";
|
|
42
|
+
import { jsx } from "react/jsx-runtime";
|
|
43
|
+
var TestIdContext = createContext([]);
|
|
44
|
+
function TestIdProvider({ context, children }) {
|
|
45
|
+
const parent = useContext(TestIdContext);
|
|
46
|
+
const value = useMemo(
|
|
47
|
+
() => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
|
|
48
|
+
[parent, context]
|
|
49
|
+
);
|
|
50
|
+
return /* @__PURE__ */ jsx(TestIdContext.Provider, { value, children });
|
|
51
|
+
}
|
|
52
|
+
function useTestIdContext() {
|
|
53
|
+
return useContext(TestIdContext);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// src/testing/use-test-id.ts
|
|
57
|
+
function useTestId(type, ownTestId) {
|
|
58
|
+
const ctx = useTestIdContext();
|
|
59
|
+
const testId = composeTestId([type, ...ctx, ownTestId]);
|
|
60
|
+
return useMemo2(
|
|
61
|
+
() => ({
|
|
62
|
+
testId,
|
|
63
|
+
slot: (name) => `${testId}__${normalizeSegment(name)}`
|
|
64
|
+
}),
|
|
65
|
+
[testId]
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
29
69
|
// src/theme/styles/sprinkles/index.css.ts
|
|
30
70
|
import { createSprinkles as _ad221 } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
|
|
31
71
|
var sprinkles = _ad221({ conditions: void 0, styles: { p: { mappings: ["padding"] }, px: { mappings: ["paddingLeft", "paddingRight"] }, py: { mappings: ["paddingTop", "paddingBottom"] }, pt: { mappings: ["paddingTop"] }, pr: { mappings: ["paddingRight"] }, pb: { mappings: ["paddingBottom"] }, pl: { mappings: ["paddingLeft"] }, m: { mappings: ["marginTop", "marginRight", "marginBottom", "marginLeft"] }, mx: { mappings: ["marginLeft", "marginRight"] }, my: { mappings: ["marginTop", "marginBottom"] }, mt: { mappings: ["marginTop"] }, mr: { mappings: ["marginRight"] }, mb: { mappings: ["marginBottom"] }, ml: { mappings: ["marginLeft"] }, bg: { mappings: ["background"] }, radius: { mappings: ["borderRadius"] }, padding: { values: { s0: { defaultClass: "sprinkles_padding_s0__qhecrd0" }, s1: { defaultClass: "sprinkles_padding_s1__qhecrd1" }, s2: { defaultClass: "sprinkles_padding_s2__qhecrd2" }, s3: { defaultClass: "sprinkles_padding_s3__qhecrd3" }, s4: { defaultClass: "sprinkles_padding_s4__qhecrd4" }, s5: { defaultClass: "sprinkles_padding_s5__qhecrd5" }, s6: { defaultClass: "sprinkles_padding_s6__qhecrd6" }, s7: { defaultClass: "sprinkles_padding_s7__qhecrd7" }, s8: { defaultClass: "sprinkles_padding_s8__qhecrd8" }, s9: { defaultClass: "sprinkles_padding_s9__qhecrd9" } } }, paddingTop: { values: { s0: { defaultClass: "sprinkles_paddingTop_s0__qhecrda" }, s1: { defaultClass: "sprinkles_paddingTop_s1__qhecrdb" }, s2: { defaultClass: "sprinkles_paddingTop_s2__qhecrdc" }, s3: { defaultClass: "sprinkles_paddingTop_s3__qhecrdd" }, s4: { defaultClass: "sprinkles_paddingTop_s4__qhecrde" }, s5: { defaultClass: "sprinkles_paddingTop_s5__qhecrdf" }, s6: { defaultClass: "sprinkles_paddingTop_s6__qhecrdg" }, s7: { defaultClass: "sprinkles_paddingTop_s7__qhecrdh" }, s8: { defaultClass: "sprinkles_paddingTop_s8__qhecrdi" }, s9: { defaultClass: "sprinkles_paddingTop_s9__qhecrdj" } } }, paddingRight: { values: { s0: { defaultClass: "sprinkles_paddingRight_s0__qhecrdk" }, s1: { defaultClass: "sprinkles_paddingRight_s1__qhecrdl" }, s2: { defaultClass: "sprinkles_paddingRight_s2__qhecrdm" }, s3: { defaultClass: "sprinkles_paddingRight_s3__qhecrdn" }, s4: { defaultClass: "sprinkles_paddingRight_s4__qhecrdo" }, s5: { defaultClass: "sprinkles_paddingRight_s5__qhecrdp" }, s6: { defaultClass: "sprinkles_paddingRight_s6__qhecrdq" }, s7: { defaultClass: "sprinkles_paddingRight_s7__qhecrdr" }, s8: { defaultClass: "sprinkles_paddingRight_s8__qhecrds" }, s9: { defaultClass: "sprinkles_paddingRight_s9__qhecrdt" } } }, paddingBottom: { values: { s0: { defaultClass: "sprinkles_paddingBottom_s0__qhecrdu" }, s1: { defaultClass: "sprinkles_paddingBottom_s1__qhecrdv" }, s2: { defaultClass: "sprinkles_paddingBottom_s2__qhecrdw" }, s3: { defaultClass: "sprinkles_paddingBottom_s3__qhecrdx" }, s4: { defaultClass: "sprinkles_paddingBottom_s4__qhecrdy" }, s5: { defaultClass: "sprinkles_paddingBottom_s5__qhecrdz" }, s6: { defaultClass: "sprinkles_paddingBottom_s6__qhecrd10" }, s7: { defaultClass: "sprinkles_paddingBottom_s7__qhecrd11" }, s8: { defaultClass: "sprinkles_paddingBottom_s8__qhecrd12" }, s9: { defaultClass: "sprinkles_paddingBottom_s9__qhecrd13" } } }, paddingLeft: { values: { s0: { defaultClass: "sprinkles_paddingLeft_s0__qhecrd14" }, s1: { defaultClass: "sprinkles_paddingLeft_s1__qhecrd15" }, s2: { defaultClass: "sprinkles_paddingLeft_s2__qhecrd16" }, s3: { defaultClass: "sprinkles_paddingLeft_s3__qhecrd17" }, s4: { defaultClass: "sprinkles_paddingLeft_s4__qhecrd18" }, s5: { defaultClass: "sprinkles_paddingLeft_s5__qhecrd19" }, s6: { defaultClass: "sprinkles_paddingLeft_s6__qhecrd1a" }, s7: { defaultClass: "sprinkles_paddingLeft_s7__qhecrd1b" }, s8: { defaultClass: "sprinkles_paddingLeft_s8__qhecrd1c" }, s9: { defaultClass: "sprinkles_paddingLeft_s9__qhecrd1d" } } }, marginTop: { values: { s0: { defaultClass: "sprinkles_marginTop_s0__qhecrd1e" }, s1: { defaultClass: "sprinkles_marginTop_s1__qhecrd1f" }, s2: { defaultClass: "sprinkles_marginTop_s2__qhecrd1g" }, s3: { defaultClass: "sprinkles_marginTop_s3__qhecrd1h" }, s4: { defaultClass: "sprinkles_marginTop_s4__qhecrd1i" }, s5: { defaultClass: "sprinkles_marginTop_s5__qhecrd1j" }, s6: { defaultClass: "sprinkles_marginTop_s6__qhecrd1k" }, s7: { defaultClass: "sprinkles_marginTop_s7__qhecrd1l" }, s8: { defaultClass: "sprinkles_marginTop_s8__qhecrd1m" }, s9: { defaultClass: "sprinkles_marginTop_s9__qhecrd1n" } } }, marginRight: { values: { s0: { defaultClass: "sprinkles_marginRight_s0__qhecrd1o" }, s1: { defaultClass: "sprinkles_marginRight_s1__qhecrd1p" }, s2: { defaultClass: "sprinkles_marginRight_s2__qhecrd1q" }, s3: { defaultClass: "sprinkles_marginRight_s3__qhecrd1r" }, s4: { defaultClass: "sprinkles_marginRight_s4__qhecrd1s" }, s5: { defaultClass: "sprinkles_marginRight_s5__qhecrd1t" }, s6: { defaultClass: "sprinkles_marginRight_s6__qhecrd1u" }, s7: { defaultClass: "sprinkles_marginRight_s7__qhecrd1v" }, s8: { defaultClass: "sprinkles_marginRight_s8__qhecrd1w" }, s9: { defaultClass: "sprinkles_marginRight_s9__qhecrd1x" } } }, marginBottom: { values: { s0: { defaultClass: "sprinkles_marginBottom_s0__qhecrd1y" }, s1: { defaultClass: "sprinkles_marginBottom_s1__qhecrd1z" }, s2: { defaultClass: "sprinkles_marginBottom_s2__qhecrd20" }, s3: { defaultClass: "sprinkles_marginBottom_s3__qhecrd21" }, s4: { defaultClass: "sprinkles_marginBottom_s4__qhecrd22" }, s5: { defaultClass: "sprinkles_marginBottom_s5__qhecrd23" }, s6: { defaultClass: "sprinkles_marginBottom_s6__qhecrd24" }, s7: { defaultClass: "sprinkles_marginBottom_s7__qhecrd25" }, s8: { defaultClass: "sprinkles_marginBottom_s8__qhecrd26" }, s9: { defaultClass: "sprinkles_marginBottom_s9__qhecrd27" } } }, marginLeft: { values: { s0: { defaultClass: "sprinkles_marginLeft_s0__qhecrd28" }, s1: { defaultClass: "sprinkles_marginLeft_s1__qhecrd29" }, s2: { defaultClass: "sprinkles_marginLeft_s2__qhecrd2a" }, s3: { defaultClass: "sprinkles_marginLeft_s3__qhecrd2b" }, s4: { defaultClass: "sprinkles_marginLeft_s4__qhecrd2c" }, s5: { defaultClass: "sprinkles_marginLeft_s5__qhecrd2d" }, s6: { defaultClass: "sprinkles_marginLeft_s6__qhecrd2e" }, s7: { defaultClass: "sprinkles_marginLeft_s7__qhecrd2f" }, s8: { defaultClass: "sprinkles_marginLeft_s8__qhecrd2g" }, s9: { defaultClass: "sprinkles_marginLeft_s9__qhecrd2h" } } }, gap: { values: { s0: { defaultClass: "sprinkles_gap_s0__qhecrd2i" }, s1: { defaultClass: "sprinkles_gap_s1__qhecrd2j" }, s2: { defaultClass: "sprinkles_gap_s2__qhecrd2k" }, s3: { defaultClass: "sprinkles_gap_s3__qhecrd2l" }, s4: { defaultClass: "sprinkles_gap_s4__qhecrd2m" }, s5: { defaultClass: "sprinkles_gap_s5__qhecrd2n" }, s6: { defaultClass: "sprinkles_gap_s6__qhecrd2o" }, s7: { defaultClass: "sprinkles_gap_s7__qhecrd2p" }, s8: { defaultClass: "sprinkles_gap_s8__qhecrd2q" }, s9: { defaultClass: "sprinkles_gap_s9__qhecrd2r" } } }, rowGap: { values: { s0: { defaultClass: "sprinkles_rowGap_s0__qhecrd2s" }, s1: { defaultClass: "sprinkles_rowGap_s1__qhecrd2t" }, s2: { defaultClass: "sprinkles_rowGap_s2__qhecrd2u" }, s3: { defaultClass: "sprinkles_rowGap_s3__qhecrd2v" }, s4: { defaultClass: "sprinkles_rowGap_s4__qhecrd2w" }, s5: { defaultClass: "sprinkles_rowGap_s5__qhecrd2x" }, s6: { defaultClass: "sprinkles_rowGap_s6__qhecrd2y" }, s7: { defaultClass: "sprinkles_rowGap_s7__qhecrd2z" }, s8: { defaultClass: "sprinkles_rowGap_s8__qhecrd30" }, s9: { defaultClass: "sprinkles_rowGap_s9__qhecrd31" } } }, columnGap: { values: { s0: { defaultClass: "sprinkles_columnGap_s0__qhecrd32" }, s1: { defaultClass: "sprinkles_columnGap_s1__qhecrd33" }, s2: { defaultClass: "sprinkles_columnGap_s2__qhecrd34" }, s3: { defaultClass: "sprinkles_columnGap_s3__qhecrd35" }, s4: { defaultClass: "sprinkles_columnGap_s4__qhecrd36" }, s5: { defaultClass: "sprinkles_columnGap_s5__qhecrd37" }, s6: { defaultClass: "sprinkles_columnGap_s6__qhecrd38" }, s7: { defaultClass: "sprinkles_columnGap_s7__qhecrd39" }, s8: { defaultClass: "sprinkles_columnGap_s8__qhecrd3a" }, s9: { defaultClass: "sprinkles_columnGap_s9__qhecrd3b" } } }, background: { values: { bg1: { defaultClass: "sprinkles_background_bg1__qhecrd3c" }, bg2: { defaultClass: "sprinkles_background_bg2__qhecrd3d" }, bg3: { defaultClass: "sprinkles_background_bg3__qhecrd3e" }, bgInset: { defaultClass: "sprinkles_background_bgInset__qhecrd3f" }, fg1: { defaultClass: "sprinkles_background_fg1__qhecrd3g" }, fg2: { defaultClass: "sprinkles_background_fg2__qhecrd3h" }, fg3: { defaultClass: "sprinkles_background_fg3__qhecrd3i" }, fgOnAccent: { defaultClass: "sprinkles_background_fgOnAccent__qhecrd3j" }, border1: { defaultClass: "sprinkles_background_border1__qhecrd3k" }, border2: { defaultClass: "sprinkles_background_border2__qhecrd3l" }, borderStrong: { defaultClass: "sprinkles_background_borderStrong__qhecrd3m" }, accent: { defaultClass: "sprinkles_background_accent__qhecrd3n" }, accentHover: { defaultClass: "sprinkles_background_accentHover__qhecrd3o" }, accentSoft: { defaultClass: "sprinkles_background_accentSoft__qhecrd3p" }, ok: { defaultClass: "sprinkles_background_ok__qhecrd3q" }, warn: { defaultClass: "sprinkles_background_warn__qhecrd3r" }, danger: { defaultClass: "sprinkles_background_danger__qhecrd3s" }, dangerHover: { defaultClass: "sprinkles_background_dangerHover__qhecrd3t" }, dangerSoft: { defaultClass: "sprinkles_background_dangerSoft__qhecrd3u" }, info: { defaultClass: "sprinkles_background_info__qhecrd3v" }, focus: { defaultClass: "sprinkles_background_focus__qhecrd3w" }, scrim: { defaultClass: "sprinkles_background_scrim__qhecrd3x" } } }, color: { values: { bg1: { defaultClass: "sprinkles_color_bg1__qhecrd3y" }, bg2: { defaultClass: "sprinkles_color_bg2__qhecrd3z" }, bg3: { defaultClass: "sprinkles_color_bg3__qhecrd40" }, bgInset: { defaultClass: "sprinkles_color_bgInset__qhecrd41" }, fg1: { defaultClass: "sprinkles_color_fg1__qhecrd42" }, fg2: { defaultClass: "sprinkles_color_fg2__qhecrd43" }, fg3: { defaultClass: "sprinkles_color_fg3__qhecrd44" }, fgOnAccent: { defaultClass: "sprinkles_color_fgOnAccent__qhecrd45" }, border1: { defaultClass: "sprinkles_color_border1__qhecrd46" }, border2: { defaultClass: "sprinkles_color_border2__qhecrd47" }, borderStrong: { defaultClass: "sprinkles_color_borderStrong__qhecrd48" }, accent: { defaultClass: "sprinkles_color_accent__qhecrd49" }, accentHover: { defaultClass: "sprinkles_color_accentHover__qhecrd4a" }, accentSoft: { defaultClass: "sprinkles_color_accentSoft__qhecrd4b" }, ok: { defaultClass: "sprinkles_color_ok__qhecrd4c" }, warn: { defaultClass: "sprinkles_color_warn__qhecrd4d" }, danger: { defaultClass: "sprinkles_color_danger__qhecrd4e" }, dangerHover: { defaultClass: "sprinkles_color_dangerHover__qhecrd4f" }, dangerSoft: { defaultClass: "sprinkles_color_dangerSoft__qhecrd4g" }, info: { defaultClass: "sprinkles_color_info__qhecrd4h" }, focus: { defaultClass: "sprinkles_color_focus__qhecrd4i" }, scrim: { defaultClass: "sprinkles_color_scrim__qhecrd4j" } } }, borderRadius: { values: { none: { defaultClass: "sprinkles_borderRadius_none__qhecrd4k" }, sm: { defaultClass: "sprinkles_borderRadius_sm__qhecrd4l" }, md: { defaultClass: "sprinkles_borderRadius_md__qhecrd4m" }, lg: { defaultClass: "sprinkles_borderRadius_lg__qhecrd4n" }, base: { defaultClass: "sprinkles_borderRadius_base__qhecrd4o" }, full: { defaultClass: "sprinkles_borderRadius_full__qhecrd4p" } } }, display: { values: { block: { defaultClass: "sprinkles_display_block__qhecrd4q" }, "inline-block": { defaultClass: "sprinkles_display_inline-block__qhecrd4r" }, flex: { defaultClass: "sprinkles_display_flex__qhecrd4s" }, "inline-flex": { defaultClass: "sprinkles_display_inline-flex__qhecrd4t" }, grid: { defaultClass: "sprinkles_display_grid__qhecrd4u" }, none: { defaultClass: "sprinkles_display_none__qhecrd4v" } } }, flexDirection: { values: { row: { defaultClass: "sprinkles_flexDirection_row__qhecrd4w" }, column: { defaultClass: "sprinkles_flexDirection_column__qhecrd4x" }, "row-reverse": { defaultClass: "sprinkles_flexDirection_row-reverse__qhecrd4y" }, "column-reverse": { defaultClass: "sprinkles_flexDirection_column-reverse__qhecrd4z" } } }, alignItems: { values: { "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__qhecrd50" }, center: { defaultClass: "sprinkles_alignItems_center__qhecrd51" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__qhecrd52" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__qhecrd53" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__qhecrd54" } } }, justifyContent: { values: { "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__qhecrd55" }, center: { defaultClass: "sprinkles_justifyContent_center__qhecrd56" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__qhecrd57" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__qhecrd58" }, "space-around": { defaultClass: "sprinkles_justifyContent_space-around__qhecrd59" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__qhecrd5a" } } }, flexWrap: { values: { nowrap: { defaultClass: "sprinkles_flexWrap_nowrap__qhecrd5b" }, wrap: { defaultClass: "sprinkles_flexWrap_wrap__qhecrd5c" } } } } });
|
|
@@ -46,11 +86,12 @@ function useStyles(props) {
|
|
|
46
86
|
}
|
|
47
87
|
|
|
48
88
|
// src/components/container/index.tsx
|
|
49
|
-
import { jsx } from "react/jsx-runtime";
|
|
50
|
-
function ContainerImpl({ as, ...props }, ref) {
|
|
89
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
90
|
+
function ContainerImpl({ as, testId, ...props }, ref) {
|
|
51
91
|
const Component = as ?? "div";
|
|
52
92
|
const { className, rest } = useStyles(props);
|
|
53
|
-
|
|
93
|
+
const { testId: dataTestId } = useTestId("layout", testId);
|
|
94
|
+
return /* @__PURE__ */ jsx2(Component, { ref, "data-testid": dataTestId, ...rest, className });
|
|
54
95
|
}
|
|
55
96
|
var ContainerForwarded = forwardRef(ContainerImpl);
|
|
56
97
|
ContainerForwarded.displayName = "Container";
|
|
@@ -60,11 +101,265 @@ var Container = ContainerForwarded;
|
|
|
60
101
|
import { forwardRef as forwardRef2 } from "react";
|
|
61
102
|
|
|
62
103
|
// src/components/typography/use-styles.ts
|
|
63
|
-
import { useMemo as
|
|
104
|
+
import { useMemo as useMemo5 } from "react";
|
|
105
|
+
|
|
106
|
+
// ../core/dist/index.js
|
|
107
|
+
import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
|
|
108
|
+
var tokens = {
|
|
109
|
+
font: {
|
|
110
|
+
display: "'DM Serif Display', 'Times New Roman', serif",
|
|
111
|
+
text: "'Newsreader', Georgia, serif",
|
|
112
|
+
mono: "'IBM Plex Mono', 'SFMono-Regular', monospace",
|
|
113
|
+
black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif"
|
|
114
|
+
},
|
|
115
|
+
// Roles tipográficos: tamaño/interlineado/peso/tracking listos para typography.css.ts.
|
|
116
|
+
text: {
|
|
117
|
+
eyebrow: { size: "0.694rem", lineHeight: "1.2", weight: "500", letterSpacing: "0.14em" },
|
|
118
|
+
display: { size: "5.6rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
|
|
119
|
+
h1: { size: "2.9rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
|
|
120
|
+
h2: { size: "2.1rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
|
|
121
|
+
h3: { size: "1.563rem", lineHeight: "1.2", weight: "500", letterSpacing: "0" },
|
|
122
|
+
h4: { size: "1.25rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
|
|
123
|
+
body: { size: "1rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
|
|
124
|
+
lead: { size: "1.25rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
|
|
125
|
+
small: { size: "0.95rem", lineHeight: "1.5", weight: "400", letterSpacing: "0" },
|
|
126
|
+
caption: { size: "0.833rem", lineHeight: "1.5", weight: "400", letterSpacing: "0.04em" }
|
|
127
|
+
},
|
|
128
|
+
space: {
|
|
129
|
+
s0: "0",
|
|
130
|
+
s1: "0.25rem",
|
|
131
|
+
// 4
|
|
132
|
+
s2: "0.5rem",
|
|
133
|
+
// 8
|
|
134
|
+
s3: "0.75rem",
|
|
135
|
+
// 12
|
|
136
|
+
s4: "1rem",
|
|
137
|
+
// 16
|
|
138
|
+
s5: "1.5rem",
|
|
139
|
+
// 24
|
|
140
|
+
s6: "2rem",
|
|
141
|
+
// 32
|
|
142
|
+
s7: "3rem",
|
|
143
|
+
// 48
|
|
144
|
+
s8: "4rem",
|
|
145
|
+
// 64
|
|
146
|
+
s9: "6rem"
|
|
147
|
+
// 96
|
|
148
|
+
},
|
|
149
|
+
radius: { none: "0px", sm: "3px", md: "5px", lg: "8px", base: "4px", full: "999px" },
|
|
150
|
+
border: { hair: "1px", rule: "1.5px", heavy: "2px" },
|
|
151
|
+
// Tracking de mayúsculas: escala coherente alineada al uso real (eyebrow = widest).
|
|
152
|
+
tracking: { tight: "-0.01em", normal: "0", wide: "0.04em", wider: "0.1em", widest: "0.14em" },
|
|
153
|
+
weight: { light: "300", regular: "400", medium: "500", semibold: "600", bold: "700" },
|
|
154
|
+
dur: { fast: "120ms", base: "200ms", slow: "360ms" },
|
|
155
|
+
ease: { ink: "cubic-bezier(0.2, 0, 0, 1)" },
|
|
156
|
+
shadow: {
|
|
157
|
+
sm: "0 1px 0 rgba(20,17,14,0.06)",
|
|
158
|
+
md: "0 2px 10px -4px rgba(20,17,14,0.22)",
|
|
159
|
+
lg: "0 12px 32px -10px rgba(20,17,14,0.34)"
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
var tintaSchema = {
|
|
163
|
+
light: {
|
|
164
|
+
...tokens,
|
|
165
|
+
color: {
|
|
166
|
+
bg1: "#F8F7F4",
|
|
167
|
+
bg2: "#FFFFFF",
|
|
168
|
+
bg3: "#EDEBE6",
|
|
169
|
+
bgInset: "#E4E1DA",
|
|
170
|
+
fg1: "#15130F",
|
|
171
|
+
fg2: "#494640",
|
|
172
|
+
fg3: "#737069",
|
|
173
|
+
fgOnAccent: "#F8F7F4",
|
|
174
|
+
border1: "rgba(21, 19, 15, 0.12)",
|
|
175
|
+
border2: "rgba(21, 19, 15, 0.26)",
|
|
176
|
+
borderStrong: "rgba(21, 19, 15, 0.85)",
|
|
177
|
+
accent: "#7B1E1E",
|
|
178
|
+
accentHover: "#631616",
|
|
179
|
+
accentSoft: "rgba(123, 30, 30, 0.10)",
|
|
180
|
+
ok: "#3E5C3A",
|
|
181
|
+
warn: "#8A6A1E",
|
|
182
|
+
danger: "#7B1E1E",
|
|
183
|
+
dangerHover: "#631616",
|
|
184
|
+
dangerSoft: "rgba(123, 30, 30, 0.10)",
|
|
185
|
+
info: "#2E4257",
|
|
186
|
+
focus: "#7B1E1E",
|
|
187
|
+
scrim: "rgba(20, 17, 14, 0.55)"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
dark: {
|
|
191
|
+
...tokens,
|
|
192
|
+
color: {
|
|
193
|
+
bg1: "#100E0B",
|
|
194
|
+
bg2: "#1A1611",
|
|
195
|
+
bg3: "#070605",
|
|
196
|
+
bgInset: "#221D16",
|
|
197
|
+
fg1: "#F2EDE2",
|
|
198
|
+
fg2: "#B7AF9F",
|
|
199
|
+
fg3: "#878070",
|
|
200
|
+
fgOnAccent: "#F2EDE2",
|
|
201
|
+
border1: "rgba(242, 237, 226, 0.13)",
|
|
202
|
+
border2: "rgba(242, 237, 226, 0.26)",
|
|
203
|
+
borderStrong: "rgba(242, 237, 226, 0.80)",
|
|
204
|
+
accent: "#B23A3A",
|
|
205
|
+
accentHover: "#CC4A4A",
|
|
206
|
+
accentSoft: "rgba(178, 58, 58, 0.16)",
|
|
207
|
+
ok: "#7FA178",
|
|
208
|
+
warn: "#C7A04E",
|
|
209
|
+
danger: "#C24A4A",
|
|
210
|
+
dangerHover: "#D45C5C",
|
|
211
|
+
dangerSoft: "rgba(194, 74, 74, 0.16)",
|
|
212
|
+
info: "#6E92B4",
|
|
213
|
+
focus: "#CC4A4A",
|
|
214
|
+
scrim: "rgba(7, 6, 5, 0.65)"
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
sepia: {
|
|
218
|
+
...tokens,
|
|
219
|
+
color: {
|
|
220
|
+
bg1: "#E9DDC4",
|
|
221
|
+
bg2: "#F2E9D5",
|
|
222
|
+
bg3: "#DCCDAC",
|
|
223
|
+
bgInset: "#D2C09B",
|
|
224
|
+
fg1: "#2A2013",
|
|
225
|
+
fg2: "#5A4A33",
|
|
226
|
+
fg3: "#6E6046",
|
|
227
|
+
fgOnAccent: "#F2E9D5",
|
|
228
|
+
border1: "rgba(42, 32, 19, 0.16)",
|
|
229
|
+
border2: "rgba(42, 32, 19, 0.32)",
|
|
230
|
+
borderStrong: "rgba(42, 32, 19, 0.82)",
|
|
231
|
+
accent: "#7A2E12",
|
|
232
|
+
accentHover: "#5F2109",
|
|
233
|
+
accentSoft: "rgba(122, 46, 18, 0.12)",
|
|
234
|
+
ok: "#4A5A2E",
|
|
235
|
+
warn: "#8A6A1E",
|
|
236
|
+
danger: "#7A2E12",
|
|
237
|
+
dangerHover: "#5F2109",
|
|
238
|
+
dangerSoft: "rgba(122, 46, 18, 0.12)",
|
|
239
|
+
info: "#3C4E57",
|
|
240
|
+
focus: "#7A2E12",
|
|
241
|
+
scrim: "rgba(42, 32, 19, 0.55)"
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
contrast: {
|
|
245
|
+
...tokens,
|
|
246
|
+
color: {
|
|
247
|
+
bg1: "#FFFFFF",
|
|
248
|
+
bg2: "#FFFFFF",
|
|
249
|
+
bg3: "#F2F2F2",
|
|
250
|
+
bgInset: "#EAEAEA",
|
|
251
|
+
fg1: "#000000",
|
|
252
|
+
fg2: "#000000",
|
|
253
|
+
fg3: "#2B2B2B",
|
|
254
|
+
fgOnAccent: "#FFFFFF",
|
|
255
|
+
border1: "#000000",
|
|
256
|
+
border2: "#000000",
|
|
257
|
+
borderStrong: "#000000",
|
|
258
|
+
accent: "#000000",
|
|
259
|
+
accentHover: "#2B2B2B",
|
|
260
|
+
accentSoft: "rgba(0, 0, 0, 0.08)",
|
|
261
|
+
ok: "#000000",
|
|
262
|
+
warn: "#000000",
|
|
263
|
+
danger: "#8B0000",
|
|
264
|
+
dangerHover: "#6B0000",
|
|
265
|
+
dangerSoft: "rgba(139, 0, 0, 0.10)",
|
|
266
|
+
info: "#000000",
|
|
267
|
+
focus: "#000000",
|
|
268
|
+
scrim: "rgba(0, 0, 0, 0.7)"
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
};
|
|
272
|
+
var schemas = { tinta: tintaSchema };
|
|
273
|
+
var modeNames2 = ["light", "dark", "sepia", "contrast"];
|
|
274
|
+
function resolveMode(preference, systemMode) {
|
|
275
|
+
return preference === "system" ? systemMode : preference;
|
|
276
|
+
}
|
|
277
|
+
function useThemeStore(options, storage, system) {
|
|
278
|
+
const { defaultSchema = "tinta", defaultMode = "light" } = options;
|
|
279
|
+
const [persisted] = useState2(() => storage.read());
|
|
280
|
+
const [schema, setSchema] = useState2(persisted?.schema ?? defaultSchema);
|
|
281
|
+
const [preference, setPreference] = useState2(
|
|
282
|
+
persisted?.preference ?? defaultMode
|
|
283
|
+
);
|
|
284
|
+
const [systemMode, setSystemMode] = useState2(() => system.get());
|
|
285
|
+
useEffect2(() => {
|
|
286
|
+
if (preference !== "system") return;
|
|
287
|
+
const update = () => setSystemMode(system.get());
|
|
288
|
+
update();
|
|
289
|
+
return system.subscribe(update);
|
|
290
|
+
}, [preference, system]);
|
|
291
|
+
const mode = resolveMode(preference, systemMode);
|
|
292
|
+
useEffect2(() => {
|
|
293
|
+
storage.write({ schema, preference });
|
|
294
|
+
}, [schema, preference, storage]);
|
|
295
|
+
return useMemo3(
|
|
296
|
+
() => ({
|
|
297
|
+
schema,
|
|
298
|
+
mode,
|
|
299
|
+
preference,
|
|
300
|
+
colorTokens: schemas[schema][mode].color,
|
|
301
|
+
setSchema,
|
|
302
|
+
setMode: setPreference,
|
|
303
|
+
toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
|
|
304
|
+
cycleMode: () => {
|
|
305
|
+
const next = modeNames2[(modeNames2.indexOf(mode) + 1) % modeNames2.length];
|
|
306
|
+
if (next) setPreference(next);
|
|
307
|
+
}
|
|
308
|
+
}),
|
|
309
|
+
[schema, mode, preference]
|
|
310
|
+
);
|
|
311
|
+
}
|
|
64
312
|
|
|
65
313
|
// src/theme/context/theme-context.tsx
|
|
66
|
-
import { createContext, useContext
|
|
67
|
-
|
|
314
|
+
import { createContext as createContext2, useContext as useContext2, useMemo as useMemo4 } from "react";
|
|
315
|
+
|
|
316
|
+
// src/theme/adapters.ts
|
|
317
|
+
var SYSTEM_QUERIES = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"];
|
|
318
|
+
function createWebStorageAdapter(storageKey, persist) {
|
|
319
|
+
return {
|
|
320
|
+
read() {
|
|
321
|
+
if (!persist || typeof window === "undefined") return null;
|
|
322
|
+
try {
|
|
323
|
+
const raw = window.localStorage.getItem(storageKey);
|
|
324
|
+
return raw ? JSON.parse(raw) : null;
|
|
325
|
+
} catch {
|
|
326
|
+
return null;
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
write(value) {
|
|
330
|
+
if (!persist || typeof window === "undefined") return;
|
|
331
|
+
try {
|
|
332
|
+
window.localStorage.setItem(storageKey, JSON.stringify(value));
|
|
333
|
+
} catch {
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
}
|
|
338
|
+
function createWebSystemModeAdapter() {
|
|
339
|
+
function get() {
|
|
340
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
|
|
341
|
+
if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
|
|
342
|
+
if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
|
|
343
|
+
return "light";
|
|
344
|
+
}
|
|
345
|
+
return {
|
|
346
|
+
get,
|
|
347
|
+
subscribe(onChange) {
|
|
348
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
349
|
+
return () => {
|
|
350
|
+
};
|
|
351
|
+
}
|
|
352
|
+
const mqls = SYSTEM_QUERIES.map((q) => window.matchMedia(q));
|
|
353
|
+
for (const mql of mqls) mql.addEventListener?.("change", onChange);
|
|
354
|
+
return () => {
|
|
355
|
+
for (const mql of mqls) mql.removeEventListener?.("change", onChange);
|
|
356
|
+
};
|
|
357
|
+
}
|
|
358
|
+
};
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
// src/theme/context/theme-context.tsx
|
|
362
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
68
363
|
var noop = () => {
|
|
69
364
|
};
|
|
70
365
|
var DEFAULT_VALUE = {
|
|
@@ -77,29 +372,7 @@ var DEFAULT_VALUE = {
|
|
|
77
372
|
toggleMode: noop,
|
|
78
373
|
cycleMode: noop
|
|
79
374
|
};
|
|
80
|
-
var ThemeContext =
|
|
81
|
-
function resolveSystemMode() {
|
|
82
|
-
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
|
|
83
|
-
if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
|
|
84
|
-
if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
|
|
85
|
-
return "light";
|
|
86
|
-
}
|
|
87
|
-
function readStored(key) {
|
|
88
|
-
if (typeof window === "undefined") return null;
|
|
89
|
-
try {
|
|
90
|
-
const raw = window.localStorage.getItem(key);
|
|
91
|
-
return raw ? JSON.parse(raw) : null;
|
|
92
|
-
} catch {
|
|
93
|
-
return null;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
function writeStored(key, value) {
|
|
97
|
-
if (typeof window === "undefined") return;
|
|
98
|
-
try {
|
|
99
|
-
window.localStorage.setItem(key, JSON.stringify(value));
|
|
100
|
-
} catch {
|
|
101
|
-
}
|
|
102
|
-
}
|
|
375
|
+
var ThemeContext = createContext2(null);
|
|
103
376
|
function ThemeProvider({
|
|
104
377
|
children,
|
|
105
378
|
defaultSchema = "tinta",
|
|
@@ -107,50 +380,29 @@ function ThemeProvider({
|
|
|
107
380
|
storageKey = "ds-theme",
|
|
108
381
|
persist = true
|
|
109
382
|
}) {
|
|
110
|
-
const
|
|
111
|
-
() =>
|
|
112
|
-
|
|
113
|
-
const [preference, setPreference] = useState2(
|
|
114
|
-
() => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
|
|
383
|
+
const storage = useMemo4(
|
|
384
|
+
() => createWebStorageAdapter(storageKey, persist),
|
|
385
|
+
[storageKey, persist]
|
|
115
386
|
);
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
120
|
-
const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
|
|
121
|
-
(q) => window.matchMedia(q)
|
|
122
|
-
);
|
|
123
|
-
const onChange = () => setSystemMode(resolveSystemMode());
|
|
124
|
-
onChange();
|
|
125
|
-
for (const mql of mqls) mql.addEventListener?.("change", onChange);
|
|
126
|
-
return () => {
|
|
127
|
-
for (const mql of mqls) mql.removeEventListener?.("change", onChange);
|
|
128
|
-
};
|
|
129
|
-
}, [preference]);
|
|
130
|
-
const mode = preference === "system" ? systemMode : preference;
|
|
131
|
-
useEffect2(() => {
|
|
132
|
-
if (persist) writeStored(storageKey, { schema, preference });
|
|
133
|
-
}, [schema, preference, persist, storageKey]);
|
|
134
|
-
const value = useMemo(
|
|
387
|
+
const system = useMemo4(() => createWebSystemModeAdapter(), []);
|
|
388
|
+
const store = useThemeStore({ defaultSchema, defaultMode }, storage, system);
|
|
389
|
+
const value = useMemo4(
|
|
135
390
|
() => ({
|
|
136
|
-
schema,
|
|
137
|
-
mode,
|
|
138
|
-
preference,
|
|
139
|
-
themeClass: themes[schema][mode],
|
|
140
|
-
setSchema,
|
|
141
|
-
setMode:
|
|
142
|
-
toggleMode:
|
|
143
|
-
cycleMode:
|
|
144
|
-
const next = modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length];
|
|
145
|
-
if (next) setPreference(next);
|
|
146
|
-
}
|
|
391
|
+
schema: store.schema,
|
|
392
|
+
mode: store.mode,
|
|
393
|
+
preference: store.preference,
|
|
394
|
+
themeClass: themes[store.schema][store.mode],
|
|
395
|
+
setSchema: store.setSchema,
|
|
396
|
+
setMode: store.setMode,
|
|
397
|
+
toggleMode: store.toggleMode,
|
|
398
|
+
cycleMode: store.cycleMode
|
|
147
399
|
}),
|
|
148
|
-
[
|
|
400
|
+
[store]
|
|
149
401
|
);
|
|
150
|
-
return /* @__PURE__ */
|
|
402
|
+
return /* @__PURE__ */ jsx3(ThemeContext.Provider, { value, children });
|
|
151
403
|
}
|
|
152
404
|
function useTheme() {
|
|
153
|
-
return
|
|
405
|
+
return useContext2(ThemeContext) ?? DEFAULT_VALUE;
|
|
154
406
|
}
|
|
155
407
|
|
|
156
408
|
// src/theme/typography.css.ts
|
|
@@ -168,7 +420,7 @@ function useStyles2({
|
|
|
168
420
|
align: align2
|
|
169
421
|
}) {
|
|
170
422
|
const { themeClass } = useTheme();
|
|
171
|
-
const className =
|
|
423
|
+
const className = useMemo5(
|
|
172
424
|
() => [
|
|
173
425
|
themeClass,
|
|
174
426
|
base,
|
|
@@ -182,7 +434,7 @@ function useStyles2({
|
|
|
182
434
|
}
|
|
183
435
|
|
|
184
436
|
// src/components/typography/index.tsx
|
|
185
|
-
import { jsx as
|
|
437
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
186
438
|
var defaultElement = {
|
|
187
439
|
display: "h1",
|
|
188
440
|
h1: "h1",
|
|
@@ -197,10 +449,11 @@ var defaultElement = {
|
|
|
197
449
|
code: "code",
|
|
198
450
|
blackletter: "span"
|
|
199
451
|
};
|
|
200
|
-
function TypographyInner({ variant: variant2, as, color: color2, align: align2, ...rest }, ref) {
|
|
452
|
+
function TypographyInner({ variant: variant2, as, color: color2, align: align2, testId, ...rest }, ref) {
|
|
201
453
|
const Component = as ?? defaultElement[variant2];
|
|
202
454
|
const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
|
|
203
|
-
|
|
455
|
+
const { testId: dataTestId } = useTestId("text", testId);
|
|
456
|
+
return /* @__PURE__ */ jsx4(Component, { ref, "data-testid": dataTestId, ...rest, className: text2 });
|
|
204
457
|
}
|
|
205
458
|
var TypographyForwarded = forwardRef2(
|
|
206
459
|
TypographyInner
|
|
@@ -217,48 +470,8 @@ function states(map) {
|
|
|
217
470
|
return active2.length > 0 ? active2.join(" ") : void 0;
|
|
218
471
|
}
|
|
219
472
|
|
|
220
|
-
// src/testing/use-test-id.ts
|
|
221
|
-
import { useMemo as useMemo4 } from "react";
|
|
222
|
-
|
|
223
|
-
// src/testing/compose.ts
|
|
224
|
-
function normalizeSegment(seg) {
|
|
225
|
-
return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
226
|
-
}
|
|
227
|
-
function composeTestId(parts) {
|
|
228
|
-
return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
// src/testing/context/test-id-context.tsx
|
|
232
|
-
import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
|
|
233
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
234
|
-
var TestIdContext = createContext2([]);
|
|
235
|
-
function TestIdProvider({ context, children }) {
|
|
236
|
-
const parent = useContext2(TestIdContext);
|
|
237
|
-
const value = useMemo3(
|
|
238
|
-
() => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
|
|
239
|
-
[parent, context]
|
|
240
|
-
);
|
|
241
|
-
return /* @__PURE__ */ jsx4(TestIdContext.Provider, { value, children });
|
|
242
|
-
}
|
|
243
|
-
function useTestIdContext() {
|
|
244
|
-
return useContext2(TestIdContext);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
// src/testing/use-test-id.ts
|
|
248
|
-
function useTestId(type, ownTestId) {
|
|
249
|
-
const ctx = useTestIdContext();
|
|
250
|
-
const testId = composeTestId([type, ...ctx, ownTestId]);
|
|
251
|
-
return useMemo4(
|
|
252
|
-
() => ({
|
|
253
|
-
testId,
|
|
254
|
-
slot: (name) => `${testId}__${normalizeSegment(name)}`
|
|
255
|
-
}),
|
|
256
|
-
[testId]
|
|
257
|
-
);
|
|
258
|
-
}
|
|
259
|
-
|
|
260
473
|
// src/components/button/use-styles.ts
|
|
261
|
-
import { useMemo as
|
|
474
|
+
import { useMemo as useMemo6 } from "react";
|
|
262
475
|
|
|
263
476
|
// src/components/button/use-styles.css.ts
|
|
264
477
|
var full = "use-styles_full__1pbtill4";
|
|
@@ -279,7 +492,7 @@ function useStyles3({
|
|
|
279
492
|
className
|
|
280
493
|
}) {
|
|
281
494
|
const { themeClass } = useTheme();
|
|
282
|
-
const container =
|
|
495
|
+
const container = useMemo6(
|
|
283
496
|
() => [
|
|
284
497
|
themeClass,
|
|
285
498
|
root,
|
|
@@ -334,7 +547,7 @@ var Button = forwardRef3(function Button2({
|
|
|
334
547
|
import { forwardRef as forwardRef4 } from "react";
|
|
335
548
|
|
|
336
549
|
// src/components/divider/use-styles.ts
|
|
337
|
-
import { useMemo as
|
|
550
|
+
import { useMemo as useMemo7 } from "react";
|
|
338
551
|
|
|
339
552
|
// src/components/divider/use-styles.css.ts
|
|
340
553
|
var horizontal = "use-styles_horizontal__1n7v7yj1";
|
|
@@ -347,7 +560,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
|
|
|
347
560
|
// src/components/divider/use-styles.ts
|
|
348
561
|
function useStyles4({ vertical: vertical2, hasLabel }) {
|
|
349
562
|
const { themeClass } = useTheme();
|
|
350
|
-
const root24 =
|
|
563
|
+
const root24 = useMemo7(
|
|
351
564
|
() => [
|
|
352
565
|
themeClass,
|
|
353
566
|
root2,
|
|
@@ -360,24 +573,25 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
|
|
|
360
573
|
|
|
361
574
|
// src/components/divider/index.tsx
|
|
362
575
|
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
363
|
-
var Divider = forwardRef4(function Divider2({ vertical: vertical2, label: label7, ...rest }, ref) {
|
|
576
|
+
var Divider = forwardRef4(function Divider2({ vertical: vertical2, label: label7, testId, ...rest }, ref) {
|
|
364
577
|
const hasLabel = label7 != null;
|
|
365
578
|
const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
|
|
579
|
+
const { testId: dataTestId, slot } = useTestId("layout", testId);
|
|
366
580
|
if (hasLabel) {
|
|
367
|
-
return /* @__PURE__ */ jsxs2("div", { ref, role: "separator", className: root24, ...rest, children: [
|
|
581
|
+
return /* @__PURE__ */ jsxs2("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest, children: [
|
|
368
582
|
/* @__PURE__ */ jsx6("span", { className: line2 }),
|
|
369
|
-
/* @__PURE__ */ jsx6("span", { className: labelClass, children: label7 }),
|
|
583
|
+
/* @__PURE__ */ jsx6("span", { className: labelClass, "data-testid": slot("label"), children: label7 }),
|
|
370
584
|
/* @__PURE__ */ jsx6("span", { className: line2 })
|
|
371
585
|
] });
|
|
372
586
|
}
|
|
373
|
-
return /* @__PURE__ */ jsx6("div", { ref, role: "separator", className: root24, ...rest });
|
|
587
|
+
return /* @__PURE__ */ jsx6("div", { ref, role: "separator", className: root24, "data-testid": dataTestId, ...rest });
|
|
374
588
|
});
|
|
375
589
|
|
|
376
590
|
// src/components/avatar/index.tsx
|
|
377
591
|
import { forwardRef as forwardRef5 } from "react";
|
|
378
592
|
|
|
379
593
|
// src/components/avatar/use-styles.ts
|
|
380
|
-
import { useMemo as
|
|
594
|
+
import { useMemo as useMemo8 } from "react";
|
|
381
595
|
|
|
382
596
|
// src/components/avatar/use-styles.css.ts
|
|
383
597
|
var root3 = "use-styles_root__1mn1rmu0";
|
|
@@ -391,7 +605,7 @@ function useStyles5({
|
|
|
391
605
|
className
|
|
392
606
|
}) {
|
|
393
607
|
const { themeClass } = useTheme();
|
|
394
|
-
const root24 =
|
|
608
|
+
const root24 = useMemo8(
|
|
395
609
|
() => [
|
|
396
610
|
themeClass,
|
|
397
611
|
root3,
|
|
@@ -406,16 +620,17 @@ function useStyles5({
|
|
|
406
620
|
|
|
407
621
|
// src/components/avatar/index.tsx
|
|
408
622
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
409
|
-
var Avatar = forwardRef5(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
|
|
623
|
+
var Avatar = forwardRef5(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
|
|
410
624
|
const { root: root24 } = useStyles5({ size: size3, filled, className });
|
|
411
|
-
|
|
625
|
+
const { testId: dataTestId } = useTestId("media", testId);
|
|
626
|
+
return /* @__PURE__ */ jsx7("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
|
|
412
627
|
});
|
|
413
628
|
|
|
414
629
|
// src/components/badge/index.tsx
|
|
415
630
|
import { forwardRef as forwardRef6 } from "react";
|
|
416
631
|
|
|
417
632
|
// src/components/badge/use-styles.ts
|
|
418
|
-
import { useMemo as
|
|
633
|
+
import { useMemo as useMemo9 } from "react";
|
|
419
634
|
|
|
420
635
|
// src/components/badge/use-styles.css.ts
|
|
421
636
|
var dot = "use-styles_dot__1wpei6p1";
|
|
@@ -428,21 +643,22 @@ function useStyles6({
|
|
|
428
643
|
className
|
|
429
644
|
}) {
|
|
430
645
|
const { themeClass } = useTheme();
|
|
431
|
-
const root24 =
|
|
646
|
+
const root24 = useMemo9(
|
|
432
647
|
() => [themeClass, root4, className].filter(Boolean).join(" "),
|
|
433
648
|
[themeClass, className]
|
|
434
649
|
);
|
|
435
|
-
const dot3 =
|
|
650
|
+
const dot3 = useMemo9(() => [dot, tone2[tone4]].join(" "), [tone4]);
|
|
436
651
|
return { root: root24, dot: dot3 };
|
|
437
652
|
}
|
|
438
653
|
|
|
439
654
|
// src/components/badge/index.tsx
|
|
440
655
|
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
441
|
-
var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
|
|
656
|
+
var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
|
|
442
657
|
const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
|
|
443
|
-
|
|
658
|
+
const { testId: dataTestId, slot } = useTestId("media", testId);
|
|
659
|
+
return /* @__PURE__ */ jsxs3("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
|
|
444
660
|
children,
|
|
445
|
-
count != null && /* @__PURE__ */ jsx8("span", { className: dot3, children: count })
|
|
661
|
+
count != null && /* @__PURE__ */ jsx8("span", { className: dot3, "data-testid": slot("dot"), children: count })
|
|
446
662
|
] });
|
|
447
663
|
});
|
|
448
664
|
|
|
@@ -450,7 +666,7 @@ var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, childre
|
|
|
450
666
|
import { forwardRef as forwardRef7 } from "react";
|
|
451
667
|
|
|
452
668
|
// src/components/progress/use-styles.ts
|
|
453
|
-
import { useMemo as
|
|
669
|
+
import { useMemo as useMemo10 } from "react";
|
|
454
670
|
|
|
455
671
|
// src/components/progress/use-styles.css.ts
|
|
456
672
|
var bar = "use-styles_bar__kbop7v3";
|
|
@@ -466,7 +682,7 @@ function useStyles7({
|
|
|
466
682
|
}) {
|
|
467
683
|
const { themeClass } = useTheme();
|
|
468
684
|
const indeterminate2 = value === void 0;
|
|
469
|
-
return
|
|
685
|
+
return useMemo10(() => {
|
|
470
686
|
const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
|
|
471
687
|
if (variant2 === "circular") {
|
|
472
688
|
return { track: "", bar: "", spinner: root24(spinner) };
|
|
@@ -481,9 +697,10 @@ function useStyles7({
|
|
|
481
697
|
|
|
482
698
|
// src/components/progress/index.tsx
|
|
483
699
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
484
|
-
var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, ...rest }, ref) {
|
|
700
|
+
var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
|
|
485
701
|
const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
|
|
486
702
|
const indeterminate2 = value === void 0;
|
|
703
|
+
const { testId: dataTestId, slot } = useTestId("media", testId);
|
|
487
704
|
if (variant2 === "circular") {
|
|
488
705
|
return /* @__PURE__ */ jsx9(
|
|
489
706
|
"span",
|
|
@@ -495,6 +712,8 @@ var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", va
|
|
|
495
712
|
"aria-valuemin": indeterminate2 ? void 0 : 0,
|
|
496
713
|
"aria-valuemax": indeterminate2 ? void 0 : 100,
|
|
497
714
|
style: { width: size3, height: size3 },
|
|
715
|
+
"data-testid": dataTestId,
|
|
716
|
+
"data-state": states({ indeterminate: indeterminate2 }),
|
|
498
717
|
...rest
|
|
499
718
|
}
|
|
500
719
|
);
|
|
@@ -508,8 +727,17 @@ var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", va
|
|
|
508
727
|
"aria-valuenow": indeterminate2 ? void 0 : value,
|
|
509
728
|
"aria-valuemin": indeterminate2 ? void 0 : 0,
|
|
510
729
|
"aria-valuemax": indeterminate2 ? void 0 : 100,
|
|
730
|
+
"data-testid": dataTestId,
|
|
731
|
+
"data-state": states({ indeterminate: indeterminate2 }),
|
|
511
732
|
...rest,
|
|
512
|
-
children: /* @__PURE__ */ jsx9(
|
|
733
|
+
children: /* @__PURE__ */ jsx9(
|
|
734
|
+
"div",
|
|
735
|
+
{
|
|
736
|
+
className: bar2,
|
|
737
|
+
style: indeterminate2 ? void 0 : { width: `${value}%` },
|
|
738
|
+
"data-testid": slot("bar")
|
|
739
|
+
}
|
|
740
|
+
)
|
|
513
741
|
}
|
|
514
742
|
);
|
|
515
743
|
});
|
|
@@ -543,7 +771,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
543
771
|
}
|
|
544
772
|
|
|
545
773
|
// src/components/chip/use-styles.ts
|
|
546
|
-
import { useMemo as
|
|
774
|
+
import { useMemo as useMemo11 } from "react";
|
|
547
775
|
|
|
548
776
|
// src/components/chip/use-styles.css.ts
|
|
549
777
|
var clickable = "use-styles_clickable__1axilf44";
|
|
@@ -559,7 +787,7 @@ function useStyles8({
|
|
|
559
787
|
clickable: clickable2
|
|
560
788
|
}) {
|
|
561
789
|
const { themeClass } = useTheme();
|
|
562
|
-
const root24 =
|
|
790
|
+
const root24 = useMemo11(
|
|
563
791
|
() => [
|
|
564
792
|
themeClass,
|
|
565
793
|
root5,
|
|
@@ -573,17 +801,39 @@ function useStyles8({
|
|
|
573
801
|
|
|
574
802
|
// src/components/chip/index.tsx
|
|
575
803
|
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
576
|
-
var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }, ref) {
|
|
804
|
+
var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
|
|
577
805
|
const clickable2 = Boolean(onClick);
|
|
578
806
|
const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
|
|
807
|
+
const { testId: dataTestId, slot } = useTestId("media", testId);
|
|
579
808
|
const handleDelete = (event) => {
|
|
580
809
|
event.stopPropagation();
|
|
581
810
|
onDelete?.();
|
|
582
811
|
};
|
|
583
|
-
return /* @__PURE__ */ jsxs5(
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
812
|
+
return /* @__PURE__ */ jsxs5(
|
|
813
|
+
"span",
|
|
814
|
+
{
|
|
815
|
+
ref,
|
|
816
|
+
className: root24,
|
|
817
|
+
onClick,
|
|
818
|
+
"data-testid": dataTestId,
|
|
819
|
+
"data-state": states({ selected: selected3 }),
|
|
820
|
+
...rest,
|
|
821
|
+
children: [
|
|
822
|
+
children,
|
|
823
|
+
onDelete && /* @__PURE__ */ jsx11(
|
|
824
|
+
"button",
|
|
825
|
+
{
|
|
826
|
+
type: "button",
|
|
827
|
+
className: deleteBtn2,
|
|
828
|
+
"aria-label": "Remove",
|
|
829
|
+
onClick: handleDelete,
|
|
830
|
+
"data-testid": slot("delete"),
|
|
831
|
+
children: /* @__PURE__ */ jsx11(XIcon, { size: 13 })
|
|
832
|
+
}
|
|
833
|
+
)
|
|
834
|
+
]
|
|
835
|
+
}
|
|
836
|
+
);
|
|
587
837
|
});
|
|
588
838
|
|
|
589
839
|
// src/components/checkbox/index.tsx
|
|
@@ -612,7 +862,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
612
862
|
}
|
|
613
863
|
|
|
614
864
|
// src/components/checkbox/use-styles.ts
|
|
615
|
-
import { useMemo as
|
|
865
|
+
import { useMemo as useMemo12 } from "react";
|
|
616
866
|
|
|
617
867
|
// src/components/checkbox/use-styles.css.ts
|
|
618
868
|
var box = "use-styles_box__9zoga91";
|
|
@@ -625,11 +875,11 @@ var root6 = "use-styles_root__9zoga90";
|
|
|
625
875
|
// src/components/checkbox/use-styles.ts
|
|
626
876
|
function useStyles9({ checked, disabled: disabled3 }) {
|
|
627
877
|
const { themeClass } = useTheme();
|
|
628
|
-
const root24 =
|
|
878
|
+
const root24 = useMemo12(
|
|
629
879
|
() => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
|
|
630
880
|
[themeClass, disabled3]
|
|
631
881
|
);
|
|
632
|
-
const box2 =
|
|
882
|
+
const box2 = useMemo12(
|
|
633
883
|
() => [box, checked && boxChecked].filter(Boolean).join(" "),
|
|
634
884
|
[checked]
|
|
635
885
|
);
|
|
@@ -638,13 +888,14 @@ function useStyles9({ checked, disabled: disabled3 }) {
|
|
|
638
888
|
|
|
639
889
|
// src/components/checkbox/index.tsx
|
|
640
890
|
import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
641
|
-
var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, ...rest }, ref) {
|
|
891
|
+
var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, testId, ...rest }, ref) {
|
|
642
892
|
const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
|
|
893
|
+
const { testId: dataTestId } = useTestId("toggle", testId);
|
|
643
894
|
const handleChange = (e) => {
|
|
644
895
|
if (disabled3) return;
|
|
645
896
|
onChange?.(e.target.checked);
|
|
646
897
|
};
|
|
647
|
-
return /* @__PURE__ */ jsxs6("label", { className: root24, children: [
|
|
898
|
+
return /* @__PURE__ */ jsxs6("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
|
|
648
899
|
/* @__PURE__ */ jsx13(
|
|
649
900
|
"input",
|
|
650
901
|
{
|
|
@@ -667,7 +918,7 @@ var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label
|
|
|
667
918
|
import { forwardRef as forwardRef10 } from "react";
|
|
668
919
|
|
|
669
920
|
// src/components/radio/use-styles.ts
|
|
670
|
-
import { useMemo as
|
|
921
|
+
import { useMemo as useMemo13 } from "react";
|
|
671
922
|
|
|
672
923
|
// src/components/radio/use-styles.css.ts
|
|
673
924
|
var circle = "use-styles_circle__vy61b42";
|
|
@@ -683,7 +934,7 @@ function useStyles10({
|
|
|
683
934
|
className
|
|
684
935
|
}) {
|
|
685
936
|
const { themeClass } = useTheme();
|
|
686
|
-
const root24 =
|
|
937
|
+
const root24 = useMemo13(
|
|
687
938
|
() => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
|
|
688
939
|
[themeClass, disabled3, className]
|
|
689
940
|
);
|
|
@@ -698,9 +949,10 @@ function useStyles10({
|
|
|
698
949
|
|
|
699
950
|
// src/components/radio/index.tsx
|
|
700
951
|
import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
701
|
-
var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, ...rest }, ref) {
|
|
952
|
+
var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, testId, ...rest }, ref) {
|
|
702
953
|
const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
|
|
703
|
-
|
|
954
|
+
const { testId: dataTestId } = useTestId("toggle", testId);
|
|
955
|
+
return /* @__PURE__ */ jsxs7("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
|
|
704
956
|
/* @__PURE__ */ jsx14(
|
|
705
957
|
"input",
|
|
706
958
|
{
|
|
@@ -724,7 +976,7 @@ var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, nam
|
|
|
724
976
|
import { forwardRef as forwardRef11 } from "react";
|
|
725
977
|
|
|
726
978
|
// src/components/switch/use-styles.ts
|
|
727
|
-
import { useMemo as
|
|
979
|
+
import { useMemo as useMemo14 } from "react";
|
|
728
980
|
|
|
729
981
|
// src/components/switch/use-styles.css.ts
|
|
730
982
|
var input3 = "surfaces_srOnly__1qa7atn0";
|
|
@@ -738,7 +990,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
|
|
|
738
990
|
// src/components/switch/use-styles.ts
|
|
739
991
|
function useStyles11({ checked }) {
|
|
740
992
|
const { themeClass } = useTheme();
|
|
741
|
-
return
|
|
993
|
+
return useMemo14(
|
|
742
994
|
() => ({
|
|
743
995
|
root: [themeClass, root8].filter(Boolean).join(" "),
|
|
744
996
|
input: input3,
|
|
@@ -752,9 +1004,10 @@ function useStyles11({ checked }) {
|
|
|
752
1004
|
|
|
753
1005
|
// src/components/switch/index.tsx
|
|
754
1006
|
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
755
|
-
var Switch = forwardRef11(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, ...rest }, ref) {
|
|
1007
|
+
var Switch = forwardRef11(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, testId, ...rest }, ref) {
|
|
756
1008
|
const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
|
|
757
|
-
|
|
1009
|
+
const { testId: dataTestId } = useTestId("toggle", testId);
|
|
1010
|
+
return /* @__PURE__ */ jsxs8("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
|
|
758
1011
|
/* @__PURE__ */ jsx15(
|
|
759
1012
|
"input",
|
|
760
1013
|
{
|
|
@@ -784,7 +1037,7 @@ import { forwardRef as forwardRef13 } from "react";
|
|
|
784
1037
|
import { forwardRef as forwardRef12, useId } from "react";
|
|
785
1038
|
|
|
786
1039
|
// src/components/base-field/use-styles.ts
|
|
787
|
-
import { useMemo as
|
|
1040
|
+
import { useMemo as useMemo15 } from "react";
|
|
788
1041
|
|
|
789
1042
|
// src/components/base-field/use-styles.css.ts
|
|
790
1043
|
var field = "use-styles_field__1c3cgd3";
|
|
@@ -803,7 +1056,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
|
|
|
803
1056
|
// src/components/base-field/use-styles.ts
|
|
804
1057
|
function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
|
|
805
1058
|
const { themeClass } = useTheme();
|
|
806
|
-
return
|
|
1059
|
+
return useMemo15(() => {
|
|
807
1060
|
const root24 = [themeClass, root9].filter(Boolean).join(" ");
|
|
808
1061
|
const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
|
|
809
1062
|
const input6 = [
|
|
@@ -983,14 +1236,14 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
983
1236
|
}
|
|
984
1237
|
|
|
985
1238
|
// src/components/password-field/use-styles.ts
|
|
986
|
-
import { useMemo as
|
|
1239
|
+
import { useMemo as useMemo16 } from "react";
|
|
987
1240
|
|
|
988
1241
|
// src/components/password-field/use-styles.css.ts
|
|
989
1242
|
var revealButton = "use-styles_revealButton__rsu9d50";
|
|
990
1243
|
|
|
991
1244
|
// src/components/password-field/use-styles.ts
|
|
992
1245
|
function useStyles13() {
|
|
993
|
-
return
|
|
1246
|
+
return useMemo16(() => ({ revealButton }), []);
|
|
994
1247
|
}
|
|
995
1248
|
|
|
996
1249
|
// src/components/password-field/index.tsx
|
|
@@ -1043,7 +1296,7 @@ var PasswordField = forwardRef14(
|
|
|
1043
1296
|
);
|
|
1044
1297
|
|
|
1045
1298
|
// src/components/money-field/index.tsx
|
|
1046
|
-
import { forwardRef as forwardRef15, useMemo as
|
|
1299
|
+
import { forwardRef as forwardRef15, useMemo as useMemo17, useState as useState4 } from "react";
|
|
1047
1300
|
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1048
1301
|
function parseAmount(raw) {
|
|
1049
1302
|
const cleaned = raw.replace(/[^0-9.-]/g, "");
|
|
@@ -1068,7 +1321,7 @@ var MoneyField = forwardRef15(function MoneyField2({
|
|
|
1068
1321
|
}, ref) {
|
|
1069
1322
|
const [focused, setFocused] = useState4(false);
|
|
1070
1323
|
const [draft, setDraft] = useState4("");
|
|
1071
|
-
const formatter =
|
|
1324
|
+
const formatter = useMemo17(
|
|
1072
1325
|
() => new Intl.NumberFormat(locale, { style: "currency", currency }),
|
|
1073
1326
|
[locale, currency]
|
|
1074
1327
|
);
|
|
@@ -1114,7 +1367,7 @@ var MoneyField = forwardRef15(function MoneyField2({
|
|
|
1114
1367
|
import { forwardRef as forwardRef16 } from "react";
|
|
1115
1368
|
|
|
1116
1369
|
// src/components/icon-button/use-styles.ts
|
|
1117
|
-
import { useMemo as
|
|
1370
|
+
import { useMemo as useMemo18 } from "react";
|
|
1118
1371
|
|
|
1119
1372
|
// src/components/icon-button/use-styles.css.ts
|
|
1120
1373
|
var accent = "use-styles_accent__18np0q02";
|
|
@@ -1127,7 +1380,7 @@ function useStyles14({
|
|
|
1127
1380
|
tone: tone4 = "ink"
|
|
1128
1381
|
}) {
|
|
1129
1382
|
const { themeClass } = useTheme();
|
|
1130
|
-
const root24 =
|
|
1383
|
+
const root24 = useMemo18(
|
|
1131
1384
|
() => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
|
|
1132
1385
|
[themeClass, active2, tone4]
|
|
1133
1386
|
);
|
|
@@ -1166,7 +1419,7 @@ var IconButton = forwardRef16(function IconButton2({ icon: Icon, active: active2
|
|
|
1166
1419
|
import { forwardRef as forwardRef17 } from "react";
|
|
1167
1420
|
|
|
1168
1421
|
// src/components/card/use-styles.ts
|
|
1169
|
-
import { useMemo as
|
|
1422
|
+
import { useMemo as useMemo19 } from "react";
|
|
1170
1423
|
|
|
1171
1424
|
// src/components/card/use-styles.css.ts
|
|
1172
1425
|
var body = "use-styles_body__1fuvd022";
|
|
@@ -1177,15 +1430,16 @@ var root11 = "use-styles_root__1fuvd020";
|
|
|
1177
1430
|
// src/components/card/use-styles.ts
|
|
1178
1431
|
function useStyles15() {
|
|
1179
1432
|
const { themeClass } = useTheme();
|
|
1180
|
-
const root24 =
|
|
1433
|
+
const root24 = useMemo19(() => `${themeClass} ${root11}`, [themeClass]);
|
|
1181
1434
|
return { root: root24, header, body, footer };
|
|
1182
1435
|
}
|
|
1183
1436
|
|
|
1184
1437
|
// src/components/card/index.tsx
|
|
1185
1438
|
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1186
|
-
var CardRoot = forwardRef17(function Card({ children, ...rest }, ref) {
|
|
1439
|
+
var CardRoot = forwardRef17(function Card({ children, testId, ...rest }, ref) {
|
|
1187
1440
|
const { root: root24 } = useStyles15();
|
|
1188
|
-
|
|
1441
|
+
const { testId: dataTestId } = useTestId("layout", testId);
|
|
1442
|
+
return /* @__PURE__ */ jsx23("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
|
|
1189
1443
|
});
|
|
1190
1444
|
function CardHeader({ children, ...rest }) {
|
|
1191
1445
|
const { header: header3 } = useStyles15();
|
|
@@ -1316,7 +1570,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1316
1570
|
}
|
|
1317
1571
|
|
|
1318
1572
|
// src/components/alert/use-styles.ts
|
|
1319
|
-
import { useMemo as
|
|
1573
|
+
import { useMemo as useMemo20 } from "react";
|
|
1320
1574
|
|
|
1321
1575
|
// src/components/alert/use-styles.css.ts
|
|
1322
1576
|
var content = "use-styles_content__ivsh6u6";
|
|
@@ -1330,7 +1584,7 @@ function useStyles16({
|
|
|
1330
1584
|
className
|
|
1331
1585
|
}) {
|
|
1332
1586
|
const { themeClass } = useTheme();
|
|
1333
|
-
const root24 =
|
|
1587
|
+
const root24 = useMemo20(
|
|
1334
1588
|
() => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
|
|
1335
1589
|
[themeClass, severity2, className]
|
|
1336
1590
|
);
|
|
@@ -1349,12 +1603,13 @@ var defaultIcons = {
|
|
|
1349
1603
|
warn: TriangleAlertIcon,
|
|
1350
1604
|
danger: CircleXIcon
|
|
1351
1605
|
};
|
|
1352
|
-
var Alert = forwardRef18(function Alert2({ severity: severity2 = "info", title, icon, className, children, ...rest }, ref) {
|
|
1606
|
+
var Alert = forwardRef18(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
|
|
1353
1607
|
const styles = useStyles16({ severity: severity2, className });
|
|
1608
|
+
const { testId: dataTestId, slot } = useTestId("feedback", testId);
|
|
1354
1609
|
const IconComponent = icon ?? defaultIcons[severity2];
|
|
1355
|
-
return /* @__PURE__ */ jsxs16("div", { ref, role: "alert", className: styles.root, ...rest, children: [
|
|
1356
|
-
/* @__PURE__ */ jsx28("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx28(IconComponent, {}) }),
|
|
1357
|
-
/* @__PURE__ */ jsxs16("div", { className: styles.content, children: [
|
|
1610
|
+
return /* @__PURE__ */ jsxs16("div", { ref, role: "alert", className: styles.root, "data-testid": dataTestId, ...rest, children: [
|
|
1611
|
+
/* @__PURE__ */ jsx28("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ jsx28(IconComponent, {}) }),
|
|
1612
|
+
/* @__PURE__ */ jsxs16("div", { className: styles.content, "data-testid": slot("content"), children: [
|
|
1358
1613
|
title != null && /* @__PURE__ */ jsx28(Typography, { variant: "h4", children: title }),
|
|
1359
1614
|
children != null && /* @__PURE__ */ jsx28(Typography, { variant: "body", color: "fg2", children })
|
|
1360
1615
|
] })
|
|
@@ -1372,7 +1627,7 @@ import {
|
|
|
1372
1627
|
} from "react";
|
|
1373
1628
|
|
|
1374
1629
|
// src/components/tooltip/use-styles.ts
|
|
1375
|
-
import { useMemo as
|
|
1630
|
+
import { useMemo as useMemo21 } from "react";
|
|
1376
1631
|
|
|
1377
1632
|
// src/components/tooltip/use-styles.css.ts
|
|
1378
1633
|
var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
|
|
@@ -1384,11 +1639,11 @@ function useStyles17({
|
|
|
1384
1639
|
placement: placement2 = "top"
|
|
1385
1640
|
}) {
|
|
1386
1641
|
const { themeClass } = useTheme();
|
|
1387
|
-
const wrapper4 =
|
|
1642
|
+
const wrapper4 = useMemo21(
|
|
1388
1643
|
() => [themeClass, wrapper].filter(Boolean).join(" "),
|
|
1389
1644
|
[themeClass]
|
|
1390
1645
|
);
|
|
1391
|
-
const bubble2 =
|
|
1646
|
+
const bubble2 = useMemo21(
|
|
1392
1647
|
() => [bubble, placement[placement2]].filter(Boolean).join(" "),
|
|
1393
1648
|
[placement2]
|
|
1394
1649
|
);
|
|
@@ -1398,10 +1653,11 @@ function useStyles17({
|
|
|
1398
1653
|
// src/components/tooltip/index.tsx
|
|
1399
1654
|
import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1400
1655
|
var HIDE_DELAY = 120;
|
|
1401
|
-
var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
|
|
1656
|
+
var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
|
|
1402
1657
|
const [open, setOpen] = useState5(false);
|
|
1403
1658
|
const tooltipId = useId2();
|
|
1404
1659
|
const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
|
|
1660
|
+
const { testId: dataTestId, slot } = useTestId("feedback", testId);
|
|
1405
1661
|
const hideTimer = useRef2(null);
|
|
1406
1662
|
const clearHide = () => {
|
|
1407
1663
|
if (hideTimer.current) {
|
|
@@ -1440,6 +1696,7 @@ var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placemen
|
|
|
1440
1696
|
{
|
|
1441
1697
|
ref,
|
|
1442
1698
|
className: wrapper4,
|
|
1699
|
+
"data-testid": dataTestId,
|
|
1443
1700
|
onMouseEnter: show,
|
|
1444
1701
|
onMouseLeave: scheduleHide,
|
|
1445
1702
|
onFocus: show,
|
|
@@ -1453,6 +1710,7 @@ var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placemen
|
|
|
1453
1710
|
id: tooltipId,
|
|
1454
1711
|
role: "tooltip",
|
|
1455
1712
|
className: bubble2,
|
|
1713
|
+
"data-testid": slot("bubble"),
|
|
1456
1714
|
onMouseEnter: show,
|
|
1457
1715
|
onMouseLeave: scheduleHide,
|
|
1458
1716
|
children: label7
|
|
@@ -1489,7 +1747,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1489
1747
|
}
|
|
1490
1748
|
|
|
1491
1749
|
// src/components/select/use-styles.ts
|
|
1492
|
-
import { useMemo as
|
|
1750
|
+
import { useMemo as useMemo22 } from "react";
|
|
1493
1751
|
|
|
1494
1752
|
// src/components/select/use-styles.css.ts
|
|
1495
1753
|
var chevron = "use-styles_chevron__1w1czpb4";
|
|
@@ -1508,7 +1766,7 @@ function useStyles18({
|
|
|
1508
1766
|
open = false
|
|
1509
1767
|
}) {
|
|
1510
1768
|
const { themeClass } = useTheme();
|
|
1511
|
-
return
|
|
1769
|
+
return useMemo22(() => {
|
|
1512
1770
|
const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
|
|
1513
1771
|
return {
|
|
1514
1772
|
root: [themeClass, root13].filter(Boolean).join(" "),
|
|
@@ -1659,7 +1917,7 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
|
|
|
1659
1917
|
import { forwardRef as forwardRef21 } from "react";
|
|
1660
1918
|
|
|
1661
1919
|
// src/components/slider/use-styles.ts
|
|
1662
|
-
import { useMemo as
|
|
1920
|
+
import { useMemo as useMemo23 } from "react";
|
|
1663
1921
|
|
|
1664
1922
|
// src/components/slider/use-styles.css.ts
|
|
1665
1923
|
var input5 = "use-styles_input__okw59n3";
|
|
@@ -1673,7 +1931,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
|
|
|
1673
1931
|
// src/components/slider/use-styles.ts
|
|
1674
1932
|
function useStyles19() {
|
|
1675
1933
|
const { themeClass } = useTheme();
|
|
1676
|
-
return
|
|
1934
|
+
return useMemo23(() => {
|
|
1677
1935
|
const root24 = [themeClass, root14].filter(Boolean).join(" ");
|
|
1678
1936
|
return {
|
|
1679
1937
|
wrapper: wrapper2,
|
|
@@ -1726,7 +1984,7 @@ var Slider = forwardRef21(function Slider2({ value = 0, onChange, min = 0, max =
|
|
|
1726
1984
|
import { forwardRef as forwardRef22, useState as useState7 } from "react";
|
|
1727
1985
|
|
|
1728
1986
|
// src/components/accordion/use-styles.ts
|
|
1729
|
-
import { useMemo as
|
|
1987
|
+
import { useMemo as useMemo24 } from "react";
|
|
1730
1988
|
|
|
1731
1989
|
// src/components/accordion/use-styles.css.ts
|
|
1732
1990
|
var chevron2 = "use-styles_chevron__1cjrdh93";
|
|
@@ -1739,7 +1997,7 @@ var root15 = "use-styles_root__1cjrdh90";
|
|
|
1739
1997
|
// src/components/accordion/use-styles.ts
|
|
1740
1998
|
function useStyles20({ className }) {
|
|
1741
1999
|
const { themeClass } = useTheme();
|
|
1742
|
-
return
|
|
2000
|
+
return useMemo24(
|
|
1743
2001
|
() => ({
|
|
1744
2002
|
root: [themeClass, root15, className].filter(Boolean).join(" "),
|
|
1745
2003
|
item,
|
|
@@ -1753,9 +2011,10 @@ function useStyles20({ className }) {
|
|
|
1753
2011
|
|
|
1754
2012
|
// src/components/accordion/index.tsx
|
|
1755
2013
|
import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1756
|
-
var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
|
|
2014
|
+
var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
|
|
1757
2015
|
const [open, setOpen] = useState7(defaultOpen);
|
|
1758
2016
|
const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
|
|
2017
|
+
const { testId: dataTestId, slot } = useTestId("layout", testId);
|
|
1759
2018
|
const toggle = (id) => {
|
|
1760
2019
|
setOpen((current2) => {
|
|
1761
2020
|
const isOpen = current2.includes(id);
|
|
@@ -1763,28 +2022,49 @@ var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defa
|
|
|
1763
2022
|
return multiple ? [...current2, id] : [id];
|
|
1764
2023
|
});
|
|
1765
2024
|
};
|
|
1766
|
-
return /* @__PURE__ */ jsx33("div", { ref, className: root24, children: items.map((it) => {
|
|
2025
|
+
return /* @__PURE__ */ jsx33("div", { ref, className: root24, "data-testid": dataTestId, children: items.map((it) => {
|
|
1767
2026
|
const isOpen = open.includes(it.id);
|
|
1768
2027
|
const panelId = `accordion-panel-${it.id}`;
|
|
1769
2028
|
const headerId = `accordion-header-${it.id}`;
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
2029
|
+
const itemSlot = slot(`item-${it.id}`);
|
|
2030
|
+
return /* @__PURE__ */ jsxs20(
|
|
2031
|
+
"div",
|
|
2032
|
+
{
|
|
2033
|
+
className: item3,
|
|
2034
|
+
"data-testid": itemSlot,
|
|
2035
|
+
"data-state": states({ expanded: isOpen }),
|
|
2036
|
+
children: [
|
|
2037
|
+
/* @__PURE__ */ jsxs20(
|
|
2038
|
+
"button",
|
|
2039
|
+
{
|
|
2040
|
+
type: "button",
|
|
2041
|
+
id: headerId,
|
|
2042
|
+
className: header3,
|
|
2043
|
+
"aria-expanded": isOpen,
|
|
2044
|
+
"aria-controls": panelId,
|
|
2045
|
+
"data-testid": `${itemSlot}__trigger`,
|
|
2046
|
+
onClick: () => toggle(it.id),
|
|
2047
|
+
children: [
|
|
2048
|
+
it.title,
|
|
2049
|
+
/* @__PURE__ */ jsx33(ChevronDownIcon, { className: chevronFor(isOpen) })
|
|
2050
|
+
]
|
|
2051
|
+
}
|
|
2052
|
+
),
|
|
2053
|
+
isOpen && /* @__PURE__ */ jsx33(
|
|
2054
|
+
"div",
|
|
2055
|
+
{
|
|
2056
|
+
id: panelId,
|
|
2057
|
+
className: panel3,
|
|
2058
|
+
role: "region",
|
|
2059
|
+
"aria-labelledby": headerId,
|
|
2060
|
+
"data-testid": `${itemSlot}__panel`,
|
|
2061
|
+
children: it.content
|
|
2062
|
+
}
|
|
2063
|
+
)
|
|
2064
|
+
]
|
|
2065
|
+
},
|
|
2066
|
+
it.id
|
|
2067
|
+
);
|
|
1788
2068
|
}) });
|
|
1789
2069
|
});
|
|
1790
2070
|
|
|
@@ -1814,7 +2094,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1814
2094
|
}
|
|
1815
2095
|
|
|
1816
2096
|
// src/components/breadcrumbs/use-styles.ts
|
|
1817
|
-
import { useMemo as
|
|
2097
|
+
import { useMemo as useMemo25 } from "react";
|
|
1818
2098
|
|
|
1819
2099
|
// src/components/breadcrumbs/use-styles.css.ts
|
|
1820
2100
|
var crumb = "use-styles_crumb__7u0du61";
|
|
@@ -1825,7 +2105,7 @@ var separator = "use-styles_separator__7u0du63";
|
|
|
1825
2105
|
// src/components/breadcrumbs/use-styles.ts
|
|
1826
2106
|
function useStyles21({ className }) {
|
|
1827
2107
|
const { themeClass } = useTheme();
|
|
1828
|
-
const root24 =
|
|
2108
|
+
const root24 = useMemo25(
|
|
1829
2109
|
() => [themeClass, root16, className].filter(Boolean).join(" "),
|
|
1830
2110
|
[themeClass, className]
|
|
1831
2111
|
);
|
|
@@ -1834,13 +2114,14 @@ function useStyles21({ className }) {
|
|
|
1834
2114
|
|
|
1835
2115
|
// src/components/breadcrumbs/index.tsx
|
|
1836
2116
|
import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1837
|
-
var Breadcrumbs = forwardRef23(function Breadcrumbs2({ items, className, ...rest }, ref) {
|
|
2117
|
+
var Breadcrumbs = forwardRef23(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
|
|
1838
2118
|
const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
|
|
1839
|
-
|
|
2119
|
+
const { testId: dataTestId, slot } = useTestId("nav", testId);
|
|
2120
|
+
return /* @__PURE__ */ jsx35("nav", { ref, "aria-label": "Breadcrumb", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
|
|
1840
2121
|
const isLast = index === items.length - 1;
|
|
1841
2122
|
const key = index;
|
|
1842
2123
|
return /* @__PURE__ */ jsxs21(Fragment, { children: [
|
|
1843
|
-
isLast ? /* @__PURE__ */ jsx35("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx35("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx35("span", { className: crumb2, children: item3.label }),
|
|
2124
|
+
isLast ? /* @__PURE__ */ jsx35("span", { className: current2, "aria-current": "page", "data-testid": slot(`crumb-${index}`), children: item3.label }) : item3.href ? /* @__PURE__ */ jsx35("a", { className: crumb2, href: item3.href, "data-testid": slot(`crumb-${index}`), children: item3.label }) : /* @__PURE__ */ jsx35("span", { className: crumb2, "data-testid": slot(`crumb-${index}`), children: item3.label }),
|
|
1844
2125
|
!isLast && /* @__PURE__ */ jsx35("span", { className: separator2, children: /* @__PURE__ */ jsx35(ChevronRightIcon, { size: 14 }) })
|
|
1845
2126
|
] }, key);
|
|
1846
2127
|
}) });
|
|
@@ -1872,7 +2153,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1872
2153
|
}
|
|
1873
2154
|
|
|
1874
2155
|
// src/components/pagination/use-styles.ts
|
|
1875
|
-
import { useMemo as
|
|
2156
|
+
import { useMemo as useMemo26 } from "react";
|
|
1876
2157
|
|
|
1877
2158
|
// src/components/pagination/use-styles.css.ts
|
|
1878
2159
|
var ellipsis = "use-styles_ellipsis__1azgzoh3";
|
|
@@ -1884,7 +2165,7 @@ var root17 = "use-styles_root__1azgzoh0";
|
|
|
1884
2165
|
// src/components/pagination/use-styles.ts
|
|
1885
2166
|
function useStyles22() {
|
|
1886
2167
|
const { themeClass } = useTheme();
|
|
1887
|
-
return
|
|
2168
|
+
return useMemo26(
|
|
1888
2169
|
() => ({
|
|
1889
2170
|
root: [themeClass, root17].filter(Boolean).join(" "),
|
|
1890
2171
|
pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
|
|
@@ -1910,13 +2191,14 @@ function buildItems(count, page, siblingCount) {
|
|
|
1910
2191
|
if (last > first) items.push(last);
|
|
1911
2192
|
return items;
|
|
1912
2193
|
}
|
|
1913
|
-
var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange, siblingCount = 1, ...rest }, ref) {
|
|
2194
|
+
var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
|
|
1914
2195
|
const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
|
|
2196
|
+
const { testId: dataTestId, slot } = useTestId("nav", testId);
|
|
1915
2197
|
const total = Math.max(1, count);
|
|
1916
2198
|
const current2 = Math.min(Math.max(1, page), total);
|
|
1917
2199
|
const items = buildItems(total, current2, siblingCount);
|
|
1918
2200
|
const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
|
|
1919
|
-
return /* @__PURE__ */ jsxs22("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
|
|
2201
|
+
return /* @__PURE__ */ jsxs22("nav", { ref, className: root24, "aria-label": "Pagination", "data-testid": dataTestId, ...rest, children: [
|
|
1920
2202
|
/* @__PURE__ */ jsx37(
|
|
1921
2203
|
"button",
|
|
1922
2204
|
{
|
|
@@ -1924,20 +2206,27 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
|
|
|
1924
2206
|
className: nav2,
|
|
1925
2207
|
"aria-label": "Previous page",
|
|
1926
2208
|
disabled: current2 <= 1,
|
|
2209
|
+
"data-testid": slot("prev"),
|
|
1927
2210
|
onClick: () => go(current2 - 1),
|
|
1928
2211
|
children: /* @__PURE__ */ jsx37(ChevronLeftIcon, { size: 18 })
|
|
1929
2212
|
}
|
|
1930
2213
|
),
|
|
1931
2214
|
items.map(
|
|
1932
|
-
(item3, index) => item3 === "ellipsis" ? (
|
|
1933
|
-
|
|
1934
|
-
|
|
2215
|
+
(item3, index) => item3 === "ellipsis" ? /* @__PURE__ */ jsx37(
|
|
2216
|
+
"span",
|
|
2217
|
+
{
|
|
2218
|
+
className: ellipsis2,
|
|
2219
|
+
"data-testid": slot(`ellipsis-${index}`),
|
|
2220
|
+
children: "\u2026"
|
|
2221
|
+
},
|
|
2222
|
+
`ellipsis-${index}`
|
|
1935
2223
|
) : /* @__PURE__ */ jsx37(
|
|
1936
2224
|
"button",
|
|
1937
2225
|
{
|
|
1938
2226
|
type: "button",
|
|
1939
2227
|
className: pageBtnFor(item3 === current2),
|
|
1940
2228
|
"aria-current": item3 === current2 ? "page" : void 0,
|
|
2229
|
+
"data-testid": slot(`page-${item3}`),
|
|
1941
2230
|
onClick: () => go(item3),
|
|
1942
2231
|
children: item3
|
|
1943
2232
|
},
|
|
@@ -1951,6 +2240,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
|
|
|
1951
2240
|
className: nav2,
|
|
1952
2241
|
"aria-label": "Next page",
|
|
1953
2242
|
disabled: current2 >= total,
|
|
2243
|
+
"data-testid": slot("next"),
|
|
1954
2244
|
onClick: () => go(current2 + 1),
|
|
1955
2245
|
children: /* @__PURE__ */ jsx37(ChevronRightIcon, { size: 18 })
|
|
1956
2246
|
}
|
|
@@ -1962,7 +2252,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
|
|
|
1962
2252
|
import { Fragment as Fragment2, forwardRef as forwardRef25 } from "react";
|
|
1963
2253
|
|
|
1964
2254
|
// src/components/stepper/use-styles.ts
|
|
1965
|
-
import { useMemo as
|
|
2255
|
+
import { useMemo as useMemo27 } from "react";
|
|
1966
2256
|
|
|
1967
2257
|
// src/components/stepper/use-styles.css.ts
|
|
1968
2258
|
var connector = "use-styles_connector__79pt4e7";
|
|
@@ -1977,7 +2267,7 @@ var step = "use-styles_step__79pt4e1";
|
|
|
1977
2267
|
// src/components/stepper/use-styles.ts
|
|
1978
2268
|
function useStyles23({ className }) {
|
|
1979
2269
|
const { themeClass } = useTheme();
|
|
1980
|
-
return
|
|
2270
|
+
return useMemo27(() => {
|
|
1981
2271
|
const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
|
|
1982
2272
|
const markerFor = (state) => [
|
|
1983
2273
|
marker,
|
|
@@ -1991,18 +2281,28 @@ function useStyles23({ className }) {
|
|
|
1991
2281
|
|
|
1992
2282
|
// src/components/stepper/index.tsx
|
|
1993
2283
|
import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1994
|
-
var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
|
|
2284
|
+
var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
|
|
1995
2285
|
const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
|
|
1996
|
-
|
|
2286
|
+
const { testId: dataTestId, slot } = useTestId("nav", testId);
|
|
2287
|
+
return /* @__PURE__ */ jsx38("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children: steps.map((s, index) => {
|
|
1997
2288
|
const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
|
|
1998
2289
|
const isActive = state === "active";
|
|
1999
2290
|
return (
|
|
2000
2291
|
// biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
|
|
2001
2292
|
/* @__PURE__ */ jsxs23(Fragment2, { children: [
|
|
2002
|
-
/* @__PURE__ */ jsxs23(
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2293
|
+
/* @__PURE__ */ jsxs23(
|
|
2294
|
+
"div",
|
|
2295
|
+
{
|
|
2296
|
+
className: step2,
|
|
2297
|
+
"aria-current": isActive ? "step" : void 0,
|
|
2298
|
+
"data-testid": slot(`step-${index}`),
|
|
2299
|
+
"data-state": states({ done: state === "done", active: isActive }),
|
|
2300
|
+
children: [
|
|
2301
|
+
/* @__PURE__ */ jsx38("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx38(CheckIcon, { size: 14 }) : index + 1 }),
|
|
2302
|
+
/* @__PURE__ */ jsx38("span", { className: labelFor(isActive), children: s.label })
|
|
2303
|
+
]
|
|
2304
|
+
}
|
|
2305
|
+
),
|
|
2006
2306
|
index < steps.length - 1 && /* @__PURE__ */ jsx38("span", { "data-part": "connector", className: connector2 })
|
|
2007
2307
|
] }, index)
|
|
2008
2308
|
);
|
|
@@ -2013,7 +2313,7 @@ var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, class
|
|
|
2013
2313
|
import { forwardRef as forwardRef26, useId as useId4, useRef as useRef4 } from "react";
|
|
2014
2314
|
|
|
2015
2315
|
// src/components/tabs/use-styles.ts
|
|
2016
|
-
import { useMemo as
|
|
2316
|
+
import { useMemo as useMemo28 } from "react";
|
|
2017
2317
|
|
|
2018
2318
|
// src/components/tabs/use-styles.css.ts
|
|
2019
2319
|
var panel2 = "use-styles_panel__1l4m7t43";
|
|
@@ -2024,7 +2324,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
|
|
|
2024
2324
|
// src/components/tabs/use-styles.ts
|
|
2025
2325
|
function useStyles24() {
|
|
2026
2326
|
const { themeClass } = useTheme();
|
|
2027
|
-
return
|
|
2327
|
+
return useMemo28(() => {
|
|
2028
2328
|
const root24 = [themeClass, root19].filter(Boolean).join(" ");
|
|
2029
2329
|
const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
|
|
2030
2330
|
return { root: root24, tab, tabClass, panel: panel2 };
|
|
@@ -2033,8 +2333,9 @@ function useStyles24() {
|
|
|
2033
2333
|
|
|
2034
2334
|
// src/components/tabs/index.tsx
|
|
2035
2335
|
import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2036
|
-
var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref) {
|
|
2336
|
+
var Tabs = forwardRef26(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
|
|
2037
2337
|
const { root: root24, tabClass, panel: panel3 } = useStyles24();
|
|
2338
|
+
const { testId: dataTestId, slot } = useTestId("nav", testId);
|
|
2038
2339
|
const baseId = useId4();
|
|
2039
2340
|
const tabRefs = useRef4([]);
|
|
2040
2341
|
const hasPanels = items.some((item3) => item3.content !== void 0);
|
|
@@ -2069,7 +2370,7 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref)
|
|
|
2069
2370
|
}
|
|
2070
2371
|
};
|
|
2071
2372
|
return /* @__PURE__ */ jsxs24(Fragment3, { children: [
|
|
2072
|
-
/* @__PURE__ */ jsx39("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
|
|
2373
|
+
/* @__PURE__ */ jsx39("div", { ref, role: "tablist", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
|
|
2073
2374
|
const active2 = item3.value === value;
|
|
2074
2375
|
const tabbable = active2 || activeIndex === -1 && index === 0;
|
|
2075
2376
|
return /* @__PURE__ */ jsx39(
|
|
@@ -2085,6 +2386,8 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref)
|
|
|
2085
2386
|
"aria-controls": hasPanels ? panelId(item3.value) : void 0,
|
|
2086
2387
|
tabIndex: tabbable ? 0 : -1,
|
|
2087
2388
|
className: tabClass(active2),
|
|
2389
|
+
"data-testid": slot(`tab-${index}`),
|
|
2390
|
+
"data-state": states({ selected: active2 }),
|
|
2088
2391
|
onClick: () => onChange?.(item3.value),
|
|
2089
2392
|
onKeyDown: (event) => onKeyDown(event, index),
|
|
2090
2393
|
children: item3.label
|
|
@@ -2101,6 +2404,7 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref)
|
|
|
2101
2404
|
hidden: item3.value !== value,
|
|
2102
2405
|
tabIndex: 0,
|
|
2103
2406
|
className: panel3,
|
|
2407
|
+
"data-testid": slot(`panel-${item3.value}`),
|
|
2104
2408
|
children: item3.content
|
|
2105
2409
|
},
|
|
2106
2410
|
item3.value
|
|
@@ -2119,7 +2423,7 @@ import {
|
|
|
2119
2423
|
} from "react";
|
|
2120
2424
|
|
|
2121
2425
|
// src/components/menu/use-styles.ts
|
|
2122
|
-
import { useMemo as
|
|
2426
|
+
import { useMemo as useMemo29 } from "react";
|
|
2123
2427
|
|
|
2124
2428
|
// src/components/menu/use-styles.css.ts
|
|
2125
2429
|
var danger = "use-styles_danger__1uyxaj3";
|
|
@@ -2130,7 +2434,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
|
|
|
2130
2434
|
// src/components/menu/use-styles.ts
|
|
2131
2435
|
function useStyles25() {
|
|
2132
2436
|
const { themeClass } = useTheme();
|
|
2133
|
-
return
|
|
2437
|
+
return useMemo29(
|
|
2134
2438
|
() => ({
|
|
2135
2439
|
wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
|
|
2136
2440
|
list,
|
|
@@ -2298,7 +2602,7 @@ import {
|
|
|
2298
2602
|
import { createPortal } from "react-dom";
|
|
2299
2603
|
|
|
2300
2604
|
// src/components/dialog/use-styles.ts
|
|
2301
|
-
import { useMemo as
|
|
2605
|
+
import { useMemo as useMemo30 } from "react";
|
|
2302
2606
|
|
|
2303
2607
|
// src/components/dialog/use-styles.css.ts
|
|
2304
2608
|
var actions = "use-styles_actions__5tstu83";
|
|
@@ -2309,7 +2613,7 @@ var surface = "use-styles_surface__5tstu81";
|
|
|
2309
2613
|
// src/components/dialog/use-styles.ts
|
|
2310
2614
|
function useStyles26() {
|
|
2311
2615
|
const { themeClass } = useTheme();
|
|
2312
|
-
return
|
|
2616
|
+
return useMemo30(
|
|
2313
2617
|
() => ({
|
|
2314
2618
|
overlay: [themeClass, overlay].filter(Boolean).join(" "),
|
|
2315
2619
|
surface,
|
|
@@ -2418,7 +2722,7 @@ import { forwardRef as forwardRef29 } from "react";
|
|
|
2418
2722
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2419
2723
|
|
|
2420
2724
|
// src/components/snackbar/use-styles.ts
|
|
2421
|
-
import { useMemo as
|
|
2725
|
+
import { useMemo as useMemo31 } from "react";
|
|
2422
2726
|
|
|
2423
2727
|
// src/components/snackbar/use-styles.css.ts
|
|
2424
2728
|
var closeBtn = "use-styles_closeBtn__ihzsep2";
|
|
@@ -2428,7 +2732,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
|
|
|
2428
2732
|
// src/components/snackbar/use-styles.ts
|
|
2429
2733
|
function useStyles27() {
|
|
2430
2734
|
const { themeClass } = useTheme();
|
|
2431
|
-
return
|
|
2735
|
+
return useMemo31(
|
|
2432
2736
|
() => ({
|
|
2433
2737
|
root: [themeClass, root20].filter(Boolean).join(" "),
|
|
2434
2738
|
message,
|
|
@@ -2440,14 +2744,25 @@ function useStyles27() {
|
|
|
2440
2744
|
|
|
2441
2745
|
// src/components/snackbar/index.tsx
|
|
2442
2746
|
import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2443
|
-
var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action, onClose }, ref) {
|
|
2747
|
+
var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
|
|
2444
2748
|
const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
|
|
2749
|
+
const { testId: dataTestId, slot } = useTestId("feedback", testId);
|
|
2445
2750
|
if (!open || typeof document === "undefined") return null;
|
|
2446
2751
|
return createPortal2(
|
|
2447
|
-
/* @__PURE__ */ jsxs27("div", { ref, role: "status", className: root24, children: [
|
|
2448
|
-
/* @__PURE__ */ jsx42("span", { className: messageClass, children: message2 }),
|
|
2752
|
+
/* @__PURE__ */ jsxs27("div", { ref, role: "status", className: root24, "data-testid": dataTestId, children: [
|
|
2753
|
+
/* @__PURE__ */ jsx42("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
|
|
2449
2754
|
action,
|
|
2450
|
-
onClose && /* @__PURE__ */ jsx42(
|
|
2755
|
+
onClose && /* @__PURE__ */ jsx42(
|
|
2756
|
+
"button",
|
|
2757
|
+
{
|
|
2758
|
+
type: "button",
|
|
2759
|
+
"aria-label": "Close",
|
|
2760
|
+
className: closeBtn2,
|
|
2761
|
+
"data-testid": slot("close"),
|
|
2762
|
+
onClick: onClose,
|
|
2763
|
+
children: /* @__PURE__ */ jsx42(XIcon, { size: 18 })
|
|
2764
|
+
}
|
|
2765
|
+
)
|
|
2451
2766
|
] }),
|
|
2452
2767
|
document.body
|
|
2453
2768
|
);
|
|
@@ -2457,7 +2772,7 @@ var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action
|
|
|
2457
2772
|
import { forwardRef as forwardRef30 } from "react";
|
|
2458
2773
|
|
|
2459
2774
|
// src/components/table/use-styles.ts
|
|
2460
|
-
import { useMemo as
|
|
2775
|
+
import { useMemo as useMemo32 } from "react";
|
|
2461
2776
|
|
|
2462
2777
|
// src/components/table/use-styles.css.ts
|
|
2463
2778
|
var alignRight = "use-styles_alignRight__1n2cz6i3";
|
|
@@ -2469,7 +2784,7 @@ var th = "use-styles_th__1n2cz6i1";
|
|
|
2469
2784
|
// src/components/table/use-styles.ts
|
|
2470
2785
|
function useStyles28({ className }) {
|
|
2471
2786
|
const { themeClass } = useTheme();
|
|
2472
|
-
const root24 =
|
|
2787
|
+
const root24 = useMemo32(
|
|
2473
2788
|
() => [themeClass, root21, className].filter(Boolean).join(" "),
|
|
2474
2789
|
[themeClass, className]
|
|
2475
2790
|
);
|
|
@@ -2484,14 +2799,15 @@ function useStyles28({ className }) {
|
|
|
2484
2799
|
|
|
2485
2800
|
// src/components/table/index.tsx
|
|
2486
2801
|
import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2487
|
-
function TableInner({ columns, rows, getRowKey, className, caption: caption2, ...rest }, ref) {
|
|
2802
|
+
function TableInner({ columns, rows, getRowKey, className, caption: caption2, testId, ...rest }, ref) {
|
|
2488
2803
|
const { root: root24, th: th2, td: td2, alignRight: alignRight2, caption: captionClass } = useStyles28({ className });
|
|
2804
|
+
const { testId: dataTestId, slot } = useTestId("list", testId);
|
|
2489
2805
|
const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
|
|
2490
2806
|
const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
|
|
2491
|
-
return /* @__PURE__ */ jsxs28("table", { ref, className: root24, ...rest, children: [
|
|
2807
|
+
return /* @__PURE__ */ jsxs28("table", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
|
|
2492
2808
|
caption2 != null && /* @__PURE__ */ jsx43("caption", { className: captionClass, children: caption2 }),
|
|
2493
2809
|
/* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
|
|
2494
|
-
/* @__PURE__ */ jsx43("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
|
|
2810
|
+
/* @__PURE__ */ jsx43("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx43("tr", { "data-testid": slot(`row-${index}`), children: columns.map((column) => /* @__PURE__ */ jsx43("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
|
|
2495
2811
|
] });
|
|
2496
2812
|
}
|
|
2497
2813
|
var TableForwarded = forwardRef30(TableInner);
|
|
@@ -2502,7 +2818,7 @@ var Table = TableForwarded;
|
|
|
2502
2818
|
import { forwardRef as forwardRef31 } from "react";
|
|
2503
2819
|
|
|
2504
2820
|
// src/components/app-bar/use-styles.ts
|
|
2505
|
-
import { useMemo as
|
|
2821
|
+
import { useMemo as useMemo33 } from "react";
|
|
2506
2822
|
|
|
2507
2823
|
// src/components/app-bar/use-styles.css.ts
|
|
2508
2824
|
var actions2 = "use-styles_actions__1h133nh2";
|
|
@@ -2512,7 +2828,7 @@ var root22 = "use-styles_root__1h133nh0";
|
|
|
2512
2828
|
// src/components/app-bar/use-styles.ts
|
|
2513
2829
|
function useStyles29({ className }) {
|
|
2514
2830
|
const { themeClass } = useTheme();
|
|
2515
|
-
const root24 =
|
|
2831
|
+
const root24 = useMemo33(
|
|
2516
2832
|
() => [themeClass, root22, className].filter(Boolean).join(" "),
|
|
2517
2833
|
[themeClass, className]
|
|
2518
2834
|
);
|
|
@@ -2521,12 +2837,13 @@ function useStyles29({ className }) {
|
|
|
2521
2837
|
|
|
2522
2838
|
// src/components/app-bar/index.tsx
|
|
2523
2839
|
import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2524
|
-
var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
|
|
2840
|
+
var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
|
|
2525
2841
|
const styles = useStyles29({ className });
|
|
2526
|
-
|
|
2527
|
-
|
|
2842
|
+
const { testId: dataTestId, slot } = useTestId("nav", testId);
|
|
2843
|
+
return /* @__PURE__ */ jsxs29("header", { ref, className: styles.root, "data-testid": dataTestId, ...rest, children: [
|
|
2844
|
+
brand2 !== void 0 ? /* @__PURE__ */ jsx44("div", { className: styles.brand, "data-testid": slot("brand"), children: brand2 }) : null,
|
|
2528
2845
|
children,
|
|
2529
|
-
actions3 !== void 0 ? /* @__PURE__ */ jsx44("div", { className: styles.actions, children: actions3 }) : null
|
|
2846
|
+
actions3 !== void 0 ? /* @__PURE__ */ jsx44("div", { className: styles.actions, "data-testid": slot("actions"), children: actions3 }) : null
|
|
2530
2847
|
] });
|
|
2531
2848
|
});
|
|
2532
2849
|
|
|
@@ -2534,7 +2851,7 @@ var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, c
|
|
|
2534
2851
|
import { forwardRef as forwardRef32 } from "react";
|
|
2535
2852
|
|
|
2536
2853
|
// src/components/list-item/use-styles.ts
|
|
2537
|
-
import { useMemo as
|
|
2854
|
+
import { useMemo as useMemo34 } from "react";
|
|
2538
2855
|
|
|
2539
2856
|
// src/components/list-item/use-styles.css.ts
|
|
2540
2857
|
var content2 = "use-styles_content__kbreq13";
|
|
@@ -2549,7 +2866,7 @@ function useStyles30({
|
|
|
2549
2866
|
className
|
|
2550
2867
|
}) {
|
|
2551
2868
|
const { themeClass } = useTheme();
|
|
2552
|
-
const root24 =
|
|
2869
|
+
const root24 = useMemo34(
|
|
2553
2870
|
() => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
|
|
2554
2871
|
[themeClass, selected3, className]
|
|
2555
2872
|
);
|
|
@@ -2558,13 +2875,24 @@ function useStyles30({
|
|
|
2558
2875
|
|
|
2559
2876
|
// src/components/list-item/index.tsx
|
|
2560
2877
|
import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2561
|
-
var ListItem = forwardRef32(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
|
|
2878
|
+
var ListItem = forwardRef32(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
|
|
2562
2879
|
const styles = useStyles30({ selected: selected3, className });
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2880
|
+
const { testId: dataTestId, slot } = useTestId("list", testId);
|
|
2881
|
+
return /* @__PURE__ */ jsxs30(
|
|
2882
|
+
"div",
|
|
2883
|
+
{
|
|
2884
|
+
ref,
|
|
2885
|
+
className: styles.root,
|
|
2886
|
+
"data-testid": dataTestId,
|
|
2887
|
+
"data-state": states({ selected: selected3 }),
|
|
2888
|
+
...rest,
|
|
2889
|
+
children: [
|
|
2890
|
+
leading2 != null && /* @__PURE__ */ jsx45("span", { className: styles.leading, "data-testid": slot("leading"), children: leading2 }),
|
|
2891
|
+
/* @__PURE__ */ jsx45("span", { className: styles.content, "data-testid": slot("content"), children }),
|
|
2892
|
+
trailing2 != null && /* @__PURE__ */ jsx45("span", { className: styles.trailing, "data-testid": slot("trailing"), children: trailing2 })
|
|
2893
|
+
]
|
|
2894
|
+
}
|
|
2895
|
+
);
|
|
2568
2896
|
});
|
|
2569
2897
|
|
|
2570
2898
|
// src/components/icons/chevron-up/index.tsx
|