@minidev.fun/ui 1.0.1

package/dist/components/ui/src/components/ui/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":["../../../../../../src/components/ui/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { PanelLeftIcon } from \"lucide-react\";\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\n/**\n * Hook to access sidebar context including state, mobile state, and toggle functions.\n * Must be used within SidebarProvider.\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\ntype SidebarProviderProps = React.ComponentProps<\"div\"> & {\n  /** Initial open state on desktop. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state for desktop. */\n  open?: boolean;\n  /** Callback when open state changes. Persists state in cookie. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Root provider for sidebar with state management, keyboard shortcuts (⌘B), and mobile detection.\n * Manages collapsed/expanded state and persists preference in cookie.\n */\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: SidebarProviderProps) {\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 [_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      // 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    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen, setOpenMobile]);\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 = 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(\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    </SidebarContext.Provider>\n  );\n}\n\ntype SidebarProps = React.ComponentProps<\"div\"> & {\n  /** Which side to display sidebar. @default \"left\" */\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\" | \"fixed\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n};\n\n/**\n * Sidebar container with responsive behavior. Renders as Sheet on mobile.\n * Use with SidebarProvider for state management.\n */\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: SidebarProps) {\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  // Mobile Sheet only for standard variants.\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            { \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE } 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={cn(\n        \"group peer text-sidebar-foreground\",\n        variant === \"fixed\" ? \"flex\" : \"hidden md:block\", // Visible on all screens for fixed\n      )}\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          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\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          variant === \"fixed\" &&\n            \"group-data-[state=collapsed]:w-(--sidebar-width-icon)\",\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear flex\",\n          variant !== \"fixed\" && \"hidden 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          variant === \"fixed\" &&\n            \"group-data-[state=collapsed]:w-(--sidebar-width-icon) group-data-[state=collapsed]:left-0\",\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]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype SidebarTriggerProps = React.ComponentProps<typeof Button>;\n\n/**\n * Button to toggle sidebar open/closed. Shows hamburger icon.\n */\nfunction SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps) {\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(\n        className,\n        // When fixed, the trigger is forced to the top center of the collapsed/expanded rail\n        \"group-data-[variant=fixed]/sidebar:absolute group-data-[variant=fixed]/sidebar:top-2 group-data-[variant=fixed]/sidebar:left-1/2 group-data-[variant=fixed]/sidebar:-translate-x-1/2 group-data-[variant=fixed]/sidebar:z-20\",\n        \"group-data-[variant=fixed]/sidebar:flex group-data-[variant=fixed]/sidebar:items-center group-data-[variant=fixed]/sidebar:justify-center\",\n      )}\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\ntype SidebarRailProps = React.ComponentProps<\"button\">;\n\n/**\n * Invisible rail element on sidebar edge for drag-to-resize interaction.\n */\nfunction SidebarRail({ className, ...props }: SidebarRailProps) {\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\ntype SidebarInsetProps = React.ComponentProps<\"main\">;\n\n/**\n * Main content area that sits beside the sidebar. Automatically adjusts margins based on sidebar state.\n */\nfunction SidebarInset({ className, ...props }: SidebarInsetProps) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"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 relative flex w-full flex-1 flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype SidebarInputProps = React.ComponentProps<typeof Input>;\n\n/**\n * Styled input for sidebar search/filter functionality.\n */\nfunction SidebarInput({ className, ...props }: SidebarInputProps) {\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\ntype SidebarHeaderProps = React.ComponentProps<\"div\">;\n\n/**\n * Top section of sidebar for branding, app switcher, or global actions.\n */\nfunction SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SidebarFooterProps = React.ComponentProps<\"div\">;\n\n/**\n * Bottom section of sidebar for user profile, settings, or secondary actions.\n */\nfunction SidebarFooter({ className, ...props }: SidebarFooterProps) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SidebarSeparatorProps = React.ComponentProps<typeof Separator>;\n\n/**\n * Horizontal divider between sidebar sections.\n */\nfunction SidebarSeparator({ className, ...props }: SidebarSeparatorProps) {\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\ntype SidebarContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Scrollable main content area of sidebar. Contains SidebarGroup components.\n */\nfunction SidebarContent({ className, ...props }: SidebarContentProps) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype SidebarGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for grouped menu items with optional label.\n */\nfunction SidebarGroup({ className, ...props }: SidebarGroupProps) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"p-2 relative flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SidebarGroupLabelProps = useRender.ComponentProps<\"div\"> &\n  React.ComponentProps<\"div\">;\n\n/**\n * Label heading for a sidebar group. Fades out when sidebar collapses to icon mode.\n */\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: SidebarGroupLabelProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium 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 flex shrink-0 items-center outline-hidden [&>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\ntype SidebarGroupActionProps = useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\">;\n\n/**\n * Action button displayed in top-right of group (e.g., add, expand all).\n */\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: SidebarGroupActionProps) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\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 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  });\n}\n\ntype SidebarGroupContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for menu items within a group.\n */\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: SidebarGroupContentProps) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SidebarMenuProps = React.ComponentProps<\"ul\">;\n\n/**\n * Unordered list container for sidebar menu items.\n */\nfunction SidebarMenu({ className, ...props }: SidebarMenuProps) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SidebarMenuItemProps = React.ComponentProps<\"li\">;\n\n/**\n * List item wrapper for a single menu entry.\n */\nfunction SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {\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  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm 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! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button 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  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] 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\ntype SidebarMenuButtonProps = useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    /** Mark as active/current page. */\n    isActive?: boolean;\n    /** Tooltip content shown when sidebar is collapsed. */\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n  } & VariantProps<typeof sidebarMenuButtonVariants>;\n\n/**\n * Clickable button for sidebar menu item. Supports variants, sizes, active state, and tooltips.\n */\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: SidebarMenuButtonProps) {\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,\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  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\ntype SidebarMenuActionProps = useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    /** Only show on hover/focus. @default false */\n    showOnHover?: boolean;\n  };\n\n/**\n * Secondary action button for menu item (e.g., delete, edit). Positioned on right side.\n */\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: SidebarMenuActionProps) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\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 aspect-square w-5 rounded-md p-0 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 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open: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\ntype SidebarMenuBadgeProps = React.ComponentProps<\"div\">;\n\n/**\n * Badge/counter displayed on right side of menu item (e.g., notification count).\n */\nfunction SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype SidebarMenuSkeletonProps = React.ComponentProps<\"div\"> & {\n  /** Show icon skeleton. @default false */\n  showIcon?: boolean;\n};\n\n/**\n * Loading skeleton placeholder for menu item with randomized width.\n */\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: SidebarMenuSkeletonProps) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${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(\"h-8 gap-2 rounded-md px-2 flex items-center\", 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\ntype SidebarMenuSubProps = React.ComponentProps<\"ul\">;\n\n/**\n * Nested submenu list with indented border. Place inside SidebarMenuItem.\n */\nfunction SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {\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 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype SidebarMenuSubItemProps = React.ComponentProps<\"li\">;\n\n/**\n * List item wrapper for submenu entry.\n */\nfunction SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) {\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\ntype SidebarMenuSubButtonProps = useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    /** Size variant. @default \"md\" */\n    size?: \"sm\" | \"md\";\n    /** Mark as active/current page. */\n    isActive?: boolean;\n  };\n\n/**\n * Link button for submenu item. Defaults to anchor tag.\n */\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: SidebarMenuSubButtonProps) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\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  type SidebarProps,\n  type SidebarContentProps,\n  type SidebarFooterProps,\n  type SidebarGroupProps,\n  type SidebarGroupActionProps,\n  type SidebarGroupContentProps,\n  type SidebarGroupLabelProps,\n  type SidebarHeaderProps,\n  type SidebarInputProps,\n  type SidebarInsetProps,\n  type SidebarMenuProps,\n  type SidebarMenuActionProps,\n  type SidebarMenuBadgeProps,\n  type SidebarMenuButtonProps,\n  type SidebarMenuItemProps,\n  type SidebarMenuSkeletonProps,\n  type SidebarMenuSubProps,\n  type SidebarMenuSubButtonProps,\n  type SidebarMenuSubItemProps,\n  type SidebarProviderProps,\n  type SidebarRailProps,\n  type SidebarSeparatorProps,\n  type SidebarTriggerProps,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA;AACA;AAYA;AAMA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAeA;AAAyB;AACT;AACR;AACQ;AACd;AACA;AACA;AAEF;AACE;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAA0E;AAI5E;AACE;AACE;AAIE;AACA;AAAA;AACF;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEuE;AAG3E;AAEI;AAAC;AAAA;AACW;AAER;AACqB;AACK;AACrB;AAAA;AAGI;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AAIT;AAaA;AAAiB;AACR;AACG;AACI;AACd;AACA;AAEF;AACE;AAEA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AAAA;AAMP;AACE;AAEI;AAAC;AAAA;AACc;AACH;AACE;AACF;AAEa;AAEvB;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACY;AACT;AAC+B;AAAA;AAAA;AAErB;AAC4C;AAC1C;AACH;AACD;AAGV;AAAA;AAAC;AAAA;AACW;AACC;AACT;AACA;AACA;AAGI;AAEF;AAAA;AACJ;AAAA;AAEF;AAAC;AAAA;AACW;AACC;AACT;AACuB;AAGnB;AAAA;AAIA;AAEF;AACF;AAAA;AAEE;AAEJ;AAAC;AAAA;AACc;AACH;AACA;AAET;AAAA;AAAA;AACH;AAAA;AACF;AAAA;AAGN;AAOA;AACE;AAEA;AACE;AAAC;AAAA;AACc;AACH;AACF;AACH;AACM;AACT;AAAA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AACF;AACI;AAEJ;AAAe;AACyB;AAAA;AAAA;AAG9C;AAOA;AACE;AAEA;AACE;AAAC;AAAA;AACc;AACH;AACC;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACkD;AAC3D;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACqC;AAC9C;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACqC;AAC9C;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AAC2C;AACpD;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACF;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACuD;AAChE;AAAA;AAGV;AAQA;AAA2B;AACzB;AACA;AAEF;AACE;AAAiB;AACC;AACT;AACL;AACa;AACT;AACA;AAAA;AACF;AAEF;AAAA;AAEF;AACO;AACC;AACG;AAAA;AAGf;AAQA;AAA4B;AAC1B;AACA;AAEF;AACE;AAAiB;AACC;AACT;AACL;AACa;AACT;AACA;AAAA;AACF;AAEF;AAAA;AAEF;AACO;AACC;AACG;AAAA;AAGf;AAOA;AAA6B;AAC3B;AAEF;AACE;AACE;AAAC;AAAA;AACW;AACG;AAC4B;AACrC;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACgD;AACzD;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACsC;AAC/C;AAAA;AAGV;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACE;AAEP;AAAA;AAEE;AACK;AACL;AACA;AAAA;AACN;AAEe;AACN;AACH;AAAA;AAGZ;AAaA;AAA2B;AACzB;AACW;AACD;AACH;AACP;AACA;AAEF;AACE;AACA;AAAuB;AACL;AACT;AACL;AACuE;AAAA;AAEvE;AAAA;AAE0B;AACrB;AACC;AACG;AACT;AACQ;AAAA;AAIZ;AACE;AAAO;AAGT;AACE;AAAU;AACE;AAAA;AAId;AAEK;AAAA;AACD;AAAC;AAAA;AACM;AACC;AAC2B;AAC7B;AAAA;AAAA;AAIZ;AAWA;AAA2B;AACzB;AACA;AACc;AAEhB;AACE;AAAiB;AACC;AACT;AACL;AACa;AACT;AAEE;AACF;AAAA;AACF;AAEF;AAAA;AAEF;AACO;AACC;AACG;AAAA;AAGf;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACF;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAUA;AAA6B;AAC3B;AACW;AAEb;AAEE;AACE;AAA6C;AAG/C;AACE;AAAC;AAAA;AACW;AACG;AACyD;AAClE;AAEH;AACC;AAAC;AAAA;AACW;AACG;AAAA;AAAA;AAGjB;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AAAA;AACtB;AAAA;AAEJ;AAAA;AAGN;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AACF;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAOA;AACE;AACE;AAAC;AAAA;AACW;AACG;AAC0C;AACnD;AAAA;AAGV;AAaA;AAA8B;AAC5B;AACO;AACI;AACX;AAEF;AACE;AAAiB;AACC;AACT;AACL;AACa;AACT;AACA;AAAA;AACF;AAEF;AAAA;AAEF;AACO;AACC;AACG;AACT;AACQ;AAAA;AAGd;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ui/src/components/ui/skeleton.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../../../lib/utils.js";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-muted rounded-4xl animate-pulse", className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/ui/src/components/ui/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../../../../src/components/ui/skeleton.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\n\ntype SkeletonProps = React.ComponentProps<\"div\">;\n\n/**\n * Skeleton loading placeholder with pulse animation.\n * Use to indicate content is loading while maintaining layout structure.\n */\nfunction Skeleton({ className, ...props }: SkeletonProps) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted rounded-4xl animate-pulse\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton, type SkeletonProps };\n"],"names":[],"mappings":";;AAQA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/src/components/ui/slider.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../../../lib/utils.js";
+import { SliderRoot } from "../../../../../node_modules/@base-ui/react/esm/slider/root/SliderRoot.js";
+import { SliderControl } from "../../../../../node_modules/@base-ui/react/esm/slider/control/SliderControl.js";
+import { SliderTrack } from "../../../../../node_modules/@base-ui/react/esm/slider/track/SliderTrack.js";
+import { SliderIndicator } from "../../../../../node_modules/@base-ui/react/esm/slider/indicator/SliderIndicator.js";
+import { SliderThumb } from "../../../../../node_modules/@base-ui/react/esm/slider/thumb/SliderThumb.js";
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
+    [value, defaultValue, min]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderRoot,
+    {
+      className: "relative flex items-center w-full h-10 data-vertical:h-64 data-vertical:w-10",
+      defaultValue,
+      value,
+      min,
+      max,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        SliderControl,
+        {
+          className: cn(
+            "relative flex items-center w-full h-full touch-none select-none",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              SliderTrack,
+              {
+                className: cn(
+                  "relative grow rounded-full",
+                  "h-1.5 w-full bg-muted",
+                  "data-vertical:w-1.5 data-vertical:h-full"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  SliderIndicator,
+                  {
+                    className: cn("absolute rounded-full bg-primary", "h-full w-full")
+                  }
+                )
+              }
+            ),
+            _values.map((_, index) => /* @__PURE__ */ jsx(
+              SliderThumb,
+              {
+                className: cn(
+                  "absolute z-30 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow-md",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "top-1/2"
+                )
+              },
+              index
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Slider
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/ui/src/components/ui/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../../../../src/components/ui/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SliderProps = SliderPrimitive.Root.Props;\n\n/**\n * Slider for selecting single values or ranges with one or more draggable thumbs.\n * Supports horizontal and vertical orientations with keyboard navigation.\n *\n * @example\n * // Single value slider\n * <Slider defaultValue={[50]} min={0} max={100} />\n *\n * @example\n * // Range slider (two thumbs)\n * <Slider defaultValue={[25, 75]} min={0} max={100} />\n *\n * @example\n * // Controlled slider with step\n * <Slider value={value} onValueChange={setValue} min={0} max={100} step={10} />\n */\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderProps) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min],\n    [value, defaultValue, min],\n  );\n\n  return (\n    <SliderPrimitive.Root\n      className=\"relative flex items-center w-full h-10 data-vertical:h-64 data-vertical:w-10\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      {...props}\n    >\n      <SliderPrimitive.Control\n        className={cn(\n          \"relative flex items-center w-full h-full touch-none select-none\",\n          className,\n        )}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            \"relative grow rounded-full\",\n            \"h-1.5 w-full bg-muted\",\n            \"data-vertical:w-1.5 data-vertical:h-full\",\n          )}\n        >\n          <SliderPrimitive.Indicator\n            className={cn(\"absolute rounded-full bg-primary\", \"h-full w-full\")}\n          />\n        </SliderPrimitive.Track>\n\n        {_values.map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            className={cn(\n              \"absolute z-30 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow-md\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"top-1/2\",\n            )}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider, type SliderProps };\n"],"names":["SliderPrimitive.Root","SliderPrimitive.Control","SliderPrimitive.Track","SliderPrimitive.Indicator","SliderPrimitive.Thumb"],"mappings":";;;;;;;;;AAyBA;AAAgB;AACd;AACA;AACA;AACM;AACA;AAER;AACE;AAAsB;AAMR;AACa;AAG3B;AACE;AAACA;AAAA;AACW;AACV;AACA;AACA;AACA;AACI;AAEJ;AAACC;AAAA;AACY;AACT;AACA;AAAA;AAGF;AAAA;AAACC;AAAA;AACY;AACT;AACA;AACA;AAAA;AAGF;AAACC;AAAA;AACkE;AAAA;AAAA;AACnE;AAAA;AAIA;AAACC;AAAA;AAEY;AACT;AACA;AACA;AAAA;AACF;AALK;AAOR;AAAA;AAAA;AAAA;AACH;AAGN;;;;"}

