@kubetail/ui 2.7.1 → 3.0.0-rc2
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/elements/alert.cjs +1 -1
- package/dist/elements/alert.cjs.map +1 -1
- package/dist/elements/alert.d.ts +2 -2
- package/dist/elements/alert.js +6 -12
- package/dist/elements/alert.js.map +1 -1
- package/dist/elements/avatar.cjs +1 -1
- package/dist/elements/avatar.cjs.map +1 -1
- package/dist/elements/avatar.d.ts +1 -1
- package/dist/elements/avatar.js +1 -1
- package/dist/elements/avatar.js.map +1 -1
- package/dist/elements/button.cjs +1 -1
- package/dist/elements/button.cjs.map +1 -1
- package/dist/elements/button.d.ts +5 -13
- package/dist/elements/button.js +24 -18
- package/dist/elements/button.js.map +1 -1
- package/dist/elements/card.cjs +1 -1
- package/dist/elements/card.cjs.map +1 -1
- package/dist/elements/card.d.ts +3 -1
- package/dist/elements/card.js +9 -8
- package/dist/elements/card.js.map +1 -1
- package/dist/elements/checkbox.cjs +1 -1
- package/dist/elements/checkbox.cjs.map +1 -1
- package/dist/elements/checkbox.d.ts +2 -2
- package/dist/elements/checkbox.js +4 -4
- package/dist/elements/checkbox.js.map +1 -1
- package/dist/elements/context-menu.cjs +1 -1
- package/dist/elements/context-menu.cjs.map +1 -1
- package/dist/elements/context-menu.d.ts +16 -18
- package/dist/elements/context-menu.js +52 -44
- package/dist/elements/context-menu.js.map +1 -1
- package/dist/elements/dialog.cjs +1 -1
- package/dist/elements/dialog.cjs.map +1 -1
- package/dist/elements/dialog.d.ts +12 -11
- package/dist/elements/dialog.js +47 -42
- package/dist/elements/dialog.js.map +1 -1
- package/dist/elements/dropdown-menu.cjs +1 -1
- package/dist/elements/dropdown-menu.cjs.map +1 -1
- package/dist/elements/dropdown-menu.d.ts +20 -17
- package/dist/elements/dropdown-menu.js +86 -72
- package/dist/elements/dropdown-menu.js.map +1 -1
- package/dist/elements/field.cjs +2 -0
- package/dist/elements/field.cjs.map +1 -0
- package/dist/elements/field.d.ts +24 -0
- package/dist/elements/field.js +110 -0
- package/dist/elements/field.js.map +1 -0
- package/dist/elements/form.cjs +1 -1
- package/dist/elements/form.cjs.map +1 -1
- package/dist/elements/form.d.ts +5 -4
- package/dist/elements/form.js +39 -42
- package/dist/elements/form.js.map +1 -1
- package/dist/elements/input-group.cjs +2 -0
- package/dist/elements/input-group.cjs.map +1 -0
- package/dist/elements/input-group.d.ts +18 -0
- package/dist/elements/input-group.js +80 -0
- package/dist/elements/input-group.js.map +1 -0
- package/dist/elements/input.cjs +1 -1
- package/dist/elements/input.cjs.map +1 -1
- package/dist/elements/input.js +7 -6
- package/dist/elements/input.js.map +1 -1
- package/dist/elements/label.cjs +1 -1
- package/dist/elements/label.cjs.map +1 -1
- package/dist/elements/label.d.ts +2 -2
- package/dist/elements/label.js +6 -6
- package/dist/elements/label.js.map +1 -1
- package/dist/elements/link.cjs +1 -1
- package/dist/elements/link.cjs.map +1 -1
- package/dist/elements/link.d.ts +6 -5
- package/dist/elements/link.js +18 -13
- package/dist/elements/link.js.map +1 -1
- package/dist/elements/pagination.cjs +1 -1
- package/dist/elements/pagination.cjs.map +1 -1
- package/dist/elements/pagination.d.ts +8 -5
- package/dist/elements/pagination.js +32 -26
- package/dist/elements/pagination.js.map +1 -1
- package/dist/elements/popover.cjs +1 -1
- package/dist/elements/popover.cjs.map +1 -1
- package/dist/elements/popover.d.ts +8 -5
- package/dist/elements/popover.js +13 -19
- package/dist/elements/popover.js.map +1 -1
- package/dist/elements/search-box.cjs +1 -1
- package/dist/elements/search-box.cjs.map +1 -1
- package/dist/elements/search-box.js +5 -5
- package/dist/elements/select.cjs +1 -1
- package/dist/elements/select.cjs.map +1 -1
- package/dist/elements/select.d.ts +11 -11
- package/dist/elements/select.js +49 -51
- package/dist/elements/select.js.map +1 -1
- package/dist/elements/separator.cjs +1 -1
- package/dist/elements/separator.cjs.map +1 -1
- package/dist/elements/separator.d.ts +2 -2
- package/dist/elements/separator.js +7 -6
- package/dist/elements/separator.js.map +1 -1
- package/dist/elements/sheet.cjs +1 -1
- package/dist/elements/sheet.cjs.map +1 -1
- package/dist/elements/sheet.d.ts +8 -7
- package/dist/elements/sheet.js +44 -37
- package/dist/elements/sheet.js.map +1 -1
- package/dist/elements/sidebar.cjs +1 -1
- package/dist/elements/sidebar.cjs.map +1 -1
- package/dist/elements/sidebar.d.ts +11 -16
- package/dist/elements/sidebar.js +178 -166
- package/dist/elements/sidebar.js.map +1 -1
- package/dist/elements/skeleton.cjs +1 -1
- package/dist/elements/skeleton.cjs.map +1 -1
- package/dist/elements/skeleton.js +1 -1
- package/dist/elements/skeleton.js.map +1 -1
- package/dist/elements/spinner.cjs.map +1 -1
- package/dist/elements/spinner.js.map +1 -1
- package/dist/elements/switch.cjs +1 -1
- package/dist/elements/switch.cjs.map +1 -1
- package/dist/elements/switch.d.ts +2 -2
- package/dist/elements/switch.js +3 -3
- package/dist/elements/switch.js.map +1 -1
- package/dist/elements/table.cjs +1 -1
- package/dist/elements/table.cjs.map +1 -1
- package/dist/elements/table.d.ts +1 -1
- package/dist/elements/table.js +6 -5
- package/dist/elements/table.js.map +1 -1
- package/dist/elements/tabs.cjs +1 -1
- package/dist/elements/tabs.cjs.map +1 -1
- package/dist/elements/tabs.d.ts +10 -6
- package/dist/elements/tabs.js +28 -16
- package/dist/elements/tabs.js.map +1 -1
- package/dist/elements/textarea.cjs +2 -0
- package/dist/elements/textarea.cjs.map +1 -0
- package/dist/elements/textarea.d.ts +3 -0
- package/dist/elements/textarea.js +15 -0
- package/dist/elements/textarea.js.map +1 -0
- package/dist/elements/toggle.cjs +1 -1
- package/dist/elements/toggle.cjs.map +1 -1
- package/dist/elements/toggle.d.ts +2 -2
- package/dist/elements/toggle.js +8 -8
- package/dist/elements/toggle.js.map +1 -1
- package/dist/elements/tooltip.cjs +1 -1
- package/dist/elements/tooltip.cjs.map +1 -1
- package/dist/elements/tooltip.d.ts +5 -5
- package/dist/elements/tooltip.js +18 -12
- package/dist/elements/tooltip.js.map +1 -1
- package/package.json +3 -71
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/elements/tooltip';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = 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] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n // eslint-disable-next-line\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = 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 // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(\n () => (isMobile ? setOpenMobile((val) => !val) : setOpen((val) => !val)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\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 = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\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': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\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('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}\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({ className, onClick, ...props }: 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 <PanelLeftIcon />\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 type=\"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({ className, ...props }: 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({ className, ...props }: 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({ className, ...props }: 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-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\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 const tooltipProps =\n typeof tooltip === 'string'\n ? {\n children: tooltip,\n }\n : tooltip;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\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({ className, ...props }: 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 // Stable random width between 50% and 90%.\n const [width] = useState(() => `${Math.floor(Math.random() * 41) + 50}%`);\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 && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\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 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({ className, ...props }: 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-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground 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]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/elements/tooltip';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\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\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\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 setInternalOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(\n () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\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 = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\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('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\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 dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>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 hidden text-sidebar-foreground 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 data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\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=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: 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-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon className=\"cn-rtl-flip\" />\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 type=\"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 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\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 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\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 'relative flex w-full flex-1 flex-col bg-background 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({ className, ...props }: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background 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({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('mx-2 w-auto bg-sidebar-border', 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 'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 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 render,\n ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n}\n\nfunction SidebarGroupContent({ className, ...props }: 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-0', 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 group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_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 render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\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(() => `${Math.floor(Math.random() * 40) + 50}%`);\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 && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\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 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: 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 render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\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"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`);function n({className:n,...r}){return(0,t.jsx)(`div`,{"data-slot":`skeleton`,className:e.cn(`
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`);function n({className:n,...r}){return(0,t.jsx)(`div`,{"data-slot":`skeleton`,className:e.cn(`animate-pulse rounded-md bg-muted`,n),...r})}exports.Skeleton=n;
|
|
2
2
|
//# sourceMappingURL=skeleton.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/elements/skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"skeleton\" className={cn('
|
|
1
|
+
{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/elements/skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"skeleton\" className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":"uLAEA,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,OAAO,EAAA,EAAA,KAAC,MAAD,CAAK,YAAU,WAAW,UAAW,EAAA,GAAG,oCAAqC,EAAU,CAAE,GAAI,EAAS,CAAA"}
|
|
@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
4
4
|
function n({ className: n, ...r }) {
|
|
5
5
|
return /* @__PURE__ */ t("div", {
|
|
6
6
|
"data-slot": "skeleton",
|
|
7
|
-
className: e("
|
|
7
|
+
className: e("animate-pulse rounded-md bg-muted", n),
|
|
8
8
|
...r
|
|
9
9
|
});
|
|
10
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/elements/skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"skeleton\" className={cn('
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/elements/skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"skeleton\" className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":";;;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAsC;AACtE,QAAO,kBAAC,OAAD;EAAK,aAAU;EAAW,WAAW,EAAG,qCAAqC,EAAU;EAAE,GAAI;EAAS,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.cjs","names":[],"sources":["../../src/elements/spinner.tsx"],"sourcesContent":["// Copyright 2024
|
|
1
|
+
{"version":3,"file":"spinner.cjs","names":[],"sources":["../../src/elements/spinner.tsx"],"sourcesContent":["// Copyright 2024 The Kubetail Authors\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { cn } from '@/lib/utils';\n\nconst baseCN = 'animate-spin mr-2 text-chrome-200 fill-chrome-500';\n\ntype SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst sizeCNMap: Record<SpinnerSize, string> = {\n xs: 'w-4 h-4',\n sm: 'w-6 h-6',\n md: 'w-8 h-8',\n lg: 'w-10 h-10',\n};\n\ntype Props = {\n className?: string;\n size?: SpinnerSize;\n};\n\nexport const Spinner = ({ className, size = 'md' }: Props) => (\n <div role=\"status\">\n <svg\n aria-hidden=\"true\"\n className={cn(baseCN, size && sizeCNMap[size], className)}\n viewBox=\"0 0 100 101\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n fill=\"currentFill\"\n />\n </svg>\n <span className=\"sr-only\">Loading...</span>\n </div>\n);\n"],"mappings":"uLAgBA,IAAM,EAAS,oDAIT,EAAyC,CAC7C,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,YACL,CAOY,GAAW,CAAE,YAAW,OAAO,SAC1C,EAAA,EAAA,MAAC,MAAD,CAAK,KAAK,kBAAV,EACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,OACZ,UAAW,EAAA,GAAG,EAAQ,GAAQ,EAAU,GAAO,EAAU,CACzD,QAAQ,cACR,KAAK,OACL,MAAM,sCALR,EAOE,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+WACF,KAAK,eACL,CAAA,EACF,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,glBACF,KAAK,cACL,CAAA,CACE,IACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mBAAU,aAAiB,CAAA,CACvC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","names":[],"sources":["../../src/elements/spinner.tsx"],"sourcesContent":["// Copyright 2024
|
|
1
|
+
{"version":3,"file":"spinner.js","names":[],"sources":["../../src/elements/spinner.tsx"],"sourcesContent":["// Copyright 2024 The Kubetail Authors\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { cn } from '@/lib/utils';\n\nconst baseCN = 'animate-spin mr-2 text-chrome-200 fill-chrome-500';\n\ntype SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst sizeCNMap: Record<SpinnerSize, string> = {\n xs: 'w-4 h-4',\n sm: 'w-6 h-6',\n md: 'w-8 h-8',\n lg: 'w-10 h-10',\n};\n\ntype Props = {\n className?: string;\n size?: SpinnerSize;\n};\n\nexport const Spinner = ({ className, size = 'md' }: Props) => (\n <div role=\"status\">\n <svg\n aria-hidden=\"true\"\n className={cn(baseCN, size && sizeCNMap[size], className)}\n viewBox=\"0 0 100 101\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n fill=\"currentFill\"\n />\n </svg>\n <span className=\"sr-only\">Loading...</span>\n </div>\n);\n"],"mappings":";;;AAgBA,IAAM,IAAS,qDAIT,IAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOY,KAAW,EAAE,cAAW,UAAO,WAC1C,kBAAC,OAAD;CAAK,MAAK;WAAV,CACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW,EAAG,GAAQ,KAAQ,EAAU,IAAO,EAAU;EACzD,SAAQ;EACR,MAAK;EACL,OAAM;YALR,CAOE,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,CAAA,EACF,kBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,CAAA,CACE;KACN,kBAAC,QAAD;EAAM,WAAU;YAAU;EAAiB,CAAA,CACvC"}
|
package/dist/elements/switch.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`})
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`),n=require(`@base-ui/react/switch`);function r({className:r,size:i=`default`,...a}){return(0,t.jsx)(n.Switch.Root,{"data-slot":`switch`,"data-size":i,className:e.cn(`peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50`,r),...a,children:(0,t.jsx)(n.Switch.Thumb,{"data-slot":`switch-thumb`,className:`pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground`})})}exports.Switch=r;
|
|
2
2
|
//# sourceMappingURL=switch.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.cjs","names":[],"sources":["../../src/elements/switch.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"version":3,"file":"switch.cjs","names":[],"sources":["../../src/elements/switch.tsx"],"sourcesContent":["'use client';\n\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\nfunction Switch({\n className,\n size = 'default',\n ...props\n}: SwitchPrimitive.Root.Props & {\n size?: 'sm' | 'default';\n}) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-size={size}\n className={cn(\n 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":"uOAMA,SAAS,EAAO,CACd,YACA,OAAO,UACP,GAAG,GAGF,CACD,OACE,EAAA,EAAA,KAAC,EAAA,OAAgB,KAAjB,CACE,YAAU,SACV,YAAW,EACX,UAAW,EAAA,GACT,spBACA,EACD,CACD,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,OAAgB,MAAjB,CACE,YAAU,eACV,UAAU,gfACV,CAAA,CACmB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
declare function Switch({ className, size, ...props }:
|
|
1
|
+
import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
|
|
2
|
+
declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
|
|
3
3
|
size?: 'sm' | 'default';
|
|
4
4
|
}): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export { Switch };
|
package/dist/elements/switch.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../lib/utils.js";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
-
import
|
|
4
|
+
import { Switch as n } from "@base-ui/react/switch";
|
|
5
5
|
//#region src/elements/switch.tsx
|
|
6
6
|
function r({ className: r, size: i = "default", ...a }) {
|
|
7
7
|
return /* @__PURE__ */ t(n.Root, {
|
|
8
8
|
"data-slot": "switch",
|
|
9
9
|
"data-size": i,
|
|
10
|
-
className: e("
|
|
10
|
+
className: e("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", r),
|
|
11
11
|
...a,
|
|
12
12
|
children: /* @__PURE__ */ t(n.Thumb, {
|
|
13
13
|
"data-slot": "switch-thumb",
|
|
14
|
-
className: "
|
|
14
|
+
className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
|
15
15
|
})
|
|
16
16
|
});
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":[],"sources":["../../src/elements/switch.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"version":3,"file":"switch.js","names":[],"sources":["../../src/elements/switch.tsx"],"sourcesContent":["'use client';\n\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\nfunction Switch({\n className,\n size = 'default',\n ...props\n}: SwitchPrimitive.Root.Props & {\n size?: 'sm' | 'default';\n}) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-size={size}\n className={cn(\n 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":";;;;;AAMA,SAAS,EAAO,EACd,cACA,UAAO,WACP,GAAG,KAGF;AACD,QACE,kBAAC,EAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,EACT,upBACA,EACD;EACD,GAAI;YAEJ,kBAAC,EAAgB,OAAjB;GACE,aAAU;GACV,WAAU;GACV,CAAA;EACmB,CAAA"}
|
package/dist/elements/table.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`})
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`);let n=require(`react/jsx-runtime`),r=require(`react`);r=e.__toESM(r,1);function i({className:e,containerClassName:r,...i}){return(0,n.jsx)(`div`,{"data-slot":`table-container`,className:t.cn(`relative w-full overflow-x-auto`,r),children:(0,n.jsx)(`table`,{"data-slot":`table`,className:t.cn(`w-full caption-bottom text-sm`,e),...i})})}function a({className:e,...r}){return(0,n.jsx)(`thead`,{"data-slot":`table-header`,className:t.cn(`[&_tr]:border-b`,e),...r})}function o({className:e,...r}){return(0,n.jsx)(`tbody`,{"data-slot":`table-body`,className:t.cn(`[&_tr:last-child]:border-0`,e),...r})}function s({className:e,...r}){return(0,n.jsx)(`tfoot`,{"data-slot":`table-footer`,className:t.cn(`border-t bg-muted/50 font-medium [&>tr]:last:border-b-0`,e),...r})}function c({className:e,...r}){return(0,n.jsx)(`tr`,{"data-slot":`table-row`,className:t.cn(`border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted`,e),...r})}function l({className:e,...r}){return(0,n.jsx)(`th`,{"data-slot":`table-head`,className:t.cn(`h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0`,e),...r})}function u({className:e,...r}){return(0,n.jsx)(`td`,{"data-slot":`table-cell`,className:t.cn(`p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0`,e),...r})}function d({className:e,...r}){return(0,n.jsx)(`caption`,{"data-slot":`table-caption`,className:t.cn(`mt-4 text-sm text-muted-foreground`,e),...r})}exports.Table=i,exports.TableBody=o,exports.TableCaption=d,exports.TableCell=u,exports.TableFooter=s,exports.TableHead=l,exports.TableHeader=a,exports.TableRow=c;
|
|
2
2
|
//# sourceMappingURL=table.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.cjs","names":[],"sources":["../../src/elements/table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@/lib/utils';\n\ninterface TableProps extends React.ComponentProps<'table'> {\n containerClassName?: string;\n}\n\nfunction Table({ className, containerClassName, ...props }: TableProps) {\n return (\n <div data-slot=\"table-container\" className={cn('relative w-full overflow-x-auto', containerClassName)}>\n <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('bg-muted/50
|
|
1
|
+
{"version":3,"file":"table.cjs","names":[],"sources":["../../src/elements/table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface TableProps extends React.ComponentProps<'table'> {\n containerClassName?: string;\n}\n\nfunction Table({ className, containerClassName, ...props }: TableProps) {\n return (\n <div data-slot=\"table-container\" className={cn('relative w-full overflow-x-auto', containerClassName)}>\n <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n 'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n return (\n <caption data-slot=\"table-caption\" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":"0OAUA,SAAS,EAAM,CAAE,YAAW,qBAAoB,GAAG,GAAqB,CACtE,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,YAAU,kBAAkB,UAAW,EAAA,GAAG,kCAAmC,EAAmB,WACnG,EAAA,EAAA,KAAC,QAAD,CAAO,YAAU,QAAQ,UAAW,EAAA,GAAG,gCAAiC,EAAU,CAAE,GAAI,EAAS,CAAA,CAC7F,CAAA,CAIV,SAAS,EAAY,CAAE,YAAW,GAAG,GAAwC,CAC3E,OAAO,EAAA,EAAA,KAAC,QAAD,CAAO,YAAU,eAAe,UAAW,EAAA,GAAG,kBAAmB,EAAU,CAAE,GAAI,EAAS,CAAA,CAGnG,SAAS,EAAU,CAAE,YAAW,GAAG,GAAwC,CACzE,OAAO,EAAA,EAAA,KAAC,QAAD,CAAO,YAAU,aAAa,UAAW,EAAA,GAAG,6BAA8B,EAAU,CAAE,GAAI,EAAS,CAAA,CAG5G,SAAS,EAAY,CAAE,YAAW,GAAG,GAAwC,CAC3E,OACE,EAAA,EAAA,KAAC,QAAD,CACE,YAAU,eACV,UAAW,EAAA,GAAG,0DAA2D,EAAU,CACnF,GAAI,EACJ,CAAA,CAIN,SAAS,EAAS,CAAE,YAAW,GAAG,GAAqC,CACrE,OACE,EAAA,EAAA,KAAC,KAAD,CACE,YAAU,YACV,UAAW,EAAA,GACT,4GACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAU,CAAE,YAAW,GAAG,GAAqC,CACtE,OACE,EAAA,EAAA,KAAC,KAAD,CACE,YAAU,aACV,UAAW,EAAA,GACT,+GACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAU,CAAE,YAAW,GAAG,GAAqC,CACtE,OACE,EAAA,EAAA,KAAC,KAAD,CACE,YAAU,aACV,UAAW,EAAA,GAAG,mEAAoE,EAAU,CAC5F,GAAI,EACJ,CAAA,CAIN,SAAS,EAAa,CAAE,YAAW,GAAG,GAA0C,CAC9E,OACE,EAAA,EAAA,KAAC,UAAD,CAAS,YAAU,gBAAgB,UAAW,EAAA,GAAG,qCAAsC,EAAU,CAAE,GAAI,EAAS,CAAA"}
|
package/dist/elements/table.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
interface TableProps extends React.ComponentProps<'table'> {
|
|
2
3
|
containerClassName?: string;
|
|
3
4
|
}
|
|
@@ -10,4 +11,3 @@ declare function TableHead({ className, ...props }: React.ComponentProps<'th'>):
|
|
|
10
11
|
declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
|
|
13
|
-
export type { TableProps };
|
package/dist/elements/table.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../lib/utils.js";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
+
import "react";
|
|
4
5
|
//#region src/elements/table.tsx
|
|
5
6
|
function n({ className: n, containerClassName: r, ...i }) {
|
|
6
7
|
return /* @__PURE__ */ t("div", {
|
|
@@ -30,35 +31,35 @@ function i({ className: n, ...r }) {
|
|
|
30
31
|
function a({ className: n, ...r }) {
|
|
31
32
|
return /* @__PURE__ */ t("tfoot", {
|
|
32
33
|
"data-slot": "table-footer",
|
|
33
|
-
className: e("bg-muted/50
|
|
34
|
+
className: e("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", n),
|
|
34
35
|
...r
|
|
35
36
|
});
|
|
36
37
|
}
|
|
37
38
|
function o({ className: n, ...r }) {
|
|
38
39
|
return /* @__PURE__ */ t("tr", {
|
|
39
40
|
"data-slot": "table-row",
|
|
40
|
-
className: e("hover:bg-muted/50 data-[state=selected]:bg-muted
|
|
41
|
+
className: e("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", n),
|
|
41
42
|
...r
|
|
42
43
|
});
|
|
43
44
|
}
|
|
44
45
|
function s({ className: n, ...r }) {
|
|
45
46
|
return /* @__PURE__ */ t("th", {
|
|
46
47
|
"data-slot": "table-head",
|
|
47
|
-
className: e("
|
|
48
|
+
className: e("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", n),
|
|
48
49
|
...r
|
|
49
50
|
});
|
|
50
51
|
}
|
|
51
52
|
function c({ className: n, ...r }) {
|
|
52
53
|
return /* @__PURE__ */ t("td", {
|
|
53
54
|
"data-slot": "table-cell",
|
|
54
|
-
className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0
|
|
55
|
+
className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", n),
|
|
55
56
|
...r
|
|
56
57
|
});
|
|
57
58
|
}
|
|
58
59
|
function l({ className: n, ...r }) {
|
|
59
60
|
return /* @__PURE__ */ t("caption", {
|
|
60
61
|
"data-slot": "table-caption",
|
|
61
|
-
className: e("
|
|
62
|
+
className: e("mt-4 text-sm text-muted-foreground", n),
|
|
62
63
|
...r
|
|
63
64
|
});
|
|
64
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","names":[],"sources":["../../src/elements/table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@/lib/utils';\n\ninterface TableProps extends React.ComponentProps<'table'> {\n containerClassName?: string;\n}\n\nfunction Table({ className, containerClassName, ...props }: TableProps) {\n return (\n <div data-slot=\"table-container\" className={cn('relative w-full overflow-x-auto', containerClassName)}>\n <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('bg-muted/50
|
|
1
|
+
{"version":3,"file":"table.js","names":[],"sources":["../../src/elements/table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface TableProps extends React.ComponentProps<'table'> {\n containerClassName?: string;\n}\n\nfunction Table({ className, containerClassName, ...props }: TableProps) {\n return (\n <div data-slot=\"table-container\" className={cn('relative w-full overflow-x-auto', containerClassName)}>\n <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n 'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n return (\n <caption data-slot=\"table-caption\" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;;AAUA,SAAS,EAAM,EAAE,cAAW,uBAAoB,GAAG,KAAqB;AACtE,QACE,kBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,EAAG,mCAAmC,EAAmB;YACnG,kBAAC,SAAD;GAAO,aAAU;GAAQ,WAAW,EAAG,iCAAiC,EAAU;GAAE,GAAI;GAAS,CAAA;EAC7F,CAAA;;AAIV,SAAS,EAAY,EAAE,cAAW,GAAG,KAAwC;AAC3E,QAAO,kBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,EAAG,mBAAmB,EAAU;EAAE,GAAI;EAAS,CAAA;;AAGnG,SAAS,EAAU,EAAE,cAAW,GAAG,KAAwC;AACzE,QAAO,kBAAC,SAAD;EAAO,aAAU;EAAa,WAAW,EAAG,8BAA8B,EAAU;EAAE,GAAI;EAAS,CAAA;;AAG5G,SAAS,EAAY,EAAE,cAAW,GAAG,KAAwC;AAC3E,QACE,kBAAC,SAAD;EACE,aAAU;EACV,WAAW,EAAG,2DAA2D,EAAU;EACnF,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqC;AACrE,QACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAW,EACT,6GACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAU,EAAE,cAAW,GAAG,KAAqC;AACtE,QACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAW,EACT,gHACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAU,EAAE,cAAW,GAAG,KAAqC;AACtE,QACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAW,EAAG,oEAAoE,EAAU;EAC5F,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAa,EAAE,cAAW,GAAG,KAA0C;AAC9E,QACE,kBAAC,WAAD;EAAS,aAAU;EAAgB,WAAW,EAAG,sCAAsC,EAAU;EAAE,GAAI;EAAS,CAAA"}
|
package/dist/elements/tabs.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`})
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`),n=require(`class-variance-authority`),r=require(`@base-ui/react/tabs`);function i({className:n,orientation:i=`horizontal`,...a}){return(0,t.jsx)(r.Tabs.Root,{"data-slot":`tabs`,"data-orientation":i,"data-horizontal":i===`horizontal`?``:void 0,"data-vertical":i===`vertical`?``:void 0,className:e.cn(`group/tabs flex gap-2 data-horizontal:flex-col`,n),...a})}var a=(0,n.cva)(`group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none`,{variants:{variant:{default:`bg-muted`,line:`gap-1 bg-transparent`}},defaultVariants:{variant:`default`}});function o({className:n,variant:i=`default`,...o}){return(0,t.jsx)(r.Tabs.List,{"data-slot":`tabs-list`,"data-variant":i,className:e.cn(a({variant:i}),n),...o})}function s({className:n,...i}){return(0,t.jsx)(r.Tabs.Tab,{"data-slot":`tabs-trigger`,className:e.cn(`relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,`group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent`,`data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground`,`after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100`,n),...i})}function c({className:n,...i}){return(0,t.jsx)(r.Tabs.Panel,{"data-slot":`tabs-content`,className:e.cn(`flex-1 text-sm outline-none`,n),...i})}exports.Tabs=i,exports.TabsContent=c,exports.TabsList=o,exports.TabsTrigger=s,exports.tabsListVariants=a;
|
|
2
2
|
//# sourceMappingURL=tabs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.cjs","names":[],"sources":["../../src/elements/tabs.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"version":3,"file":"tabs.cjs","names":[],"sources":["../../src/elements/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n data-orientation={orientation}\n data-horizontal={orientation === 'horizontal' ? '' : undefined}\n data-vertical={orientation === 'vertical' ? '' : undefined}\n className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}\n {...props}\n />\n );\n}\n\nconst tabsListVariants = cva(\n 'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',\n {\n variants: {\n variant: {\n default: 'bg-muted',\n line: 'gap-1 bg-transparent',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction TabsList({\n className,\n variant = 'default',\n ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n data-variant={variant}\n className={cn(tabsListVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n return (\n <TabsPrimitive.Tab\n data-slot=\"tabs-trigger\"\n className={cn(\n \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n 'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',\n 'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n return (\n <TabsPrimitive.Panel data-slot=\"tabs-content\" className={cn('flex-1 text-sm outline-none', className)} {...props} />\n );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n"],"mappings":"2QAOA,SAAS,EAAK,CAAE,YAAW,cAAc,aAAc,GAAG,GAAmC,CAC3F,OACE,EAAA,EAAA,KAAC,EAAA,KAAc,KAAf,CACE,YAAU,OACV,mBAAkB,EAClB,kBAAiB,IAAgB,aAAe,GAAK,IAAA,GACrD,gBAAe,IAAgB,WAAa,GAAK,IAAA,GACjD,UAAW,EAAA,GAAG,iDAAkD,EAAU,CAC1E,GAAI,EACJ,CAAA,CAIN,IAAM,GAAA,EAAA,EAAA,KACJ,0OACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,WACT,KAAM,uBACP,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CAED,SAAS,EAAS,CAChB,YACA,UAAU,UACV,GAAG,GACgE,CACnE,OACE,EAAA,EAAA,KAAC,EAAA,KAAc,KAAf,CACE,YAAU,YACV,eAAc,EACd,UAAW,EAAA,GAAG,EAAiB,CAAE,UAAS,CAAC,CAAE,EAAU,CACvD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAkC,CACrE,OACE,EAAA,EAAA,KAAC,EAAA,KAAc,IAAf,CACE,YAAU,eACV,UAAW,EAAA,GACT,61BACA,gQACA,oJACA,uYACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAoC,CACvE,OACE,EAAA,EAAA,KAAC,EAAA,KAAc,MAAf,CAAqB,YAAU,eAAe,UAAW,EAAA,GAAG,8BAA+B,EAAU,CAAE,GAAI,EAAS,CAAA"}
|
package/dist/elements/tabs.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function
|
|
4
|
-
declare
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const tabsListVariants: (props?: ({
|
|
5
|
+
variant?: "default" | "line" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
|
package/dist/elements/tabs.js
CHANGED
|
@@ -1,37 +1,49 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../lib/utils.js";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
-
import
|
|
4
|
+
import { cva as n } from "class-variance-authority";
|
|
5
|
+
import { Tabs as r } from "@base-ui/react/tabs";
|
|
5
6
|
//#region src/elements/tabs.tsx
|
|
6
|
-
function
|
|
7
|
-
return /* @__PURE__ */ t(
|
|
7
|
+
function i({ className: n, orientation: i = "horizontal", ...a }) {
|
|
8
|
+
return /* @__PURE__ */ t(r.Root, {
|
|
8
9
|
"data-slot": "tabs",
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
"data-orientation": i,
|
|
11
|
+
"data-horizontal": i === "horizontal" ? "" : void 0,
|
|
12
|
+
"data-vertical": i === "vertical" ? "" : void 0,
|
|
13
|
+
className: e("group/tabs flex gap-2 data-horizontal:flex-col", n),
|
|
14
|
+
...a
|
|
11
15
|
});
|
|
12
16
|
}
|
|
13
|
-
|
|
14
|
-
|
|
17
|
+
var a = n("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
18
|
+
variants: { variant: {
|
|
19
|
+
default: "bg-muted",
|
|
20
|
+
line: "gap-1 bg-transparent"
|
|
21
|
+
} },
|
|
22
|
+
defaultVariants: { variant: "default" }
|
|
23
|
+
});
|
|
24
|
+
function o({ className: n, variant: i = "default", ...o }) {
|
|
25
|
+
return /* @__PURE__ */ t(r.List, {
|
|
15
26
|
"data-slot": "tabs-list",
|
|
16
|
-
|
|
17
|
-
|
|
27
|
+
"data-variant": i,
|
|
28
|
+
className: e(a({ variant: i }), n),
|
|
29
|
+
...o
|
|
18
30
|
});
|
|
19
31
|
}
|
|
20
|
-
function
|
|
21
|
-
return /* @__PURE__ */ t(
|
|
32
|
+
function s({ className: n, ...i }) {
|
|
33
|
+
return /* @__PURE__ */ t(r.Tab, {
|
|
22
34
|
"data-slot": "tabs-trigger",
|
|
23
|
-
className: e("
|
|
35
|
+
className: e("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", n),
|
|
24
36
|
...i
|
|
25
37
|
});
|
|
26
38
|
}
|
|
27
|
-
function
|
|
28
|
-
return /* @__PURE__ */ t(
|
|
39
|
+
function c({ className: n, ...i }) {
|
|
40
|
+
return /* @__PURE__ */ t(r.Panel, {
|
|
29
41
|
"data-slot": "tabs-content",
|
|
30
|
-
className: e("flex-1 outline-none",
|
|
42
|
+
className: e("flex-1 text-sm outline-none", n),
|
|
31
43
|
...i
|
|
32
44
|
});
|
|
33
45
|
}
|
|
34
46
|
//#endregion
|
|
35
|
-
export {
|
|
47
|
+
export { i as Tabs, c as TabsContent, o as TabsList, s as TabsTrigger, a as tabsListVariants };
|
|
36
48
|
|
|
37
49
|
//# sourceMappingURL=tabs.js.map
|