@waveso/ui 0.15.0 → 0.16.0

package/dist/checkbox.js

@@ -7,11 +7,11 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white dark:data-checked:bg-primary dark:data-indeterminate:bg-primary data-checked:border-primary data-indeterminate: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 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-hidden group-has-disabled/field:opacity-50 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-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white data-checked:border-primary data-indeterminate: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 peer relative flex size-6 shrink-0 items-center justify-center rounded-sm 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__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
-			className: "group/indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			className: "group/indicator grid place-content-center text-current transition-none [&>svg]:size-5",
 			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "col-start-1 row-start-1 group-data-indeterminate/indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "col-start-1 row-start-1 hidden group-data-indeterminate/indicator:block" })]
 		})
 	});

package/dist/collapsible.d.ts

@@ -1,20 +1,11 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-
 //#region src/collapsible.d.ts
 type CollapsibleProps = React.ComponentProps<typeof Collapsible$1.Root>;
 type CollapsibleTriggerProps = React.ComponentProps<typeof Collapsible$1.Trigger>;
 type CollapsibleContentProps = React.ComponentProps<typeof Collapsible$1.Panel>;
-declare function Collapsible({
-  ...props
-}: CollapsibleProps): _$react_jsx_runtime0.JSX.Element;
-declare function CollapsibleTrigger({
-  className,
-  ...props
-}: CollapsibleTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function CollapsibleContent({
-  ...props
-}: CollapsibleContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Collapsible({ ...props }: CollapsibleProps): React.JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsibleContent({ ...props }: CollapsibleContentProps): React.JSX.Element;
 //#endregion
 export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/combobox.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 { Combobox as Combobox$1 } from "@base-ui/react/combobox";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/combobox.d.ts
 type ComboboxProps = React.ComponentProps<typeof Combobox$1.Root>;
 type ComboboxValueProps = React.ComponentProps<typeof Combobox$1.Value>;
@@ -32,85 +29,25 @@ type ComboboxChipProps = ComboboxChipBaseProps & {
   showRemove?: boolean;
 };
 type ComboboxContentProps = ComboboxPopupProps & Pick<ComboboxPositionerProps, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">;
-declare function Combobox({
-  ...props
-}: ComboboxProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxValue({
-  ...props
-}: ComboboxValueProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxClear({
-  className,
-  ...props
-}: ComboboxClearProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxInput({
-  className,
-  children,
-  disabled,
-  showTrigger,
-  showClear,
-  size,
-  ...props
-}: ComboboxInputProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxContent({
-  className,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  anchor,
-  ...props
-}: ComboboxContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxList({
-  className,
-  ...props
-}: ComboboxListProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxGroup({
-  className,
-  ...props
-}: ComboboxGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxCollection({
-  ...props
-}: ComboboxCollectionProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxEmpty({
-  className,
-  ...props
-}: ComboboxEmptyProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function Combobox({ ...props }: ComboboxProps): React.JSX.Element;
+declare function ComboboxValue({ ...props }: ComboboxValueProps): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): React.JSX.Element;
+declare function ComboboxClear({ className, ...props }: ComboboxClearProps): React.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, size, ...props }: ComboboxInputProps): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxContentProps): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxListProps): React.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxItemProps): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxGroupProps): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxLabelProps): React.JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxCollectionProps): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps): React.JSX.Element;
 declare const comboboxChipsVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function ComboboxChips({
-  className,
-  size,
-  ...props
-}: ComboboxChipsProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxChip({
-  className,
-  children,
-  showRemove,
-  ...props
-}: ComboboxChipProps): _$react_jsx_runtime0.JSX.Element;
-declare function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxChipsInputProps): _$react_jsx_runtime0.JSX.Element;
+  size?: "default" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ComboboxChips({ className, size, ...props }: ComboboxChipsProps): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxChipProps): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps): React.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
 //#endregion
 export { Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxList, type ComboboxListProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, ComboboxTrigger, type ComboboxTriggerProps, ComboboxValue, type ComboboxValueProps, comboboxChipsVariants, useComboboxAnchor };