package/dist/components/ui/src/components/ui/sonner.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster as Toaster$1 } from "../../../../../node_modules/sonner/dist/index.js";
+import { toast } from "../../../../../node_modules/sonner/dist/index.js";
+import LoaderCircle from "../../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import OctagonX from "../../../../../node_modules/lucide-react/dist/esm/icons/octagon-x.js";
+import TriangleAlert from "../../../../../node_modules/lucide-react/dist/esm/icons/triangle-alert.js";
+import Info from "../../../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import CircleCheck from "../../../../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+function Toaster({
+  theme = "system",
+  richColors = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      "data-slot": "toaster",
+      theme,
+      className: "toaster group",
+      richColors,
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)",
+        // Success
+        "--success-bg": "oklch(from var(--success) l c h / 10%)",
+        "--success-text": "var(--success)",
+        "--success-border": "oklch(from var(--success) l c h / 30%)",
+        // Error
+        "--error-bg": "oklch(from var(--destructive) l c h / 10%)",
+        "--error-text": "var(--destructive)",
+        "--error-border": "oklch(from var(--destructive) l c h / 30%)",
+        // Warning
+        "--warning-bg": "oklch(from var(--warning) l c h / 10%)",
+        "--warning-text": "var(--warning)",
+        "--warning-border": "oklch(from var(--warning) l c h / 30%)",
+        // Info
+        "--info-bg": "oklch(from var(--info) l c h / 10%)",
+        "--info-text": "var(--info)",
+        "--info-border": "oklch(from var(--info) l c h / 30%)"
+      },
+      toastOptions: {
+        classNames: {
+          toast: "group backdrop-blur-md"
+        }
+      },
+      ...props
+    }
+  );
+}
+export {
+  Toaster,
+  toast
+};
+//# sourceMappingURL=sonner.js.map

