@waveso/ui 0.15.0 → 0.16.0

package/dist/scroll-area.js

@@ -3,18 +3,37 @@ import { cn } from "./lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/scroll-area.tsx
-function ScrollArea({ className, children, ...props }) {
+/**
+* The edge fade is a mask, so the content itself turns transparent and
+* whatever is behind it shows through: no shadow color to match, in any
+* theme. Each edge has a fixed fade (`--scroll-area-fade`) that switches on
+* when Base UI marks that edge as having more content (`data-overflow-*`):
+* its edge opacity goes from 1 (none) to 0 (fully faded).
+* The two axes are intersected; the horizontal one flips in right-to-left
+* layouts, where Base UI's "start" is the right edge.
+*/
+const FADE_MASK = "[--scroll-area-fade-x:to_right] rtl:[--scroll-area-fade-x:to_left] data-overflow-y-start:[--scroll-area-fade-top:0] data-overflow-y-end:[--scroll-area-fade-bottom:0] data-overflow-x-start:[--scroll-area-fade-start:0] data-overflow-x-end:[--scroll-area-fade-end:0] [mask-composite:intersect] [mask-image:linear-gradient(to_bottom,rgb(0_0_0/var(--scroll-area-fade-top,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-bottom,1))),linear-gradient(var(--scroll-area-fade-x),rgb(0_0_0/var(--scroll-area-fade-start,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-end,1)))]";
+/**
+* A scrollable region with styled scrollbars. Both scrollbars are built in:
+* Base UI only mounts one when its axis overflows, so pass content and the
+* right bars appear. They fade in while the area is hovered or scrolling.
+*/
+function ScrollArea({ className, children, fade = true, ...props }) {
 	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: cn("relative motion-color has-[>[data-slot=scroll-area-viewport]:focus-visible]:ring-3 has-[>[data-slot=scroll-area-viewport]:focus-visible]:ring-focus/50 has-[>[data-slot=scroll-area-viewport]:focus-visible]:outline-hidden", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "focus-visible:ring-focus/50 size-full rounded-[inherit] motion-color outline-hidden focus-visible:ring-3 focus-visible:outline-1",
-				children
+				className: cn("size-full rounded-[inherit] outline-hidden", fade && FADE_MASK),
+				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
+					"data-slot": "scroll-area-content",
+					children
+				})
 			}),
-			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
 			/* @__PURE__ */ jsx(ScrollArea$1.Corner, { "data-slot": "scroll-area-corner" })
 		]
 	});
@@ -23,11 +42,11 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: cn("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", className),
+		className: cn("pointer-events-none flex touch-none p-px opacity-0 transition-opacity duration-(--duration-md) ease-(--ease) select-none data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "bg-line relative flex-1 rounded-full"
+			className: "bg-shade relative flex-1 rounded-full"
 		})
 	});
 }

package/dist/select.d.ts

@@ -1,9 +1,6 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/select.d.ts
 type SelectProps<Value, Multiple extends boolean | undefined = false> = Select$1.Root.Props<Value, Multiple>;
 type SelectGroupProps = React.ComponentProps<typeof Select$1.Group>;
@@ -19,68 +16,22 @@ type SelectSeparatorProps = React.ComponentProps<typeof Select$1.Separator>;
 type SelectScrollUpButtonProps = React.ComponentProps<typeof Select$1.ScrollUpArrow>;
 type SelectScrollDownButtonProps = React.ComponentProps<typeof Select$1.ScrollDownArrow>;
 declare const selectTriggerVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "default" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SelectTriggerProps = SelectTriggerBaseProps & VariantProps<typeof selectTriggerVariants>;
 type SelectContentProps = SelectPopupProps & Pick<SelectPositionerProps, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">;
