xiod-ui 1.0.0

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

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+//#region src/components/navigation-menu.d.ts
+declare function NavigationMenu({ className, ...props }: NavigationMenu$1.Root.Props): React$1.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: NavigationMenu$1.List.Props): React$1.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: NavigationMenu$1.Item.Props): React$1.JSX.Element;
+declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenu$1.Trigger.Props): React$1.JSX.Element;
+declare function NavigationMenuIcon({ className, ...props }: NavigationMenu$1.Icon.Props): React$1.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: NavigationMenu$1.Content.Props): React$1.JSX.Element;
+declare function NavigationMenuLink({ className, render, ...props }: useRender.ComponentProps<"a"> & {
+  active?: boolean;
+}): React$1.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: NavigationMenu$1.Viewport.Props): React$1.JSX.Element;
+declare const NavigationMenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").NavigationMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function NavigationMenuPopup({ children, className, sideOffset, align, alignOffset, side, anchor, hideArrow, ...props }: NavigationMenu$1.Popup.Props & {
+  align?: NavigationMenu$1.Positioner.Props["align"];
+  sideOffset?: NavigationMenu$1.Positioner.Props["sideOffset"];
+  alignOffset?: NavigationMenu$1.Positioner.Props["alignOffset"];
+  side?: NavigationMenu$1.Positioner.Props["side"];
+  anchor?: NavigationMenu$1.Positioner.Props["anchor"];
+  hideArrow?: boolean;
+}): React$1.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIcon, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuTrigger, NavigationMenuViewport };

package/dist/components/navigation-menu.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+//#region src/components/navigation-menu.tsx
+function NavigationMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
+		className: cn("relative flex max-w-max flex-1 items-center justify-center", className),
+		"data-slot": "navigation-menu",
+		...props
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		className: cn("group flex flex-1 list-none items-center justify-center space-x-1", className),
+		"data-slot": "navigation-menu-list",
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		className: cn("relative", className),
+		"data-slot": "navigation-menu-item",
+		...props
+	});
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
+		className: cn("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:h-8", className),
+		"data-slot": "navigation-menu-trigger",
+		...props,
+		children
+	});
+}
+function NavigationMenuIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Icon, {
+		className: cn("relative ml-1 size-3 transition duration-200 data-popup-open:rotate-180 [&_svg:not([class*='size-'])]:size-full [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "navigation-menu-icon",
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-full" })
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		className: cn("left-0 top-0 w-[calc(100vw-40px)] min-w-[280px] sm:min-w-[400px] p-4 transition-[opacity,transform,translate] duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] sm:w-max", className),
+		"data-slot": "navigation-menu-content",
+		...props
+	});
+}
+function NavigationMenuLink({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		"data-slot": "navigation-menu-link"
+	};
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, { render: useRender({
+		defaultTagName: "a",
+		props: mergeProps(defaultProps, props),
+		render
+	}) });
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: "fill-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: "fill-border"
+		})]
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
+		className: cn("relative h-full w-full overflow-hidden", className),
+		"data-slot": "navigation-menu-viewport",
+		...props
+	});
+}
+const NavigationMenuPortal = NavigationMenu$1.Portal;
+function NavigationMenuPopup({ children, className, sideOffset = 10, align = "center", alignOffset, side = "bottom", anchor, hideArrow = false, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-200 ease-in-out z-50 before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5",
+		"data-slot": "navigation-menu-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(NavigationMenu$1.Popup, {
+			className: cn("relative origin-(--transform-origin) w-(--popup-width) h-(--popup-height) rounded-xl border bg-popover text-popover-foreground shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)] transition-[opacity,transform,width,height,scale,translate] duration-200 ease-in-out data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0", className),
+			"data-slot": "navigation-menu-popup",
+			...props,
+			children: [!hideArrow && /* @__PURE__ */ jsx(NavigationMenu$1.Arrow, {
+				className: "z-10 flex transition-[left] duration-200 ease-in-out data-[side=bottom]:top-[-9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180",
+				children: /* @__PURE__ */ jsx(ArrowSvg, {})
+			}), children]
+		})
+	}) });
+}
+function NavigationMenuIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("hidden", className),
+		"data-slot": "navigation-menu-indicator",
+		...props
+	});
+}
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIcon, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuTrigger, NavigationMenuViewport };

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

