@waveso/ui 0.15.0 → 0.16.0

package/dist/autocomplete.d.ts

@@ -1,9 +1,7 @@
 import { inputVariants } from "./input.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
-
 //#region src/autocomplete.d.ts
 type AutocompleteProps = React.ComponentProps<typeof Autocomplete$1.Root>;
 type AutocompleteInputProps = Omit<React.ComponentProps<typeof Autocomplete$1.Input>, "size"> & VariantProps<typeof inputVariants>;
@@ -26,91 +24,26 @@ type AutocompleteGroupProps = React.ComponentProps<typeof Autocomplete$1.Group>;
 type AutocompleteGroupLabelProps = React.ComponentProps<typeof Autocomplete$1.GroupLabel>;
 type AutocompleteCollectionProps = React.ComponentProps<typeof Autocomplete$1.Collection>;
 type AutocompleteContentProps = AutocompletePopupProps & Pick<AutocompletePositionerProps, "align" | "alignOffset" | "side" | "sideOffset">;
-declare function Autocomplete({
-  ...props
-}: AutocompleteProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteInput({
-  className,
-  size,
-  ...props
-}: AutocompleteInputProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteTrigger({
-  className,
-  ...props
-}: AutocompleteTriggerProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteIcon({
-  className,
-  ...props
-}: AutocompleteIconProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteClear({
-  className,
-  ...props
-}: AutocompleteClearProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteValue({
-  ...props
-}: AutocompleteValueProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompletePortal({
-  className,
-  ...props
-}: AutocompletePortalProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteBackdrop({
-  className,
-  ...props
-}: AutocompleteBackdropProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompletePositioner({
-  className,
-  ...props
-}: AutocompletePositionerProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompletePopup({
-  className,
-  ...props
-}: AutocompletePopupProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteArrow({
-  className,
-  ...props
-}: AutocompleteArrowProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteStatus({
-  className,
-  ...props
-}: AutocompleteStatusProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteEmpty({
-  className,
-  ...props
-}: AutocompleteEmptyProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteList({
-  className,
-  ...props
-}: AutocompleteListProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteRow({
-  className,
-  ...props
-}: AutocompleteRowProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteItem({
-  className,
-  ...props
-}: AutocompleteItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteSeparator({
-  className,
-  ...props
-}: AutocompleteSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteGroup({
-  className,
-  ...props
-}: AutocompleteGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteGroupLabel({
-  className,
-  ...props
-}: AutocompleteGroupLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteCollection({
-  ...props
-}: AutocompleteCollectionProps): _$react_jsx_runtime0.JSX.Element;
-declare function AutocompleteContent({
-  className,
-  align,
-  alignOffset,
-  side,
-  sideOffset,
-  ...props
-}: AutocompleteContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function Autocomplete({ ...props }: AutocompleteProps): React.JSX.Element;
+declare function AutocompleteInput({ className, size, ...props }: AutocompleteInputProps): React.JSX.Element;
+declare function AutocompleteTrigger({ className, ...props }: AutocompleteTriggerProps): React.JSX.Element;
+declare function AutocompleteIcon({ className, ...props }: AutocompleteIconProps): React.JSX.Element;
+declare function AutocompleteClear({ className, ...props }: AutocompleteClearProps): React.JSX.Element;
+declare function AutocompleteValue({ ...props }: AutocompleteValueProps): React.JSX.Element;
+declare function AutocompletePortal({ className, ...props }: AutocompletePortalProps): React.JSX.Element;
+declare function AutocompleteBackdrop({ className, ...props }: AutocompleteBackdropProps): React.JSX.Element;
+declare function AutocompletePositioner({ className, ...props }: AutocompletePositionerProps): React.JSX.Element;
+declare function AutocompletePopup({ className, ...props }: AutocompletePopupProps): React.JSX.Element;
+declare function AutocompleteArrow({ className, ...props }: AutocompleteArrowProps): React.JSX.Element;
+declare function AutocompleteStatus({ className, ...props }: AutocompleteStatusProps): React.JSX.Element;
+declare function AutocompleteEmpty({ className, ...props }: AutocompleteEmptyProps): React.JSX.Element;
+declare function AutocompleteList({ className, ...props }: AutocompleteListProps): React.JSX.Element;
+declare function AutocompleteRow({ className, ...props }: AutocompleteRowProps): React.JSX.Element;
+declare function AutocompleteItem({ className, ...props }: AutocompleteItemProps): React.JSX.Element;
+declare function AutocompleteSeparator({ className, ...props }: AutocompleteSeparatorProps): React.JSX.Element;
+declare function AutocompleteGroup({ className, ...props }: AutocompleteGroupProps): React.JSX.Element;
+declare function AutocompleteGroupLabel({ className, ...props }: AutocompleteGroupLabelProps): React.JSX.Element;
+declare function AutocompleteCollection({ ...props }: AutocompleteCollectionProps): React.JSX.Element;
+declare function AutocompleteContent({ className, align, alignOffset, side, sideOffset, ...props }: AutocompleteContentProps): React.JSX.Element;
 //#endregion
 export { Autocomplete, AutocompleteArrow, type AutocompleteArrowProps, AutocompleteBackdrop, type AutocompleteBackdropProps, AutocompleteClear, type AutocompleteClearProps, AutocompleteCollection, type AutocompleteCollectionProps, AutocompleteContent, type AutocompleteContentProps, AutocompleteEmpty, type AutocompleteEmptyProps, AutocompleteGroup, AutocompleteGroupLabel, type AutocompleteGroupLabelProps, type AutocompleteGroupProps, AutocompleteIcon, type AutocompleteIconProps, AutocompleteInput, type AutocompleteInputProps, AutocompleteItem, type AutocompleteItemProps, AutocompleteList, type AutocompleteListProps, AutocompletePopup, type AutocompletePopupProps, AutocompletePortal, type AutocompletePortalProps, AutocompletePositioner, type AutocompletePositionerProps, type AutocompleteProps, AutocompleteRow, type AutocompleteRowProps, AutocompleteSeparator, type AutocompleteSeparatorProps, AutocompleteStatus, type AutocompleteStatusProps, AutocompleteTrigger, type AutocompleteTriggerProps, AutocompleteValue, type AutocompleteValueProps };

package/dist/autocomplete.js

@@ -69,7 +69,7 @@ function AutocompletePositioner({ className, ...props }) {
 function AutocompletePopup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 		"data-slot": "autocomplete-popup",
-		className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 group/autocomplete-content relative 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 group/autocomplete-content relative 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
 	});
 }
@@ -111,14 +111,14 @@ function AutocompleteRow({ className, ...props }) {
 function AutocompleteItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
 		"data-slot": "autocomplete-item",
-		className: cn("data-highlighted:bg-primary data-highlighted:text-white relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pl-1.5 pr-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 pl-1.5 pr-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
 	});
 }
 function AutocompleteSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Separator, {
 		"data-slot": "autocomplete-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/avatar.d.ts

@@ -1,40 +1,19 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-
 //#region src/avatar.d.ts
 type AvatarProps = Avatar$1.Root.Props & {
-  size?: "default" | "sm" | "lg";
+  size?: "xs" | "sm" | "default" | "lg";
 };
 type AvatarImageProps = Avatar$1.Image.Props;
 type AvatarFallbackProps = Avatar$1.Fallback.Props;
 type AvatarBadgeProps = React.ComponentProps<"span">;
 type AvatarGroupProps = React.ComponentProps<"div">;
 type AvatarGroupCountProps = React.ComponentProps<"div">;
-declare function Avatar({
-  className,
-  size,
-  ...props
-}: AvatarProps): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarImage({
-  className,
-  ...props
-}: AvatarImageProps): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarFallback({
-  className,
-  ...props
-}: AvatarFallbackProps): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarBadge({
-  className,
-  ...props
-}: AvatarBadgeProps): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarGroup({
-  className,
-  ...props
-}: AvatarGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function AvatarGroupCount({
-  className,
-  ...props
-}: AvatarGroupCountProps): _$react_jsx_runtime0.JSX.Element;
+declare function Avatar({ className, size, ...props }: AvatarProps): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: AvatarBadgeProps): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: AvatarGroupProps): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): React.JSX.Element;
 //#endregion
 export { Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/avatar.js

@@ -7,7 +7,7 @@ function Avatar({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-slot": "avatar",
 		"data-size": size,
-		className: cn("after:border-line group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		className: cn("after:border-contour group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border data-[size=lg]:size-10 data-[size=sm]:size-6 data-[size=xs]:size-5", className),
 		...props
 	});
 }
@@ -21,14 +21,14 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("bg-secondary text-muted flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", className),
+		className: cn("bg-secondary text-contrast flex size-full items-center justify-center rounded-full text-sm group-data-[size=xs]/avatar:text-[10px] group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base", className),
 		...props
 	});
 }
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
-		className: cn("bg-primary text-white ring-foundation absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		className: cn("bg-primary text-white ring-foundation absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
 		...props
 	});
 }
@@ -42,7 +42,7 @@ function AvatarGroup({ className, ...props }) {
 function AvatarGroupCount({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group-count",
-		className: cn("bg-secondary text-muted ring-foundation relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		className: cn("bg-secondary text-contrast ring-foundation relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=xs]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
 		...props
 	});
 }

package/dist/badge.d.ts

@@ -1,18 +1,10 @@
-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/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "success" | "warning" | "destructive" | "secondary" | "ghost" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  variant?: "danger" | "default" | "ghost" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
-declare function Badge({
-  className,
-  variant,
-  render,
-  ...props
-}: BadgeProps): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+declare function Badge({ className, variant, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.js

@@ -4,15 +4,15 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/badge.tsx
-const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/30 aria-invalid:border-destructive overflow-hidden group/badge", {
+const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-danger/30 aria-invalid:border-danger overflow-hidden group/badge", {
 	variants: { variant: {
 		default: "bg-primary text-white [a]:hover:bg-primary/80",
-		success: "bg-success text-contrast dark:text-foundation [a]:hover:bg-success/80",
-		destructive: "bg-destructive text-white [a]:hover:bg-destructive/80 [a]:focus-visible:ring-destructive/50",
-		warning: "bg-warning text-contrast dark:text-foundation [a]:hover:bg-warning/80",
+		success: "bg-success text-white [a]:hover:bg-success/80",
+		danger: "bg-danger text-white [a]:hover:bg-danger/80 [a]:focus-visible:ring-danger/50",
+		warning: "bg-warning text-white [a]:hover:bg-warning/80",
 		secondary: "bg-secondary text-contrast [a]:hover:bg-secondary/80",
-		outline: "border-edge bg-foundation [a]:hover:bg-secondary/80 [a]:hover:text-contrast dark:bg-edge/30",
-		ghost: "text-muted [a]:hover:bg-secondary/80",
+		outline: "border-shade bg-foundation [a]:hover:bg-highlight [a]:hover:text-contrast",
+		ghost: "text-muted [a]:hover:bg-highlight",
 		link: "text-primary [a]:underline-offset-4 [a]:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }

package/dist/breadcrumb.d.ts

@@ -1,7 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/breadcrumb.d.ts
 type BreadcrumbProps = React.ComponentProps<"nav">;
 type BreadcrumbListProps = React.ComponentProps<"ol">;
@@ -10,34 +8,12 @@ type BreadcrumbLinkProps = useRender.ComponentProps<"a">;
 type BreadcrumbPageProps = React.ComponentProps<"span">;
 type BreadcrumbSeparatorProps = React.ComponentProps<"li">;
 type BreadcrumbEllipsisProps = React.ComponentProps<"span">;
-declare function Breadcrumb({
-  ...props
-}: BreadcrumbProps): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbList({
-  className,
-  ...props
-}: BreadcrumbListProps): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbItem({
-  className,
-  ...props
-}: BreadcrumbItemProps): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}: BreadcrumbLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function BreadcrumbPage({
-  className,
-  ...props
-}: BreadcrumbPageProps): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: BreadcrumbSeparatorProps): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbEllipsis({
-  className,
-  ...props
-}: BreadcrumbEllipsisProps): _$react_jsx_runtime0.JSX.Element;
+declare function Breadcrumb({ ...props }: BreadcrumbProps): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: BreadcrumbListProps): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element;
 //#endregion
 export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };

package/dist/button-group.d.ts

@@ -1,31 +1,18 @@
 import { Separator } from "./separator.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/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
   orientation?: "horizontal" | "vertical" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-type ButtonGroupProps = React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonGroupProps = React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
+  size?: "xs" | "sm" | "default" | "lg";
+};
 type ButtonGroupTextProps = useRender.ComponentProps<"div">;
 type ButtonGroupSeparatorProps = React.ComponentProps<typeof Separator>;
-declare function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: ButtonGroupProps): _$react_jsx_runtime0.JSX.Element;
-declare function ButtonGroupText({
-  className,
-  render,
-  ...props
-}: ButtonGroupTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({
-  className,
-  orientation,
-  ...props
-}: ButtonGroupSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare function ButtonGroup({ className, orientation, size, ...props }: ButtonGroupProps): React.JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: ButtonGroupTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): React.JSX.Element;
 //#endregion
 export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };

package/dist/button-group.js

@@ -6,18 +6,19 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/button-group.tsx
-const buttonGroupVariants = cva("has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+const buttonGroupVariants = cva("group/button-group has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-shade has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-shade has-[>[data-variant=outline]]:[&>input]:border-shade has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-focus has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-focus has-[>[data-variant=outline]]:[&>input:focus-visible]:border-focus [&>[data-variant=default]]:border-primary [&>[data-variant=secondary]]:border-secondary [&>[data-variant=danger]]:border-danger", {
 	variants: { orientation: {
 		horizontal: "[&>[data-slot]:has(~[data-slot])]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
 		vertical: "flex-col [&>[data-slot]:has(~[data-slot])]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
 	} },
 	defaultVariants: { orientation: "horizontal" }
 });
-function ButtonGroup({ className, orientation, ...props }) {
+function ButtonGroup({ className, orientation, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"data-slot": "button-group",
 		"data-orientation": orientation,
+		"data-size": size,
 		className: cn(buttonGroupVariants({ orientation }), className),
 		...props
 	});
@@ -25,7 +26,7 @@ function ButtonGroup({ className, orientation, ...props }) {
 function ButtonGroupText({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("bg-secondary gap-2 rounded-md border border-edge px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className) }, props),
+		props: mergeProps({ className: cn("bg-secondary gap-2 rounded-md border border-shade px-3 text-base font-medium group-data-[size=xs]/button-group:px-2 group-data-[size=xs]/button-group:text-xs group-data-[size=sm]/button-group:text-sm group-data-[size=lg]/button-group:px-4 group-data-[size=lg]/button-group:text-lg [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className) }, props),
 		render,
 		state: { slot: "button-group-text" }
 	});
@@ -34,7 +35,7 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "button-group-separator",
 		orientation,
-		className: cn("bg-edge relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
+		className: cn("bg-contour relative self-stretch data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto", className),
 		...props
 	});
 }

package/dist/button.d.ts

@@ -1,20 +1,12 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { VariantProps } from "class-variance-authority";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+  variant?: "danger" | "default" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
-declare function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: ButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare function Button({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
 //#endregion
 export { Button, type ButtonProps, buttonVariants };

package/dist/button.js

@@ -4,14 +4,14 @@ import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 //#region src/button.tsx
-const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
+const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
 	variants: {
 		variant: {
-			default: "bg-primary text-white hover:bg-primary/80",
-			outline: "border-edge bg-foundation hover:bg-secondary/80 hover:text-contrast dark:bg-edge/30 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			secondary: "bg-secondary text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			ghost: "text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			destructive: "bg-destructive text-white hover:bg-destructive/80 focus-visible:ring-destructive/50",
+			default: "bg-primary text-white hover:bg-primary/80 not-supports-backdrop-filter:hover:bg-primary/90 hover:backdrop-blur-xl hover:backdrop-saturate-150",
+			outline: "border-shade bg-foundation hover:bg-highlight hover:text-contrast aria-expanded:bg-highlight aria-expanded:text-contrast",
+			secondary: "bg-secondary text-contrast hover:bg-secondary/80 not-supports-backdrop-filter:hover:bg-secondary/90 hover:backdrop-blur-xl hover:backdrop-saturate-150 aria-expanded:bg-secondary aria-expanded:text-contrast",
+			ghost: "text-contrast hover:bg-highlight aria-expanded:bg-highlight aria-expanded:text-contrast",
+			danger: "bg-danger text-white hover:bg-danger/80 not-supports-backdrop-filter:hover:bg-danger/90 hover:backdrop-blur-xl hover:backdrop-saturate-150 focus-visible:ring-danger/50",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {

package/dist/card.d.ts

@@ -1,44 +1,27 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
-
+import { useRender } from "@base-ui/react/use-render";
 //#region src/card.d.ts
-type CardProps = React.ComponentProps<"div"> & {
+type CardProps = useRender.ComponentProps<"div"> & {
   size?: "default" | "sm";
 };
 type CardHeaderProps = React.ComponentProps<"div">;
-type CardTitleProps = React.ComponentProps<"div">;
+type CardTitleProps = useRender.ComponentProps<"div">;
 type CardDescriptionProps = React.ComponentProps<"div">;
 type CardActionProps = React.ComponentProps<"div">;
 type CardContentProps = React.ComponentProps<"div">;
 type CardFooterProps = React.ComponentProps<"div">;
-declare function Card({
-  className,
-  size,
-  ...props
-}: CardProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardHeader({
-  className,
-  ...props
-}: CardHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardTitle({
-  className,
-  ...props
-}: CardTitleProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardDescription({
-  className,
-  ...props
-}: CardDescriptionProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardAction({
-  className,
-  ...props
-}: CardActionProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardContent({
-  className,
-  ...props
-}: CardContentProps): _$react_jsx_runtime0.JSX.Element;
-declare function CardFooter({
-  className,
-  ...props
-}: CardFooterProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * A surface that groups related content. `render` changes the element: an
+ * `article` or `section` for semantics, or a link or button to make the whole
+ * card interactive, which adds a hover, a clickable cursor and a focus ring.
+ */
+declare function Card({ className, size, render, ...props }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CardHeader({ className, ...props }: CardHeaderProps): React.JSX.Element;
+/** `render={<h3 />}` makes the title a real heading for screen readers. */
+declare function CardTitle({ className, render, ...props }: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): React.JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): React.JSX.Element;
+declare function CardContent({ className, ...props }: CardContentProps): React.JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): React.JSX.Element;
 //#endregion
 export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/card.js

@@ -1,26 +1,39 @@
+"use client";
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/card.tsx
-function Card({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card",
-		"data-size": size,
-		className: cn("ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", className),
-		...props
+/**
+* A surface that groups related content. `render` changes the element: an
+* `article` or `section` for semantics, or a link or button to make the whole
+* card interactive, which adds a hover, a clickable cursor and a focus ring.
+*/
+function Card({ className, size = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-6 overflow-hidden rounded-lg py-6 text-sm ring-1 has-[>img:first-child]:pt-0 has-[>img:last-child]:pb-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", "[a,button]:cursor-clickable [a,button]:hover:bg-elevated [button]:text-start motion-color outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", className) }, props),
+		render,
+		state: {
+			slot: "card",
+			size
+		}
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4", className),
 		...props
 	});
 }
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-title",
-		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
-		...props
+/** `render={<h3 />}` makes the title a real heading for screen readers. */
+function CardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className) }, props),
+		render,
+		state: { slot: "card-title" }
 	});
 }
 function CardDescription({ className, ...props }) {
@@ -40,14 +53,14 @@ function CardAction({ className, ...props }) {
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+		className: cn("px-6 group-data-[size=sm]/card:px-4", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3", className),
+		className: cn("flex items-center px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4", className),
 		...props
 	});
 }

package/dist/checkbox.d.ts

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