@karakuri-ui/react 0.2.3 → 0.2.4

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 (238) hide show
  1. package/README.md +0 -1
  2. package/dist/components/ui/accordion.d.mts +49 -0
  3. package/dist/components/ui/accordion.d.ts +49 -0
  4. package/dist/components/ui/accordion.js +220 -0
  5. package/dist/components/ui/accordion.js.map +1 -0
  6. package/dist/components/ui/accordion.mjs +181 -0
  7. package/dist/components/ui/accordion.mjs.map +1 -0
  8. package/dist/components/ui/alert.d.mts +47 -0
  9. package/dist/components/ui/alert.d.ts +47 -0
  10. package/dist/components/ui/alert.js +223 -0
  11. package/dist/components/ui/alert.js.map +1 -0
  12. package/dist/components/ui/alert.mjs +185 -0
  13. package/dist/components/ui/alert.mjs.map +1 -0
  14. package/dist/components/ui/avatar.d.mts +232 -0
  15. package/dist/components/ui/avatar.d.ts +232 -0
  16. package/dist/components/ui/avatar.js +250 -0
  17. package/dist/components/ui/avatar.js.map +1 -0
  18. package/dist/components/ui/avatar.mjs +209 -0
  19. package/dist/components/ui/avatar.mjs.map +1 -0
  20. package/dist/components/ui/badge.d.mts +31 -0
  21. package/dist/components/ui/badge.d.ts +31 -0
  22. package/dist/components/ui/badge.js +205 -0
  23. package/dist/components/ui/badge.js.map +1 -0
  24. package/dist/components/ui/badge.mjs +170 -0
  25. package/dist/components/ui/badge.mjs.map +1 -0
  26. package/dist/components/ui/breadcrumb.d.mts +57 -0
  27. package/dist/components/ui/breadcrumb.d.ts +57 -0
  28. package/dist/components/ui/breadcrumb.js +209 -0
  29. package/dist/components/ui/breadcrumb.js.map +1 -0
  30. package/dist/components/ui/breadcrumb.mjs +168 -0
  31. package/dist/components/ui/breadcrumb.mjs.map +1 -0
  32. package/dist/components/ui/button-group.d.mts +22 -0
  33. package/dist/components/ui/button-group.d.ts +22 -0
  34. package/dist/components/ui/button-group.js +107 -0
  35. package/dist/components/ui/button-group.js.map +1 -0
  36. package/dist/components/ui/button-group.mjs +72 -0
  37. package/dist/components/ui/button-group.mjs.map +1 -0
  38. package/dist/components/ui/button.d.mts +31 -0
  39. package/dist/components/ui/button.d.ts +31 -0
  40. package/dist/components/ui/button.js +176 -0
  41. package/dist/components/ui/button.js.map +1 -0
  42. package/dist/components/ui/button.mjs +141 -0
  43. package/dist/components/ui/button.mjs.map +1 -0
  44. package/dist/components/ui/card.d.mts +77 -0
  45. package/dist/components/ui/card.d.ts +77 -0
  46. package/dist/components/ui/card.js +370 -0
  47. package/dist/components/ui/card.js.map +1 -0
  48. package/dist/components/ui/card.mjs +328 -0
  49. package/dist/components/ui/card.mjs.map +1 -0
  50. package/dist/{chart.js → components/ui/chart.js} +29 -39
  51. package/dist/components/ui/chart.js.map +1 -0
  52. package/dist/{chart.mjs → components/ui/chart.mjs} +21 -31
  53. package/dist/components/ui/chart.mjs.map +1 -0
  54. package/dist/components/ui/checkbox.d.mts +24 -0
  55. package/dist/components/ui/checkbox.d.ts +24 -0
  56. package/dist/components/ui/checkbox.js +173 -0
  57. package/dist/components/ui/checkbox.js.map +1 -0
  58. package/dist/components/ui/checkbox.mjs +138 -0
  59. package/dist/components/ui/checkbox.mjs.map +1 -0
  60. package/dist/components/ui/divider.d.mts +27 -0
  61. package/dist/components/ui/divider.d.ts +27 -0
  62. package/dist/components/ui/divider.js +147 -0
  63. package/dist/components/ui/divider.js.map +1 -0
  64. package/dist/components/ui/divider.mjs +112 -0
  65. package/dist/components/ui/divider.mjs.map +1 -0
  66. package/dist/components/ui/drawer.d.mts +51 -0
  67. package/dist/components/ui/drawer.d.ts +51 -0
  68. package/dist/components/ui/drawer.js +225 -0
  69. package/dist/components/ui/drawer.js.map +1 -0
  70. package/dist/components/ui/drawer.mjs +178 -0
  71. package/dist/components/ui/drawer.mjs.map +1 -0
  72. package/dist/components/ui/dropdown.d.mts +59 -0
  73. package/dist/components/ui/dropdown.d.ts +59 -0
  74. package/dist/components/ui/dropdown.js +310 -0
  75. package/dist/components/ui/dropdown.js.map +1 -0
  76. package/dist/components/ui/dropdown.mjs +263 -0
  77. package/dist/components/ui/dropdown.mjs.map +1 -0
  78. package/dist/components/ui/field.d.mts +33 -0
  79. package/dist/components/ui/field.d.ts +33 -0
  80. package/dist/components/ui/field.js +146 -0
  81. package/dist/components/ui/field.js.map +1 -0
  82. package/dist/components/ui/field.mjs +108 -0
  83. package/dist/components/ui/field.mjs.map +1 -0
  84. package/dist/components/ui/icon-button.d.mts +20 -0
  85. package/dist/components/ui/icon-button.d.ts +20 -0
  86. package/dist/components/ui/icon-button.js +147 -0
  87. package/dist/components/ui/icon-button.js.map +1 -0
  88. package/dist/components/ui/icon-button.mjs +112 -0
  89. package/dist/components/ui/icon-button.mjs.map +1 -0
  90. package/dist/components/ui/index.d.mts +55 -0
  91. package/dist/components/ui/index.d.ts +55 -0
  92. package/dist/components/ui/index.js +476 -0
  93. package/dist/components/ui/index.js.map +1 -0
  94. package/dist/components/ui/index.mjs +246 -0
  95. package/dist/components/ui/index.mjs.map +1 -0
  96. package/dist/components/ui/input.d.mts +20 -0
  97. package/dist/components/ui/input.d.ts +20 -0
  98. package/dist/components/ui/input.js +250 -0
  99. package/dist/components/ui/input.js.map +1 -0
  100. package/dist/components/ui/input.mjs +215 -0
  101. package/dist/components/ui/input.mjs.map +1 -0
  102. package/dist/components/ui/metric-card.d.mts +53 -0
  103. package/dist/components/ui/metric-card.d.ts +53 -0
  104. package/dist/components/ui/metric-card.js +258 -0
  105. package/dist/components/ui/metric-card.js.map +1 -0
  106. package/dist/components/ui/metric-card.mjs +217 -0
  107. package/dist/components/ui/metric-card.mjs.map +1 -0
  108. package/dist/components/ui/modal.d.mts +77 -0
  109. package/dist/components/ui/modal.d.ts +77 -0
  110. package/dist/components/ui/modal.js +396 -0
  111. package/dist/components/ui/modal.js.map +1 -0
  112. package/dist/components/ui/modal.mjs +338 -0
  113. package/dist/components/ui/modal.mjs.map +1 -0
  114. package/dist/components/ui/navigation-menu.d.mts +139 -0
  115. package/dist/components/ui/navigation-menu.d.ts +139 -0
  116. package/dist/components/ui/navigation-menu.js +531 -0
  117. package/dist/components/ui/navigation-menu.js.map +1 -0
  118. package/dist/components/ui/navigation-menu.mjs +488 -0
  119. package/dist/components/ui/navigation-menu.mjs.map +1 -0
  120. package/dist/components/ui/pagination.d.mts +130 -0
  121. package/dist/components/ui/pagination.d.ts +130 -0
  122. package/dist/components/ui/pagination.js +495 -0
  123. package/dist/components/ui/pagination.js.map +1 -0
  124. package/dist/components/ui/pagination.mjs +449 -0
  125. package/dist/components/ui/pagination.mjs.map +1 -0
  126. package/dist/components/ui/popover.d.mts +41 -0
  127. package/dist/components/ui/popover.d.ts +41 -0
  128. package/dist/components/ui/popover.js +175 -0
  129. package/dist/components/ui/popover.js.map +1 -0
  130. package/dist/components/ui/popover.mjs +133 -0
  131. package/dist/components/ui/popover.mjs.map +1 -0
  132. package/dist/components/ui/progress.d.mts +35 -0
  133. package/dist/components/ui/progress.d.ts +35 -0
  134. package/dist/components/ui/progress.js +194 -0
  135. package/dist/components/ui/progress.js.map +1 -0
  136. package/dist/components/ui/progress.mjs +159 -0
  137. package/dist/components/ui/progress.mjs.map +1 -0
  138. package/dist/components/ui/radio-group.d.mts +40 -0
  139. package/dist/components/ui/radio-group.d.ts +40 -0
  140. package/dist/components/ui/radio-group.js +177 -0
  141. package/dist/components/ui/radio-group.js.map +1 -0
  142. package/dist/components/ui/radio-group.mjs +140 -0
  143. package/dist/components/ui/radio-group.mjs.map +1 -0
  144. package/dist/components/ui/segmented.d.mts +30 -0
  145. package/dist/components/ui/segmented.d.ts +30 -0
  146. package/dist/components/ui/segmented.js +241 -0
  147. package/dist/components/ui/segmented.js.map +1 -0
  148. package/dist/components/ui/segmented.mjs +204 -0
  149. package/dist/components/ui/segmented.mjs.map +1 -0
  150. package/dist/components/ui/select.d.mts +31 -0
  151. package/dist/components/ui/select.d.ts +31 -0
  152. package/dist/components/ui/select.js +317 -0
  153. package/dist/components/ui/select.js.map +1 -0
  154. package/dist/components/ui/select.mjs +276 -0
  155. package/dist/components/ui/select.mjs.map +1 -0
  156. package/dist/components/ui/skeleton.d.mts +26 -0
  157. package/dist/components/ui/skeleton.d.ts +26 -0
  158. package/dist/components/ui/skeleton.js +144 -0
  159. package/dist/components/ui/skeleton.js.map +1 -0
  160. package/dist/components/ui/skeleton.mjs +109 -0
  161. package/dist/components/ui/skeleton.mjs.map +1 -0
  162. package/dist/components/ui/slider.d.mts +38 -0
  163. package/dist/components/ui/slider.d.ts +38 -0
  164. package/dist/components/ui/slider.js +180 -0
  165. package/dist/components/ui/slider.js.map +1 -0
  166. package/dist/components/ui/slider.mjs +145 -0
  167. package/dist/components/ui/slider.mjs.map +1 -0
  168. package/dist/components/ui/spinner.d.mts +23 -0
  169. package/dist/components/ui/spinner.d.ts +23 -0
  170. package/dist/components/ui/spinner.js +471 -0
  171. package/dist/components/ui/spinner.js.map +1 -0
  172. package/dist/components/ui/spinner.mjs +436 -0
  173. package/dist/components/ui/spinner.mjs.map +1 -0
  174. package/dist/components/ui/switch.d.mts +22 -0
  175. package/dist/components/ui/switch.d.ts +22 -0
  176. package/dist/components/ui/switch.js +173 -0
  177. package/dist/components/ui/switch.js.map +1 -0
  178. package/dist/components/ui/switch.mjs +138 -0
  179. package/dist/components/ui/switch.mjs.map +1 -0
  180. package/dist/components/ui/table.d.mts +74 -0
  181. package/dist/components/ui/table.d.ts +74 -0
  182. package/dist/components/ui/table.js +240 -0
  183. package/dist/components/ui/table.js.map +1 -0
  184. package/dist/components/ui/table.mjs +199 -0
  185. package/dist/components/ui/table.mjs.map +1 -0
  186. package/dist/components/ui/tabs.d.mts +40 -0
  187. package/dist/components/ui/tabs.d.ts +40 -0
  188. package/dist/components/ui/tabs.js +238 -0
  189. package/dist/components/ui/tabs.js.map +1 -0
  190. package/dist/components/ui/tabs.mjs +199 -0
  191. package/dist/components/ui/tabs.mjs.map +1 -0
  192. package/dist/components/ui/textarea.d.mts +19 -0
  193. package/dist/components/ui/textarea.d.ts +19 -0
  194. package/dist/components/ui/textarea.js +181 -0
  195. package/dist/components/ui/textarea.js.map +1 -0
  196. package/dist/components/ui/textarea.mjs +146 -0
  197. package/dist/components/ui/textarea.mjs.map +1 -0
  198. package/dist/components/ui/toast.d.mts +93 -0
  199. package/dist/components/ui/toast.d.ts +93 -0
  200. package/dist/components/ui/toast.js +429 -0
  201. package/dist/components/ui/toast.js.map +1 -0
  202. package/dist/components/ui/toast.mjs +393 -0
  203. package/dist/components/ui/toast.mjs.map +1 -0
  204. package/dist/components/ui/toggle-group.d.mts +47 -0
  205. package/dist/components/ui/toggle-group.d.ts +47 -0
  206. package/dist/components/ui/toggle-group.js +186 -0
  207. package/dist/components/ui/toggle-group.js.map +1 -0
  208. package/dist/components/ui/toggle-group.mjs +149 -0
  209. package/dist/components/ui/toggle-group.mjs.map +1 -0
  210. package/dist/components/ui/toggle.d.mts +19 -0
  211. package/dist/components/ui/toggle.d.ts +19 -0
  212. package/dist/components/ui/toggle.js +194 -0
  213. package/dist/components/ui/toggle.js.map +1 -0
  214. package/dist/components/ui/toggle.mjs +159 -0
  215. package/dist/components/ui/toggle.mjs.map +1 -0
  216. package/dist/components/ui/tooltip.d.mts +37 -0
  217. package/dist/components/ui/tooltip.d.ts +37 -0
  218. package/dist/components/ui/tooltip.js +137 -0
  219. package/dist/components/ui/tooltip.js.map +1 -0
  220. package/dist/components/ui/tooltip.mjs +96 -0
  221. package/dist/components/ui/tooltip.mjs.map +1 -0
  222. package/dist/lib/utils.d.mts +10 -0
  223. package/dist/lib/utils.d.ts +10 -0
  224. package/dist/lib/utils.js +33 -0
  225. package/dist/lib/utils.js.map +1 -0
  226. package/dist/lib/utils.mjs +9 -0
  227. package/dist/lib/utils.mjs.map +1 -0
  228. package/package.json +11 -11
  229. package/dist/chart.js.map +0 -1
  230. package/dist/chart.mjs.map +0 -1
  231. package/dist/index.d.mts +0 -1636
  232. package/dist/index.d.ts +0 -1636
  233. package/dist/index.js +0 -7291
  234. package/dist/index.js.map +0 -1
  235. package/dist/index.mjs +0 -7048
  236. package/dist/index.mjs.map +0 -1
  237. /package/dist/{chart.d.mts → components/ui/chart.d.mts} +0 -0
  238. /package/dist/{chart.d.ts → components/ui/chart.d.ts} +0 -0
