@tomny-dev/uzi 0.2.12 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/README.md +9 -0
  2. package/dist/components/application-scaffolding.test.d.ts +2 -0
  3. package/dist/components/application-scaffolding.test.d.ts.map +1 -0
  4. package/dist/components/empty-state/EmptyState.d.ts +14 -0
  5. package/dist/components/empty-state/EmptyState.d.ts.map +1 -0
  6. package/dist/components/layout-primitives/LayoutPrimitives.d.ts +16 -0
  7. package/dist/components/layout-primitives/LayoutPrimitives.d.ts.map +1 -0
  8. package/dist/components/page-container/PageContainer.d.ts +10 -0
  9. package/dist/components/page-container/PageContainer.d.ts.map +1 -0
  10. package/dist/components/page-header/PageHeader.d.ts +11 -0
  11. package/dist/components/page-header/PageHeader.d.ts.map +1 -0
  12. package/dist/components/section-header/SectionHeader.d.ts +10 -0
  13. package/dist/components/section-header/SectionHeader.d.ts.map +1 -0
  14. package/dist/components/stat/Stat.d.ts +12 -0
  15. package/dist/components/stat/Stat.d.ts.map +1 -0
  16. package/dist/index.cjs +19 -5
  17. package/dist/index.d.ts +12 -0
  18. package/dist/index.d.ts.map +1 -1
  19. package/dist/index.js +12 -6
  20. package/dist/index41.js +12 -10
  21. package/dist/index41.js.map +1 -1
  22. package/dist/index42.cjs +14 -11
  23. package/dist/index42.cjs.map +1 -1
  24. package/dist/index42.js +14 -13
  25. package/dist/index42.js.map +1 -1
  26. package/dist/index43.cjs +14 -13
  27. package/dist/index43.cjs.map +1 -1
  28. package/dist/index43.js +15 -11
  29. package/dist/index43.js.map +1 -1
  30. package/dist/index44.cjs +21 -13
  31. package/dist/index44.cjs.map +1 -1
  32. package/dist/index44.js +28 -17
  33. package/dist/index44.js.map +1 -1
  34. package/dist/index45.cjs +27 -16
  35. package/dist/index45.cjs.map +1 -1
  36. package/dist/index45.js +13 -9
  37. package/dist/index45.js.map +1 -1
  38. package/dist/index46.cjs +18 -12
  39. package/dist/index46.cjs.map +1 -1
  40. package/dist/index46.js +22 -90
  41. package/dist/index46.js.map +1 -1
  42. package/dist/index47.cjs +21 -91
  43. package/dist/index47.cjs.map +1 -1
  44. package/dist/index47.js +17 -21
  45. package/dist/index47.js.map +1 -1
  46. package/dist/index48.cjs +24 -30
  47. package/dist/index48.cjs.map +1 -1
  48. package/dist/index48.js +30 -45
  49. package/dist/index48.js.map +1 -1
  50. package/dist/index49.cjs +29 -46
  51. package/dist/index49.cjs.map +1 -1
  52. package/dist/index49.js +14 -57
  53. package/dist/index49.js.map +1 -1
  54. package/dist/index50.cjs +17 -84
  55. package/dist/index50.cjs.map +1 -1
  56. package/dist/index50.js +24 -428
  57. package/dist/index50.js.map +1 -1
  58. package/dist/index51.cjs +24 -431
  59. package/dist/index51.cjs.map +1 -1
  60. package/dist/index51.js +21 -0
  61. package/dist/index51.js.map +1 -0
  62. package/dist/index52.cjs +26 -0
  63. package/dist/index52.cjs.map +1 -0
  64. package/dist/index52.js +35 -0
  65. package/dist/index52.js.map +1 -0
  66. package/dist/index53.cjs +36 -0
  67. package/dist/index53.cjs.map +1 -0
  68. package/dist/index53.js +14 -0
  69. package/dist/index53.js.map +1 -0
  70. package/dist/index54.cjs +15 -0
  71. package/dist/index54.cjs.map +1 -0
  72. package/dist/index54.js +21 -0
  73. package/dist/index54.js.map +1 -0
  74. package/dist/index55.cjs +21 -0
  75. package/dist/index55.cjs.map +1 -0
  76. package/dist/index55.js +15 -0
  77. package/dist/index55.js.map +1 -0
  78. package/dist/index56.cjs +17 -0
  79. package/dist/index56.cjs.map +1 -0
  80. package/dist/index56.js +24 -0
  81. package/dist/index56.js.map +1 -0
  82. package/dist/index57.cjs +24 -0
  83. package/dist/index57.cjs.map +1 -0
  84. package/dist/index57.js +13 -0
  85. package/dist/index57.js.map +1 -0
  86. package/dist/index58.cjs +16 -0
  87. package/dist/index58.cjs.map +1 -0
  88. package/dist/index58.js +96 -0
  89. package/dist/index58.js.map +1 -0
  90. package/dist/index59.cjs +98 -0
  91. package/dist/index59.cjs.map +1 -0
  92. package/dist/index59.js +25 -0
  93. package/dist/index59.js.map +1 -0
  94. package/dist/index60.cjs +34 -0
  95. package/dist/index60.cjs.map +1 -0
  96. package/dist/index60.js +50 -0
  97. package/dist/index60.js.map +1 -0
  98. package/dist/index61.cjs +52 -0
  99. package/dist/index61.cjs.map +1 -0
  100. package/dist/index61.js +61 -0
  101. package/dist/index61.js.map +1 -0
  102. package/dist/index62.cjs +88 -0
  103. package/dist/index62.cjs.map +1 -0
  104. package/dist/index62.js +439 -0
  105. package/dist/index62.js.map +1 -0
  106. package/dist/index63.cjs +443 -0
  107. package/dist/index63.cjs.map +1 -0
  108. package/dist/style.css +237 -0
  109. package/package.json +1 -1
