@ctrl-ui/react 0.8.4 → 0.8.5

package/dist/ui/alert-dialog.js

@@ -43,7 +43,7 @@ function AlertDialogContent({ className, children, ...props }) {
 		"data-popup-part": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-[70]"
+		className: "fixed inset-0 z-(--z-overlay)"
 	}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
@@ -53,7 +53,7 @@ function AlertDialogContent({ className, children, ...props }) {
 		"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", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2", className),
 		...props,
 		children
 	})] });

package/dist/ui/autocomplete.js

@@ -68,7 +68,7 @@ function AutocompleteContent({ className, children, sideOffset = 6, ...props })
 		side: "bottom",
 		align: "start",
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 			"data-control-ui": "autocomplete",
 			"data-popup-kind": "autocomplete",

package/dist/ui/color-picker.js

@@ -4,9 +4,9 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
@@ -191,7 +191,7 @@ function ColorPickerContent({ className, children, side = "bottom", align = "cen
 		side,
 		align,
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Popover.Popup, {
 			"data-control-ui": "color-picker",
 			"data-popup-kind": "color-picker",
@@ -326,7 +326,7 @@ function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby":
 		step: 1,
 		disabled,
 		onValueChange: (next) => setHsva({ h: Array.isArray(next) ? next[0] : next }),
-		className: cn("relative flex w-full touch-none select-none items-center", className),
+		className: cn("relative flex w-full touch-pan-y select-none items-center", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex h-full w-full items-center",
@@ -365,7 +365,7 @@ function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby
 		step: .01,
 		disabled,
 		onValueChange: (next) => setHsva({ a: Array.isArray(next) ? next[0] : next }),
-		className: cn("relative flex w-full touch-none select-none items-center", className),
+		className: cn("relative flex w-full touch-pan-y select-none items-center", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex h-full w-full items-center",

package/dist/ui/combobox.js

@@ -88,7 +88,7 @@ function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
 		side: "bottom",
 		align: "start",
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-control-ui": "combobox",
 			"data-popup-kind": "combobox",

package/dist/ui/command.d.ts

@@ -1,6 +1,6 @@
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { Dialog } from "./dialog.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Command as Command$1 } from "cmdk";
 //#region src/ui/command.d.ts
 export type CommandChrome = "standalone" | "embedded";
@@ -22,10 +22,12 @@ export declare function CommandInput({ className, ...props }: CommandInputProps)
 export declare function CommandList({ className, children, ...props }: ComponentProps<typeof Command$1.List> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-export type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style"> & {
+export type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style" | "title"> & {
   style?: CSSProperties & PopupKnobStyle;
+  title?: ReactNode;
+  description?: ReactNode;
 };
-export declare function CommandEmpty({ className, children, ...props }: CommandEmptyProps): import("react").JSX.Element;
+export declare function CommandEmpty({ className, children, title, description, ...props }: CommandEmptyProps): import("react").JSX.Element;
 export type CommandGroupProps = Omit<ComponentProps<typeof Command$1.Group>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };

package/dist/ui/command.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command as Command$1, useCommandState } from "cmdk";
@@ -20,7 +21,7 @@ function Command({ chrome = "standalone", className, ...props }) {
 		...props
 	});
 }
-function CommandDialog({ title = "Command palette", description = "Search for a command to run...", children, className, commandProps, ...props }) {
+function CommandDialog({ title = "Command palette", description = "Search for a command to run…", children, className, commandProps, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog, {
 		...props,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
@@ -121,7 +122,7 @@ function CommandList({ className, children, ...props }) {
 		})
 	});
 }
-function CommandEmpty({ className, children, ...props }) {
+function CommandEmpty({ className, children, title = "No results found", description = "Try a different search term.", ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Empty, {
 		asChild: true,
 		"data-control-ui": "command",
@@ -132,10 +133,33 @@ function CommandEmpty({ className, children, ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			role: "status",
-			children
+			children: children ?? /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+				/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(CommandEmptyIcon, {}) }),
+				/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+				description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+			] }) })
 		})
 	});
 }
+function CommandEmptyIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		fill: "none",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "7",
+			r: "4.25",
+			stroke: "currentColor",
+			strokeWidth: "1.3"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m10.5 10.5 3 3",
+			stroke: "currentColor",
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		})]
+	});
+}
 function CommandGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Group, {
 		"data-control-ui": "command",

package/dist/ui/context-menu.js

@@ -39,7 +39,7 @@ function ContextMenuContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-control-ui": "context-menu",
 			"data-popup-kind": "context-menu",
@@ -185,7 +185,7 @@ function ContextMenuSubContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		sideOffset: -4,
 		alignOffset: -5,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {

package/dist/ui/dialog.js

@@ -43,7 +43,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		"data-popup-part": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-[70]"
+		className: "fixed inset-0 z-(--z-overlay)"
 	}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
@@ -53,7 +53,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		"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-lg -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2", className),
 		...props,
 		children: [
 			skinAdornment(skin, "dialog", "titlebar", {}),

package/dist/ui/drawer.js

@@ -96,7 +96,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-slot": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-[70]",
+		className: "fixed inset-0 z-(--z-overlay)",
 		style: backdropStyle
 	}), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
 		"data-control-ui": "drawer",
@@ -107,7 +107,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-variant": variant,
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: cn("fixed inset-0 z-[71] flex", place.viewport),
+		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport),
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-control-ui": "drawer",
 			"data-control-family": "popup",

package/dist/ui/dropdown-menu.js

