@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/alert-dialog.d.ts

@@ -4,33 +4,32 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/ui/alert-dialog.d.ts
-type AlertDialogProps = {
+export type AlertDialogProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type AlertDialogContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type AlertDialogContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
-declare function AlertDialogTrigger({ className, ...props }: ComponentProps<typeof AlertDialog$1.Trigger> & {
+export declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
+export declare function AlertDialogTrigger({ className, ...props }: ComponentProps<typeof AlertDialog$1.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
 type AlertDialogCloseProps = Omit<ComponentProps<typeof AlertDialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
-declare function AlertDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: AlertDialogCloseProps): import("react").JSX.Element;
-declare function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps): import("react").JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function AlertDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: AlertDialogCloseProps): import("react").JSX.Element;
+export declare function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+export declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & {
+export declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: ComponentProps<"h2"> & {
+export declare function AlertDialogTitle({ className, ...props }: ComponentProps<"h2"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: ComponentProps<"p"> & {
+export declare function AlertDialogDescription({ className, ...props }: ComponentProps<"p"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger };
+//#endregion

package/dist/ui/alert-dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -33,25 +34,26 @@ function AlertDialogClose({ className, children, variant = "surface", size = "sm
 	});
 }
 function AlertDialogContent({ className, children, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		"data-control-ui": "alert-dialog",
 		"data-popup-kind": "alert-dialog",
 		"data-slot": "backdrop",
 		"data-control-family": "popup",
 		"data-popup-part": "backdrop",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "fixed inset-0 z-[70]"
 	}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		"data-control-ui": "alert-dialog",
 		"data-popup-kind": "alert-dialog",
 		"data-slot": "content",
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 p-0", className),
+		className: cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2", className),
 		...props,
 		children
 	})] });

package/dist/ui/alert.d.ts

@@ -1,21 +1,20 @@
 import { AlertKnobStyle } from "../knob-contracts/alert-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/alert.d.ts
-declare const alertVariants: readonly ["default", "destructive"];
-type AlertVariant = (typeof alertVariants)[number];
-type AlertProps = Omit<ComponentProps<"div">, "style"> & {
+export declare const alertVariants: readonly ["default", "destructive"];
+export type AlertVariant = (typeof alertVariants)[number];
+export type AlertProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 } & {
   variant?: AlertVariant;
 };
-type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 };
-type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+export type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 };
-declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
-declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
-declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
-//#endregion
-export { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle, AlertTitleProps, AlertVariant, alertVariants };
+export declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
+export declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
+export declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/alert.js

@@ -10,7 +10,7 @@ function Alert({ variant = "default", className, ...props }) {
 		"data-slot": "root",
 		"data-surface": "panel",
 		"data-variant": variant,
-		className: cn("relative grid w-full grid-cols-[0_1fr] items-start has-[>svg]:grid-cols-[1rem_1fr] [&>svg]:size-4", className),
+		className: cn("relative grid w-full items-start", className),
 		...props
 	});
 }
@@ -19,7 +19,7 @@ function AlertTitle({ className, ...props }) {
 		"data-control-ui": "alert",
 		"data-control-family": "alert",
 		"data-slot": "title",
-		className: cn("col-start-2 line-clamp-1", className),
+		className: cn("col-start-2 min-w-0", className),
 		...props
 	});
 }
@@ -28,7 +28,7 @@ function AlertDescription({ className, ...props }) {
 		"data-control-ui": "alert",
 		"data-control-family": "alert",
 		"data-slot": "description",
-		className: cn("col-start-2 grid justify-items-start", className),
+		className: cn("col-start-2 grid min-w-0 justify-items-start", className),
 		...props
 	});
 }

package/dist/ui/aspect-ratio.d.ts

@@ -1,8 +1,7 @@
 import { ComponentProps } from "react";
 //#region src/ui/aspect-ratio.d.ts
