@neynar/ui 0.4.0 → 1.0.0

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  /** Visual variant. @default \"sidebar\" */\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  /** Collapse behavior. @default \"offcanvas\" */\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  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]: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(className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\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;AAeA;AAAiB;AACR;AACG;AACI;AACd;AACA;AAEF;AACE;AAEA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AAAA;AAKP;AACE;AAEI;AAAC;AAAA;AACc;AACH;AACE;AACF;AAER;AACqB;AAAA;AAGvB;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACW;AACE;AAC4C;AAC1C;AACH;AACD;AAGV;AAAA;AAAC;AAAA;AACW;AACC;AACT;AACA;AACA;AAGI;AAAA;AACN;AAAA;AAEF;AAAC;AAAA;AACW;AACC;AACT;AAGI;AAAA;AAIA;AACJ;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;AACkB;AAErB;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

@@ -1,128 +1,8 @@
+type SkeletonProps = React.ComponentProps<"div">;
 /**
- * Skeleton - Animated loading placeholder that improves perceived performance
- *
- * A lightweight component that creates animated placeholders mimicking the structure
- * and layout of content being loaded. Features a subtle pulse animation to indicate
- * loading state while maintaining layout stability during data fetching operations.
- *
- * Built on standard HTML div element with Tailwind CSS animations. Designed to be
- * highly composable and can be shaped to match any content structure using className.
- * The component uses semantic presentation role by default for optimal accessibility.
- *
- * @example
- * ```tsx
- * // Basic text content placeholder
- * <Skeleton className="h-4 w-[250px]" />
- * ```
- *
- * @example
- * ```tsx
- * // Avatar placeholder - circular skeleton
- * <Skeleton className="h-12 w-12 rounded-full" aria-label="Loading user avatar" />
- * ```
- *
- * @example
- * ```tsx
- * // Button placeholder with proper dimensions
- * <Skeleton className="h-10 w-24 rounded-md" aria-label="Loading action button" />
- * ```
- *
- * @example
- * ```tsx
- * // Image placeholder with aspect ratio
- * <Skeleton className="h-48 w-full rounded-lg" aria-label="Loading featured image" />
- * ```
- *
- * @example
- * ```tsx
- * // Card content structure - multiple related skeletons
- * <div className="space-y-3" aria-busy="true" aria-label="Loading article content">
- *   <Skeleton className="h-6 w-3/4" /> // Title
- *   <Skeleton className="h-4 w-full" /> // First line
- *   <Skeleton className="h-4 w-5/6" /> // Second line
- *   <Skeleton className="h-4 w-4/5" /> // Third line
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Complex user profile layout
- * <Card className="p-6">
- *   <div className="flex items-center gap-4 mb-4">
- *     <Skeleton className="h-16 w-16 rounded-full" aria-label="Loading profile picture" />
- *     <div className="space-y-2">
- *       <Skeleton className="h-5 w-32" /> // Name
- *       <Skeleton className="h-4 w-24" /> // Title
- *       <Skeleton className="h-3 w-20" /> // Status
- *     </div>
- *   </div>
- *   <div className="space-y-3">
- *     <Skeleton className="h-4 w-full" />
- *     <Skeleton className="h-4 w-4/5" />
- *     <Skeleton className="h-32 w-full rounded-md" /> // Content area
- *   </div>
- * </Card>
- * ```
- *
- * @example
- * ```tsx
- * // Data table loading state
- * <div className="space-y-2" aria-busy="true" aria-label="Loading table data">
- *   {Array.from({ length: 5 }).map((_, index) => (
- *     <div key={index} className="flex items-center gap-4 p-2">
- *       <Skeleton className="h-8 w-8 rounded-full" />
- *       <Skeleton className="h-4 w-32" />
- *       <Skeleton className="h-4 w-24" />
- *       <Skeleton className="h-4 w-16" />
- *       <div className="ml-auto">
- *         <Skeleton className="h-8 w-20 rounded-md" />
- *       </div>
- *     </div>
- *   ))}
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Navigation menu loading
- * <nav className="space-y-2" aria-label="Loading navigation">
- *   {Array.from({ length: 4 }).map((_, index) => (
- *     <div key={index} className="flex items-center gap-3 p-2">
- *       <Skeleton className="h-5 w-5 rounded" /> // Icon
- *       <Skeleton className="h-4 w-20" /> // Label
- *     </div>
- *   ))}
- * </nav>
- * ```
- *
- * @accessibility
- * - Uses pulse animation to indicate loading state without being distracting
- * - Maintains layout dimensions to prevent content jumping when real content loads
- * - Supports ARIA labels for screen reader context when representing specific content
- * - Consider wrapping multiple related skeletons in containers with aria-busy="true"
- * - Respects prefers-reduced-motion user preference through Tailwind's animate-pulse
- * - Use meaningful aria-label values to describe what content is being loaded
- * - Group related skeletons with appropriate ARIA landmarks for better navigation
- *
- * @performance
- * - Lightweight implementation with minimal DOM overhead
- * - CSS-based pulse animation is GPU-accelerated and performant
- * - No JavaScript animations or intervals for optimal battery life
- * - Optimized for SSR and hydration without layout shifts
- *
- * @styling
- * - Base classes: bg-accent animate-pulse rounded-md
- * - Highly customizable via className prop with Tailwind utilities
- * - Common patterns: h-4 w-[200px] (text), h-12 w-12 rounded-full (avatar)
- * - Responsive sizing: w-full md:w-1/2 lg:w-1/3 for adaptive layouts
- * - Shape variants: rounded-none (rectangular), rounded-full (circular), rounded-lg (images)
- *
- * @see {@link https://ui.shadcn.com/docs/components/skeleton} shadcn/ui Skeleton Documentation
- * @see {@link Card} Often used within card layouts for structured content loading
- * @see {@link Avatar} Use with Avatar components for profile loading states
- * @see {@link Button} Match button dimensions for interactive element placeholders
- * @since 1.0.0
+ * Skeleton loading placeholder with pulse animation.
+ * Use to indicate content is loading while maintaining layout structure.
  */
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+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/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4HG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEjD;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQvD;AAED,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

package/dist/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-md animate-pulse", className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

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-md 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,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -1,101 +1,21 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+type SliderProps = SliderPrimitive.Root.Props;
 /**
- * Slider - Range input control for selecting numeric values
- *
- * A versatile range input control built on Radix UI Slider primitives that allows users
- * to select single or multiple values by dragging thumbs along a track. Supports both
- * horizontal and vertical orientations, custom ranges, step intervals, and comprehensive
- * accessibility features for keyboard and touch interaction.
- *
- * The component automatically renders the appropriate number of thumbs based on the
- * number of values provided, supporting both single-value and multi-value range selection.
- * Built with enhanced styling and smooth animations for an optimal user experience.
- *
- * @example
- * ```tsx
- * // Basic single-value slider
- * <Slider defaultValue={[50]} max={100} step={1} />
- * ```
+ * Slider for selecting single values or ranges with one or more draggable thumbs.
+ * Supports horizontal and vertical orientations with keyboard navigation.
  *
  * @example
- * ```tsx
- * // Controlled slider with state management
- * const [value, setValue] = useState([25])
- *
- * <Slider
- *   value={value}
- *   onValueChange={setValue}
- *   max={100}
- *   step={5}
- * />
- * ```
+ * // Single value slider
+ * <Slider defaultValue={[50]} min={0} max={100} />
  *
  * @example
- * ```tsx
- * // Range slider with two thumbs for selecting a range
- * <Slider
- *   defaultValue={[25, 75]}
- *   max={100}
- *   step={1}
- *   minStepsBetweenThumbs={10}
- * />
- * ```
+ * // Range slider (two thumbs)
+ * <Slider defaultValue={[25, 75]} min={0} max={100} />
  *
  * @example
- * ```tsx
- * // Vertical orientation for space-constrained layouts
- * <Slider
- *   defaultValue={[50]}
- *   max={100}
- *   orientation="vertical"
- *   className="h-60"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Custom range and step intervals for precise control
- * <Slider
- *   defaultValue={[500]}
- *   min={0}
- *   max={1000}
- *   step={50}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Form integration with name and onValueCommit
- * <form>
- *   <Slider
- *     name="volume"
- *     defaultValue={[75]}
- *     max={100}
- *     onValueCommit={(value) => console.log('Final value:', value)}
- *   />
- * </form>
- * ```
- *
- * @accessibility
- * - Implements WAI-ARIA slider pattern with proper roles and properties
- * - Full keyboard navigation support:
- *   - Arrow keys adjust value by step amount (Left/Down decrease, Right/Up increase)
- *   - Page Up/Page Down adjust by larger increments (typically 10 × step)
- *   - Shift + Arrow keys for larger adjustments
- *   - Home/End keys jump to minimum/maximum values
- * - Focus management with visible focus indicators and ring styling
- * - Touch and mouse interaction fully supported with proper pointer events
- * - Screen reader announcements for value changes and state updates
- * - Disabled state properly communicated to assistive technologies
- * - Automatic form integration with proper name/value pairs
- * - RTL (right-to-left) text direction support
- *
- * @see {@link https://ui.shadcn.com/docs/components/slider} shadcn/ui Slider Documentation
- * @see {@link https://www.radix-ui.com/docs/primitives/components/slider} Radix UI Slider API Reference
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/slider/} WAI-ARIA Slider Pattern
- * @since 1.0.0
+ * // Controlled slider with step
+ * <Slider value={value} onValueChange={setValue} min={0} max={100} step={10} />
  */
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Slider };
+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/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AA4C1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CA0CnD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,KAAK,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CA+Cb;AAED,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/ui/slider.js

