@waveso/ui 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +72 -52
- package/dist/accordion.d.ts +14 -0
- package/dist/accordion.js +81 -0
- package/dist/accordion.js.map +1 -0
- package/dist/alert.d.ts +8 -4
- package/dist/alert.js.map +1 -1
- package/dist/aspect-ratio.d.ts +10 -0
- package/dist/aspect-ratio.js +18 -0
- package/dist/aspect-ratio.js.map +1 -0
- package/dist/autocomplete.d.ts +48 -0
- package/dist/autocomplete.js +222 -0
- package/dist/autocomplete.js.map +1 -0
- package/dist/avatar.d.ts +13 -7
- package/dist/avatar.js.map +1 -1
- package/dist/badge.d.ts +3 -2
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/breadcrumb.d.ts +20 -0
- package/dist/breadcrumb.js +123 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/button-group.d.ts +19 -0
- package/dist/button-group.js +81 -0
- package/dist/button-group.js.map +1 -0
- package/dist/card.d.ts +15 -8
- package/dist/card.js.map +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chunk-45VQAWIM.js +228 -0
- package/dist/chunk-45VQAWIM.js.map +1 -0
- package/dist/chunk-6Y7LPQMO.js +11 -0
- package/dist/chunk-6Y7LPQMO.js.map +1 -0
- package/dist/chunk-7F4MPMLJ.js +17 -0
- package/dist/chunk-7F4MPMLJ.js.map +1 -0
- package/dist/chunk-7OIQ6YBK.js +66 -0
- package/dist/chunk-7OIQ6YBK.js.map +1 -0
- package/dist/chunk-D5XPEJ6T.js +36 -0
- package/dist/chunk-D5XPEJ6T.js.map +1 -0
- package/dist/chunk-DIGOLJIR.js +105 -0
- package/dist/chunk-DIGOLJIR.js.map +1 -0
- package/dist/chunk-IQ7YQ5XA.js +141 -0
- package/dist/chunk-IQ7YQ5XA.js.map +1 -0
- package/dist/chunk-NCHHHWTB.js +85 -0
- package/dist/chunk-NCHHHWTB.js.map +1 -0
- package/dist/chunk-PVX4VQFJ.js +143 -0
- package/dist/chunk-PVX4VQFJ.js.map +1 -0
- package/dist/chunk-QFSEK4M6.js +22 -0
- package/dist/chunk-QFSEK4M6.js.map +1 -0
- package/dist/chunk-QRW37LRP.js +25 -0
- package/dist/chunk-QRW37LRP.js.map +1 -0
- package/dist/chunk-RPQHL6C5.js +26 -0
- package/dist/chunk-RPQHL6C5.js.map +1 -0
- package/dist/chunk-YTSQQTSF.js +44 -0
- package/dist/chunk-YTSQQTSF.js.map +1 -0
- package/dist/chunk-ZZZH3JGW.js +23 -0
- package/dist/chunk-ZZZH3JGW.js.map +1 -0
- package/dist/collapsible.d.ts +12 -0
- package/dist/collapsible.js +16 -0
- package/dist/collapsible.js.map +1 -0
- package/dist/combobox.d.ts +48 -0
- package/dist/combobox.js +281 -0
- package/dist/combobox.js.map +1 -0
- package/dist/context-menu.d.ts +47 -0
- package/dist/context-menu.js +193 -0
- package/dist/context-menu.js.map +1 -0
- package/dist/dialog.js +1 -1
- package/dist/direction.d.ts +1 -0
- package/dist/direction.js +3 -0
- package/dist/direction.js.map +1 -0
- package/dist/drawer.d.ts +29 -0
- package/dist/drawer.js +6 -0
- package/dist/drawer.js.map +1 -0
- package/dist/encrypted-text.d.ts +16 -0
- package/dist/encrypted-text.js +141 -0
- package/dist/encrypted-text.js.map +1 -0
- package/dist/field.d.ts +22 -0
- package/dist/field.js +4 -0
- package/dist/field.js.map +1 -0
- package/dist/form.d.ts +80 -0
- package/dist/form.js +108 -0
- package/dist/form.js.map +1 -0
- package/dist/hooks/use-mobile.d.ts +6 -1
- package/dist/hooks/use-mobile.js +1 -18
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/infinite-scroll.d.ts +19 -0
- package/dist/infinite-scroll.js +102 -0
- package/dist/infinite-scroll.js.map +1 -0
- package/dist/input-group.d.ts +29 -0
- package/dist/input-group.js +7 -0
- package/dist/input-group.js.map +1 -0
- package/dist/input-otp.d.ts +18 -0
- package/dist/input-otp.js +79 -0
- package/dist/input-otp.js.map +1 -0
- package/dist/input.d.ts +2 -1
- package/dist/input.js +2 -20
- package/dist/input.js.map +1 -1
- package/dist/item.d.ts +37 -0
- package/dist/item.js +181 -0
- package/dist/item.js.map +1 -0
- package/dist/kbd.d.ts +8 -0
- package/dist/kbd.js +30 -0
- package/dist/kbd.js.map +1 -0
- package/dist/label.d.ts +2 -1
- package/dist/label.js.map +1 -1
- package/dist/masonry.d.ts +17 -0
- package/dist/masonry.js +235 -0
- package/dist/masonry.js.map +1 -0
- package/dist/menu.d.ts +47 -0
- package/dist/menu.js +5 -0
- package/dist/menu.js.map +1 -0
- package/dist/menubar.d.ts +40 -0
- package/dist/menubar.js +84 -0
- package/dist/menubar.js.map +1 -0
- package/dist/pagination.d.ts +29 -0
- package/dist/pagination.js +120 -0
- package/dist/pagination.js.map +1 -0
- package/dist/popover.d.ts +24 -0
- package/dist/popover.js +105 -0
- package/dist/popover.js.map +1 -0
- package/dist/preview-card.d.ts +17 -0
- package/dist/preview-card.js +70 -0
- package/dist/preview-card.js.map +1 -0
- package/dist/radio-group.d.ts +12 -0
- package/dist/radio-group.js +28 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/radio.d.ts +10 -0
- package/dist/radio.js +4 -0
- package/dist/radio.js.map +1 -0
- package/dist/scroll-area.d.ts +10 -0
- package/dist/scroll-area.js +59 -0
- package/dist/scroll-area.js.map +1 -0
- package/dist/select.d.ts +36 -0
- package/dist/select.js +208 -0
- package/dist/select.js.map +1 -0
- package/dist/separator.js +2 -24
- package/dist/separator.js.map +1 -1
- package/dist/sidebar.d.ts +112 -0
- package/dist/sidebar.js +619 -0
- package/dist/sidebar.js.map +1 -0
- package/dist/skeleton.d.ts +2 -1
- package/dist/skeleton.js +2 -15
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.d.ts +10 -0
- package/dist/slider.js +70 -0
- package/dist/slider.js.map +1 -0
- package/dist/spinner.d.ts +2 -1
- package/dist/spinner.js +3 -9
- package/dist/spinner.js.map +1 -1
- package/dist/styles.css +196 -0
- package/dist/table.d.ts +21 -0
- package/dist/table.js +106 -0
- package/dist/table.js.map +1 -0
- package/dist/tabs.d.ts +20 -0
- package/dist/tabs.js +82 -0
- package/dist/tabs.js.map +1 -0
- package/dist/textarea.js +2 -23
- package/dist/textarea.js.map +1 -1
- package/dist/toast.d.ts +57 -0
- package/dist/toast.js +239 -0
- package/dist/toast.js.map +1 -0
- package/dist/toggle-group.d.ts +17 -0
- package/dist/toggle-group.js +78 -0
- package/dist/toggle-group.js.map +1 -0
- package/dist/toggle.d.ts +14 -0
- package/dist/toggle.js +4 -0
- package/dist/toggle.js.map +1 -0
- package/dist/tooltip.d.ts +21 -0
- package/dist/tooltip.js +4 -0
- package/dist/tooltip.js.map +1 -0
- package/package.json +10 -3
- package/dist/chunk-L3UIJEIQ.js +0 -41
- package/dist/chunk-L3UIJEIQ.js.map +0 -1
package/dist/tabs.js
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
2
|
+
import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var tabsListVariants = cva(
|
|
7
|
+
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: "bg-muted",
|
|
12
|
+
line: "gap-1 bg-transparent"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: "default"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
function Tabs({
|
|
21
|
+
className,
|
|
22
|
+
orientation = "horizontal",
|
|
23
|
+
...props
|
|
24
|
+
}) {
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
|
+
Tabs$1.Root,
|
|
27
|
+
{
|
|
28
|
+
"data-slot": "tabs",
|
|
29
|
+
orientation,
|
|
30
|
+
className: cn(
|
|
31
|
+
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
|
|
32
|
+
className
|
|
33
|
+
),
|
|
34
|
+
...props
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
function TabsList({
|
|
39
|
+
className,
|
|
40
|
+
variant = "default",
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
Tabs$1.List,
|
|
45
|
+
{
|
|
46
|
+
"data-slot": "tabs-list",
|
|
47
|
+
"data-variant": variant,
|
|
48
|
+
className: cn(tabsListVariants({ variant }), className),
|
|
49
|
+
...props
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
function TabsTrigger({ className, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
Tabs$1.Tab,
|
|
56
|
+
{
|
|
57
|
+
"data-slot": "tabs-trigger",
|
|
58
|
+
className: cn(
|
|
59
|
+
"text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
60
|
+
"data-active:bg-background data-active:text-foreground data-active:shadow-sm dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30",
|
|
61
|
+
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
|
62
|
+
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
...props
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
function TabsContent({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(
|
|
71
|
+
Tabs$1.Panel,
|
|
72
|
+
{
|
|
73
|
+
"data-slot": "tabs-content",
|
|
74
|
+
className: cn("flex-1 text-sm outline-none", className),
|
|
75
|
+
...props
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
81
|
+
//# sourceMappingURL=tabs.js.map
|
|
82
|
+
//# sourceMappingURL=tabs.js.map
|
package/dist/tabs.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tabs.tsx"],"names":["TabsPrimitive"],"mappings":";;;;;AAWA,IAAM,gBAAA,GAAmB,GAAA;AAAA,EACvB,mRAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,UAAA;AAAA,QACT,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAgBA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA,CAAc,IAAA;AAAA,IAAd;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,8DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA,CAAc,IAAA;AAAA,IAAd;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAqB;AAC9D,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA,CAAc,GAAA;AAAA,IAAd;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yrBAAA;AAAA,QACA,yKAAA;AAAA,QACA,2TAAA;AAAA,QACA,0dAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAqB;AAC9D,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA,CAAc,KAAA;AAAA,IAAd;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"tabs.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\n// --- CVA variants ---\n\nconst tabsListVariants = cva(\n \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\n// --- Types ---\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\ntype TabsListBaseProps = React.ComponentProps<typeof TabsPrimitive.List>\n\ntype TabsListProps = TabsListBaseProps & VariantProps<typeof tabsListVariants>\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>\n\n// --- Components ---\n\nfunction Tabs({\n className,\n orientation = \"horizontal\",\n ...props\n}: TabsProps) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n orientation={orientation}\n className={cn(\n \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: TabsListProps) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n data-variant={variant}\n className={cn(tabsListVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n <TabsPrimitive.Tab\n data-slot=\"tabs-trigger\"\n className={cn(\n \"text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n \"data-active:bg-background data-active:text-foreground data-active:shadow-sm dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30\",\n \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\n <TabsPrimitive.Panel\n data-slot=\"tabs-content\"\n className={cn(\"flex-1 text-sm outline-none\", className)}\n {...props}\n />\n )\n}\n\n// --- Exports ---\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n}\n"]}
|
package/dist/textarea.js
CHANGED
|
@@ -1,25 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
function Textarea({ className, onChange, onValueChange, ...props }) {
|
|
5
|
-
function handleChange(e) {
|
|
6
|
-
onChange?.(e);
|
|
7
|
-
onValueChange?.(e.target.value);
|
|
8
|
-
}
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
10
|
-
"textarea",
|
|
11
|
-
{
|
|
12
|
-
"data-slot": "textarea",
|
|
13
|
-
className: cn(
|
|
14
|
-
"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none disabled:bg-input/50 disabled:cursor-not-allowed dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
|
|
15
|
-
className
|
|
16
|
-
),
|
|
17
|
-
onChange: handleChange,
|
|
18
|
-
...props
|
|
19
|
-
}
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export { Textarea };
|
|
1
|
+
export { Textarea } from './chunk-QRW37LRP.js';
|
|
2
|
+
import './chunk-76UQO56T.js';
|
|
24
3
|
//# sourceMappingURL=textarea.js.map
|
|
25
4
|
//# sourceMappingURL=textarea.js.map
|
package/dist/textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"textarea.js"}
|
package/dist/toast.d.ts
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { Toast as Toast$1 } from '@base-ui/react/toast';
|
|
6
|
+
|
|
7
|
+
declare const toastRootClass = "bg-popover text-popover-foreground ring-foreground/10 rounded-lg p-4 text-sm shadow-lg ring-1 outline-none select-none";
|
|
8
|
+
declare const toastIconVariants: (props?: ({
|
|
9
|
+
type?: "success" | "loading" | "warning" | "error" | "info" | null | undefined;
|
|
10
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
+
declare const toastViewportVariants: (props?: ({
|
|
12
|
+
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
|
|
13
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
14
|
+
type ToastType = "loading" | "success" | "info" | "warning" | "error";
|
|
15
|
+
type ToastOptions = {
|
|
16
|
+
title?: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
type?: ToastType;
|
|
19
|
+
timeout?: number;
|
|
20
|
+
priority?: "low" | "high";
|
|
21
|
+
actionProps?: React.ComponentPropsWithoutRef<"button">;
|
|
22
|
+
onClose?: () => void;
|
|
23
|
+
onRemove?: () => void;
|
|
24
|
+
};
|
|
25
|
+
type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
26
|
+
type ToasterProps = {
|
|
27
|
+
position?: ToasterPosition;
|
|
28
|
+
limit?: number;
|
|
29
|
+
timeout?: number;
|
|
30
|
+
};
|
|
31
|
+
type ToastProps = React.ComponentProps<typeof Toast$1.Root>;
|
|
32
|
+
type ToastTitleProps = React.ComponentProps<typeof Toast$1.Title>;
|
|
33
|
+
type ToastDescriptionProps = React.ComponentProps<typeof Toast$1.Description>;
|
|
34
|
+
type ToastActionProps = React.ComponentProps<typeof Toast$1.Action>;
|
|
35
|
+
type ToastCloseProps = React.ComponentProps<typeof Toast$1.Close>;
|
|
36
|
+
declare const toastManager: _base_ui_react.ToastManager<any>;
|
|
37
|
+
declare const toast: ((titleOrOptions: string | ToastOptions) => string) & {
|
|
38
|
+
success: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
39
|
+
error: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
40
|
+
warning: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
41
|
+
info: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
42
|
+
loading: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
43
|
+
dismiss: (id: string) => void;
|
|
44
|
+
update: (id: string, updates: Partial<ToastOptions>) => void;
|
|
45
|
+
promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: _base_ui_react.ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
|
|
46
|
+
};
|
|
47
|
+
declare function ToastIcon({ type }: {
|
|
48
|
+
type?: ToastType;
|
|
49
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
50
|
+
declare function Toast({ className, ...props }: ToastProps): react_jsx_runtime.JSX.Element;
|
|
51
|
+
declare function ToastTitle({ className, ...props }: ToastTitleProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare function ToastDescription({ className, ...props }: ToastDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
declare function ToastAction({ className, ...props }: ToastActionProps): react_jsx_runtime.JSX.Element;
|
|
54
|
+
declare function ToastClose({ className, children, ...props }: ToastCloseProps): react_jsx_runtime.JSX.Element;
|
|
55
|
+
declare function Toaster({ position, limit, timeout }: ToasterProps): react_jsx_runtime.JSX.Element;
|
|
56
|
+
|
|
57
|
+
export { Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, type ToastOptions, ToastTitle, type ToastType, Toaster, type ToasterPosition, type ToasterProps, toast, toastIconVariants, toastManager, toastRootClass, toastViewportVariants };
|
package/dist/toast.js
ADDED
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import { ErrorCircleIcon, AlertTriangleIcon, InfoCircleIcon, SuccessCircleIcon, LoaderIcon, CloseIcon } from './chunk-DIGOLJIR.js';
|
|
2
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
3
|
+
import { Toast as Toast$1 } from '@base-ui/react/toast';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var toastRootClass = "bg-popover text-popover-foreground ring-foreground/10 rounded-lg p-4 text-sm shadow-lg ring-1 outline-none select-none";
|
|
8
|
+
var toastIconVariants = cva(
|
|
9
|
+
"mt-0.5 size-4 shrink-0",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
type: {
|
|
13
|
+
loading: "text-muted-foreground animate-spin",
|
|
14
|
+
success: "text-emerald-500",
|
|
15
|
+
info: "text-blue-500",
|
|
16
|
+
warning: "text-amber-500",
|
|
17
|
+
error: "text-red-500"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
var toastViewportVariants = cva(
|
|
23
|
+
"fixed z-[100] flex w-full outline-none sm:max-w-sm",
|
|
24
|
+
{
|
|
25
|
+
variants: {
|
|
26
|
+
position: {
|
|
27
|
+
"top-left": "top-4 left-4",
|
|
28
|
+
"top-center": "top-4 right-0 left-0 mx-auto",
|
|
29
|
+
"top-right": "top-4 right-4",
|
|
30
|
+
"bottom-left": "bottom-4 left-4",
|
|
31
|
+
"bottom-center": "bottom-4 right-0 left-0 mx-auto",
|
|
32
|
+
"bottom-right": "bottom-4 right-4"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
position: "bottom-right"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
var toastManager = Toast$1.createToastManager();
|
|
41
|
+
var toast = Object.assign(
|
|
42
|
+
(titleOrOptions) => {
|
|
43
|
+
const options = typeof titleOrOptions === "string" ? { title: titleOrOptions } : titleOrOptions;
|
|
44
|
+
return toastManager.add(options);
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
success: (title, options) => toastManager.add({ ...options, type: "success", title }),
|
|
48
|
+
error: (title, options) => toastManager.add({ ...options, type: "error", title }),
|
|
49
|
+
warning: (title, options) => toastManager.add({ ...options, type: "warning", title }),
|
|
50
|
+
info: (title, options) => toastManager.add({ ...options, type: "info", title }),
|
|
51
|
+
loading: (title, options) => toastManager.add({
|
|
52
|
+
...options,
|
|
53
|
+
type: "loading",
|
|
54
|
+
title,
|
|
55
|
+
timeout: options?.timeout ?? 0
|
|
56
|
+
}),
|
|
57
|
+
dismiss: (id) => toastManager.close(id),
|
|
58
|
+
update: (id, updates) => toastManager.update(id, updates),
|
|
59
|
+
promise: toastManager.promise.bind(toastManager)
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
var iconMap = {
|
|
63
|
+
loading: LoaderIcon,
|
|
64
|
+
success: SuccessCircleIcon,
|
|
65
|
+
info: InfoCircleIcon,
|
|
66
|
+
warning: AlertTriangleIcon,
|
|
67
|
+
error: ErrorCircleIcon
|
|
68
|
+
};
|
|
69
|
+
function ToastIcon({ type }) {
|
|
70
|
+
if (!type) return null;
|
|
71
|
+
const Icon = iconMap[type];
|
|
72
|
+
return /* @__PURE__ */ jsx(Icon, { className: cn(toastIconVariants({ type })) });
|
|
73
|
+
}
|
|
74
|
+
function Toast({ className, ...props }) {
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
Toast$1.Root,
|
|
77
|
+
{
|
|
78
|
+
"data-slot": "toast",
|
|
79
|
+
className: cn(toastRootClass, className),
|
|
80
|
+
...props
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
function ToastBody({ className, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
"data-slot": "toast-body",
|
|
89
|
+
className: cn("flex flex-1 flex-col gap-1", className),
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
function ToastTitle({ className, ...props }) {
|
|
95
|
+
return /* @__PURE__ */ jsx(
|
|
96
|
+
Toast$1.Title,
|
|
97
|
+
{
|
|
98
|
+
"data-slot": "toast-title",
|
|
99
|
+
className: cn("text-sm font-medium", className),
|
|
100
|
+
...props
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
function ToastDescription({ className, ...props }) {
|
|
105
|
+
return /* @__PURE__ */ jsx(
|
|
106
|
+
Toast$1.Description,
|
|
107
|
+
{
|
|
108
|
+
"data-slot": "toast-description",
|
|
109
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
110
|
+
...props
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function ToastAction({ className, ...props }) {
|
|
115
|
+
return /* @__PURE__ */ jsx(
|
|
116
|
+
Toast$1.Action,
|
|
117
|
+
{
|
|
118
|
+
"data-slot": "toast-action",
|
|
119
|
+
className: cn(
|
|
120
|
+
"hover:bg-muted inline-flex h-7 items-center rounded-md border px-2.5 text-xs font-medium transition-colors",
|
|
121
|
+
className
|
|
122
|
+
),
|
|
123
|
+
...props
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
function ToastClose({ className, children, ...props }) {
|
|
128
|
+
return /* @__PURE__ */ jsx(
|
|
129
|
+
Toast$1.Close,
|
|
130
|
+
{
|
|
131
|
+
"data-slot": "toast-close",
|
|
132
|
+
className: cn(
|
|
133
|
+
"text-muted-foreground hover:text-foreground shrink-0 rounded-md p-0.5 transition-colors",
|
|
134
|
+
className
|
|
135
|
+
),
|
|
136
|
+
...props,
|
|
137
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
138
|
+
/* @__PURE__ */ jsx(CloseIcon, { className: "size-4" }),
|
|
139
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
140
|
+
] })
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
var STACKING_BASE = [
|
|
145
|
+
// CSS custom properties
|
|
146
|
+
"[--gap:0.5rem]",
|
|
147
|
+
"[--peek:0.5rem]",
|
|
148
|
+
"[--scale:calc(max(0,1-(var(--toast-index)*0.05)))]",
|
|
149
|
+
"[--shrink:calc(1-var(--scale))]",
|
|
150
|
+
"[--height:var(--toast-frontmost-height,var(--toast-height))]",
|
|
151
|
+
// Layout
|
|
152
|
+
"absolute w-full",
|
|
153
|
+
"[z-index:calc(1000-var(--toast-index))]",
|
|
154
|
+
"h-[var(--height)] data-[expanded]:h-[var(--toast-height)]",
|
|
155
|
+
// Depth blur — subtle defocus on behind toasts, cleared on expand
|
|
156
|
+
"[filter:blur(calc(var(--toast-index)*0.4px))]",
|
|
157
|
+
"data-[expanded]:[filter:none]",
|
|
158
|
+
// Expanded (hover)
|
|
159
|
+
"data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))]",
|
|
160
|
+
// Exit — shared
|
|
161
|
+
"data-[ending-style]:opacity-0",
|
|
162
|
+
"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
|
|
163
|
+
"data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
|
|
164
|
+
"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
|
|
165
|
+
"data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
|
|
166
|
+
"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
|
|
167
|
+
"data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
|
|
168
|
+
"data-[limited]:opacity-0",
|
|
169
|
+
"[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,filter_0.5s,height_0.15s]"
|
|
170
|
+
].join(" ");
|
|
171
|
+
var STACKING_TOP = [
|
|
172
|
+
"[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]",
|
|
173
|
+
"top-0 origin-top",
|
|
174
|
+
"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))]",
|
|
175
|
+
"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
|
|
176
|
+
"data-[starting-style]:[transform:translateY(-150%)]",
|
|
177
|
+
"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]"
|
|
178
|
+
].join(" ");
|
|
179
|
+
var STACKING_BOTTOM = [
|
|
180
|
+
"[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]",
|
|
181
|
+
"bottom-0 origin-bottom",
|
|
182
|
+
"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]",
|
|
183
|
+
"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
|
|
184
|
+
"data-[starting-style]:[transform:translateY(150%)]",
|
|
185
|
+
"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]"
|
|
186
|
+
].join(" ");
|
|
187
|
+
var STACKING_TOP_CLASS = `${STACKING_BASE} ${STACKING_TOP}`;
|
|
188
|
+
var STACKING_BOTTOM_CLASS = `${STACKING_BASE} ${STACKING_BOTTOM}`;
|
|
189
|
+
function ToasterContent({ position = "bottom-right" }) {
|
|
190
|
+
const { toasts } = Toast$1.useToastManager();
|
|
191
|
+
const isTop = position.startsWith("top");
|
|
192
|
+
return /* @__PURE__ */ jsx(Toast$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
193
|
+
Toast$1.Viewport,
|
|
194
|
+
{
|
|
195
|
+
"data-slot": "toast-viewport",
|
|
196
|
+
className: cn(toastViewportVariants({ position })),
|
|
197
|
+
children: toasts.map((t) => /* @__PURE__ */ jsx(
|
|
198
|
+
Toast,
|
|
199
|
+
{
|
|
200
|
+
toast: t,
|
|
201
|
+
swipeDirection: isTop ? ["up", "right"] : ["down", "right"],
|
|
202
|
+
className: isTop ? STACKING_TOP_CLASS : STACKING_BOTTOM_CLASS,
|
|
203
|
+
children: /* @__PURE__ */ jsxs(
|
|
204
|
+
Toast$1.Content,
|
|
205
|
+
{
|
|
206
|
+
"data-slot": "toast-content",
|
|
207
|
+
className: "flex items-start gap-3 overflow-hidden transition-opacity duration-250 data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100",
|
|
208
|
+
children: [
|
|
209
|
+
/* @__PURE__ */ jsx(ToastIcon, { type: t.type }),
|
|
210
|
+
/* @__PURE__ */ jsxs(ToastBody, { children: [
|
|
211
|
+
t.title && /* @__PURE__ */ jsx(ToastTitle, { children: t.title }),
|
|
212
|
+
t.description && /* @__PURE__ */ jsx(ToastDescription, { children: t.description }),
|
|
213
|
+
t.actionProps && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(ToastAction, { ...t.actionProps }) })
|
|
214
|
+
] }),
|
|
215
|
+
/* @__PURE__ */ jsx(ToastClose, {})
|
|
216
|
+
]
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
},
|
|
220
|
+
t.id
|
|
221
|
+
))
|
|
222
|
+
}
|
|
223
|
+
) });
|
|
224
|
+
}
|
|
225
|
+
function Toaster({ position, limit, timeout }) {
|
|
226
|
+
return /* @__PURE__ */ jsx(
|
|
227
|
+
Toast$1.Provider,
|
|
228
|
+
{
|
|
229
|
+
toastManager,
|
|
230
|
+
limit,
|
|
231
|
+
timeout,
|
|
232
|
+
children: /* @__PURE__ */ jsx(ToasterContent, { position })
|
|
233
|
+
}
|
|
234
|
+
);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
export { Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastTitle, Toaster, toast, toastIconVariants, toastManager, toastRootClass, toastViewportVariants };
|
|
238
|
+
//# sourceMappingURL=toast.js.map
|
|
239
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/toast.tsx"],"names":["ToastPrimitive"],"mappings":"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","file":"toast.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport {\n CloseIcon,\n SuccessCircleIcon,\n InfoCircleIcon,\n AlertTriangleIcon,\n ErrorCircleIcon,\n LoaderIcon,\n} from \"./lib/internal-icons\"\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst toastRootClass =\n \"bg-popover text-popover-foreground ring-foreground/10 rounded-lg p-4 text-sm shadow-lg ring-1 outline-none select-none\"\n\nconst toastIconVariants = cva(\n \"mt-0.5 size-4 shrink-0\",\n {\n variants: {\n type: {\n loading: \"text-muted-foreground animate-spin\",\n success: \"text-emerald-500\",\n info: \"text-blue-500\",\n warning: \"text-amber-500\",\n error: \"text-red-500\",\n },\n },\n }\n)\n\nconst toastViewportVariants = cva(\n \"fixed z-[100] flex w-full outline-none sm:max-w-sm\",\n {\n variants: {\n position: {\n \"top-left\": \"top-4 left-4\",\n \"top-center\": \"top-4 right-0 left-0 mx-auto\",\n \"top-right\": \"top-4 right-4\",\n \"bottom-left\": \"bottom-4 left-4\",\n \"bottom-center\": \"bottom-4 right-0 left-0 mx-auto\",\n \"bottom-right\": \"bottom-4 right-4\",\n },\n },\n defaultVariants: {\n position: \"bottom-right\",\n },\n },\n)\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ToastType = \"loading\" | \"success\" | \"info\" | \"warning\" | \"error\"\n\ntype ToastOptions = {\n title?: string\n description?: string\n type?: ToastType\n timeout?: number\n priority?: \"low\" | \"high\"\n actionProps?: React.ComponentPropsWithoutRef<\"button\">\n onClose?: () => void\n onRemove?: () => void\n}\n\ntype ToasterPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\"\n\ntype ToasterProps = {\n position?: ToasterPosition\n limit?: number\n timeout?: number\n}\n\ntype ToastProps = React.ComponentProps<typeof ToastPrimitive.Root>\ntype ToastTitleProps = React.ComponentProps<typeof ToastPrimitive.Title>\ntype ToastDescriptionProps = React.ComponentProps<typeof ToastPrimitive.Description>\ntype ToastActionProps = React.ComponentProps<typeof ToastPrimitive.Action>\ntype ToastCloseProps = React.ComponentProps<typeof ToastPrimitive.Close>\n\n// ---------------------------------------------------------------------------\n// Toast manager API\n// ---------------------------------------------------------------------------\n\nconst toastManager = ToastPrimitive.createToastManager()\n\nconst toast = Object.assign(\n (titleOrOptions: string | ToastOptions) => {\n const options =\n typeof titleOrOptions === \"string\"\n ? { title: titleOrOptions }\n : titleOrOptions\n return toastManager.add(options)\n },\n {\n success: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"success\", title }),\n\n error: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"error\", title }),\n\n warning: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"warning\", title }),\n\n info: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"info\", title }),\n\n loading: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({\n ...options,\n type: \"loading\",\n title,\n timeout: options?.timeout ?? 0,\n }),\n\n dismiss: (id: string) => toastManager.close(id),\n\n update: (id: string, updates: Partial<ToastOptions>) =>\n toastManager.update(id, updates),\n\n promise: toastManager.promise.bind(toastManager),\n },\n)\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nconst iconMap = {\n loading: LoaderIcon,\n success: SuccessCircleIcon,\n info: InfoCircleIcon,\n warning: AlertTriangleIcon,\n error: ErrorCircleIcon,\n} as const\n\nfunction ToastIcon({ type }: { type?: ToastType }) {\n if (!type) return null\n const Icon = iconMap[type]\n return <Icon className={cn(toastIconVariants({ type }))} />\n}\n\n// ---------------------------------------------------------------------------\n// Toast primitives\n// ---------------------------------------------------------------------------\n\nfunction Toast({ className, ...props }: ToastProps) {\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(toastRootClass, className)}\n {...props}\n />\n )\n}\n\nfunction ToastBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"toast-body\"\n className={cn(\"flex flex-1 flex-col gap-1\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastTitle({ className, ...props }: ToastTitleProps) {\n return (\n <ToastPrimitive.Title\n data-slot=\"toast-title\"\n className={cn(\"text-sm font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastDescription({ className, ...props }: ToastDescriptionProps) {\n return (\n <ToastPrimitive.Description\n data-slot=\"toast-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastAction({ className, ...props }: ToastActionProps) {\n return (\n <ToastPrimitive.Action\n data-slot=\"toast-action\"\n className={cn(\n \"hover:bg-muted inline-flex h-7 items-center rounded-md border px-2.5 text-xs font-medium transition-colors\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ToastClose({ className, children, ...props }: ToastCloseProps) {\n return (\n <ToastPrimitive.Close\n data-slot=\"toast-close\"\n className={cn(\n \"text-muted-foreground hover:text-foreground shrink-0 rounded-md p-0.5 transition-colors\",\n className,\n )}\n {...props}\n >\n {children ?? (\n <>\n <CloseIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </>\n )}\n </ToastPrimitive.Close>\n )\n}\n\n// ---------------------------------------------------------------------------\n// 3D stacking\n// ---------------------------------------------------------------------------\n\n// Shared classes for both top and bottom positions\nconst STACKING_BASE = [\n // CSS custom properties\n \"[--gap:0.5rem]\",\n \"[--peek:0.5rem]\",\n \"[--scale:calc(max(0,1-(var(--toast-index)*0.05)))]\",\n \"[--shrink:calc(1-var(--scale))]\",\n \"[--height:var(--toast-frontmost-height,var(--toast-height))]\",\n // Layout\n \"absolute w-full\",\n \"[z-index:calc(1000-var(--toast-index))]\",\n \"h-[var(--height)] data-[expanded]:h-[var(--toast-height)]\",\n // Depth blur — subtle defocus on behind toasts, cleared on expand\n \"[filter:blur(calc(var(--toast-index)*0.4px))]\",\n \"data-[expanded]:[filter:none]\",\n // Expanded (hover)\n \"data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))]\",\n // Exit — shared\n \"data-[ending-style]:opacity-0\",\n \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[limited]:opacity-0\",\n \"[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,filter_0.5s,height_0.15s]\",\n].join(\" \")\n\n// Direction-specific classes — sign flips for anchor, offset, transform, enter/exit\nconst STACKING_TOP = [\n \"[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]\",\n \"top-0 origin-top\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))]\",\n \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(-150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]\",\n].join(\" \")\n\nconst STACKING_BOTTOM = [\n \"[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]\",\n \"bottom-0 origin-bottom\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]\",\n \"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n].join(\" \")\n\nconst STACKING_TOP_CLASS = `${STACKING_BASE} ${STACKING_TOP}`\nconst STACKING_BOTTOM_CLASS = `${STACKING_BASE} ${STACKING_BOTTOM}`\n\n// ---------------------------------------------------------------------------\n// Toaster\n// ---------------------------------------------------------------------------\n\nfunction ToasterContent({ position = \"bottom-right\" }: Pick<ToasterProps, \"position\">) {\n const { toasts } = ToastPrimitive.useToastManager()\n const isTop = position.startsWith(\"top\")\n\n return (\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n data-slot=\"toast-viewport\"\n className={cn(toastViewportVariants({ position }))}\n >\n {toasts.map((t) => (\n <Toast\n key={t.id}\n toast={t}\n swipeDirection={isTop ? [\"up\", \"right\"] : [\"down\", \"right\"]}\n className={isTop ? STACKING_TOP_CLASS : STACKING_BOTTOM_CLASS}\n >\n <ToastPrimitive.Content\n data-slot=\"toast-content\"\n className=\"flex items-start gap-3 overflow-hidden transition-opacity duration-250 data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\"\n >\n <ToastIcon type={t.type as ToastType | undefined} />\n\n <ToastBody>\n {t.title && <ToastTitle>{t.title}</ToastTitle>}\n {t.description && (\n <ToastDescription>{t.description}</ToastDescription>\n )}\n {t.actionProps && (\n <div className=\"mt-1.5\">\n <ToastAction {...t.actionProps} />\n </div>\n )}\n </ToastBody>\n\n <ToastClose />\n </ToastPrimitive.Content>\n </Toast>\n ))}\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n )\n}\n\nfunction Toaster({ position, limit, timeout }: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n toastManager={toastManager}\n limit={limit}\n timeout={timeout}\n >\n <ToasterContent position={position} />\n </ToastPrimitive.Provider>\n )\n}\n\nexport {\n toastRootClass,\n toastIconVariants,\n toastViewportVariants,\n toastManager,\n toast,\n Toaster,\n Toast,\n ToastIcon,\n ToastTitle,\n ToastDescription,\n ToastAction,\n ToastClose,\n}\n\nexport type {\n ToastType,\n ToastOptions,\n ToasterPosition,\n ToasterProps\n}"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Toggle } from '@base-ui/react/toggle';
|
|
3
|
+
import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import { toggleVariants } from './toggle.js';
|
|
6
|
+
import 'class-variance-authority/types';
|
|
7
|
+
import 'react';
|
|
8
|
+
|
|
9
|
+
type ToggleGroupProps = ToggleGroup$1.Props & VariantProps<typeof toggleVariants> & {
|
|
10
|
+
spacing?: number;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
};
|
|
13
|
+
type ToggleGroupItemProps = Toggle.Props & VariantProps<typeof toggleVariants>;
|
|
14
|
+
declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function ToggleGroupItem({ className, children, variant, size, ...props }: ToggleGroupItemProps): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { toggleVariants } from './chunk-YTSQQTSF.js';
|
|
2
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Toggle } from '@base-ui/react/toggle';
|
|
5
|
+
import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var ToggleGroupContext = React.createContext({
|
|
9
|
+
size: "default",
|
|
10
|
+
variant: "default",
|
|
11
|
+
spacing: 0,
|
|
12
|
+
orientation: "horizontal"
|
|
13
|
+
});
|
|
14
|
+
function ToggleGroup({
|
|
15
|
+
className,
|
|
16
|
+
variant,
|
|
17
|
+
size,
|
|
18
|
+
spacing = 0,
|
|
19
|
+
orientation = "horizontal",
|
|
20
|
+
children,
|
|
21
|
+
...props
|
|
22
|
+
}) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
ToggleGroup$1,
|
|
25
|
+
{
|
|
26
|
+
"data-slot": "toggle-group",
|
|
27
|
+
"data-variant": variant,
|
|
28
|
+
"data-size": size,
|
|
29
|
+
"data-spacing": spacing,
|
|
30
|
+
"data-orientation": orientation,
|
|
31
|
+
style: { "--gap": spacing },
|
|
32
|
+
className: cn(
|
|
33
|
+
"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
...props,
|
|
37
|
+
children: /* @__PURE__ */ jsx(
|
|
38
|
+
ToggleGroupContext.Provider,
|
|
39
|
+
{
|
|
40
|
+
value: { variant, size, spacing, orientation },
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
function ToggleGroupItem({
|
|
48
|
+
className,
|
|
49
|
+
children,
|
|
50
|
+
variant = "default",
|
|
51
|
+
size = "default",
|
|
52
|
+
...props
|
|
53
|
+
}) {
|
|
54
|
+
const context = React.useContext(ToggleGroupContext);
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
Toggle,
|
|
57
|
+
{
|
|
58
|
+
"data-slot": "toggle-group-item",
|
|
59
|
+
"data-variant": context.variant || variant,
|
|
60
|
+
"data-size": context.size || size,
|
|
61
|
+
"data-spacing": context.spacing,
|
|
62
|
+
className: cn(
|
|
63
|
+
"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
|
|
64
|
+
toggleVariants({
|
|
65
|
+
variant: context.variant || variant,
|
|
66
|
+
size: context.size || size
|
|
67
|
+
}),
|
|
68
|
+
className
|
|
69
|
+
),
|
|
70
|
+
...props,
|
|
71
|
+
children
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
77
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
78
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/toggle-group.tsx"],"names":["ToggleGroupPrimitive","TogglePrimitive"],"mappings":";;;;;;;AAwBA,IAAM,qBAA2B,KAAA,CAAA,aAAA,CAAuC;AAAA,EACtE,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,CAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAC,CAAA;AAED,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,WAAA,GAAc,YAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,kBAAA,EAAkB,WAAA;AAAA,MAClB,KAAA,EAAO,EAAE,OAAA,EAAS,OAAA,EAAQ;AAAA,MAC1B,SAAA,EAAW,EAAA;AAAA,QACT,+NAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA,CAAmB,QAAA;AAAA,QAAnB;AAAA,UACC,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,SAAS,WAAA,EAAY;AAAA,UAE5C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,OAAA,GAAgB,iBAAW,kBAAkB,CAAA;AAEnD,EAAA,uBACE,GAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,cAAA,EAAc,QAAQ,OAAA,IAAW,OAAA;AAAA,MACjC,WAAA,EAAW,QAAQ,IAAA,IAAQ,IAAA;AAAA,MAC3B,gBAAc,OAAA,CAAQ,OAAA;AAAA,MACtB,SAAA,EAAW,EAAA;AAAA,QACT,o2BAAA;AAAA,QACA,cAAA,CAAe;AAAA,UACb,OAAA,EAAS,QAAQ,OAAA,IAAW,OAAA;AAAA,UAC5B,IAAA,EAAM,QAAQ,IAAA,IAAQ;AAAA,SACvB,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"toggle-group.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { toggleVariants } from \"./toggle\"\nimport { cn } from \"./lib/utils\"\n\ntype ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: \"horizontal\" | \"vertical\"\n}\n\ntype ToggleGroupProps = ToggleGroupPrimitive.Props &\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: \"horizontal\" | \"vertical\"\n }\n\ntype ToggleGroupItemProps = TogglePrimitive.Props &\n VariantProps<typeof toggleVariants>\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue>({\n size: \"default\",\n variant: \"default\",\n spacing: 0,\n orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n spacing = 0,\n orientation = \"horizontal\",\n children,\n ...props\n}: ToggleGroupProps) {\n return (\n <ToggleGroupPrimitive\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n data-spacing={spacing}\n data-orientation={orientation}\n style={{ \"--gap\": spacing } as React.CSSProperties}\n className={cn(\n \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]\",\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider\n value={{ variant, size, spacing, orientation }}\n >\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ToggleGroupItemProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <TogglePrimitive\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-size={context.size || size}\n data-spacing={context.spacing}\n className={cn(\n \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n className\n )}\n {...props}\n >\n {children}\n </TogglePrimitive>\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"]}
|
package/dist/toggle.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
declare const toggleVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "outline" | null | undefined;
|
|
9
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
10
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
+
type ToggleProps = React.ComponentProps<typeof Toggle$1> & VariantProps<typeof toggleVariants>;
|
|
12
|
+
declare function Toggle({ className, variant, size, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
export { Toggle, toggleVariants };
|
package/dist/toggle.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"toggle.js"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
4
|
+
|
|
5
|
+
type TooltipProviderProps = React.ComponentProps<typeof Tooltip$1.Provider>;
|
|
6
|
+
type TooltipProps = React.ComponentProps<typeof Tooltip$1.Root>;
|
|
7
|
+
type TooltipTriggerProps = React.ComponentProps<typeof Tooltip$1.Trigger>;
|
|
8
|
+
type TooltipContentProps = React.ComponentProps<typeof Tooltip$1.Popup> & {
|
|
9
|
+
side?: React.ComponentProps<typeof Tooltip$1.Positioner>["side"];
|
|
10
|
+
sideOffset?: React.ComponentProps<typeof Tooltip$1.Positioner>["sideOffset"];
|
|
11
|
+
align?: React.ComponentProps<typeof Tooltip$1.Positioner>["align"];
|
|
12
|
+
alignOffset?: React.ComponentProps<typeof Tooltip$1.Positioner>["alignOffset"];
|
|
13
|
+
anchor?: React.ComponentProps<typeof Tooltip$1.Positioner>["anchor"];
|
|
14
|
+
positionerClassName?: string;
|
|
15
|
+
};
|
|
16
|
+
declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function TooltipTrigger({ children, ...props }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
declare function TooltipContent({ className, positionerClassName, side, sideOffset, align, alignOffset, anchor, children, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
package/dist/tooltip.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"tooltip.js"}
|