@minidev.fun/ui 1.0.4 → 1.0.5

package/dist/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/skeleton.d.ts

@@ -0,0 +1,8 @@
+type SkeletonProps = React.ComponentProps<"div">;
+/**
+ * Skeleton loading placeholder with pulse animation.
+ * Use to indicate content is loading while maintaining layout structure.
+ */
+declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, type SkeletonProps };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/{src/components/ui/skeleton.js → skeleton.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../../../../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",

package/dist/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/slider.d.ts

@@ -0,0 +1,21 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+type SliderProps = SliderPrimitive.Root.Props;
+/**
+ * Slider for selecting single values or ranges with one or more draggable thumbs.
+ * Supports horizontal and vertical orientations with keyboard navigation.
+ *
+ * @example
+ * // Single value slider
+ * <Slider defaultValue={[50]} min={0} max={100} />
+ *
+ * @example
+ * // Range slider (two thumbs)
+ * <Slider defaultValue={[25, 75]} min={0} max={100} />
+ *
+ * @example
+ * // Controlled slider with step
+ * <Slider value={value} onValueChange={setValue} min={0} max={100} step={10} />
+ */
+declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider, type SliderProps };
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/ui/{src/components/ui/slider.js → slider.js}

@@ -1,12 +1,12 @@
 "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";
+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,

package/dist/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/sonner.d.ts

@@ -0,0 +1,21 @@
+import { toast, ToasterProps } from 'sonner';
+type ToasterComponentProps = ToasterProps;
+/**
+ * Toast notification container with themed icons and color system integration.
+ *
+ * Provides a pre-configured Sonner toaster with custom icons for each toast type
+ * and automatic theme integration. Use the exported `toast` function to trigger notifications.
+ *
+ * @example
+ * ```tsx
+ * // Add to your app root
+ * <Toaster position="bottom-right" />
+ *
+ * // Trigger toasts anywhere
+ * toast.success("Saved successfully")
+ * toast.error("Failed to save", { description: error.message })
+ * ```
+ */
+declare function Toaster({ theme, richColors, ...props }: ToasterComponentProps): import("react/jsx-runtime").JSX.Element;
+export { Toaster, toast, type ToasterComponentProps };
+//# sourceMappingURL=sonner.d.ts.map

package/dist/components/ui/{src/components/ui/sonner.js → sonner.js}

@@ -1,11 +1,11 @@
 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";
+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,

package/dist/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/spinner.d.ts