package/dist/combobox.js

@@ -94,7 +94,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-slot": "combobox-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-edge/30 *:data-[slot=input-group]:border-edge/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-shade/30 *:data-[slot=input-group]:border-shade/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
 			...props
 		})
 	}) });
@@ -109,7 +109,7 @@ function ComboboxList({ className, ...props }) {
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
 		"data-slot": "combobox-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-2 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", className),
+		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-2 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", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
 			render: /* @__PURE__ */ jsx("span", {
@@ -150,11 +150,11 @@ function ComboboxEmpty({ className, ...props }) {
 function ComboboxSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
 		"data-slot": "combobox-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }
-const comboboxChipsVariants = cva("bg-edge hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/30 has-aria-invalid:border-destructive flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
+const comboboxChipsVariants = cva("bg-shade hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-danger/30 has-aria-invalid:border-danger flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
 	variants: { size: {
 		xs: "min-h-6 rounded-sm px-2 py-0.5 text-xs",
 		sm: "min-h-8 px-3 py-1 text-sm",

package/dist/context-menu.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 { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
-
 //#region src/context-menu.d.ts
 type ContextMenuProps = React.ComponentProps<typeof ContextMenu$1.Root>;
 type ContextMenuPortalProps = React.ComponentProps<typeof ContextMenu$1.Portal>;
@@ -22,7 +20,8 @@ type ContextMenuLabelProps = React.ComponentProps<typeof ContextMenu$1.GroupLabe
 };
 type ContextMenuItemProps = React.ComponentProps<typeof ContextMenu$1.Item> & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  /** `danger` turns the item's text and leading icon red. */
+  variant?: "default" | "danger";
 };
 type ContextMenuSubProps = React.ComponentProps<typeof ContextMenu$1.SubmenuRoot>;
 type ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenu$1.SubmenuTrigger> & {
@@ -38,70 +37,20 @@ type ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenu$1.Radio
 type ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenu$1.Separator>;
 type ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>;
 type ContextMenuShortcutProps = React.ComponentProps<"span">;
-declare function ContextMenu(props: ContextMenuProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuPortal(props: ContextMenuPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuTrigger({
-  className,
-  ...props
-}: ContextMenuTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuContent({
-  className,
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  restoreFocusOnClose,
-  finalFocus,
-  ...props
-}: ContextMenuContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuGroup(props: ContextMenuGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: ContextMenuLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: ContextMenuItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuSub(props: ContextMenuSubProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ContextMenuSubTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuSubContent({
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  className,
-  ...props
-}: ContextMenuSubContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: ContextMenuCheckboxItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: ContextMenuRadioItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuSeparator({
-  className,
-  ...props
-}: ContextMenuSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function ContextMenuShortcut({
-  className,
-  ...props
-}: ContextMenuShortcutProps): _$react_jsx_runtime0.JSX.Element;
+declare function ContextMenu(props: ContextMenuProps): React.JSX.Element;
+declare function ContextMenuPortal(props: ContextMenuPortalProps): React.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): React.JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, restoreFocusOnClose, finalFocus, ...props }: ContextMenuContentProps): React.JSX.Element;
+declare function ContextMenuGroup(props: ContextMenuGroupProps): React.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): React.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemProps): React.JSX.Element;
+declare function ContextMenuSub(props: ContextMenuSubProps): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): React.JSX.Element;
+declare function ContextMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: ContextMenuSubContentProps): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenuCheckboxItemProps): React.JSX.Element;
+declare function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps): React.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): React.JSX.Element;
 //#endregion
 export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuPortalProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, type RestoreFocusOnClose };

package/dist/context-menu.js

@@ -24,7 +24,7 @@ function ContextMenuTrigger({ className, ...props }) {
 		...props
 	});
 }
-function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "inline-end", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-slot": "context-menu-positioner",
 		className: "isolate z-50 outline-hidden",
@@ -34,7 +34,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated/80 not-supports-backdrop-filter:bg-elevated/90 text-contrast ring-contrast/10 z-50 max-h-(--available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-lg p-1.5 shadow-md ring-1 backdrop-blur-xl backdrop-saturate-150 outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -50,7 +50,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset,
-		className: cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
+		className: cn("text-muted px-3 py-2.5 text-xs font-medium data-inset:ps-9.5", className),
 		...props
 	});
 }