@@ -0,0 +1,30 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
2
+ import * as React from 'react';
3
+ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
4
+ import { VariantProps } from 'class-variance-authority';
5
+
6
+ declare const segmentedVariants: (props?: ({
7
+ variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
8
+ size?: "default" | "sm" | "lg" | "md" | null | undefined;
9
+ radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
10
+ fontWeight?: "normal" | "semibold" | null | undefined;
11
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
12
+ declare const segmentedItemVariants: (props?: ({
13
+ variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
14
+ size?: "default" | "sm" | "lg" | "md" | null | undefined;
15
+ radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
16
+ contentType?: "text" | "icon" | "icon-text" | null | undefined;
17
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
18
+ interface SegmentedProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedVariants> {
19
+ }
20
+ interface SegmentedItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {
21
+ }
22
+ declare const SegmentedItem: React.ForwardRefExoticComponent<SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
23
+ declare const Segmented: React.ForwardRefExoticComponent<SegmentedProps & React.RefAttributes<HTMLDivElement>> & {
24
+ Item: React.ForwardRefExoticComponent<SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
25
+ };
26
+ declare namespace Segmented {
27
+ type ItemProps = SegmentedItemProps;
28
+ }
29
+
30
+ export { Segmented, SegmentedItem, type SegmentedItemProps, type SegmentedProps, segmentedItemVariants, segmentedVariants };
@@ -0,0 +1,241 @@
1
+ "use strict";
2
+ "use client";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+ var segmented_exports = {};
31
+ __export(segmented_exports, {
32
+ Segmented: () => Segmented,
33
+ SegmentedItem: () => SegmentedItem,
34
+ segmentedItemVariants: () => segmentedItemVariants,
35
+ segmentedVariants: () => segmentedVariants
36
+ });
37
+ module.exports = __toCommonJS(segmented_exports);
38
+ var React = __toESM(require("react"));
39
+ var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
40
+ var import_class_variance_authority = require("class-variance-authority");
41
+ var import_utils = require("../../lib/utils");
42
+ const SegmentedContext = React.createContext({});
43
+ const useSegmentedContext = () => React.useContext(SegmentedContext);
44
+ const segmentedVariants = (0, import_class_variance_authority.cva)(
45
+ "inline-flex items-center text-text-subtle",
46
+ {
47
+ variants: {
48
+ variant: {
49
+ default: "bg-background-muted gap-1",
50
+ outline: "bg-background border border-border-form gap-1",
51
+ underline: "bg-transparent border-b border-border-form gap-0",
52
+ ghost: "bg-transparent gap-1"
53
+ },
54
+ size: {
55
+ sm: "h-8",
56
+ // 32px height
57
+ md: "h-9",
58
+ // 36px height
59
+ default: "h-10",
60
+ // 40px height
61
+ lg: "h-12"
62
+ // 48px height
63
+ },
64
+ radius: {
65
+ none: "rounded-none",
66
+ sm: "rounded-sm",
67
+ base: "rounded",
68
+ default: "rounded-md",
69
+ lg: "rounded-lg",
70
+ xl: "rounded-xl",
71
+ "2xl": "rounded-2xl",
72
+ "3xl": "rounded-3xl",
73
+ full: "rounded-full"
74
+ },
75
+ fontWeight: {
76
+ normal: "[&>*]:font-normal",
77
+ semibold: "[&>*]:font-semibold"
78
+ }
79
+ },
80
+ compoundVariants: [
81
+ // Padding for default/outline/ghost variants
82
+ { variant: "default", className: "p-1" },
83
+ { variant: "outline", className: "p-1" },
84
+ { variant: "ghost", className: "p-1" },
85
+ // Underline has no padding
86
+ { variant: "underline", className: "p-0" }
87
+ ],
88
+ defaultVariants: {
89
+ variant: "default",
90
+ size: "default",
91
+ radius: "default",
92
+ fontWeight: "normal"
93
+ }
94
+ }
95
+ );
96
+ const segmentedItemVariants = (0, import_class_variance_authority.cva)(
97
+ [
98
+ "inline-flex items-center justify-center whitespace-nowrap h-full",
99
+ "transition-all duration-micro ease-out",
100
+ "focus-visible:focus-ring",
101
+ "disabled:pointer-events-none disabled:opacity-50"
102
+ ].join(" "),
103
+ {
104
+ variants: {
105
+ variant: {
106
+ // Default: light background when selected, text emphasis on hover
107
+ default: [
108
+ "hover:text-foreground",
109
+ "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
110
+ "data-[state=checked]:shadow-sm"
111
+ ].join(" "),
112
+ // Outline: gray background when selected
113
+ outline: [
114
+ "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground",
115
+ "hover:text-foreground hover:bg-background-muted"
116
+ ].join(" "),
117
+ // Underline: bottom border indicator (Stripe/GitHub style)
118
+ underline: [
119
+ "border-b-2 border-transparent -mb-px",
120
+ "hover:text-foreground hover:border-border-form",
121
+ "data-[state=checked]:text-foreground data-[state=checked]:border-foreground"
122
+ ].join(" "),
123
+ // Ghost: pill background only on selected (Notion/Figma style)
124
+ ghost: [
125
+ "hover:text-foreground hover:bg-background-muted",
126
+ "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground"
127
+ ].join(" ")
128
+ },
129
+ size: {
130
+ sm: "text-xs",
131
+ // 12px
132
+ md: "text-sm",
133
+ // 13px
134
+ default: "text-sm",
135
+ // 13px
136
+ lg: "text-md"
137
+ // 14px
138
+ },
139
+ radius: {
140
+ none: "rounded-none",
141
+ sm: "rounded-sm",
142
+ base: "rounded",
143
+ default: "rounded-md",
144
+ lg: "rounded-md",
145
+ xl: "rounded-lg",
146
+ "2xl": "rounded-xl",
147
+ "3xl": "rounded-2xl",
148
+ full: "rounded-full"
149
+ },
150
+ // Content type determines padding and aspect ratio
151
+ contentType: {
152
+ // Icon only: square aspect ratio like IconButton
153
+ icon: "aspect-square",
154
+ // Icon + text: rectangular (gap is set via compoundVariants)
155
+ "icon-text": "",
156
+ // Text only: standard button padding
157
+ text: ""
158
+ }
159
+ },
160
+ compoundVariants: [
161
+ // Icon + text - same padding rules as Button/Toggle
162
+ { contentType: "icon-text", size: "sm", className: "px-3 gap-2" },
163
+ // 12px padding, 8px gap
164
+ { contentType: "icon-text", size: "md", className: "px-3.5 gap-2" },
165
+ // 14px padding, 8px gap
166
+ { contentType: "icon-text", size: "default", className: "px-4 gap-2" },
167
+ // 16px padding, 8px gap
168
+ { contentType: "icon-text", size: "lg", className: "px-6 gap-2" },
169
+ // 24px padding, 8px gap
170
+ // Text only - same padding rules as Button/Toggle
171
+ { contentType: "text", size: "sm", className: "px-3.5" },
172
+ // 14px
173
+ { contentType: "text", size: "md", className: "px-3.5" },
174
+ // 14px
175
+ { contentType: "text", size: "default", className: "px-4" },
176
+ // 16px
177
+ { contentType: "text", size: "lg", className: "px-6" },
178
+ // 24px
179
+ // Underline variant has no rounded corners
180
+ { variant: "underline", className: "rounded-none" }
181
+ ],
182
+ defaultVariants: {
183
+ variant: "default",
184
+ size: "default",
185
+ radius: "default",
186
+ contentType: "text"
187
+ }
188
+ }
189
+ );
190
+ const SegmentedRoot = React.forwardRef(({ className, variant, size, radius, fontWeight, ...props }, ref) => {
191
+ const resolvedFontWeight = fontWeight ?? "normal";
192
+ return /* @__PURE__ */ React.createElement(SegmentedContext.Provider, { value: { variant: variant || "default", size: size || "default", radius: radius || "default" } }, /* @__PURE__ */ React.createElement(
193
+ RadioGroupPrimitive.Root,
194
+ {
195
+ className: (0, import_utils.cn)(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className),
196
+ ...props,
197
+ ref
198
+ }
199
+ ));
200
+ });
201
+ SegmentedRoot.displayName = "Segmented";
202
+ const iconSizeClasses = {
203
+ sm: "[&>svg]:icon-xs",
204
+ // 14px
205
+ md: "[&>svg]:icon-sm",
206
+ // 16px
207
+ default: "[&>svg]:icon-sm",
208
+ // 16px
209
+ lg: "[&>svg]:icon-sm"
210
+ // 16px
211
+ };
212
+ const SegmentedItem = React.forwardRef(({ className, children, size, radius, contentType, ...props }, ref) => {
213
+ const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext();
214
+ const resolvedSize = size || contextSize || "default";
215
+ const resolvedRadius = radius || contextRadius || "default";
216
+ return /* @__PURE__ */ React.createElement(
217
+ RadioGroupPrimitive.Item,
218
+ {
219
+ ref,
220
+ className: (0, import_utils.cn)(
221
+ segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),
222
+ iconSizeClasses[resolvedSize],
223
+ className
224
+ ),
225
+ ...props
226
+ },
227
+ children
228
+ );
229
+ });
230
+ SegmentedItem.displayName = "SegmentedItem";
231
+ const Segmented = Object.assign(SegmentedRoot, {
232
+ Item: SegmentedItem
233
+ });
234
+ // Annotate the CommonJS export names for ESM import in node:
235
+ 0 && (module.exports = {
236
+ Segmented,
237
+ SegmentedItem,
238
+ segmentedItemVariants,
239
+ segmentedVariants
240
+ });
241
+ //# sourceMappingURL=segmented.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n variant?: 'default' | 'outline' | 'underline' | 'ghost'\n size?: 'sm' | 'md' | 'default' | 'lg'\n radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n default: 'bg-background-muted gap-1',\n outline: 'bg-background border border-border-form gap-1',\n underline: 'bg-transparent border-b border-border-form gap-0',\n ghost: 'bg-transparent gap-1',\n },\n size: {\n sm: 'h-8', // 32px height\n md: 'h-9', // 36px height\n default: 'h-10', // 40px height\n lg: 'h-12', // 48px height\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n fontWeight: {\n normal: '[&>*]:font-normal',\n semibold: '[&>*]:font-semibold',\n },\n },\n compoundVariants: [\n // Padding for default/outline/ghost variants\n { variant: 'default', className: 'p-1' },\n { variant: 'outline', className: 'p-1' },\n { variant: 'ghost', className: 'p-1' },\n // Underline has no padding\n { variant: 'underline', className: 'p-0' },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n },\n }\n)\n\nconst segmentedItemVariants = cva(\n [\n 'inline-flex items-center justify-center whitespace-nowrap h-full',\n 'transition-all duration-micro ease-out',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n // Default: light background when selected, text emphasis on hover\n default: [\n 'hover:text-foreground',\n 'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n 'data-[state=checked]:shadow-sm',\n ].join(' '),\n // Outline: gray background when selected\n outline: [\n 'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n 'hover:text-foreground hover:bg-background-muted',\n ].join(' '),\n // Underline: bottom border indicator (Stripe/GitHub style)\n underline: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border-form',\n 'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n ].join(' '),\n // Ghost: pill background only on selected (Notion/Figma style)\n ghost: [\n 'hover:text-foreground hover:bg-background-muted',\n 'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n ].join(' '),\n },\n size: {\n sm: 'text-xs', // 12px\n md: 'text-sm', // 13px\n default: 'text-sm', // 13px\n lg: 'text-md', // 14px\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n },\n // Content type determines padding and aspect ratio\n contentType: {\n // Icon only: square aspect ratio like IconButton\n icon: 'aspect-square',\n // Icon + text: rectangular (gap is set via compoundVariants)\n 'icon-text': '',\n // Text only: standard button padding\n text: '',\n },\n },\n compoundVariants: [\n // Icon + text - same padding rules as Button/Toggle\n { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' }, // 12px padding, 8px gap\n { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' }, // 14px padding, 8px gap\n { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' }, // 24px padding, 8px gap\n // Text only - same padding rules as Button/Toggle\n { contentType: 'text', size: 'sm', className: 'px-3.5' }, // 14px\n { contentType: 'text', size: 'md', className: 'px-3.5' }, // 14px\n { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n { contentType: 'text', size: 'lg', className: 'px-6' }, // 24px\n // Underline variant has no rounded corners\n { variant: 'underline', className: 'rounded-none' },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n contentType: 'text',\n },\n }\n)\n\nexport interface SegmentedProps\n extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n VariantProps<typeof segmentedVariants> {}\n\nconst SegmentedRoot = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n // All variants default to normal font weight\n const resolvedFontWeight = fontWeight ?? 'normal'\n\n return (\n <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n <RadioGroupPrimitive.Root\n className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n {...props}\n ref={ref}\n />\n </SegmentedContext.Provider>\n )\n})\nSegmentedRoot.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n}\n\nexport interface SegmentedItemProps\n extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n const resolvedSize = size || contextSize || 'default'\n const resolvedRadius = radius || contextRadius || 'default'\n\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n iconSizeClasses[resolvedSize],\n className\n )}\n {...props}\n >\n {children}\n </RadioGroupPrimitive.Item>\n )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\n// ─── Namespace ──────────────────────────────────────────\nconst Segmented = Object.assign(SegmentedRoot, {\n Item: SegmentedItem,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Segmented {\n export type ItemProps = SegmentedItemProps\n}\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}
@@ -0,0 +1,204 @@
1
+ "use client";
2
+ import * as React from "react";
3
+ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
4
+ import { cva } from "class-variance-authority";
5
+ import { cn } from "../../lib/utils";
6
+ const SegmentedContext = React.createContext({});
7
+ const useSegmentedContext = () => React.useContext(SegmentedContext);
8
+ const segmentedVariants = cva(
9
+ "inline-flex items-center text-text-subtle",
10
+ {
11
+ variants: {
12
+ variant: {
13
+ default: "bg-background-muted gap-1",
14
+ outline: "bg-background border border-border-form gap-1",
15
+ underline: "bg-transparent border-b border-border-form gap-0",
16
+ ghost: "bg-transparent gap-1"
17
+ },
18
+ size: {
19
+ sm: "h-8",
20
+ // 32px height
21
+ md: "h-9",
22
+ // 36px height
23
+ default: "h-10",
24
+ // 40px height
25
+ lg: "h-12"
26
+ // 48px height
27
+ },
28
+ radius: {
29
+ none: "rounded-none",
30
+ sm: "rounded-sm",
31
+ base: "rounded",
32
+ default: "rounded-md",
33
+ lg: "rounded-lg",
34
+ xl: "rounded-xl",
35
+ "2xl": "rounded-2xl",
36
+ "3xl": "rounded-3xl",
37
+ full: "rounded-full"
38
+ },
39
+ fontWeight: {
40
+ normal: "[&>*]:font-normal",
41
+ semibold: "[&>*]:font-semibold"
42
+ }
43
+ },
44
+ compoundVariants: [
45
+ // Padding for default/outline/ghost variants
46
+ { variant: "default", className: "p-1" },
47
+ { variant: "outline", className: "p-1" },
48
+ { variant: "ghost", className: "p-1" },
49
+ // Underline has no padding
50
+ { variant: "underline", className: "p-0" }
51
+ ],
52
+ defaultVariants: {
53
+ variant: "default",
54
+ size: "default",
55
+ radius: "default",
56
+ fontWeight: "normal"
57
+ }
58
+ }
59
+ );
60
+ const segmentedItemVariants = cva(
61
+ [
62
+ "inline-flex items-center justify-center whitespace-nowrap h-full",
63
+ "transition-all duration-micro ease-out",
64
+ "focus-visible:focus-ring",
65
+ "disabled:pointer-events-none disabled:opacity-50"
66
+ ].join(" "),
67
+ {
68
+ variants: {
69
+ variant: {
70
+ // Default: light background when selected, text emphasis on hover
71
+ default: [
72
+ "hover:text-foreground",
73
+ "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
74
+ "data-[state=checked]:shadow-sm"
75
+ ].join(" "),
76
+ // Outline: gray background when selected
77
+ outline: [
78
+ "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground",
79
+ "hover:text-foreground hover:bg-background-muted"
80
+ ].join(" "),
81
+ // Underline: bottom border indicator (Stripe/GitHub style)
82
+ underline: [
83
+ "border-b-2 border-transparent -mb-px",
84
+ "hover:text-foreground hover:border-border-form",
85
+ "data-[state=checked]:text-foreground data-[state=checked]:border-foreground"
86
+ ].join(" "),
87
+ // Ghost: pill background only on selected (Notion/Figma style)
88
+ ghost: [
89
+ "hover:text-foreground hover:bg-background-muted",
90
+ "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground"
91
+ ].join(" ")
92
+ },
93
+ size: {
94
+ sm: "text-xs",
95
+ // 12px
96
+ md: "text-sm",
97
+ // 13px
98
+ default: "text-sm",
99
+ // 13px
100
+ lg: "text-md"
101
+ // 14px
102
+ },
103
+ radius: {
104
+ none: "rounded-none",
105
+ sm: "rounded-sm",
106
+ base: "rounded",
107
+ default: "rounded-md",
108
+ lg: "rounded-md",
109
+ xl: "rounded-lg",
110
+ "2xl": "rounded-xl",
111
+ "3xl": "rounded-2xl",
112
+ full: "rounded-full"
113
+ },
114
+ // Content type determines padding and aspect ratio
115
+ contentType: {
116
+ // Icon only: square aspect ratio like IconButton
117
+ icon: "aspect-square",
118
+ // Icon + text: rectangular (gap is set via compoundVariants)
119
+ "icon-text": "",
120
+ // Text only: standard button padding
121
+ text: ""
122
+ }
123
+ },
124
+ compoundVariants: [
125
+ // Icon + text - same padding rules as Button/Toggle
126
+ { contentType: "icon-text", size: "sm", className: "px-3 gap-2" },
127
+ // 12px padding, 8px gap
128
+ { contentType: "icon-text", size: "md", className: "px-3.5 gap-2" },
129
+ // 14px padding, 8px gap
130
+ { contentType: "icon-text", size: "default", className: "px-4 gap-2" },
131
+ // 16px padding, 8px gap
132
+ { contentType: "icon-text", size: "lg", className: "px-6 gap-2" },
133
+ // 24px padding, 8px gap
134
+ // Text only - same padding rules as Button/Toggle
135
+ { contentType: "text", size: "sm", className: "px-3.5" },
136
+ // 14px
137
+ { contentType: "text", size: "md", className: "px-3.5" },
138
+ // 14px
139
+ { contentType: "text", size: "default", className: "px-4" },
140
+ // 16px
141
+ { contentType: "text", size: "lg", className: "px-6" },
142
+ // 24px
143
+ // Underline variant has no rounded corners
144
+ { variant: "underline", className: "rounded-none" }
145
+ ],
146
+ defaultVariants: {
147
+ variant: "default",
148
+ size: "default",
149
+ radius: "default",
150
+ contentType: "text"
151
+ }
152
+ }
153
+ );
154
+ const SegmentedRoot = React.forwardRef(({ className, variant, size, radius, fontWeight, ...props }, ref) => {
155
+ const resolvedFontWeight = fontWeight ?? "normal";
156
+ return /* @__PURE__ */ React.createElement(SegmentedContext.Provider, { value: { variant: variant || "default", size: size || "default", radius: radius || "default" } }, /* @__PURE__ */ React.createElement(
157
+ RadioGroupPrimitive.Root,
158
+ {
159
+ className: cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className),
160
+ ...props,
161
+ ref
162
+ }
163
+ ));
164
+ });
165
+ SegmentedRoot.displayName = "Segmented";
166
+ const iconSizeClasses = {
167
+ sm: "[&>svg]:icon-xs",
168
+ // 14px
169
+ md: "[&>svg]:icon-sm",
170
+ // 16px
171
+ default: "[&>svg]:icon-sm",
172
+ // 16px
173
+ lg: "[&>svg]:icon-sm"
174
+ // 16px
175
+ };
176
+ const SegmentedItem = React.forwardRef(({ className, children, size, radius, contentType, ...props }, ref) => {
177
+ const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext();
178
+ const resolvedSize = size || contextSize || "default";
179
+ const resolvedRadius = radius || contextRadius || "default";
180
+ return /* @__PURE__ */ React.createElement(
181
+ RadioGroupPrimitive.Item,
182
+ {
183
+ ref,
184
+ className: cn(
185
+ segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),
186
+ iconSizeClasses[resolvedSize],
187
+ className
188
+ ),
189
+ ...props
190
+ },
191
+ children
192
+ );
193
+ });
194
+ SegmentedItem.displayName = "SegmentedItem";
195
+ const Segmented = Object.assign(SegmentedRoot, {
196
+ Item: SegmentedItem
197
+ });
198
+ export {
199
+ Segmented,
200
+ SegmentedItem,
201
+ segmentedItemVariants,
202
+ segmentedVariants
203
+ };
204
+ //# sourceMappingURL=segmented.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n variant?: 'default' | 'outline' | 'underline' | 'ghost'\n size?: 'sm' | 'md' | 'default' | 'lg'\n radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n default: 'bg-background-muted gap-1',\n outline: 'bg-background border border-border-form gap-1',\n underline: 'bg-transparent border-b border-border-form gap-0',\n ghost: 'bg-transparent gap-1',\n },\n size: {\n sm: 'h-8', // 32px height\n md: 'h-9', // 36px height\n default: 'h-10', // 40px height\n lg: 'h-12', // 48px height\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n fontWeight: {\n normal: '[&>*]:font-normal',\n semibold: '[&>*]:font-semibold',\n },\n },\n compoundVariants: [\n // Padding for default/outline/ghost variants\n { variant: 'default', className: 'p-1' },\n { variant: 'outline', className: 'p-1' },\n { variant: 'ghost', className: 'p-1' },\n // Underline has no padding\n { variant: 'underline', className: 'p-0' },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n },\n }\n)\n\nconst segmentedItemVariants = cva(\n [\n 'inline-flex items-center justify-center whitespace-nowrap h-full',\n 'transition-all duration-micro ease-out',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n // Default: light background when selected, text emphasis on hover\n default: [\n 'hover:text-foreground',\n 'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n 'data-[state=checked]:shadow-sm',\n ].join(' '),\n // Outline: gray background when selected\n outline: [\n 'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n 'hover:text-foreground hover:bg-background-muted',\n ].join(' '),\n // Underline: bottom border indicator (Stripe/GitHub style)\n underline: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border-form',\n 'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n ].join(' '),\n // Ghost: pill background only on selected (Notion/Figma style)\n ghost: [\n 'hover:text-foreground hover:bg-background-muted',\n 'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n ].join(' '),\n },\n size: {\n sm: 'text-xs', // 12px\n md: 'text-sm', // 13px\n default: 'text-sm', // 13px\n lg: 'text-md', // 14px\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n },\n // Content type determines padding and aspect ratio\n contentType: {\n // Icon only: square aspect ratio like IconButton\n icon: 'aspect-square',\n // Icon + text: rectangular (gap is set via compoundVariants)\n 'icon-text': '',\n // Text only: standard button padding\n text: '',\n },\n },\n compoundVariants: [\n // Icon + text - same padding rules as Button/Toggle\n { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' }, // 12px padding, 8px gap\n { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' }, // 14px padding, 8px gap\n { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' }, // 24px padding, 8px gap\n // Text only - same padding rules as Button/Toggle\n { contentType: 'text', size: 'sm', className: 'px-3.5' }, // 14px\n { contentType: 'text', size: 'md', className: 'px-3.5' }, // 14px\n { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n { contentType: 'text', size: 'lg', className: 'px-6' }, // 24px\n // Underline variant has no rounded corners\n { variant: 'underline', className: 'rounded-none' },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n contentType: 'text',\n },\n }\n)\n\nexport interface SegmentedProps\n extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n VariantProps<typeof segmentedVariants> {}\n\nconst SegmentedRoot = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n // All variants default to normal font weight\n const resolvedFontWeight = fontWeight ?? 'normal'\n\n return (\n <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n <RadioGroupPrimitive.Root\n className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n {...props}\n ref={ref}\n />\n </SegmentedContext.Provider>\n )\n})\nSegmentedRoot.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n}\n\nexport interface SegmentedItemProps\n extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n const resolvedSize = size || contextSize || 'default'\n const resolvedRadius = radius || contextRadius || 'default'\n\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n iconSizeClasses[resolvedSize],\n className\n )}\n {...props}\n >\n {children}\n </RadioGroupPrimitive.Item>\n )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\n// ─── Namespace ──────────────────────────────────────────\nconst Segmented = Object.assign(SegmentedRoot, {\n Item: SegmentedItem,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Segmented {\n export type ItemProps = SegmentedItemProps\n}\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import * as SelectPrimitive from '@radix-ui/react-select';
3
+
4
+ type SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
5
+ type SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
6
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
7
+ declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
8
+ declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
9
+ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
10
+ flush?: boolean;
11
+ } & React.RefAttributes<HTMLDivElement>>;
12
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
13
+ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
14
+ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+
16
+ declare const Select: (({ size, radius, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
17
+ size?: SelectSize;
18
+ radius?: SelectRadius;
19
+ }) => React.JSX.Element) & {
20
+ Trigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
21
+ Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
22
+ Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
23
+ flush?: boolean;
24
+ } & React.RefAttributes<HTMLDivElement>>;
25
+ Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
26
+ Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
27
+ Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
28
+ Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
29
+ };
30
+
31
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import * as SelectPrimitive from '@radix-ui/react-select';
3
+
4
+ type SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
5
+ type SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
6
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
7
+ declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
8
+ declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
9
+ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
10
+ flush?: boolean;
11
+ } & React.RefAttributes<HTMLDivElement>>;
12
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
13
+ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
14
+ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+
16
+ declare const Select: (({ size, radius, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
17
+ size?: SelectSize;
18
+ radius?: SelectRadius;
19
+ }) => React.JSX.Element) & {
20
+ Trigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
21
+ Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
22
+ Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
23
+ flush?: boolean;
24
+ } & React.RefAttributes<HTMLDivElement>>;
25
+ Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
26
+ Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
27
+ Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
28
+ Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
29
+ };
30
+
31
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };