@avenue-ticketing/ui 0.12.0-beta.6 → 0.12.0-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/tabs.d.ts +63 -0
- package/dist/react/tabs.js +302 -0
- package/dist/react/tabs.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, FC, ComponentPropsWithRef } from 'react';
|
|
3
|
+
import { TabProps, TabRenderProps, TabListProps, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components';
|
|
4
|
+
|
|
5
|
+
type Orientation = "horizontal" | "vertical";
|
|
6
|
+
type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline";
|
|
7
|
+
type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
|
|
8
|
+
type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
|
|
9
|
+
declare const sizes: {
|
|
10
|
+
sm: {
|
|
11
|
+
base: string;
|
|
12
|
+
"button-brand": string;
|
|
13
|
+
"button-gray": string;
|
|
14
|
+
"button-border": string;
|
|
15
|
+
"button-minimal": string;
|
|
16
|
+
underline: string;
|
|
17
|
+
line: string;
|
|
18
|
+
};
|
|
19
|
+
md: {
|
|
20
|
+
base: string;
|
|
21
|
+
"button-brand": string;
|
|
22
|
+
"button-gray": string;
|
|
23
|
+
"button-border": string;
|
|
24
|
+
"button-minimal": string;
|
|
25
|
+
underline: string;
|
|
26
|
+
line: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
interface TabListComponentProps<T extends object, K extends Orientation> extends Omit<TabListProps<T>, "items"> {
|
|
30
|
+
/** The size of the tab list. */
|
|
31
|
+
size?: keyof typeof sizes;
|
|
32
|
+
/** The type of the tab list. */
|
|
33
|
+
type?: TabTypeColors<K>;
|
|
34
|
+
/** The orientation of the tab list. */
|
|
35
|
+
orientation?: K;
|
|
36
|
+
/** The items of the tab list. When provided, tabs are rendered automatically via the render function in children. */
|
|
37
|
+
items?: T[];
|
|
38
|
+
/** Whether the tab list is full width. */
|
|
39
|
+
fullWidth?: boolean;
|
|
40
|
+
}
|
|
41
|
+
declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => react.JSX.Element;
|
|
42
|
+
declare const TabPanel: (props: ComponentPropsWithRef<typeof TabPanel$1>) => react.JSX.Element;
|
|
43
|
+
interface TabComponentProps extends TabProps {
|
|
44
|
+
/** The label of the tab. */
|
|
45
|
+
label?: ReactNode;
|
|
46
|
+
/** The children of the tab. */
|
|
47
|
+
children?: ReactNode | ((props: TabRenderProps) => ReactNode);
|
|
48
|
+
/** Icon component or element to show before the text */
|
|
49
|
+
icon?: FC<{
|
|
50
|
+
className?: string;
|
|
51
|
+
}> | ReactNode;
|
|
52
|
+
/** The badge displayed next to the label. */
|
|
53
|
+
badge?: number | string;
|
|
54
|
+
}
|
|
55
|
+
declare const Tab: ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => react.JSX.Element;
|
|
56
|
+
declare const Tabs: {
|
|
57
|
+
({ className, ...props }: ComponentPropsWithRef<typeof Tabs$1>): react.JSX.Element;
|
|
58
|
+
Panel: (props: ComponentPropsWithRef<typeof TabPanel$1>) => react.JSX.Element;
|
|
59
|
+
List: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => react.JSX.Element;
|
|
60
|
+
Item: ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => react.JSX.Element;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export { Tab, TabList, TabPanel, Tabs };
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
import { createContext, useContext, isValidElement } from 'react';
|
|
2
|
+
import { useSlottedContext, TabsContext, TabList as TabList$1, TabPanel as TabPanel$1, Tab as Tab$1, Tabs as Tabs$1 } from 'react-aria-components';
|
|
3
|
+
import '@phosphor-icons/react/dist/csr/X';
|
|
4
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
import { extendTailwindMerge } from 'tailwind-merge';
|
|
6
|
+
|
|
7
|
+
var twMerge = extendTailwindMerge({
|
|
8
|
+
extend: {
|
|
9
|
+
theme: {
|
|
10
|
+
text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
var cx = twMerge;
|
|
15
|
+
|
|
16
|
+
// ../../components/base/badges/badge-types.ts
|
|
17
|
+
var badgeTypes = {
|
|
18
|
+
pillColor: "pill-color",
|
|
19
|
+
badgeColor: "color",
|
|
20
|
+
badgeModern: "modern"
|
|
21
|
+
};
|
|
22
|
+
var filledColors = {
|
|
23
|
+
gray: {
|
|
24
|
+
root: "bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200",
|
|
25
|
+
addon: "text-utility-neutral-500",
|
|
26
|
+
addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500"
|
|
27
|
+
},
|
|
28
|
+
brand: {
|
|
29
|
+
root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200",
|
|
30
|
+
addon: "text-utility-brand-500",
|
|
31
|
+
addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
|
|
32
|
+
},
|
|
33
|
+
error: {
|
|
34
|
+
root: "bg-utility-red-50 text-utility-red-700 ring-utility-red-200",
|
|
35
|
+
addon: "text-utility-red-500",
|
|
36
|
+
addonButton: "hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500"
|
|
37
|
+
},
|
|
38
|
+
warning: {
|
|
39
|
+
root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200",
|
|
40
|
+
addon: "text-utility-yellow-500",
|
|
41
|
+
addonButton: "hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500"
|
|
42
|
+
},
|
|
43
|
+
success: {
|
|
44
|
+
root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200",
|
|
45
|
+
addon: "text-utility-green-500",
|
|
46
|
+
addonButton: "hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500"
|
|
47
|
+
},
|
|
48
|
+
slate: {
|
|
49
|
+
root: "bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200",
|
|
50
|
+
addon: "text-utility-slate-500",
|
|
51
|
+
addonButton: "hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500"
|
|
52
|
+
},
|
|
53
|
+
sky: {
|
|
54
|
+
root: "bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200",
|
|
55
|
+
addon: "text-utility-sky-500",
|
|
56
|
+
addonButton: "hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500"
|
|
57
|
+
},
|
|
58
|
+
blue: {
|
|
59
|
+
root: "bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200",
|
|
60
|
+
addon: "text-utility-blue-500",
|
|
61
|
+
addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500"
|
|
62
|
+
},
|
|
63
|
+
indigo: {
|
|
64
|
+
root: "bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200",
|
|
65
|
+
addon: "text-utility-indigo-500",
|
|
66
|
+
addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500"
|
|
67
|
+
},
|
|
68
|
+
purple: {
|
|
69
|
+
root: "bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200",
|
|
70
|
+
addon: "text-utility-purple-500",
|
|
71
|
+
addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500"
|
|
72
|
+
},
|
|
73
|
+
pink: {
|
|
74
|
+
root: "bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200",
|
|
75
|
+
addon: "text-utility-pink-500",
|
|
76
|
+
addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500"
|
|
77
|
+
},
|
|
78
|
+
orange: {
|
|
79
|
+
root: "bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200",
|
|
80
|
+
addon: "text-utility-orange-500",
|
|
81
|
+
addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500"
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: "", addon: value.addon }]));
|
|
85
|
+
var withPillTypes = {
|
|
86
|
+
[badgeTypes.pillColor]: {
|
|
87
|
+
common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
|
|
88
|
+
styles: filledColors
|
|
89
|
+
},
|
|
90
|
+
[badgeTypes.badgeColor]: {
|
|
91
|
+
common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
|
|
92
|
+
styles: filledColors
|
|
93
|
+
},
|
|
94
|
+
[badgeTypes.badgeModern]: {
|
|
95
|
+
common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset shadow-xs",
|
|
96
|
+
styles: {
|
|
97
|
+
gray: {
|
|
98
|
+
root: "bg-primary text-secondary ring-primary",
|
|
99
|
+
addon: "text-neutral-500",
|
|
100
|
+
addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
var Badge = (props) => {
|
|
106
|
+
const { type = "pill-color", size = "md", color = "gray", children } = props;
|
|
107
|
+
const colors = withPillTypes[type];
|
|
108
|
+
const pillSizes = {
|
|
109
|
+
sm: "py-0.5 px-2 text-xs font-semibold",
|
|
110
|
+
md: "py-0.5 px-2.5 text-sm font-semibold",
|
|
111
|
+
lg: "py-1 px-3 text-sm font-semibold"
|
|
112
|
+
};
|
|
113
|
+
const badgeSizes = {
|
|
114
|
+
sm: "py-0.5 px-1.5 text-xs font-semibold",
|
|
115
|
+
md: "py-0.5 px-2 text-sm font-semibold",
|
|
116
|
+
lg: "py-1 px-2.5 text-sm font-semibold"
|
|
117
|
+
};
|
|
118
|
+
const badgeColorSizes = {
|
|
119
|
+
...badgeSizes,
|
|
120
|
+
lg: `${badgeSizes.lg} rounded-lg`
|
|
121
|
+
};
|
|
122
|
+
const sizes2 = {
|
|
123
|
+
[badgeTypes.pillColor]: pillSizes,
|
|
124
|
+
[badgeTypes.badgeColor]: badgeColorSizes,
|
|
125
|
+
[badgeTypes.badgeModern]: badgeSizes
|
|
126
|
+
};
|
|
127
|
+
return /* @__PURE__ */ jsx("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root, props.className), children });
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
// ../../utils/is-react-component.ts
|
|
131
|
+
var isFunctionComponent = (component) => {
|
|
132
|
+
return typeof component === "function";
|
|
133
|
+
};
|
|
134
|
+
var isClassComponent = (component) => {
|
|
135
|
+
return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
|
|
136
|
+
};
|
|
137
|
+
var isForwardRefComponent = (component) => {
|
|
138
|
+
return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
|
|
139
|
+
};
|
|
140
|
+
var isReactComponent = (component) => {
|
|
141
|
+
return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
|
|
142
|
+
};
|
|
143
|
+
var getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
|
|
144
|
+
"button-brand": cx(
|
|
145
|
+
"outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
146
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
147
|
+
(isSelected || isHovered) && "bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover"
|
|
148
|
+
),
|
|
149
|
+
"button-gray": cx(
|
|
150
|
+
"outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
151
|
+
isHovered && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover",
|
|
152
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
153
|
+
isSelected && "bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover"
|
|
154
|
+
),
|
|
155
|
+
"button-border": cx(
|
|
156
|
+
"outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
157
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
158
|
+
(isSelected || isHovered) && "bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover"
|
|
159
|
+
),
|
|
160
|
+
"button-minimal": cx(
|
|
161
|
+
"rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
162
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
163
|
+
(isSelected || isHovered) && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover"
|
|
164
|
+
),
|
|
165
|
+
underline: cx(
|
|
166
|
+
"rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
167
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
168
|
+
(isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover"
|
|
169
|
+
),
|
|
170
|
+
line: cx(
|
|
171
|
+
"rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary",
|
|
172
|
+
isFocusVisible && "outline-2 -outline-offset-2",
|
|
173
|
+
(isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover"
|
|
174
|
+
)
|
|
175
|
+
});
|
|
176
|
+
var sizes = {
|
|
177
|
+
sm: {
|
|
178
|
+
base: "text-sm font-semibold gap-1 *:data-icon:size-4",
|
|
179
|
+
"button-brand": "py-2 px-2.5",
|
|
180
|
+
"button-gray": "py-2 px-2.5",
|
|
181
|
+
"button-border": "py-2 px-2.5",
|
|
182
|
+
"button-minimal": "py-2 px-2.5",
|
|
183
|
+
underline: "px-0.5 pb-2.5 pt-0",
|
|
184
|
+
line: "pl-2.5 pr-3 py-0.5"
|
|
185
|
+
},
|
|
186
|
+
md: {
|
|
187
|
+
base: "text-md font-semibold gap-1.5 *:data-icon:size-5",
|
|
188
|
+
"button-brand": "py-2.5 px-2.5",
|
|
189
|
+
"button-gray": "py-2.5 px-2.5",
|
|
190
|
+
"button-border": "py-2.5 px-2.5",
|
|
191
|
+
"button-minimal": "py-2.5 px-2.5",
|
|
192
|
+
underline: "px-0.5 pb-2.5 pt-0",
|
|
193
|
+
line: "pr-3.5 pl-3 py-1"
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
var getHorizontalStyles = ({ size, fullWidth }) => ({
|
|
197
|
+
"button-brand": "gap-1",
|
|
198
|
+
"button-gray": "gap-1",
|
|
199
|
+
"button-border": cx("gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset", size === "md" && "rounded-xl p-1.5"),
|
|
200
|
+
"button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
|
|
201
|
+
underline: cx("gap-3", fullWidth && "w-full gap-4"),
|
|
202
|
+
line: "gap-2"
|
|
203
|
+
});
|
|
204
|
+
var TabListContext = createContext({
|
|
205
|
+
size: "sm",
|
|
206
|
+
type: "button-brand"
|
|
207
|
+
});
|
|
208
|
+
var TabList = ({
|
|
209
|
+
size = "sm",
|
|
210
|
+
type = "button-brand",
|
|
211
|
+
orientation: orientationProp,
|
|
212
|
+
fullWidth,
|
|
213
|
+
className,
|
|
214
|
+
children,
|
|
215
|
+
...otherProps
|
|
216
|
+
}) => {
|
|
217
|
+
const context = useSlottedContext(TabsContext);
|
|
218
|
+
const orientation = orientationProp ?? context?.orientation ?? "horizontal";
|
|
219
|
+
return /* @__PURE__ */ jsx(TabListContext.Provider, { value: { size, type, orientation, fullWidth }, children: /* @__PURE__ */ jsx(
|
|
220
|
+
TabList$1,
|
|
221
|
+
{
|
|
222
|
+
...otherProps,
|
|
223
|
+
className: (state) => cx(
|
|
224
|
+
"group flex",
|
|
225
|
+
getHorizontalStyles({
|
|
226
|
+
size,
|
|
227
|
+
fullWidth
|
|
228
|
+
})[type],
|
|
229
|
+
orientation === "vertical" && "w-max flex-col",
|
|
230
|
+
// Only horizontal tabs with underline type have bottom border
|
|
231
|
+
orientation === "horizontal" && type === "underline" && "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary",
|
|
232
|
+
typeof className === "function" ? className(state) : className
|
|
233
|
+
),
|
|
234
|
+
children: children ?? (otherProps.items ? (item) => /* @__PURE__ */ jsx(Tab, { ...item, children: item.children }) : void 0)
|
|
235
|
+
}
|
|
236
|
+
) });
|
|
237
|
+
};
|
|
238
|
+
var TabPanel = (props) => {
|
|
239
|
+
return /* @__PURE__ */ jsx(
|
|
240
|
+
TabPanel$1,
|
|
241
|
+
{
|
|
242
|
+
...props,
|
|
243
|
+
className: (state) => cx(
|
|
244
|
+
"outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
|
|
245
|
+
typeof props.className === "function" ? props.className(state) : props.className
|
|
246
|
+
)
|
|
247
|
+
}
|
|
248
|
+
);
|
|
249
|
+
};
|
|
250
|
+
var Tab = ({ label, children, badge, icon: Icon, className, ...otherProps }) => {
|
|
251
|
+
const { size = "sm", type = "button-brand", fullWidth } = useContext(TabListContext);
|
|
252
|
+
const showPillColorBadge = type === "underline" || type === "line" || type === "button-brand";
|
|
253
|
+
return /* @__PURE__ */ jsx(
|
|
254
|
+
Tab$1,
|
|
255
|
+
{
|
|
256
|
+
...otherProps,
|
|
257
|
+
className: (prop) => cx(
|
|
258
|
+
"z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear",
|
|
259
|
+
"group-orientation-vertical:justify-start",
|
|
260
|
+
fullWidth && "w-full flex-1",
|
|
261
|
+
sizes[size].base,
|
|
262
|
+
sizes[size][type],
|
|
263
|
+
getTabStyles(prop)[type],
|
|
264
|
+
typeof className === "function" ? className(prop) : className
|
|
265
|
+
),
|
|
266
|
+
children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
267
|
+
isValidElement(Icon) && Icon,
|
|
268
|
+
isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }),
|
|
269
|
+
/* @__PURE__ */ jsxs("span", { className: cx("flex items-center gap-1.5", type !== "line" && "px-0.5"), children: [
|
|
270
|
+
typeof children === "function" ? children(state) : children || label,
|
|
271
|
+
badge && /* @__PURE__ */ jsx(
|
|
272
|
+
Badge,
|
|
273
|
+
{
|
|
274
|
+
size: "sm",
|
|
275
|
+
type: showPillColorBadge ? "pill-color" : "modern",
|
|
276
|
+
color: showPillColorBadge && (state.isHovered || state.isSelected) ? "brand" : "gray",
|
|
277
|
+
className: cx("hidden transition-inherit-all md:flex", size === "sm" && "-my-px"),
|
|
278
|
+
children: badge
|
|
279
|
+
}
|
|
280
|
+
)
|
|
281
|
+
] })
|
|
282
|
+
] })
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
};
|
|
286
|
+
var Tabs = ({ className, ...props }) => {
|
|
287
|
+
return /* @__PURE__ */ jsx(
|
|
288
|
+
Tabs$1,
|
|
289
|
+
{
|
|
290
|
+
keyboardActivation: "manual",
|
|
291
|
+
...props,
|
|
292
|
+
className: (state) => cx("flex w-full flex-col", typeof className === "function" ? className(state) : className)
|
|
293
|
+
}
|
|
294
|
+
);
|
|
295
|
+
};
|
|
296
|
+
Tabs.Panel = TabPanel;
|
|
297
|
+
Tabs.List = TabList;
|
|
298
|
+
Tabs.Item = Tab;
|
|
299
|
+
|
|
300
|
+
export { Tab, TabList, TabPanel, Tabs };
|
|
301
|
+
//# sourceMappingURL=tabs.js.map
|
|
302
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/badges/badge-types.ts","../../../../components/base/badges/badges.tsx","../../../../utils/is-react-component.ts","../../../../components/application/tabs/tabs.tsx"],"names":["sizes","jsx","AriaTabList","AriaTabPanel","AriaTab","jsxs","AriaTabs"],"mappings":"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","file":"tabs.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n },\n },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n return classes;\n}\n","export type IconComponentType = React.FunctionComponent<{\n className?: string;\n weight?: \"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\";\n}>;\n\nexport type Sizes = \"sm\" | \"md\" | \"lg\";\n\nexport type BadgeColors = \"gray\" | \"brand\" | \"error\" | \"warning\" | \"success\" | \"slate\" | \"sky\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\";\n\nexport type FlagTypes =\n | \"AD\"\n | \"AE\"\n | \"AF\"\n | \"AG\"\n | \"AI\"\n | \"AL\"\n | \"AM\"\n | \"AO\"\n | \"AR\"\n | \"AS\"\n | \"AT\"\n | \"AU\"\n | \"AW\"\n | \"AX\"\n | \"AZ\"\n | \"BA\"\n | \"BB\"\n | \"BD\"\n | \"BE\"\n | \"BF\"\n | \"BG\"\n | \"BH\"\n | \"BI\"\n | \"BJ\"\n | \"BL\"\n | \"BM\"\n | \"BN\"\n | \"BO\"\n | \"BQ-1\"\n | \"BQ-2\"\n | \"BQ\"\n | \"BR\"\n | \"BS\"\n | \"BT\"\n | \"BW\"\n | \"BY\"\n | \"BZ\"\n | \"CA\"\n | \"CC\"\n | \"CD-1\"\n | \"CD\"\n | \"CF\"\n | \"CH\"\n | \"CK\"\n | \"CL\"\n | \"CM\"\n | \"CN\"\n | \"CO\"\n | \"CR\"\n | \"CU\"\n | \"CW\"\n | \"CX\"\n | \"CY\"\n | \"CZ\"\n | \"DE\"\n | \"DJ\"\n | \"DK\"\n | \"DM\"\n | \"DO\"\n | \"DS\"\n | \"DZ\"\n | \"earth\"\n | \"EC\"\n | \"EE\"\n | \"EG\"\n | \"EH\"\n | \"ER\"\n | \"ES\"\n | \"ET\"\n | \"FI\"\n | \"FJ\"\n | \"FK\"\n | \"FM\"\n | \"FO\"\n | \"FR\"\n | \"GA\"\n | \"GB-2\"\n | \"GB\"\n | \"GD\"\n | \"GE\"\n | \"GG\"\n | \"GH\"\n | \"GI\"\n | \"GL\"\n | \"GM\"\n | \"GN\"\n | \"GQ\"\n | \"GR\"\n | \"GT\"\n | \"GU\"\n | \"GW\"\n | \"GY\"\n | \"HK\"\n | \"HN\"\n | \"HR\"\n | \"HT\"\n | \"HU\"\n | \"ID\"\n | \"IE\"\n | \"IL\"\n | \"IM\"\n | \"IN\"\n | \"IO\"\n | \"IQ\"\n | \"IR\"\n | \"IS\"\n | \"IT\"\n | \"JE\"\n | \"JM\"\n | \"JO\"\n | \"JP\"\n | \"KE\"\n | \"KG\"\n | \"KH\"\n | \"KI\"\n | \"KM\"\n | \"KN\"\n | \"KP\"\n | \"KR\"\n | \"KW\"\n | \"KY\"\n | \"KZ\"\n | \"LA\"\n | \"LB\"\n | \"LC\"\n | \"LI\"\n | \"LK\"\n | \"LR\"\n | \"LS\"\n | \"LT\"\n | \"LU\"\n | \"LV\"\n | \"LY\"\n | \"MA\"\n | \"MC\"\n | \"MD\"\n | \"ME\"\n | \"MG\"\n | \"MH\"\n | \"MK\"\n | \"ML\"\n | \"MM\"\n | \"MN\"\n | \"MO\"\n | \"MP\"\n | \"MQ\"\n | \"MR\"\n | \"MS\"\n | \"MT\"\n | \"MU\"\n | \"MV\"\n | \"MW\"\n | \"MX\"\n | \"MY\"\n | \"MZ\"\n | \"NA\"\n | \"NE\"\n | \"NF\"\n | \"NG\"\n | \"NI\"\n | \"NL\"\n | \"NO\"\n | \"NP\"\n | \"NR\"\n | \"NU\"\n | \"NZ\"\n | \"OM\"\n | \"PA\"\n | \"PE\"\n | \"PF\"\n | \"PG\"\n | \"PH\"\n | \"PK\"\n | \"PL\"\n | \"PM\"\n | \"PN\"\n | \"PR\"\n | \"PT\"\n | \"PW\"\n | \"PY\"\n | \"QA\"\n | \"RE\"\n | \"RO\"\n | \"RS\"\n | \"RU\"\n | \"RW\"\n | \"SA\"\n | \"SB\"\n | \"SC\"\n | \"SD\"\n | \"SE\"\n | \"SG\"\n | \"SH\"\n | \"SI\"\n | \"SJ\"\n | \"SK\"\n | \"SL\"\n | \"SM\"\n | \"SN\"\n | \"SO\"\n | \"SR\"\n | \"SS\"\n | \"ST\"\n | \"SV\"\n | \"SX\"\n | \"SY\"\n | \"SZ\"\n | \"TC\"\n | \"TD\"\n | \"TF\"\n | \"TG\"\n | \"TH\"\n | \"TJ\"\n | \"TK\"\n | \"TL\"\n | \"TM\"\n | \"TN\"\n | \"TO\"\n | \"TR\"\n | \"TT\"\n | \"TV\"\n | \"TZ\"\n | \"UA\"\n | \"UG\"\n | \"UM\"\n | \"US\"\n | \"UY\"\n | \"UZ\"\n | \"VA\"\n | \"VC\"\n | \"VE\"\n | \"VG\"\n | \"VI\"\n | \"VN\"\n | \"VU\"\n | \"WF\"\n | \"WS\"\n | \"YE\"\n | \"YT\"\n | \"ZA\"\n | \"ZM\"\n | \"ZW\";\n\nexport type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;\nexport type ExtractBadgeKeys<T> = keyof T;\nexport type BadgeTypeToColorMap<T> = {\n [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;\n};\nexport type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;\n\nexport const badgeTypes = {\n pillColor: \"pill-color\",\n badgeColor: \"color\",\n badgeModern: \"modern\",\n} as const;\n\nexport type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];\n","\"use client\";\n\n/** Figma: Badges (1046:3819) — pill borders use utility ring-inset; dismiss button uses spread focus ring. */\n\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport { XIcon as CloseX } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from \"./badge-types\";\nimport { badgeTypes } from \"./badge-types\";\n\nconst focusShadowPlain =\n \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const filledColors: Record<BadgeColors, { root: string; addon: string; addonButton: string }> = {\n gray: {\n root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200\",\n addon: \"text-utility-neutral-500\",\n addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n },\n brand: {\n root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200\",\n addon: \"text-utility-brand-500\",\n addonButton: \"hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500\",\n },\n error: {\n root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200\",\n addon: \"text-utility-red-500\",\n addonButton: \"hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500\",\n },\n warning: {\n root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200\",\n addon: \"text-utility-yellow-500\",\n addonButton: \"hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500\",\n },\n success: {\n root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200\",\n addon: \"text-utility-green-500\",\n addonButton: \"hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500\",\n },\n slate: {\n root: \"bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200\",\n addon: \"text-utility-slate-500\",\n addonButton: \"hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500\",\n },\n sky: {\n root: \"bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200\",\n addon: \"text-utility-sky-500\",\n addonButton: \"hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500\",\n },\n blue: {\n root: \"bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200\",\n addon: \"text-utility-blue-500\",\n addonButton: \"hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500\",\n },\n indigo: {\n root: \"bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200\",\n addon: \"text-utility-indigo-500\",\n addonButton: \"hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500\",\n },\n purple: {\n root: \"bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200\",\n addon: \"text-utility-purple-500\",\n addonButton: \"hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500\",\n },\n pink: {\n root: \"bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200\",\n addon: \"text-utility-pink-500\",\n addonButton: \"hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500\",\n },\n orange: {\n root: \"bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200\",\n addon: \"text-utility-orange-500\",\n addonButton: \"hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500\",\n },\n};\n\nconst addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: \"\", addon: value.addon }])) as Record<\n BadgeColors,\n { root: string; addon: string }\n>;\n\nconst withPillTypes = {\n [badgeTypes.pillColor]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n styles: filledColors,\n },\n [badgeTypes.badgeColor]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n styles: filledColors,\n },\n [badgeTypes.badgeModern]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset shadow-xs\",\n styles: {\n gray: {\n root: \"bg-primary text-secondary ring-primary\",\n addon: \"text-neutral-500\",\n addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n },\n },\n },\n};\n\nconst withBadgeTypes = {\n [badgeTypes.pillColor]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n styles: filledColors,\n },\n [badgeTypes.badgeColor]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n styles: filledColors,\n },\n [badgeTypes.badgeModern]: {\n common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs\",\n styles: addonOnlyColors,\n },\n};\n\nexport type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];\n\ninterface BadgeProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n color?: BadgeColor<T>;\n children: ReactNode;\n className?: string;\n}\n\nexport const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {\n const { type = \"pill-color\", size = \"md\", color = \"gray\", children } = props;\n const colors = withPillTypes[type];\n\n const pillSizes = {\n sm: \"py-0.5 px-2 text-xs font-semibold\",\n md: \"py-0.5 px-2.5 text-sm font-semibold\",\n lg: \"py-1 px-3 text-sm font-semibold\",\n };\n const badgeSizes = {\n sm: \"py-0.5 px-1.5 text-xs font-semibold\",\n md: \"py-0.5 px-2 text-sm font-semibold\",\n lg: \"py-1 px-2.5 text-sm font-semibold\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, props.className)}>{children}</span>;\n};\n\ninterface BadgeWithDotProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n className?: string;\n children: ReactNode;\n}\n\nexport const BadgeWithDot = <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => {\n const { size = \"md\", color = \"gray\", type = \"pill-color\", className, children } = props;\n\n const colors = withBadgeTypes[type];\n\n const pillSizes = {\n sm: \"gap-1 py-0.5 pl-1.5 pr-2 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 pl-2.5 pr-3 text-sm font-semibold\",\n };\n\n const badgeSizes = {\n sm: \"gap-1 py-0.5 px-1.5 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 px-2 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 px-2.5 text-sm font-semibold\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, className)}>\n <Dot className={colors.styles[color].addon} size=\"sm\" />\n {children}\n </span>\n );\n};\n\ninterface BadgeWithIconProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n iconLeading?: IconComponentType;\n iconTrailing?: IconComponentType;\n children: ReactNode;\n className?: string;\n}\n\nconst badgeIconClassName = \"size-3\";\n\nexport const BadgeWithIcon = <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => {\n const { size = \"md\", color = \"gray\", type = \"pill-color\", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;\n\n const colors = withBadgeTypes[type];\n\n const icon = IconLeading ? \"leading\" : \"trailing\";\n\n const pillSizes = {\n sm: {\n trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n },\n md: {\n trailing: \"gap-1 py-0.5 pl-2.5 pr-2 text-sm font-semibold\",\n leading: \"gap-1 py-0.5 pr-2.5 pl-2 text-sm font-semibold\",\n },\n lg: {\n trailing: \"gap-1 py-1 pl-3 pr-2.5 text-sm font-semibold\",\n leading: \"gap-1 py-1 pr-3 pl-2.5 text-sm font-semibold\",\n },\n };\n const badgeSizes = {\n sm: {\n trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n },\n md: {\n trailing: \"gap-1 py-0.5 pl-2 pr-1.5 text-sm font-semibold\",\n leading: \"gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold\",\n },\n lg: {\n trailing: \"gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold\",\n leading: \"gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold\",\n },\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: {\n trailing: `${badgeSizes.lg.trailing} rounded-lg`,\n leading: `${badgeSizes.lg.leading} rounded-lg`,\n },\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className)}>\n {IconLeading && <IconLeading weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n {children}\n {IconTrailing && <IconTrailing weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n </span>\n );\n};\n\ninterface BadgeWithFlagProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n flag?: FlagTypes;\n color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n children: ReactNode;\n}\n\nexport const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => {\n const { size = \"md\", color = \"gray\", flag = \"AU\", type = \"pill-color\", children } = props;\n\n const colors = withPillTypes[type];\n\n const pillSizes = {\n sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n };\n const badgeSizes = {\n sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className=\"size-4 max-w-none rounded-full\" alt={`${flag} flag`} />\n {children}\n </span>\n );\n};\n\ninterface BadgeWithImageProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n imgSrc: string;\n color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n children: ReactNode;\n}\n\nexport const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => {\n const { size = \"md\", color = \"gray\", type = \"pill-color\", imgSrc, children } = props;\n\n const colors = withPillTypes[type];\n\n const pillSizes = {\n sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n };\n const badgeSizes = {\n sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n <img src={imgSrc} className=\"size-4 max-w-none rounded-full\" alt=\"Badge image\" />\n {children}\n </span>\n );\n};\n\ninterface BadgeWithButtonProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n icon?: IconComponentType;\n color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n children: ReactNode;\n /**\n * The label for the button.\n */\n buttonLabel?: string;\n /**\n * The click event handler for the button.\n */\n onButtonClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const BadgeWithButton = <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => {\n const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon = CloseX, buttonLabel, children } = props;\n\n const colors = withPillTypes[type];\n\n const pillSizes = {\n sm: \"gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-semibold\",\n md: \"gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-semibold\",\n lg: \"gap-0.5 py-1 pl-3 pr-1.5 text-sm font-semibold\",\n };\n const badgeSizes = {\n sm: \"gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold\",\n md: \"gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold\",\n lg: \"gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n {children}\n <button\n type=\"button\"\n aria-label={buttonLabel}\n onClick={props.onButtonClick}\n className={cx(\n \"flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear\",\n focusShadowPlain,\n colors.styles[color].addonButton,\n type === \"pill-color\" || type === \"modern\" ? \"rounded-full\" : \"rounded-[3px]\",\n )}\n >\n <Icon weight=\"bold\" className={cx(badgeIconClassName, \"transition-inherit-all\")} />\n </button>\n </span>\n );\n};\n\ninterface BadgeIconProps<T extends BadgeTypes> {\n type?: T;\n size?: Sizes;\n icon: IconComponentType;\n color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n children?: ReactNode;\n}\n\nexport const BadgeIcon = <T extends BadgeTypes>(props: BadgeIconProps<T>) => {\n const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon } = props;\n\n const colors = withPillTypes[type];\n\n const pillSizes = {\n sm: \"p-1.25\",\n md: \"p-1.5\",\n lg: \"p-2\",\n };\n\n const badgeSizes = {\n sm: \"p-1.25\",\n md: \"p-1.5\",\n lg: \"p-2\",\n };\n const badgeColorSizes = {\n ...badgeSizes,\n lg: `${badgeSizes.lg} rounded-lg`,\n };\n\n const sizes = {\n [badgeTypes.pillColor]: pillSizes,\n [badgeTypes.badgeColor]: badgeColorSizes,\n [badgeTypes.badgeModern]: badgeSizes,\n };\n\n return (\n <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n <Icon weight=\"bold\" className={cx(badgeIconClassName, colors.styles[color].addon)} />\n </span>\n );\n};\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\nimport { createContext, isValidElement, useContext } from \"react\";\nimport type { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps } from \"react-aria-components\";\nimport { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, Tabs as AriaTabs, TabsContext, useSlottedContext } from \"react-aria-components\";\nimport { Badge } from \"@/components/base/badges/badges\";\nimport { cx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\n// Types for different orientations\ntype HorizontalTypes = \"button-brand\" | \"button-gray\" | \"button-border\" | \"button-minimal\" | \"underline\";\ntype VerticalTypes = \"button-brand\" | \"button-gray\" | \"button-border\" | \"button-minimal\" | \"line\";\ntype TabTypeColors<T> = T extends \"horizontal\" ? HorizontalTypes : VerticalTypes;\n\n// Styles for different types of tab\nconst getTabStyles = ({ isFocusVisible, isSelected, isHovered }: AriaTabRenderProps) => ({\n \"button-brand\": cx(\n \"outline-focus-ring *:data-icon:text-fg-quaternary\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n (isSelected || isHovered) && \"bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover\",\n ),\n \"button-gray\": cx(\n \"outline-focus-ring *:data-icon:text-fg-quaternary\",\n isHovered && \"bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n isSelected && \"bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover\",\n ),\n \"button-border\": cx(\n \"outline-focus-ring *:data-icon:text-fg-quaternary\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n (isSelected || isHovered) && \"bg-primary_alt text-secondary shadow-sm *:data-icon:text-fg-secondary_hover\",\n ),\n \"button-minimal\": cx(\n \"rounded-lg outline-focus-ring *:data-icon:text-fg-quaternary\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n (isSelected || isHovered) && \"bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset *:data-icon:text-fg-secondary_hover\",\n ),\n underline: cx(\n \"rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n (isSelected || isHovered) && \"border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover\",\n ),\n line: cx(\n \"rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary\",\n isFocusVisible && \"outline-2 -outline-offset-2\",\n (isSelected || isHovered) && \"border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover\",\n ),\n});\n\nconst sizes = {\n sm: {\n base: \"text-sm font-semibold gap-1 *:data-icon:size-4\",\n \"button-brand\": \"py-2 px-2.5\",\n \"button-gray\": \"py-2 px-2.5\",\n \"button-border\": \"py-2 px-2.5\",\n \"button-minimal\": \"py-2 px-2.5\",\n underline: \"px-0.5 pb-2.5 pt-0\",\n line: \"pl-2.5 pr-3 py-0.5\",\n },\n md: {\n base: \"text-md font-semibold gap-1.5 *:data-icon:size-5\",\n \"button-brand\": \"py-2.5 px-2.5\",\n \"button-gray\": \"py-2.5 px-2.5\",\n \"button-border\": \"py-2.5 px-2.5\",\n \"button-minimal\": \"py-2.5 px-2.5\",\n underline: \"px-0.5 pb-2.5 pt-0\",\n line: \"pr-3.5 pl-3 py-1\",\n },\n};\n\n// Styles for different types of horizontal tabs\nconst getHorizontalStyles = ({ size, fullWidth }: { size?: \"sm\" | \"md\"; fullWidth?: boolean }) => ({\n \"button-brand\": \"gap-1\",\n \"button-gray\": \"gap-1\",\n \"button-border\": cx(\"gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset\", size === \"md\" && \"rounded-xl p-1.5\"),\n \"button-minimal\": \"gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary\",\n underline: cx(\"gap-3\", fullWidth && \"w-full gap-4\"),\n line: \"gap-2\",\n});\n\ninterface TabListComponentProps<T extends object, K extends Orientation> extends Omit<AriaTabListProps<T>, \"items\"> {\n /** The size of the tab list. */\n size?: keyof typeof sizes;\n /** The type of the tab list. */\n type?: TabTypeColors<K>;\n /** The orientation of the tab list. */\n orientation?: K;\n /** The items of the tab list. When provided, tabs are rendered automatically via the render function in children. */\n items?: T[];\n /** Whether the tab list is full width. */\n fullWidth?: boolean;\n}\n\nconst TabListContext = createContext<Omit<TabListComponentProps<TabComponentProps, Orientation>, \"items\">>({\n size: \"sm\",\n type: \"button-brand\",\n});\n\nexport const TabList = <T extends Orientation>({\n size = \"sm\",\n type = \"button-brand\",\n orientation: orientationProp,\n fullWidth,\n className,\n children,\n ...otherProps\n}: TabListComponentProps<TabComponentProps, T>) => {\n const context = useSlottedContext(TabsContext);\n\n const orientation = orientationProp ?? context?.orientation ?? \"horizontal\";\n\n return (\n <TabListContext.Provider value={{ size, type, orientation, fullWidth }}>\n <AriaTabList\n {...otherProps}\n className={(state) =>\n cx(\n \"group flex\",\n\n getHorizontalStyles({\n size,\n fullWidth,\n })[type as HorizontalTypes],\n\n orientation === \"vertical\" && \"w-max flex-col\",\n\n // Only horizontal tabs with underline type have bottom border\n orientation === \"horizontal\" &&\n type === \"underline\" &&\n \"relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary\",\n\n typeof className === \"function\" ? className(state) : className,\n )\n }\n >\n {children ?? (otherProps.items ? (item) => <Tab {...item}>{item.children}</Tab> : undefined)}\n </AriaTabList>\n </TabListContext.Provider>\n );\n};\n\nexport const TabPanel = (props: ComponentPropsWithRef<typeof AriaTabPanel>) => {\n return (\n <AriaTabPanel\n {...props}\n className={(state) =>\n cx(\n \"outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2\",\n typeof props.className === \"function\" ? props.className(state) : props.className,\n )\n }\n />\n );\n};\n\ninterface TabComponentProps extends AriaTabProps {\n /** The label of the tab. */\n label?: ReactNode;\n /** The children of the tab. */\n children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);\n /** Icon component or element to show before the text */\n icon?: FC<{ className?: string }> | ReactNode;\n /** The badge displayed next to the label. */\n badge?: number | string;\n}\n\nexport const Tab = ({ label, children, badge, icon: Icon, className, ...otherProps }: TabComponentProps) => {\n const { size = \"sm\", type = \"button-brand\", fullWidth } = useContext(TabListContext);\n\n const showPillColorBadge = type === \"underline\" || type === \"line\" || type === \"button-brand\";\n\n return (\n <AriaTab\n {...otherProps}\n className={(prop) =>\n cx(\n \"z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear\",\n \"group-orientation-vertical:justify-start\",\n fullWidth && \"w-full flex-1\",\n sizes[size].base,\n sizes[size][type],\n getTabStyles(prop)[type],\n typeof className === \"function\" ? className(prop) : className,\n )\n }\n >\n {(state) => (\n <>\n {/* Icon */}\n {isValidElement(Icon) && Icon}\n {isReactComponent(Icon) && <Icon data-icon className=\"transition-inherit-all\" />}\n\n <span className={cx(\"flex items-center gap-1.5\", type !== \"line\" && \"px-0.5\")}>\n {typeof children === \"function\" ? children(state) : children || label}\n\n {/* Badge */}\n {badge && (\n <Badge\n size=\"sm\"\n type={showPillColorBadge ? \"pill-color\" : \"modern\"}\n color={showPillColorBadge && (state.isHovered || state.isSelected) ? \"brand\" : \"gray\"}\n className={cx(\"hidden transition-inherit-all md:flex\", size === \"sm\" && \"-my-px\")}\n >\n {badge}\n </Badge>\n )}\n </span>\n </>\n )}\n </AriaTab>\n );\n};\n\nexport const Tabs = ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>) => {\n return (\n <AriaTabs\n keyboardActivation=\"manual\"\n {...props}\n className={(state) => cx(\"flex w-full flex-col\", typeof className === \"function\" ? className(state) : className)}\n />\n );\n};\n\nTabs.Panel = TabPanel;\nTabs.List = TabList;\nTabs.Item = Tab;\n"]}
|