@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/gradient-editor.d.ts

@@ -2,13 +2,13 @@ import { ControlSize } from "../control-variants.js";
 import { GradientEditorKnobStyle } from "../knob-contracts/gradient-editor-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/gradient-editor.d.ts
-type GradientType = "linear" | "radial" | "conic";
-type GradientStop = {
+export type GradientType = "linear" | "radial" | "conic";
+export type GradientStop = {
   id: string;
   position: number;
   color: string;
 };
-type GradientEditorProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+export type GradientEditorProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
   value?: string;
   defaultStops?: GradientStop[];
   defaultType?: GradientType;
@@ -17,31 +17,30 @@ type GradientEditorProps = Omit<ComponentProps<"div">, "onChange" | "defaultValu
 } & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-type GradientEditorPreviewProps = Omit<ComponentProps<"div">, "style"> & {
+export type GradientEditorPreviewProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-type GradientEditorTrackProps = Omit<ComponentProps<"fieldset">, "style"> & {
+export type GradientEditorTrackProps = Omit<ComponentProps<"fieldset">, "style"> & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-type GradientEditorStopProps = Omit<ComponentProps<"button">, "style"> & {
+export type GradientEditorStopProps = Omit<ComponentProps<"button">, "style"> & {
   stop: GradientStop;
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-type GradientEditorStopAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
+export type GradientEditorStopAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-type GradientEditorTypeSelectProps = {
+export type GradientEditorTypeSelectProps = {
   size?: ControlSize;
   className?: string;
   "aria-label"?: string;
   "aria-labelledby"?: string;
 };
-declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
-declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
-declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
-declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorStopProps): import("react").JSX.Element;
-declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
-declare function GradientEditorStopColor(): import("react").JSX.Element | null;
-declare function GradientEditorTypeSelect({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: GradientEditorTypeSelectProps): import("react").JSX.Element;
-//#endregion
-export { GradientEditor, GradientEditorPreview, GradientEditorPreviewProps, GradientEditorProps, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopAddProps, GradientEditorStopColor, GradientEditorStopProps, GradientEditorTrack, GradientEditorTrackProps, GradientEditorTypeSelect, GradientEditorTypeSelectProps, GradientStop, GradientType };
+export declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
+export declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
+export declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
+export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorStopProps): import("react").JSX.Element;
+export declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
+export declare function GradientEditorStopColor(): import("react").JSX.Element | null;
+export declare function GradientEditorTypeSelect({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: GradientEditorTypeSelectProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/gradient-editor.js

@@ -116,7 +116,7 @@ function GradientEditorTrack({ className, children, style, "aria-label": ariaLab
 		"data-slot": "track",
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Gradient stops" : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
-		className: cn("relative m-0 min-w-0 w-full cursor-copy p-0", className),
+		className: cn("relative m-0 min-w-0 w-full cursor-copy touch-pan-y p-0", className),
 		style: {
 			...style,
 			backgroundImage: stripe
@@ -214,7 +214,7 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 		onFocus: handleFocus,
 		onKeyDown: handleKeyDown,
 		onDoubleClick: handleDoubleClick,
-		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab overflow-hidden active:cursor-grabbing", className),
+		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab touch-pan-y overflow-hidden active:cursor-grabbing", className),
 		style: {
 			...style,
 			left: `${stop.position * 100}%`,

package/dist/ui/hover-card.d.ts

@@ -3,23 +3,22 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/ui/hover-card.d.ts
-type HoverCardProps = {
+export type HoverCardProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type HoverCardContentProps = Omit<ComponentProps<"div"> & {
+export type HoverCardContentProps = Omit<ComponentProps<"div"> & {
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
   sideOffset?: number;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
-declare function HoverCardTrigger({ className, ...props }: ComponentProps<typeof PreviewCard.Trigger> & {
+export declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
+export declare function HoverCardTrigger({ className, ...props }: ComponentProps<typeof PreviewCard.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function HoverCardContent({ className, children, side, align, sideOffset, ...props }: HoverCardContentProps): import("react").JSX.Element;
-//#endregion
-export { HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger };
+export declare function HoverCardContent({ className, children, side, align, sideOffset, ...props }: HoverCardContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/hover-card.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 { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/ui/hover-card.tsx
@@ -18,17 +19,18 @@ function HoverCardTrigger({ className, ...props }) {
 	});
 }
 function HoverCardContent({ className, children, side = "bottom", align = "center", sideOffset = 8, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 		"data-control-ui": "hover-card",
 		"data-popup-kind": "hover-card",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side,
 		align,
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 			"data-control-ui": "hover-card",
 			"data-popup-kind": "hover-card",

package/dist/ui/infinite-canvas.d.ts

@@ -1,16 +1,16 @@
 import { InfiniteCanvasKnobStyle } from "../knob-contracts/infinite-canvas-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/infinite-canvas.d.ts
-type InfiniteCanvasTransform = {
+export type InfiniteCanvasTransform = {
   x: number;
   y: number;
   scale: number;
 };
-type InfiniteCanvasMoveReason = "pointer" | "wheel" | "keyboard" | "control";
-type InfiniteCanvasMoveDetails = {
+export type InfiniteCanvasMoveReason = "pointer" | "wheel" | "keyboard" | "control";
+export type InfiniteCanvasMoveDetails = {
   reason: InfiniteCanvasMoveReason;
 };
-type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "ref" | "style"> & {
+export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel" | "ref" | "style"> & {
   transform?: InfiniteCanvasTransform;
   defaultTransform?: InfiniteCanvasTransform;
   onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
@@ -19,10 +19,10 @@ type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "onWheel
   onWheel?: (event: WheelEvent) => void;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-type InfiniteCanvasContentProps = ComponentProps<"div"> & {
+export type InfiniteCanvasContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
-type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
 type InfiniteCanvasContextValue = {
@@ -32,9 +32,8 @@ type InfiniteCanvasContextValue = {
   reset: (reason: InfiniteCanvasMoveReason) => void;
   zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
 };
-declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
-declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
-declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
-declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
-//#endregion
-export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasContentProps, InfiniteCanvasControls, InfiniteCanvasControlsProps, InfiniteCanvasMoveDetails, InfiniteCanvasMoveReason, InfiniteCanvasProps, InfiniteCanvasTransform, useInfiniteCanvas };
+export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
+export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
+export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/infinite-canvas.js

@@ -257,6 +257,7 @@ function InfiniteCanvasControls({ className, ...props }) {
 				type: "button",
 				size: "sm",
 				variant: "ghost",
+				className: "tabular-nums",
 				"aria-label": `Reset canvas zoom, currently ${percentage}%`,
 				onClick: () => canvas.reset("control"),
 				children: [percentage, "%"]

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

@@ -3,19 +3,18 @@ import { ControlSize } from "../control-variants.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/input-group.d.ts
-type InputGroupProps = Omit<ComponentProps<"div">, "style"> & {
+export type InputGroupProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"div">>;
   size?: ControlSize;
 };
-type InputGroupAddonProps = ComponentProps<"span"> & {
+export type InputGroupAddonProps = ComponentProps<"span"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
-declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
+export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+export declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
   style?: CSSProperties & FieldKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupInput, InputGroupProps };
+//#endregion

package/dist/ui/input-otp.d.ts

@@ -1,7 +1,7 @@
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/input-otp.d.ts
-type InputOTPProps = {
+export type InputOTPProps = {
   length?: number;
   separator?: boolean;
   value?: string;
@@ -20,7 +20,7 @@ type InputOTPProps = {
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type InputOTPSlotProps = {
+export type InputOTPSlotProps = {
   index: number;
   length?: number;
   disabled?: boolean;
@@ -28,11 +28,10 @@ type InputOTPSlotProps = {
   className?: string;
   style?: CSSProperties & FieldKnobStyle;
 };
-type InputOTPSeparatorProps = ComponentProps<"div"> & {
+export type InputOTPSeparatorProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function InputOTPSlot({ index, length, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
-declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
-declare function InputOTP({ length, separator, className, children, ...props }: InputOTPProps): import("react").JSX.Element;
-//#endregion
-export { InputOTP, InputOTPProps, InputOTPSeparator, InputOTPSeparatorProps, InputOTPSlot, InputOTPSlotProps };
+export declare function InputOTPSlot({ index, length, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
+export declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
+export declare function InputOTP({ length, separator, className, children, ...props }: InputOTPProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/input.d.ts

@@ -2,11 +2,10 @@ import { ControlSize } from "../control-variants.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/input.d.ts
-type InputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+export type InputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 } & {
   size?: ControlSize;
 };
-declare function Input({ size, className, ...props }: InputProps): import("react").JSX.Element;
-//#endregion
-export { Input, InputProps };
+export declare function Input({ size, className, ...props }: InputProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/item.d.ts

@@ -2,45 +2,44 @@ import { RenderProp } from "../control-props.js";
 import { ItemKnobStyle } from "../knob-contracts/item-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/item.d.ts
-declare const itemVariants: readonly ["default", "outline", "muted"];
-type ItemVariant = (typeof itemVariants)[number];
-type ItemProps = Omit<ComponentProps<"div"> & {
+export declare const itemVariants: readonly ["default", "outline", "muted"];
+export type ItemVariant = (typeof itemVariants)[number];
+export type ItemProps = Omit<ComponentProps<"div"> & {
   variant?: ItemVariant;
   render?: RenderProp<ComponentProps<"div">>;
 }, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+export type ItemDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemFooterProps = Omit<ComponentProps<"div">, "style"> & {
+export type ItemFooterProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemMediaProps = Omit<ComponentProps<"div">, "style"> & {
+export type ItemMediaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type ItemTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemGroupProps = ComponentProps<"div"> & {
+export type ItemGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
-type ItemSeparatorProps = ComponentProps<"div">;
-declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react").JSX.Element;
-declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react").JSX.Element;
-declare function Item({ variant, render, className, children, ...props }: ItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function ItemMedia({ className, ...props }: ItemMediaProps): import("react").JSX.Element;
-declare function ItemContent({ className, ...props }: ComponentProps<"div"> & {
+export type ItemSeparatorProps = ComponentProps<"div">;
+export declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react").JSX.Element;
+export declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react").JSX.Element;
+export declare function Item({ variant, render, className, children, ...props }: ItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ItemMedia({ className, ...props }: ItemMediaProps): import("react").JSX.Element;
+export declare function ItemContent({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;
-declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react").JSX.Element;
-declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
-declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
+export declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react").JSX.Element;
+export declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
+export declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;
-declare function ItemHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function ItemHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;
-declare function ItemFooter({ className, ...props }: ItemFooterProps): import("react").JSX.Element;
-//#endregion
-export { Item, ItemActions, ItemContent, ItemDescription, ItemDescriptionProps, ItemFooter, ItemFooterProps, ItemGroup, ItemGroupProps, ItemHeader, ItemMedia, ItemMediaProps, ItemProps, ItemSeparator, ItemSeparatorProps, ItemTitle, ItemTitleProps, ItemVariant, itemVariants };
+export declare function ItemFooter({ className, ...props }: ItemFooterProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/kbd.d.ts

@@ -1,12 +1,14 @@
 import { KbdKnobStyle } from "../knob-contracts/kbd-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/kbd.d.ts
-type KbdProps = Omit<ComponentProps<"kbd">, "style"> & {
+export declare const kbdVariants: readonly ["default", "ghost"];
+export type KbdVariant = (typeof kbdVariants)[number];
+export type KbdProps = Omit<ComponentProps<"kbd">, "style"> & {
+  variant?: KbdVariant;
   style?: CSSProperties & KbdKnobStyle;
 };
-declare function Kbd({ className, ...props }: KbdProps): import("react").JSX.Element;
-declare function KbdGroup({ className, ...props }: ComponentProps<"span"> & {
+export declare function Kbd({ variant, className, ...props }: KbdProps): import("react").JSX.Element;
+export declare function KbdGroup({ className, ...props }: ComponentProps<"span"> & {
   style?: CSSProperties & KbdKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Kbd, KbdGroup, KbdProps };
+//#endregion

package/dist/ui/kbd.js

@@ -1,11 +1,13 @@
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/kbd.tsx
-function Kbd({ className, ...props }) {
+const kbdVariants = ["default", "ghost"];
+function Kbd({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-control-ui": "kbd",
 		"data-control-family": "kbd",
 		"data-slot": "root",
+		"data-variant": variant,
 		className: cn("inline-flex select-none items-center justify-center", className),
 		...props
 	});
@@ -20,4 +22,4 @@ function KbdGroup({ className, ...props }) {
 	});
 }
 //#endregion
-export { Kbd, KbdGroup };
+export { Kbd, KbdGroup, kbdVariants };

package/dist/ui/markdown-elements.d.ts

@@ -11,25 +11,25 @@ type MarkdownElementProps<Tag extends keyof JSX.IntrinsicElements> = ComponentPr
 } & {
   style?: CSSProperties & MarkdownKnobStyle;
 };
-declare function MarkdownInlineCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
-declare function MarkdownPre({ children, node: _node }: MarkdownElementProps<"pre">): JSX.Element;
-declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
-declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
-declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
-declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
-declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
-declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
-declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
-declare function MarkdownLi({ className, node: _node, ...props }: MarkdownElementProps<"li">): JSX.Element;
-declare function MarkdownA({ className, node: _node, ...props }: MarkdownElementProps<"a">): JSX.Element;
-declare function MarkdownBlockquote({ className, node: _node, ...props }: MarkdownElementProps<"blockquote">): JSX.Element;
-declare function MarkdownHr({ className, node: _node, ...props }: MarkdownElementProps<"hr">): JSX.Element;
-declare function MarkdownStrong({ className, node: _node, ...props }: MarkdownElementProps<"strong">): JSX.Element;
-declare function MarkdownEm({ className, node: _node, ...props }: MarkdownElementProps<"em">): JSX.Element;
-declare function MarkdownTable({ className, children, node: _node, ...props }: MarkdownElementProps<"table">): JSX.Element;
-declare function MarkdownTh({ className, node: _node, ...props }: MarkdownElementProps<"th">): JSX.Element;
-declare function MarkdownTd({ className, node: _node, ...props }: MarkdownElementProps<"td">): JSX.Element;
-declare const markdownComponents: {
+export declare function MarkdownInlineCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
+export declare function MarkdownPre({ children, node: _node }: MarkdownElementProps<"pre">): JSX.Element;
+export declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
+export declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
+export declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
+export declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
+export declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
+export declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
+export declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
+export declare function MarkdownLi({ className, node: _node, ...props }: MarkdownElementProps<"li">): JSX.Element;
+export declare function MarkdownA({ className, node: _node, ...props }: MarkdownElementProps<"a">): JSX.Element;
+export declare function MarkdownBlockquote({ className, node: _node, ...props }: MarkdownElementProps<"blockquote">): JSX.Element;
+export declare function MarkdownHr({ className, node: _node, ...props }: MarkdownElementProps<"hr">): JSX.Element;
+export declare function MarkdownStrong({ className, node: _node, ...props }: MarkdownElementProps<"strong">): JSX.Element;
+export declare function MarkdownEm({ className, node: _node, ...props }: MarkdownElementProps<"em">): JSX.Element;
+export declare function MarkdownTable({ className, children, node: _node, ...props }: MarkdownElementProps<"table">): JSX.Element;
+export declare function MarkdownTh({ className, node: _node, ...props }: MarkdownElementProps<"th">): JSX.Element;
+export declare function MarkdownTd({ className, node: _node, ...props }: MarkdownElementProps<"td">): JSX.Element;
+export declare const markdownComponents: {
   code: typeof MarkdownCode;
   inlineCode: typeof MarkdownInlineCode;
   h1: typeof MarkdownH1;
@@ -48,5 +48,4 @@ declare const markdownComponents: {
   th: typeof MarkdownTh;
   td: typeof MarkdownTd;
 };
-//#endregion
-export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };
+//#endregion

package/dist/ui/markdown.d.ts

@@ -1,14 +1,13 @@
 import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/markdown.d.ts
-type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+export type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   content: string;
   style?: CSSProperties & MarkdownKnobStyle;
 };
-declare function MarkdownRoot({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
+export declare function MarkdownRoot({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & MarkdownKnobStyle;
 }): import("react").JSX.Element;
-declare function Markdown({ content, className, ...props }: MarkdownProps): import("react").JSX.Element;
-type MarkdownComponentProps = ComponentProps<typeof Markdown>;
-//#endregion
-export { Markdown, MarkdownComponentProps, MarkdownProps, MarkdownRoot };
+export declare function Markdown({ content, className, ...props }: MarkdownProps): import("react").JSX.Element;
+export type MarkdownComponentProps = ComponentProps<typeof Markdown>;
+//#endregion

package/dist/ui/menubar.d.ts

@@ -3,7 +3,7 @@ import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 //#region src/ui/menubar.d.ts
-type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
+export type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   modal?: boolean;
@@ -11,64 +11,63 @@ type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
 };
-type MenubarMenuProps = {
+export type MenubarMenuProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type MenubarTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type MenubarTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type MenubarContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type MenubarContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type MenubarGroupProps = ComponentProps<"div"> & {
+export type MenubarGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type MenubarItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type MenubarItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
   onClick?: (event: MouseEvent) => void;
 };
-type MenubarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type MenubarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type MenubarLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type MenubarLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   inset?: boolean;
 };
-type MenubarShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+export type MenubarShortcutProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type MenubarSubProps = {
+export type MenubarSubProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type MenubarSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type MenubarSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
   inset?: boolean;
 };
-type MenubarSubContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type MenubarSubContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Menubar({ className, ...props }: MenubarProps): import("react").JSX.Element;
-declare function MenubarMenu(props: MenubarMenuProps): import("react").JSX.Element;
-declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
-declare function MenubarContent({ className, children, ...props }: MenubarContentProps): import("react").JSX.Element;
-declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
-declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react").JSX.Element;
-declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
-declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
-declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;
-declare function MenubarSub(props: MenubarSubProps): import("react").JSX.Element;
-declare function MenubarSubTrigger({ className, inset, children, ...props }: MenubarSubTriggerProps): import("react").JSX.Element;
-declare function MenubarSubContent({ className, children, ...props }: MenubarSubContentProps): import("react").JSX.Element;
-//#endregion
-export { Menubar, MenubarContent, MenubarContentProps, MenubarGroup, MenubarGroupProps, MenubarItem, MenubarItemProps, MenubarLabel, MenubarLabelProps, MenubarMenu, MenubarMenuProps, MenubarProps, MenubarSeparator, MenubarSeparatorProps, MenubarShortcut, MenubarShortcutProps, MenubarSub, MenubarSubContent, MenubarSubContentProps, MenubarSubProps, MenubarSubTrigger, MenubarSubTriggerProps, MenubarTrigger, MenubarTriggerProps };
+export declare function Menubar({ className, ...props }: MenubarProps): import("react").JSX.Element;
+export declare function MenubarMenu(props: MenubarMenuProps): import("react").JSX.Element;
+export declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
+export declare function MenubarContent({ className, children, ...props }: MenubarContentProps): import("react").JSX.Element;
+export declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
+export declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react").JSX.Element;
+export declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
+export declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
+export declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;
+export declare function MenubarSub(props: MenubarSubProps): import("react").JSX.Element;
+export declare function MenubarSubTrigger({ className, inset, children, ...props }: MenubarSubTriggerProps): import("react").JSX.Element;
+export declare function MenubarSubContent({ className, children, ...props }: MenubarSubContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/menubar.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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -38,13 +39,14 @@ function MenubarTrigger({ className, ...props }) {
 	});
 }
 function MenubarContent({ className, children, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side: "bottom",
 		align: "start",
 		sideOffset: 6,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "menubar",
 			"data-popup-kind": "menubar",
@@ -137,14 +139,15 @@ function MenubarSubTrigger({ className, inset = false, children, ...props }) {
 	});
 }
 function MenubarSubContent({ className, children, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side: "right",
 		align: "start",
 		sideOffset: -4,
 		alignOffset: -5,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "menubar",
 			"data-popup-kind": "menubar",