@@ -0,0 +1,36 @@
1
+ const require_cx = require("./index4.cjs");
2
+ const require_stat_module = require("./index52.cjs");
3
+ let react_jsx_runtime = require("react/jsx-runtime");
4
+ //#region src/components/stat/Stat.tsx
5
+ function Stat({ label, value, detail, className, ...rest }) {
6
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
7
+ className: require_cx.cx(require_stat_module.default.stat, className),
8
+ ...rest,
9
+ children: [
10
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
11
+ className: require_stat_module.default.label,
12
+ children: label
13
+ }),
14
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
15
+ className: require_stat_module.default.value,
16
+ children: value
17
+ }),
18
+ detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19
+ className: require_stat_module.default.detail,
20
+ children: detail
21
+ })
22
+ ]
23
+ });
24
+ }
25
+ function StatGroup({ columns = 3, className, children, ...rest }) {
26
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
27
+ className: require_cx.cx(require_stat_module.default.group, require_stat_module.default[`columns-${columns}`], className),
28
+ ...rest,
29
+ children
30
+ });
31
+ }
32
+ //#endregion
33
+ exports.Stat = Stat;
34
+ exports.StatGroup = StatGroup;
35
+
36
+ //# sourceMappingURL=index53.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index53.cjs","names":[],"sources":["../src/components/stat/Stat.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./stat.module.css\";\n\nexport type StatProps = HTMLAttributes<HTMLDivElement> & {\n label: ReactNode;\n value: ReactNode;\n detail?: ReactNode;\n};\n\nexport function Stat({ label, value, detail, className, ...rest }: StatProps) {\n return (\n <div className={cx(styles.stat, className)} {...rest}>\n <div className={styles.label}>{label}</div>\n <div className={styles.value}>{value}</div>\n {detail && <div className={styles.detail}>{detail}</div>}\n </div>\n );\n}\n\nexport type StatGroupProps = HTMLAttributes<HTMLDivElement> & {\n columns?: 1 | 2 | 3 | 4;\n};\n\nexport function StatGroup({ columns = 3, className, children, ...rest }: StatGroupProps) {\n return (\n <div\n className={cx(styles.group, styles[`columns-${columns}`], className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAUA,SAAgB,KAAK,EAAE,OAAO,OAAO,QAAQ,WAAW,GAAG,QAAmB;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,WAAA,GAAG,oBAAA,QAAO,MAAM,SAAS;EAAG,GAAI;YAAhD;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW,oBAAA,QAAO;cAAQ;GAAW,CAAA;GAC1C,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW,oBAAA,QAAO;cAAQ;GAAW,CAAA;GACzC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW,oBAAA,QAAO;cAAS;GAAY,CAAA;EACpD;;AAET;AAMA,SAAgB,UAAU,EAAE,UAAU,GAAG,WAAW,UAAU,GAAG,QAAwB;CACvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,oBAAA,QAAO,OAAO,oBAAA,QAAO,WAAW,YAAY,SAAS;EACnE,GAAI;EAEH;CACE,CAAA;AAET"}
@@ -0,0 +1,14 @@
1
+ //#region src/components/skeleton/skeleton.module.css
2
+ var skeleton = "uzi-skeleton-module__skeleton__fula5";
3
+ var skeleton_module_default = {
4
+ skeleton,
5
+ "skeleton-pulse": "uzi-skeleton-module__skeleton-pulse__Yp45W",
6
+ "radius-sm": "uzi-skeleton-module__radius-sm__FdccD",
7
+ "radius-md": "uzi-skeleton-module__radius-md__zH3RE",
8
+ "radius-lg": "uzi-skeleton-module__radius-lg__YVrHw",
9
+ "radius-full": "uzi-skeleton-module__radius-full__5o2m0"
10
+ };
11
+ //#endregion
12
+ export { skeleton_module_default as default, skeleton };
13
+
14
+ //# sourceMappingURL=index53.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index53.js","names":[],"sources":["../src/components/skeleton/skeleton.module.css"],"sourcesContent":[".skeleton {\n background: color-mix(in srgb, var(--muted-foreground) 14%, var(--background));\n animation: skeleton-pulse 1.6s ease-in-out infinite;\n}\n\n@keyframes skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.45; }\n}\n\n.radius-sm { border-radius: 4px; }\n.radius-md { border-radius: 8px; }\n.radius-lg { border-radius: 12px; }\n.radius-full { border-radius: 9999px; }\n"],"mappings":""}
@@ -0,0 +1,15 @@
1
+ //#region src/components/skeleton/skeleton.module.css
2
+ var skeleton = "uzi-skeleton-module__skeleton__fula5";
3
+ var skeleton_module_default = {
4
+ skeleton,
5
+ "skeleton-pulse": "uzi-skeleton-module__skeleton-pulse__Yp45W",
6
+ "radius-sm": "uzi-skeleton-module__radius-sm__FdccD",
7
+ "radius-md": "uzi-skeleton-module__radius-md__zH3RE",
8
+ "radius-lg": "uzi-skeleton-module__radius-lg__YVrHw",
9
+ "radius-full": "uzi-skeleton-module__radius-full__5o2m0"
10
+ };
11
+ //#endregion
12
+ exports.default = skeleton_module_default;
13
+ exports.skeleton = skeleton;
14
+
15
+ //# sourceMappingURL=index54.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index54.cjs","names":[],"sources":["../src/components/skeleton/skeleton.module.css"],"sourcesContent":[".skeleton {\n background: color-mix(in srgb, var(--muted-foreground) 14%, var(--background));\n animation: skeleton-pulse 1.6s ease-in-out infinite;\n}\n\n@keyframes skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.45; }\n}\n\n.radius-sm { border-radius: 4px; }\n.radius-md { border-radius: 8px; }\n.radius-lg { border-radius: 12px; }\n.radius-full { border-radius: 9999px; }\n"],"mappings":""}
@@ -0,0 +1,21 @@
1
+ "use client";
2
+ import { cx } from "./index3.js";
3
+ import skeleton_module_default from "./index53.js";
4
+ import { jsx } from "react/jsx-runtime";
5
+ //#region src/components/skeleton/Skeleton.tsx
6
+ function Skeleton({ width, height, radius = "md", className, style, ...rest }) {
7
+ return /* @__PURE__ */ jsx("div", {
8
+ className: cx(skeleton_module_default.skeleton, skeleton_module_default[`radius-${radius}`], className),
9
+ style: {
10
+ width,
11
+ height,
12
+ ...style
13
+ },
14
+ "aria-hidden": "true",
15
+ ...rest
16
+ });
17
+ }
18
+ //#endregion
19
+ export { Skeleton };
20
+
21
+ //# sourceMappingURL=index54.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index54.js","names":[],"sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./skeleton.module.css\";\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n /** Width as a CSS value. */\n width?: string;\n /** Height as a CSS value. */\n height?: string;\n /** Border radius preset. Defaults to \"md\". */\n radius?: \"sm\" | \"md\" | \"lg\" | \"full\";\n};\n\nexport function Skeleton({\n width,\n height,\n radius = \"md\",\n className,\n style,\n ...rest\n}: SkeletonProps) {\n return (\n <div\n className={cx(styles.skeleton, styles[`radius-${radius}`], className)}\n style={{ width, height, ...style }}\n aria-hidden=\"true\"\n {...rest}\n />\n );\n}\n"],"mappings":";;;;;AAeA,SAAgB,SAAS,EACvB,OACA,QACA,SAAS,MACT,WACA,OACA,GAAG,QACa;CAChB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wBAAO,UAAU,wBAAO,UAAU,WAAW,SAAS;EACpE,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,eAAY;EACZ,GAAI;CACL,CAAA;AAEL"}
@@ -0,0 +1,21 @@
1
+ "use client";
2
+ const require_cx = require("./index4.cjs");
3
+ const require_skeleton_module = require("./index54.cjs");
4
+ let react_jsx_runtime = require("react/jsx-runtime");
5
+ //#region src/components/skeleton/Skeleton.tsx
6
+ function Skeleton({ width, height, radius = "md", className, style, ...rest }) {
7
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
8
+ className: require_cx.cx(require_skeleton_module.default.skeleton, require_skeleton_module.default[`radius-${radius}`], className),
9
+ style: {
10
+ width,
11
+ height,
12
+ ...style
13
+ },
14
+ "aria-hidden": "true",
15
+ ...rest
16
+ });
17
+ }
18
+ //#endregion
19
+ exports.Skeleton = Skeleton;
20
+
21
+ //# sourceMappingURL=index55.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index55.cjs","names":[],"sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./skeleton.module.css\";\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n /** Width as a CSS value. */\n width?: string;\n /** Height as a CSS value. */\n height?: string;\n /** Border radius preset. Defaults to \"md\". */\n radius?: \"sm\" | \"md\" | \"lg\" | \"full\";\n};\n\nexport function Skeleton({\n width,\n height,\n radius = \"md\",\n className,\n style,\n ...rest\n}: SkeletonProps) {\n return (\n <div\n className={cx(styles.skeleton, styles[`radius-${radius}`], className)}\n style={{ width, height, ...style }}\n aria-hidden=\"true\"\n {...rest}\n />\n );\n}\n"],"mappings":";;;;;AAeA,SAAgB,SAAS,EACvB,OACA,QACA,SAAS,MACT,WACA,OACA,GAAG,QACa;CAChB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,wBAAA,QAAO,UAAU,wBAAA,QAAO,UAAU,WAAW,SAAS;EACpE,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,eAAY;EACZ,GAAI;CACL,CAAA;AAEL"}
@@ -0,0 +1,15 @@
1
+ //#region src/components/progress/progress.module.css
2
+ var track = "uzi-progress-module__track__gM0oV";
3
+ var fill = "uzi-progress-module__fill__aLAbp";
4
+ var progress_module_default = {
5
+ track,
6
+ fill,
7
+ "tone-default": "uzi-progress-module__tone-default__fhf7o",
8
+ "tone-success": "uzi-progress-module__tone-success__FsGHD",
9
+ "tone-warning": "uzi-progress-module__tone-warning__UAttL",
10
+ "tone-danger": "uzi-progress-module__tone-danger__-L-Ee"
11
+ };
12
+ //#endregion
13
+ export { progress_module_default as default, fill, track };
14
+
15
+ //# sourceMappingURL=index55.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index55.js","names":[],"sources":["../src/components/progress/progress.module.css"],"sourcesContent":[".track {\n height: 8px;\n border-radius: 9999px;\n overflow: hidden;\n background: color-mix(in srgb, var(--border) 60%, transparent);\n}\n\n.fill {\n height: 100%;\n border-radius: 9999px;\n transition: width 0.4s ease;\n}\n\n.tone-default { background: var(--foreground); }\n.tone-success { background: var(--success); }\n.tone-warning { background: var(--warning); }\n.tone-danger { background: var(--destructive); }\n"],"mappings":""}
@@ -0,0 +1,17 @@
1
+ //#region src/components/progress/progress.module.css
2
+ var track = "uzi-progress-module__track__gM0oV";
3
+ var fill = "uzi-progress-module__fill__aLAbp";
4
+ var progress_module_default = {
5
+ track,
6
+ fill,
7
+ "tone-default": "uzi-progress-module__tone-default__fhf7o",
8
+ "tone-success": "uzi-progress-module__tone-success__FsGHD",
9
+ "tone-warning": "uzi-progress-module__tone-warning__UAttL",
10
+ "tone-danger": "uzi-progress-module__tone-danger__-L-Ee"
11
+ };
12
+ //#endregion
13
+ exports.default = progress_module_default;
14
+ exports.fill = fill;
15
+ exports.track = track;
16
+
17
+ //# sourceMappingURL=index56.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index56.cjs","names":[],"sources":["../src/components/progress/progress.module.css"],"sourcesContent":[".track {\n height: 8px;\n border-radius: 9999px;\n overflow: hidden;\n background: color-mix(in srgb, var(--border) 60%, transparent);\n}\n\n.fill {\n height: 100%;\n border-radius: 9999px;\n transition: width 0.4s ease;\n}\n\n.tone-default { background: var(--foreground); }\n.tone-success { background: var(--success); }\n.tone-warning { background: var(--warning); }\n.tone-danger { background: var(--destructive); }\n"],"mappings":""}
@@ -0,0 +1,24 @@
1
+ import { cx } from "./index3.js";
2
+ import progress_module_default from "./index55.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/progress/Progress.tsx
5
+ function Progress({ value, tone = "default", className, "aria-label": ariaLabel, ...rest }) {
6
+ const clamped = Math.max(0, Math.min(100, value));
7
+ return /* @__PURE__ */ jsx("div", {
8
+ className: cx(progress_module_default.track, className),
9
+ role: "progressbar",
10
+ "aria-valuenow": clamped,
11
+ "aria-valuemin": 0,
12
+ "aria-valuemax": 100,
13
+ "aria-label": ariaLabel,
14
+ ...rest,
15
+ children: /* @__PURE__ */ jsx("div", {
16
+ className: cx(progress_module_default.fill, progress_module_default[`tone-${tone}`]),
17
+ style: { width: `${clamped}%` }
18
+ })
19
+ });
20
+ }
21
+ //#endregion
22
+ export { Progress };
23
+
24
+ //# sourceMappingURL=index56.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index56.js","names":[],"sources":["../src/components/progress/Progress.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./progress.module.css\";\n\nexport type ProgressTone = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nexport type ProgressProps = HTMLAttributes<HTMLDivElement> & {\n /** Value 0–100. */\n value: number;\n /** Visual tone. Defaults to \"default\". */\n tone?: ProgressTone;\n /** Accessible label. */\n \"aria-label\"?: string;\n};\n\nexport function Progress({\n value,\n tone = \"default\",\n className,\n \"aria-label\": ariaLabel,\n ...rest\n}: ProgressProps) {\n const clamped = Math.max(0, Math.min(100, value));\n return (\n <div\n className={cx(styles.track, className)}\n role=\"progressbar\"\n aria-valuenow={clamped}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel}\n {...rest}\n >\n <div\n className={cx(styles.fill, styles[`tone-${tone}`])}\n style={{ width: `${clamped}%` }}\n />\n </div>\n );\n}\n"],"mappings":";;;;AAeA,SAAgB,SAAS,EACvB,OACA,OAAO,WACP,WACA,cAAc,WACd,GAAG,QACa;CAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;CAChD,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wBAAO,OAAO,SAAS;EACrC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAW,GAAG,wBAAO,MAAM,wBAAO,QAAQ,OAAO;GACjD,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG;EAC/B,CAAA;CACE,CAAA;AAET"}
@@ -0,0 +1,24 @@
1
+ const require_cx = require("./index4.cjs");
2
+ const require_progress_module = require("./index56.cjs");
3
+ let react_jsx_runtime = require("react/jsx-runtime");
4
+ //#region src/components/progress/Progress.tsx
5
+ function Progress({ value, tone = "default", className, "aria-label": ariaLabel, ...rest }) {
6
+ const clamped = Math.max(0, Math.min(100, value));
7
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
8
+ className: require_cx.cx(require_progress_module.default.track, className),
9
+ role: "progressbar",
10
+ "aria-valuenow": clamped,
11
+ "aria-valuemin": 0,
12
+ "aria-valuemax": 100,
13
+ "aria-label": ariaLabel,
14
+ ...rest,
15
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16
+ className: require_cx.cx(require_progress_module.default.fill, require_progress_module.default[`tone-${tone}`]),
17
+ style: { width: `${clamped}%` }
18
+ })
19
+ });
20
+ }
21
+ //#endregion
22
+ exports.Progress = Progress;
23
+
24
+ //# sourceMappingURL=index57.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index57.cjs","names":[],"sources":["../src/components/progress/Progress.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./progress.module.css\";\n\nexport type ProgressTone = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nexport type ProgressProps = HTMLAttributes<HTMLDivElement> & {\n /** Value 0–100. */\n value: number;\n /** Visual tone. Defaults to \"default\". */\n tone?: ProgressTone;\n /** Accessible label. */\n \"aria-label\"?: string;\n};\n\nexport function Progress({\n value,\n tone = \"default\",\n className,\n \"aria-label\": ariaLabel,\n ...rest\n}: ProgressProps) {\n const clamped = Math.max(0, Math.min(100, value));\n return (\n <div\n className={cx(styles.track, className)}\n role=\"progressbar\"\n aria-valuenow={clamped}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel}\n {...rest}\n >\n <div\n className={cx(styles.fill, styles[`tone-${tone}`])}\n style={{ width: `${clamped}%` }}\n />\n </div>\n );\n}\n"],"mappings":";;;;AAeA,SAAgB,SAAS,EACvB,OACA,OAAO,WACP,WACA,cAAc,WACd,GAAG,QACa;CAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;CAChD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,wBAAA,QAAO,OAAO,SAAS;EACrC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,GAAI;YAEJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAW,WAAA,GAAG,wBAAA,QAAO,MAAM,wBAAA,QAAO,QAAQ,OAAO;GACjD,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG;EAC/B,CAAA;CACE,CAAA;AAET"}
@@ -0,0 +1,13 @@
1
+ //#region src/components/segmented-toggle/segmented-toggle.module.css
2
+ var track = "uzi-segmented-toggle-module__track__M4fjm";
3
+ var option = "uzi-segmented-toggle-module__option__7cEZJ";
4
+ var label = "uzi-segmented-toggle-module__label__bDAIv";
5
+ var segmented_toggle_module_default = {
6
+ track,
7
+ option,
8
+ label
9
+ };
10
+ //#endregion
11
+ export { segmented_toggle_module_default as default, label, option, track };
12
+
13
+ //# sourceMappingURL=index57.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index57.js","names":[],"sources":["../src/components/segmented-toggle/segmented-toggle.module.css"],"sourcesContent":[".track {\n display: inline-flex;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: var(--card);\n padding: 4px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n gap: 2px;\n}\n\n.option {\n border-radius: 999px;\n padding: 6px 16px;\n font-size: var(--uzi-control-font-size);\n font-weight: 500;\n line-height: var(--uzi-control-line-height);\n background: transparent;\n color: var(--muted-foreground);\n border: none;\n cursor: pointer;\n transition:\n color 120ms ease,\n background 120ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.option:hover:not([aria-checked=\"true\"]):not(:disabled) {\n color: var(--foreground);\n}\n\n.option[aria-checked=\"true\"] {\n background: var(--foreground);\n color: var(--background);\n}\n\n.option:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.option:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n"],"mappings":""}
@@ -0,0 +1,16 @@
1
+ //#region src/components/segmented-toggle/segmented-toggle.module.css
2
+ var track = "uzi-segmented-toggle-module__track__M4fjm";
3
+ var option = "uzi-segmented-toggle-module__option__7cEZJ";
4
+ var label = "uzi-segmented-toggle-module__label__bDAIv";
5
+ var segmented_toggle_module_default = {
6
+ track,
7
+ option,
8
+ label
9
+ };
10
+ //#endregion
11
+ exports.default = segmented_toggle_module_default;
12
+ exports.label = label;
13
+ exports.option = option;
14
+ exports.track = track;
15
+
16
+ //# sourceMappingURL=index58.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index58.cjs","names":[],"sources":["../src/components/segmented-toggle/segmented-toggle.module.css"],"sourcesContent":[".track {\n display: inline-flex;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: var(--card);\n padding: 4px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n gap: 2px;\n}\n\n.option {\n border-radius: 999px;\n padding: 6px 16px;\n font-size: var(--uzi-control-font-size);\n font-weight: 500;\n line-height: var(--uzi-control-line-height);\n background: transparent;\n color: var(--muted-foreground);\n border: none;\n cursor: pointer;\n transition:\n color 120ms ease,\n background 120ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.option:hover:not([aria-checked=\"true\"]):not(:disabled) {\n color: var(--foreground);\n}\n\n.option[aria-checked=\"true\"] {\n background: var(--foreground);\n color: var(--background);\n}\n\n.option:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.option:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n"],"mappings":""}
@@ -0,0 +1,96 @@
1
+ "use client";
2
+ import { cx } from "./index3.js";
3
+ import segmented_toggle_module_default from "./index57.js";
4
+ import * as React from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/components/segmented-toggle/SegmentedToggle.tsx
7
+ function SegmentedToggle({ options, value, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className }) {
8
+ const itemRefs = React.useRef([]);
9
+ const selectedIndex = options.findIndex((opt) => opt.value === value);
10
+ const fallbackIndex = options.findIndex((opt) => !opt.disabled);
11
+ let lastEnabledIndex = -1;
12
+ for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index]?.disabled) {
13
+ lastEnabledIndex = index;
14
+ break;
15
+ }
16
+ const tabbableIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : fallbackIndex;
17
+ const focusItem = (index) => {
18
+ itemRefs.current[index]?.focus();
19
+ };
20
+ const findEnabledIndex = (startIndex, direction) => {
21
+ if (options.length === 0) return -1;
22
+ let nextIndex = startIndex;
23
+ for (let i = 0; i < options.length; i += 1) {
24
+ nextIndex = (nextIndex + direction + options.length) % options.length;
25
+ if (!options[nextIndex]?.disabled) return nextIndex;
26
+ }
27
+ return startIndex;
28
+ };
29
+ const selectIndex = (index) => {
30
+ const nextOption = options[index];
31
+ if (!nextOption || nextOption.disabled || nextOption.value === value) return;
32
+ onChange(nextOption.value);
33
+ };
34
+ const handleKeyDown = (event, index) => {
35
+ switch (event.key) {
36
+ case "ArrowRight":
37
+ case "ArrowDown": {
38
+ event.preventDefault();
39
+ const nextIndex = findEnabledIndex(index, 1);
40
+ focusItem(nextIndex);
41
+ selectIndex(nextIndex);
42
+ break;
43
+ }
44
+ case "ArrowLeft":
45
+ case "ArrowUp": {
46
+ event.preventDefault();
47
+ const nextIndex = findEnabledIndex(index, -1);
48
+ focusItem(nextIndex);
49
+ selectIndex(nextIndex);
50
+ break;
51
+ }
52
+ case "Home":
53
+ event.preventDefault();
54
+ focusItem(fallbackIndex);
55
+ if (fallbackIndex >= 0) selectIndex(fallbackIndex);
56
+ break;
57
+ case "End":
58
+ event.preventDefault();
59
+ if (lastEnabledIndex >= 0) {
60
+ focusItem(lastEnabledIndex);
61
+ selectIndex(lastEnabledIndex);
62
+ }
63
+ break;
64
+ default: break;
65
+ }
66
+ };
67
+ return /* @__PURE__ */ jsx("div", {
68
+ className: cx(segmented_toggle_module_default.track, className),
69
+ role: "radiogroup",
70
+ "aria-label": ariaLabel,
71
+ "aria-labelledby": ariaLabelledBy,
72
+ children: options.map((opt, index) => /* @__PURE__ */ jsx("button", {
73
+ ref: (node) => {
74
+ itemRefs.current[index] = node;
75
+ },
76
+ type: "button",
77
+ role: "radio",
78
+ "aria-checked": opt.value === value,
79
+ disabled: opt.disabled,
80
+ tabIndex: opt.disabled ? -1 : index === tabbableIndex ? 0 : -1,
81
+ onClick: () => {
82
+ if (opt.value !== value) onChange(opt.value);
83
+ },
84
+ onKeyDown: (event) => handleKeyDown(event, index),
85
+ className: cx(segmented_toggle_module_default.option),
86
+ children: /* @__PURE__ */ jsx("span", {
87
+ className: segmented_toggle_module_default.label,
88
+ children: opt.label
89
+ })
90
+ }, opt.value))
91
+ });
92
+ }
93
+ //#endregion
94
+ export { SegmentedToggle };
95
+
96
+ //# sourceMappingURL=index58.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index58.js","names":[],"sources":["../src/components/segmented-toggle/SegmentedToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./segmented-toggle.module.css\";\n\nexport type SegmentedToggleOption<T extends string = string> = {\n label: ReactNode;\n value: T;\n disabled?: boolean;\n};\n\nexport type SegmentedToggleProps<T extends string = string> = {\n options: SegmentedToggleOption<T>[];\n value: T;\n onChange: (value: T) => void;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n className?: string;\n};\n\nexport function SegmentedToggle<T extends string = string>({\n options,\n value,\n onChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n className,\n}: SegmentedToggleProps<T>) {\n const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([]);\n const selectedIndex = options.findIndex((opt) => opt.value === value);\n const fallbackIndex = options.findIndex((opt) => !opt.disabled);\n let lastEnabledIndex = -1;\n for (let index = options.length - 1; index >= 0; index -= 1) {\n if (!options[index]?.disabled) {\n lastEnabledIndex = index;\n break;\n }\n }\n const tabbableIndex =\n selectedIndex >= 0 && !options[selectedIndex]?.disabled\n ? selectedIndex\n : fallbackIndex;\n\n const focusItem = (index: number) => {\n itemRefs.current[index]?.focus();\n };\n\n const findEnabledIndex = (\n startIndex: number,\n direction: 1 | -1,\n ): number => {\n if (options.length === 0) return -1;\n\n let nextIndex = startIndex;\n for (let i = 0; i < options.length; i += 1) {\n nextIndex = (nextIndex + direction + options.length) % options.length;\n if (!options[nextIndex]?.disabled) {\n return nextIndex;\n }\n }\n\n return startIndex;\n };\n\n const selectIndex = (index: number) => {\n const nextOption = options[index];\n if (!nextOption || nextOption.disabled || nextOption.value === value) {\n return;\n }\n onChange(nextOption.value);\n };\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n index: number,\n ) => {\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\": {\n event.preventDefault();\n const nextIndex = findEnabledIndex(index, 1);\n focusItem(nextIndex);\n selectIndex(nextIndex);\n break;\n }\n case \"ArrowLeft\":\n case \"ArrowUp\": {\n event.preventDefault();\n const nextIndex = findEnabledIndex(index, -1);\n focusItem(nextIndex);\n selectIndex(nextIndex);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n focusItem(fallbackIndex);\n if (fallbackIndex >= 0) {\n selectIndex(fallbackIndex);\n }\n break;\n }\n case \"End\": {\n event.preventDefault();\n if (lastEnabledIndex >= 0) {\n focusItem(lastEnabledIndex);\n selectIndex(lastEnabledIndex);\n }\n break;\n }\n default:\n break;\n }\n };\n\n return (\n <div\n className={cx(styles.track, className)}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {options.map((opt, index) => (\n <button\n key={opt.value}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={opt.value === value}\n disabled={opt.disabled}\n tabIndex={\n opt.disabled\n ? -1\n : index === tabbableIndex\n ? 0\n : -1\n }\n onClick={() => {\n if (opt.value !== value) {\n onChange(opt.value);\n }\n }}\n onKeyDown={(event) => handleKeyDown(event, index)}\n className={cx(styles.option)}\n >\n <span className={styles.label}>{opt.label}</span>\n </button>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,gBAA2C,EACzD,SACA,OACA,UACA,cAAc,WACd,mBAAmB,gBACnB,aAC0B;CAC1B,MAAM,WAAW,MAAM,OAAwC,CAAC,CAAC;CACjE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,IAAI,UAAU,KAAK;CACpE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,CAAC,IAAI,QAAQ;CAC9D,IAAI,mBAAmB;CACvB,KAAK,IAAI,QAAQ,QAAQ,SAAS,GAAG,SAAS,GAAG,SAAS,GACxD,IAAI,CAAC,QAAQ,MAAM,EAAE,UAAU;EAC7B,mBAAmB;EACnB;CACF;CAEF,MAAM,gBACJ,iBAAiB,KAAK,CAAC,QAAQ,cAAc,EAAE,WAC3C,gBACA;CAEN,MAAM,aAAa,UAAkB;EACnC,SAAS,QAAQ,MAAM,EAAE,MAAM;CACjC;CAEA,MAAM,oBACJ,YACA,cACW;EACX,IAAI,QAAQ,WAAW,GAAG,OAAO;EAEjC,IAAI,YAAY;EAChB,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;GAC1C,aAAa,YAAY,YAAY,QAAQ,UAAU,QAAQ;GAC/D,IAAI,CAAC,QAAQ,UAAU,EAAE,UACvB,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,MAAM,eAAe,UAAkB;EACrC,MAAM,aAAa,QAAQ;EAC3B,IAAI,CAAC,cAAc,WAAW,YAAY,WAAW,UAAU,OAC7D;EAEF,SAAS,WAAW,KAAK;CAC3B;CAEA,MAAM,iBACJ,OACA,UACG;EACH,QAAQ,MAAM,KAAd;GACE,KAAK;GACL,KAAK,aAAa;IAChB,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,CAAC;IAC3C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;GACL,KAAK,WAAW;IACd,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,EAAE;IAC5C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;IACH,MAAM,eAAe;IACrB,UAAU,aAAa;IACvB,IAAI,iBAAiB,GACnB,YAAY,aAAa;IAE3B;GAEF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,oBAAoB,GAAG;KACzB,UAAU,gBAAgB;KAC1B,YAAY,gBAAgB;IAC9B;IACA;GAEF,SACE;EACJ;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,gCAAO,OAAO,SAAS;EACrC,MAAK;EACL,cAAY;EACZ,mBAAiB;YAEhB,QAAQ,KAAK,KAAK,UACjB,oBAAC,UAAD;GAEE,MAAM,SAAS;IACb,SAAS,QAAQ,SAAS;GAC5B;GACA,MAAK;GACL,MAAK;GACL,gBAAc,IAAI,UAAU;GAC5B,UAAU,IAAI;GACd,UACE,IAAI,WACA,KACA,UAAU,gBACR,IACA;GAER,eAAe;IACb,IAAI,IAAI,UAAU,OAChB,SAAS,IAAI,KAAK;GAEtB;GACA,YAAY,UAAU,cAAc,OAAO,KAAK;GAChD,WAAW,GAAG,gCAAO,MAAM;aAE3B,oBAAC,QAAD;IAAM,WAAW,gCAAO;cAAQ,IAAI;GAAY,CAAA;EAC1C,GAxBD,IAAI,KAwBH,CACT;CACE,CAAA;AAET"}
@@ -0,0 +1,98 @@
1
+ "use client";
2
+ const require_runtime = require("./index2.cjs");
3
+ const require_cx = require("./index4.cjs");
4
+ const require_segmented_toggle_module = require("./index58.cjs");
5
+ let react = require("react");
6
+ react = require_runtime.__toESM(react, 1);
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ //#region src/components/segmented-toggle/SegmentedToggle.tsx
9
+ function SegmentedToggle({ options, value, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className }) {
10
+ const itemRefs = react.useRef([]);
11
+ const selectedIndex = options.findIndex((opt) => opt.value === value);
12
+ const fallbackIndex = options.findIndex((opt) => !opt.disabled);
13
+ let lastEnabledIndex = -1;
14
+ for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index]?.disabled) {
15
+ lastEnabledIndex = index;
16
+ break;
17
+ }
18
+ const tabbableIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : fallbackIndex;
19
+ const focusItem = (index) => {
20
+ itemRefs.current[index]?.focus();
21
+ };
22
+ const findEnabledIndex = (startIndex, direction) => {
23
+ if (options.length === 0) return -1;
24
+ let nextIndex = startIndex;
25
+ for (let i = 0; i < options.length; i += 1) {
26
+ nextIndex = (nextIndex + direction + options.length) % options.length;
27
+ if (!options[nextIndex]?.disabled) return nextIndex;
28
+ }
29
+ return startIndex;
30
+ };
31
+ const selectIndex = (index) => {
32
+ const nextOption = options[index];
33
+ if (!nextOption || nextOption.disabled || nextOption.value === value) return;
34
+ onChange(nextOption.value);
35
+ };
36
+ const handleKeyDown = (event, index) => {
37
+ switch (event.key) {
38
+ case "ArrowRight":
39
+ case "ArrowDown": {
40
+ event.preventDefault();
41
+ const nextIndex = findEnabledIndex(index, 1);
42
+ focusItem(nextIndex);
43
+ selectIndex(nextIndex);
44
+ break;
45
+ }
46
+ case "ArrowLeft":
47
+ case "ArrowUp": {
48
+ event.preventDefault();
49
+ const nextIndex = findEnabledIndex(index, -1);
50
+ focusItem(nextIndex);
51
+ selectIndex(nextIndex);
52
+ break;
53
+ }
54
+ case "Home":
55
+ event.preventDefault();
56
+ focusItem(fallbackIndex);
57
+ if (fallbackIndex >= 0) selectIndex(fallbackIndex);
58
+ break;
59
+ case "End":
60
+ event.preventDefault();
61
+ if (lastEnabledIndex >= 0) {
62
+ focusItem(lastEnabledIndex);
63
+ selectIndex(lastEnabledIndex);
64
+ }
65
+ break;
66
+ default: break;
67
+ }
68
+ };
69
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
70
+ className: require_cx.cx(require_segmented_toggle_module.default.track, className),
71
+ role: "radiogroup",
72
+ "aria-label": ariaLabel,
73
+ "aria-labelledby": ariaLabelledBy,
74
+ children: options.map((opt, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
75
+ ref: (node) => {
76
+ itemRefs.current[index] = node;
77
+ },
78
+ type: "button",
79
+ role: "radio",
80
+ "aria-checked": opt.value === value,
81
+ disabled: opt.disabled,
82
+ tabIndex: opt.disabled ? -1 : index === tabbableIndex ? 0 : -1,
83
+ onClick: () => {
84
+ if (opt.value !== value) onChange(opt.value);
85
+ },
86
+ onKeyDown: (event) => handleKeyDown(event, index),
87
+ className: require_cx.cx(require_segmented_toggle_module.default.option),
88
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
89
+ className: require_segmented_toggle_module.default.label,
90
+ children: opt.label
91
+ })
92
+ }, opt.value))
93
+ });
94
+ }
95
+ //#endregion
96
+ exports.SegmentedToggle = SegmentedToggle;
97
+
98
+ //# sourceMappingURL=index59.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index59.cjs","names":[],"sources":["../src/components/segmented-toggle/SegmentedToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./segmented-toggle.module.css\";\n\nexport type SegmentedToggleOption<T extends string = string> = {\n label: ReactNode;\n value: T;\n disabled?: boolean;\n};\n\nexport type SegmentedToggleProps<T extends string = string> = {\n options: SegmentedToggleOption<T>[];\n value: T;\n onChange: (value: T) => void;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n className?: string;\n};\n\nexport function SegmentedToggle<T extends string = string>({\n options,\n value,\n onChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n className,\n}: SegmentedToggleProps<T>) {\n const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([]);\n const selectedIndex = options.findIndex((opt) => opt.value === value);\n const fallbackIndex = options.findIndex((opt) => !opt.disabled);\n let lastEnabledIndex = -1;\n for (let index = options.length - 1; index >= 0; index -= 1) {\n if (!options[index]?.disabled) {\n lastEnabledIndex = index;\n break;\n }\n }\n const tabbableIndex =\n selectedIndex >= 0 && !options[selectedIndex]?.disabled\n ? selectedIndex\n : fallbackIndex;\n\n const focusItem = (index: number) => {\n itemRefs.current[index]?.focus();\n };\n\n const findEnabledIndex = (\n startIndex: number,\n direction: 1 | -1,\n ): number => {\n if (options.length === 0) return -1;\n\n let nextIndex = startIndex;\n for (let i = 0; i < options.length; i += 1) {\n nextIndex = (nextIndex + direction + options.length) % options.length;\n if (!options[nextIndex]?.disabled) {\n return nextIndex;\n }\n }\n\n return startIndex;\n };\n\n const selectIndex = (index: number) => {\n const nextOption = options[index];\n if (!nextOption || nextOption.disabled || nextOption.value === value) {\n return;\n }\n onChange(nextOption.value);\n };\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n index: number,\n ) => {\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\": {\n event.preventDefault();\n const nextIndex = findEnabledIndex(index, 1);\n focusItem(nextIndex);\n selectIndex(nextIndex);\n break;\n }\n case \"ArrowLeft\":\n case \"ArrowUp\": {\n event.preventDefault();\n const nextIndex = findEnabledIndex(index, -1);\n focusItem(nextIndex);\n selectIndex(nextIndex);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n focusItem(fallbackIndex);\n if (fallbackIndex >= 0) {\n selectIndex(fallbackIndex);\n }\n break;\n }\n case \"End\": {\n event.preventDefault();\n if (lastEnabledIndex >= 0) {\n focusItem(lastEnabledIndex);\n selectIndex(lastEnabledIndex);\n }\n break;\n }\n default:\n break;\n }\n };\n\n return (\n <div\n className={cx(styles.track, className)}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {options.map((opt, index) => (\n <button\n key={opt.value}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={opt.value === value}\n disabled={opt.disabled}\n tabIndex={\n opt.disabled\n ? -1\n : index === tabbableIndex\n ? 0\n : -1\n }\n onClick={() => {\n if (opt.value !== value) {\n onChange(opt.value);\n }\n }}\n onKeyDown={(event) => handleKeyDown(event, index)}\n className={cx(styles.option)}\n >\n <span className={styles.label}>{opt.label}</span>\n </button>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,gBAA2C,EACzD,SACA,OACA,UACA,cAAc,WACd,mBAAmB,gBACnB,aAC0B;CAC1B,MAAM,WAAW,MAAM,OAAwC,CAAC,CAAC;CACjE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,IAAI,UAAU,KAAK;CACpE,MAAM,gBAAgB,QAAQ,WAAW,QAAQ,CAAC,IAAI,QAAQ;CAC9D,IAAI,mBAAmB;CACvB,KAAK,IAAI,QAAQ,QAAQ,SAAS,GAAG,SAAS,GAAG,SAAS,GACxD,IAAI,CAAC,QAAQ,MAAM,EAAE,UAAU;EAC7B,mBAAmB;EACnB;CACF;CAEF,MAAM,gBACJ,iBAAiB,KAAK,CAAC,QAAQ,cAAc,EAAE,WAC3C,gBACA;CAEN,MAAM,aAAa,UAAkB;EACnC,SAAS,QAAQ,MAAM,EAAE,MAAM;CACjC;CAEA,MAAM,oBACJ,YACA,cACW;EACX,IAAI,QAAQ,WAAW,GAAG,OAAO;EAEjC,IAAI,YAAY;EAChB,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;GAC1C,aAAa,YAAY,YAAY,QAAQ,UAAU,QAAQ;GAC/D,IAAI,CAAC,QAAQ,UAAU,EAAE,UACvB,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,MAAM,eAAe,UAAkB;EACrC,MAAM,aAAa,QAAQ;EAC3B,IAAI,CAAC,cAAc,WAAW,YAAY,WAAW,UAAU,OAC7D;EAEF,SAAS,WAAW,KAAK;CAC3B;CAEA,MAAM,iBACJ,OACA,UACG;EACH,QAAQ,MAAM,KAAd;GACE,KAAK;GACL,KAAK,aAAa;IAChB,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,CAAC;IAC3C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;GACL,KAAK,WAAW;IACd,MAAM,eAAe;IACrB,MAAM,YAAY,iBAAiB,OAAO,EAAE;IAC5C,UAAU,SAAS;IACnB,YAAY,SAAS;IACrB;GACF;GACA,KAAK;IACH,MAAM,eAAe;IACrB,UAAU,aAAa;IACvB,IAAI,iBAAiB,GACnB,YAAY,aAAa;IAE3B;GAEF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,oBAAoB,GAAG;KACzB,UAAU,gBAAgB;KAC1B,YAAY,gBAAgB;IAC9B;IACA;GAEF,SACE;EACJ;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,gCAAA,QAAO,OAAO,SAAS;EACrC,MAAK;EACL,cAAY;EACZ,mBAAiB;YAEhB,QAAQ,KAAK,KAAK,UACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAEE,MAAM,SAAS;IACb,SAAS,QAAQ,SAAS;GAC5B;GACA,MAAK;GACL,MAAK;GACL,gBAAc,IAAI,UAAU;GAC5B,UAAU,IAAI;GACd,UACE,IAAI,WACA,KACA,UAAU,gBACR,IACA;GAER,eAAe;IACb,IAAI,IAAI,UAAU,OAChB,SAAS,IAAI,KAAK;GAEtB;GACA,YAAY,UAAU,cAAc,OAAO,KAAK;GAChD,WAAW,WAAA,GAAG,gCAAA,QAAO,MAAM;aAE3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAW,gCAAA,QAAO;cAAQ,IAAI;GAAY,CAAA;EAC1C,GAxBD,IAAI,KAwBH,CACT;CACE,CAAA;AAET"}
@@ -0,0 +1,25 @@
1
+ //#region src/components/auth-card/auth-card.module.css
2
+ var authLayout = "uzi-auth-card-module__authLayout__GHr1j";
3
+ var authCard = "uzi-auth-card-module__authCard__ZYYit";
4
+ var authBrand = "uzi-auth-card-module__authBrand__ZCDVm";
5
+ var authHeader = "uzi-auth-card-module__authHeader__NB6UQ";
6
+ var authTitle = "uzi-auth-card-module__authTitle__VtHLn";
7
+ var authSubtitle = "uzi-auth-card-module__authSubtitle__ZupId";
8
+ var authBody = "uzi-auth-card-module__authBody__PTyaL";
9
+ var divider = "uzi-auth-card-module__divider__D8r12";
10
+ var authFooter = "uzi-auth-card-module__authFooter__C5s--";
11
+ var auth_card_module_default = {
12
+ authLayout,
13
+ authCard,
14
+ authBrand,
15
+ authHeader,
16
+ authTitle,
17
+ authSubtitle,
18
+ authBody,
19
+ divider,
20
+ authFooter
21
+ };
22
+ //#endregion
23
+ export { authBody, authBrand, authCard, authFooter, authHeader, authLayout, authSubtitle, authTitle, auth_card_module_default as default, divider };
24
+
25
+ //# sourceMappingURL=index59.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index59.js","names":[],"sources":["../src/components/auth-card/auth-card.module.css"],"sourcesContent":[".authLayout {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n min-height: 100dvh;\n padding: 24px;\n background: var(--background);\n}\n\n.authCard {\n width: 100%;\n max-width: 400px;\n border-radius: var(--ts-card-radius, 12px);\n border: 1px solid var(--ts-card-border, var(--border));\n background: var(--ts-card-bg, var(--card));\n color: var(--ts-card-fg, var(--foreground));\n box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.authBrand {\n display: flex;\n justify-content: center;\n margin-bottom: 8px;\n}\n\n.authBrand svg {\n width: 40px;\n height: 40px;\n color: var(--primary);\n}\n\n.authHeader {\n text-align: center;\n}\n\n.authTitle {\n font-size: 1.25rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0;\n color: var(--foreground);\n}\n\n.authSubtitle {\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin-top: 8px;\n margin-bottom: 0;\n line-height: 1.4;\n}\n\n.authBody {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.divider {\n border: none;\n border-top: 1px solid var(--border);\n margin: 0;\n}\n\n.authFooter {\n text-align: center;\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin: 0;\n}\n\n.authFooter a {\n color: var(--primary);\n text-decoration: none;\n font-weight: 500;\n}\n\n.authFooter a:hover {\n text-decoration: underline;\n}\n"],"mappings":""}
@@ -0,0 +1,34 @@
1
+ //#region src/components/auth-card/auth-card.module.css
2
+ var authLayout = "uzi-auth-card-module__authLayout__GHr1j";
3
+ var authCard = "uzi-auth-card-module__authCard__ZYYit";
4
+ var authBrand = "uzi-auth-card-module__authBrand__ZCDVm";
5
+ var authHeader = "uzi-auth-card-module__authHeader__NB6UQ";
6
+ var authTitle = "uzi-auth-card-module__authTitle__VtHLn";
7
+ var authSubtitle = "uzi-auth-card-module__authSubtitle__ZupId";
8
+ var authBody = "uzi-auth-card-module__authBody__PTyaL";
9
+ var divider = "uzi-auth-card-module__divider__D8r12";
10
+ var authFooter = "uzi-auth-card-module__authFooter__C5s--";
11
+ var auth_card_module_default = {
12
+ authLayout,
13
+ authCard,
14
+ authBrand,
15
+ authHeader,
16
+ authTitle,
17
+ authSubtitle,
18
+ authBody,
19
+ divider,
20
+ authFooter
21
+ };
22
+ //#endregion
23
+ exports.authBody = authBody;
24
+ exports.authBrand = authBrand;
25
+ exports.authCard = authCard;
26
+ exports.authFooter = authFooter;
27
+ exports.authHeader = authHeader;
28
+ exports.authLayout = authLayout;
29
+ exports.authSubtitle = authSubtitle;
30
+ exports.authTitle = authTitle;
31
+ exports.default = auth_card_module_default;
32
+ exports.divider = divider;
33
+
34
+ //# sourceMappingURL=index60.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index60.cjs","names":[],"sources":["../src/components/auth-card/auth-card.module.css"],"sourcesContent":[".authLayout {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n min-height: 100dvh;\n padding: 24px;\n background: var(--background);\n}\n\n.authCard {\n width: 100%;\n max-width: 400px;\n border-radius: var(--ts-card-radius, 12px);\n border: 1px solid var(--ts-card-border, var(--border));\n background: var(--ts-card-bg, var(--card));\n color: var(--ts-card-fg, var(--foreground));\n box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.authBrand {\n display: flex;\n justify-content: center;\n margin-bottom: 8px;\n}\n\n.authBrand svg {\n width: 40px;\n height: 40px;\n color: var(--primary);\n}\n\n.authHeader {\n text-align: center;\n}\n\n.authTitle {\n font-size: 1.25rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0;\n color: var(--foreground);\n}\n\n.authSubtitle {\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin-top: 8px;\n margin-bottom: 0;\n line-height: 1.4;\n}\n\n.authBody {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.divider {\n border: none;\n border-top: 1px solid var(--border);\n margin: 0;\n}\n\n.authFooter {\n text-align: center;\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin: 0;\n}\n\n.authFooter a {\n color: var(--primary);\n text-decoration: none;\n font-weight: 500;\n}\n\n.authFooter a:hover {\n text-decoration: underline;\n}\n"],"mappings":""}
@@ -0,0 +1,50 @@
1
+ import { cx } from "./index3.js";
2
+ import auth_card_module_default from "./index59.js";
3
+ import * as React from "react";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ //#region src/components/auth-card/AuthCard.tsx
6
+ /**
7
+ * AuthCard — a centered card layout for auth pages.
8
+ *
9
+ * - Centered vertically and horizontally on screen
10
+ * - Brand → title → subtitle → form → divider → footer
11
+ * - No auth logic — just the visual template
12
+ */
13
+ var AuthCard = React.forwardRef(({ title, subtitle, children, footer, brand, className }, ref) => {
14
+ return /* @__PURE__ */ jsx("div", {
15
+ className: cx(auth_card_module_default.authLayout, className),
16
+ ref,
17
+ children: /* @__PURE__ */ jsxs("div", {
18
+ className: auth_card_module_default.authCard,
19
+ children: [
20
+ brand && /* @__PURE__ */ jsx("div", {
21
+ className: auth_card_module_default.authBrand,
22
+ children: brand
23
+ }),
24
+ /* @__PURE__ */ jsxs("div", {
25
+ className: auth_card_module_default.authHeader,
26
+ children: [/* @__PURE__ */ jsx("h1", {
27
+ className: auth_card_module_default.authTitle,
28
+ children: title
29
+ }), subtitle && /* @__PURE__ */ jsx("p", {
30
+ className: auth_card_module_default.authSubtitle,
31
+ children: subtitle
32
+ })]
33
+ }),
34
+ /* @__PURE__ */ jsx("div", {
35
+ className: auth_card_module_default.authBody,
36
+ children
37
+ }),
38
+ footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", { className: auth_card_module_default.divider }), /* @__PURE__ */ jsx("p", {
39
+ className: auth_card_module_default.authFooter,
40
+ children: footer
41
+ })] })
42
+ ]
43
+ })
44
+ });
45
+ });
46
+ AuthCard.displayName = "AuthCard";
47
+ //#endregion
48
+ export { AuthCard };
49
+
50
+ //# sourceMappingURL=index60.js.map