@giddaa-housing/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -0
- package/dist/accordion.d.ts +11 -0
- package/dist/accordion.js +124 -0
- package/dist/accordion.js.map +1 -0
- package/dist/alert.d.ts +18 -0
- package/dist/alert.js +152 -0
- package/dist/alert.js.map +1 -0
- package/dist/avatar.d.ts +14 -0
- package/dist/avatar.js +152 -0
- package/dist/avatar.js.map +1 -0
- package/dist/badge.d.ts +14 -0
- package/dist/badge.js +119 -0
- package/dist/badge.js.map +1 -0
- package/dist/bar-chart.d.ts +136 -0
- package/dist/bar-chart.js +302 -0
- package/dist/bar-chart.js.map +1 -0
- package/dist/base.css +32 -0
- package/dist/breadcrumb.d.ts +12 -0
- package/dist/breadcrumb.js +161 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/bullet-chart.d.ts +98 -0
- package/dist/bullet-chart.js +189 -0
- package/dist/bullet-chart.js.map +1 -0
- package/dist/button-group.d.ts +18 -0
- package/dist/button-group.js +170 -0
- package/dist/button-group.js.map +1 -0
- package/dist/button.d.ts +19 -0
- package/dist/button.js +146 -0
- package/dist/button.js.map +1 -0
- package/dist/calendar.d.ts +9 -0
- package/dist/calendar.js +293 -0
- package/dist/calendar.js.map +1 -0
- package/dist/card.d.ts +18 -0
- package/dist/card.js +186 -0
- package/dist/card.js.map +1 -0
- package/dist/carousel.d.ts +53 -0
- package/dist/carousel.js +396 -0
- package/dist/carousel.js.map +1 -0
- package/dist/chart.d.ts +122 -0
- package/dist/chart.js +494 -0
- package/dist/chart.js.map +1 -0
- package/dist/checkbox.d.ts +73 -0
- package/dist/checkbox.js +87 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/collapsible.d.ts +8 -0
- package/dist/collapsible.js +82 -0
- package/dist/collapsible.js.map +1 -0
- package/dist/combobox.d.ts +30 -0
- package/dist/combobox.js +713 -0
- package/dist/combobox.js.map +1 -0
- package/dist/date-picker.d.ts +22 -0
- package/dist/date-picker.js +528 -0
- package/dist/date-picker.js.map +1 -0
- package/dist/dialog.d.ts +30 -0
- package/dist/dialog.js +339 -0
- package/dist/dialog.js.map +1 -0
- package/dist/dropdown-menu.d.ts +35 -0
- package/dist/dropdown-menu.js +376 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/dropzone.d.ts +128 -0
- package/dist/dropzone.js +490 -0
- package/dist/dropzone.js.map +1 -0
- package/dist/empty-state.d.ts +17 -0
- package/dist/empty-state.js +146 -0
- package/dist/empty-state.js.map +1 -0
- package/dist/field.d.ts +29 -0
- package/dist/field.js +345 -0
- package/dist/field.js.map +1 -0
- package/dist/files/red-hat-display-latin-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff2 +0 -0
- package/dist/funnel-chart.d.ts +84 -0
- package/dist/funnel-chart.js +569 -0
- package/dist/funnel-chart.js.map +1 -0
- package/dist/index.d.ts +87 -0
- package/dist/index.js +10448 -0
- package/dist/index.js.map +1 -0
- package/dist/input-group.d.ts +31 -0
- package/dist/input-group.js +380 -0
- package/dist/input-group.js.map +1 -0
- package/dist/input-size-context.d.ts +11 -0
- package/dist/input-size-context.js +24 -0
- package/dist/input-size-context.js.map +1 -0
- package/dist/input.d.ts +13 -0
- package/dist/input.js +83 -0
- package/dist/input.js.map +1 -0
- package/dist/item.d.ts +8 -0
- package/dist/item.js +93 -0
- package/dist/item.js.map +1 -0
- package/dist/kpi-card.d.ts +24 -0
- package/dist/kpi-card.js +243 -0
- package/dist/kpi-card.js.map +1 -0
- package/dist/label.d.ts +8 -0
- package/dist/label.js +68 -0
- package/dist/label.js.map +1 -0
- package/dist/line-chart.d.ts +155 -0
- package/dist/line-chart.js +269 -0
- package/dist/line-chart.js.map +1 -0
- package/dist/logo.d.ts +6 -0
- package/dist/logo.js +146 -0
- package/dist/logo.js.map +1 -0
- package/dist/number-input.d.ts +41 -0
- package/dist/number-input.js +418 -0
- package/dist/number-input.js.map +1 -0
- package/dist/page-header.d.ts +13 -0
- package/dist/page-header.js +113 -0
- package/dist/page-header.js.map +1 -0
- package/dist/pagination.d.ts +35 -0
- package/dist/pagination.js +352 -0
- package/dist/pagination.js.map +1 -0
- package/dist/password-input.d.ts +13 -0
- package/dist/password-input.js +356 -0
- package/dist/password-input.js.map +1 -0
- package/dist/phone-input.d.ts +21 -0
- package/dist/phone-input.js +573 -0
- package/dist/phone-input.js.map +1 -0
- package/dist/photo-gallery.d.ts +42 -0
- package/dist/photo-gallery.js +756 -0
- package/dist/photo-gallery.js.map +1 -0
- package/dist/pie-chart.d.ts +125 -0
- package/dist/pie-chart.js +192 -0
- package/dist/pie-chart.js.map +1 -0
- package/dist/popover.d.ts +20 -0
- package/dist/popover.js +169 -0
- package/dist/popover.js.map +1 -0
- package/dist/progress.d.ts +28 -0
- package/dist/progress.js +315 -0
- package/dist/progress.js.map +1 -0
- package/dist/radio-group.d.ts +32 -0
- package/dist/radio-group.js +100 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/red-hat-display.css +2 -0
- package/dist/rich-text-editor.d.ts +16 -0
- package/dist/rich-text-editor.js +1000 -0
- package/dist/rich-text-editor.js.map +1 -0
- package/dist/search-input.d.ts +19 -0
- package/dist/search-input.js +411 -0
- package/dist/search-input.js.map +1 -0
- package/dist/select.d.ts +21 -0
- package/dist/select.js +305 -0
- package/dist/select.js.map +1 -0
- package/dist/separator.d.ts +10 -0
- package/dist/separator.js +72 -0
- package/dist/separator.js.map +1 -0
- package/dist/sheet.d.ts +24 -0
- package/dist/sheet.js +282 -0
- package/dist/sheet.js.map +1 -0
- package/dist/sidebar.d.ts +70 -0
- package/dist/sidebar.js +1078 -0
- package/dist/sidebar.js.map +1 -0
- package/dist/size-context.d.ts +11 -0
- package/dist/size-context.js +22 -0
- package/dist/size-context.js.map +1 -0
- package/dist/skeleton.d.ts +5 -0
- package/dist/skeleton.js +48 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/sparkline.d.ts +94 -0
- package/dist/sparkline.js +568 -0
- package/dist/sparkline.js.map +1 -0
- package/dist/stepper.d.ts +43 -0
- package/dist/stepper.js +296 -0
- package/dist/stepper.js.map +1 -0
- package/dist/styles.css +2 -0
- package/dist/switch.d.ts +29 -0
- package/dist/switch.js +108 -0
- package/dist/switch.js.map +1 -0
- package/dist/tab-list.d.ts +38 -0
- package/dist/tab-list.js +394 -0
- package/dist/tab-list.js.map +1 -0
- package/dist/table.d.ts +69 -0
- package/dist/table.js +197 -0
- package/dist/table.js.map +1 -0
- package/dist/tabs.d.ts +18 -0
- package/dist/tabs.js +159 -0
- package/dist/tabs.js.map +1 -0
- package/dist/tag.d.ts +25 -0
- package/dist/tag.js +160 -0
- package/dist/tag.js.map +1 -0
- package/dist/textarea.d.ts +12 -0
- package/dist/textarea.js +78 -0
- package/dist/textarea.js.map +1 -0
- package/dist/theme/giddaa.css +2 -0
- package/dist/time-picker.d.ts +13 -0
- package/dist/time-picker.js +472 -0
- package/dist/time-picker.js.map +1 -0
- package/dist/toast.d.ts +23 -0
- package/dist/toast.js +330 -0
- package/dist/toast.js.map +1 -0
- package/dist/tooltip.d.ts +11 -0
- package/dist/tooltip.js +96 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tree-map.d.ts +127 -0
- package/dist/tree-map.js +652 -0
- package/dist/tree-map.js.map +1 -0
- package/package.json +328 -0
package/dist/sheet.js
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
// src/components/ui/sheet.tsx
|
|
2
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
4
|
+
import { XIcon } from "lucide-react";
|
|
5
|
+
|
|
6
|
+
// src/lib/cn.ts
|
|
7
|
+
import { clsx } from "clsx";
|
|
8
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
9
|
+
var twMerge = extendTailwindMerge({
|
|
10
|
+
extend: {
|
|
11
|
+
classGroups: {
|
|
12
|
+
"font-size": [
|
|
13
|
+
{
|
|
14
|
+
text: [
|
|
15
|
+
"gdt-display",
|
|
16
|
+
"gdt-h1",
|
|
17
|
+
"gdt-h2",
|
|
18
|
+
"gdt-h3",
|
|
19
|
+
"gdt-h4",
|
|
20
|
+
"gdt-h5",
|
|
21
|
+
"gdt-xl",
|
|
22
|
+
"gdt-lg",
|
|
23
|
+
"gdt-md",
|
|
24
|
+
"gdt-sm",
|
|
25
|
+
"gdt-xs",
|
|
26
|
+
"gdt-subtext",
|
|
27
|
+
"gdt-capitalized"
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
function cn(...inputs) {
|
|
35
|
+
return twMerge(clsx(inputs));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// src/components/ui/button.tsx
|
|
39
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
40
|
+
import { cva } from "class-variance-authority";
|
|
41
|
+
import { Loader } from "lucide-react";
|
|
42
|
+
|
|
43
|
+
// src/components/ui/size-context.tsx
|
|
44
|
+
import { createContext, useContext } from "react";
|
|
45
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
46
|
+
var SizeContext = createContext(void 0);
|
|
47
|
+
function SizeProvider({
|
|
48
|
+
children,
|
|
49
|
+
size
|
|
50
|
+
}) {
|
|
51
|
+
if (!size) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
53
|
+
}
|
|
54
|
+
return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
|
|
55
|
+
}
|
|
56
|
+
function useComponentSize(size, fallback = "md") {
|
|
57
|
+
const inheritedSize = useContext(SizeContext);
|
|
58
|
+
return size ?? inheritedSize ?? fallback;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// src/components/ui/button.tsx
|
|
62
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
63
|
+
var buttonVariants = cva(
|
|
64
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
65
|
+
{
|
|
66
|
+
variants: {
|
|
67
|
+
variant: {
|
|
68
|
+
primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
|
|
69
|
+
"primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
|
|
70
|
+
secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
|
|
71
|
+
"secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
|
|
72
|
+
tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
|
|
73
|
+
"tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
|
|
74
|
+
ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
|
|
75
|
+
danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
|
|
76
|
+
"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
|
|
77
|
+
"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
|
|
78
|
+
"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
|
|
79
|
+
},
|
|
80
|
+
size: {
|
|
81
|
+
sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
|
|
82
|
+
md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
|
|
83
|
+
lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
|
|
84
|
+
xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
|
|
85
|
+
icon: "size-10",
|
|
86
|
+
"icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
|
|
87
|
+
"icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
|
|
88
|
+
"icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
|
|
89
|
+
"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
defaultVariants: {
|
|
93
|
+
variant: "primary",
|
|
94
|
+
size: "md"
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
function Button({
|
|
99
|
+
className,
|
|
100
|
+
variant = "primary",
|
|
101
|
+
size,
|
|
102
|
+
isLoading = false,
|
|
103
|
+
children,
|
|
104
|
+
disabled = false,
|
|
105
|
+
...props
|
|
106
|
+
}) {
|
|
107
|
+
const inheritedSize = useComponentSize();
|
|
108
|
+
const resolvedSize = size ?? inheritedSize;
|
|
109
|
+
const _disabled = disabled || isLoading;
|
|
110
|
+
return /* @__PURE__ */ jsxs(
|
|
111
|
+
ButtonPrimitive,
|
|
112
|
+
{
|
|
113
|
+
"data-slot": "button",
|
|
114
|
+
className: cn(buttonVariants({ variant, size: resolvedSize, className })),
|
|
115
|
+
disabled: _disabled,
|
|
116
|
+
...props,
|
|
117
|
+
children: [
|
|
118
|
+
isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
|
|
119
|
+
" ",
|
|
120
|
+
children
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// src/components/ui/sheet.tsx
|
|
127
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
128
|
+
function Sheet({ ...props }) {
|
|
129
|
+
return /* @__PURE__ */ jsx3(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
130
|
+
}
|
|
131
|
+
function SheetTrigger({ ...props }) {
|
|
132
|
+
return /* @__PURE__ */ jsx3(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
133
|
+
}
|
|
134
|
+
function SheetClose({ ...props }) {
|
|
135
|
+
return /* @__PURE__ */ jsx3(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
|
|
136
|
+
}
|
|
137
|
+
function SheetPortal({ ...props }) {
|
|
138
|
+
return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
139
|
+
}
|
|
140
|
+
function SheetOverlay({ className, ...props }) {
|
|
141
|
+
return /* @__PURE__ */ jsx3(
|
|
142
|
+
SheetPrimitive.Backdrop,
|
|
143
|
+
{
|
|
144
|
+
"data-slot": "sheet-overlay",
|
|
145
|
+
className: cn(
|
|
146
|
+
"fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl",
|
|
147
|
+
className
|
|
148
|
+
),
|
|
149
|
+
...props
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
var sheetContentVariants = cva2(
|
|
154
|
+
"group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)",
|
|
155
|
+
{
|
|
156
|
+
variants: {
|
|
157
|
+
size: {
|
|
158
|
+
sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
|
|
159
|
+
md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
|
|
160
|
+
lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
|
|
161
|
+
fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
defaultVariants: {
|
|
165
|
+
size: "md"
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
function SheetContent({
|
|
170
|
+
className,
|
|
171
|
+
children,
|
|
172
|
+
side = "left",
|
|
173
|
+
size = "md",
|
|
174
|
+
showCloseButton = true,
|
|
175
|
+
...props
|
|
176
|
+
}) {
|
|
177
|
+
const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
|
|
178
|
+
const contentSize = resolvedSize === "fullscreen" ? "lg" : resolvedSize;
|
|
179
|
+
return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
|
|
180
|
+
/* @__PURE__ */ jsx3(SheetOverlay, {}),
|
|
181
|
+
/* @__PURE__ */ jsx3(SizeProvider, { size: contentSize, children: /* @__PURE__ */ jsxs2(
|
|
182
|
+
SheetPrimitive.Popup,
|
|
183
|
+
{
|
|
184
|
+
"data-slot": "sheet-content",
|
|
185
|
+
"data-side": side,
|
|
186
|
+
"data-size": resolvedSize,
|
|
187
|
+
className: cn(
|
|
188
|
+
sheetContentVariants({ size: resolvedSize }),
|
|
189
|
+
className
|
|
190
|
+
),
|
|
191
|
+
...props,
|
|
192
|
+
children: [
|
|
193
|
+
children,
|
|
194
|
+
showCloseButton && /* @__PURE__ */ jsx3(
|
|
195
|
+
SheetPrimitive.Close,
|
|
196
|
+
{
|
|
197
|
+
"data-slot": "sheet-close",
|
|
198
|
+
render: /* @__PURE__ */ jsxs2(
|
|
199
|
+
Button,
|
|
200
|
+
{
|
|
201
|
+
variant: "ghost",
|
|
202
|
+
className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
|
|
203
|
+
size: "icon-sm",
|
|
204
|
+
children: [
|
|
205
|
+
/* @__PURE__ */ jsx3(XIcon, {}),
|
|
206
|
+
/* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
)
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
) })
|
|
215
|
+
] });
|
|
216
|
+
}
|
|
217
|
+
function SheetHeader({ className, ...props }) {
|
|
218
|
+
return /* @__PURE__ */ jsx3(
|
|
219
|
+
"div",
|
|
220
|
+
{
|
|
221
|
+
"data-slot": "sheet-header",
|
|
222
|
+
className: cn(
|
|
223
|
+
"flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2",
|
|
224
|
+
className
|
|
225
|
+
),
|
|
226
|
+
...props
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
function SheetFooter({ className, ...props }) {
|
|
231
|
+
return /* @__PURE__ */ jsx3(
|
|
232
|
+
"div",
|
|
233
|
+
{
|
|
234
|
+
"data-slot": "sheet-footer",
|
|
235
|
+
className: cn(
|
|
236
|
+
"mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4",
|
|
237
|
+
className
|
|
238
|
+
),
|
|
239
|
+
...props
|
|
240
|
+
}
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
function SheetTitle({ className, ...props }) {
|
|
244
|
+
return /* @__PURE__ */ jsx3(
|
|
245
|
+
SheetPrimitive.Title,
|
|
246
|
+
{
|
|
247
|
+
"data-slot": "sheet-title",
|
|
248
|
+
className: cn(
|
|
249
|
+
"font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5",
|
|
250
|
+
className
|
|
251
|
+
),
|
|
252
|
+
...props
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
}
|
|
256
|
+
function SheetDescription({
|
|
257
|
+
className,
|
|
258
|
+
...props
|
|
259
|
+
}) {
|
|
260
|
+
return /* @__PURE__ */ jsx3(
|
|
261
|
+
SheetPrimitive.Description,
|
|
262
|
+
{
|
|
263
|
+
"data-slot": "sheet-description",
|
|
264
|
+
className: cn(
|
|
265
|
+
"text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs",
|
|
266
|
+
className
|
|
267
|
+
),
|
|
268
|
+
...props
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
export {
|
|
273
|
+
Sheet,
|
|
274
|
+
SheetClose,
|
|
275
|
+
SheetContent,
|
|
276
|
+
SheetDescription,
|
|
277
|
+
SheetFooter,
|
|
278
|
+
SheetHeader,
|
|
279
|
+
SheetTitle,
|
|
280
|
+
SheetTrigger
|
|
281
|
+
};
|
|
282
|
+
//# sourceMappingURL=sheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/sheet.tsx","../src/lib/cn.ts","../src/components/ui/button.tsx","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { cva } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"./button\";\nimport { type ComponentSize, SizeProvider } from \"./size-context\";\n\ntype SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n\treturn <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n\treturn <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n\treturn <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n\treturn <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n\treturn (\n\t\t<SheetPrimitive.Backdrop\n\t\t\tdata-slot=\"sheet-overlay\"\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst sheetContentVariants = cva(\n\t\"group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]\",\n\t\t\t\tmd: \"sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]\",\n\t\t\t\tlg: \"sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]\",\n\t\t\t\tfullscreen:\n\t\t\t\t\t\"sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = SheetPrimitive.Popup.Props & {\n\tside?: SheetSide;\n\tshowCloseButton?: boolean;\n} & (\n\t\t| {\n\t\t\t\tside: \"top\" | \"bottom\";\n\t\t\t\tsize?: \"fullscreen\";\n\t\t }\n\t\t| {\n\t\t\t\tside?: \"left\" | \"right\";\n\t\t\t\tsize?: \"sm\" | \"md\" | \"lg\";\n\t\t }\n\t);\n\nfunction SheetContent({\n\tclassName,\n\tchildren,\n\tside = \"left\",\n\tsize = \"md\",\n\tshowCloseButton = true,\n\t...props\n}: SheetContentProps) {\n\tconst resolvedSize =\n\t\tside === \"top\" || side === \"bottom\"\n\t\t\t? \"fullscreen\"\n\t\t\t: size !== \"fullscreen\"\n\t\t\t\t? size\n\t\t\t\t: \"md\";\n\tconst contentSize: ComponentSize =\n\t\tresolvedSize === \"fullscreen\" ? \"lg\" : resolvedSize;\n\n\treturn (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SizeProvider size={contentSize}>\n\t\t\t\t<SheetPrimitive.Popup\n\t\t\t\t\tdata-slot=\"sheet-content\"\n\t\t\t\t\tdata-side={side}\n\t\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tsheetContentVariants({ size: resolvedSize }),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<SheetPrimitive.Close\n\t\t\t\t\t\t\tdata-slot=\"sheet-close\"\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tclassName=\"absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4\"\n\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SheetPrimitive.Popup>\n\t\t\t</SizeProvider>\n\t\t</SheetPortal>\n\t);\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sheet-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sheet-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n\treturn (\n\t\t<SheetPrimitive.Title\n\t\t\tdata-slot=\"sheet-title\"\n\t\t\tclassName={cn(\n\t\t\t\t\"font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetDescription({\n\tclassName,\n\t...props\n}: SheetPrimitive.Description.Props) {\n\treturn (\n\t\t<SheetPrimitive.Description\n\t\t\tdata-slot=\"sheet-description\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tSheet,\n\tSheetTrigger,\n\tSheetClose,\n\tSheetContent,\n\tSheetHeader,\n\tSheetFooter,\n\tSheetTitle,\n\tSheetDescription,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useComponentSize } from \"./size-context\";\n\nconst buttonVariants = cva(\n\t\"group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary:\n\t\t\t\t\t\"bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed\",\n\t\t\t\t\"primary-outline\":\n\t\t\t\t\t\"border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand\",\n\t\t\t\t\"secondary-outline\":\n\t\t\t\t\t\"border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle\",\n\t\t\t\ttertiary:\n\t\t\t\t\t\"bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed\",\n\t\t\t\t\"tertiary-outline\":\n\t\t\t\t\t\"border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised\",\n\t\t\t\tghost:\n\t\t\t\t\t\"bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised\",\n\t\t\t\tdanger:\n\t\t\t\t\t\"bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed\",\n\t\t\t\t\"glass-overlay\": \"bg-surface-glass-overlay-button text-fg-on-brand\",\n\t\t\t\t\"link-brand\":\n\t\t\t\t\t\"border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70\",\n\t\t\t\t\"link-neutral\":\n\t\t\t\t\t\"border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\tmd: \"h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n\t\t\t\tlg: \"h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t\txl: \"h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5\",\n\t\t\t\ticon: \"size-10\",\n\t\t\t\t\"icon-xs\": \"size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3\",\n\t\t\t\t\"icon-sm\": \"size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\t\"icon-lg\":\n\t\t\t\t\t\"size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t\t\"icon-xl\": \"size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"primary\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nfunction Button({\n\tclassName,\n\tvariant = \"primary\",\n\tsize,\n\tisLoading = false,\n\tchildren,\n\tdisabled = false,\n\t...props\n}: ButtonPrimitive.Props &\n\tVariantProps<typeof buttonVariants> & { isLoading?: boolean }) {\n\tconst inheritedSize = useComponentSize();\n\tconst resolvedSize = size ?? inheritedSize;\n\tconst _disabled = disabled || isLoading;\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tdata-slot=\"button\"\n\t\t\tclassName={cn(buttonVariants({ variant, size: resolvedSize, className }))}\n\t\t\tdisabled={_disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isLoading && <Loader className=\"size-4 animate-spin\" />} {children}\n\t\t</ButtonPrimitive>\n\t);\n}\n\ntype ButtonLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> &\n\tVariantProps<typeof buttonVariants> & {\n\t\tdisabled?: boolean;\n\t\thref: string;\n\t};\n\nfunction ButtonLink({\n\tclassName,\n\thref,\n\tvariant = \"primary\",\n\tsize,\n\tdisabled = false,\n\tonClick,\n\t...props\n}: ButtonLinkProps) {\n\tconst inheritedSize = useComponentSize();\n\tconst resolvedSize: ButtonSize = size ?? inheritedSize;\n\n\treturn (\n\t\t<a\n\t\t\tdata-slot=\"button-link\"\n\t\t\thref={href}\n\t\t\taria-disabled={disabled}\n\t\t\ttabIndex={disabled ? -1 : props.tabIndex}\n\t\t\tclassName={cn(buttonVariants({ variant, size: resolvedSize, className }))}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (disabled) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Button, ButtonLink, buttonVariants };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":";AAEA,SAAS,UAAU,sBAAsB;AACzC,SAAS,OAAAA,YAAW;AACpB,SAAS,aAAa;;;ACJtB,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;AC/BA,SAAS,UAAU,uBAAuB;AAC1C,SAAS,WAA8B;AACvC,SAAS,cAAc;;;ACAvB,SAAS,eAA+B,kBAAkB;AAcjD;AAVT,IAAM,cAAc,cAAyC,MAAS;AAEtE,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AACD,GAGG;AACF,MAAI,CAAC,MAAM;AACV,WAAO,gCAAG,UAAS;AAAA,EACpB;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACrD;AAEA,SAAS,iBACR,MACA,WAA0B,MACzB;AACD,QAAM,gBAAgB,WAAW,WAAW;AAC5C,SAAO,QAAQ,iBAAiB;AACjC;;;AD0CE,SAMe,OAAAC,MANf;AA/DF,IAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,SACC;AAAA,QACD,mBACC;AAAA,QACD,WACC;AAAA,QACD,qBACC;AAAA,QACD,UACC;AAAA,QACD,oBACC;AAAA,QACD,OACC;AAAA,QACD,QACC;AAAA,QACD,iBAAiB;AAAA,QACjB,cACC;AAAA,QACD,gBACC;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WACC;AAAA,QACD,WAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,MACT,MAAM;AAAA,IACP;AAAA,EACD;AACD;AAIA,SAAS,OAAO;AAAA,EACf;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACJ,GACgE;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,eAAe,QAAQ;AAC7B,QAAM,YAAY,YAAY;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,cAAc,UAAU,CAAC,CAAC;AAAA,MACxE,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,qBAAa,gBAAAA,KAAC,UAAO,WAAU,uBAAsB;AAAA,QAAG;AAAA,QAAE;AAAA;AAAA;AAAA,EAC5D;AAEF;;;AFlEQ,gBAAAC,MAgGA,QAAAC,aAhGA;AADR,SAAS,MAAM,EAAE,GAAG,MAAM,GAA8B;AACvD,SAAO,gBAAAD,KAAC,eAAe,MAAf,EAAoB,aAAU,SAAS,GAAG,OAAO;AAC1D;AAEA,SAAS,aAAa,EAAE,GAAG,MAAM,GAAiC;AACjE,SAAO,gBAAAA,KAAC,eAAe,SAAf,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACrE;AAEA,SAAS,WAAW,EAAE,GAAG,MAAM,GAA+B;AAC7D,SAAO,gBAAAA,KAAC,eAAe,OAAf,EAAqB,aAAU,eAAe,GAAG,OAAO;AACjE;AAEA,SAAS,YAAY,EAAE,GAAG,MAAM,GAAgC;AAC/D,SAAO,gBAAAA,KAAC,eAAe,QAAf,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACnE;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC7E,SACC,gBAAAA;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,uBAAuBE;AAAA,EAC5B;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,YACC;AAAA,MACF;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,MAAM;AAAA,IACP;AAAA,EACD;AACD;AAgBA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,GAAG;AACJ,GAAsB;AACrB,QAAM,eACL,SAAS,SAAS,SAAS,WACxB,eACA,SAAS,eACR,OACA;AACL,QAAM,cACL,iBAAiB,eAAe,OAAO;AAExC,SACC,gBAAAD,MAAC,eACA;AAAA,oBAAAD,KAAC,gBAAa;AAAA,IACd,gBAAAA,KAAC,gBAAa,MAAM,aACnB,0BAAAC;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACA,aAAU;AAAA,QACV,aAAW;AAAA,QACX,aAAW;AAAA,QACX,WAAW;AAAA,UACV,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAAA,UAC3C;AAAA,QACD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,mBACA,gBAAAD;AAAA,YAAC,eAAe;AAAA,YAAf;AAAA,cACA,aAAU;AAAA,cACV,QACC,gBAAAC;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,MAAK;AAAA,kBAEL;AAAA,oCAAAD,KAAC,SAAM;AAAA,oBACP,gBAAAA,KAAC,UAAK,WAAU,WAAU,mBAAK;AAAA;AAAA;AAAA,cAChC;AAAA;AAAA,UAEF;AAAA;AAAA;AAAA,IAEF,GACD;AAAA,KACD;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACC,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACC,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA+B;AACxE,SACC,gBAAAA;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,iBAAiB;AAAA,EACzB;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SACC,gBAAAA;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;","names":["cva","jsx","jsx","jsxs","cva"]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { Button } from './button.js';
|
|
6
|
+
import { Input } from './input.js';
|
|
7
|
+
import { Separator } from './separator.js';
|
|
8
|
+
import { TooltipContent } from './tooltip.js';
|
|
9
|
+
import '@base-ui/react/button';
|
|
10
|
+
import './input-size-context.js';
|
|
11
|
+
import '@base-ui/react/separator';
|
|
12
|
+
import '@base-ui/react/popover';
|
|
13
|
+
|
|
14
|
+
type SidebarContextProps = {
|
|
15
|
+
state: "expanded" | "collapsed";
|
|
16
|
+
open: boolean;
|
|
17
|
+
setOpen: (open: boolean) => void;
|
|
18
|
+
openMobile: boolean;
|
|
19
|
+
setOpenMobile: (open: boolean) => void;
|
|
20
|
+
isMobile: boolean;
|
|
21
|
+
toggleSidebar: () => void;
|
|
22
|
+
};
|
|
23
|
+
declare function useSidebar(): SidebarContextProps;
|
|
24
|
+
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
|
|
25
|
+
defaultOpen?: boolean;
|
|
26
|
+
open?: boolean;
|
|
27
|
+
onOpenChange?: (open: boolean) => void;
|
|
28
|
+
}): React.JSX.Element;
|
|
29
|
+
declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
|
|
30
|
+
side?: "left" | "right";
|
|
31
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
32
|
+
collapsible?: "offcanvas" | "icon" | "none";
|
|
33
|
+
}): React.JSX.Element;
|
|
34
|
+
declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
|
|
35
|
+
declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
|
|
36
|
+
declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
|
|
37
|
+
declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
|
|
38
|
+
declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
39
|
+
declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
40
|
+
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
41
|
+
declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
42
|
+
declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
43
|
+
declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
44
|
+
declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
45
|
+
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
46
|
+
declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
47
|
+
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
48
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
49
|
+
variant?: "default" | "outline" | null | undefined;
|
|
50
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
51
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
52
|
+
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
|
|
53
|
+
isActive?: boolean;
|
|
54
|
+
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
55
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
|
|
56
|
+
declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
|
|
57
|
+
showOnHover?: boolean;
|
|
58
|
+
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
59
|
+
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
60
|
+
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
|
|
61
|
+
showIcon?: boolean;
|
|
62
|
+
}): React.JSX.Element;
|
|
63
|
+
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
64
|
+
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
65
|
+
declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
|
|
66
|
+
size?: "sm" | "md";
|
|
67
|
+
isActive?: boolean;
|
|
68
|
+
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
69
|
+
|
|
70
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
|