@mesob/ui 0.2.1 → 0.2.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/alert-dialog.js +14 -14
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/app-header-actions.js +70 -70
- package/dist/components/app-header-actions.js.map +1 -1
- package/dist/components/app-sidebar.js +57 -52
- package/dist/components/app-sidebar.js.map +1 -1
- package/dist/components/button.js +4 -4
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.js +12 -12
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/carousel.js +14 -14
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/data-table/index.js +57 -57
- package/dist/components/data-table/index.js.map +1 -1
- package/dist/components/entity/index.js +177 -177
- package/dist/components/entity/index.js.map +1 -1
- package/dist/components/input-group.js +15 -15
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/page/index.js +21 -21
- package/dist/components/page/index.js.map +1 -1
- package/dist/components/pagination.js +12 -12
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/section/index.js +15 -15
- package/dist/components/section/index.js.map +1 -1
- package/dist/components/shell.js +47 -42
- package/dist/components/shell.js.map +1 -1
- package/dist/components/sidebar-context.d.ts +19 -0
- package/dist/components/sidebar-context.js +17 -0
- package/dist/components/sidebar-context.js.map +1 -0
- package/dist/components/sidebar.d.ts +2 -15
- package/dist/components/sidebar.js +82 -77
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/spotlight-search.js +38 -38
- package/dist/components/spotlight-search.js.map +1 -1
- package/dist/components/theme-toggle.js +8 -8
- package/dist/components/theme-toggle.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/section/section.tsx","../../../src/components/button.tsx","../../../src/components/card.tsx","../../../src/components/collapsible.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 type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { Button } from '../button';\nimport { Card } from '../card';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '../collapsible';\n\ntype SectionProps = {\n title: ReactNode;\n children: ReactNode;\n defaultOpen?: boolean;\n className?: string;\n headerClassName?: string;\n contentClassName?: string;\n};\n\nexport function Section({\n title,\n children,\n defaultOpen = false,\n className,\n headerClassName,\n contentClassName,\n}: SectionProps) {\n const [open, setOpen] = useState(defaultOpen);\n\n return (\n <Collapsible open={open} onOpenChange={setOpen}>\n <Card className={cn('gap-0 p-0', className)}>\n <div\n className={cn(\n 'flex items-center justify-between gap-2 p-4',\n open && 'border-b',\n\n headerClassName,\n )}\n >\n <div className=\"text-lg font-semibold\">{title}</div>\n <CollapsibleTrigger asChild>\n <Button variant=\"outline\" size=\"sm\">\n {open ? 'Collapse' : 'Expand'}\n </Button>\n </CollapsibleTrigger>\n </div>\n {open && (\n <CollapsibleContent className=\"overflow-hidden\">\n <div className={cn('p-4', contentClassName)}>{children}</div>\n </CollapsibleContent>\n )}\n </Card>\n </Collapsible>\n );\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:\n 'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n outline:\n 'border border-input 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-600 dark:hover:bg-secondary-400',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 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\ntype ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n };\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n leftIcon,\n rightIcon,\n children,\n ...props\n}: ButtonProps) {\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 {leftIcon}\n
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/section/section.tsx","../../../src/components/button.tsx","../../../src/components/card.tsx","../../../src/components/collapsible.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 type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { Button } from '../button';\nimport { Card } from '../card';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '../collapsible';\n\ntype SectionProps = {\n title: ReactNode;\n children: ReactNode;\n defaultOpen?: boolean;\n className?: string;\n headerClassName?: string;\n contentClassName?: string;\n};\n\nexport function Section({\n title,\n children,\n defaultOpen = false,\n className,\n headerClassName,\n contentClassName,\n}: SectionProps) {\n const [open, setOpen] = useState(defaultOpen);\n\n return (\n <Collapsible open={open} onOpenChange={setOpen}>\n <Card className={cn('gap-0 p-0', className)}>\n <div\n className={cn(\n 'flex items-center justify-between gap-2 p-4',\n open && 'border-b',\n\n headerClassName,\n )}\n >\n <div className=\"text-lg font-semibold\">{title}</div>\n <CollapsibleTrigger asChild>\n <Button variant=\"outline\" size=\"sm\">\n {open ? 'Collapse' : 'Expand'}\n </Button>\n </CollapsibleTrigger>\n </div>\n {open && (\n <CollapsibleContent className=\"overflow-hidden\">\n <div className={cn('p-4', contentClassName)}>{children}</div>\n </CollapsibleContent>\n )}\n </Card>\n </Collapsible>\n );\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:\n 'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n outline:\n 'border border-input 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-600 dark:hover:bg-secondary-400',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 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\ntype ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n };\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n leftIcon,\n rightIcon,\n children,\n ...props\n}: ButtonProps) {\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 {asChild ? (\n children\n ) : (\n <>\n {leftIcon}\n {children}\n {rightIcon}\n </>\n )}\n </Comp>\n );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xl border py-6',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn('leading-none font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n 'col-start-2 row-span-2 row-start-1 self-start justify-self-end',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn('px-6', className)}\n {...props}\n />\n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn('flex items-center px-6 [.border-t]:pt-6', className)}\n {...props}\n />\n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\n","'use client';\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\n\nfunction Collapsible({\n ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n return (\n <CollapsiblePrimitive.CollapsibleTrigger\n data-slot=\"collapsible-trigger\"\n {...props}\n />\n );\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n return (\n <CollapsiblePrimitive.CollapsibleContent\n data-slot=\"collapsible-content\"\n {...props}\n />\n );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":"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","names":["jsx","jsx","CollapsibleTrigger","CollapsibleContent","jsx","jsxs","CollapsibleTrigger","CollapsibleContent"]}
|
package/dist/components/shell.js
CHANGED
|
@@ -210,7 +210,7 @@ function Separator({
|
|
|
210
210
|
// src/components/button.tsx
|
|
211
211
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
212
212
|
import { cva } from "class-variance-authority";
|
|
213
|
-
import { jsxs as jsxs4 } from "react/jsx-runtime";
|
|
213
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
214
214
|
var buttonVariants = cva(
|
|
215
215
|
"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",
|
|
216
216
|
{
|
|
@@ -249,31 +249,31 @@ function Button({
|
|
|
249
249
|
...props
|
|
250
250
|
}) {
|
|
251
251
|
const Comp = asChild ? Slot2 : "button";
|
|
252
|
-
return /* @__PURE__ */
|
|
252
|
+
return /* @__PURE__ */ jsx6(
|
|
253
253
|
Comp,
|
|
254
254
|
{
|
|
255
255
|
"data-slot": "button",
|
|
256
256
|
className: cn(buttonVariants({ variant, size, className })),
|
|
257
257
|
...props,
|
|
258
|
-
children: [
|
|
258
|
+
children: asChild ? children : /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
259
259
|
leftIcon,
|
|
260
260
|
children,
|
|
261
261
|
rightIcon
|
|
262
|
-
]
|
|
262
|
+
] })
|
|
263
263
|
}
|
|
264
264
|
);
|
|
265
265
|
}
|
|
266
266
|
|
|
267
267
|
// src/components/input.tsx
|
|
268
|
-
import { jsx as
|
|
268
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
269
269
|
|
|
270
270
|
// src/components/sheet.tsx
|
|
271
271
|
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
272
272
|
import { IconX } from "@tabler/icons-react";
|
|
273
|
-
import { jsx as
|
|
273
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
274
274
|
|
|
275
275
|
// src/components/skeleton.tsx
|
|
276
|
-
import { jsx as
|
|
276
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
277
277
|
|
|
278
278
|
// src/hooks/use-mobile.ts
|
|
279
279
|
import * as React from "react";
|
|
@@ -298,8 +298,21 @@ function useIsMobile() {
|
|
|
298
298
|
import { Slot as Slot3 } from "@radix-ui/react-slot";
|
|
299
299
|
import { IconMenu2 } from "@tabler/icons-react";
|
|
300
300
|
import { cva as cva2 } from "class-variance-authority";
|
|
301
|
+
import * as React3 from "react";
|
|
302
|
+
|
|
303
|
+
// src/components/sidebar-context.tsx
|
|
301
304
|
import * as React2 from "react";
|
|
302
|
-
|
|
305
|
+
var SidebarContext = React2.createContext(null);
|
|
306
|
+
function useSidebar() {
|
|
307
|
+
const context = React2.useContext(SidebarContext);
|
|
308
|
+
if (!context) {
|
|
309
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
310
|
+
}
|
|
311
|
+
return context;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
// src/components/sidebar.tsx
|
|
315
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
303
316
|
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
304
317
|
var SIDEBAR_WIDTH_COOKIE = "sidebar_width";
|
|
305
318
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
@@ -322,14 +335,6 @@ function getWidthFromCookie() {
|
|
|
322
335
|
function setWidthCookie(width) {
|
|
323
336
|
document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
324
337
|
}
|
|
325
|
-
var SidebarContext = React2.createContext(null);
|
|
326
|
-
function useSidebar() {
|
|
327
|
-
const context = React2.useContext(SidebarContext);
|
|
328
|
-
if (!context) {
|
|
329
|
-
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
330
|
-
}
|
|
331
|
-
return context;
|
|
332
|
-
}
|
|
333
338
|
function SidebarProvider({
|
|
334
339
|
defaultOpen = true,
|
|
335
340
|
open: openProp,
|
|
@@ -340,16 +345,16 @@ function SidebarProvider({
|
|
|
340
345
|
...props
|
|
341
346
|
}) {
|
|
342
347
|
const isMobile = useIsMobile();
|
|
343
|
-
const [openMobile, setOpenMobile] =
|
|
344
|
-
const [width, setWidthState] =
|
|
345
|
-
const setWidth =
|
|
348
|
+
const [openMobile, setOpenMobile] = React3.useState(false);
|
|
349
|
+
const [width, setWidthState] = React3.useState(getWidthFromCookie);
|
|
350
|
+
const setWidth = React3.useCallback((w) => {
|
|
346
351
|
const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));
|
|
347
352
|
setWidthState(clamped);
|
|
348
353
|
setWidthCookie(clamped);
|
|
349
354
|
}, []);
|
|
350
|
-
const [_open, _setOpen] =
|
|
355
|
+
const [_open, _setOpen] = React3.useState(defaultOpen);
|
|
351
356
|
const open = openProp ?? _open;
|
|
352
|
-
const setOpen =
|
|
357
|
+
const setOpen = React3.useCallback(
|
|
353
358
|
(value) => {
|
|
354
359
|
const openState = typeof value === "function" ? value(open) : value;
|
|
355
360
|
if (setOpenProp) {
|
|
@@ -361,10 +366,10 @@ function SidebarProvider({
|
|
|
361
366
|
},
|
|
362
367
|
[open, setOpenProp]
|
|
363
368
|
);
|
|
364
|
-
const toggleSidebar =
|
|
369
|
+
const toggleSidebar = React3.useCallback(() => {
|
|
365
370
|
return isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
|
|
366
371
|
}, [isMobile, setOpen]);
|
|
367
|
-
|
|
372
|
+
React3.useEffect(() => {
|
|
368
373
|
const handleKeyDown = (event) => {
|
|
369
374
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
370
375
|
event.preventDefault();
|
|
@@ -389,7 +394,7 @@ function SidebarProvider({
|
|
|
389
394
|
maxWidth: SIDEBAR_WIDTH_MAX
|
|
390
395
|
};
|
|
391
396
|
const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;
|
|
392
|
-
return /* @__PURE__ */
|
|
397
|
+
return /* @__PURE__ */ jsx10(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx10(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx10(
|
|
393
398
|
"div",
|
|
394
399
|
{
|
|
395
400
|
"data-slot": "sidebar-wrapper",
|
|
@@ -427,14 +432,14 @@ function SidebarTrigger({
|
|
|
427
432
|
},
|
|
428
433
|
...props,
|
|
429
434
|
children: [
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
435
|
+
/* @__PURE__ */ jsx10(IconMenu2, {}),
|
|
436
|
+
/* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
432
437
|
]
|
|
433
438
|
}
|
|
434
439
|
);
|
|
435
440
|
}
|
|
436
441
|
function SidebarInset({ className, ...props }) {
|
|
437
|
-
return /* @__PURE__ */
|
|
442
|
+
return /* @__PURE__ */ jsx10(
|
|
438
443
|
"main",
|
|
439
444
|
{
|
|
440
445
|
"data-slot": "sidebar-inset",
|
|
@@ -479,20 +484,20 @@ import {
|
|
|
479
484
|
import { useTheme } from "next-themes";
|
|
480
485
|
import { Toaster as Sonner } from "sonner";
|
|
481
486
|
import { toast } from "sonner";
|
|
482
|
-
import { jsx as
|
|
487
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
483
488
|
var Toaster = ({ ...props }) => {
|
|
484
489
|
const { theme = "system" } = useTheme();
|
|
485
|
-
return /* @__PURE__ */
|
|
490
|
+
return /* @__PURE__ */ jsx11(
|
|
486
491
|
Sonner,
|
|
487
492
|
{
|
|
488
493
|
theme,
|
|
489
494
|
className: "toaster group",
|
|
490
495
|
icons: {
|
|
491
|
-
success: /* @__PURE__ */
|
|
492
|
-
info: /* @__PURE__ */
|
|
493
|
-
warning: /* @__PURE__ */
|
|
494
|
-
error: /* @__PURE__ */
|
|
495
|
-
loading: /* @__PURE__ */
|
|
496
|
+
success: /* @__PURE__ */ jsx11(IconCircleCheck, { className: "size-4" }),
|
|
497
|
+
info: /* @__PURE__ */ jsx11(IconInfoCircle, { className: "size-4" }),
|
|
498
|
+
warning: /* @__PURE__ */ jsx11(IconAlertTriangle, { className: "size-4" }),
|
|
499
|
+
error: /* @__PURE__ */ jsx11(IconX2, { className: "size-4" }),
|
|
500
|
+
loading: /* @__PURE__ */ jsx11(IconLoader2, { className: "size-4 animate-spin" })
|
|
496
501
|
},
|
|
497
502
|
style: {
|
|
498
503
|
"--normal-bg": "var(--popover)",
|
|
@@ -506,7 +511,7 @@ var Toaster = ({ ...props }) => {
|
|
|
506
511
|
};
|
|
507
512
|
|
|
508
513
|
// src/components/shell.tsx
|
|
509
|
-
import { jsx as
|
|
514
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
510
515
|
function Shell({
|
|
511
516
|
sidebar,
|
|
512
517
|
headerActions,
|
|
@@ -514,37 +519,37 @@ function Shell({
|
|
|
514
519
|
showToaster = true,
|
|
515
520
|
contentClassName
|
|
516
521
|
}) {
|
|
517
|
-
return /* @__PURE__ */
|
|
522
|
+
return /* @__PURE__ */ jsx12(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs7(SidebarProvider, { children: [
|
|
518
523
|
sidebar,
|
|
519
524
|
/* @__PURE__ */ jsxs7(SidebarInset, { children: [
|
|
520
525
|
/* @__PURE__ */ jsxs7("header", { className: "flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4", children: [
|
|
521
526
|
/* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
|
|
522
|
-
/* @__PURE__ */
|
|
527
|
+
/* @__PURE__ */ jsx12(SidebarTrigger, { className: "-ml-1" }),
|
|
523
528
|
/* @__PURE__ */ jsxs7("div", { className: "hidden md:flex md:items-center md:gap-2", children: [
|
|
524
|
-
/* @__PURE__ */
|
|
529
|
+
/* @__PURE__ */ jsx12(
|
|
525
530
|
Separator,
|
|
526
531
|
{
|
|
527
532
|
orientation: "vertical",
|
|
528
533
|
className: "mr-2 data-[orientation=vertical]:h-4"
|
|
529
534
|
}
|
|
530
535
|
),
|
|
531
|
-
/* @__PURE__ */
|
|
536
|
+
/* @__PURE__ */ jsx12(AppBreadcrumbs, {})
|
|
532
537
|
] })
|
|
533
538
|
] }),
|
|
534
539
|
headerActions
|
|
535
540
|
] }),
|
|
536
|
-
/* @__PURE__ */
|
|
541
|
+
/* @__PURE__ */ jsx12(
|
|
537
542
|
"div",
|
|
538
543
|
{
|
|
539
544
|
className: cn(
|
|
540
545
|
"flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4",
|
|
541
546
|
contentClassName
|
|
542
547
|
),
|
|
543
|
-
children: /* @__PURE__ */
|
|
548
|
+
children: /* @__PURE__ */ jsx12("div", { className: "mx-auto w-full max-w-7xl", children })
|
|
544
549
|
}
|
|
545
550
|
)
|
|
546
551
|
] }),
|
|
547
|
-
showToaster && /* @__PURE__ */
|
|
552
|
+
showToaster && /* @__PURE__ */ jsx12(Toaster, {})
|
|
548
553
|
] }) });
|
|
549
554
|
}
|
|
550
555
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/breadcrumb.tsx","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/components/app-breadcrumbs.tsx","../../src/components/separator.tsx","../../src/components/button.tsx","../../src/components/input.tsx","../../src/components/sheet.tsx","../../src/components/skeleton.tsx","../../src/hooks/use-mobile.ts","../../src/components/sidebar.tsx","../../src/components/sonner.tsx","../../src/components/shell.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 { IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {\n return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n return (\n <ol\n data-slot=\"breadcrumb-list\"\n className={cn(\n 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"breadcrumb-item\"\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbLink({\n asChild,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"breadcrumb-link\"\n className={cn('hover:text-foreground transition-colors', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"breadcrumb-page\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground font-normal', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('[&>svg]:size-3.5', className)}\n {...props}\n >\n {children ?? <IconChevronRight />}\n </li>\n );\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex size-9 items-center justify-center', className)}\n {...props}\n >\n <IconDots className=\"size-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\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 children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n {children}\n </TooltipPrimitive.Root>\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","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n type ComponentType,\n createContext,\n type ReactNode,\n useContext,\n useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n href: string;\n children: ReactNode;\n className?: string;\n onClick?: () => void;\n};\n\nexport type Router = {\n push: (href: string) => void;\n replace: (href: string) => void;\n back: () => void;\n forward: () => void;\n refresh: () => void;\n prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n linkComponent?: ComponentType<MesobLinkProps>;\n t?: (key: string, params?: Record<string, string | number>) => string;\n router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n children: ReactNode;\n linkComponent?: ComponentType<MesobLinkProps>;\n /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n useTranslation?: () => (\n key: string,\n params?: Record<string, string | number>,\n ) => string;\n /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n children,\n linkComponent,\n useTranslation,\n useRouter,\n}: MesobProviderProps) {\n const t = useTranslation?.();\n const router = useRouter?.();\n const value = useMemo<MesobContextValue>(\n () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n [linkComponent, t, router],\n );\n return (\n <MesobContext.Provider value={value}>\n <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n </MesobContext.Provider>\n );\n}\n\nexport function useMesob(): MesobContextValue | null {\n return useContext(MesobContext);\n}\n","'use client';\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@mesob/ui/components/breadcrumb';\nimport { useMesob } from '@mesob/ui/components/mesob-context';\nimport type * as React from 'react';\nimport {\n createContext,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype BreadcrumbItemData = {\n label: string;\n href?: string;\n};\n\ntype BreadcrumbContextValue = {\n items: BreadcrumbItemData[];\n setItems: (items: BreadcrumbItemData[]) => void;\n push: (item: BreadcrumbItemData) => void;\n pop: () => void;\n clear: () => void;\n};\n\nconst BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);\n\ntype UseBreadcrumbsOptions = {\n items?: BreadcrumbItemData[];\n};\n\nexport function useBreadcrumbs(options?: UseBreadcrumbsOptions) {\n const context = useContext(BreadcrumbContext);\n if (!context) {\n throw new Error('useBreadcrumbs must be used within BreadcrumbProvider');\n }\n\n const { setItems } = context;\n const prevItemsStrRef = useRef<string | undefined>(undefined);\n\n useEffect(() => {\n const items = options?.items;\n if (!items) {\n return;\n }\n const itemsStr = JSON.stringify(items);\n if (prevItemsStrRef.current !== itemsStr) {\n prevItemsStrRef.current = itemsStr;\n setItems(items);\n }\n }, [options?.items, setItems]);\n\n return context;\n}\n\ntype BreadcrumbProviderProps = {\n children: React.ReactNode;\n defaultItems?: BreadcrumbItemData[];\n};\n\nexport function BreadcrumbProvider({\n children,\n defaultItems = [],\n}: BreadcrumbProviderProps) {\n const [items, setItems] = useState<BreadcrumbItemData[]>(defaultItems);\n\n const push = useCallback((item: BreadcrumbItemData) => {\n setItems((prev) => [...prev, item]);\n }, []);\n\n const pop = useCallback(() => {\n setItems((prev) => prev.slice(0, -1));\n }, []);\n\n const clear = useCallback(() => {\n setItems([]);\n }, []);\n\n const value = useMemo(\n () => ({\n items,\n setItems,\n push,\n pop,\n clear,\n }),\n [items, push, pop, clear],\n );\n\n return (\n <BreadcrumbContext.Provider value={value}>\n {children}\n </BreadcrumbContext.Provider>\n );\n}\n\ntype AppBreadcrumbsProps = {\n linkComponent?: React.ComponentType<{\n href: string;\n children: React.ReactNode;\n className?: string;\n }>;\n className?: string;\n};\n\nexport function AppBreadcrumbs({\n linkComponent: linkProp,\n className,\n}: AppBreadcrumbsProps) {\n const mesob = useMesob();\n const Link = linkProp ?? mesob?.linkComponent;\n const { items } = useBreadcrumbs(undefined);\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <Breadcrumb className={className}>\n <BreadcrumbList>\n {items.map((crumb, index) => {\n let content: React.ReactNode;\n if (crumb.href) {\n if (Link) {\n content = (\n <Link href={crumb.href} className=\"hover:underline\">\n {crumb.label}\n </Link>\n );\n } else {\n content = (\n <a href={crumb.href} className=\"hover:underline\">\n {crumb.label}\n </a>\n );\n }\n } else {\n content = <BreadcrumbPage>{crumb.label}</BreadcrumbPage>;\n }\n\n return (\n <Fragment key={`${crumb.label}-${crumb.href ?? ''}-${index}`}>\n {index > 0 && <BreadcrumbSeparator className=\"hidden md:block\" />}\n <BreadcrumbItem className={index === 0 ? 'hidden md:block' : ''}>\n {content}\n </BreadcrumbItem>\n </Fragment>\n );\n })}\n </BreadcrumbList>\n </Breadcrumb>\n );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport type * as React from 'react';\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n decorative = true,\n ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n return (\n <SeparatorPrimitive.Root\n data-slot=\"separator\"\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Separator };\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:\n 'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n outline:\n 'border border-input 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-600 dark:hover:bg-secondary-400',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 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\ntype ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n };\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n leftIcon,\n rightIcon,\n children,\n ...props\n}: ButtonProps) {\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 {leftIcon}\n {children}\n {rightIcon}\n </Comp>\n );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n type={type}\n data-slot=\"input\"\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = 'right',\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: 'top' | 'right' | 'bottom' | 'left';\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n 'bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n side === 'right' &&\n 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n side === 'left' &&\n 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n side === 'top' &&\n 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n side === 'bottom' &&\n 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n className,\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <IconX className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-1.5 p-4', className)}\n {...props}\n />\n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n {...props}\n />\n );\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-foreground font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n","import { cn } from '@mesob/ui/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"skeleton\"\n className={cn('bg-accent animate-pulse rounded-md', className)}\n {...props}\n />\n );\n}\n\nexport { Skeleton };\n","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","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { Input } from '@mesob/ui/components/input';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from '@mesob/ui/components/sheet';\nimport { Skeleton } from '@mesob/ui/components/skeleton';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@mesob/ui/components/tooltip';\nimport { useIsMobile } from '@mesob/ui/hooks/use-mobile';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconMenu2 } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_WIDTH_COOKIE = 'sidebar_width';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH_DEFAULT = 256;\nconst SIDEBAR_WIDTH_MIN = 200;\nconst SIDEBAR_WIDTH_MAX = 480;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\nfunction getWidthFromCookie(): number {\n if (typeof document === 'undefined') {\n return SIDEBAR_WIDTH_DEFAULT;\n }\n const m = document.cookie.match(\n new RegExp(`(?:^|; )${SIDEBAR_WIDTH_COOKIE}=([^;]*)`),\n );\n const n = m ? Number(m[1]) : Number.NaN;\n return Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN && n <= SIDEBAR_WIDTH_MAX\n ? n\n : SIDEBAR_WIDTH_DEFAULT;\n}\n\nfunction setWidthCookie(width: number) {\n document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n}\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean | ((open: boolean) => boolean)) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n width: number;\n setWidth: (w: number) => void;\n minWidth: number;\n maxWidth: number;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n const [width, setWidthState] = React.useState(getWidthFromCookie);\n\n const setWidth = React.useCallback((w: number) => {\n const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));\n setWidthState(clamped);\n setWidthCookie(clamped);\n }, []);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [open, setOpenProp],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((value) => !value)\n : setOpen((value) => !value);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue: SidebarContextProps = {\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n width,\n setWidth,\n minWidth: SIDEBAR_WIDTH_MIN,\n maxWidth: SIDEBAR_WIDTH_MAX,\n };\n\n const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': sidebarWidthValue,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n 'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <div\n className=\"group peer text-sidebar-foreground hidden md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <IconMenu2 />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'bg-background relative flex w-full flex-1 flex-col',\n '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 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('bg-background h-8 w-full shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('bg-sidebar-border mx-2 w-auto', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button flex w-full 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-active focus-visible:ring-2 active:bg-sidebar-active 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=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-active',\n outline:\n '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))]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile}\n {...tooltip}\n />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(\n () => `${Math.floor(Math.random() * 40) + 50}%`,\n );\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"size-4 rounded-md\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'border-sidebar-border relative mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-active active:bg-sidebar-active [&>svg]:text-sidebar-primary flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n 'data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"]',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n","'use client';\n\nimport {\n IconAlertTriangle,\n IconCircleCheck,\n IconInfoCircle,\n IconLoader2,\n IconX,\n} from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, type ToasterProps } from 'sonner';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { theme = 'system' } = useTheme();\n\n return (\n <Sonner\n theme={theme as ToasterProps['theme']}\n className=\"toaster group\"\n icons={{\n success: <IconCircleCheck className=\"size-4\" />,\n info: <IconInfoCircle className=\"size-4\" />,\n warning: <IconAlertTriangle className=\"size-4\" />,\n error: <IconX className=\"size-4\" />,\n loading: <IconLoader2 className=\"size-4 animate-spin\" />,\n }}\n style={\n {\n '--normal-bg': 'var(--popover)',\n '--normal-text': 'var(--popover-foreground)',\n '--normal-border': 'var(--border)',\n '--border-radius': 'var(--radius)',\n } as React.CSSProperties & Record<string, string>\n }\n {...props}\n />\n );\n};\n\nexport { Toaster };\nexport { toast } from 'sonner';\n","'use client';\n\nimport {\n AppBreadcrumbs,\n BreadcrumbProvider,\n} from '@mesob/ui/components/app-breadcrumbs';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@mesob/ui/components/sidebar';\nimport { Toaster } from '@mesob/ui/components/sonner';\nimport { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\ntype ShellProps = {\n sidebar: React.ReactNode;\n headerActions?: React.ReactNode;\n children: React.ReactNode;\n showToaster?: boolean;\n contentClassName?: string;\n};\n\nexport function Shell({\n sidebar,\n headerActions,\n children,\n showToaster = true,\n contentClassName,\n}: ShellProps) {\n return (\n <BreadcrumbProvider>\n <SidebarProvider>\n {sidebar}\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4\">\n <div className=\"flex items-center gap-2\">\n <SidebarTrigger className=\"-ml-1\" />\n <div className=\"hidden md:flex md:items-center md:gap-2\">\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-[orientation=vertical]:h-4\"\n />\n <AppBreadcrumbs />\n </div>\n </div>\n {headerActions}\n </header>\n <div\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4',\n contentClassName,\n )}\n >\n <div className=\"mx-auto w-full max-w-7xl\">{children}</div>\n </div>\n </SidebarInset>\n {showToaster && <Toaster />}\n </SidebarProvider>\n </BreadcrumbProvider>\n );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","createContext","useContext","useMemo","jsx","jsxs","jsx","Slot","jsxs","jsx","jsx","jsxs","jsx","Slot","cva","React","jsx","jsxs","jsx","jsxs","jsx","jsx","cva","IconX","jsx","jsx","jsxs"]}
|
|
1
|
+
{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/breadcrumb.tsx","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/components/app-breadcrumbs.tsx","../../src/components/separator.tsx","../../src/components/button.tsx","../../src/components/input.tsx","../../src/components/sheet.tsx","../../src/components/skeleton.tsx","../../src/hooks/use-mobile.ts","../../src/components/sidebar.tsx","../../src/components/sidebar-context.tsx","../../src/components/sonner.tsx","../../src/components/shell.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 { IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {\n return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n return (\n <ol\n data-slot=\"breadcrumb-list\"\n className={cn(\n 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"breadcrumb-item\"\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbLink({\n asChild,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"breadcrumb-link\"\n className={cn('hover:text-foreground transition-colors', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"breadcrumb-page\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground font-normal', className)}\n {...props}\n />\n );\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('[&>svg]:size-3.5', className)}\n {...props}\n >\n {children ?? <IconChevronRight />}\n </li>\n );\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex size-9 items-center justify-center', className)}\n {...props}\n >\n <IconDots className=\"size-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\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 children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n {children}\n </TooltipPrimitive.Root>\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","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n type ComponentType,\n createContext,\n type ReactNode,\n useContext,\n useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n href: string;\n children: ReactNode;\n className?: string;\n onClick?: () => void;\n};\n\nexport type Router = {\n push: (href: string) => void;\n replace: (href: string) => void;\n back: () => void;\n forward: () => void;\n refresh: () => void;\n prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n linkComponent?: ComponentType<MesobLinkProps>;\n t?: (key: string, params?: Record<string, string | number>) => string;\n router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n children: ReactNode;\n linkComponent?: ComponentType<MesobLinkProps>;\n /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n useTranslation?: () => (\n key: string,\n params?: Record<string, string | number>,\n ) => string;\n /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n children,\n linkComponent,\n useTranslation,\n useRouter,\n}: MesobProviderProps) {\n const t = useTranslation?.();\n const router = useRouter?.();\n const value = useMemo<MesobContextValue>(\n () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n [linkComponent, t, router],\n );\n return (\n <MesobContext.Provider value={value}>\n <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n </MesobContext.Provider>\n );\n}\n\nexport function useMesob(): MesobContextValue | null {\n return useContext(MesobContext);\n}\n","'use client';\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@mesob/ui/components/breadcrumb';\nimport { useMesob } from '@mesob/ui/components/mesob-context';\nimport type * as React from 'react';\nimport {\n createContext,\n Fragment,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype BreadcrumbItemData = {\n label: string;\n href?: string;\n};\n\ntype BreadcrumbContextValue = {\n items: BreadcrumbItemData[];\n setItems: (items: BreadcrumbItemData[]) => void;\n push: (item: BreadcrumbItemData) => void;\n pop: () => void;\n clear: () => void;\n};\n\nconst BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);\n\ntype UseBreadcrumbsOptions = {\n items?: BreadcrumbItemData[];\n};\n\nexport function useBreadcrumbs(options?: UseBreadcrumbsOptions) {\n const context = useContext(BreadcrumbContext);\n if (!context) {\n throw new Error('useBreadcrumbs must be used within BreadcrumbProvider');\n }\n\n const { setItems } = context;\n const prevItemsStrRef = useRef<string | undefined>(undefined);\n\n useEffect(() => {\n const items = options?.items;\n if (!items) {\n return;\n }\n const itemsStr = JSON.stringify(items);\n if (prevItemsStrRef.current !== itemsStr) {\n prevItemsStrRef.current = itemsStr;\n setItems(items);\n }\n }, [options?.items, setItems]);\n\n return context;\n}\n\ntype BreadcrumbProviderProps = {\n children: React.ReactNode;\n defaultItems?: BreadcrumbItemData[];\n};\n\nexport function BreadcrumbProvider({\n children,\n defaultItems = [],\n}: BreadcrumbProviderProps) {\n const [items, setItems] = useState<BreadcrumbItemData[]>(defaultItems);\n\n const push = useCallback((item: BreadcrumbItemData) => {\n setItems((prev) => [...prev, item]);\n }, []);\n\n const pop = useCallback(() => {\n setItems((prev) => prev.slice(0, -1));\n }, []);\n\n const clear = useCallback(() => {\n setItems([]);\n }, []);\n\n const value = useMemo(\n () => ({\n items,\n setItems,\n push,\n pop,\n clear,\n }),\n [items, push, pop, clear],\n );\n\n return (\n <BreadcrumbContext.Provider value={value}>\n {children}\n </BreadcrumbContext.Provider>\n );\n}\n\ntype AppBreadcrumbsProps = {\n linkComponent?: React.ComponentType<{\n href: string;\n children: React.ReactNode;\n className?: string;\n }>;\n className?: string;\n};\n\nexport function AppBreadcrumbs({\n linkComponent: linkProp,\n className,\n}: AppBreadcrumbsProps) {\n const mesob = useMesob();\n const Link = linkProp ?? mesob?.linkComponent;\n const { items } = useBreadcrumbs(undefined);\n\n if (items.length === 0) {\n return null;\n }\n\n return (\n <Breadcrumb className={className}>\n <BreadcrumbList>\n {items.map((crumb, index) => {\n let content: React.ReactNode;\n if (crumb.href) {\n if (Link) {\n content = (\n <Link href={crumb.href} className=\"hover:underline\">\n {crumb.label}\n </Link>\n );\n } else {\n content = (\n <a href={crumb.href} className=\"hover:underline\">\n {crumb.label}\n </a>\n );\n }\n } else {\n content = <BreadcrumbPage>{crumb.label}</BreadcrumbPage>;\n }\n\n return (\n <Fragment key={`${crumb.label}-${crumb.href ?? ''}-${index}`}>\n {index > 0 && <BreadcrumbSeparator className=\"hidden md:block\" />}\n <BreadcrumbItem className={index === 0 ? 'hidden md:block' : ''}>\n {content}\n </BreadcrumbItem>\n </Fragment>\n );\n })}\n </BreadcrumbList>\n </Breadcrumb>\n );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport type * as React from 'react';\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n decorative = true,\n ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n return (\n <SeparatorPrimitive.Root\n data-slot=\"separator\"\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Separator };\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:\n 'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n outline:\n 'border border-input 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-600 dark:hover:bg-secondary-400',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 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\ntype ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n };\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n leftIcon,\n rightIcon,\n children,\n ...props\n}: ButtonProps) {\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 {asChild ? (\n children\n ) : (\n <>\n {leftIcon}\n {children}\n {rightIcon}\n </>\n )}\n </Comp>\n );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n type={type}\n data-slot=\"input\"\n className={cn(\n 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = 'right',\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: 'top' | 'right' | 'bottom' | 'left';\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n 'bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n side === 'right' &&\n 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',\n side === 'left' &&\n 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',\n side === 'top' &&\n 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',\n side === 'bottom' &&\n 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',\n className,\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <IconX className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-1.5 p-4', className)}\n {...props}\n />\n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n {...props}\n />\n );\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-foreground font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n","import { cn } from '@mesob/ui/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"skeleton\"\n className={cn('bg-accent animate-pulse rounded-md', className)}\n {...props}\n />\n );\n}\n\nexport { Skeleton };\n","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","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { Input } from '@mesob/ui/components/input';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from '@mesob/ui/components/sheet';\nimport { Skeleton } from '@mesob/ui/components/skeleton';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@mesob/ui/components/tooltip';\nimport { useIsMobile } from '@mesob/ui/hooks/use-mobile';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { IconMenu2 } from '@tabler/icons-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport {\n SidebarContext,\n type SidebarContextProps,\n useSidebar,\n} from './sidebar-context';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_WIDTH_COOKIE = 'sidebar_width';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH_DEFAULT = 256;\nconst SIDEBAR_WIDTH_MIN = 200;\nconst SIDEBAR_WIDTH_MAX = 480;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\nfunction getWidthFromCookie(): number {\n if (typeof document === 'undefined') {\n return SIDEBAR_WIDTH_DEFAULT;\n }\n const m = document.cookie.match(\n new RegExp(`(?:^|; )${SIDEBAR_WIDTH_COOKIE}=([^;]*)`),\n );\n const n = m ? Number(m[1]) : Number.NaN;\n return Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN && n <= SIDEBAR_WIDTH_MAX\n ? n\n : SIDEBAR_WIDTH_DEFAULT;\n}\n\nfunction setWidthCookie(width: number) {\n document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n const [width, setWidthState] = React.useState(getWidthFromCookie);\n\n const setWidth = React.useCallback((w: number) => {\n const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));\n setWidthState(clamped);\n setWidthCookie(clamped);\n }, []);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [open, setOpenProp],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((value) => !value)\n : setOpen((value) => !value);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue: SidebarContextProps = {\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n width,\n setWidth,\n minWidth: SIDEBAR_WIDTH_MIN,\n maxWidth: SIDEBAR_WIDTH_MAX,\n };\n\n const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': sidebarWidthValue,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n 'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <div\n className=\"group peer text-sidebar-foreground hidden md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <IconMenu2 />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'bg-background relative flex w-full flex-1 flex-col',\n '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 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('bg-background h-8 w-full shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('bg-sidebar-border mx-2 w-auto', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button flex w-full 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-active focus-visible:ring-2 active:bg-sidebar-active 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=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-active',\n outline:\n '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))]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile}\n {...tooltip}\n />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(\n () => `${Math.floor(Math.random() * 40) + 50}%`,\n );\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"size-4 rounded-md\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'border-sidebar-border relative mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-active active:bg-sidebar-active [&>svg]:text-sidebar-primary flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n 'data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[\"\"]',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { useSidebar } from './sidebar-context';\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n};\n","'use client';\n\nimport * as React from 'react';\n\nexport type SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean | ((open: boolean) => boolean)) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n width: number;\n setWidth: (w: number) => void;\n minWidth: number;\n maxWidth: number;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nexport { SidebarContext };\n","'use client';\n\nimport {\n IconAlertTriangle,\n IconCircleCheck,\n IconInfoCircle,\n IconLoader2,\n IconX,\n} from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner, type ToasterProps } from 'sonner';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { theme = 'system' } = useTheme();\n\n return (\n <Sonner\n theme={theme as ToasterProps['theme']}\n className=\"toaster group\"\n icons={{\n success: <IconCircleCheck className=\"size-4\" />,\n info: <IconInfoCircle className=\"size-4\" />,\n warning: <IconAlertTriangle className=\"size-4\" />,\n error: <IconX className=\"size-4\" />,\n loading: <IconLoader2 className=\"size-4 animate-spin\" />,\n }}\n style={\n {\n '--normal-bg': 'var(--popover)',\n '--normal-text': 'var(--popover-foreground)',\n '--normal-border': 'var(--border)',\n '--border-radius': 'var(--radius)',\n } as React.CSSProperties & Record<string, string>\n }\n {...props}\n />\n );\n};\n\nexport { Toaster };\nexport { toast } from 'sonner';\n","'use client';\n\nimport {\n AppBreadcrumbs,\n BreadcrumbProvider,\n} from '@mesob/ui/components/app-breadcrumbs';\nimport { Separator } from '@mesob/ui/components/separator';\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@mesob/ui/components/sidebar';\nimport { Toaster } from '@mesob/ui/components/sonner';\nimport { cn } from '@mesob/ui/lib/utils';\nimport type * as React from 'react';\n\ntype ShellProps = {\n sidebar: React.ReactNode;\n headerActions?: React.ReactNode;\n children: React.ReactNode;\n showToaster?: boolean;\n contentClassName?: string;\n};\n\nexport function Shell({\n sidebar,\n headerActions,\n children,\n showToaster = true,\n contentClassName,\n}: ShellProps) {\n return (\n <BreadcrumbProvider>\n <SidebarProvider>\n {sidebar}\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4\">\n <div className=\"flex items-center gap-2\">\n <SidebarTrigger className=\"-ml-1\" />\n <div className=\"hidden md:flex md:items-center md:gap-2\">\n <Separator\n orientation=\"vertical\"\n className=\"mr-2 data-[orientation=vertical]:h-4\"\n />\n <AppBreadcrumbs />\n </div>\n </div>\n {headerActions}\n </header>\n <div\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4',\n contentClassName,\n )}\n >\n <div className=\"mx-auto w-full max-w-7xl\">{children}</div>\n </div>\n </SidebarInset>\n {showToaster && <Toaster />}\n </SidebarProvider>\n </BreadcrumbProvider>\n );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","createContext","useContext","useMemo","jsx","jsxs","jsx","Slot","Fragment","jsx","jsxs","jsx","jsx","jsxs","jsx","Slot","cva","React","React","jsx","jsxs","jsx","jsxs","jsx","jsx","cva","IconX","jsx","jsx","jsxs"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type SidebarContextProps = {
|
|
4
|
+
state: 'expanded' | 'collapsed';
|
|
5
|
+
open: boolean;
|
|
6
|
+
setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
|
|
7
|
+
openMobile: boolean;
|
|
8
|
+
setOpenMobile: (open: boolean) => void;
|
|
9
|
+
isMobile: boolean;
|
|
10
|
+
toggleSidebar: () => void;
|
|
11
|
+
width: number;
|
|
12
|
+
setWidth: (w: number) => void;
|
|
13
|
+
minWidth: number;
|
|
14
|
+
maxWidth: number;
|
|
15
|
+
};
|
|
16
|
+
declare const SidebarContext: React.Context<SidebarContextProps | null>;
|
|
17
|
+
declare function useSidebar(): SidebarContextProps;
|
|
18
|
+
|
|
19
|
+
export { SidebarContext, type SidebarContextProps, useSidebar };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/sidebar-context.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
var SidebarContext = React.createContext(null);
|
|
6
|
+
function useSidebar() {
|
|
7
|
+
const context = React.useContext(SidebarContext);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
SidebarContext,
|
|
15
|
+
useSidebar
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=sidebar-context.js.map
|