@@ -0,0 +1,15 @@
+import * as React$1 from "react";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+//#region src/components/number-field.d.ts
+declare function NumberField({ id, className, size, ...props }: NumberField$1.Root.Props & {
+  size?: "sm" | "default" | "lg";
+}): React$1.JSX.Element;
+declare function NumberFieldGroup({ className, ...props }: NumberField$1.Group.Props): React$1.JSX.Element;
+declare function NumberFieldDecrement({ className, ...props }: NumberField$1.Decrement.Props): React$1.JSX.Element;
+declare function NumberFieldIncrement({ className, ...props }: NumberField$1.Increment.Props): React$1.JSX.Element;
+declare function NumberFieldInput({ className, ...props }: NumberField$1.Input.Props): React$1.JSX.Element;
+declare function NumberFieldScrubArea({ className, label, ...props }: NumberField$1.ScrubArea.Props & {
+  label: string;
+}): React$1.JSX.Element;
+//#endregion
+export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea };

package/dist/components/number-field.js

@@ -0,0 +1,86 @@
+"use client";
+import { Label } from "./label.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { MinusSign } from "xiod-icons/icons/MinusSign";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+import { PlusSign } from "xiod-icons/icons/PlusSign";
+//#region src/components/number-field.tsx
+const NumberFieldContext = React$1.createContext(null);
+function NumberField({ id, className, size = "default", ...props }) {
+	const generatedId = React$1.useId();
+	const fieldId = id ?? generatedId;
+	const contextValue = React$1.useMemo(() => ({ fieldId }), [fieldId]);
+	return /* @__PURE__ */ jsx(NumberFieldContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(NumberField$1.Root, {
+			className: cn("flex w-full flex-col items-start gap-2", className),
+			"data-size": size,
+			"data-slot": "number-field",
+			id: fieldId,
+			...props
+		})
+	});
+}
+function NumberFieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Group, {
+		className: cn("relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none", className),
+		"data-slot": "number-field-group",
+		...props
+	});
+}
+function NumberFieldDecrement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
+		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors focus-visible:z-10 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+		"data-slot": "number-field-decrement",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusSign, {})
+	});
+}
+function NumberFieldIncrement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
+		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors focus-visible:z-10 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+		"data-slot": "number-field-increment",
+		...props,
+		children: /* @__PURE__ */ jsx(PlusSign, {})
+	});
+}
+function NumberFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Input, {
+		className: cn("h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5", className),
+		"data-slot": "number-field-input",
+		...props
+	});
+}
+function NumberFieldScrubArea({ className, label, ...props }) {
+	const context = React$1.useContext(NumberFieldContext);
+	if (!context) throw new Error("NumberFieldScrubArea must be used within a NumberField component for accessibility.");
+	return /* @__PURE__ */ jsxs(NumberField$1.ScrubArea, {
+		className: cn("flex cursor-ew-resize", className),
+		"data-slot": "number-field-scrub-area",
+		...props,
+		children: [/* @__PURE__ */ jsx(Label, {
+			className: "cursor-ew-resize",
+			htmlFor: context.fieldId,
+			children: label
+		}), /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
+			className: "drop-shadow-[0_1px_1px_#0008] filter",
+			children: /* @__PURE__ */ jsx(CursorGrowIcon, {})
+		})]
+	});
+}
+function CursorGrowIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		fill: "black",
+		height: "14",
+		stroke: "white",
+		viewBox: "0 0 24 14",
+		width: "26",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" })
+	});
+}
+//#endregion
+export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea };

package/dist/components/option-picker.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+//#region src/components/option-picker.d.ts
+export interface Option {
+  id: string;
+  label: string;
+  icon: React$1.ComponentType<React$1.ComponentProps<"svg">>;
+}
+export interface OptionPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: Option[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  triggerClassName?: string;
+  popupClassName?: string;
+}
+declare function OptionPicker({ options, value, defaultValue, onChange, className, triggerClassName, popupClassName, ...props }: OptionPickerProps): React$1.JSX.Element;
+//#endregion
+export { OptionPicker };

package/dist/components/option-picker.js