-type AspectRatioProps = ComponentProps<"div"> & {
+export type AspectRatioProps = ComponentProps<"div"> & {
   ratio?: number;
 };
-declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
-//#endregion
-export { AspectRatio, AspectRatioProps };
+export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/autocomplete.d.ts

@@ -4,7 +4,7 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/autocomplete.d.ts
-type AutocompleteProps<Value = string> = {
+export type AutocompleteProps<Value = string> = {
   children?: ReactNode;
   items?: readonly Value[];
   value?: string;
@@ -24,47 +24,46 @@ type AutocompleteProps<Value = string> = {
   filter?: ((itemValue: Value, query: string, itemToString?: (itemValue: Value) => string) => boolean) | null;
   itemToStringValue?: (itemValue: Value) => string;
 };
-type AutocompleteInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+export type AutocompleteInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 } & {
   size?: ControlSize;
 };
-type AutocompleteClearProps = ComponentProps<"button"> & {
+export type AutocompleteClearProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type AutocompleteContentProps = Omit<ComponentProps<"div"> & {
+export type AutocompleteContentProps = Omit<ComponentProps<"div"> & {
   sideOffset?: number;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type AutocompleteListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
+export type AutocompleteListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
   children?: ReactNode | ((item: Value, index: number) => ReactNode);
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type AutocompleteItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
+export type AutocompleteItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
   value?: Value;
   disabled?: boolean;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type AutocompleteEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+export type AutocompleteEmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type AutocompleteGroupProps = ComponentProps<"div"> & {
+export type AutocompleteGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type AutocompleteGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type AutocompleteGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Autocomplete<Value = string>({ children, autoHighlight, ...props }: AutocompleteProps<Value>): import("react").JSX.Element;
-declare function AutocompleteClear({ className, children, ...props }: AutocompleteClearProps): import("react").JSX.Element;
-declare function AutocompleteInput({ size, className, ...props }: AutocompleteInputProps): import("react").JSX.Element;
-declare function AutocompleteContent({ className, children, sideOffset, ...props }: AutocompleteContentProps): import("react").JSX.Element;
-declare function AutocompleteList<Value = unknown>({ className, children, ...props }: AutocompleteListProps<Value>): import("react").JSX.Element;
-declare function AutocompleteEmpty({ className, children, ...props }: AutocompleteEmptyProps): import("react").JSX.Element;
-declare function AutocompleteItem<Value = unknown>({ className, children, disabled, ...props }: AutocompleteItemProps<Value>): import("react").JSX.Element;
-declare function AutocompleteGroup({ className, children, ...props }: AutocompleteGroupProps): import("react").JSX.Element;
-declare function AutocompleteGroupLabel({ className, children, ...props }: AutocompleteGroupLabelProps): import("react").JSX.Element;
-//#endregion
-export { Autocomplete, AutocompleteClear, AutocompleteClearProps, AutocompleteContent, AutocompleteContentProps, AutocompleteEmpty, AutocompleteEmptyProps, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteInput, AutocompleteInputProps, AutocompleteItem, AutocompleteItemProps, AutocompleteList, AutocompleteListProps, AutocompleteProps };
+export declare function Autocomplete<Value = string>({ children, autoHighlight, ...props }: AutocompleteProps<Value>): import("react").JSX.Element;
+export declare function AutocompleteClear({ className, children, ...props }: AutocompleteClearProps): import("react").JSX.Element;
+export declare function AutocompleteInput({ size, className, ...props }: AutocompleteInputProps): import("react").JSX.Element;
+export declare function AutocompleteContent({ className, children, sideOffset, ...props }: AutocompleteContentProps): import("react").JSX.Element;
+export declare function AutocompleteList<Value = unknown>({ className, children, ...props }: AutocompleteListProps<Value>): import("react").JSX.Element;
+export declare function AutocompleteEmpty({ className, children, ...props }: AutocompleteEmptyProps): import("react").JSX.Element;
+export declare function AutocompleteItem<Value = unknown>({ className, children, disabled, ...props }: AutocompleteItemProps<Value>): import("react").JSX.Element;
+export declare function AutocompleteGroup({ className, children, ...props }: AutocompleteGroupProps): import("react").JSX.Element;
+export declare function AutocompleteGroupLabel({ className, children, ...props }: AutocompleteGroupLabelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/autocomplete.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -56,13 +57,14 @@ function AutocompleteInput({ size = "md", className, ...props }) {
 	});
 }
 function AutocompleteContent({ className, children, sideOffset = 6, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 		"data-control-ui": "autocomplete",
 		"data-popup-kind": "autocomplete",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side: "bottom",
 		align: "start",
 		sideOffset,

package/dist/ui/avatar.d.ts

@@ -1,24 +1,23 @@
 import { AvatarKnobStyle } from "../knob-contracts/avatar-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/avatar.d.ts
-type AvatarProps = Omit<ComponentProps<"span">, "style"> & {
+export type AvatarProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & AvatarKnobStyle;
 };
-type AvatarGroupProps = Omit<ComponentProps<"div">, "style"> & {
+export type AvatarGroupProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AvatarKnobStyle;
 };
-type AvatarImageProps = ComponentProps<"img"> & {
+export type AvatarImageProps = ComponentProps<"img"> & {
   onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
 } & {
   style?: CSSProperties & AvatarKnobStyle;
 };
-type AvatarFallbackProps = Omit<ComponentProps<"span">, "style"> & {
+export type AvatarFallbackProps = Omit<ComponentProps<"span">, "style"> & {
   delay?: number;
   style?: CSSProperties & AvatarKnobStyle;
 };
-declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
-declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
-declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
-//#endregion
-export { Avatar, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps };
+export declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
+export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
+export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/badge.d.ts

@@ -2,19 +2,18 @@ import { RenderProp } from "../control-props.js";
 import { BadgeKnobStyle } from "../knob-contracts/badge-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/badge.d.ts
-declare const badgeVariants: readonly ["default", "outline"];
-type BadgeVariant = (typeof badgeVariants)[number];
-declare const badgeSizes: readonly ["sm", "md"];
-type BadgeSize = (typeof badgeSizes)[number];
-declare const BADGE_COLORS: readonly ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"];
-type BadgeColor = (typeof BADGE_COLORS)[number];
-type BadgeProps = Omit<ComponentProps<"span">, "style"> & {
+export declare const badgeVariants: readonly ["default", "outline"];
+export type BadgeVariant = (typeof badgeVariants)[number];
+export declare const badgeSizes: readonly ["sm", "md"];
+export type BadgeSize = (typeof badgeSizes)[number];
+export declare const BADGE_COLORS: readonly ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"];
+export type BadgeColor = (typeof BADGE_COLORS)[number];
+export type BadgeProps = Omit<ComponentProps<"span">, "style"> & {
   variant?: BadgeVariant;
   size?: BadgeSize;
   color?: BadgeColor;
   render?: RenderProp<ComponentProps<"span">>;
   style?: CSSProperties & BadgeKnobStyle;
 };
-declare function Badge({ variant, size, color, render, className, children, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
-export { BADGE_COLORS, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, badgeSizes, badgeVariants };
+export declare function Badge({ variant, size, color, render, className, children, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/ui/button-group.d.ts

@@ -3,24 +3,23 @@ import { ControlSize } from "../control-variants.js";
 import { ButtonGroupKnobStyle } from "../knob-contracts/button-group-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/button-group.d.ts
-type ButtonGroupTextProps = Omit<ComponentProps<"div"> & {
+export type ButtonGroupTextProps = Omit<ComponentProps<"div"> & {
   size?: ControlSize;
 }, "style"> & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
-type ButtonGroupProps = ComponentProps<"div"> & {
+export type ButtonGroupProps = ComponentProps<"div"> & {
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 } & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
-type ButtonGroupSeparatorProps = Omit<ComponentProps<"div"> & {
+export type ButtonGroupSeparatorProps = Omit<ComponentProps<"div"> & {
   orientation?: "horizontal" | "vertical";
 }, "style"> & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
-declare function ButtonGroup({ orientation, indicator, className, children, ...props }: ButtonGroupProps): import("react").JSX.Element;
-declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
-declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
-//#endregion
-export { ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps, ButtonGroupText, ButtonGroupTextProps };
+export declare function ButtonGroup({ orientation, indicator, className, children, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
+export declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/button-group.js

@@ -1,12 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { ButtonTrackContext, buttonTrackStructureClasses } from "./button.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button-group.tsx
 function ButtonGroup({ orientation = "horizontal", indicator, className, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("button-group") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.["button-group"] ?? "none";
 	const tracksHover = resolvedIndicator === "hover";
 	return /* @__PURE__ */ jsx(ButtonTrackContext, {
 		value: tracksHover,

package/dist/ui/button.d.ts

@@ -3,13 +3,13 @@ import { ControlSize, ControlTone, ControlVariant } from "../control-variants.js
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/button.d.ts
-type ButtonVariant = ControlVariant;
-type ButtonSize = ControlSize;
-type ButtonTone = ControlTone;
-declare const ButtonTrackContext: import("react").Context<boolean>;
-declare const buttonShapes: readonly ["default", "circle"];
-type ButtonShape = (typeof buttonShapes)[number];
-type ButtonAppearanceProps = {
+export type ButtonVariant = ControlVariant;
+export type ButtonSize = ControlSize;
+export type ButtonTone = ControlTone;
+export declare const ButtonTrackContext: import("react").Context<boolean>;
+export declare const buttonShapes: readonly ["default", "circle"];
+export type ButtonShape = (typeof buttonShapes)[number];
+export type ButtonAppearanceProps = {
   variant?: ButtonVariant;
   size?: ButtonSize;
   tone?: ButtonTone;
@@ -18,21 +18,20 @@ type ButtonAppearanceProps = {
   shape?: ButtonShape;
   style?: CSSProperties & ButtonKnobStyle;
 };
-type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
+export type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
   render?: RenderProp<ComponentProps<"button">, {
     disabled: boolean;
   }>;
   nativeButton?: boolean;
 };
-type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
+export type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
   render?: RenderProp<ComponentProps<"a">>;
 };
-type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
-declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
-declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
-declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
-declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
-declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
-//#endregion
-export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonTrackContext, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };
+export type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
+export declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+export declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
+export declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
+export declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/button.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { skinAdornment } from "../skin.js";
-import { createContext, useContext } from "react";
+import { useSkin } from "../skin-provider.js";
+import { Children, Fragment, createContext, isValidElement, useContext } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -11,6 +12,16 @@ const buttonShapes = ["default", "circle"];
 const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
+function wrapButtonText(children) {
+	return Children.map(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx("span", {
+			className: "contents",
+			children: child
+		});
+		if (isValidElement(child) && child.type === Fragment) return /* @__PURE__ */ jsx(Fragment, { children: wrapButtonText(child.props.children) });
+		return child;
+	});
+}
 function ButtonContent({ children }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "button",
@@ -22,10 +33,12 @@ function ButtonContent({ children }) {
 }
 function ButtonBody({ layer, wrap = true, children }) {
 	const wrapsContent = useContext(ButtonTrackContext) || wrap && Boolean(layer);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
+	const content = wrapButtonText(children);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children: content }) : content] });
 }
 function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
-	const layer = skinAdornment("button", "layer", {
+	const skin = useSkin();
+	const layer = skinAdornment(skin, "button", "layer", {
 		variant,
 		tone
 	});
@@ -56,6 +69,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 	});
 }
 function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return useRender({
 		defaultTagName: "a",
@@ -75,7 +89,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 			"data-size": size,
 			className: cn(buttonStructureClasses, className),
 			children: /* @__PURE__ */ jsx(ButtonBody, {
-				layer: skinAdornment("button", "layer", {
+				layer: skinAdornment(skin, "button", "layer", {
 					variant,
 					tone
 				}),
@@ -85,6 +99,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 	});
 }
 function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx("label", {
 		"data-track-item": tracksHover ? "" : void 0,
@@ -101,7 +116,7 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 		"data-size": size,
 		className: cn(buttonStructureClasses, className),
 		children: /* @__PURE__ */ jsx(ButtonBody, {
-			layer: skinAdornment("button", "layer", {
+			layer: skinAdornment(skin, "button", "layer", {
 				variant,
 				tone
 			}),

package/dist/ui/calendar.d.ts

@@ -5,7 +5,6 @@ import { DayPicker } from "react-day-picker";
 type CalendarPropsWithStyle<Props> = Props extends unknown ? Omit<Props, "style"> & {
   style?: CSSProperties & CalendarKnobStyle;
 } : never;
-type CalendarProps = CalendarPropsWithStyle<ComponentProps<typeof DayPicker>>;
-declare function Calendar({ className, showOutsideDays, style, ...props }: CalendarProps): import("react").JSX.Element;
-//#endregion
-export { Calendar, CalendarProps };
+export type CalendarProps = CalendarPropsWithStyle<ComponentProps<typeof DayPicker>>;
+export declare function Calendar({ className, showOutsideDays, style, ...props }: CalendarProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/card.d.ts

@@ -1,36 +1,35 @@
 import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
-type CardVariant = "default" | "sectioned";
-type CardProps = Omit<ComponentProps<"div">, "style"> & {
+export type CardVariant = "default" | "sectioned";
+export type CardProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & CardKnobStyle;
 } & {
   variant?: CardVariant;
 };
-type CardHeaderProps = ComponentProps<"div"> & {
+export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-type CardTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type CardTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-type CardDescriptionProps = ComponentProps<"div"> & {
+export type CardDescriptionProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-type CardActionProps = ComponentProps<"div"> & {
+export type CardActionProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-type CardContentProps = ComponentProps<"div"> & {
+export type CardContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-type CardFooterProps = ComponentProps<"div"> & {
+export type CardFooterProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
-declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
-declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
-declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
-declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
-declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
-declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
-//#endregion
-export { Card, CardAction, CardActionProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, CardVariant };
+export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+export declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/checkbox-group.d.ts

@@ -1,13 +1,12 @@
 import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ComponentProps } from "react";
 //#region src/ui/checkbox-group.d.ts
-type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
+export type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
   allValues?: string[];
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
-declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
-//#endregion
-export { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps };
+export declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+export declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
+//#endregion

package/dist/ui/checkbox-group.js

@@ -1,12 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
 //#region src/ui/checkbox-group.tsx
 function CheckboxGroup({ className, orientation = "vertical", indicator, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("checkbox-group") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.["checkbox-group"] ?? "none";
 	return /* @__PURE__ */ jsxs(CheckboxGroup$1, {
 		"data-control-ui": "checkbox-group",
 		"data-control-family": "checkbox-group",