@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.
- package/README.md +0 -1
- package/dist/components/ui/accordion.d.mts +49 -0
- package/dist/components/ui/accordion.d.ts +49 -0
- package/dist/components/ui/accordion.js +220 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/accordion.mjs +181 -0
- package/dist/components/ui/accordion.mjs.map +1 -0
- package/dist/components/ui/alert.d.mts +47 -0
- package/dist/components/ui/alert.d.ts +47 -0
- package/dist/components/ui/alert.js +223 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/alert.mjs +185 -0
- package/dist/components/ui/alert.mjs.map +1 -0
- package/dist/components/ui/avatar.d.mts +232 -0
- package/dist/components/ui/avatar.d.ts +232 -0
- package/dist/components/ui/avatar.js +250 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/avatar.mjs +209 -0
- package/dist/components/ui/avatar.mjs.map +1 -0
- package/dist/components/ui/badge.d.mts +31 -0
- package/dist/components/ui/badge.d.ts +31 -0
- package/dist/components/ui/badge.js +205 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/badge.mjs +170 -0
- package/dist/components/ui/badge.mjs.map +1 -0
- package/dist/components/ui/breadcrumb.d.mts +57 -0
- package/dist/components/ui/breadcrumb.d.ts +57 -0
- package/dist/components/ui/breadcrumb.js +209 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/breadcrumb.mjs +168 -0
- package/dist/components/ui/breadcrumb.mjs.map +1 -0
- package/dist/components/ui/button-group.d.mts +22 -0
- package/dist/components/ui/button-group.d.ts +22 -0
- package/dist/components/ui/button-group.js +107 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button-group.mjs +72 -0
- package/dist/components/ui/button-group.mjs.map +1 -0
- package/dist/components/ui/button.d.mts +31 -0
- package/dist/components/ui/button.d.ts +31 -0
- package/dist/components/ui/button.js +176 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/button.mjs +141 -0
- package/dist/components/ui/button.mjs.map +1 -0
- package/dist/components/ui/card.d.mts +77 -0
- package/dist/components/ui/card.d.ts +77 -0
- package/dist/components/ui/card.js +370 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/card.mjs +328 -0
- package/dist/components/ui/card.mjs.map +1 -0
- package/dist/{chart.js → components/ui/chart.js} +29 -39
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/{chart.mjs → components/ui/chart.mjs} +21 -31
- package/dist/components/ui/chart.mjs.map +1 -0
- package/dist/components/ui/checkbox.d.mts +24 -0
- package/dist/components/ui/checkbox.d.ts +24 -0
- package/dist/components/ui/checkbox.js +173 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/checkbox.mjs +138 -0
- package/dist/components/ui/checkbox.mjs.map +1 -0
- package/dist/components/ui/divider.d.mts +27 -0
- package/dist/components/ui/divider.d.ts +27 -0
- package/dist/components/ui/divider.js +147 -0
- package/dist/components/ui/divider.js.map +1 -0
- package/dist/components/ui/divider.mjs +112 -0
- package/dist/components/ui/divider.mjs.map +1 -0
- package/dist/components/ui/drawer.d.mts +51 -0
- package/dist/components/ui/drawer.d.ts +51 -0
- package/dist/components/ui/drawer.js +225 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/drawer.mjs +178 -0
- package/dist/components/ui/drawer.mjs.map +1 -0
- package/dist/components/ui/dropdown.d.mts +59 -0
- package/dist/components/ui/dropdown.d.ts +59 -0
- package/dist/components/ui/dropdown.js +310 -0
- package/dist/components/ui/dropdown.js.map +1 -0
- package/dist/components/ui/dropdown.mjs +263 -0
- package/dist/components/ui/dropdown.mjs.map +1 -0
- package/dist/components/ui/field.d.mts +33 -0
- package/dist/components/ui/field.d.ts +33 -0
- package/dist/components/ui/field.js +146 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/field.mjs +108 -0
- package/dist/components/ui/field.mjs.map +1 -0
- package/dist/components/ui/icon-button.d.mts +20 -0
- package/dist/components/ui/icon-button.d.ts +20 -0
- package/dist/components/ui/icon-button.js +147 -0
- package/dist/components/ui/icon-button.js.map +1 -0
- package/dist/components/ui/icon-button.mjs +112 -0
- package/dist/components/ui/icon-button.mjs.map +1 -0
- package/dist/components/ui/index.d.mts +55 -0
- package/dist/components/ui/index.d.ts +55 -0
- package/dist/components/ui/index.js +476 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/index.mjs +246 -0
- package/dist/components/ui/index.mjs.map +1 -0
- package/dist/components/ui/input.d.mts +20 -0
- package/dist/components/ui/input.d.ts +20 -0
- package/dist/components/ui/input.js +250 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/input.mjs +215 -0
- package/dist/components/ui/input.mjs.map +1 -0
- package/dist/components/ui/metric-card.d.mts +53 -0
- package/dist/components/ui/metric-card.d.ts +53 -0
- package/dist/components/ui/metric-card.js +258 -0
- package/dist/components/ui/metric-card.js.map +1 -0
- package/dist/components/ui/metric-card.mjs +217 -0
- package/dist/components/ui/metric-card.mjs.map +1 -0
- package/dist/components/ui/modal.d.mts +77 -0
- package/dist/components/ui/modal.d.ts +77 -0
- package/dist/components/ui/modal.js +396 -0
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/modal.mjs +338 -0
- package/dist/components/ui/modal.mjs.map +1 -0
- package/dist/components/ui/navigation-menu.d.mts +139 -0
- package/dist/components/ui/navigation-menu.d.ts +139 -0
- package/dist/components/ui/navigation-menu.js +531 -0
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/navigation-menu.mjs +488 -0
- package/dist/components/ui/navigation-menu.mjs.map +1 -0
- package/dist/components/ui/pagination.d.mts +130 -0
- package/dist/components/ui/pagination.d.ts +130 -0
- package/dist/components/ui/pagination.js +495 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/pagination.mjs +449 -0
- package/dist/components/ui/pagination.mjs.map +1 -0
- package/dist/components/ui/popover.d.mts +41 -0
- package/dist/components/ui/popover.d.ts +41 -0
- package/dist/components/ui/popover.js +175 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/popover.mjs +133 -0
- package/dist/components/ui/popover.mjs.map +1 -0
- package/dist/components/ui/progress.d.mts +35 -0
- package/dist/components/ui/progress.d.ts +35 -0
- package/dist/components/ui/progress.js +194 -0
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/progress.mjs +159 -0
- package/dist/components/ui/progress.mjs.map +1 -0
- package/dist/components/ui/radio-group.d.mts +40 -0
- package/dist/components/ui/radio-group.d.ts +40 -0
- package/dist/components/ui/radio-group.js +177 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/radio-group.mjs +140 -0
- package/dist/components/ui/radio-group.mjs.map +1 -0
- package/dist/components/ui/segmented.d.mts +30 -0
- package/dist/components/ui/segmented.d.ts +30 -0
- package/dist/components/ui/segmented.js +241 -0
- package/dist/components/ui/segmented.js.map +1 -0
- package/dist/components/ui/segmented.mjs +204 -0
- package/dist/components/ui/segmented.mjs.map +1 -0
- package/dist/components/ui/select.d.mts +31 -0
- package/dist/components/ui/select.d.ts +31 -0
- package/dist/components/ui/select.js +317 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/select.mjs +276 -0
- package/dist/components/ui/select.mjs.map +1 -0
- package/dist/components/ui/skeleton.d.mts +26 -0
- package/dist/components/ui/skeleton.d.ts +26 -0
- package/dist/components/ui/skeleton.js +144 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/skeleton.mjs +109 -0
- package/dist/components/ui/skeleton.mjs.map +1 -0
- package/dist/components/ui/slider.d.mts +38 -0
- package/dist/components/ui/slider.d.ts +38 -0
- package/dist/components/ui/slider.js +180 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/slider.mjs +145 -0
- package/dist/components/ui/slider.mjs.map +1 -0
- package/dist/components/ui/spinner.d.mts +23 -0
- package/dist/components/ui/spinner.d.ts +23 -0
- package/dist/components/ui/spinner.js +471 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/spinner.mjs +436 -0
- package/dist/components/ui/spinner.mjs.map +1 -0
- package/dist/components/ui/switch.d.mts +22 -0
- package/dist/components/ui/switch.d.ts +22 -0
- package/dist/components/ui/switch.js +173 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/switch.mjs +138 -0
- package/dist/components/ui/switch.mjs.map +1 -0
- package/dist/components/ui/table.d.mts +74 -0
- package/dist/components/ui/table.d.ts +74 -0
- package/dist/components/ui/table.js +240 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/table.mjs +199 -0
- package/dist/components/ui/table.mjs.map +1 -0
- package/dist/components/ui/tabs.d.mts +40 -0
- package/dist/components/ui/tabs.d.ts +40 -0
- package/dist/components/ui/tabs.js +238 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/tabs.mjs +199 -0
- package/dist/components/ui/tabs.mjs.map +1 -0
- package/dist/components/ui/textarea.d.mts +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.js +181 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/textarea.mjs +146 -0
- package/dist/components/ui/textarea.mjs.map +1 -0
- package/dist/components/ui/toast.d.mts +93 -0
- package/dist/components/ui/toast.d.ts +93 -0
- package/dist/components/ui/toast.js +429 -0
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toast.mjs +393 -0
- package/dist/components/ui/toast.mjs.map +1 -0
- package/dist/components/ui/toggle-group.d.mts +47 -0
- package/dist/components/ui/toggle-group.d.ts +47 -0
- package/dist/components/ui/toggle-group.js +186 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle-group.mjs +149 -0
- package/dist/components/ui/toggle-group.mjs.map +1 -0
- package/dist/components/ui/toggle.d.mts +19 -0
- package/dist/components/ui/toggle.d.ts +19 -0
- package/dist/components/ui/toggle.js +194 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/toggle.mjs +159 -0
- package/dist/components/ui/toggle.mjs.map +1 -0
- package/dist/components/ui/tooltip.d.mts +37 -0
- package/dist/components/ui/tooltip.d.ts +37 -0
- package/dist/components/ui/tooltip.js +137 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/components/ui/tooltip.mjs +96 -0
- package/dist/components/ui/tooltip.mjs.map +1 -0
- package/dist/lib/utils.d.mts +10 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +33 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/utils.mjs +9 -0
- package/dist/lib/utils.mjs.map +1 -0
- package/package.json +11 -11
- package/dist/chart.js.map +0 -1
- package/dist/chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -1636
- package/dist/index.d.ts +0 -1636
- package/dist/index.js +0 -7291
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -7048
- package/dist/index.mjs.map +0 -1
- /package/dist/{chart.d.mts → components/ui/chart.d.mts} +0 -0
- /package/dist/{chart.d.ts → components/ui/chart.d.ts} +0 -0
|
@@ -0,0 +1,238 @@
|
|
|
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 tabs_exports = {};
|
|
31
|
+
__export(tabs_exports, {
|
|
32
|
+
Tabs: () => Tabs,
|
|
33
|
+
TabsContent: () => TabsContent,
|
|
34
|
+
TabsList: () => TabsList,
|
|
35
|
+
TabsTrigger: () => TabsTrigger,
|
|
36
|
+
tabsListVariants: () => tabsListVariants,
|
|
37
|
+
tabsTriggerVariants: () => tabsTriggerVariants
|
|
38
|
+
});
|
|
39
|
+
module.exports = __toCommonJS(tabs_exports);
|
|
40
|
+
var React = __toESM(require("react"));
|
|
41
|
+
var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
|
|
42
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
43
|
+
var import_utils = require("../../lib/utils");
|
|
44
|
+
const TabsStyleContext = React.createContext({});
|
|
45
|
+
const useTabsStyleContext = () => React.useContext(TabsStyleContext);
|
|
46
|
+
const tabsListVariants = (0, import_class_variance_authority.cva)(
|
|
47
|
+
"inline-flex items-center text-text-subtle",
|
|
48
|
+
{
|
|
49
|
+
variants: {
|
|
50
|
+
variant: {
|
|
51
|
+
line: "border-b border-border bg-transparent gap-0",
|
|
52
|
+
enclosed: "border-b border-border bg-transparent gap-0",
|
|
53
|
+
pill: "bg-background-muted p-1 gap-1"
|
|
54
|
+
},
|
|
55
|
+
fitted: {
|
|
56
|
+
true: "w-full",
|
|
57
|
+
false: ""
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
defaultVariants: {
|
|
61
|
+
variant: "line",
|
|
62
|
+
fitted: false
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
const TabsList = React.forwardRef(({ className, variant, size, fitted, color, radius, ...props }, ref) => {
|
|
67
|
+
const resolvedVariant = variant || "line";
|
|
68
|
+
return /* @__PURE__ */ React.createElement(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" } }, /* @__PURE__ */ React.createElement(
|
|
69
|
+
TabsPrimitive.List,
|
|
70
|
+
{
|
|
71
|
+
ref,
|
|
72
|
+
className: (0, import_utils.cn)(
|
|
73
|
+
tabsListVariants({ variant, fitted }),
|
|
74
|
+
resolvedVariant === "pill" && pillListRadiusClasses[radius || "md"],
|
|
75
|
+
className
|
|
76
|
+
),
|
|
77
|
+
...props
|
|
78
|
+
}
|
|
79
|
+
));
|
|
80
|
+
});
|
|
81
|
+
TabsList.displayName = "TabsList";
|
|
82
|
+
const tabsTriggerVariants = (0, import_class_variance_authority.cva)(
|
|
83
|
+
[
|
|
84
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap",
|
|
85
|
+
"transition-all duration-micro ease-out cursor-pointer",
|
|
86
|
+
"focus-visible:focus-ring",
|
|
87
|
+
"disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50"
|
|
88
|
+
].join(" "),
|
|
89
|
+
{
|
|
90
|
+
variants: {
|
|
91
|
+
variant: {
|
|
92
|
+
line: [
|
|
93
|
+
"border-b-2 border-transparent -mb-px",
|
|
94
|
+
"hover:text-foreground hover:border-border",
|
|
95
|
+
"data-[state=active]:text-foreground data-[state=active]:font-semibold"
|
|
96
|
+
].join(" "),
|
|
97
|
+
enclosed: [
|
|
98
|
+
"border border-transparent -mb-px",
|
|
99
|
+
"hover:text-foreground",
|
|
100
|
+
"data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background",
|
|
101
|
+
"data-[state=active]:border-border data-[state=active]:border-b-background"
|
|
102
|
+
].join(" "),
|
|
103
|
+
pill: [
|
|
104
|
+
"hover:text-foreground",
|
|
105
|
+
"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm"
|
|
106
|
+
].join(" ")
|
|
107
|
+
},
|
|
108
|
+
size: {
|
|
109
|
+
sm: "h-8 text-sm",
|
|
110
|
+
// 32px, 13px
|
|
111
|
+
md: "h-9 text-sm",
|
|
112
|
+
// 36px, 13px
|
|
113
|
+
default: "h-10 text-md",
|
|
114
|
+
// 40px, 14px
|
|
115
|
+
lg: "h-12 text-base"
|
|
116
|
+
// 48px, 16px
|
|
117
|
+
},
|
|
118
|
+
fitted: {
|
|
119
|
+
true: "flex-1",
|
|
120
|
+
false: ""
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
compoundVariants: [
|
|
124
|
+
// Padding per variant × size
|
|
125
|
+
{ variant: "line", size: "sm", className: "px-3" },
|
|
126
|
+
{ variant: "line", size: "md", className: "px-3.5" },
|
|
127
|
+
{ variant: "line", size: "default", className: "px-4" },
|
|
128
|
+
{ variant: "line", size: "lg", className: "px-6" },
|
|
129
|
+
{ variant: "enclosed", size: "sm", className: "px-3" },
|
|
130
|
+
{ variant: "enclosed", size: "md", className: "px-3.5" },
|
|
131
|
+
{ variant: "enclosed", size: "default", className: "px-4" },
|
|
132
|
+
{ variant: "enclosed", size: "lg", className: "px-6" },
|
|
133
|
+
// Pill: reduced height + Segmented-matching font/padding
|
|
134
|
+
{ variant: "pill", size: "sm", className: "h-6 text-xs px-3.5" },
|
|
135
|
+
{ variant: "pill", size: "md", className: "h-7 text-sm px-3.5" },
|
|
136
|
+
{ variant: "pill", size: "default", className: "h-8 text-sm px-4" },
|
|
137
|
+
{ variant: "pill", size: "lg", className: "h-10 text-md px-6" }
|
|
138
|
+
],
|
|
139
|
+
defaultVariants: {
|
|
140
|
+
variant: "line",
|
|
141
|
+
size: "default",
|
|
142
|
+
fitted: false
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
const triggerIconSizeClasses = {
|
|
147
|
+
sm: "[&>svg]:icon-xs",
|
|
148
|
+
// 14px
|
|
149
|
+
md: "[&>svg]:icon-sm",
|
|
150
|
+
// 16px
|
|
151
|
+
default: "[&>svg]:icon-sm",
|
|
152
|
+
// 16px
|
|
153
|
+
lg: "[&>svg]:icon-sm"
|
|
154
|
+
// 16px
|
|
155
|
+
};
|
|
156
|
+
const lineColorClasses = {
|
|
157
|
+
default: "data-[state=active]:border-foreground",
|
|
158
|
+
primary: "data-[state=active]:border-primary"
|
|
159
|
+
};
|
|
160
|
+
const enclosedRadiusClasses = {
|
|
161
|
+
none: "rounded-t-none",
|
|
162
|
+
sm: "rounded-t-sm",
|
|
163
|
+
base: "rounded-t",
|
|
164
|
+
md: "rounded-t-md",
|
|
165
|
+
lg: "rounded-t-lg",
|
|
166
|
+
xl: "rounded-t-xl"
|
|
167
|
+
};
|
|
168
|
+
const pillListRadiusClasses = {
|
|
169
|
+
none: "rounded-none",
|
|
170
|
+
sm: "rounded-sm",
|
|
171
|
+
base: "rounded",
|
|
172
|
+
md: "rounded-md",
|
|
173
|
+
lg: "rounded-lg",
|
|
174
|
+
xl: "rounded-xl",
|
|
175
|
+
"2xl": "rounded-2xl",
|
|
176
|
+
"3xl": "rounded-3xl",
|
|
177
|
+
full: "rounded-full"
|
|
178
|
+
};
|
|
179
|
+
const pillItemRadiusClasses = {
|
|
180
|
+
none: "rounded-none",
|
|
181
|
+
sm: "rounded-sm",
|
|
182
|
+
base: "rounded",
|
|
183
|
+
md: "rounded-md",
|
|
184
|
+
lg: "rounded-md",
|
|
185
|
+
xl: "rounded-lg",
|
|
186
|
+
"2xl": "rounded-xl",
|
|
187
|
+
"3xl": "rounded-2xl",
|
|
188
|
+
full: "rounded-full"
|
|
189
|
+
};
|
|
190
|
+
const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
191
|
+
const { variant, size, fitted, color, radius } = useTabsStyleContext();
|
|
192
|
+
const resolvedSize = size || "default";
|
|
193
|
+
return /* @__PURE__ */ React.createElement(
|
|
194
|
+
TabsPrimitive.Trigger,
|
|
195
|
+
{
|
|
196
|
+
ref,
|
|
197
|
+
className: (0, import_utils.cn)(
|
|
198
|
+
tabsTriggerVariants({ variant, size: resolvedSize, fitted }),
|
|
199
|
+
triggerIconSizeClasses[resolvedSize],
|
|
200
|
+
variant === "line" && lineColorClasses[color || "default"],
|
|
201
|
+
variant === "enclosed" && enclosedRadiusClasses[radius || "md"],
|
|
202
|
+
variant === "pill" && pillItemRadiusClasses[radius || "md"],
|
|
203
|
+
className
|
|
204
|
+
),
|
|
205
|
+
...props
|
|
206
|
+
},
|
|
207
|
+
children
|
|
208
|
+
);
|
|
209
|
+
});
|
|
210
|
+
TabsTrigger.displayName = "TabsTrigger";
|
|
211
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
212
|
+
TabsPrimitive.Content,
|
|
213
|
+
{
|
|
214
|
+
ref,
|
|
215
|
+
className: (0, import_utils.cn)(
|
|
216
|
+
"mt-4 focus-visible:focus-ring",
|
|
217
|
+
className
|
|
218
|
+
),
|
|
219
|
+
...props
|
|
220
|
+
}
|
|
221
|
+
));
|
|
222
|
+
TabsContent.displayName = "TabsContent";
|
|
223
|
+
const TabsRoot = TabsPrimitive.Root;
|
|
224
|
+
const Tabs = Object.assign(TabsRoot, {
|
|
225
|
+
List: TabsList,
|
|
226
|
+
Trigger: TabsTrigger,
|
|
227
|
+
Content: TabsContent
|
|
228
|
+
});
|
|
229
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
230
|
+
0 && (module.exports = {
|
|
231
|
+
Tabs,
|
|
232
|
+
TabsContent,
|
|
233
|
+
TabsList,
|
|
234
|
+
TabsTrigger,
|
|
235
|
+
tabsListVariants,
|
|
236
|
+
tabsTriggerVariants
|
|
237
|
+
});
|
|
238
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\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} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst TabsRoot = TabsPrimitive.Root\n\n// ─── Namespace ──────────────────────────────────────────\nconst Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Tabs {\n export type ListProps = TabsListProps\n export type TriggerProps = TabsTriggerProps\n export type ContentProps = TabsContentProps\n}\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const TabsStyleContext = React.createContext({});
|
|
7
|
+
const useTabsStyleContext = () => React.useContext(TabsStyleContext);
|
|
8
|
+
const tabsListVariants = cva(
|
|
9
|
+
"inline-flex items-center text-text-subtle",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
line: "border-b border-border bg-transparent gap-0",
|
|
14
|
+
enclosed: "border-b border-border bg-transparent gap-0",
|
|
15
|
+
pill: "bg-background-muted p-1 gap-1"
|
|
16
|
+
},
|
|
17
|
+
fitted: {
|
|
18
|
+
true: "w-full",
|
|
19
|
+
false: ""
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "line",
|
|
24
|
+
fitted: false
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
const TabsList = React.forwardRef(({ className, variant, size, fitted, color, radius, ...props }, ref) => {
|
|
29
|
+
const resolvedVariant = variant || "line";
|
|
30
|
+
return /* @__PURE__ */ React.createElement(TabsStyleContext.Provider, { value: { variant: resolvedVariant, size: size || "default", fitted: fitted ?? false, color: color || "default", radius: radius || "md" } }, /* @__PURE__ */ React.createElement(
|
|
31
|
+
TabsPrimitive.List,
|
|
32
|
+
{
|
|
33
|
+
ref,
|
|
34
|
+
className: cn(
|
|
35
|
+
tabsListVariants({ variant, fitted }),
|
|
36
|
+
resolvedVariant === "pill" && pillListRadiusClasses[radius || "md"],
|
|
37
|
+
className
|
|
38
|
+
),
|
|
39
|
+
...props
|
|
40
|
+
}
|
|
41
|
+
));
|
|
42
|
+
});
|
|
43
|
+
TabsList.displayName = "TabsList";
|
|
44
|
+
const tabsTriggerVariants = cva(
|
|
45
|
+
[
|
|
46
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap",
|
|
47
|
+
"transition-all duration-micro ease-out cursor-pointer",
|
|
48
|
+
"focus-visible:focus-ring",
|
|
49
|
+
"disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50"
|
|
50
|
+
].join(" "),
|
|
51
|
+
{
|
|
52
|
+
variants: {
|
|
53
|
+
variant: {
|
|
54
|
+
line: [
|
|
55
|
+
"border-b-2 border-transparent -mb-px",
|
|
56
|
+
"hover:text-foreground hover:border-border",
|
|
57
|
+
"data-[state=active]:text-foreground data-[state=active]:font-semibold"
|
|
58
|
+
].join(" "),
|
|
59
|
+
enclosed: [
|
|
60
|
+
"border border-transparent -mb-px",
|
|
61
|
+
"hover:text-foreground",
|
|
62
|
+
"data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background",
|
|
63
|
+
"data-[state=active]:border-border data-[state=active]:border-b-background"
|
|
64
|
+
].join(" "),
|
|
65
|
+
pill: [
|
|
66
|
+
"hover:text-foreground",
|
|
67
|
+
"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm"
|
|
68
|
+
].join(" ")
|
|
69
|
+
},
|
|
70
|
+
size: {
|
|
71
|
+
sm: "h-8 text-sm",
|
|
72
|
+
// 32px, 13px
|
|
73
|
+
md: "h-9 text-sm",
|
|
74
|
+
// 36px, 13px
|
|
75
|
+
default: "h-10 text-md",
|
|
76
|
+
// 40px, 14px
|
|
77
|
+
lg: "h-12 text-base"
|
|
78
|
+
// 48px, 16px
|
|
79
|
+
},
|
|
80
|
+
fitted: {
|
|
81
|
+
true: "flex-1",
|
|
82
|
+
false: ""
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
compoundVariants: [
|
|
86
|
+
// Padding per variant × size
|
|
87
|
+
{ variant: "line", size: "sm", className: "px-3" },
|
|
88
|
+
{ variant: "line", size: "md", className: "px-3.5" },
|
|
89
|
+
{ variant: "line", size: "default", className: "px-4" },
|
|
90
|
+
{ variant: "line", size: "lg", className: "px-6" },
|
|
91
|
+
{ variant: "enclosed", size: "sm", className: "px-3" },
|
|
92
|
+
{ variant: "enclosed", size: "md", className: "px-3.5" },
|
|
93
|
+
{ variant: "enclosed", size: "default", className: "px-4" },
|
|
94
|
+
{ variant: "enclosed", size: "lg", className: "px-6" },
|
|
95
|
+
// Pill: reduced height + Segmented-matching font/padding
|
|
96
|
+
{ variant: "pill", size: "sm", className: "h-6 text-xs px-3.5" },
|
|
97
|
+
{ variant: "pill", size: "md", className: "h-7 text-sm px-3.5" },
|
|
98
|
+
{ variant: "pill", size: "default", className: "h-8 text-sm px-4" },
|
|
99
|
+
{ variant: "pill", size: "lg", className: "h-10 text-md px-6" }
|
|
100
|
+
],
|
|
101
|
+
defaultVariants: {
|
|
102
|
+
variant: "line",
|
|
103
|
+
size: "default",
|
|
104
|
+
fitted: false
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
const triggerIconSizeClasses = {
|
|
109
|
+
sm: "[&>svg]:icon-xs",
|
|
110
|
+
// 14px
|
|
111
|
+
md: "[&>svg]:icon-sm",
|
|
112
|
+
// 16px
|
|
113
|
+
default: "[&>svg]:icon-sm",
|
|
114
|
+
// 16px
|
|
115
|
+
lg: "[&>svg]:icon-sm"
|
|
116
|
+
// 16px
|
|
117
|
+
};
|
|
118
|
+
const lineColorClasses = {
|
|
119
|
+
default: "data-[state=active]:border-foreground",
|
|
120
|
+
primary: "data-[state=active]:border-primary"
|
|
121
|
+
};
|
|
122
|
+
const enclosedRadiusClasses = {
|
|
123
|
+
none: "rounded-t-none",
|
|
124
|
+
sm: "rounded-t-sm",
|
|
125
|
+
base: "rounded-t",
|
|
126
|
+
md: "rounded-t-md",
|
|
127
|
+
lg: "rounded-t-lg",
|
|
128
|
+
xl: "rounded-t-xl"
|
|
129
|
+
};
|
|
130
|
+
const pillListRadiusClasses = {
|
|
131
|
+
none: "rounded-none",
|
|
132
|
+
sm: "rounded-sm",
|
|
133
|
+
base: "rounded",
|
|
134
|
+
md: "rounded-md",
|
|
135
|
+
lg: "rounded-lg",
|
|
136
|
+
xl: "rounded-xl",
|
|
137
|
+
"2xl": "rounded-2xl",
|
|
138
|
+
"3xl": "rounded-3xl",
|
|
139
|
+
full: "rounded-full"
|
|
140
|
+
};
|
|
141
|
+
const pillItemRadiusClasses = {
|
|
142
|
+
none: "rounded-none",
|
|
143
|
+
sm: "rounded-sm",
|
|
144
|
+
base: "rounded",
|
|
145
|
+
md: "rounded-md",
|
|
146
|
+
lg: "rounded-md",
|
|
147
|
+
xl: "rounded-lg",
|
|
148
|
+
"2xl": "rounded-xl",
|
|
149
|
+
"3xl": "rounded-2xl",
|
|
150
|
+
full: "rounded-full"
|
|
151
|
+
};
|
|
152
|
+
const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
153
|
+
const { variant, size, fitted, color, radius } = useTabsStyleContext();
|
|
154
|
+
const resolvedSize = size || "default";
|
|
155
|
+
return /* @__PURE__ */ React.createElement(
|
|
156
|
+
TabsPrimitive.Trigger,
|
|
157
|
+
{
|
|
158
|
+
ref,
|
|
159
|
+
className: cn(
|
|
160
|
+
tabsTriggerVariants({ variant, size: resolvedSize, fitted }),
|
|
161
|
+
triggerIconSizeClasses[resolvedSize],
|
|
162
|
+
variant === "line" && lineColorClasses[color || "default"],
|
|
163
|
+
variant === "enclosed" && enclosedRadiusClasses[radius || "md"],
|
|
164
|
+
variant === "pill" && pillItemRadiusClasses[radius || "md"],
|
|
165
|
+
className
|
|
166
|
+
),
|
|
167
|
+
...props
|
|
168
|
+
},
|
|
169
|
+
children
|
|
170
|
+
);
|
|
171
|
+
});
|
|
172
|
+
TabsTrigger.displayName = "TabsTrigger";
|
|
173
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
174
|
+
TabsPrimitive.Content,
|
|
175
|
+
{
|
|
176
|
+
ref,
|
|
177
|
+
className: cn(
|
|
178
|
+
"mt-4 focus-visible:focus-ring",
|
|
179
|
+
className
|
|
180
|
+
),
|
|
181
|
+
...props
|
|
182
|
+
}
|
|
183
|
+
));
|
|
184
|
+
TabsContent.displayName = "TabsContent";
|
|
185
|
+
const TabsRoot = TabsPrimitive.Root;
|
|
186
|
+
const Tabs = Object.assign(TabsRoot, {
|
|
187
|
+
List: TabsList,
|
|
188
|
+
Trigger: TabsTrigger,
|
|
189
|
+
Content: TabsContent
|
|
190
|
+
});
|
|
191
|
+
export {
|
|
192
|
+
Tabs,
|
|
193
|
+
TabsContent,
|
|
194
|
+
TabsList,
|
|
195
|
+
TabsTrigger,
|
|
196
|
+
tabsListVariants,
|
|
197
|
+
tabsTriggerVariants
|
|
198
|
+
};
|
|
199
|
+
//# sourceMappingURL=tabs.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\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} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst TabsRoot = TabsPrimitive.Root\n\n// ─── Namespace ──────────────────────────────────────────\nconst Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Tabs {\n export type ListProps = TabsListProps\n export type TriggerProps = TabsTriggerProps\n export type ContentProps = TabsContentProps\n}\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
|
|
5
|
+
declare const textareaVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "filled" | null | undefined;
|
|
7
|
+
focusRing?: boolean | null | undefined;
|
|
8
|
+
size?: "default" | "compact" | null | undefined;
|
|
9
|
+
radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
|
+
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
11
|
+
state?: "default" | "error" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
14
|
+
error?: boolean;
|
|
15
|
+
focusRing?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
18
|
+
|
|
19
|
+
export { Textarea, type TextareaProps, textareaVariants };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
|
|
5
|
+
declare const textareaVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "filled" | null | undefined;
|
|
7
|
+
focusRing?: boolean | null | undefined;
|
|
8
|
+
size?: "default" | "compact" | null | undefined;
|
|
9
|
+
radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
|
|
10
|
+
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
11
|
+
state?: "default" | "error" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
14
|
+
error?: boolean;
|
|
15
|
+
focusRing?: boolean;
|
|
16
|
+
}
|
|
17
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
18
|
+
|
|
19
|
+
export { Textarea, type TextareaProps, textareaVariants };
|