@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/meter.d.ts

@@ -1,7 +1,7 @@
 import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/meter.d.ts
-type MeterProps = Omit<ComponentProps<"div"> & {
+export type MeterProps = Omit<ComponentProps<"div"> & {
   value: number;
   min?: number;
   max?: number;
@@ -11,24 +11,23 @@ type MeterProps = Omit<ComponentProps<"div"> & {
 }, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type MeterTrackProps = Omit<ComponentProps<"div">, "style"> & {
+export type MeterTrackProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type MeterIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type MeterIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type MeterLabelProps = Omit<ComponentProps<"span">, "style"> & {
+export type MeterLabelProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type MeterValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
+export type MeterValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
   children?: ((formattedValue: string, value: number) => ReactNode) | null;
 }, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-declare function Meter({ className, ...props }: MeterProps): import("react").JSX.Element;
-declare function MeterLabel({ className, ...props }: MeterLabelProps): import("react").JSX.Element;
-declare function MeterValue({ className, ...props }: MeterValueProps): import("react").JSX.Element;
-declare function MeterTrack({ className, ...props }: MeterTrackProps): import("react").JSX.Element;
-declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
-//#endregion
-export { Meter, MeterIndicator, MeterIndicatorProps, MeterLabel, MeterLabelProps, MeterProps, MeterTrack, MeterTrackProps, MeterValue, MeterValueProps };
+export declare function Meter({ className, ...props }: MeterProps): import("react").JSX.Element;
+export declare function MeterLabel({ className, ...props }: MeterLabelProps): import("react").JSX.Element;
+export declare function MeterValue({ className, ...props }: MeterValueProps): import("react").JSX.Element;
+export declare function MeterTrack({ className, ...props }: MeterTrackProps): import("react").JSX.Element;
+export declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/morphing-panel.d.ts

@@ -2,23 +2,22 @@ import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } fr
 import { MorphingPanelKnobStyle } from "../knob-contracts/morphing-panel-knobs.js";
 import { CSSProperties } from "react";
 //#region src/ui/morphing-panel.d.ts
-type MorphingPanelDimensions = {
+export type MorphingPanelDimensions = {
   width: string;
   height: string;
 };
-type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
+export type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
   collapsedSize: MorphingPanelDimensions;
   expandedSize: MorphingPanelDimensions;
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
+export type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
+export type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
-declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
-declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
-//#endregion
-export { MorphingPanel, MorphingPanelContent, MorphingPanelContentProps, MorphingPanelDimensions, MorphingPanelProps, MorphingPanelTrigger, MorphingPanelTriggerProps };
+export declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
+export declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
+export declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/native-select.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/native-select.d.ts
-type NativeSelectProps = Omit<Omit<ComponentProps<"select">, "size">, "style"> & {
+export type NativeSelectProps = Omit<Omit<ComponentProps<"select">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 } & {
   size?: ControlSize;
 };
-declare function NativeSelect({ size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
-//#endregion
-export { NativeSelect, NativeSelectProps };
+export declare function NativeSelect({ size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/native-select.js

@@ -20,7 +20,7 @@ function NativeSelect({ size = "md", className, children, ...props }) {
 			"data-control-family": "field",
 			"data-field-kind": "native-select",
 			"data-slot": "icon",
-			className: "pointer-events-none absolute right-[calc(var(--padding-x)*0.6)]",
+			className: "pointer-events-none absolute",
 			children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 12 12",
 				className: "size-3",

package/dist/ui/navigation-menu.d.ts

@@ -3,7 +3,7 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/ui/navigation-menu.d.ts
-type NavigationMenuProps = ComponentProps<"nav"> & {
+export type NavigationMenuProps = ComponentProps<"nav"> & {
   value?: string | null;
   defaultValue?: string | null;
   onValueChange?: (value: string | null) => void;
@@ -13,39 +13,38 @@ type NavigationMenuProps = ComponentProps<"nav"> & {
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuListProps = ComponentProps<"ul"> & {
+export type NavigationMenuListProps = ComponentProps<"ul"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuItemProps = ComponentProps<"li"> & {
+export type NavigationMenuItemProps = ComponentProps<"li"> & {
   value?: string;
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ButtonKnobStyle & PopupKnobStyle;
 };
-type NavigationMenuContentProps = ComponentProps<"div"> & {
+export type NavigationMenuContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare const navigationMenuLinkVariants: readonly ["default", "compact"];
-type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
-type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & {
+export declare const navigationMenuLinkVariants: readonly ["default", "compact"];
+export type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
+export type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   active?: boolean;
   closeOnClick?: boolean;
   variant?: NavigationMenuLinkVariant;
 };
-type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & {
+export type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
 type RefinedLinkProps = NavigationMenuLinkProps & Pick<ComponentProps<typeof NavigationMenu$1.Link>, "render">;
-declare function NavigationMenu({ className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
-declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
-declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
-declare function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
-declare function NavigationMenuLink({ variant, className, active, children, ...props }: RefinedLinkProps): import("react").JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
-//#endregion
-export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuLinkVariant, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, navigationMenuLinkVariants };
+export declare function NavigationMenu({ className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
+export declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+export declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+export declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+export declare function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+export declare function NavigationMenuLink({ variant, className, active, children, ...props }: RefinedLinkProps): import("react").JSX.Element;
+export declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/navigation-menu.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, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/ui/navigation-menu.tsx
@@ -96,13 +97,14 @@ function NavigationMenuLink({ variant = "default", className, active, children,
 	});
 }
 function NavigationMenuViewport({ className, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
 		"data-control-ui": "navigation-menu",
 		"data-control-family": "popup",
 		"data-popup-kind": "navigation-menu",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		sideOffset: 8,
 		collisionPadding: {
 			top: 5,
@@ -111,7 +113,7 @@ function NavigationMenuViewport({ className, ...props }) {
 			right: 16
 		},
 		collisionAvoidance: { side: "none" },
-		className: "z-[80] h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] before:absolute before:inset-x-0 before:top-[-8px] before:h-2 before:content-['']",
+		className: "z-(--z-popup) h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] before:absolute before:inset-x-0 before:top-[-8px] before:h-2 before:content-['']",
 		children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
 			"data-control-ui": "navigation-menu",
 			"data-control-family": "popup",

package/dist/ui/number-field.d.ts

@@ -2,8 +2,8 @@ import { ControlSize } from "../control-variants.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/ui/number-field.d.ts
-type NumberFieldChangeReason = "input-change" | "input-clear" | "input-blur" | "input-paste" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "none";
-type NumberFieldChangeEventDetails = {
+export type NumberFieldChangeReason = "input-change" | "input-clear" | "input-blur" | "input-paste" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "none";
+export type NumberFieldChangeEventDetails = {
   reason: NumberFieldChangeReason;
   event: Event;
   cancel?: () => void;
@@ -12,7 +12,7 @@ type NumberFieldChangeEventDetails = {
   isPropagationAllowed?: boolean;
   trigger?: Element | undefined;
 };
-type NumberFieldProps = {
+export type NumberFieldProps = {
   size?: ControlSize;
   value?: number | null;
   defaultValue?: number;
@@ -39,34 +39,33 @@ type NumberFieldProps = {
   style?: CSSProperties & FieldKnobStyle;
   children?: ReactNode;
 };
-type NumberFieldGroupProps = Omit<ComponentProps<"div">, "style"> & {
+export type NumberFieldGroupProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldInputProps = Omit<ComponentProps<"input">, "style"> & {
+export type NumberFieldInputProps = Omit<ComponentProps<"input">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldIncrementProps = ComponentProps<"button"> & {
+export type NumberFieldIncrementProps = ComponentProps<"button"> & {
   nativeButton?: boolean;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldDecrementProps = ComponentProps<"button"> & {
+export type NumberFieldDecrementProps = ComponentProps<"button"> & {
   nativeButton?: boolean;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldScrubAreaProps = ComponentProps<"span"> & {
+export type NumberFieldScrubAreaProps = ComponentProps<"span"> & {
   direction?: "horizontal" | "vertical";
   pixelSensitivity?: number;
   teleportDistance?: number;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function NumberField({ size, value, defaultValue, children, ...props }: NumberFieldProps): import("react").JSX.Element;
-declare function NumberFieldGroup({ className, children, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
-declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): import("react").JSX.Element;
-declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;
-declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): import("react").JSX.Element;
-declare function NumberFieldScrubArea({ className, children, ...props }: NumberFieldScrubAreaProps): import("react").JSX.Element;
-//#endregion
-export { NumberField, NumberFieldChangeEventDetails, NumberFieldChangeReason, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldProps, NumberFieldScrubArea, NumberFieldScrubAreaProps };
+export declare function NumberField({ size, value, defaultValue, children, ...props }: NumberFieldProps): import("react").JSX.Element;
+export declare function NumberFieldGroup({ className, children, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
+export declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): import("react").JSX.Element;
+export declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;
+export declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): import("react").JSX.Element;
+export declare function NumberFieldScrubArea({ className, children, ...props }: NumberFieldScrubAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/number-field.js

@@ -70,7 +70,7 @@ function NumberFieldScrubArea({ className, children, ...props }) {
 		"data-control-family": "field",
 		"data-field-kind": "number-field",
 		"data-slot": "scrub-area",
-		className: cn("cursor-ew-resize select-none", className),
+		className: cn("cursor-ew-resize touch-pan-y select-none", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
 			"data-control-ui": "number-field",

package/dist/ui/page-layout.d.ts

@@ -0,0 +1,44 @@
+import { ScrollAreaProps } from "./scroll-area.js";
+import { PageLayoutKnobStyle } from "../knob-contracts/page-layout-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/page-layout.d.ts
+export declare const pageWidths: readonly ["prose", "content", "wide", "full"];
+export type PageWidth = (typeof pageWidths)[number];
+export declare const pageScrollModes: readonly ["page", "inset", "none"];
+export type PageScrollMode = (typeof pageScrollModes)[number];
+export type PageScroll = PageScrollMode | "auto";
+export declare const pageHeaderVariants: readonly ["flow", "sticky", "floating"];
+export type PageHeaderVariant = (typeof pageHeaderVariants)[number];
+type PageStyle = CSSProperties & PageLayoutKnobStyle;
+export declare function usePageScroll(scroll?: PageScroll): PageScrollMode;
+export type PageLayoutProps = Omit<ComponentProps<"div">, "style"> & {
+  scroll?: PageScroll;
+  width?: PageWidth;
+  scrollViewportRef?: ScrollAreaProps["viewportRef"];
+  style?: PageStyle;
+};
+export declare function PageLayout({ scroll, width, scrollViewportRef, children, className, ...props }: PageLayoutProps): import("react").JSX.Element;
+export type PageHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  variant?: PageHeaderVariant;
+  style?: PageStyle;
+};
+export declare function PageHeader({ variant, className, ...props }: PageHeaderProps): import("react").JSX.Element;
+export type PageTitleProps = Omit<ComponentProps<"h1">, "style"> & {
+  style?: PageStyle;
+};
+export declare function PageTitle({ className, ...props }: PageTitleProps): import("react").JSX.Element;
+export type PageDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: PageStyle;
+};
+export declare function PageDescription({ className, ...props }: PageDescriptionProps): import("react").JSX.Element;
+export type PageActionsProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: PageStyle;
+};
+export declare function PageActions({ className, ...props }: PageActionsProps): import("react").JSX.Element;
+export type PageBodyProps = Omit<ComponentProps<"div">, "style"> & {
+  aside?: ReactNode;
+  contentClassName?: string;
+  style?: PageStyle;
+};
+export declare function PageBody({ aside, contentClassName, children, className, ...props }: PageBodyProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/page-layout.js

@@ -0,0 +1,108 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useSkin } from "../skin-provider.js";
+import { ScrollArea } from "./scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/page-layout.tsx
+const pageWidths = [
+	"prose",
+	"content",
+	"wide",
+	"full"
+];
+const pageScrollModes = [
+	"page",
+	"inset",
+	"none"
+];
+const pageHeaderVariants = [
+	"flow",
+	"sticky",
+	"floating"
+];
+function usePageScroll(scroll = "auto") {
+	const skin = useSkin();
+	if (scroll !== "auto") return scroll;
+	return skin.sidebarLayout === "page" ? "page" : "inset";
+}
+function PageLayout({ scroll = "auto", width = "prose", scrollViewportRef, children, className, ...props }) {
+	const resolvedScroll = usePageScroll(scroll);
+	const scrollsInset = resolvedScroll === "inset";
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "root",
+		"data-scroll": resolvedScroll,
+		"data-width": width,
+		className: cn("flex w-full flex-col", resolvedScroll !== "page" && "min-h-0 flex-1 overflow-hidden", className),
+		...props,
+		children: scrollsInset ? /* @__PURE__ */ jsx(ScrollArea, {
+			className: "min-h-0 flex-1",
+			viewportClassName: "scroll-smooth motion-reduce:scroll-auto",
+			viewportRef: scrollViewportRef,
+			lockAxis: "x",
+			children
+		}) : children
+	});
+}
+function PageHeader({ variant = "flow", className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "header",
+		"data-variant": variant,
+		className,
+		...props
+	});
+}
+function PageTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "title",
+		className: cn("text-balance", className),
+		...props
+	});
+}
+function PageDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "description",
+		className: cn("text-pretty", className),
+		...props
+	});
+}
+function PageActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+}
+function PageBody({ aside, contentClassName, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "page-layout",
+		"data-control-family": "page-layout",
+		"data-slot": "body",
+		"data-aside": aside ? "" : void 0,
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-control-ui": "page-layout",
+			"data-control-family": "page-layout",
+			"data-slot": "content",
+			className: cn("min-w-0", contentClassName),
+			children
+		}), aside ? /* @__PURE__ */ jsx("aside", {
+			"data-control-ui": "page-layout",
+			"data-control-family": "page-layout",
+			"data-slot": "aside",
+			children: aside
+		}) : null]
+	});
+}
+//#endregion
+export { PageActions, PageBody, PageDescription, PageHeader, PageLayout, PageTitle, pageHeaderVariants, pageScrollModes, pageWidths, usePageScroll };

package/dist/ui/pagination.d.ts

@@ -1,26 +1,25 @@
 import { PaginationKnobStyle } from "../knob-contracts/pagination-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/pagination.d.ts
-type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
+export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
-type PaginationLinkProps = Omit<ComponentProps<"a"> & {
+export type PaginationLinkProps = Omit<ComponentProps<"a"> & {
   isActive?: boolean;
 }, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
-declare function Pagination({ className, ...props }: ComponentProps<"nav"> & {
+export declare function Pagination({ className, ...props }: ComponentProps<"nav"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationContent({ className, ...props }: ComponentProps<"ul"> & {
+export declare function PaginationContent({ className, ...props }: ComponentProps<"ul"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
+export declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
-declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
-//#endregion
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious };
+export declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+export declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
+//#endregion

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

@@ -4,10 +4,10 @@ import { CSSProperties, ComponentProps } from "react";
 import { Country, Value } from "react-phone-number-input/max";
 import { Labels } from "react-phone-number-input";
 //#region src/ui/phone-input.d.ts
-type PhoneInputValue = Value;
-type PhoneInputCountry = Country;
+export type PhoneInputValue = Value;
+export type PhoneInputCountry = Country;
 type CountryOptionOrder = PhoneInputCountry | "XX" | "🌐" | "|" | "..." | "…";
-type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "style" | "type" | "value"> & {
+export type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "style" | "type" | "value"> & {
   size?: ControlSize;
   value?: PhoneInputValue | string;
   defaultValue?: PhoneInputValue | string;
@@ -25,6 +25,5 @@ type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "
   "data-invalid"?: boolean | string;
   style?: CSSProperties & PhoneInputKnobStyle;
 };
-declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
-//#endregion
-export { PhoneInput, PhoneInputCountry, PhoneInputProps, PhoneInputValue };
+export declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/phone-input.js

@@ -35,7 +35,7 @@ function PhoneInputControl({ className, normalizationCountry, onChange, onNative
 		}
 	});
 }
-function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country...", emptyMessage = "No country found.", knobStyle }) {
+function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country…", emptyMessage, knobStyle }) {
 	const countryStyle = knobStyle;
 	const triggerStyle = knobStyle;
 	const metadataStyle = knobStyle;
@@ -70,41 +70,44 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 				align: "start",
 				padding: "none",
 				className: "w-[min(20rem,calc(100vw-2rem))]",
-				children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
-					"aria-label": searchPlaceholder,
-					placeholder: searchPlaceholder
-				}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
-					const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
-					const selected = option.value === value;
-					return /* @__PURE__ */ jsxs(CommandItem, {
-						value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
-						"data-current": selected ? "" : void 0,
-						onSelect: () => {
-							onChange(option.value);
-							setOpen(false);
-						},
-						children: [
-							/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
-							/* @__PURE__ */ jsx("span", {
-								className: "min-w-0 flex-1 truncate",
-								children: option.label
-							}),
-							callingCode ? /* @__PURE__ */ jsx("span", {
-								"data-control-ui": "phone-input",
-								"data-control-family": "phone-input",
-								"data-slot": "metadata",
-								className: "min-w-0",
-								style: metadataStyle,
-								children: callingCode
-							}) : null,
-							selected ? /* @__PURE__ */ jsx("span", {
-								className: "sr-only",
-								children: "Selected"
-							}) : null,
-							/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
-						]
-					}, option.value ?? "international");
-				}) })] })] })
+				children: /* @__PURE__ */ jsxs(Command, {
+					chrome: "embedded",
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						"aria-label": searchPlaceholder,
+						placeholder: searchPlaceholder
+					}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { title: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+						const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
+						const selected = option.value === value;
+						return /* @__PURE__ */ jsxs(CommandItem, {
+							value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
+							"data-current": selected ? "" : void 0,
+							onSelect: () => {
+								onChange(option.value);
+								setOpen(false);
+							},
+							children: [
+								/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: option.label
+								}),
+								callingCode ? /* @__PURE__ */ jsx("span", {
+									"data-control-ui": "phone-input",
+									"data-control-family": "phone-input",
+									"data-slot": "metadata",
+									className: "min-w-0",
+									style: metadataStyle,
+									children: callingCode
+								}) : null,
+								selected ? /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: "Selected"
+								}) : null,
+								/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
+							]
+						}, option.value ?? "international");
+					}) })] })]
+				})
 			})]
 		})
 	});