@@ -59,7 +59,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-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 focus:*:[svg]:text-white data-[variant=destructive]:focus:*:[svg]:text-destructive group/context-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/context-menu-item relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -73,15 +73,15 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-primary 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-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto rtl:rotate-180" })]
 	});
 }
-function ContextMenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
+function ContextMenuSubContent({ align = "start", alignOffset = -6, side = "inline-end", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuContent, {
 		"data-slot": "context-menu-sub-content",
-		className: cn("w-auto min-w-24 shadow-md", className),
+		className: cn("w-auto min-w-24", className),
 		align,
 		alignOffset,
 		side,
@@ -93,12 +93,12 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:*:[svg]: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-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-checkbox-item-indicator",
-			className: "absolute right-2 pointer-events-none",
+			className: "absolute end-2 pointer-events-none",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -113,11 +113,11 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:*:[svg]: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-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-radio-item-indicator",
-			className: "absolute right-2 pointer-events-none",
+			className: "absolute end-2 pointer-events-none",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -125,14 +125,14 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1.5 my-1.5 h-px", className),
 		...props
 	});
 }
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "context-menu-shortcut",
-		className: cn("text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted ms-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/count.d.ts

@@ -1,6 +1,4 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactElement } from "react";
-
 //#region src/count.d.ts
 interface CountProps {
   /** Target number or Date to count to */
@@ -67,19 +65,7 @@ declare function easeOut(t: number): number;
  * </Count>
  * ```
  */
-declare function Count({
-  to,
-  from: start,
-  duration,
-  delay,
-  format,
-  prefix,
-  suffix,
-  children,
-  once,
-  easing,
-  onComplete
-}: CountProps): _$react_jsx_runtime0.JSX.Element;
+declare function Count({ to, from: start, duration, delay, format, prefix, suffix, children, once, easing, onComplete }: CountProps): import("react").JSX.Element;
 /** @deprecated Use `Count` instead */
 declare const CountUp: typeof Count;
 //#endregion

package/dist/count.js

@@ -7,6 +7,7 @@ import { useInView, useReducedMotion } from "motion/react";
 function easeOut(t) {
 	return 1 - (1 - t) ** 3;
 }
+const pad = (n) => String(n).padStart(2, "0");
 function formatCountdown(ms) {
 	if (ms <= 0) return "00:00:00";
 	const totalSeconds = Math.floor(ms / 1e3);
@@ -14,7 +15,6 @@ function formatCountdown(ms) {
 	const hours = Math.floor(totalSeconds % 86400 / 3600);
 	const minutes = Math.floor(totalSeconds % 3600 / 60);
 	const seconds = totalSeconds % 60;
-	const pad = (n) => String(n).padStart(2, "0");
 	if (days > 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
 	return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
 }
@@ -114,7 +114,8 @@ function NumberCount({ to, from: start, duration, delay, format, prefix, suffix,
 				if (!startTime) startTime = timestamp;
 				const elapsed = timestamp - startTime;
 				const progress = Math.min(elapsed / duration, 1);
-				setDisplay(start + (to - start) * easingRef.current(progress));
+				const current = start + (to - start) * easingRef.current(progress);
+				setDisplay(current);
 				if (progress < 1) raf = requestAnimationFrame(animate);
 				else onCompleteRef.current?.();
 			};

package/dist/dialog.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-
 //#region src/dialog.d.ts
 type DialogProps = React.ComponentProps<typeof Dialog$1.Root> & {
   /**
@@ -28,44 +26,15 @@ type DialogContentProps = DialogPopupProps & {
 };
 type DialogHeaderProps = React.ComponentProps<"div">;
 type DialogFooterProps = React.ComponentProps<"div">;
-declare function Dialog({
-  disablePointerDismissal,
-  ...props
-}: DialogProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogTrigger({
-  ...props
-}: DialogTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogPortal({
-  ...props
-}: DialogPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogClose({
-  ...props
-}: DialogCloseProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogOverlay({
-  className,
-  ...props
-}: DialogOverlayProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: DialogContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogHeader({
-  className,
-  ...props
-}: DialogHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogFooter({
-  className,
-  ...props
-}: DialogFooterProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogTitle({
-  className,
-  ...props
-}: DialogTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function DialogDescription({
-  className,
-  ...props
-}: DialogDescriptionProps): _$react_jsx_runtime0.JSX.Element;
+declare function Dialog({ disablePointerDismissal, ...props }: DialogProps): React.JSX.Element;
+declare function DialogTrigger({ ...props }: DialogTriggerProps): React.JSX.Element;
+declare function DialogPortal({ ...props }: DialogPortalProps): React.JSX.Element;
+declare function DialogClose({ ...props }: DialogCloseProps): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: DialogOverlayProps): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): React.JSX.Element;
 //#endregion
 export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, type DialogPopupProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.js

@@ -40,13 +40,13 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-hidden sm:max-w-sm", className),
+		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 text-sm ring-1 outline-hidden sm:max-w-sm shadow-lg", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
-				className: "absolute top-2 right-2",
+				className: "absolute top-3 end-3",
 				size: "icon-sm"
 			}),
 			children: [/* @__PURE__ */ jsx(CloseIcon, {}), /* @__PURE__ */ jsx("span", {
@@ -59,21 +59,21 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2", className),
+		className: cn("flex flex-col gap-3", className),
 		...props
 	});
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-footer",
-		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 sm:flex-row sm:justify-end", className),
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-base leading-none font-medium pr-8", className),
+		className: cn("text-lg font-medium leading-none pe-8", className),
 		...props
 	});
 }

package/dist/direction.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
-
 //#region src/direction.d.ts
 type DirectionProviderProps = React.ComponentProps<typeof DirectionProvider>;
 //#endregion

package/dist/drawer.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
-
 //#region src/drawer.d.ts
 type DrawerProps = React.ComponentProps<typeof Drawer$1.Root>;
 type DrawerTriggerProps = React.ComponentProps<typeof Drawer$1.Trigger>;
@@ -17,47 +15,16 @@ type DrawerFooterProps = React.ComponentProps<"div">;
 type DrawerContentProps = DrawerPopupProps & {
   showCloseButton?: boolean;
 };
-declare function Drawer({
-  ...props
-}: DrawerProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerTrigger({
-  ...props
-}: DrawerTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerPortal({
-  ...props
-}: DrawerPortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerClose({
-  ...props
-}: DrawerCloseProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerOverlay({
-  className,
-  ...props
-}: DrawerOverlayProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerViewport({
-  className,
-  ...props
-}: DrawerViewportProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: DrawerContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerHeader({
-  className,
-  ...props
-}: DrawerHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerFooter({
-  className,
-  ...props
-}: DrawerFooterProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerTitle({
-  className,
-  ...props
-}: DrawerTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function DrawerDescription({
-  className,
-  ...props
-}: DrawerDescriptionProps): _$react_jsx_runtime0.JSX.Element;
+declare function Drawer({ ...props }: DrawerProps): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): React.JSX.Element;
+declare function DrawerPortal({ ...props }: DrawerPortalProps): React.JSX.Element;
+declare function DrawerClose({ ...props }: DrawerCloseProps): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): React.JSX.Element;
+declare function DrawerViewport({ className, ...props }: DrawerViewportProps): React.JSX.Element;
+declare function DrawerContent({ className, children, showCloseButton, ...props }: DrawerContentProps): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): React.JSX.Element;
 //#endregion
 export { Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerViewport, type DrawerViewportProps };