@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/Provider.js

@@ -1,14 +1,12 @@
 import { safeUrl } from "../safeUrl.js";
+import { TooltipProvider } from "./Tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
-var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
-	href: safeUrl(to),
-	onClick,
-	className,
-	...rest,
-	children
+var DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", {
+	href: safeUrl(href),
+	...rest
 });
 /** The provider's link slot, with a plain anchor fallback. */
 function useLink() {
@@ -46,8 +44,7 @@ var DEFAULTS = {
 			favorited: "Favorited",
 			favoriteHintOn: "Your item will be favorited when it's created",
 			favoriteHintOff: "Favorite your item when it's created",
-			filter: "Filter",
-			noOptions: "No options available"
+			filter: "Filter"
 		},
 		common: {
 			copy: "Copy",
@@ -60,7 +57,8 @@ var DEFAULTS = {
 			jsonHasErrors: "JSON has errors, please fix before saving",
 			remove: "Remove",
 			sort: "Sort",
-			userAvatar: "User avatar"
+			userAvatar: "User avatar",
+			moreInfo: "More information"
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
@@ -350,7 +348,6 @@ var DEFAULTS = {
 			copied: (label) => `Copied ${label}`,
 			couldntCopy: (label) => `Couldn't copy ${label}`,
 			moreActions: "More actions",
-			toggleState: (label, on) => `${label}, ${on ? "on" : "off"}`,
 			labelName: "name",
 			labelEmail: "email",
 			labelUsername: "username",
@@ -383,7 +380,7 @@ var DEFAULTS = {
 			perPage: "Per page",
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
-			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Showing ",
 				name,
 				" ",
@@ -398,7 +395,7 @@ var DEFAULTS = {
 					children: end
 				})
 			] }),
-			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Showing ",
 				name,
 				" from ",
@@ -613,7 +610,7 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 	]);
 	return /* @__PURE__ */ jsx(UIContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
 	});
 }
 //#endregion

package/dist/components/Radio.d.ts

@@ -0,0 +1,8 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+export { RadioGroup } from '@base-ui/react/radio-group';
+export interface RadioProps<Value> extends Omit<BaseRadio.Root.Props<Value>, 'className'> {
+    className?: string | undefined;
+}
+/** One choice in a `RadioGroup`, which holds the value. Name it with an
+ *  enclosing `<label>`. */
+export declare function Radio<Value>({ className, ...props }: RadioProps<Value>): import("react").JSX.Element;

package/dist/components/Radio.js

@@ -0,0 +1,16 @@
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Radio.tsx
+/** One choice in a `RadioGroup`, which holds the value. Name it with an
+*  enclosing `<label>`. */
+function Radio$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		...props,
+		className: clsx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border) bg-(--theme-input-bg) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-element) data-checked:bg-(--theme-element)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-element-text)" })
+	});
+}
+//#endregion
+export { Radio$1 as Radio, RadioGroup };

package/dist/components/SectionHeader.js

@@ -1,9 +1,9 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/SectionHeader.tsx
 function SectionHeader({ children, className = "", size = "md" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
+		className: clsx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
 		children
 	});
 }

package/dist/components/SegmentedControl.d.ts