@@ -0,0 +1,72 @@
+"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, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderRoot,
+    {
+      className: "data-horizontal:w-full data-vertical:h-full",
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      thumbAlignment: "edge",
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        SliderControl,
+        {
+          className: cn(
+            "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              SliderTrack,
+              {
+                "data-slot": "slider-track",
+                className: "bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative overflow-hidden select-none",
+                children: /* @__PURE__ */ jsx(
+                  SliderIndicator,
+                  {
+                    "data-slot": "slider-range",
+                    className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+                  }
+                )
+              }
+            ),
+            Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+              SliderThumb,
+              {
+                "data-slot": "slider-thumb",
+                className: "border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+              },
+              index
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Slider
+};
+//# sourceMappingURL=slider.js.map

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, max],\n    [value, defaultValue, min, max],\n  );\n\n  return (\n    <SliderPrimitive.Root\n      className=\"data-horizontal:w-full data-vertical:h-full\"\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control\n        className={cn(\n          \"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\",\n          className,\n        )}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative overflow-hidden select-none\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\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;AAMH;AACa;AAGhC;AACE;AAACA;AAAA;AACW;AACA;AACV;AACA;AACA;AACA;AACe;AACX;AAEJ;AAACC;AAAA;AACY;AACT;AACA;AAAA;AAGF;AAAA;AAACC;AAAA;AACW;AACA;AAEV;AAACC;AAAA;AACW;AACA;AAAA;AAAA;AACZ;AAAA;AAGA;AAACC;AAAA;AACW;AAEA;AAAA;AADL;AAGR;AAAA;AAAA;AAAA;AACH;AAGN;;;;"}