@@ -42,7 +42,7 @@ function DropdownMenuContent({ className, children, side = "bottom", sideOffset
 		collisionBoundary,
 		collisionPadding,
 		collisionAvoidance,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "dropdown-menu",
 			"data-slot": "content",

package/dist/ui/dropzone.js

@@ -272,7 +272,10 @@ function DefaultFile({ file }) {
 			/* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
 				className: "wrap-anywhere",
 				children: file.name
-			}), /* @__PURE__ */ jsx(ItemDescription, { children: formatDropzoneFileSize(file.size) })] }),
+			}), /* @__PURE__ */ jsx(ItemDescription, {
+				className: "tabular-nums",
+				children: formatDropzoneFileSize(file.size)
+			})] }),
 			/* @__PURE__ */ jsx(ItemActions, { children: /* @__PURE__ */ jsx(DropzoneRemove, { file }) })
 		]
 	});

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.js

@@ -30,7 +30,7 @@ function HoverCardContent({ className, children, side = "bottom", align = "cente
 		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.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/menubar.js

@@ -46,7 +46,7 @@ function MenubarContent({ className, children, ...props }) {
 		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",
@@ -147,7 +147,7 @@ function MenubarSubContent({ className, children, ...props }) {
 		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",

package/dist/ui/navigation-menu.js

@@ -113,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.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/phone-input.js

@@ -2,12 +2,12 @@
 import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import flags from "react-phone-number-input/flags";
 import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
+import flags from "react-phone-number-input/flags";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;
@@ -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;
@@ -75,7 +75,7 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 					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) => {
+					}), /* @__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, {

package/dist/ui/popover.js

@@ -30,7 +30,7 @@ function PopoverContent({ className, children, side = "bottom", align = "center"
 		align,
 		sideOffset,
 		collisionPadding,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
 			"data-control-ui": "popover",
 			"data-popup-kind": "popover",

package/dist/ui/resizable.js

@@ -38,7 +38,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		"data-slot": "handle",
 		"data-variant": variant,
 		"data-axis": axis,
-		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px" : "h-px", className),
+		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
 		...props,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",

package/dist/ui/rich-tooltip.js

@@ -151,7 +151,7 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 		sideOffset,
 		anchor,
 		collisionPadding,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsxs(Popover.Popup, {
 			"data-control-ui": "rich-tooltip",
 			"data-popup-kind": "rich-tooltip",

package/dist/ui/select.js

@@ -74,7 +74,7 @@ function SelectContent({ className, children, alignItemWithTrigger = false, ...p
 		align: "start",
 		sideOffset: 6,
 		alignItemWithTrigger,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Select$1.Popup, {
 			"data-control-ui": "select",
 			"data-popup-kind": "select",

package/dist/ui/sheet.js

@@ -28,7 +28,7 @@ function SheetContent({ className, children, side = "right", ...props }) {
 		"data-popup-part": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-[70]"
+		className: "fixed inset-0 z-(--z-overlay)"
 	}), /* @__PURE__ */ jsx(Dialog.Popup, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
@@ -38,7 +38,7 @@ function SheetContent({ className, children, side = "right", ...props }) {
 		"data-slot": "content",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed inset-y-0 z-[71] flex h-full w-3/4 max-w-sm flex-col", side === "left" ? "left-0" : "right-0", className),
+		className: cn("fixed inset-y-0 z-(--z-modal) flex h-full w-3/4 max-w-sm flex-col", side === "left" ? "left-0" : "right-0", className),
 		...props,
 		"data-side": side,
 		children

package/dist/ui/sidebar-resize-rail.js

@@ -179,7 +179,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			onPointerDown: handlePointerDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
-			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-none outline-hidden group-data-[side=left]:-right-1 group-data-[side=right]:-left-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-right-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-left-2 lg:block", className),
+			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y outline-hidden group-data-[side=left]:-right-1 group-data-[side=right]:-left-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-right-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-left-2 lg:block", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				ref: widthMeasureRef,
 				"aria-hidden": true,

package/dist/ui/slider.js

@@ -37,7 +37,7 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 		disabled,
 		onValueChange,
 		onValueCommitted,
-		className: cn("group relative flex cursor-pointer touch-none select-none items-center data-[disabled]:cursor-not-allowed", orientation === "vertical" ? "min-h-20 w-fit" : "w-full", className),
+		className: cn("group relative flex cursor-pointer select-none items-center data-[disabled]:cursor-not-allowed", orientation === "vertical" ? "min-h-20 w-fit touch-pan-x" : "w-full touch-pan-y", className),
 		style,
 		...props,
 		children: [/* @__PURE__ */ jsx(Slider$1.Control, {

package/dist/ui/toast.js

@@ -43,7 +43,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 			style: rootStyle,
 			"data-slot": "root",
 			"data-surface": "floating",
-			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				"data-control-ui": "toast",
 				"data-control-family": "popup",
@@ -125,7 +125,7 @@ function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionS
 			"data-slot": "viewport",
 			"data-skin": skin.id,
 			"data-effects": controlEffectsAttribute(skin.effects),
-			className: cn("fixed right-4 bottom-4 z-[95] mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
+			className: cn("fixed right-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,
 				indicatorStyle,

package/dist/ui/tooltip.js

@@ -46,7 +46,7 @@ function TooltipContent({ className, children, side = "top", sideOffset = 8, ali
 		"data-slot": "positioner",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "z-[90]",
+		className: "z-(--z-tooltip)",
 		...positionerProps,
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 			ref,

package/dist/ui/trigger-menu.js

@@ -23,7 +23,7 @@ function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "st
 			side,
 			align,
 			sideOffset,
-			className: "z-[80]",
+			className: "z-(--z-popup)",
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"data-control-ui": "trigger-menu",
 				"data-popup-kind": "trigger-menu",