@@ -5,18 +5,19 @@ export interface SegmentedOption<T extends string> {
     icon?: ReactNode;
     /** Beside the label, or in the corner when only the icon shows. */
     badge?: ReactNode;
-    /** Navigates instead of calling `onChange`, for segments that are pages. */
-    to?: string;
+    /** Navigates instead of choosing, for segments that are pages. */
+    href?: string;
     testId?: string;
 }
 /** A few mutually exclusive choices side by side, one always current. With
  *  `iconOnly` the segments stack as icons with their labels in tooltips, for
- *  a collapsed rail. */
-export declare function SegmentedControl<T extends string>({ label, options, value, onChange, fill, iconOnly, testId, }: {
+ *  a collapsed rail. Segments with `href` are pages, so the control becomes
+ *  navigation. */
+export declare function SegmentedControl<T extends string>({ label, options, value, onValueChange, fill, iconOnly, testId, }: {
     label: string;
     options: SegmentedOption<T>[];
     value: T;
-    onChange?: (value: T) => void;
+    onValueChange?: (value: T) => void;
     /** Segments share the container's width equally. */
     fill?: boolean;
     iconOnly?: boolean;

package/dist/components/SegmentedControl.js

@@ -1,20 +1,23 @@
+import { Tooltip } from "./Tooltip.js";
 import { useLink } from "./Provider.js";
-import { TOOLTIP_ID } from "./Tooltip.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/components/SegmentedControl.tsx
 var itemBase = "relative flex min-w-0 items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
 var itemCurrent = "bg-(--theme-panel-bg) theme-text shadow-sm ring-1 ring-(--theme-border)";
 var itemIdle = "theme-muted-text hover:theme-text hover:bg-(--theme-hover)";
 /** A few mutually exclusive choices side by side, one always current. With
 *  `iconOnly` the segments stack as icons with their labels in tooltips, for
-*  a collapsed rail. */
-function SegmentedControl({ label, options, value, onChange, fill = false, iconOnly = false, testId }) {
+*  a collapsed rail. Segments with `href` are pages, so the control becomes
+*  navigation. */
+function SegmentedControl({ label, options, value, onValueChange, fill = false, iconOnly = false, testId }) {
 	const Link = useLink();
-	const links = options.some((o) => o.to);
+	const links = options.some((o) => o.href);
 	const items = options.map((option) => {
 		const current = option.value === value;
-		const className = cx(itemBase, current ? itemCurrent : itemIdle, iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
+		const className = clsx(itemBase, current ? itemCurrent : itemIdle, iconOnly ? "h-8 w-8" : clsx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
 		const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 			option.icon,
 			iconOnly ? /* @__PURE__ */ jsx("span", {
@@ -29,39 +32,40 @@ function SegmentedControl({ label, options, value, onChange, fill = false, iconO
 				children: option.badge
 			}) : option.badge)
 		] });
-		const tooltip = iconOnly ? {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": option.label,
-			"data-tooltip-place": "right"
-		} : {};
-		return option.to ? /* @__PURE__ */ jsx(Link, {
-			to: option.to,
-			"aria-current": current ? "page" : void 0,
-			"data-testid": option.testId,
-			className,
-			...tooltip,
-			children: content
-		}, option.value) : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-pressed": current,
-			"data-testid": option.testId,
-			onClick: () => onChange?.(option.value),
-			className,
-			...tooltip,
-			children: content
+		return /* @__PURE__ */ jsx(Tooltip, {
+			content: option.label,
+			side: "right",
+			disabled: !iconOnly,
+			children: option.href ? /* @__PURE__ */ jsx(Link, {
+				href: option.href,
+				"aria-current": current ? "page" : void 0,
+				"data-testid": option.testId,
+				className,
+				children: content
+			}) : /* @__PURE__ */ jsx(Toggle, {
+				value: option.value,
+				"data-testid": option.testId,
+				className,
+				children: content
+			})
 		}, option.value);
 	});
-	const groupClassName = cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
-	return links ? /* @__PURE__ */ jsx("nav", {
+	const groupClassName = clsx("gap-0.5", iconOnly ? "flex flex-col items-center" : clsx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
+	if (links) return /* @__PURE__ */ jsx("nav", {
 		"aria-label": label,
 		"data-testid": testId,
 		className: groupClassName,
 		children: items
-	}) : /* @__PURE__ */ jsx("div", {
-		role: "group",
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup, {
 		"aria-label": label,
 		"data-testid": testId,
 		className: groupClassName,
+		orientation: iconOnly ? "vertical" : "horizontal",
+		value: [value],
+		onValueChange: ([next]) => {
+			if (next !== void 0) onValueChange?.(next);
+		},
 		children: items
 	});
 }

package/dist/components/Select.d.ts

@@ -0,0 +1,27 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { ReactElement, ReactNode } from 'react';
+export interface SelectItem<Value> {
+    value: Value;
+    label: string;
+    /** A second line under the label, such as what an option does. */
+    description?: string | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'items' | 'children'> & {
+    items: readonly SelectItem<Value>[];
+    placeholder?: string | undefined;
+    /** Applied to the trigger. */
+    className?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Renders the field as this button, for compact pickers such as a toolbar pill. The
+     *  button shows the selection itself; `placeholder` and `className` then go unused. */
+    trigger?: ReactElement | undefined;
+    /** A hint on the trigger button. */
+    triggerTooltip?: ReactNode;
+};
+/** Picks one value, or several with `multiple`, from a short list. Use
+ *  Combobox when the list is long enough to need filtering. */
+export declare function Select<Value, Multiple extends boolean | undefined = false>({ items, placeholder, className, 'aria-label': ariaLabel, 'aria-describedby': describedBy, 'aria-invalid': invalid, trigger, triggerTooltip, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;

package/dist/components/Select.js

@@ -0,0 +1,78 @@
+import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { Tooltip } from "./Tooltip.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/Select.tsx
+var triggerClassName = clsx("flex w-full items-center justify-between gap-2 rounded-md border border-(--theme-border) bg-(--theme-input-bg) py-2 pl-3 pr-2 text-left text-sm text-(--theme-app) cursor-pointer outline-none", "focus-visible:border-(--theme-element) focus-visible:ring-1 focus-visible:ring-(--theme-element)", "aria-invalid:border-(--theme-error) data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-input-disabled-text)");
+/** Picks one value, or several with `multiple`, from a short list. Use
+*  Combobox when the list is long enough to need filtering. */
+function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": invalid, trigger, triggerTooltip, ...rootProps }) {
+	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
+	const triggerProps = {
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid || void 0
+	};
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items,
+		...rootProps,
+		children: [trigger ? /* @__PURE__ */ jsx(Tooltip, {
+			content: triggerTooltip,
+			children: /* @__PURE__ */ jsx(Select.Trigger, {
+				...triggerProps,
+				render: trigger
+			})
+		}) : /* @__PURE__ */ jsxs(Select.Trigger, {
+			...triggerProps,
+			className: clsx(triggerClassName, className),
+			children: [/* @__PURE__ */ jsx(Select.Value, {
+				placeholder,
+				className: "truncate data-placeholder:text-(--theme-muted-text-color)",
+				children: rootProps.multiple ? (values) => values.length > 0 ? values.map(labelOf).join(", ") : placeholder : void 0
+			}), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "shrink-0 text-(--theme-muted-text-color)",
+				children: /* @__PURE__ */ jsx(FaAngleDown, { "aria-hidden": "true" })
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: portalContainer(),
+			children: /* @__PURE__ */ jsx(Select.Positioner, {
+				alignItemWithTrigger: false,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Select.Popup, {
+					className: clsx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
+					children: /* @__PURE__ */ jsx(Select.List, {
+						className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
+						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+							value: item.value,
+							disabled: item.disabled,
+							className: clsx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+							children: [
+								/* @__PURE__ */ jsx(Select.ItemIndicator, {
+									className: "col-start-1",
+									children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "col-start-2 flex min-w-0 items-center gap-2",
+									children: [item.icon, /* @__PURE__ */ jsx(Select.ItemText, {
+										className: "truncate",
+										children: item.label
+									})]
+								}),
+								item.description && /* @__PURE__ */ jsx("span", {
+									className: "col-start-2 text-xs text-(--theme-muted-text-color)",
+									children: item.description
+								})
+							]
+						}, String(item.value)))
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { Select$1 as Select };

package/dist/components/SettingModeOption.d.ts

@@ -1,11 +1,8 @@
-/** A labeled + described radio option row, used inside a SettingsCard to pick
- * between modes (e.g. default vs custom). Stacked rows share the card's
- * dividers via `isFirst`. */
-export declare function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled, }: {
-    /** Radio group name; shared across the options of one picker. */
-    name: string;
-    checked: boolean;
-    onSelect: () => void;
+/** A labeled + described choice in a SettingsCard, picking between modes (e.g.
+ * default vs custom). Stack them in a `RadioGroup`, which holds the value;
+ * stacked rows share the card's dividers via `isFirst`. */
+export declare function SettingModeOption({ value, label, description, isFirst, disabled, }: {
+    value: string;
     label: string;
     description: string;
     isFirst?: boolean;

package/dist/components/SettingModeOption.js

@@ -1,19 +1,17 @@
-import cx from "classnames";
+import { Radio } from "./Radio.js";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingModeOption.tsx
-/** A labeled + described radio option row, used inside a SettingsCard to pick
-* between modes (e.g. default vs custom). Stacked rows share the card's
-* dividers via `isFirst`. */
-function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled }) {
+/** A labeled + described choice in a SettingsCard, picking between modes (e.g.
+* default vs custom). Stack them in a `RadioGroup`, which holds the value;
+* stacked rows share the card's dividers via `isFirst`. */
+function SettingModeOption({ value, label, description, isFirst, disabled }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "radio",
-			name,
-			checked,
-			onChange: onSelect,
+		className: clsx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
+		children: [/* @__PURE__ */ jsx(Radio, {
+			value,
 			disabled,
-			className: "mt-0.5 w-4 h-4 theme-input shrink-0"
+			className: "mt-0.5"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsx("div", {

package/dist/components/SettingRow.js

@@ -1,11 +1,11 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingRow.tsx
 function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick }) {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
-		className: cx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
+		className: clsx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-y-1",
 			children: [/* @__PURE__ */ jsx("label", {
@@ -17,14 +17,14 @@ function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick
 				children: helpText
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("min-w-0", !fill && "flex items-center justify-end"),
+			className: clsx("min-w-0", !fill && "flex items-center justify-end"),
 			children
 		})]
 	});
 }
 function SettingSection({ title, isFirst }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
+		className: clsx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
 		children: /* @__PURE__ */ jsx("h2", {
 			className: "font-semibold text-sm uppercase tracking-wider theme-muted-text",
 			children: title

package/dist/components/SettingsCard.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
 /**
@@ -8,11 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function SettingsCard({ title, description, action, actionAlign = "adjacent", overflowVisible, children, className }) {
 	return /* @__PURE__ */ jsxs("section", {
-		className: cx("mt-10 first:mt-0", className),
+		className: clsx("mt-10 first:mt-0", className),
 		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
 			className: "mb-3 px-0.5",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
+				className: clsx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
 				children: [title && /* @__PURE__ */ jsx("h2", {
 					className: "text-[15px] font-semibold theme-text leading-none",
 					children: title
@@ -22,7 +22,7 @@ function SettingsCard({ title, description, action, actionAlign = "adjacent", ov
 				children: description
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+			className: clsx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
 			children
 		})]
 	});

package/dist/components/SettingsGroup.js

@@ -1,9 +1,9 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsGroup.tsx
 function SettingsGroup({ title, children, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("mt-8 first:mt-0", className),
+		className: clsx("mt-8 first:mt-0", className),
 		children: [title && /* @__PURE__ */ jsx("h2", {
 			className: "text-[11px] font-semibold uppercase tracking-wider theme-muted-text mb-2 px-1",
 			children: title

package/dist/components/Sort.js

@@ -1,7 +1,7 @@
-import { useStrings } from "./Provider.js";
 import { TiArrowSortedDown } from "../icons/ti/TiArrowSortedDown.js";
 import { TiArrowSortedUp } from "../icons/ti/TiArrowSortedUp.js";
 import { TiArrowUnsorted } from "../icons/ti/TiArrowUnsorted.js";
+import { useStrings } from "./Provider.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Sort.tsx
 var SortIcon = ({ currentlySorted, currentDirection, name }) => {

package/dist/components/StatusBadge.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/StatusBadge.tsx
 var variantStyles = {
@@ -32,26 +32,26 @@ function statusTextClass(variant) {
 }
 function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		className: clsx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
 		children: [
 			pulse && /* @__PURE__ */ jsxs("span", {
 				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+				children: [/* @__PURE__ */ jsx("span", { className: clsx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: clsx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
 			}),
-			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
+			dot && !pulse && /* @__PURE__ */ jsx("span", { className: clsx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
 			children
 		]
 	});
 }
 function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: cx("relative inline-flex", className),
+		className: clsx("relative inline-flex", className),
 		style: {
 			width: size,
 			height: size
 		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: clsx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: clsx("relative inline-flex rounded-full", pulseColors[variant]),
 			style: {
 				width: size,
 				height: size

package/dist/components/StatusIcons.js

@@ -1,18 +1,18 @@
 import { BiError } from "../icons/bi/BiError.js";
 import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
 import { FaCircleNotch } from "../icons/fa/FaCircleNotch.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/StatusIcons.tsx
 function SuccessCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: cx(colored && "text-green-500", className) });
+	return /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: clsx(colored && "text-green-500", className) });
 }
 function ErrorCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(BiError, { className: cx(colored && "text-red-400", className) });
+	return /* @__PURE__ */ jsx(BiError, { className: clsx(colored && "text-red-400", className) });
 }
 function LoaderIcon({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FaCircleNotch, {
-		className: cx("animate-spin", className),
+		className: clsx("animate-spin", className),
 		...props
 	});
 }

package/dist/components/Switch.d.ts

@@ -0,0 +1,22 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+declare const sizes: {
+    sm: {
+        root: string;
+        thumb: string;
+    };
+    md: {
+        root: string;
+        thumb: string;
+    };
+};
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'children'> {
+    size?: keyof typeof sizes;
+    className?: string | undefined;
+}
+/**
+ * An on/off control. Name it with an enclosing `<label>`, or `aria-label`. A
+ * sibling `<label htmlFor>` needs `nativeButton render={<button />}`, which
+ * puts the id on the button the label points at.
+ */
+export declare function Switch({ size, className, ...props }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/components/Switch.js

@@ -0,0 +1,28 @@
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/Switch.tsx
+var sizes = {
+	sm: {
+		root: "h-5 w-9",
+		thumb: "size-4 data-checked:translate-x-4"
+	},
+	md: {
+		root: "h-6 w-11",
+		thumb: "size-5 data-checked:translate-x-5"
+	}
+};
+/**
+* An on/off control. Name it with an enclosing `<label>`, or `aria-label`. A
+* sibling `<label htmlFor>` needs `nativeButton render={<button />}`, which
+* puts the id on the button the label points at.
+*/
+function Switch$1({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		...props,
+		className: clsx("inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border) transition-colors duration-200 cursor-pointer outline-none", "data-checked:bg-(--theme-element)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: clsx("rounded-full bg-white shadow-sm transition-transform duration-200", sizes[size].thumb) })
+	});
+}
+//#endregion
+export { Switch$1 as Switch };