@mesob/ui 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.d.ts +10 -0
- package/dist/components/accordion.js +74 -0
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/alert-dialog.d.ts +17 -0
- package/dist/components/alert-dialog.js +187 -0
- package/dist/components/alert-dialog.js.map +1 -0
- package/dist/components/alert.d.ts +13 -0
- package/dist/components/alert.js +74 -0
- package/dist/components/alert.js.map +1 -0
- package/dist/components/animated-tabs.d.ts +26 -0
- package/dist/components/animated-tabs.js +290 -0
- package/dist/components/animated-tabs.js.map +1 -0
- package/dist/components/aspect-ratio.d.ts +6 -0
- package/dist/components/aspect-ratio.js +14 -0
- package/dist/components/aspect-ratio.js.map +1 -0
- package/dist/components/avatar.d.ts +9 -0
- package/dist/components/avatar.js +63 -0
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.d.ts +13 -0
- package/dist/components/badge.js +48 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/breadcrumb.d.ts +14 -0
- package/dist/components/breadcrumb.js +110 -0
- package/dist/components/breadcrumb.js.map +1 -0
- package/dist/components/button-group.d.ts +17 -0
- package/dist/components/button-group.js +106 -0
- package/dist/components/button-group.js.map +1 -0
- package/dist/components/button.d.ts +14 -0
- package/dist/components/button.js +60 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/calendar.d.ts +13 -0
- package/dist/components/calendar.js +254 -0
- package/dist/components/calendar.js.map +1 -0
- package/dist/components/card.d.ts +12 -0
- package/dist/components/card.js +98 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/carousel.d.ts +24 -0
- package/dist/components/carousel.js +260 -0
- package/dist/components/carousel.js.map +1 -0
- package/dist/components/chart.d.ts +43 -0
- package/dist/components/chart.js +261 -0
- package/dist/components/chart.js.map +1 -0
- package/dist/components/checkbox.d.ts +7 -0
- package/dist/components/checkbox.js +41 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/collapsible.d.ts +8 -0
- package/dist/components/collapsible.js +38 -0
- package/dist/components/collapsible.js.map +1 -0
- package/dist/components/command.d.ts +22 -0
- package/dist/components/command.js +281 -0
- package/dist/components/command.js.map +1 -0
- package/dist/components/context-menu.d.ts +28 -0
- package/dist/components/context-menu.js +233 -0
- package/dist/components/context-menu.js.map +1 -0
- package/dist/components/data-table/index.d.ts +46 -0
- package/dist/components/data-table/index.js +639 -0
- package/dist/components/data-table/index.js.map +1 -0
- package/dist/components/dialog.d.ts +18 -0
- package/dist/components/dialog.js +146 -0
- package/dist/components/dialog.js.map +1 -0
- package/dist/components/drawer.d.ts +16 -0
- package/dist/components/drawer.js +138 -0
- package/dist/components/drawer.js.map +1 -0
- package/dist/components/dropdown-menu.d.ts +28 -0
- package/dist/components/dropdown-menu.js +241 -0
- package/dist/components/dropdown-menu.js.map +1 -0
- package/dist/components/empty.d.ts +15 -0
- package/dist/components/empty.js +110 -0
- package/dist/components/empty.js.map +1 -0
- package/dist/components/entity/index.d.ts +160 -0
- package/dist/components/entity/index.js +1671 -0
- package/dist/components/entity/index.js.map +1 -0
- package/dist/components/field.d.ts +30 -0
- package/dist/components/field.js +279 -0
- package/dist/components/field.js.map +1 -0
- package/dist/components/form.d.ts +28 -0
- package/dist/components/form.js +150 -0
- package/dist/components/form.js.map +1 -0
- package/dist/components/hover-card.d.ts +9 -0
- package/dist/components/hover-card.js +48 -0
- package/dist/components/hover-card.js.map +1 -0
- package/dist/components/input-group.d.ts +20 -0
- package/dist/components/input-group.js +257 -0
- package/dist/components/input-group.js.map +1 -0
- package/dist/components/input-otp.d.ts +14 -0
- package/dist/components/input-otp.js +76 -0
- package/dist/components/input-otp.js.map +1 -0
- package/dist/components/input.d.ts +6 -0
- package/dist/components/input.js +29 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/item.d.ts +28 -0
- package/dist/components/item.js +220 -0
- package/dist/components/item.js.map +1 -0
- package/dist/components/jiret-logo.d.ts +13 -0
- package/dist/components/jiret-logo.js +80 -0
- package/dist/components/jiret-logo.js.map +1 -0
- package/dist/components/kbd.d.ts +6 -0
- package/dist/components/kbd.js +39 -0
- package/dist/components/kbd.js.map +1 -0
- package/dist/components/label.d.ts +7 -0
- package/dist/components/label.js +32 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/menubar.d.ts +29 -0
- package/dist/components/menubar.js +261 -0
- package/dist/components/menubar.js.map +1 -0
- package/dist/components/navigation-menu.d.ts +18 -0
- package/dist/components/navigation-menu.js +178 -0
- package/dist/components/navigation-menu.js.map +1 -0
- package/dist/components/pagination.d.ts +18 -0
- package/dist/components/pagination.js +160 -0
- package/dist/components/pagination.js.map +1 -0
- package/dist/components/popover.d.ts +10 -0
- package/dist/components/popover.js +54 -0
- package/dist/components/popover.js.map +1 -0
- package/dist/components/powered-by.d.ts +5 -0
- package/dist/components/powered-by.js +98 -0
- package/dist/components/powered-by.js.map +1 -0
- package/dist/components/progress.d.ts +7 -0
- package/dist/components/progress.js +41 -0
- package/dist/components/progress.js.map +1 -0
- package/dist/components/radio-group.d.ts +8 -0
- package/dist/components/radio-group.js +55 -0
- package/dist/components/radio-group.js.map +1 -0
- package/dist/components/resizable.d.ts +11 -0
- package/dist/components/resizable.js +58 -0
- package/dist/components/resizable.js.map +1 -0
- package/dist/components/scroll-area.d.ts +8 -0
- package/dist/components/scroll-area.js +70 -0
- package/dist/components/scroll-area.js.map +1 -0
- package/dist/components/section/index.d.ts +14 -0
- package/dist/components/section/index.js +139 -0
- package/dist/components/section/index.js.map +1 -0
- package/dist/components/select.d.ts +18 -0
- package/dist/components/select.js +181 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/separator.d.ts +7 -0
- package/dist/components/separator.js +36 -0
- package/dist/components/separator.js.map +1 -0
- package/dist/components/sheet.d.ts +16 -0
- package/dist/components/sheet.js +136 -0
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/sidebar.d.ts +75 -0
- package/dist/components/sidebar.js +909 -0
- package/dist/components/sidebar.js.map +1 -0
- package/dist/components/skeleton.d.ts +5 -0
- package/dist/components/skeleton.js +23 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/slider.d.ts +7 -0
- package/dist/components/slider.js +76 -0
- package/dist/components/slider.js.map +1 -0
- package/dist/components/sonner.d.ts +6 -0
- package/dist/components/sonner.js +41 -0
- package/dist/components/sonner.js.map +1 -0
- package/dist/components/spinner.d.ts +6 -0
- package/dist/components/spinner.js +28 -0
- package/dist/components/spinner.js.map +1 -0
- package/dist/components/spotlight-search.d.ts +25 -0
- package/dist/components/spotlight-search.js +387 -0
- package/dist/components/spotlight-search.js.map +1 -0
- package/dist/components/switch.d.ts +7 -0
- package/dist/components/switch.js +41 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.d.ts +13 -0
- package/dist/components/table.js +124 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.d.ts +10 -0
- package/dist/components/tabs.js +77 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/textarea.d.ts +6 -0
- package/dist/components/textarea.js +26 -0
- package/dist/components/textarea.js.map +1 -0
- package/dist/components/theme-toggle.d.ts +8 -0
- package/dist/components/theme-toggle.js +86 -0
- package/dist/components/theme-toggle.js.map +1 -0
- package/dist/components/toggle-group.d.ts +14 -0
- package/dist/components/toggle-group.js +102 -0
- package/dist/components/toggle-group.js.map +1 -0
- package/dist/components/toggle.d.ts +13 -0
- package/dist/components/toggle.js +53 -0
- package/dist/components/toggle.js.map +1 -0
- package/dist/components/tooltip.d.ts +10 -0
- package/dist/components/tooltip.js +65 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/hooks/use-mobile.d.ts +3 -0
- package/dist/hooks/use-mobile.js +22 -0
- package/dist/hooks/use-mobile.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +5 -0
- package/dist/lib/utils.js +10 -0
- package/dist/lib/utils.js.map +1 -0
- package/package.json +123 -0
- package/src/styles/globals.css +125 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/lib/utils.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/tabs.tsx
|
|
11
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
function Tabs({
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
TabsPrimitive.Root,
|
|
19
|
+
{
|
|
20
|
+
"data-slot": "tabs",
|
|
21
|
+
className: cn("flex flex-col gap-2", className),
|
|
22
|
+
...props
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
function TabsList({
|
|
27
|
+
className,
|
|
28
|
+
...props
|
|
29
|
+
}) {
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
TabsPrimitive.List,
|
|
32
|
+
{
|
|
33
|
+
"data-slot": "tabs-list",
|
|
34
|
+
className: cn(
|
|
35
|
+
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
|
36
|
+
className
|
|
37
|
+
),
|
|
38
|
+
...props
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
function TabsTrigger({
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}) {
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
TabsPrimitive.Trigger,
|
|
48
|
+
{
|
|
49
|
+
"data-slot": "tabs-trigger",
|
|
50
|
+
className: cn(
|
|
51
|
+
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
52
|
+
className
|
|
53
|
+
),
|
|
54
|
+
...props
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function TabsContent({
|
|
59
|
+
className,
|
|
60
|
+
...props
|
|
61
|
+
}) {
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
TabsPrimitive.Content,
|
|
64
|
+
{
|
|
65
|
+
"data-slot": "tabs-content",
|
|
66
|
+
className: cn("flex-1 outline-none", className),
|
|
67
|
+
...props
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
Tabs,
|
|
73
|
+
TabsContent,
|
|
74
|
+
TabsList,
|
|
75
|
+
TabsTrigger
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/tabs.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport type * as React from 'react';\n\nfunction Tabs({\n className,\n ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n className={cn('flex flex-col gap-2', className)}\n {...props}\n />\n );\n}\n\nfunction TabsList({\n className,\n ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n className={cn(\n 'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsTrigger({\n className,\n ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n return (\n <TabsPrimitive.Trigger\n data-slot=\"tabs-trigger\"\n className={cn(\n \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsContent({\n className,\n ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n return (\n <TabsPrimitive.Content\n data-slot=\"tabs-content\"\n className={cn('flex-1 outline-none', className)}\n {...props}\n />\n );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACFA,YAAY,mBAAmB;AAQ3B;AALJ,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoD;AAClD,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAAoD;AAClD,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// src/lib/utils.ts
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
function cn(...inputs) {
|
|
5
|
+
return twMerge(clsx(inputs));
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// src/components/textarea.tsx
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
function Textarea({ className, ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
"textarea",
|
|
13
|
+
{
|
|
14
|
+
"data-slot": "textarea",
|
|
15
|
+
className: cn(
|
|
16
|
+
"border-input placeholder:text-muted-foreground 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:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
...props
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
Textarea
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/textarea.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(\n 'border-input placeholder:text-muted-foreground 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:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Textarea };\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACAI;AAFJ,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAqC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/lib/utils.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/button.tsx
|
|
11
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
12
|
+
import { cva } from "class-variance-authority";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var buttonVariants = cva(
|
|
15
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
20
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
21
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
22
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
23
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
24
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
25
|
+
},
|
|
26
|
+
size: {
|
|
27
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
28
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
29
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
30
|
+
icon: "size-9",
|
|
31
|
+
"icon-sm": "size-8",
|
|
32
|
+
"icon-lg": "size-10"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
variant: "default",
|
|
37
|
+
size: "default"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
function Button({
|
|
42
|
+
className,
|
|
43
|
+
variant,
|
|
44
|
+
size,
|
|
45
|
+
asChild = false,
|
|
46
|
+
...props
|
|
47
|
+
}) {
|
|
48
|
+
const Comp = asChild ? Slot : "button";
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
Comp,
|
|
51
|
+
{
|
|
52
|
+
"data-slot": "button",
|
|
53
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
54
|
+
...props
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// src/components/theme-toggle.tsx
|
|
60
|
+
import { IconMoon, IconSun } from "@tabler/icons-react";
|
|
61
|
+
import { useTheme } from "next-themes";
|
|
62
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
63
|
+
function ThemeToggle({ className }) {
|
|
64
|
+
const { resolvedTheme, setTheme, theme } = useTheme();
|
|
65
|
+
const isDark = (theme ?? resolvedTheme) === "dark";
|
|
66
|
+
return /* @__PURE__ */ jsxs(
|
|
67
|
+
Button,
|
|
68
|
+
{
|
|
69
|
+
type: "button",
|
|
70
|
+
variant: "outline",
|
|
71
|
+
size: "icon",
|
|
72
|
+
"aria-label": "Toggle theme",
|
|
73
|
+
className: cn("relative", className),
|
|
74
|
+
onClick: () => setTheme(isDark ? "light" : "dark"),
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ jsx2(IconSun, { className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
|
|
77
|
+
/* @__PURE__ */ jsx2(IconMoon, { className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
|
|
78
|
+
/* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Toggle theme" })
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
export {
|
|
84
|
+
ThemeToggle
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=theme-toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/theme-toggle.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n icon: 'size-9',\n 'icon-sm': 'size-8',\n 'icon-lg': 'size-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconMoon, IconSun } from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\n\ntype ThemeToggleProps = {\n className?: string;\n};\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n const { resolvedTheme, setTheme, theme } = useTheme();\n const isDark = (theme ?? resolvedTheme) === 'dark';\n\n return (\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"icon\"\n aria-label=\"Toggle theme\"\n className={cn('relative', className)}\n onClick={() => setTheme(isDark ? 'light' : 'dark')}\n >\n <IconSun className=\"h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n <IconMoon className=\"absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n <span className=\"sr-only\">Toggle theme</span>\n </Button>\n );\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,YAAY;AACrB,SAAS,WAA8B;AAgDnC;AA7CJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACpDA,SAAS,UAAU,eAAe;AAClC,SAAS,gBAAgB;AAWrB,SAQE,OAAAA,MARF;AALG,SAAS,YAAY,EAAE,UAAU,GAAqB;AAC3D,QAAM,EAAE,eAAe,UAAU,MAAM,IAAI,SAAS;AACpD,QAAM,UAAU,SAAS,mBAAmB;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,SAAS,MAAM,SAAS,SAAS,UAAU,MAAM;AAAA,MAEjD;AAAA,wBAAAA,KAAC,WAAQ,WAAU,0EAAyE;AAAA,QAC5F,gBAAAA,KAAC,YAAS,WAAU,kFAAiF;AAAA,QACrG,gBAAAA,KAAC,UAAK,WAAU,WAAU,0BAAY;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":["jsx"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { toggleVariants } from './toggle.js';
|
|
3
|
+
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import 'class-variance-authority/types';
|
|
7
|
+
import '@radix-ui/react-toggle';
|
|
8
|
+
|
|
9
|
+
declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
|
|
10
|
+
spacing?: number;
|
|
11
|
+
}): react_jsx_runtime.JSX.Element;
|
|
12
|
+
declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/lib/utils.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/toggle.tsx
|
|
11
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
12
|
+
import { cva } from "class-variance-authority";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var toggleVariants = cva(
|
|
15
|
+
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
default: "bg-transparent",
|
|
20
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
default: "h-9 px-2 min-w-9",
|
|
24
|
+
sm: "h-8 px-1.5 min-w-8",
|
|
25
|
+
lg: "h-10 px-2.5 min-w-10"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
variant: "default",
|
|
30
|
+
size: "default"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
// src/components/toggle-group.tsx
|
|
36
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
37
|
+
import * as React from "react";
|
|
38
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
39
|
+
var ToggleGroupContext = React.createContext({
|
|
40
|
+
size: "default",
|
|
41
|
+
variant: "default",
|
|
42
|
+
spacing: 0
|
|
43
|
+
});
|
|
44
|
+
function ToggleGroup({
|
|
45
|
+
className,
|
|
46
|
+
variant,
|
|
47
|
+
size,
|
|
48
|
+
spacing = 0,
|
|
49
|
+
children,
|
|
50
|
+
...props
|
|
51
|
+
}) {
|
|
52
|
+
return /* @__PURE__ */ jsx2(
|
|
53
|
+
ToggleGroupPrimitive.Root,
|
|
54
|
+
{
|
|
55
|
+
"data-slot": "toggle-group",
|
|
56
|
+
"data-variant": variant,
|
|
57
|
+
"data-size": size,
|
|
58
|
+
"data-spacing": spacing,
|
|
59
|
+
style: { "--gap": spacing },
|
|
60
|
+
className: cn(
|
|
61
|
+
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
|
|
62
|
+
className
|
|
63
|
+
),
|
|
64
|
+
...props,
|
|
65
|
+
children: /* @__PURE__ */ jsx2(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
function ToggleGroupItem({
|
|
70
|
+
className,
|
|
71
|
+
children,
|
|
72
|
+
variant,
|
|
73
|
+
size,
|
|
74
|
+
...props
|
|
75
|
+
}) {
|
|
76
|
+
const context = React.useContext(ToggleGroupContext);
|
|
77
|
+
return /* @__PURE__ */ jsx2(
|
|
78
|
+
ToggleGroupPrimitive.Item,
|
|
79
|
+
{
|
|
80
|
+
"data-slot": "toggle-group-item",
|
|
81
|
+
"data-variant": context.variant || variant,
|
|
82
|
+
"data-size": context.size || size,
|
|
83
|
+
"data-spacing": context.spacing,
|
|
84
|
+
className: cn(
|
|
85
|
+
toggleVariants({
|
|
86
|
+
variant: context.variant || variant,
|
|
87
|
+
size: context.size || size
|
|
88
|
+
}),
|
|
89
|
+
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
|
|
90
|
+
"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
|
|
91
|
+
className
|
|
92
|
+
),
|
|
93
|
+
...props,
|
|
94
|
+
children
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
export {
|
|
99
|
+
ToggleGroup,
|
|
100
|
+
ToggleGroupItem
|
|
101
|
+
};
|
|
102
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/toggle.tsx","../../src/components/toggle-group.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n outline:\n 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-9 px-2 min-w-9',\n sm: 'h-8 px-1.5 min-w-8',\n lg: 'h-10 px-2.5 min-w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction Toggle({\n className,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <TogglePrimitive.Root\n data-slot=\"toggle\"\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Toggle, toggleVariants };\n","'use client';\n\nimport { toggleVariants } from '@mesob/ui/components/toggle';\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleVariants> & {\n spacing?: number;\n }\n>({\n size: 'default',\n variant: 'default',\n spacing: 0,\n});\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n spacing = 0,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants> & {\n spacing?: number;\n }) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n data-spacing={spacing}\n style={{ '--gap': spacing } as React.CSSProperties}\n className={cn(\n 'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',\n className,\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n );\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>) {\n const context = React.useContext(ToggleGroupContext);\n\n return (\n <ToggleGroupPrimitive.Item\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 toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',\n 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',\n className,\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACFA,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AAiCnC;AA9BJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;ACvBA,YAAY,0BAA0B;AAEtC,YAAY,WAAW;AAoCjB,gBAAAA,YAAA;AAlCN,IAAM,qBAA2B,oBAI/B;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX,CAAC;AAED,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAGK;AACH,SACE,gBAAAA;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,gBAAc;AAAA,MACd,OAAO,EAAE,SAAS,QAAQ;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,0BAAAA,KAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,MAAM,QAAQ,GAC1D,UACH;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACuC;AACrC,QAAM,UAAgB,iBAAW,kBAAkB;AAEnD,SACE,gBAAAA;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAc,QAAQ,WAAW;AAAA,MACjC,aAAW,QAAQ,QAAQ;AAAA,MAC3B,gBAAc,QAAQ;AAAA,MACtB,WAAW;AAAA,QACT,eAAe;AAAA,UACb,SAAS,QAAQ,WAAW;AAAA,UAC5B,MAAM,QAAQ,QAAQ;AAAA,QACxB,CAAC;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":["jsx"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
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 TogglePrimitive from '@radix-ui/react-toggle';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as React from 'react';
|
|
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
|
+
declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/lib/utils.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/toggle.tsx
|
|
11
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
12
|
+
import { cva } from "class-variance-authority";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var toggleVariants = cva(
|
|
15
|
+
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
variant: {
|
|
19
|
+
default: "bg-transparent",
|
|
20
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
default: "h-9 px-2 min-w-9",
|
|
24
|
+
sm: "h-8 px-1.5 min-w-8",
|
|
25
|
+
lg: "h-10 px-2.5 min-w-10"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
variant: "default",
|
|
30
|
+
size: "default"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
function Toggle({
|
|
35
|
+
className,
|
|
36
|
+
variant,
|
|
37
|
+
size,
|
|
38
|
+
...props
|
|
39
|
+
}) {
|
|
40
|
+
return /* @__PURE__ */ jsx(
|
|
41
|
+
TogglePrimitive.Root,
|
|
42
|
+
{
|
|
43
|
+
"data-slot": "toggle",
|
|
44
|
+
className: cn(toggleVariants({ variant, size, className })),
|
|
45
|
+
...props
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
Toggle,
|
|
51
|
+
toggleVariants
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/toggle.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n outline:\n 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-9 px-2 min-w-9',\n sm: 'h-8 px-1.5 min-w-8',\n lg: 'h-10 px-2.5 min-w-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction Toggle({\n className,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <TogglePrimitive.Root\n data-slot=\"toggle\"\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACFA,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AAiCnC;AA9BJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACuC;AACrC,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/lib/utils.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/tooltip.tsx
|
|
11
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
function TooltipProvider({
|
|
14
|
+
delayDuration = 0,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
TooltipPrimitive.Provider,
|
|
19
|
+
{
|
|
20
|
+
"data-slot": "tooltip-provider",
|
|
21
|
+
delayDuration,
|
|
22
|
+
...props
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
function Tooltip({
|
|
27
|
+
...props
|
|
28
|
+
}) {
|
|
29
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
|
|
30
|
+
}
|
|
31
|
+
function TooltipTrigger({
|
|
32
|
+
...props
|
|
33
|
+
}) {
|
|
34
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
35
|
+
}
|
|
36
|
+
function TooltipContent({
|
|
37
|
+
className,
|
|
38
|
+
sideOffset = 0,
|
|
39
|
+
children,
|
|
40
|
+
...props
|
|
41
|
+
}) {
|
|
42
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
43
|
+
TooltipPrimitive.Content,
|
|
44
|
+
{
|
|
45
|
+
"data-slot": "tooltip-content",
|
|
46
|
+
sideOffset,
|
|
47
|
+
className: cn(
|
|
48
|
+
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
49
|
+
className
|
|
50
|
+
),
|
|
51
|
+
...props,
|
|
52
|
+
children: [
|
|
53
|
+
children,
|
|
54
|
+
/* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
) });
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
Tooltip,
|
|
61
|
+
TooltipContent,
|
|
62
|
+
TooltipProvider,
|
|
63
|
+
TooltipTrigger
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/tooltip.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type * as React from 'react';\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n className,\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACFA,YAAY,sBAAsB;AAQ9B,cAgCE,YAhCF;AALJ,SAAS,gBAAgB;AAAA,EACvB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf,GAAG;AACL,GAAuD;AACrD,SACE,oBAAC,mBACC,8BAAkB,uBAAjB,EAAsB,aAAU,WAAW,GAAG,OAAO,GACxD;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,GAAG;AACL,GAA0D;AACxD,SAAO,oBAAkB,0BAAjB,EAAyB,aAAU,mBAAmB,GAAG,OAAO;AAC1E;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAkB,yBAAjB,EACC;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAkB,wBAAjB,EAAuB,WAAU,sGAAqG;AAAA;AAAA;AAAA,EACzI,GACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// src/hooks/use-mobile.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
var MOBILE_BREAKPOINT = 768;
|
|
4
|
+
function useIsMobile() {
|
|
5
|
+
const [isMobile, setIsMobile] = React.useState(
|
|
6
|
+
void 0
|
|
7
|
+
);
|
|
8
|
+
React.useEffect(() => {
|
|
9
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
10
|
+
const onChange = () => {
|
|
11
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
12
|
+
};
|
|
13
|
+
mql.addEventListener("change", onChange);
|
|
14
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
15
|
+
return () => mql.removeEventListener("change", onChange);
|
|
16
|
+
}, []);
|
|
17
|
+
return !!isMobile;
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
useIsMobile
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=use-mobile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener('change', onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener('change', onChange);\n }, []);\n\n return !!isMobile;\n}\n"],"mappings":";AAAA,YAAY,WAAW;AAEvB,IAAM,oBAAoB;AAEnB,SAAS,cAAc;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAU;AAAA,IACpC;AAAA,EACF;AAEA,EAAM,gBAAU,MAAM;AACpB,UAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,CAAC,KAAK;AACvE,UAAM,WAAW,MAAM;AACrB,kBAAY,OAAO,aAAa,iBAAiB;AAAA,IACnD;AACA,QAAI,iBAAiB,UAAU,QAAQ;AACvC,gBAAY,OAAO,aAAa,iBAAiB;AACjD,WAAO,MAAM,IAAI,oBAAoB,UAAU,QAAQ;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,CAAC;AACX;","names":[]}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
|