package/dist/components/ui/src/components/ui/sonner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.js","sources":["../../../../../../src/components/ui/sonner.tsx"],"sourcesContent":["import { Toaster as Sonner, toast, type ToasterProps } from \"sonner\";\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  TriangleAlertIcon,\n  OctagonXIcon,\n  Loader2Icon,\n} from \"lucide-react\";\n\ntype ToasterComponentProps = ToasterProps;\n\n/**\n * Toast notification container with themed icons and color system integration.\n *\n * Provides a pre-configured Sonner toaster with custom icons for each toast type\n * and automatic theme integration. Use the exported `toast` function to trigger notifications.\n *\n * @example\n * ```tsx\n * // Add to your app root\n * <Toaster position=\"bottom-right\" />\n *\n * // Trigger toasts anywhere\n * toast.success(\"Saved successfully\")\n * toast.error(\"Failed to save\", { description: error.message })\n * ```\n */\nfunction Toaster({\n  theme = \"system\",\n  richColors = true,\n  ...props\n}: ToasterComponentProps) {\n  return (\n    <Sonner\n      data-slot=\"toaster\"\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      richColors={richColors}\n      icons={{\n        success: <CircleCheckIcon className=\"size-4\" />,\n        info: <InfoIcon className=\"size-4\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" />,\n        error: <OctagonXIcon className=\"size-4\" />,\n        loading: <Loader2Icon 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          // Success\n          \"--success-bg\": \"oklch(from var(--success) l c h / 10%)\",\n          \"--success-text\": \"var(--success)\",\n          \"--success-border\": \"oklch(from var(--success) l c h / 30%)\",\n          // Error\n          \"--error-bg\": \"oklch(from var(--destructive) l c h / 10%)\",\n          \"--error-text\": \"var(--destructive)\",\n          \"--error-border\": \"oklch(from var(--destructive) l c h / 30%)\",\n          // Warning\n          \"--warning-bg\": \"oklch(from var(--warning) l c h / 10%)\",\n          \"--warning-text\": \"var(--warning)\",\n          \"--warning-border\": \"oklch(from var(--warning) l c h / 30%)\",\n          // Info\n          \"--info-bg\": \"oklch(from var(--info) l c h / 10%)\",\n          \"--info-text\": \"var(--info)\",\n          \"--info-border\": \"oklch(from var(--info) l c h / 30%)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"group backdrop-blur-md\",\n        },\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Toaster, toast, type ToasterComponentProps };\n"],"names":["Sonner","CircleCheckIcon","InfoIcon","TriangleAlertIcon","OctagonXIcon","Loader2Icon"],"mappings":";;;;;;;;AA2BA,SAAS,QAAQ;AAAA,EACf,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,SAAS,oBAACC,aAAA,EAAgB,WAAU,SAAA,CAAS;AAAA,QAC7C,MAAM,oBAACC,MAAA,EAAS,WAAU,SAAA,CAAS;AAAA,QACnC,SAAS,oBAACC,eAAA,EAAkB,WAAU,SAAA,CAAS;AAAA,QAC/C,OAAO,oBAACC,UAAA,EAAa,WAAU,SAAA,CAAS;AAAA,QACxC,SAAS,oBAACC,cAAA,EAAY,WAAU,sBAAA,CAAsB;AAAA,MAAA;AAAA,MAExD,OACE;AAAA,QACE,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA;AAAA,QAEnB,gBAAgB;AAAA,QAChB,kBAAkB;AAAA,QAClB,oBAAoB;AAAA;AAAA,QAEpB,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,kBAAkB;AAAA;AAAA,QAElB,gBAAgB;AAAA,QAChB,kBAAkB;AAAA,QAClB,oBAAoB;AAAA;AAAA,QAEpB,aAAa;AAAA,QACb,eAAe;AAAA,QACf,iBAAiB;AAAA,MAAA;AAAA,MAGrB,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/src/components/ui/spinner.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../../../lib/utils.js";
+import LoaderCircle from "../../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LoaderCircle,
+    {
+      "data-slot": "spinner",
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/ui/src/components/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../../../../src/components/ui/spinner.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { Loader2Icon } from \"lucide-react\";\n\ntype SpinnerProps = React.ComponentProps<\"svg\">;\n\n/**\n * Animated loading spinner for indicating processing states.\n * Uses Lucide's Loader2 icon with continuous rotation animation.\n */\nfunction Spinner({ className, ...props }: SpinnerProps) {\n  return (\n    <Loader2Icon\n      data-slot=\"spinner\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner, type SpinnerProps };\n"],"names":["Loader2Icon"],"mappings":";;;AASA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAuB;AACtD,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/src/components/ui/switch.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../../../lib/utils.js";
+import { SwitchRoot } from "../../../../../node_modules/@base-ui/react/esm/switch/root/SwitchRoot.js";
+import { SwitchThumb } from "../../../../../node_modules/@base-ui/react/esm/switch/thumb/SwitchThumb.js";
+function Switch({ className, size = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchRoot,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchThumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full 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)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+        }
+      )
+    }
+  );
+}
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/ui/src/components/ui/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../../../../src/components/ui/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  /** Switch size variant. @default \"default\" */\n  size?: \"sm\" | \"default\";\n};\n\n/**\n * Toggle switch for binary on/off settings.\n * Renders a styled switch with automatic focus management and form integration.\n */\nfunction Switch({ className, size = \"default\", ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full 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)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch, type SwitchProps };\n"],"names":["SwitchPrimitive.Root","SwitchPrimitive.Thumb"],"mappings":";;;;;AAeA;AACE;AACE;AAACA;AAAA;AACW;AACC;AACA;AACT;AACA;AAAA;AAEE;AAEJ;AAACC;AAAA;AACW;AACA;AAAA;AAAA;AACZ;AAGN;;;;"}