-declare function Select<Value, Multiple extends boolean | undefined = false>({
-  ...props
-}: SelectProps<Value, Multiple>): _$react_jsx_runtime0.JSX.Element;
-declare function SelectPortal({
-  ...props
-}: SelectPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectPositioner({
-  className,
-  ...props
-}: SelectPositionerProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectList({
-  className,
-  ...props
-}: SelectListProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectGroup({
-  className,
-  ...props
-}: SelectGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectValue({
-  className,
-  ...props
-}: SelectValueProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectTrigger({
-  className,
-  size,
-  children,
-  ...props
-}: SelectTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectContent({
-  className,
-  children,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  alignItemWithTrigger,
-  ...props
-}: SelectContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectLabel({
-  className,
-  ...props
-}: SelectLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectSeparator({
-  className,
-  ...props
-}: SelectSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectScrollUpButton({
-  className,
-  ...props
-}: SelectScrollUpButtonProps): _$react_jsx_runtime0.JSX.Element;
-declare function SelectScrollDownButton({
-  className,
-  ...props
-}: SelectScrollDownButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare function Select<Value, Multiple extends boolean | undefined = false>({ ...props }: SelectProps<Value, Multiple>): React.JSX.Element;
+declare function SelectPortal({ ...props }: SelectPortalProps): React.JSX.Element;
+declare function SelectPositioner({ className, ...props }: SelectPositionerProps): React.JSX.Element;
+declare function SelectList({ className, ...props }: SelectListProps): React.JSX.Element;
+declare function SelectGroup({ className, ...props }: SelectGroupProps): React.JSX.Element;
+declare function SelectValue({ className, ...props }: SelectValueProps): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: SelectTriggerProps): React.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectContentProps): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectLabelProps): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectItemProps): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): React.JSX.Element;
 //#endregion
 export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, selectTriggerVariants };

package/dist/select.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.tsx
-const selectTriggerVariants = cva("data-placeholder:text-soft bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const selectTriggerVariants = cva("data-placeholder:text-soft bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs",
 		sm: "h-8 px-3 text-sm",
@@ -76,7 +76,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -96,7 +96,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
-		className: cn("data-highlighted:bg-primary data-highlighted:text-white not-data-[variant=destructive]:data-highlighted:**:text-white relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
 			"data-slot": "select-item-text",
@@ -114,7 +114,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		"data-slot": "select-separator",
-		className: cn("bg-line pointer-events-none -mx-1 my-1 h-px", className),
+		className: cn("bg-contour pointer-events-none -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/separator.d.ts

@@ -1,13 +1,7 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
-
 //#region src/separator.d.ts
 type SeparatorProps = React.ComponentProps<typeof Separator$1>;
-declare function Separator({
-  className,
-  orientation,
-  ...props
-}: SeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function Separator({ className, orientation, ...props }: SeparatorProps): React.JSX.Element;
 //#endregion
 export { Separator, type SeparatorProps };

package/dist/separator.js

@@ -7,7 +7,7 @@ function Separator({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "separator",
 		orientation,
-		className: cn("bg-line shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
+		className: cn("bg-contour shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
 		...props
 	});
 }

package/dist/sidebar.d.ts

@@ -2,12 +2,9 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { TooltipContent } from "./tooltip.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/sidebar.d.ts
 /**
  * Persist sidebar state to a cookie.
@@ -60,168 +57,74 @@ type SidebarProviderProps = React.ComponentProps<"div"> & {
    * <SidebarProvider persist={(open) => saveToServer(open)}>
    * ```
    */
-  persist?: (open: boolean) => void; /** Key for Cmd/Ctrl+key toggle shortcut. Defaults to "b". Pass `false` to disable. */
-  keyboardShortcut?: string | false; /** Breakpoint (px) below which the sidebar uses a mobile drawer. Defaults to 768. */
+  persist?: (open: boolean) => void;
+  /** Key for Cmd/Ctrl+key toggle shortcut. Defaults to "b". Pass `false` to disable. */
+  keyboardShortcut?: string | false;
+  /** Breakpoint (px) below which the sidebar uses a mobile drawer. Defaults to 768. */
   mobileBreakpoint?: number;
 };
-declare function SidebarProvider({
-  defaultOpen,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  persist,
-  keyboardShortcut,
-  mobileBreakpoint,
-  className,
-  style,
-  children,
-  ...props
-}: SidebarProviderProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, persist, keyboardShortcut, mobileBreakpoint, className, style, children, ...props }: SidebarProviderProps): React.JSX.Element;
 type SidebarProps = React.ComponentProps<"div"> & {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
 };
-declare function Sidebar({
-  side,
-  variant,
-  collapsible,
-  className,
-  children,
-  ...props
-}: SidebarProps): _$react_jsx_runtime0.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: SidebarProps): React.JSX.Element;
 type SidebarTriggerProps = React.ComponentProps<typeof Button>;
-declare function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: SidebarTriggerProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps): React.JSX.Element;
 type SidebarRailProps = React.ComponentProps<"button">;
-declare function SidebarRail({
-  className,
-  ...props
-}: SidebarRailProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarRail({ className, ...props }: SidebarRailProps): React.JSX.Element;
 type SidebarInsetProps = React.ComponentProps<"main">;
-declare function SidebarInset({
-  className,
-  ...props
-}: SidebarInsetProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarInset({ className, ...props }: SidebarInsetProps): React.JSX.Element;
 type SidebarInputProps = React.ComponentProps<typeof Input>;
-declare function SidebarInput({
-  className,
-  ...props
-}: SidebarInputProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarInput({ className, ...props }: SidebarInputProps): React.JSX.Element;
 type SidebarHeaderProps = React.ComponentProps<"div">;
-declare function SidebarHeader({
-  className,
-  ...props
-}: SidebarHeaderProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): React.JSX.Element;
 type SidebarFooterProps = React.ComponentProps<"div">;
-declare function SidebarFooter({
-  className,
-  ...props
-}: SidebarFooterProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarFooter({ className, ...props }: SidebarFooterProps): React.JSX.Element;
 type SidebarSeparatorProps = React.ComponentProps<typeof Separator>;
-declare function SidebarSeparator({
-  className,
-  ...props
-}: SidebarSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): React.JSX.Element;
 type SidebarContentProps = React.ComponentProps<"div">;
-declare function SidebarContent({
-  className,
-  style,
-  ...props
-}: SidebarContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarContent({ className, style, ...props }: SidebarContentProps): React.JSX.Element;
 type SidebarGroupProps = React.ComponentProps<"div">;
-declare function SidebarGroup({
-  className,
-  ...props
-}: SidebarGroupProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarGroup({ className, ...props }: SidebarGroupProps): React.JSX.Element;
 type SidebarGroupLabelProps = useRender.ComponentProps<"div"> & React.ComponentProps<"div">;
-declare function SidebarGroupLabel({
-  className,
-  render,
-  ...props
-}: SidebarGroupLabelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupLabel({ className, render, ...props }: SidebarGroupLabelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 type SidebarGroupActionProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button">;
-declare function SidebarGroupAction({
-  className,
-  render,
-  ...props
-}: SidebarGroupActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupAction({ className, render, ...props }: SidebarGroupActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 type SidebarGroupContentProps = React.ComponentProps<"div">;
-declare function SidebarGroupContent({
-  className,
-  ...props
-}: SidebarGroupContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): React.JSX.Element;
 type SidebarMenuProps = React.ComponentProps<"ul">;
-declare function SidebarMenu({
-  className,
-  ...props
-}: SidebarMenuProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenu({ className, ...props }: SidebarMenuProps): React.JSX.Element;
 type SidebarMenuItemProps = React.ComponentProps<"li">;
-declare function SidebarMenuItem({
-  className,
-  ...props
-}: SidebarMenuItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps): React.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SidebarMenuButtonProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>;
-declare function SidebarMenuButton({
-  render,
-  isActive,
-  variant,
-  size,
-  tooltip,
-  className,
-  ...props
-}: SidebarMenuButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): React.JSX.Element;
 type SidebarMenuActionProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
   showOnHover?: boolean;
 };
-declare function SidebarMenuAction({
-  className,
-  render,
-  showOnHover,
-  ...props
-}: SidebarMenuActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: SidebarMenuActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 type SidebarMenuBadgeProps = React.ComponentProps<"div">;
-declare function SidebarMenuBadge({
-  className,
-  ...props
-}: SidebarMenuBadgeProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): React.JSX.Element;
 type SidebarMenuSkeletonProps = React.ComponentProps<"div"> & {
   showIcon?: boolean;
 };
-declare function SidebarMenuSkeleton({
-  className,
-  showIcon,
-  ...props
-}: SidebarMenuSkeletonProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonProps): React.JSX.Element;
 type SidebarMenuSubProps = React.ComponentProps<"ul">;
-declare function SidebarMenuSub({
-  className,
-  ...props
-}: SidebarMenuSubProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): React.JSX.Element;
 type SidebarMenuSubItemProps = React.ComponentProps<"li">;
-declare function SidebarMenuSubItem({
-  className,
-  ...props
-}: SidebarMenuSubItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps): React.JSX.Element;
 type SidebarMenuSubButtonProps = useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
   size?: "sm" | "md";
   isActive?: boolean;
 };
-declare function SidebarMenuSubButton({
-  render,
-  size,
-  isActive,
-  className,
-  ...props
-}: SidebarMenuSubButtonProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: SidebarMenuSubButtonProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 //#endregion
 export { Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, SidebarGroupAction, type SidebarGroupActionProps, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInput, type SidebarInputProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSkeleton, type SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSeparatorProps, SidebarTrigger, type SidebarTriggerProps, cookiePersist, localStoragePersist, sidebarMenuButtonVariants, useSidebar };

package/dist/sidebar.js

@@ -31,7 +31,7 @@ const SIDEBAR_DEFAULT_KEYBOARD_SHORTCUT = "b";
 * <SidebarProvider persist={cookiePersist("my-sidebar", 86400)}>
 * ```
 */
-function cookiePersist(name = "sidebar-state", maxAge = 3600 * 24 * 7) {
+function cookiePersist(name = "sidebar-state", maxAge = 604800) {
 	return (open) => {
 		document.cookie = `${name}=${open}; path=/; max-age=${maxAge}`;
 	};
@@ -74,7 +74,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		persistRef.current?.(openState);
 	}, [setOpenProp, open]);
 	const toggleSidebar = React.useCallback(() => {
-		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+		return isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev);
 	}, [
 		isMobile,
 		setOpen,
@@ -163,14 +163,14 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-line" + (side === "left" ? " after:right-0" : " after:left-0"), className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-contour" + (side === "left" ? " after:right-0" : " after:left-0"), className),
 			...props,
 			children: /* @__PURE__ */ jsx(TooltipProvider, {
 				delay: 0,
 				closeDelay: 300,
 				children: /* @__PURE__ */ jsx("div", {
 					"data-slot": "sidebar-inner",
-					className: "bg-surface group-data-[variant=floating]:ring-line group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col",
+					className: "bg-surface group-data-[variant=floating]:ring-contour group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col",
 					children
 				})
 			})
@@ -204,7 +204,7 @@ function SidebarRail({ className, ...props }) {
 		tabIndex: -1,
 		onClick: toggleSidebar,
 		title: "Toggle Sidebar",
-		className: cn("hover:after:bg-line absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 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", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		className: cn("hover:after:bg-contour absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 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", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
 		...props
 	});
 }
@@ -239,7 +239,7 @@ function SidebarFooter({ className, ...props }) {
 function SidebarSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "sidebar-separator",
-		className: cn("bg-line mx-2 data-[orientation=horizontal]:w-auto", className),
+		className: cn("bg-contour mx-2 data-[orientation=horizontal]:w-auto", className),
 		...props
 	});
 }
@@ -273,7 +273,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
 function SidebarGroupAction({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>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", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>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", className) }, props),
 		render,
 		state: { slot: "sidebar-group-action" }
 	});
@@ -299,11 +299,11 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 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]:shrink-0", {
+const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 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-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			default: "hover:bg-primary hover:text-white",
-			outline: "bg-foundation hover:bg-primary hover:text-white ring-1 ring-line hover:ring-focus"
+			default: "",
+			outline: "bg-foundation hover:bg-highlight ring-1 ring-contour hover:ring-focus"
 		},
 		size: {
 			default: "h-11 text-sm",
@@ -344,7 +344,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>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", showOnHover && "peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight peer-data-active/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>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", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
 		render,
 		state: { slot: "sidebar-menu-action" }
 	});
@@ -352,7 +352,7 @@ function SidebarMenuAction({ className, render, showOnHover = false, ...props })
 function SidebarMenuBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-menu-badge",
-		className: cn("text-contrast peer-hover/menu-button:text-white peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden", className),
+		className: cn("text-contrast peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden", className),
 		...props
 	});
 }
@@ -373,7 +373,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "sidebar-menu-sub",
-		className: cn("border-line ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
+		className: cn("border-contour ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className),
 		...props
 	});
 }
@@ -387,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
 function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 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", className) }, props),
+		props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-highlight active:bg-highlight data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 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-30 aria-disabled:pointer-events-none aria-disabled:opacity-30 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
 		render,
 		state: {
 			slot: "sidebar-menu-sub-button",

package/dist/skeleton.d.ts

@@ -1,11 +1,6 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/skeleton.d.ts
 type SkeletonProps = React.ComponentProps<"div">;
-declare function Skeleton({
-  className,
-  ...props
-}: SkeletonProps): _$react_jsx_runtime0.JSX.Element;
+declare function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element;
 //#endregion
 export { Skeleton, type SkeletonProps };

package/dist/slider.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
-
 //#region src/slider.d.ts
 type SliderProps = React.ComponentProps<typeof Slider$1.Root> & {
   controlClassName?: string;
@@ -12,17 +10,6 @@ type SliderProps = React.ComponentProps<typeof Slider$1.Root> & {
    */
   getThumbAriaLabel?: (index: number) => string;
 };
-declare function Slider({
-  className,
-  controlClassName,
-  defaultValue,
-  value,
-  min,
-  max,
-  orientation,
-  "aria-label": ariaLabel,
-  getThumbAriaLabel,
-  ...props
-}: SliderProps): _$react_jsx_runtime0.JSX.Element;
+declare function Slider({ className, controlClassName, defaultValue, value, min, max, orientation, "aria-label": ariaLabel, getThumbAriaLabel, ...props }: SliderProps): React.JSX.Element;
 //#endregion
 export { Slider, type SliderProps };

package/dist/slider.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 //#region src/slider.tsx
 function Slider({ className, controlClassName, defaultValue, value, min = 0, max = 100, orientation = "horizontal", "aria-label": ariaLabel, getThumbAriaLabel, ...props }) {
-	const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
+	const resolvedValues = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
 		value,
 		defaultValue,
 		min,
@@ -23,18 +23,18 @@ function Slider({ className, controlClassName, defaultValue, value, min = 0, max
 		...props,
 		children: /* @__PURE__ */ jsxs(Slider$1.Control, {
 			"data-slot": "slider-control",
-			className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
+			className: cn("relative flex w-full touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
 			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
 				"data-slot": "slider-track",
-				className: "bg-secondary relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+				className: "bg-shade relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
 				children: /* @__PURE__ */ jsx(Slider$1.Indicator, {
 					"data-slot": "slider-range",
 					className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
 				})
-			}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+			}), Array.from({ length: resolvedValues.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				"data-slot": "slider-thumb",
 				"aria-label": getThumbAriaLabel ? getThumbAriaLabel(index) : ariaLabel,
-				className: "border-focus ring-focus/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
+				className: "ring-focus/50 relative block data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-6 data-[orientation=vertical]:h-6 data-[orientation=vertical]:w-4 shrink-0 rounded-full border border-shade bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
 			}, index))]
 		})
 	});