@@ -0,0 +1,89 @@
+"use client";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/option-picker.tsx
+function OptionPicker({ options, value, defaultValue, onChange, className, triggerClassName, popupClassName, ...props }) {
+	const [open, setOpen] = React$1.useState(false);
+	const displayOptions = React$1.useMemo(() => {
+		if (process.env.NODE_ENV !== "production" && options.length > 5) console.warn("OptionPicker: Only a maximum of 5 options are allowed. Excess options will be truncated.");
+		return options.slice(0, 5);
+	}, [options]);
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? displayOptions[0]?.id);
+	const selectedId = value !== void 0 ? value : internalValue;
+	const selectedOption = displayOptions.find((opt) => opt.id === selectedId) ?? displayOptions[0];
+	const handleSelect = (id) => {
+		if (value === void 0) setInternalValue(id);
+		onChange?.(id);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-block [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "option-picker",
+		...props,
+		children: /* @__PURE__ */ jsxs(Popover.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					className: cn(" select-none outline-none rounded-3xl", open && "bg-accent/80", triggerClassName)
+				}),
+				"data-slot": "option-picker-trigger",
+				children: [selectedOption && /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(selectedOption.icon, { className: "size-4.5 sm:size-4 text-muted-foreground/80 dark:text-muted-foreground transition-colors duration-200" }), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold text-foreground/90 dark:text-foreground",
+						children: selectedOption.label
+					})]
+				}, selectedOption.id), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 sm:size-3.5 text-muted-foreground/80 dark:text-muted-foreground transition-transform duration-200", open && "rotate-180") })]
+			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				side: "top",
+				sideOffset: 6,
+				align: "center",
+				className: "z-50 perspective-distant transform-3d",
+				"data-slot": "option-picker-positioner",
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					className: cn("relative flex min-w-max gap-1 rounded-full border border-border bg-popover p-[calc(--spacing(1)-1px)] whitespace-nowrap origin-bottom transform-3d transition-[opacity,transform,filter] duration-300 cubic-bezier(0.16, 1, 0.3, 1) opacity-100 scale-100 rotate-x-0 -translate-y-1 blur-none starting:opacity-0 starting:scale-105 starting:transform-[rotateX(-70deg)_translateY(10px)] starting:blur-sm shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", popupClassName),
+					"data-slot": "option-picker-popup",
+					children: [displayOptions.map((option) => {
+						const isActive = selectedOption.id === option.id;
+						return /* @__PURE__ */ jsxs(Button, {
+							onClick: () => handleSelect(option.id),
+							variant: isActive ? "default" : "ghost",
+							size: "xs",
+							className: "rounded-full select-none cursor-pointer px-2.5 gap-1.5 h-8",
+							title: `Set as ${option.label}`,
+							"aria-label": `Select ${option.label}`,
+							"data-slot": "option-picker-item",
+							children: [/* @__PURE__ */ jsx(option.icon, { className: "size-4 sm:size-3.5" }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs font-semibold",
+								children: option.label
+							})]
+						}, option.id);
+					}), /* @__PURE__ */ jsx(Popover.Arrow, {
+						className: "z-10 flex data-[side=bottom]:top-[-9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180",
+						children: /* @__PURE__ */ jsxs("svg", {
+							width: "20",
+							height: "10",
+							viewBox: "0 0 20 10",
+							fill: "none",
+							children: [/* @__PURE__ */ jsx("path", {
+								d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+								className: "fill-popover"
+							}), /* @__PURE__ */ jsx("path", {
+								d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+								className: "fill-border"
+							})]
+						})
+					})]
+				})
+			}) })]
+		})
+	});
+}
+//#endregion
+export { OptionPicker };

package/dist/components/orb.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/orb.d.ts
+export type OrbState = "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "pulsing" | "vortex" | "atom" | "helix" | "radar" | "galaxy" | "torus" | "quantum" | "network" | "supernova" | "thinking" | "analyzing" | "processing" | "pulse" | "beacon" | "swarm" | "nucleus" | "dna" | "sonar" | "nebula" | "spiral" | "donut" | "ring_torus" | "matrix" | "cube" | "constellation" | "nodes" | "burst" | "spark";
+export type OrbSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type OrbTheme = "auto" | "dark" | "light";
+export declare const orbVariants: (props?: ({
+  variant?: "default" | "diamond" | "expressive" | "sharp" | "ring" | "classic" | "cross" | null | undefined;
+  intent?: "default" | "destructive" | "info" | "secondary" | "success" | "warning" | "primary" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
+  glow?: "none" | "subtle" | "intense" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface OrbProps extends useRender.ComponentProps<"div">, VariantProps<typeof orbVariants> {
+  /** AI status state / animation preset @default "working" */
+  state?: OrbState;
+  /** Explicit pixel size override @default calculated from CVA size */
+  pixelSize?: number;
+  /** Theme mode resolution @default "auto" */
+  theme?: OrbTheme;
+  /** Speed multiplier @default 1 */
+  speed?: number;
+  /** Pause animation loop @default false */
+  paused?: boolean;
+  /** Custom ink color override (CSS hex, rgb, or color) */
+  color?: string;
+  /** Interactive hover speed boost @default false */
+  interactive?: boolean;
+  /** Accessibility label */
+  "aria-label"?: string;
+}
+declare function Orb({ className, variant, intent, size, glow, state, pixelSize, theme, speed, paused, color, interactive, render, "aria-label": ariaLabel, ...props }: OrbProps): React$1.ReactElement;
+export interface OrbLabelProps extends useRender.ComponentProps<"span"> {}
+declare function OrbLabel({ className, render, ...props }: OrbLabelProps): React$1.ReactElement;
+export interface OrbBadgeProps extends useRender.ComponentProps<"div"> {}
+declare function OrbBadge({ className, render, ...props }: OrbBadgeProps): React$1.ReactElement;
+//#endregion
+export { Orb, OrbBadge, OrbLabel };