package/dist/components/ui/src/components/ui/table.js

@@ -0,0 +1,113 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../../../lib/utils.js";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full p-8 overflow-x-auto",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted h-10 border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("text-muted-foreground mt-4 pt-2 text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};
+//# sourceMappingURL=table.js.map

package/dist/components/ui/src/components/ui/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../../../../src/components/ui/table.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TableProps = React.ComponentProps<\"table\">;\n\n/**\n * Root table component with automatic horizontal scrolling container.\n * Wraps standard HTML table element with responsive overflow behavior.\n */\nfunction Table({ className, ...props }: TableProps) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full p-8 overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\ntype TableHeaderProps = React.ComponentProps<\"thead\">;\n\n/**\n * Table header section for column headings.\n * Use with TableHead for individual header cells.\n */\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\ntype TableBodyProps = React.ComponentProps<\"tbody\">;\n\n/**\n * Table body section for data rows.\n * Use with TableRow and TableCell for row content.\n */\nfunction TableBody({ className, ...props }: TableBodyProps) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\ntype TableFooterProps = React.ComponentProps<\"tfoot\">;\n\n/**\n * Table footer section for summary rows.\n * Typically used for totals or aggregated data.\n */\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype TableRowProps = React.ComponentProps<\"tr\">;\n\n/**\n * Table row with hover and selection states.\n * Add `data-state=\"selected\"` attribute to highlight row.\n */\nfunction TableRow({ className, ...props }: TableRowProps) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted h-10 border-b transition-colors\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype TableHeadProps = React.ComponentProps<\"th\">;\n\n/**\n * Table header cell for column titles.\n * Use within TableHeader > TableRow.\n */\nfunction TableHead({ className, ...props }: TableHeadProps) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype TableCellProps = React.ComponentProps<\"td\">;\n\n/**\n * Table data cell for row content.\n * Use within TableBody > TableRow.\n */\nfunction TableCell({ className, ...props }: TableCellProps) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype TableCaptionProps = React.ComponentProps<\"caption\">;\n\n/**\n * Table caption for accessibility and description.\n * Rendered below the table by default.\n */\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 pt-2 text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n  type TableProps,\n  type TableHeaderProps,\n  type TableBodyProps,\n  type TableFooterProps,\n  type TableHeadProps,\n  type TableRowProps,\n  type TableCellProps,\n  type TableCaptionProps,\n};\n"],"names":[],"mappings":";;;AAUA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;AAClD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,UACvD,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAQA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/src/components/ui/tabs.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../../../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../../../../lib/utils.js";
+import { TabsRoot } from "../../../../../node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js";
+import { TabsPanel } from "../../../../../node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js";
+import { TabsList as TabsList$1 } from "../../../../../node_modules/@base-ui/react/esm/tabs/list/TabsList.js";
+import { TabsTab } from "../../../../../node_modules/@base-ui/react/esm/tabs/tab/TabsTab.js";
+function Tabs({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsRoot,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(
+        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const tabsListVariants = cva(
+  "rounded-full p-[4px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-md group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    compoundVariants: [
+      {
+        class: "group-data-[orientation=vertical]/tabs:rounded-4xl group-data-[orientation=vertical]/tabs:p-1.5"
+      }
+    ],
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsList$1,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsTab,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "gap-1.5 rounded-full border border-transparent px-3 py-2 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPanel,
+    {
+      "data-slot": "tabs-content",
+      className: cn("text-sm flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/ui/src/components/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../../../src/components/ui/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\ntype TabsProps = TabsPrimitive.Root.Props;\n\n/**\n * Root container for tabs component that manages tab state and orientation.\n * Supports both controlled and uncontrolled usage with horizontal or vertical layout.\n */\nfunction Tabs({ className, orientation = \"horizontal\", ...props }: TabsProps) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"rounded-full p-[4px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-md group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    compoundVariants: [\n      {\n        class:\n          \"group-data-[orientation=vertical]/tabs:rounded-4xl group-data-[orientation=vertical]/tabs:p-1.5\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ntype TabsListProps = TabsPrimitive.List.Props &\n  VariantProps<typeof tabsListVariants>;\n\n/**\n * Container for tab triggers with two visual variants.\n * @param variant - Visual style: \"default\" (background highlight) or \"line\" (underline indicator). @default \"default\"\n */\nfunction TabsList({ className, variant = \"default\", ...props }: TabsListProps) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsTriggerProps = TabsPrimitive.Tab.Props;\n\n/**\n * Individual tab button that activates the corresponding panel.\n * Supports icons, badges, and disabled state. Active tab has visual highlight or underline based on variant.\n */\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"gap-1.5 rounded-full border border-transparent px-3 py-2 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentProps = TabsPrimitive.Panel.Props;\n\n/**\n * Content panel that displays when its corresponding tab is active.\n * Automatically hidden/shown based on active tab value.\n */\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n};\n"],"names":["TabsPrimitive.Root","TabsPrimitive.List","TabsPrimitive.Tab","TabsPrimitive.Panel"],"mappings":";;;;;;;;AAaA;AACE;AACE;AAACA;AAAA;AACW;AACQ;AACP;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAEA;AAAyB;AACvB;AACA;AACY;AACC;AACE;AACH;AAAA;AACR;AAEgB;AAChB;AAEI;AAAA;AACJ;AAEe;AACN;AAAA;AAGf;AASA;AACE;AACE;AAACC;AAAA;AACW;AACI;AACwC;AAClD;AAAA;AAGV;AAQA;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACE;AAACC;AAAA;AACW;AAC4C;AAClD;AAAA;AAGV;;;;;;;;"}

package/dist/components/ui/src/components/ui/textarea.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../../../../lib/utils.js";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-3xl border bg-transparent px-3 py-2.5 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/ui/src/components/ui/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../../../../../src/components/ui/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TextareaProps = React.ComponentProps<\"textarea\">;\n\n/**\n * Multi-line text input with auto-grow behavior and validation states.\n *\n * Features:\n * - Auto-grows vertically with content (field-sizing-content)\n * - Error state via aria-invalid\n * - Supports all native textarea props (rows, disabled, etc.)\n *\n * @example\n * ```tsx\n * <Textarea placeholder=\"Enter description...\" rows={4} />\n * ```\n */\nfunction Textarea({ className, ...props }: TextareaProps) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-3xl border bg-transparent px-3 py-2.5 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, type TextareaProps };\n"],"names":[],"mappings":";;;AAmBA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}