@waveso/ui 0.15.0 → 0.16.0

package/dist/menu.js

@@ -33,7 +33,7 @@ function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOf
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 			"data-slot": "menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -58,7 +58,7 @@ function MenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -72,7 +72,7 @@ function MenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
 		"data-slot": "menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-popup-open:bg-highlight flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -92,7 +92,7 @@ function MenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
 		"data-slot": "menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex 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 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex 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 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -112,7 +112,7 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
 		"data-slot": "menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex 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 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex 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 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "menu-radio-item-indicator",
@@ -124,14 +124,14 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 function MenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu$1.Separator, {
 		"data-slot": "menu-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }
 function MenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "menu-shortcut",
-		className: cn("text-muted group-focus/menu-item:text-white ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted ml-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/menubar.d.ts

@@ -1,8 +1,6 @@
 import { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger } from "./menu.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
-
 //#region src/menubar.d.ts
 type MenubarProps = React.ComponentProps<typeof Menubar$1>;
 type MenubarMenuProps = React.ComponentProps<typeof Menu>;
@@ -20,58 +18,21 @@ type MenubarShortcutProps = React.ComponentProps<typeof MenuShortcut>;
 type MenubarSubProps = React.ComponentProps<typeof MenuSub>;
 type MenubarSubTriggerProps = React.ComponentProps<typeof MenuSubTrigger>;
 type MenubarSubContentProps = React.ComponentProps<typeof MenuSubContent>;
-declare function Menubar({
-  className,
-  ...props
-}: MenubarProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarMenu({
-  ...props
-}: MenubarMenuProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarGroup({
-  ...props
-}: MenubarGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarPortal({
-  ...props
-}: MenubarPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarTrigger({
-  ...props
-}: MenubarTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarContent({
-  align,
-  alignOffset,
-  sideOffset,
-  className,
-  ...props
-}: MenubarContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarItem({
-  ...props
-}: MenubarItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarCheckboxItem({
-  ...props
-}: MenubarCheckboxItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarRadioGroup({
-  ...props
-}: MenubarRadioGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarRadioItem({
-  ...props
-}: MenubarRadioItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarLabel({
-  ...props
-}: MenubarLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarSeparator({
-  ...props
-}: MenubarSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarShortcut({
-  ...props
-}: MenubarShortcutProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarSub({
-  ...props
-}: MenubarSubProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarSubTrigger({
-  ...props
-}: MenubarSubTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function MenubarSubContent({
-  ...props
-}: MenubarSubContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Menubar({ className, ...props }: MenubarProps): React.JSX.Element;
+declare function MenubarMenu({ ...props }: MenubarMenuProps): React.JSX.Element;
+declare function MenubarGroup({ ...props }: MenubarGroupProps): React.JSX.Element;
+declare function MenubarPortal({ ...props }: MenubarPortalProps): React.JSX.Element;
+declare function MenubarTrigger({ ...props }: MenubarTriggerProps): React.JSX.Element;
+declare function MenubarContent({ align, alignOffset, sideOffset, className, ...props }: MenubarContentProps): React.JSX.Element;
+declare function MenubarItem({ ...props }: MenubarItemProps): React.JSX.Element;
+declare function MenubarCheckboxItem({ ...props }: MenubarCheckboxItemProps): React.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps): React.JSX.Element;
+declare function MenubarRadioItem({ ...props }: MenubarRadioItemProps): React.JSX.Element;
+declare function MenubarLabel({ ...props }: MenubarLabelProps): React.JSX.Element;
+declare function MenubarSeparator({ ...props }: MenubarSeparatorProps): React.JSX.Element;
+declare function MenubarShortcut({ ...props }: MenubarShortcutProps): React.JSX.Element;
+declare function MenubarSub({ ...props }: MenubarSubProps): React.JSX.Element;
+declare function MenubarSubTrigger({ ...props }: MenubarSubTriggerProps): React.JSX.Element;
+declare function MenubarSubContent({ ...props }: MenubarSubContentProps): React.JSX.Element;
 //#endregion
 export { Menubar, MenubarCheckboxItem, type MenubarCheckboxItemProps, MenubarContent, type MenubarContentProps, MenubarGroup, type MenubarGroupProps, MenubarItem, type MenubarItemProps, MenubarLabel, type MenubarLabelProps, MenubarMenu, type MenubarMenuProps, MenubarPortal, type MenubarPortalProps, type MenubarProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, type MenubarRadioItemProps, MenubarSeparator, type MenubarSeparatorProps, MenubarShortcut, type MenubarShortcutProps, MenubarSub, MenubarSubContent, type MenubarSubContentProps, type MenubarSubProps, MenubarSubTrigger, type MenubarSubTriggerProps, MenubarTrigger, type MenubarTriggerProps };

package/dist/menubar.js

@@ -7,7 +7,7 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 function Menubar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1, {
 		"data-slot": "menubar",
-		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-edge p-1", className),
+		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-shade p-1", className),
 		...props
 	});
 }

package/dist/pagination.d.ts

@@ -1,13 +1,12 @@
 import { Button } from "./button.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
 //#region src/pagination.d.ts
 type PaginationProps = React.ComponentProps<"nav">;
 type PaginationContentProps = React.ComponentProps<"ul">;
 type PaginationItemProps = React.ComponentProps<"li">;
 type PaginationLinkProps = {
-  isActive?: boolean; /** Marks the link disabled — aria-disabled, removed from tab order, non-interactive. */
+  isActive?: boolean;
+  /** Marks the link disabled — aria-disabled, removed from tab order, non-interactive. */
   disabled?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
 type PaginationPreviousProps = PaginationLinkProps & {
@@ -17,35 +16,12 @@ type PaginationNextProps = PaginationLinkProps & {
   text?: string;
 };
 type PaginationEllipsisProps = React.ComponentProps<"span">;
-declare function Pagination({
-  className,
-  ...props
-}: PaginationProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationContent({
-  className,
-  ...props
-}: PaginationContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationItem(props: PaginationItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationLink({
-  className,
-  isActive,
-  disabled,
-  size,
-  ...props
-}: PaginationLinkProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationPrevious({
-  className,
-  text,
-  ...props
-}: PaginationPreviousProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationNext({
-  className,
-  text,
-  ...props
-}: PaginationNextProps): _$react_jsx_runtime0.JSX.Element;
-declare function PaginationEllipsis({
-  className,
-  ...props
-}: PaginationEllipsisProps): _$react_jsx_runtime0.JSX.Element;
+declare function Pagination({ className, ...props }: PaginationProps): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: PaginationContentProps): React.JSX.Element;
+declare function PaginationItem(props: PaginationItemProps): React.JSX.Element;
+declare function PaginationLink({ className, isActive, disabled, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: PaginationPreviousProps): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: PaginationNextProps): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): React.JSX.Element;
 //#endregion
 export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps };

package/dist/pagination.js

@@ -26,7 +26,7 @@ function PaginationItem(props) {
 }
 function PaginationLink({ className, isActive, disabled, size = "icon", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
-		variant: isActive ? "outline" : "ghost",
+		variant: isActive ? "default" : "ghost",
 		size,
 		className: cn(disabled && "pointer-events-none opacity-50", className),
 		render: /* @__PURE__ */ jsx("a", {

package/dist/popover.d.ts

@@ -1,8 +1,6 @@
 import { RestoreFocusOnClose } from "./lib/focus.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-
 //#region src/popover.d.ts
 type PopoverProps = React.ComponentProps<typeof Popover$1.Root>;
 type PopoverTriggerProps = React.ComponentProps<typeof Popover$1.Trigger>;
@@ -27,46 +25,14 @@ type PopoverContentProps = React.ComponentProps<typeof Popover$1.Popup> & Pick<R
    */
   positionerClassName?: string;
 };
-declare function Popover({
-  ...props
-}: PopoverProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverTrigger({
-  ...props
-}: PopoverTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverPortal({
-  ...props
-}: PopoverPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverPositioner({
-  className,
-  ...props
-}: PopoverPositionerProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverBackdrop({
-  className,
-  ...props
-}: PopoverBackdropProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverContent({
-  className,
-  positionerClassName,
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  anchor,
-  restoreFocusOnClose,
-  finalFocus,
-  ...props
-}: PopoverContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverHeader({
-  className,
-  ...props
-}: PopoverHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverTitle({
-  className,
-  ...props
-}: PopoverTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function PopoverDescription({
-  className,
-  ...props
-}: PopoverDescriptionProps): _$react_jsx_runtime0.JSX.Element;
+declare function Popover({ ...props }: PopoverProps): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: PopoverTriggerProps): React.JSX.Element;
+declare function PopoverPortal({ ...props }: PopoverPortalProps): React.JSX.Element;
+declare function PopoverPositioner({ className, ...props }: PopoverPositionerProps): React.JSX.Element;
+declare function PopoverBackdrop({ className, ...props }: PopoverBackdropProps): React.JSX.Element;
+declare function PopoverContent({ className, positionerClassName, align, alignOffset, side, sideOffset, anchor, restoreFocusOnClose, finalFocus, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: PopoverHeaderProps): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverTitleProps): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): React.JSX.Element;
 //#endregion
 export { Popover, PopoverBackdrop, type PopoverBackdropProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, PopoverPortal, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, type RestoreFocusOnClose };

package/dist/popover.js

@@ -46,7 +46,7 @@ function PopoverContent({ className, positionerClassName, align = "center", alig
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
 			"data-slot": "popover-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 flex w-72 flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})

package/dist/preview-card.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
-
 //#region src/preview-card.d.ts
 type PreviewCardProps = React.ComponentProps<typeof PreviewCard$1.Root>;
 type PreviewCardTriggerProps = React.ComponentProps<typeof PreviewCard$1.Trigger>;
@@ -11,28 +9,10 @@ type PreviewCardPopupProps = React.ComponentProps<typeof PreviewCard$1.Popup>;
 type PreviewCardContentProps = PreviewCardPopupProps & Pick<PreviewCardPositionerProps, "align" | "alignOffset" | "side" | "sideOffset" | "anchor"> & {
   positionerClassName?: string;
 };
-declare function PreviewCard({
-  ...props
-}: PreviewCardProps): _$react_jsx_runtime0.JSX.Element;
-declare function PreviewCardTrigger({
-  ...props
-}: PreviewCardTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function PreviewCardPortal({
-  ...props
-}: PreviewCardPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function PreviewCardPositioner({
-  className,
-  ...props
-}: PreviewCardPositionerProps): _$react_jsx_runtime0.JSX.Element;
-declare function PreviewCardContent({
-  className,
-  positionerClassName,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  anchor,
-  ...props
-}: PreviewCardContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function PreviewCard({ ...props }: PreviewCardProps): React.JSX.Element;
+declare function PreviewCardTrigger({ ...props }: PreviewCardTriggerProps): React.JSX.Element;
+declare function PreviewCardPortal({ ...props }: PreviewCardPortalProps): React.JSX.Element;
+declare function PreviewCardPositioner({ className, ...props }: PreviewCardPositionerProps): React.JSX.Element;
+declare function PreviewCardContent({ className, positionerClassName, side, sideOffset, align, alignOffset, anchor, ...props }: PreviewCardContentProps): React.JSX.Element;
 //#endregion
 export { PreviewCard, PreviewCardContent, type PreviewCardContentProps, PreviewCardPortal, type PreviewCardPortalProps, PreviewCardPositioner, type PreviewCardPositionerProps, type PreviewCardProps, PreviewCardTrigger, type PreviewCardTriggerProps };

package/dist/preview-card.js

@@ -38,7 +38,7 @@ function PreviewCardContent({ className, positionerClassName, side = "bottom", s
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
 			"data-slot": "preview-card-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 w-64 origin-(--transform-origin) rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 w-64 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
 			...props
 		})
 	}) });

package/dist/progress.d.ts

@@ -1,34 +1,15 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
-
 //#region src/progress.d.ts
 type ProgressProps = React.ComponentProps<typeof Progress$1.Root>;
 type ProgressTrackProps = React.ComponentProps<typeof Progress$1.Track>;
 type ProgressIndicatorProps = React.ComponentProps<typeof Progress$1.Indicator>;
 type ProgressLabelProps = React.ComponentProps<typeof Progress$1.Label>;
 type ProgressValueProps = React.ComponentProps<typeof Progress$1.Value>;
-declare function Progress({
-  className,
-  children,
-  value,
-  ...props
-}: ProgressProps): _$react_jsx_runtime0.JSX.Element;
-declare function ProgressTrack({
-  className,
-  ...props
-}: ProgressTrackProps): _$react_jsx_runtime0.JSX.Element;
-declare function ProgressIndicator({
-  className,
-  ...props
-}: ProgressIndicatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function ProgressLabel({
-  className,
-  ...props
-}: ProgressLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function ProgressValue({
-  className,
-  ...props
-}: ProgressValueProps): _$react_jsx_runtime0.JSX.Element;
+declare function Progress({ className, children, value, ...props }: ProgressProps): React.JSX.Element;
+declare function ProgressTrack({ className, ...props }: ProgressTrackProps): React.JSX.Element;
+declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): React.JSX.Element;
+declare function ProgressLabel({ className, ...props }: ProgressLabelProps): React.JSX.Element;
+declare function ProgressValue({ className, ...props }: ProgressValueProps): React.JSX.Element;
 //#endregion
 export { Progress, ProgressIndicator, type ProgressIndicatorProps, ProgressLabel, type ProgressLabelProps, type ProgressProps, ProgressTrack, type ProgressTrackProps, ProgressValue, type ProgressValueProps };

package/dist/progress.js

@@ -14,7 +14,7 @@ function Progress({ className, children, value = null, ...props }) {
 }
 function ProgressTrack({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
-		className: cn("bg-secondary relative flex h-1 w-full items-center overflow-x-hidden rounded-full", className),
+		className: cn("bg-secondary relative flex h-3 w-full items-center overflow-x-hidden rounded-full", className),
 		"data-slot": "progress-track",
 		...props
 	});
@@ -35,7 +35,7 @@ function ProgressLabel({ className, ...props }) {
 }
 function ProgressValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Value, {
-		className: cn("text-muted ml-auto text-sm tabular-nums", className),
+		className: cn("text-muted ms-auto text-sm tabular-nums", className),
 		"data-slot": "progress-value",
 		...props
 	});

package/dist/radio-group.d.ts

@@ -1,17 +1,10 @@
 import { Radio } from "./radio.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
-
 //#region src/radio-group.d.ts
 type RadioGroupProps = React.ComponentProps<typeof RadioGroup$1>;
 type RadioGroupItemProps = React.ComponentProps<typeof Radio>;
-declare function RadioGroup({
-  className,
-  ...props
-}: RadioGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function RadioGroupItem({
-  ...props
-}: RadioGroupItemProps): _$react_jsx_runtime0.JSX.Element;
+declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
+declare function RadioGroupItem({ ...props }: RadioGroupItemProps): React.JSX.Element;
 //#endregion
 export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/radio-group.js

@@ -7,7 +7,7 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
-		className: cn("grid w-full gap-2", className),
+		className: cn("grid w-full gap-3", className),
 		...props
 	});
 }

package/dist/radio.d.ts

@@ -1,17 +1,9 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
-
 //#region src/radio.d.ts
 type RadioProps = React.ComponentProps<typeof Radio$1.Root>;
 type RadioIndicatorProps = React.ComponentProps<typeof Radio$1.Indicator>;
-declare function Radio({
-  className,
-  ...props
-}: RadioProps): _$react_jsx_runtime0.JSX.Element;
-declare function RadioIndicator({
-  className,
-  ...props
-}: RadioIndicatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function Radio({ className, ...props }: RadioProps): React.JSX.Element;
+declare function RadioIndicator({ className, ...props }: RadioIndicatorProps): React.JSX.Element;
 //#endregion
 export { Radio, RadioIndicator, type RadioIndicatorProps, type RadioProps };

package/dist/radio.js

@@ -6,7 +6,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 function Radio({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		"data-slot": "radio",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 group/radio peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-shade border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioIndicator, {})
 	});
@@ -14,7 +14,7 @@ function Radio({ className, ...props }) {
 function RadioIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
 		"data-slot": "radio-indicator",
-		className: cn("group-aria-invalid/radio:text-destructive text-white absolute inset-0 flex items-center justify-center data-unchecked:opacity-0", "after:block after:size-2 after:rounded-full after:bg-current", className),
+		className: cn("text-white absolute inset-0 flex items-center justify-center data-unchecked:opacity-0", "after:block after:size-3 after:rounded-full after:bg-current", className),
 		...props
 	});
 }

package/dist/resizable.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/resizable.d.ts
+type ResizablePanelGroupProps = Omit<React.ComponentProps<typeof Group>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+type ResizablePanelProps = Omit<React.ComponentProps<typeof Panel>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+type ResizableHandleProps = Omit<React.ComponentProps<typeof Separator>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Show a grip on the line, a visible hint that it can be dragged.
+   *
+   * @default false
+   */
+  grip?: boolean;
+};
+/**
+ * A row of panels the user resizes by dragging the handles between them, or
+ * from the keyboard once a handle has focus. Pass `orientation="vertical"` to
+ * stack them instead.
+ *
+ * The group fills its parent: it sets its own `width` and `height` to 100%
+ * inline, so a height class on the group has no effect. Size the parent, or
+ * pass `style`.
+ */
+declare function ResizablePanelGroup({ ref, ...props }: ResizablePanelGroupProps): React.JSX.Element;
+/**
+ * One resizable region. Numeric sizes are pixels; use strings for
+ * percentages (`defaultSize="25%"`). `className` lands on the panel's inner
+ * element, which scrolls when the content overflows.
+ */
+declare function ResizablePanel({ ref, ...props }: ResizablePanelProps): React.JSX.Element;
+/**
+ * The line between two panels. It lights up while the pointer is close
+ * enough to drag it: the library hit-tests a zone wider than the line itself
+ * and reports it in `data-separator` (`hover`, `active`, `focus`, `disabled`),
+ * which CSS `:hover` on a 1px line would miss.
+ */
+declare function ResizableHandle({ className, grip, ref, ...props }: ResizableHandleProps): React.JSX.Element;
+//#endregion
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps };

package/dist/resizable.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/resizable.tsx
+/**
+* A row of panels the user resizes by dragging the handles between them, or
+* from the keyboard once a handle has focus. Pass `orientation="vertical"` to
+* stack them instead.
+*
+* The group fills its parent: it sets its own `width` and `height` to 100%
+* inline, so a height class on the group has no effect. Size the parent, or
+* pass `style`.
+*/
+function ResizablePanelGroup({ ref, ...props }) {
+	return /* @__PURE__ */ jsx(Group, {
+		"data-slot": "resizable-panel-group",
+		elementRef: ref,
+		...props
+	});
+}
+/**
+* One resizable region. Numeric sizes are pixels; use strings for
+* percentages (`defaultSize="25%"`). `className` lands on the panel's inner
+* element, which scrolls when the content overflows.
+*/
+function ResizablePanel({ ref, ...props }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		elementRef: ref,
+		...props
+	});
+}
+/**
+* The line between two panels. It lights up while the pointer is close
+* enough to drag it: the library hit-tests a zone wider than the line itself
+* and reports it in `data-separator` (`hover`, `active`, `focus`, `disabled`),
+* which CSS `:hover` on a 1px line would miss.
+*/
+function ResizableHandle({ className, grip = false, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "resizable-handle",
+		elementRef: ref,
+		className: cn("group/resizable-handle bg-contour z-10 flex items-center justify-center motion-color outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 data-[separator=active]:bg-focus data-[separator=hover]:bg-focus data-[separator=disabled]:pointer-events-none aria-[orientation=horizontal]:h-px aria-[orientation=vertical]:w-px", className),
+		...props,
+		children: grip && /* @__PURE__ */ jsx("div", {
+			"data-slot": "resizable-handle-grip",
+			className: "bg-shade h-6 w-1 shrink-0 rounded-full motion-color group-data-[separator=active]/resizable-handle:bg-focus group-data-[separator=hover]/resizable-handle:bg-focus group-data-[separator=disabled]/resizable-handle:opacity-30 group-aria-[orientation=horizontal]/resizable-handle:h-1 group-aria-[orientation=horizontal]/resizable-handle:w-6"
+		})
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/scroll-area.d.ts

@@ -1,19 +1,20 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
-
 //#region src/scroll-area.d.ts
-type ScrollAreaProps = React.ComponentProps<typeof ScrollArea$1.Root>;
-declare function ScrollArea({
-  className,
-  children,
-  ...props
-}: ScrollAreaProps): _$react_jsx_runtime0.JSX.Element;
+type ScrollAreaProps = React.ComponentProps<typeof ScrollArea$1.Root> & {
+  /**
+   * Fade the content out toward any edge that has more to scroll to. On by
+   * default; the fade size follows `--scroll-area-fade` (default `2.5rem`).
+   */
+  fade?: boolean;
+};
 type ScrollBarProps = React.ComponentProps<typeof ScrollArea$1.Scrollbar>;
-declare function ScrollBar({
-  className,
-  orientation,
-  ...props
-}: ScrollBarProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * 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.
+ */
+declare function ScrollArea({ className, children, fade, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): React.JSX.Element;
 //#endregion
 export { ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps };