@ctrl-ui/react 0.8.0

package/dist/ui/morphing-panel.js

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/ui/morphing-panel.tsx
+function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {
+	const panelState = open ? "open" : "closed";
+	return useRender({
+		defaultTagName: "button",
+		render,
+		state: { open },
+		props: {
+			...triggerProps,
+			"data-control-ui": "morphing-panel",
+			"data-slot": "trigger",
+			"data-state": panelState,
+			className: cn(triggerProps.className, className),
+			children
+		}
+	});
+}
+function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }) {
+	const dimensions = {
+		"--_morphing-panel-collapsed-height": collapsedSize.height,
+		"--_morphing-panel-collapsed-width": collapsedSize.width,
+		"--_morphing-panel-expanded-height": expandedSize.height,
+		"--_morphing-panel-expanded-width": expandedSize.width,
+		...style
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		className,
+		style: dimensions,
+		render: (renderProps, state) => {
+			const panelState = state.open ? "open" : "closed";
+			const panelSize = state.open ? "expanded" : "collapsed";
+			const panelStyle = {
+				...renderProps.style,
+				height: `var(--_morphing-panel-${panelSize}-height)`,
+				width: `min(var(--_morphing-panel-${panelSize}-width), 100%)`
+			};
+			return /* @__PURE__ */ jsx("div", {
+				...renderProps,
+				"data-control-ui": "morphing-panel",
+				"data-control-family": "morphing-panel",
+				"data-slot": "root",
+				"data-state": panelState,
+				"data-surface": "panel",
+				style: panelStyle,
+				className: cn("relative isolate max-w-full overflow-hidden", renderProps.className)
+			});
+		},
+		...props
+	});
+}
+function MorphingPanelTrigger({ render, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		className: "group/morphing-panel-trigger absolute top-0 right-0 z-10 flex cursor-pointer items-center justify-between data-[state=open]:top-2 data-[state=open]:right-2 data-[state=open]:justify-center [&>svg]:shrink-0",
+		...props,
+		render: (triggerProps, state) => /* @__PURE__ */ jsx(MorphingPanelTriggerElement, {
+			triggerProps,
+			open: state.open,
+			render,
+			className,
+			children
+		})
+	});
+}
+function MorphingPanelContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className,
+		render: (renderProps, state) => {
+			const panelState = state.open ? "open" : "closed";
+			return /* @__PURE__ */ jsx("div", {
+				...renderProps,
+				"data-control-ui": "morphing-panel",
+				"data-control-family": "morphing-panel",
+				"data-slot": "content",
+				"data-state": panelState,
+				className: cn("absolute inset-0 overflow-hidden", renderProps.className)
+			});
+		},
+		...props
+	});
+}
+//#endregion
+export { MorphingPanel, MorphingPanelContent, MorphingPanelTrigger };

package/dist/ui/native-select.d.ts

@@ -0,0 +1,12 @@
+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"> & {
+  style?: CSSProperties & FieldKnobStyle;
+} & {
+  size?: ControlSize;
+};
+declare function NativeSelect({ size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
+//#endregion
+export { NativeSelect, NativeSelectProps };

package/dist/ui/native-select.js

@@ -0,0 +1,41 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/native-select.tsx
+function NativeSelect({ size = "md", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-flex w-full items-center",
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-control-ui": "native-select",
+			"data-field-kind": "native-select",
+			"data-slot": "root",
+			"data-size": size,
+			"data-control-family": "field",
+			"data-control": "true",
+			className: cn("w-full min-w-0 cursor-pointer", className),
+			...props,
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-control-ui": "native-select",
+			"data-control-family": "field",
+			"data-field-kind": "native-select",
+			"data-slot": "icon",
+			className: "pointer-events-none absolute right-[calc(var(--padding-x)*0.6)]",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M3 4.5 6 7.5 9 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { NativeSelect };

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

@@ -0,0 +1,51 @@
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+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"> & {
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  orientation?: "horizontal" | "vertical";
+  delay?: number;
+  closeDelay?: number;
+} & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type NavigationMenuListProps = ComponentProps<"ul"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type NavigationMenuItemProps = ComponentProps<"li"> & {
+  value?: string;
+} & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle & PopupKnobStyle;
+};
+type NavigationMenuContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare const navigationMenuLinkVariants: readonly ["default", "compact"];
+type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
+type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  active?: boolean;
+  closeOnClick?: boolean;
+  variant?: NavigationMenuLinkVariant;
+};
+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 };

package/dist/ui/navigation-menu.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.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
+const navigationMenuLinkVariants = ["default", "compact"];
+function NavigationMenu({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
+		"data-control-ui": "navigation-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "navigation-menu",
+		"data-slot": "root",
+		className: cn("relative flex max-w-max flex-1 items-center justify-center", className),
+		...props,
+		children
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		"data-control-ui": "navigation-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "navigation-menu",
+		"data-slot": "list",
+		className: cn("flex flex-1 list-none items-center justify-center", className),
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		"data-control-ui": "navigation-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "navigation-menu",
+		"data-slot": "item",
+		className: cn("relative", className),
+		...props
+	});
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+		"data-control-ui": "navigation-menu",
+		"data-control-family": "button",
+		"data-slot": "trigger",
+		"data-control": "true",
+		"data-cursor": "default",
+		"data-size": "sm",
+		"data-variant": "quiet",
+		"data-tone": "neutral",
+		"data-shape": "default",
+		className: cn("inline-flex select-none items-center", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(NavigationMenu$1.Icon, {
+			"data-control-ui": "navigation-menu",
+			"data-control-family": "popup",
+			"data-popup-kind": "navigation-menu",
+			"data-slot": "icon",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M3 4.5 6 7.5 9 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})]
+	});
+}
+function NavigationMenuContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		"data-control-ui": "navigation-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "navigation-menu",
+		"data-slot": "content",
+		className: cn("h-full w-full p-[var(--popover-padding)]", className),
+		...props,
+		children
+	});
+}
+function NavigationMenuLink({ variant = "default", className, active, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		"data-control-ui": "navigation-menu",
+		"data-popup-kind": "navigation-menu",
+		"data-slot": "link",
+		"data-control-family": "popup",
+		"data-popup-part": "navigation-link",
+		"data-variant": variant,
+		active,
+		className: cn("block select-none", variant === "compact" && "inline-flex h-[var(--control-h-sm)] items-center px-[calc(var(--padding-x)*0.75)]", className),
+		...props,
+		children
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	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(),
+		sideOffset: 8,
+		collisionPadding: {
+			top: 5,
+			bottom: 5,
+			left: 16,
+			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-['']",
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
+			"data-control-ui": "navigation-menu",
+			"data-control-family": "popup",
+			"data-popup-kind": "navigation-menu",
+			"data-slot": "popup",
+			className: "relative h-[var(--popup-height)] w-[var(--popup-width)]",
+			children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
+				"data-control-ui": "navigation-menu",
+				"data-popup-kind": "navigation-menu",
+				"data-slot": "viewport",
+				"data-surface": "floating",
+				"data-control-family": "popup",
+				"data-popup-part": "surface",
+				className: cn("relative h-full w-full overflow-hidden", className),
+				...props
+			})
+		})
+	}) });
+}
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuLinkVariants };

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

@@ -0,0 +1,72 @@
+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 = {
+  reason: NumberFieldChangeReason;
+  event: Event;
+  cancel?: () => void;
+  allowPropagation?: () => void;
+  isCanceled?: boolean;
+  isPropagationAllowed?: boolean;
+  trigger?: Element | undefined;
+};
+type NumberFieldProps = {
+  size?: ControlSize;
+  value?: number | null;
+  defaultValue?: number;
+  onValueChange?: (value: number | null, eventDetails: NumberFieldChangeEventDetails) => void;
+  onValueCommitted?: (value: number | null, eventDetails: NumberFieldChangeEventDetails) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  smallStep?: number;
+  largeStep?: number;
+  snapOnStep?: boolean;
+  allowOutOfRange?: boolean;
+  allowWheelScrub?: boolean;
+  format?: Intl.NumberFormatOptions;
+  locale?: Intl.LocalesArgument;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  form?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+  className?: string;
+  style?: CSSProperties & FieldKnobStyle;
+  children?: ReactNode;
+};
+type NumberFieldGroupProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type NumberFieldInputProps = Omit<ComponentProps<"input">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type NumberFieldIncrementProps = ComponentProps<"button"> & {
+  nativeButton?: boolean;
+} & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type NumberFieldDecrementProps = ComponentProps<"button"> & {
+  nativeButton?: boolean;
+} & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+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 };

package/dist/ui/number-field.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+//#region src/ui/number-field.tsx
+const NumberFieldSizeContext = createContext("md");
+function NumberField({ size = "md", value, defaultValue, children, ...props }) {
+	return /* @__PURE__ */ jsx(NumberFieldSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx(NumberField$1.Root, {
+			value,
+			defaultValue,
+			...props,
+			children
+		})
+	});
+}
+function NumberFieldGroup({ className, children, ...props }) {
+	const size = useContext(NumberFieldSizeContext);
+	return /* @__PURE__ */ jsx(NumberField$1.Group, {
+		"data-control-ui": "number-field",
+		"data-field-kind": "number-field",
+		"data-slot": "group",
+		"data-control": "true",
+		"data-control-family": "field",
+		"data-size": size,
+		className: cn("inline-flex items-stretch overflow-hidden", className),
+		...props,
+		children
+	});
+}
+function NumberFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Input, {
+		"data-control-ui": "number-field",
+		"data-control-family": "field",
+		"data-field-kind": "number-field",
+		"data-slot": "input",
+		className: cn("h-full min-w-0 flex-1 disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function NumberFieldDecrement({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
+		"data-control-ui": "number-field",
+		"data-control-family": "field",
+		"data-field-kind": "number-field",
+		"data-slot": "decrement",
+		"aria-label": "Decrease",
+		className: cn("flex aspect-square h-full shrink-0 cursor-pointer select-none items-center justify-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+function NumberFieldIncrement({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
+		"data-control-ui": "number-field",
+		"data-control-family": "field",
+		"data-field-kind": "number-field",
+		"data-slot": "increment",
+		"aria-label": "Increase",
+		className: cn("flex aspect-square h-full shrink-0 cursor-pointer select-none items-center justify-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+function NumberFieldScrubArea({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(NumberField$1.ScrubArea, {
+		"data-control-ui": "number-field",
+		"data-control-family": "field",
+		"data-field-kind": "number-field",
+		"data-slot": "scrub-area",
+		className: cn("cursor-ew-resize select-none", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
+			"data-control-ui": "number-field",
+			"data-control-family": "field",
+			"data-field-kind": "number-field",
+			"data-slot": "scrub-cursor",
+			children: /* @__PURE__ */ jsx(CursorGrowIcon, {})
+		})]
+	});
+}
+function MinusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M3 8h10" })
+	});
+}
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+	});
+}
+function CursorGrowIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-control-ui": "number-field",
+		"data-field-kind": "number-field",
+		"data-control-family": "field",
+		"data-slot": "drag-icon",
+		width: "26",
+		height: "14",
+		viewBox: "0 0 24 14",
+		fill: "currentColor",
+		className: "block",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M19.5 5.5 6.5 5.52V2L1 7l5.5 5V8.5h13V12L25 7l-5.5-5v3.5Z" })
+	});
+}
+//#endregion
+export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea };

package/dist/ui/pagination.d.ts

@@ -0,0 +1,26 @@
+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"> & {
+  style?: CSSProperties & PaginationKnobStyle;
+};
+type PaginationLinkProps = Omit<ComponentProps<"a"> & {
+  isActive?: boolean;
+}, "style"> & {
+  style?: CSSProperties & PaginationKnobStyle;
+};
+declare function Pagination({ className, ...props }: ComponentProps<"nav"> & {
+  style?: CSSProperties & PaginationKnobStyle;
+}): import("react").JSX.Element;
+declare function PaginationContent({ className, ...props }: ComponentProps<"ul"> & {
+  style?: CSSProperties & PaginationKnobStyle;
+}): import("react").JSX.Element;
+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 };

package/dist/ui/pagination.js

@@ -0,0 +1,77 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+//#region src/ui/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "pagination",
+		"data-control-ui": "pagination",
+		"data-control-family": "pagination",
+		"data-slot": "root",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "pagination",
+		"data-control-family": "pagination",
+		"data-slot": "content",
+		className: cn("flex flex-row items-center", className),
+		...props
+	});
+}
+function PaginationItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "pagination",
+		"data-control-family": "pagination",
+		"data-slot": "item",
+		className,
+		...props
+	});
+}
+const paginationLinkChrome = "inline-flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] cursor-pointer select-none items-center justify-center whitespace-nowrap aria-disabled:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0";
+function PaginationLink({ isActive = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		"aria-current": isActive ? "page" : void 0,
+		"data-control-ui": "pagination",
+		"data-control-family": "pagination",
+		"data-slot": "link",
+		"data-control": "true",
+		"data-active": isActive ? "true" : void 0,
+		className: cn(paginationLinkChrome, className),
+		...props
+	});
+}
+function PaginationPrevious({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+	});
+}
+function PaginationNext({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRight, {})]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "pagination",
+		"data-control-family": "pagination",
+		"data-slot": "ellipsis",
+		className: cn("flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] items-center justify-center [&>svg]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

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

@@ -0,0 +1,30 @@
+import { ControlSize } from "../control-variants.js";
+import { PhoneInputKnobStyle } from "../knob-contracts/phone-input-knobs.js";
+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;
+type CountryOptionOrder = PhoneInputCountry | "XX" | "🌐" | "|" | "..." | "…";
+type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "style" | "type" | "value"> & {
+  size?: ControlSize;
+  value?: PhoneInputValue | string;
+  defaultValue?: PhoneInputValue | string;
+  onValueChange?: (value?: PhoneInputValue) => void;
+  defaultCountry?: PhoneInputCountry;
+  countries?: PhoneInputCountry[];
+  labels?: Labels;
+  locales?: string | string[];
+  countryOptionsOrder?: CountryOptionOrder[];
+  onCountryChange?: (country?: PhoneInputCountry) => void;
+  countryCallingCodeEditable?: boolean;
+  addInternationalOption?: boolean;
+  countrySearchPlaceholder?: string;
+  countryEmptyMessage?: string;
+  "data-invalid"?: boolean | string;
+  style?: CSSProperties & PhoneInputKnobStyle;
+};
+declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
+//#endregion
+export { PhoneInput, PhoneInputCountry, PhoneInputProps, PhoneInputValue };