@@ -0,0 +1,8 @@
+type SpinnerProps = React.ComponentProps<"svg">;
+/**
+ * Animated loading spinner for indicating processing states.
+ * Uses Lucide's Loader2 icon with continuous rotation animation.
+ */
+declare function Spinner({ className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner, type SpinnerProps };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/ui/{src/components/ui/spinner.js → spinner.js}

@@ -1,6 +1,6 @@
 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";
+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,

package/dist/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/switch.d.ts

@@ -0,0 +1,12 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+type SwitchProps = SwitchPrimitive.Root.Props & {
+    /** Switch size variant. @default "default" */
+    size?: "sm" | "default";
+};
+/**
+ * Toggle switch for binary on/off settings.
+ * Renders a styled switch with automatic focus management and form integration.
+ */
+declare function Switch({ className, size, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch, type SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/ui/{src/components/ui/switch.js → switch.js}

@@ -1,8 +1,8 @@
 "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";
+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,

package/dist/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/table.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+type TableProps = React.ComponentProps<"table">;
+/**
+ * Root table component with automatic horizontal scrolling container.
+ * Wraps standard HTML table element with responsive overflow behavior.
+ */
+declare function Table({ className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+type TableHeaderProps = React.ComponentProps<"thead">;
+/**
+ * Table header section for column headings.
+ * Use with TableHead for individual header cells.
+ */
+declare function TableHeader({ className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+type TableBodyProps = React.ComponentProps<"tbody">;
+/**
+ * Table body section for data rows.
+ * Use with TableRow and TableCell for row content.
+ */
+declare function TableBody({ className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+type TableFooterProps = React.ComponentProps<"tfoot">;
+/**
+ * Table footer section for summary rows.
+ * Typically used for totals or aggregated data.
+ */
+declare function TableFooter({ className, ...props }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+type TableRowProps = React.ComponentProps<"tr">;
+/**
+ * Table row with hover and selection states.
+ * Add `data-state="selected"` attribute to highlight row.
+ */
+declare function TableRow({ className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+type TableHeadProps = React.ComponentProps<"th">;
+/**
+ * Table header cell for column titles.
+ * Use within TableHeader > TableRow.
+ */
+declare function TableHead({ className, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+type TableCellProps = React.ComponentProps<"td">;
+/**
+ * Table data cell for row content.
+ * Use within TableBody > TableRow.
+ */
+declare function TableCell({ className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+type TableCaptionProps = React.ComponentProps<"caption">;
+/**
+ * Table caption for accessibility and description.
+ * Rendered below the table by default.
+ */
+declare function TableCaption({ className, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, type TableProps, type TableHeaderProps, type TableBodyProps, type TableFooterProps, type TableHeadProps, type TableRowProps, type TableCellProps, type TableCaptionProps, };
+//# sourceMappingURL=table.d.ts.map

package/dist/components/ui/{src/components/ui/table.js → table.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { cn } from "../../../../../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 function Table({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",

package/dist/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/tabs.d.ts

@@ -0,0 +1,31 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+type TabsProps = TabsPrimitive.Root.Props;
+/**
+ * Root container for tabs component that manages tab state and orientation.
+ * Supports both controlled and uncontrolled usage with horizontal or vertical layout.
+ */
+declare function Tabs({ className, orientation, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TabsListProps = TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>;
+/**
+ * Container for tab triggers with two visual variants.
+ * @param variant - Visual style: "default" (background highlight) or "line" (underline indicator). @default "default"
+ */
+declare function TabsList({ className, variant, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+type TabsTriggerProps = TabsPrimitive.Tab.Props;
+/**
+ * Individual tab button that activates the corresponding panel.
+ * Supports icons, badges, and disabled state. Active tab has visual highlight or underline based on variant.
+ */
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+type TabsContentProps = TabsPrimitive.Panel.Props;
+/**
+ * Content panel that displays when its corresponding tab is active.
+ * Automatically hidden/shown based on active tab value.
+ */
+declare function TabsContent({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/ui/{src/components/ui/tabs.js → tabs.js}

@@ -1,11 +1,11 @@
 "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";
+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,

package/dist/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/textarea.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+type TextareaProps = React.ComponentProps<"textarea">;
+/**
+ * Multi-line text input with auto-grow behavior and validation states.
+ *
+ * Features:
+ * - Auto-grows vertically with content (field-sizing-content)
+ * - Error state via aria-invalid
+ * - Supports all native textarea props (rows, disabled, etc.)
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Enter description..." rows={4} />
+ * ```
+ */
+declare function Textarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export { Textarea, type TextareaProps };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/ui/{src/components/ui/textarea.js → textarea.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { cn } from "../../../../../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "textarea",

package/dist/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;"}

package/dist/components/ui/toast.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type ToastVariant = "default" | "success" | "destructive" | "info" | "loading";
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    variant?: ToastVariant;
+    onClose?: () => void;
+}
+declare function Toast({ title, description, variant, className, onClose, children, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export { Toast, type ToastProps };
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/ui/{src/components/ui/toast.js → toast.js}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "react";
-import { cn } from "../../../../../lib/utils.js";
-import X from "../../../../../node_modules/lucide-react/dist/esm/icons/x.js";
-import LoaderCircle from "../../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-import Info from "../../../../../node_modules/lucide-react/dist/esm/icons/info.js";
-import CircleAlert from "../../../../../node_modules/lucide-react/dist/esm/icons/circle-alert.js";
-import CircleCheck from "../../../../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { cn } from "../../lib/utils.js";
+import X from "../../node_modules/lucide-react/dist/esm/icons/x.js";
+import LoaderCircle from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import Info from "../../node_modules/lucide-react/dist/esm/icons/info.js";
+import CircleAlert from "../../node_modules/lucide-react/dist/esm/icons/circle-alert.js";
+import CircleCheck from "../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
 const variantIcons = {
   default: null,
   success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-5 text-success" }),

package/dist/components/ui/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/ui/toast.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { XIcon, CheckCircle2, AlertCircle, Info, Loader2 } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport type ToastVariant =\r\n  | \"default\"\r\n  | \"success\"\r\n  | \"destructive\"\r\n  | \"info\"\r\n  | \"loading\";\r\n\r\ninterface ToastProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  title?: string;\r\n  description?: string;\r\n  variant?: ToastVariant;\r\n  onClose?: () => void;\r\n}\r\n\r\nconst variantIcons = {\r\n  default: null,\r\n  success: <CheckCircle2 className=\"size-5 text-success\" />,\r\n  destructive: <AlertCircle className=\"size-5 text-destructive\" />,\r\n  info: <Info className=\"size-5 text-info\" />,\r\n  loading: <Loader2 className=\"size-5 animate-spin text-muted-foreground\" />,\r\n};\r\n\r\nfunction Toast({\r\n  title,\r\n  description,\r\n  variant = \"default\",\r\n  className,\r\n  onClose,\r\n  children,\r\n  ...props\r\n}: ToastProps) {\r\n  return (\r\n    <div\r\n      data-slot=\"toast\"\r\n      data-variant={variant}\r\n      className={cn(\r\n        \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-4.5xl border p-5 pr-8 transition-all\",\r\n        \"bg-card/20 border-border\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"flex gap-3\">\r\n        {variantIcons[variant]}\r\n        <div className=\"grid gap-1\">\r\n          {title && <div className=\"text-sm font-semibold\">{title}</div>}\r\n          {description && (\r\n            <div className=\"text-xs opacity-90 text-muted-foreground\">\r\n              {description}\r\n            </div>\r\n          )}\r\n          {children}\r\n        </div>\r\n      </div>\r\n      <button\r\n        onClick={onClose}\r\n        className=\"absolute right-3 top-2 p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100\"\r\n      >\r\n        <XIcon className=\"size-4\" />\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { Toast, type ToastProps };\r\n"],"names":["CheckCircle2","AlertCircle","Loader2","XIcon"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS,oBAACA,aAAA,EAAa,WAAU,sBAAA,CAAsB;AAAA,EACvD,aAAa,oBAACC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,EAC9D,MAAM,oBAAC,MAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,EACzC,SAAS,oBAACC,cAAA,EAAQ,WAAU,4CAAA,CAA4C;AAC1E;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,UAAA,aAAa,OAAO;AAAA,UACrB,qBAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,YAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,yBAAyB,UAAA,OAAM;AAAA,YACvD,eACC,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,aACH;AAAA,YAED;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAACC,GAAA,EAAM,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5B;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,26 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import { toggleVariants } from './toggle';
+type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+    /** Gap between items in spacing units. Set to 0 for joined buttons. @default 0 */
+    spacing?: number;
+    /** Layout direction of the toggle group. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+};
+/**
+ * Container for a group of toggle buttons that share state. Supports both single and multiple selection modes.
+ *
+ * By default, the toggle group allows multiple selection. Use `multiple={false}` for single selection.
+ * All items inherit variant and size from the group unless explicitly overridden.
+ */
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+type ToggleGroupItemProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
+/**
+ * Individual toggle button within a ToggleGroup. Inherits variant and size from parent group context.
+ *
+ * When spacing={0}, items are joined together with shared borders. Use `aria-label` for icon-only buttons.
+ */
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps, };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/ui/{src/components/ui/toggle-group.js → toggle-group.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../../../../../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 import { toggleVariants } from "./toggle.js";
-import { ToggleGroup as ToggleGroup$1 } from "../../../../../node_modules/@base-ui/react/esm/toggle-group/ToggleGroup.js";
-import { Toggle } from "../../../../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
+import { ToggleGroup as ToggleGroup$1 } from "../../node_modules/@base-ui/react/esm/toggle-group/ToggleGroup.js";
+import { Toggle } from "../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
 const ToggleGroupContext = React.createContext({
   size: "default",
   variant: "default",

package/dist/components/ui/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"@/components/ui/toggle\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number;\n    orientation?: \"horizontal\" | \"vertical\";\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n});\n\ntype ToggleGroupProps = ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    /** Gap between items in spacing units. Set to 0 for joined buttons. @default 0 */\n    spacing?: number;\n    /** Layout direction of the toggle group. @default \"horizontal\" */\n    orientation?: \"horizontal\" | \"vertical\";\n  };\n\n/**\n * Container for a group of toggle buttons that share state. Supports both single and multiple selection modes.\n *\n * By default, the toggle group allows multiple selection. Use `multiple={false}` for single selection.\n * All items inherit variant and size from the group unless explicitly overridden.\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"rounded-full data-[spacing=0]:data-[variant=outline]:shadow-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleGroupItemProps = TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>;\n\n/**\n * Individual toggle button within a ToggleGroup. Inherits variant and size from parent group context.\n *\n * When spacing={0}, items are joined together with shared borders. Use `aria-label` for icon-only buttons.\n */\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleGroupItemProps) {\n  const context = React.useContext(ToggleGroupContext);\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-full group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-full group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-full group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-full shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n}\n\nexport {\n  ToggleGroup,\n  ToggleGroupItem,\n  type ToggleGroupProps,\n  type ToggleGroupItemProps,\n};\n"],"names":["ToggleGroupPrimitive","TogglePrimitive"],"mappings":";;;;;;;AAUA;AAKE;AACM;AACG;AACA;AAEX;AAgBA;AAAqB;AACnB;AACA;AACA;AACU;AACI;AACd;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACI;AACH;AACG;AACI;AACA;AACP;AACT;AACA;AAAA;AAEE;AAEJ;AAAoB;AAAnB;AACkC;AAEhC;AAAA;AAAA;AACH;AAGN;AAUA;AAAyB;AACvB;AACA;AACU;AACH;AAET;AACE;AAEA;AACE;AAACC;AAAA;AACW;AACuB;AACN;AACL;AACX;AACT;AACe;AACe;AACN;AACvB;AACD;AAAA;AAEE;AAEH;AAAA;AAGP;;;;;"}

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,14 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { VariantProps } from 'class-variance-authority';
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
+/**
+ * Two-state button that can be pressed (on) or unpressed (off).
+ * Supports icons, text, or both. Commonly used for formatting toolbars, view mode toggles, and preference switches.
+ */
+declare function Toggle({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants, type ToggleProps };
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/ui/{src/components/ui/toggle.js → toggle.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { cva } from "../../../../../node_modules/class-variance-authority/dist/index.js";
-import { cn } from "../../../../../lib/utils.js";
-import { Toggle as Toggle$1 } from "../../../../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../lib/utils.js";
+import { Toggle as Toggle$1 } from "../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
 const toggleVariants = cva(
   "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-full text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {

package/dist/components/ui/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../src/components/ui/toggle.tsx"],"sourcesContent":["import { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-full text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent shadow-xs\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2.5 py-0.5\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-3 py-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\ntype ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;\n\n/**\n * Two-state button that can be pressed (on) or unpressed (off).\n * Supports icons, text, or both. Commonly used for formatting toolbars, view mode toggles, and preference switches.\n */\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants, type ToggleProps };\n"],"names":["TogglePrimitive"],"mappings":";;;;AAKA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,MACzD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}