kuzenbo 0.0.1
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 +185 -0
- package/dist/accordion-trigger-D5XnBMS6.d.ts +24 -0
- package/dist/accordion-trigger-TjAe8JHy.js +53 -0
- package/dist/alert-dialog-trigger-BV0BsaVU.d.ts +638 -0
- package/dist/alert-dialog-trigger-D5BRoizR.js +98 -0
- package/dist/alert-title-CISzcj0X.js +28 -0
- package/dist/alert-title-CVC9G-Xf.d.ts +22 -0
- package/dist/announcement-title-CCZuGB1O.d.ts +18 -0
- package/dist/announcement-title-CIwzt9Wl.js +18 -0
- package/dist/autocomplete-value-BhyszIrf.d.ts +111 -0
- package/dist/autocomplete-value-DNJ3sAIH.js +141 -0
- package/dist/avatar-image-BKgKyzVw.d.ts +35 -0
- package/dist/avatar-image-Bw3G-Bl6.js +45 -0
- package/dist/breadcrumb-separator-D66-B1DA.d.ts +44 -0
- package/dist/breadcrumb-separator-Do-19Uow.js +74 -0
- package/dist/button-group-text-D98w78rH.js +25 -0
- package/dist/calendar-week-number-6AXvZ4Ij.js +72 -0
- package/dist/calendar-week-number-in2gpvA_.d.ts +36 -0
- package/dist/card-title-CbRPAh3M.js +52 -0
- package/dist/card-title-DSDluDoy.d.ts +40 -0
- package/dist/carousel-previous-B_jysGv_.js +89 -0
- package/dist/chart-tooltip-content-h5oLtil-.js +144 -0
- package/dist/collapsible-trigger-DcQWODN-.js +20 -0
- package/dist/collapsible-trigger-aZF7_mPR.d.ts +15 -0
- package/dist/command-shortcut-DoWM7Mnm.js +97 -0
- package/dist/context-menu-trigger-CYBhdcpg.js +147 -0
- package/dist/context-menu-trigger-Du2vcTco.d.ts +103 -0
- package/dist/dialog-trigger-CR23tYql.js +97 -0
- package/dist/dialog-trigger-xeE4e96-.d.ts +74 -0
- package/dist/drawer-trigger-7jI4Zmqs.js +79 -0
- package/dist/drawer-trigger-H_Wv5R00.d.ts +67 -0
- package/dist/dropdown-menu-trigger-CFdruqOk.d.ts +108 -0
- package/dist/dropdown-menu-trigger-IKeAoU_a.js +152 -0
- package/dist/dropzone-context-BRX1K7nw.d.ts +45 -0
- package/dist/dropzone-status-CW-3AXuh.js +33 -0
- package/dist/emoji-picker-skin-tone-selector-Cmv-1vDO.js +117 -0
- package/dist/emoji-picker-skin-tone-selector-yMYxt4oJ.d.ts +67 -0
- package/dist/empty-title-CH3DhcfT.d.ts +53 -0
- package/dist/empty-title-CHNBH7WJ.js +53 -0
- package/dist/form-field-title-CNrq8v88.js +101 -0
- package/dist/hooks/use-isomorphic-effect.d.ts +7 -0
- package/dist/hooks/use-isomorphic-effect.js +7 -0
- package/dist/hooks/use-mobile.d.ts +4 -0
- package/dist/hooks/use-mobile.js +20 -0
- package/dist/hover-card-trigger-B9jf3FEB.js +31 -0
- package/dist/hover-card-trigger-BqVoZ7h4.d.ts +20 -0
- package/dist/index.d.ts +122 -0
- package/dist/index.js +130 -0
- package/dist/input-group-textarea-voYOV11-.js +79 -0
- package/dist/input-otp-slot-DWbXhUmU.js +45 -0
- package/dist/input-otp-slot-eVdOjx8C.d.ts +24 -0
- package/dist/item-title-BYrYJZpa.js +89 -0
- package/dist/kbd-group-CT-Xtgug.js +12 -0
- package/dist/kbd-group-D3yVrb2D.d.ts +10 -0
- package/dist/marquee-item-BGJ5NSiz.js +29 -0
- package/dist/marquee-item-DD6JuLJ4.d.ts +32 -0
- package/dist/menubar-trigger-BLg3XdRv.d.ts +104 -0
- package/dist/menubar-trigger-aKMWAxdz.js +146 -0
- package/dist/meter-value-BmxUICOA.js +37 -0
- package/dist/meter-value-DYkZLCtx.d.ts +30 -0
- package/dist/navigation-menu-trigger-Bf60DnIz.d.ts +53 -0
- package/dist/navigation-menu-trigger-D80wiliM.js +82 -0
- package/dist/number-field-scrub-area-CXSyafBE.js +80 -0
- package/dist/optional-portal-C7TpYnOc.js +15 -0
- package/dist/pagination-previous-DPZrRgiD.js +88 -0
- package/dist/pagination-previous-qJeZZTou.d.ts +45 -0
- package/dist/pill-status-CD9XXuE7.js +74 -0
- package/dist/pill-status-rg-3AMSI.d.ts +77 -0
- package/dist/popover-trigger-B9PVErig.d.ts +39 -0
- package/dist/popover-trigger-C8dP_u7N.js +52 -0
- package/dist/progress-value-CFlgP0nv.d.ts +28 -0
- package/dist/progress-value-CfCodKnX.js +37 -0
- package/dist/radio-group-item-09fw05Va.d.ts +10 -0
- package/dist/radio-group-item-CQjCazjw.js +24 -0
- package/dist/rating-star-6ov3lbpn.d.ts +57 -0
- package/dist/rating-star-BuLQfAnZ.js +110 -0
- package/dist/resizable-panel-B4lAr8Vb.d.ts +19 -0
- package/dist/resizable-panel-BO97wcPj.js +21 -0
- package/dist/scroll-bar-BQzpb5hF.js +19 -0
- package/dist/scroll-bar-vYvxEOph.d.ts +11 -0
- package/dist/select-value-BUnWentK.js +117 -0
- package/dist/select-value-DG31IHy3.d.ts +70 -0
- package/dist/sheet-trigger-CLgKANrf.d.ts +64 -0
- package/dist/sheet-trigger-CUU7xwUn.js +95 -0
- package/dist/sidebar-trigger-BCjVuIqi.js +366 -0
- package/dist/styles.css +145 -0
- package/dist/table-row-BxhKJPfE.d.ts +46 -0
- package/dist/table-row-D63xalkM.js +60 -0
- package/dist/tabs-trigger-B2mBxFgq.js +38 -0
- package/dist/tabs-trigger-BGo2XGvh.d.ts +41 -0
- package/dist/timeline-title-BH8JxX2n.js +389 -0
- package/dist/toggle-group-item-Bz_ohmnY.d.ts +53 -0
- package/dist/toggle-group-item-aggwtgam.js +34 -0
- package/dist/toolbar-separator-7CgKz2aX.d.ts +40 -0
- package/dist/toolbar-separator-Bre5OtBI.js +41 -0
- package/dist/tooltip-trigger-CrAGfaqr.d.ts +27 -0
- package/dist/tooltip-trigger-Z-aPDRog.js +37 -0
- package/dist/ui/accordion.d.ts +27 -0
- package/dist/ui/accordion.js +17 -0
- package/dist/ui/affix.d.ts +49 -0
- package/dist/ui/affix.js +57 -0
- package/dist/ui/alert-dialog.d.ts +123 -0
- package/dist/ui/alert-dialog.js +23 -0
- package/dist/ui/alert.d.ts +58 -0
- package/dist/ui/alert.js +59 -0
- package/dist/ui/announcement.d.ts +27 -0
- package/dist/ui/announcement.js +16 -0
- package/dist/ui/aspect-ratio.d.ts +13 -0
- package/dist/ui/aspect-ratio.js +13 -0
- package/dist/ui/autocomplete.d.ts +67 -0
- package/dist/ui/autocomplete.js +30 -0
- package/dist/ui/avatar.d.ts +37 -0
- package/dist/ui/avatar.js +22 -0
- package/dist/ui/badge.d.ts +54 -0
- package/dist/ui/badge.js +33 -0
- package/dist/ui/breadcrumb.d.ts +41 -0
- package/dist/ui/breadcrumb.js +20 -0
- package/dist/ui/button-group.d.ts +94 -0
- package/dist/ui/button-group.js +24 -0
- package/dist/ui/button.d.ts +91 -0
- package/dist/ui/button.js +64 -0
- package/dist/ui/calendar.d.ts +52 -0
- package/dist/ui/calendar.js +64 -0
- package/dist/ui/card.d.ts +40 -0
- package/dist/ui/card.js +20 -0
- package/dist/ui/carousel.d.ts +100 -0
- package/dist/ui/carousel.js +76 -0
- package/dist/ui/chart.d.ts +61 -0
- package/dist/ui/chart.js +34 -0
- package/dist/ui/checkbox-group.d.ts +12 -0
- package/dist/ui/checkbox-group.js +13 -0
- package/dist/ui/checkbox.d.ts +12 -0
- package/dist/ui/checkbox.js +27 -0
- package/dist/ui/collapsible.d.ts +19 -0
- package/dist/ui/collapsible.js +16 -0
- package/dist/ui/combobox.d.ts +95 -0
- package/dist/ui/combobox.js +31 -0
- package/dist/ui/command.d.ts +146 -0
- package/dist/ui/command.js +24 -0
- package/dist/ui/context-menu.d.ts +83 -0
- package/dist/ui/context-menu.js +26 -0
- package/dist/ui/country-flag.d.ts +18 -0
- package/dist/ui/country-flag.js +36 -0
- package/dist/ui/dialog.d.ts +53 -0
- package/dist/ui/dialog.js +23 -0
- package/dist/ui/drawer.d.ts +52 -0
- package/dist/ui/drawer.js +24 -0
- package/dist/ui/dropdown-menu.d.ts +88 -0
- package/dist/ui/dropdown-menu.js +26 -0
- package/dist/ui/dropzone.d.ts +233 -0
- package/dist/ui/dropzone.js +180 -0
- package/dist/ui/emoji-picker.d.ts +46 -0
- package/dist/ui/emoji-picker.js +23 -0
- package/dist/ui/empty.d.ts +50 -0
- package/dist/ui/empty.js +18 -0
- package/dist/ui/form-field.d.ts +134 -0
- package/dist/ui/form-field.js +33 -0
- package/dist/ui/google-logo.d.ts +13 -0
- package/dist/ui/google-logo.js +36 -0
- package/dist/ui/hover-card.d.ts +24 -0
- package/dist/ui/hover-card.js +16 -0
- package/dist/ui/input-group.d.ts +141 -0
- package/dist/ui/input-group.js +21 -0
- package/dist/ui/input-otp.d.ts +31 -0
- package/dist/ui/input-otp.js +19 -0
- package/dist/ui/input.d.ts +12 -0
- package/dist/ui/input.js +14 -0
- package/dist/ui/item.d.ts +158 -0
- package/dist/ui/item.js +50 -0
- package/dist/ui/kbd.d.ts +18 -0
- package/dist/ui/kbd.js +14 -0
- package/dist/ui/label.d.ts +12 -0
- package/dist/ui/label.js +15 -0
- package/dist/ui/marquee.d.ts +30 -0
- package/dist/ui/marquee.js +17 -0
- package/dist/ui/menubar.d.ts +228 -0
- package/dist/ui/menubar.js +29 -0
- package/dist/ui/meter.d.ts +29 -0
- package/dist/ui/meter.js +19 -0
- package/dist/ui/navigation-menu.d.ts +12 -0
- package/dist/ui/navigation-menu.js +15 -0
- package/dist/ui/number-field.d.ts +41 -0
- package/dist/ui/number-field.js +33 -0
- package/dist/ui/pagination.d.ts +38 -0
- package/dist/ui/pagination.js +20 -0
- package/dist/ui/pill.d.ts +49 -0
- package/dist/ui/pill.js +21 -0
- package/dist/ui/popover.d.ts +37 -0
- package/dist/ui/popover.js +19 -0
- package/dist/ui/portal.d.ts +29 -0
- package/dist/ui/portal.js +52 -0
- package/dist/ui/progress.d.ts +31 -0
- package/dist/ui/progress.js +22 -0
- package/dist/ui/qr-code.d.ts +20 -0
- package/dist/ui/qr-code.js +78 -0
- package/dist/ui/radio-group.d.ts +18 -0
- package/dist/ui/radio-group.js +15 -0
- package/dist/ui/rating.d.ts +80 -0
- package/dist/ui/rating.js +59 -0
- package/dist/ui/resizable.d.ts +25 -0
- package/dist/ui/resizable.js +18 -0
- package/dist/ui/scroll-area.d.ts +19 -0
- package/dist/ui/scroll-area.js +24 -0
- package/dist/ui/select.d.ts +65 -0
- package/dist/ui/select.js +23 -0
- package/dist/ui/separator.d.ts +12 -0
- package/dist/ui/separator.js +14 -0
- package/dist/ui/sheet.d.ts +54 -0
- package/dist/ui/sheet.js +23 -0
- package/dist/ui/sidebar.d.ts +247 -0
- package/dist/ui/sidebar.js +83 -0
- package/dist/ui/skeleton.d.ts +11 -0
- package/dist/ui/skeleton.js +12 -0
- package/dist/ui/slider.d.ts +15 -0
- package/dist/ui/slider.js +47 -0
- package/dist/ui/spacer.d.ts +18 -0
- package/dist/ui/spacer.js +25 -0
- package/dist/ui/spinner.d.ts +12 -0
- package/dist/ui/spinner.js +17 -0
- package/dist/ui/surface.d.ts +41 -0
- package/dist/ui/surface.js +31 -0
- package/dist/ui/switch.d.ts +14 -0
- package/dist/ui/switch.js +20 -0
- package/dist/ui/table.d.ts +41 -0
- package/dist/ui/table.js +34 -0
- package/dist/ui/tabs.d.ts +43 -0
- package/dist/ui/tabs.js +20 -0
- package/dist/ui/textarea.d.ts +13 -0
- package/dist/ui/textarea.js +14 -0
- package/dist/ui/theme-icon.d.ts +77 -0
- package/dist/ui/theme-icon.js +56 -0
- package/dist/ui/timeline.d.ts +96 -0
- package/dist/ui/timeline.js +88 -0
- package/dist/ui/toast.d.ts +50 -0
- package/dist/ui/toast.js +23 -0
- package/dist/ui/toggle-group.d.ts +31 -0
- package/dist/ui/toggle-group.js +31 -0
- package/dist/ui/toggle.d.ts +46 -0
- package/dist/ui/toggle.js +34 -0
- package/dist/ui/toolbar.d.ts +33 -0
- package/dist/ui/toolbar.js +19 -0
- package/dist/ui/tooltip.d.ts +29 -0
- package/dist/ui/tooltip.js +17 -0
- package/dist/ui/video-player.d.ts +48 -0
- package/dist/ui/video-player.js +37 -0
- package/dist/use-chart-BRpzPrMJ.d.ts +77 -0
- package/dist/use-combobox-anchor-2KUf_cBk.js +198 -0
- package/dist/use-combobox-anchor-ByuqnpKH.d.ts +120 -0
- package/dist/use-number-field-Dzl9JLNK.d.ts +55 -0
- package/dist/use-timeline-BRlmxoQ7.d.ts +81 -0
- package/dist/use-toast-BGG4leSx.d.ts +118 -0
- package/dist/use-toast-DjRKuQG6.js +129 -0
- package/dist/video-player-volume-range-D971L6mz.d.ts +65 -0
- package/dist/video-player-volume-range-V7x0b1-r.js +66 -0
- package/package.json +128 -0
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
import { Button } from "./ui/button.js";
|
|
2
|
+
import { Separator } from "./ui/separator.js";
|
|
3
|
+
import { Input } from "./ui/input.js";
|
|
4
|
+
import { r as TooltipContent, t as TooltipTrigger } from "./tooltip-trigger-Z-aPDRog.js";
|
|
5
|
+
import { Tooltip } from "./ui/tooltip.js";
|
|
6
|
+
import { Skeleton } from "./ui/skeleton.js";
|
|
7
|
+
import { useIsMobile } from "./hooks/use-mobile.js";
|
|
8
|
+
import { cn, tv } from "tailwind-variants";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
import { SidebarLeftIcon } from "@hugeicons/core-free-icons";
|
|
11
|
+
import { HugeiconsIcon } from "@hugeicons/react";
|
|
12
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
13
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
14
|
+
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
15
|
+
|
|
16
|
+
//#region src/components/sidebar/constants.ts
|
|
17
|
+
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
18
|
+
const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
|
|
19
|
+
const SIDEBAR_WIDTH = "16rem";
|
|
20
|
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
21
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
22
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
23
|
+
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/components/sidebar/sidebar-content.tsx
|
|
26
|
+
const SidebarContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
27
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
28
|
+
"data-sidebar": "content",
|
|
29
|
+
"data-slot": "sidebar-content",
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/components/sidebar/sidebar-footer.tsx
|
|
35
|
+
const SidebarFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
36
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
37
|
+
"data-sidebar": "footer",
|
|
38
|
+
"data-slot": "sidebar-footer",
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/components/sidebar/sidebar-group.tsx
|
|
44
|
+
const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
45
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
46
|
+
"data-sidebar": "group",
|
|
47
|
+
"data-slot": "sidebar-group",
|
|
48
|
+
...props
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
//#endregion
|
|
52
|
+
//#region src/components/sidebar/sidebar-group-action.tsx
|
|
53
|
+
const SidebarGroupAction = ({ className, render, ...props }) => useRender({
|
|
54
|
+
defaultTagName: "button",
|
|
55
|
+
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
56
|
+
render,
|
|
57
|
+
state: {
|
|
58
|
+
slot: "sidebar-group-action",
|
|
59
|
+
sidebar: "group-action"
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
//#region src/components/sidebar/sidebar-group-content.tsx
|
|
65
|
+
const SidebarGroupContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
66
|
+
className: cn("w-full text-sm", className),
|
|
67
|
+
"data-sidebar": "group-content",
|
|
68
|
+
"data-slot": "sidebar-group-content",
|
|
69
|
+
...props
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/components/sidebar/sidebar-group-label.tsx
|
|
74
|
+
const SidebarGroupLabel = ({ className, render, ...props }) => useRender({
|
|
75
|
+
defaultTagName: "div",
|
|
76
|
+
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
77
|
+
render,
|
|
78
|
+
state: {
|
|
79
|
+
slot: "sidebar-group-label",
|
|
80
|
+
sidebar: "group-label"
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
//#endregion
|
|
85
|
+
//#region src/components/sidebar/sidebar-header.tsx
|
|
86
|
+
const SidebarHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
87
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
88
|
+
"data-sidebar": "header",
|
|
89
|
+
"data-slot": "sidebar-header",
|
|
90
|
+
...props
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
//#endregion
|
|
94
|
+
//#region src/components/sidebar/sidebar-input.tsx
|
|
95
|
+
const SidebarInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Input, {
|
|
96
|
+
className: cn("h-8 w-full bg-background shadow-none", className),
|
|
97
|
+
"data-sidebar": "input",
|
|
98
|
+
"data-slot": "sidebar-input",
|
|
99
|
+
...props
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
//#endregion
|
|
103
|
+
//#region src/components/sidebar/sidebar-inset.tsx
|
|
104
|
+
const SidebarInset = ({ className, ...props }) => /* @__PURE__ */ jsx("main", {
|
|
105
|
+
className: cn("relative flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm", className),
|
|
106
|
+
"data-slot": "sidebar-inset",
|
|
107
|
+
...props
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region src/components/sidebar/sidebar-menu.tsx
|
|
112
|
+
const SidebarMenu = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
|
|
113
|
+
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
114
|
+
"data-sidebar": "menu",
|
|
115
|
+
"data-slot": "sidebar-menu",
|
|
116
|
+
...props
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
//#endregion
|
|
120
|
+
//#region src/components/sidebar/sidebar-menu-action.tsx
|
|
121
|
+
const SidebarMenuAction = ({ className, render, showOnHover = false, ...props }) => useRender({
|
|
122
|
+
defaultTagName: "button",
|
|
123
|
+
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0", className) }, props),
|
|
124
|
+
render,
|
|
125
|
+
state: {
|
|
126
|
+
slot: "sidebar-menu-action",
|
|
127
|
+
sidebar: "menu-action"
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
//#endregion
|
|
132
|
+
//#region src/components/sidebar/sidebar-menu-badge.tsx
|
|
133
|
+
const SidebarMenuBadge = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
134
|
+
className: cn("pointer-events-none absolute right-1 flex flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
|
|
135
|
+
"data-sidebar": "menu-badge",
|
|
136
|
+
"data-slot": "sidebar-menu-badge",
|
|
137
|
+
...props
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
//#endregion
|
|
141
|
+
//#region src/components/sidebar/use-sidebar.tsx
|
|
142
|
+
const SidebarContext = createContext(null);
|
|
143
|
+
const useSidebar = () => {
|
|
144
|
+
const context = useContext(SidebarContext);
|
|
145
|
+
if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
146
|
+
return context;
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
//#endregion
|
|
150
|
+
//#region src/components/sidebar/sidebar-menu-button.tsx
|
|
151
|
+
const sidebarMenuButtonVariants = tv({
|
|
152
|
+
base: "peer/menu-button group/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
|
|
153
|
+
variants: {
|
|
154
|
+
variant: {
|
|
155
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
156
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
157
|
+
},
|
|
158
|
+
size: {
|
|
159
|
+
default: "h-8 text-sm",
|
|
160
|
+
sm: "h-7 text-xs",
|
|
161
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
defaultVariants: {
|
|
165
|
+
variant: "default",
|
|
166
|
+
size: "default"
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
const SidebarMenuButton = ({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
|
|
170
|
+
const { isMobile, state } = useSidebar();
|
|
171
|
+
const comp = useRender({
|
|
172
|
+
defaultTagName: "button",
|
|
173
|
+
props: mergeProps({ className: cn(sidebarMenuButtonVariants({
|
|
174
|
+
variant,
|
|
175
|
+
size
|
|
176
|
+
}), className) }, props),
|
|
177
|
+
render: tooltip ? TooltipTrigger : render,
|
|
178
|
+
state: {
|
|
179
|
+
slot: "sidebar-menu-button",
|
|
180
|
+
sidebar: "menu-button",
|
|
181
|
+
size,
|
|
182
|
+
active: isActive
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
if (!tooltip) return comp;
|
|
186
|
+
if (typeof tooltip === "string") tooltip = { children: tooltip };
|
|
187
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
|
|
188
|
+
align: "center",
|
|
189
|
+
hidden: state !== "collapsed" || isMobile,
|
|
190
|
+
side: "right",
|
|
191
|
+
...tooltip
|
|
192
|
+
})] });
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
//#endregion
|
|
196
|
+
//#region src/components/sidebar/sidebar-menu-item.tsx
|
|
197
|
+
const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
|
|
198
|
+
className: cn("group/menu-item relative", className),
|
|
199
|
+
"data-sidebar": "menu-item",
|
|
200
|
+
"data-slot": "sidebar-menu-item",
|
|
201
|
+
...props
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
//#endregion
|
|
205
|
+
//#region src/components/sidebar/sidebar-menu-skeleton.tsx
|
|
206
|
+
const SidebarMenuSkeleton = ({ className, showIcon = false, ...props }) => {
|
|
207
|
+
const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
|
|
208
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
209
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
210
|
+
"data-sidebar": "menu-skeleton",
|
|
211
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
212
|
+
...props,
|
|
213
|
+
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
214
|
+
className: "size-4 rounded-md",
|
|
215
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
216
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
217
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
218
|
+
"data-sidebar": "menu-skeleton-text",
|
|
219
|
+
style: { "--skeleton-width": width }
|
|
220
|
+
})]
|
|
221
|
+
});
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
//#endregion
|
|
225
|
+
//#region src/components/sidebar/sidebar-menu-sub.tsx
|
|
226
|
+
const SidebarMenuSub = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
|
|
227
|
+
className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
|
|
228
|
+
"data-sidebar": "menu-sub",
|
|
229
|
+
"data-slot": "sidebar-menu-sub",
|
|
230
|
+
...props
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
//#endregion
|
|
234
|
+
//#region src/components/sidebar/sidebar-menu-sub-button.tsx
|
|
235
|
+
const SidebarMenuSubButton = ({ render, size = "md", isActive = false, className, ...props }) => useRender({
|
|
236
|
+
defaultTagName: "a",
|
|
237
|
+
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-[size=md]:text-sm data-[size=sm]:text-xs data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
|
|
238
|
+
render,
|
|
239
|
+
state: {
|
|
240
|
+
slot: "sidebar-menu-sub-button",
|
|
241
|
+
sidebar: "menu-sub-button",
|
|
242
|
+
size,
|
|
243
|
+
active: isActive
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
|
|
247
|
+
//#endregion
|
|
248
|
+
//#region src/components/sidebar/sidebar-menu-sub-item.tsx
|
|
249
|
+
const SidebarMenuSubItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
|
|
250
|
+
className: cn("group/menu-sub-item relative", className),
|
|
251
|
+
"data-sidebar": "menu-sub-item",
|
|
252
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
253
|
+
...props
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
//#endregion
|
|
257
|
+
//#region src/components/sidebar/sidebar-provider.tsx
|
|
258
|
+
const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) => {
|
|
259
|
+
const isMobile = useIsMobile();
|
|
260
|
+
const [openMobile, setOpenMobile] = useState(false);
|
|
261
|
+
const [_open, _setOpen] = useState(defaultOpen);
|
|
262
|
+
const open = openProp ?? _open;
|
|
263
|
+
const setOpen = useCallback((value) => {
|
|
264
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
265
|
+
if (setOpenProp) setOpenProp(openState);
|
|
266
|
+
else _setOpen(openState);
|
|
267
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
268
|
+
}, [setOpenProp, open]);
|
|
269
|
+
const toggleSidebar = useCallback(() => isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev), [isMobile, setOpen]);
|
|
270
|
+
useEffect(() => {
|
|
271
|
+
const handleKeyDown = (event) => {
|
|
272
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
273
|
+
event.preventDefault();
|
|
274
|
+
toggleSidebar();
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
278
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
279
|
+
}, [toggleSidebar]);
|
|
280
|
+
const state = open ? "expanded" : "collapsed";
|
|
281
|
+
const contextValue = useMemo(() => ({
|
|
282
|
+
state,
|
|
283
|
+
open,
|
|
284
|
+
setOpen,
|
|
285
|
+
isMobile,
|
|
286
|
+
openMobile,
|
|
287
|
+
setOpenMobile,
|
|
288
|
+
toggleSidebar
|
|
289
|
+
}), [
|
|
290
|
+
state,
|
|
291
|
+
open,
|
|
292
|
+
setOpen,
|
|
293
|
+
isMobile,
|
|
294
|
+
openMobile,
|
|
295
|
+
toggleSidebar
|
|
296
|
+
]);
|
|
297
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
298
|
+
value: contextValue,
|
|
299
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
300
|
+
className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
|
|
301
|
+
"data-slot": "sidebar-wrapper",
|
|
302
|
+
style: {
|
|
303
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
304
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
305
|
+
...style
|
|
306
|
+
},
|
|
307
|
+
...props,
|
|
308
|
+
children
|
|
309
|
+
})
|
|
310
|
+
});
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
//#endregion
|
|
314
|
+
//#region src/components/sidebar/sidebar-rail.tsx
|
|
315
|
+
const SidebarRail = ({ className, ...props }) => {
|
|
316
|
+
const { toggleSidebar } = useSidebar();
|
|
317
|
+
return /* @__PURE__ */ jsx("button", {
|
|
318
|
+
type: "button",
|
|
319
|
+
"aria-label": "Toggle Sidebar",
|
|
320
|
+
className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offExamples]:translate-x-0 hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:after:left-full", "[[data-side=left][data-collapsible=offExamples]_&]:-right-2", "[[data-side=right][data-collapsible=offExamples]_&]:-left-2", className),
|
|
321
|
+
"data-sidebar": "rail",
|
|
322
|
+
"data-slot": "sidebar-rail",
|
|
323
|
+
onClick: toggleSidebar,
|
|
324
|
+
tabIndex: -1,
|
|
325
|
+
title: "Toggle Sidebar",
|
|
326
|
+
...props
|
|
327
|
+
});
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
//#endregion
|
|
331
|
+
//#region src/components/sidebar/sidebar-separator.tsx
|
|
332
|
+
const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separator, {
|
|
333
|
+
className: cn("w-auto bg-sidebar-border", className),
|
|
334
|
+
"data-sidebar": "separator",
|
|
335
|
+
"data-slot": "sidebar-separator",
|
|
336
|
+
...props
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
//#endregion
|
|
340
|
+
//#region src/components/sidebar/sidebar-trigger.tsx
|
|
341
|
+
const SidebarTrigger = ({ className, onClick, ...props }) => {
|
|
342
|
+
const { toggleSidebar } = useSidebar();
|
|
343
|
+
const handleClick = useCallback((event) => {
|
|
344
|
+
onClick?.(event);
|
|
345
|
+
toggleSidebar();
|
|
346
|
+
}, [onClick, toggleSidebar]);
|
|
347
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
348
|
+
className: cn(className),
|
|
349
|
+
"data-sidebar": "trigger",
|
|
350
|
+
"data-slot": "sidebar-trigger",
|
|
351
|
+
onClick: handleClick,
|
|
352
|
+
size: "icon-sm",
|
|
353
|
+
variant: "ghost",
|
|
354
|
+
...props,
|
|
355
|
+
children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
|
|
356
|
+
icon: SidebarLeftIcon,
|
|
357
|
+
strokeWidth: 2
|
|
358
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
359
|
+
className: "sr-only",
|
|
360
|
+
children: "Toggle Sidebar"
|
|
361
|
+
})]
|
|
362
|
+
});
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
//#endregion
|
|
366
|
+
export { SidebarContent as C, SidebarFooter as S, SidebarHeader as _, SidebarMenuSubItem as a, SidebarGroupAction as b, SidebarMenuSkeleton as c, useSidebar as d, SidebarMenuBadge as f, SidebarInput as g, SidebarInset as h, SidebarProvider as i, SidebarMenuItem as l, SidebarMenu as m, SidebarSeparator as n, SidebarMenuSubButton as o, SidebarMenuAction as p, SidebarRail as r, SidebarMenuSub as s, SidebarTrigger as t, SidebarMenuButton as u, SidebarGroupLabel as v, SIDEBAR_WIDTH_MOBILE as w, SidebarGroup as x, SidebarGroupContent as y };
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
@theme inline {
|
|
2
|
+
--color-background: var(--background);
|
|
3
|
+
--color-foreground: var(--foreground);
|
|
4
|
+
--color-card: var(--card);
|
|
5
|
+
--color-card-foreground: var(--card-foreground);
|
|
6
|
+
--color-popover: var(--popover);
|
|
7
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
8
|
+
--color-primary: var(--primary);
|
|
9
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
10
|
+
--color-secondary: var(--secondary);
|
|
11
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
12
|
+
--color-muted: var(--muted);
|
|
13
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
14
|
+
--color-accent: var(--accent);
|
|
15
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
16
|
+
--color-destructive: var(--destructive);
|
|
17
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
18
|
+
--color-success: var(--success);
|
|
19
|
+
--color-success-foreground: var(--success-foreground);
|
|
20
|
+
--color-success-border: var(--success-border);
|
|
21
|
+
--color-warning: var(--warning);
|
|
22
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
23
|
+
--color-warning-border: var(--warning-border);
|
|
24
|
+
--color-info: var(--info);
|
|
25
|
+
--color-info-foreground: var(--info-foreground);
|
|
26
|
+
--color-info-border: var(--info-border);
|
|
27
|
+
--color-danger: var(--danger);
|
|
28
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
29
|
+
--color-danger-border: var(--danger-border);
|
|
30
|
+
--color-border: var(--border);
|
|
31
|
+
--color-input: var(--input);
|
|
32
|
+
--color-ring: var(--ring);
|
|
33
|
+
--color-chart-1: var(--chart-1);
|
|
34
|
+
--color-chart-2: var(--chart-2);
|
|
35
|
+
--color-chart-3: var(--chart-3);
|
|
36
|
+
--color-chart-4: var(--chart-4);
|
|
37
|
+
--color-chart-5: var(--chart-5);
|
|
38
|
+
--color-sidebar: var(--sidebar);
|
|
39
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
40
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
41
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
42
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
43
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
44
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
45
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
46
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
47
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
48
|
+
--radius-lg: var(--radius);
|
|
49
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:root {
|
|
53
|
+
--radius: 0.625rem;
|
|
54
|
+
--background: oklch(1 0 0);
|
|
55
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
56
|
+
--card: oklch(1 0 0);
|
|
57
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
58
|
+
--popover: oklch(1 0 0);
|
|
59
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
60
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
61
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
62
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
63
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
64
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
65
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
66
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
67
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
68
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
69
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
70
|
+
--success: oklch(0.94 0.04 156);
|
|
71
|
+
--success-foreground: oklch(0.32 0.09 156);
|
|
72
|
+
--success-border: oklch(0.7 0.14 156);
|
|
73
|
+
--warning: oklch(0.95 0.05 85);
|
|
74
|
+
--warning-foreground: oklch(0.4 0.1 75);
|
|
75
|
+
--warning-border: oklch(0.75 0.15 75);
|
|
76
|
+
--info: oklch(0.94 0.04 245);
|
|
77
|
+
--info-foreground: oklch(0.35 0.1 245);
|
|
78
|
+
--info-border: oklch(0.7 0.12 245);
|
|
79
|
+
--danger: oklch(0.94 0.04 25);
|
|
80
|
+
--danger-foreground: oklch(0.45 0.18 25);
|
|
81
|
+
--danger-border: oklch(0.7 0.18 25);
|
|
82
|
+
--border: oklch(0.92 0.004 286.32);
|
|
83
|
+
--input: oklch(0.92 0.004 286.32);
|
|
84
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
85
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
86
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
87
|
+
--chart-3: oklch(0.398 0.072 27.392);
|
|
88
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
89
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
90
|
+
--sidebar: oklch(0.985 0 0);
|
|
91
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
92
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
93
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
94
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
95
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
96
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
97
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.dark {
|
|
101
|
+
--background: oklch(0.141 0.005 285.823);
|
|
102
|
+
--foreground: oklch(0.985 0 0);
|
|
103
|
+
--card: oklch(0.21 0.006 285.885);
|
|
104
|
+
--card-foreground: oklch(0.985 0 0);
|
|
105
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
106
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
107
|
+
--primary: oklch(0.92 0.004 286.32);
|
|
108
|
+
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
109
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
110
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
111
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
112
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
113
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
114
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
115
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
116
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
117
|
+
--success: oklch(0.25 0.06 156);
|
|
118
|
+
--success-foreground: oklch(0.82 0.12 156);
|
|
119
|
+
--success-border: oklch(0.45 0.12 156);
|
|
120
|
+
--warning: oklch(0.25 0.05 85);
|
|
121
|
+
--warning-foreground: oklch(0.85 0.12 85);
|
|
122
|
+
--warning-border: oklch(0.5 0.12 75);
|
|
123
|
+
--info: oklch(0.25 0.04 245);
|
|
124
|
+
--info-foreground: oklch(0.82 0.1 245);
|
|
125
|
+
--info-border: oklch(0.45 0.1 245);
|
|
126
|
+
--danger: oklch(0.25 0.05 25);
|
|
127
|
+
--danger-foreground: oklch(0.82 0.15 25);
|
|
128
|
+
--danger-border: oklch(0.5 0.15 25);
|
|
129
|
+
--border: oklch(1 0 0 / 10%);
|
|
130
|
+
--input: oklch(1 0 0 / 15%);
|
|
131
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
132
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
133
|
+
--chart-2: oklch(0.696 0.171 62.48);
|
|
134
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
135
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
136
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
137
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
138
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
139
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
140
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
141
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
142
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
143
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
144
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
145
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/table/table-body.d.ts
|
|
5
|
+
declare const TableBody: ({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}: ComponentProps<"tbody">) => react_jsx_runtime0.JSX.Element;
|
|
9
|
+
//#endregion
|
|
10
|
+
//#region src/components/table/table-caption.d.ts
|
|
11
|
+
declare const TableCaption: ({
|
|
12
|
+
className,
|
|
13
|
+
...props
|
|
14
|
+
}: ComponentProps<"caption">) => react_jsx_runtime0.JSX.Element;
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/components/table/table-cell.d.ts
|
|
17
|
+
declare const TableCell: ({
|
|
18
|
+
className,
|
|
19
|
+
...props
|
|
20
|
+
}: ComponentProps<"td">) => react_jsx_runtime0.JSX.Element;
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/components/table/table-footer.d.ts
|
|
23
|
+
declare const TableFooter: ({
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: ComponentProps<"tfoot">) => react_jsx_runtime0.JSX.Element;
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/components/table/table-head.d.ts
|
|
29
|
+
declare const TableHead: ({
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}: ComponentProps<"th">) => react_jsx_runtime0.JSX.Element;
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/components/table/table-header.d.ts
|
|
35
|
+
declare const TableHeader: ({
|
|
36
|
+
className,
|
|
37
|
+
...props
|
|
38
|
+
}: ComponentProps<"thead">) => react_jsx_runtime0.JSX.Element;
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/components/table/table-row.d.ts
|
|
41
|
+
declare const TableRow: ({
|
|
42
|
+
className,
|
|
43
|
+
...props
|
|
44
|
+
}: ComponentProps<"tr">) => react_jsx_runtime0.JSX.Element;
|
|
45
|
+
//#endregion
|
|
46
|
+
export { TableCell as a, TableFooter as i, TableHeader as n, TableCaption as o, TableHead as r, TableBody as s, TableRow as t };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { cn } from "tailwind-variants";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/table/table-body.tsx
|
|
5
|
+
const TableBody = ({ className, ...props }) => /* @__PURE__ */ jsx("tbody", {
|
|
6
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
7
|
+
"data-slot": "table-body",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
//#endregion
|
|
12
|
+
//#region src/components/table/table-caption.tsx
|
|
13
|
+
const TableCaption = ({ className, ...props }) => /* @__PURE__ */ jsx("caption", {
|
|
14
|
+
className: cn("mt-4 text-muted-foreground text-sm", className),
|
|
15
|
+
"data-slot": "table-caption",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/table/table-cell.tsx
|
|
21
|
+
const TableCell = ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
|
|
22
|
+
className: cn("whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0", className),
|
|
23
|
+
"data-slot": "table-cell",
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/components/table/table-footer.tsx
|
|
29
|
+
const TableFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("tfoot", {
|
|
30
|
+
className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
|
|
31
|
+
"data-slot": "table-footer",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/components/table/table-head.tsx
|
|
37
|
+
const TableHead = ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
|
|
38
|
+
className: cn("h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0", className),
|
|
39
|
+
"data-slot": "table-head",
|
|
40
|
+
...props
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region src/components/table/table-header.tsx
|
|
45
|
+
const TableHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("thead", {
|
|
46
|
+
className: cn("[&_tr]:border-b", className),
|
|
47
|
+
"data-slot": "table-header",
|
|
48
|
+
...props
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
//#endregion
|
|
52
|
+
//#region src/components/table/table-row.tsx
|
|
53
|
+
const TableRow = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
|
|
54
|
+
className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
|
|
55
|
+
"data-slot": "table-row",
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
//#endregion
|
|
60
|
+
export { TableCell as a, TableFooter as i, TableHeader as n, TableCaption as o, TableHead as r, TableBody as s, TableRow as t };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { cn, tv } from "tailwind-variants";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
4
|
+
|
|
5
|
+
//#region src/components/tabs/tabs-content.tsx
|
|
6
|
+
const TabsContent = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
7
|
+
className: cn("flex-1 text-sm outline-none", className),
|
|
8
|
+
"data-slot": "tabs-content",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
//#endregion
|
|
13
|
+
//#region src/components/tabs/tabs-list.tsx
|
|
14
|
+
const tabsListVariants = tv({
|
|
15
|
+
base: "group/tabs-list inline-flex w-fit items-center justify-center rounded-md p-1 text-muted-foreground data-[variant=line]:rounded-none group-data-[orientation=vertical]/tabs:h-fit group-data-horizontal/tabs:h-8 group-data-[orientation=vertical]/tabs:flex-col",
|
|
16
|
+
variants: { variant: {
|
|
17
|
+
default: "bg-muted",
|
|
18
|
+
line: "gap-1 bg-transparent"
|
|
19
|
+
} },
|
|
20
|
+
defaultVariants: { variant: "default" }
|
|
21
|
+
});
|
|
22
|
+
const TabsList = ({ className, variant = "default", ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
|
|
23
|
+
className: cn(tabsListVariants({ variant }), className),
|
|
24
|
+
"data-slot": "tabs-list",
|
|
25
|
+
"data-variant": variant,
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/components/tabs/tabs-trigger.tsx
|
|
31
|
+
const TabsTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
|
|
32
|
+
className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
|
|
33
|
+
"data-slot": "tabs-trigger",
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
export { TabsList as n, TabsContent as r, TabsTrigger as t };
|