@jonmilner/ui 0.0.0-stage → 0.1.0

package/dist/Menu/index.d.mts

@@ -0,0 +1,34 @@
+import { StyleProps } from "../Box/index.mjs";
+import { MenuTrigger, MenuTriggerProps } from "./client.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/Menu/index.d.ts
+type PartProps<P> = StyleProps & Omit<P, "render" | "className" | "style" | keyof StyleProps> & {
+  className?: string;
+  style?: CSSProperties;
+};
+export type MenuProps = Pick<Menu$1.Root.Props, "open" | "defaultOpen" | "onOpenChange" | "modal" | "disabled" | "loopFocus"> & {
+  children?: ReactNode;
+};
+export type MenuPopupProps = PartProps<Menu$1.Popup.Props> & Pick<Menu$1.Positioner.Props, "side" | "align">;
+export type MenuItemProps = PartProps<Menu$1.Item.Props> & {
+  variant?: "neutral" | "danger";
+};
+export type MenuSeparatorProps = PartProps<Menu$1.Separator.Props>;
+export type MenuGroupProps = PartProps<Menu$1.Group.Props> & {
+  label: ReactNode;
+};
+declare function MenuRoot({ children, ...props }: MenuProps): import("react").JSX.Element;
+declare function MenuPopup({ side, align, backgroundColor, borderRadius, boxShadow, padding, className, style, ...props }: MenuPopupProps): import("react").JSX.Element;
+declare function MenuItem({ variant, display, alignItems, gap, minBlockSize, paddingInline, borderRadius, color, className, style, children, ...props }: MenuItemProps): import("react").JSX.Element;
+declare function MenuSeparator({ marginBlock, marginInline, className, style, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+declare function MenuGroup({ label, className, style, children, ...props }: MenuGroupProps): import("react").JSX.Element;
+export declare const Menu: typeof MenuRoot & {
+  Trigger: typeof MenuTrigger;
+  Popup: typeof MenuPopup;
+  Item: typeof MenuItem;
+  Separator: typeof MenuSeparator;
+  Group: typeof MenuGroup;
+};
+//#endregion
+export type { MenuTriggerProps };

package/dist/Menu/index.mjs

@@ -0,0 +1,107 @@
+import { join as e } from "../styles/join.mjs";
+import { splitStyleProps as t } from "../styles/split-style-props.mjs";
+import { Box as n } from "../Box/index.mjs";
+import { Text as r } from "../Text/index.mjs";
+import { PopupScope as i } from "../popup/client.mjs";
+import { MenuPortal as a, MenuTrigger as o } from "./client.mjs";
+import { item as s, popup as c, separator as l } from "./Menu.css.mjs";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Children as f } from "react";
+import { Menu as p } from "@base-ui/react/menu";
+//#region src/Menu/index.tsx
+function m({ children: e, ...t }) {
+	return /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(p.Root, {
+		...t,
+		children: e
+	}) });
+}
+function h({ side: r = "bottom", align: i = "start", backgroundColor: o = "bgRaised", borderRadius: s = "med", boxShadow: l = "med", padding: d = "4", className: f, style: m, ...h }) {
+	let [g, _] = t(h);
+	return /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u(p.Positioner, {
+		align: i,
+		collisionPadding: 8,
+		render: /* @__PURE__ */ u(n, { zIndex: "popover" }),
+		side: r,
+		sideOffset: 4,
+		children: /* @__PURE__ */ u(p.Popup, {
+			..._,
+			render: /* @__PURE__ */ u(n, {
+				backgroundColor: o,
+				borderRadius: s,
+				boxShadow: l,
+				padding: d,
+				...g,
+				className: e(c, f),
+				style: m
+			})
+		})
+	}) });
+}
+function g({ variant: i = "neutral", display: a = "flex", alignItems: o = "center", gap: c = "8", minBlockSize: l = "sm", paddingInline: d = "12", borderRadius: m = "sm", color: h = i === "danger" ? "danger" : "fg", className: g, style: _, children: v, ...y }) {
+	let [b, x] = t(y);
+	return /* @__PURE__ */ u(p.Item, {
+		...x,
+		render: /* @__PURE__ */ u(n, {
+			display: a,
+			alignItems: o,
+			gap: c,
+			minBlockSize: l,
+			paddingInline: d,
+			borderRadius: m,
+			color: h,
+			...b,
+			className: e(s, g),
+			style: _
+		}),
+		children: f.map(v, (e) => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u(r, {
+			as: "span",
+			font: "label",
+			size: "sm",
+			children: e
+		}) : e)
+	});
+}
+function _({ marginBlock: r = "4", marginInline: i = "8", className: a, style: o, ...s }) {
+	let [c, d] = t(s);
+	return /* @__PURE__ */ u(p.Separator, {
+		...d,
+		render: /* @__PURE__ */ u(n, {
+			marginBlock: r,
+			marginInline: i,
+			...c,
+			className: e(l, a),
+			style: o
+		})
+	});
+}
+function v({ label: e, className: i, style: a, children: o, ...s }) {
+	let [c, l] = t(s);
+	return /* @__PURE__ */ d(p.Group, {
+		...l,
+		render: /* @__PURE__ */ u(n, {
+			...c,
+			className: i,
+			style: a
+		}),
+		children: [/* @__PURE__ */ u(p.GroupLabel, {
+			render: /* @__PURE__ */ u(r, {
+				as: "div",
+				color: "fgMuted",
+				font: "label",
+				paddingBlock: "8",
+				paddingInline: "12",
+				size: "xs"
+			}),
+			children: e
+		}), o]
+	});
+}
+var y = Object.assign(m, {
+	Trigger: o,
+	Popup: h,
+	Item: g,
+	Separator: _,
+	Group: v
+});
+//#endregion
+export { y as Menu };

package/dist/MultiSelect/MultiSelect.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}._1seauxl0>span{flex:auto;justify-items:stretch;min-inline-size:0}._1seauxl0>span>span{min-inline-size:0}._1seauxl0>span>span>span:first-child{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}

package/dist/MultiSelect/MultiSelect.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./MultiSelect.css";
+/* empty css                               */
+/* empty css                            */
+//#region src/MultiSelect/MultiSelect.css.ts
+var e = "_1seauxl0", t = "_1seauxl1", n = "_1seauxl2", r = "_1seauxl3", i = "_1seauxl4", a = "_1seauxl5", o = "_1seauxl6", s = "_1seauxl7";
+//#endregion
+export { s as check, i as count, o as item, r as labels, a as popup, n as summary, e as trigger, t as value };

package/dist/MultiSelect/client.d.mts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+//#region src/MultiSelect/client.d.ts
+export type Option = {
+  disabled?: boolean;
+  label: string;
+  value: string;
+};
+//#endregion

package/dist/MultiSelect/client.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { Box as e } from "../Box/index.mjs";
+import { PopupScope as t, triggerElement as n, usePopupScope as r } from "../popup/client.mjs";
+import { Field as i } from "../Field/index.mjs";
+import { ChevronDownIcon as a } from "../icons/ChevronDownIcon.mjs";
+import { labels as o, popup as s, summary as c, trigger as l, value as u } from "./MultiSelect.css.mjs";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createContext as p, use as m, useId as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Select as b } from "@base-ui/react/select";
+//#region src/MultiSelect/client.tsx
+function x({ options: e, placeholder: t, countLabel: i, disabled: o }) {
+	let { ref: s } = r(), c = _(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+	return /* @__PURE__ */ d(b.Trigger, {
+		disabled: o,
+		ref: s,
+		render: n({
+			variant: "secondary",
+			iconEnd: a,
+			className: l,
+			children: /* @__PURE__ */ d(b.Value, {
+				className: u,
+				placeholder: t,
+				children: (e) => e.length > 0 ? /* @__PURE__ */ d(S, {
+					count: i.replaceAll("{count}", String(e.length)),
+					labels: e.map((e) => c.get(e) ?? e)
+				}) : t
+			})
+		})
+	});
+}
+function S({ labels: t, count: n }) {
+	let r = v(null), [i, a] = y(!0), s = t.join(", ");
+	g(() => {
+		let e = r.current;
+		if (!e) return;
+		let t = () => a(e.scrollWidth <= e.clientWidth);
+		t(), document.fonts?.ready.then(t);
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [s]);
+	let l = !i && t.length > 1;
+	return /* @__PURE__ */ f(e, {
+		as: "span",
+		className: c,
+		children: [/* @__PURE__ */ d(e, {
+			"aria-hidden": l || void 0,
+			as: "span",
+			className: o,
+			ref: r,
+			children: s
+		}), l && /* @__PURE__ */ d(e, {
+			as: "span",
+			className: "_1seauxl4",
+			children: n
+		})]
+	});
+}
+var C = p(void 0);
+function w({ children: e }) {
+	return /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(C, {
+		value: h(),
+		children: e
+	}) });
+}
+function T({ children: e }) {
+	return /* @__PURE__ */ d(i.Label, {
+		id: m(C),
+		nativeLabel: !1,
+		children: e
+	});
+}
+function E({ children: t }) {
+	return /* @__PURE__ */ d(b.Popup, {
+		"aria-labelledby": m(C),
+		render: /* @__PURE__ */ d(e, {
+			backgroundColor: "bgRaised",
+			borderRadius: "med",
+			boxShadow: "med",
+			className: s,
+			padding: "4"
+		}),
+		children: t
+	});
+}
+function D({ children: e }) {
+	let { container: t } = r();
+	return /* @__PURE__ */ d(b.Portal, {
+		container: t,
+		children: e
+	});
+}
+//#endregion
+export { T as MultiSelectLabel, E as MultiSelectPopup, D as MultiSelectPortal, w as MultiSelectScope, x as MultiSelectTrigger };

package/dist/MultiSelect/index.d.mts

@@ -0,0 +1,23 @@
+import { StyleProps } from "../Box/index.mjs";
+import { Option } from "./client.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/MultiSelect/index.d.ts
+export type MultiSelectOption = Option;
+export type MultiSelectProps = StyleProps & {
+  className?: string;
+  countLabel?: string;
+  defaultValue?: readonly string[];
+  description?: ReactNode;
+  disabled?: boolean;
+  error?: ReactNode;
+  label: ReactNode;
+  name?: string;
+  onValueChange?: (value: string[]) => void;
+  options: readonly MultiSelectOption[];
+  placeholder?: string;
+  required?: boolean;
+  style?: CSSProperties;
+  value?: readonly string[];
+};
+export declare function MultiSelect({ options, value, defaultValue, onValueChange, label, description, error, placeholder, countLabel, disabled, required, name, className, style, ...atoms }: MultiSelectProps): import("react").JSX.Element;
+//#endregion

package/dist/MultiSelect/index.mjs

@@ -0,0 +1,75 @@
+import { Box as e } from "../Box/index.mjs";
+import { Text as t } from "../Text/index.mjs";
+import { CheckIcon as n } from "../icons/CheckIcon.mjs";
+import { Field as r } from "../Field/index.mjs";
+import { check as i, item as a } from "./MultiSelect.css.mjs";
+import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, MultiSelectScope as l, MultiSelectTrigger as u } from "./client.mjs";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Select as p } from "@base-ui/react/select";
+//#region src/MultiSelect/index.tsx
+function m({ options: m, value: h, defaultValue: g, onValueChange: _, label: v, description: y, error: b, placeholder: x = "Select", countLabel: S = "{count} selected", disabled: C = !1, required: w = !1, name: T, className: E, style: D, ...O }) {
+	return /* @__PURE__ */ f(r, {
+		...O,
+		className: E,
+		disabled: C,
+		invalid: b != null && b !== !1 && b !== "",
+		style: D,
+		children: [
+			/* @__PURE__ */ d(l, { children: /* @__PURE__ */ f(p.Root, {
+				defaultValue: g,
+				disabled: C,
+				multiple: !0,
+				name: T,
+				onValueChange: _,
+				required: w,
+				value: h,
+				children: [
+					/* @__PURE__ */ d(o, { children: v }),
+					/* @__PURE__ */ d(u, {
+						countLabel: S,
+						disabled: C,
+						options: m,
+						placeholder: x
+					}),
+					/* @__PURE__ */ d(c, { children: /* @__PURE__ */ d(p.Positioner, {
+						align: "start",
+						alignItemWithTrigger: !1,
+						collisionPadding: 8,
+						render: /* @__PURE__ */ d(e, { zIndex: "popover" }),
+						side: "bottom",
+						sideOffset: 4,
+						children: /* @__PURE__ */ d(s, { children: m.map((r) => /* @__PURE__ */ f(p.Item, {
+							disabled: r.disabled,
+							label: r.label,
+							render: /* @__PURE__ */ d(e, {
+								alignItems: "center",
+								borderRadius: "sm",
+								className: a,
+								display: "flex",
+								gap: "8",
+								minBlockSize: "sm",
+								paddingInline: "12"
+							}),
+							value: r.value,
+							children: [/* @__PURE__ */ d(n, {
+								className: i,
+								size: "sm"
+							}), /* @__PURE__ */ d(p.ItemText, {
+								render: /* @__PURE__ */ d(t, {
+									as: "span",
+									font: "label",
+									size: "sm"
+								}),
+								children: r.label
+							})]
+						}, r.value)) })
+					}) })
+				]
+			}) }),
+			y != null && /* @__PURE__ */ d(r.Description, { children: y }),
+			/* @__PURE__ */ d(r.Error, { children: b })
+		]
+	});
+}
+//#endregion
+export { m as MultiSelect };

package/dist/SearchField/SearchField.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);appearance:none;grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}

package/dist/SearchField/SearchField.css.mjs

@@ -0,0 +1,27 @@
+import "../styles/layers.css";
+import "./SearchField.css";
+/* empty css                               */
+/* empty css                            */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/SearchField/SearchField.css.ts
+var t = "_1cj8r6g0", n = e({
+	defaultClassName: "_1cj8r6g1",
+	variantClassNames: { size: {
+		sm: "_1cj8r6g2",
+		med: "_1cj8r6g3",
+		lg: "_1cj8r6g4"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), r = e({
+	defaultClassName: "_1cj8r6g5",
+	variantClassNames: { size: {
+		sm: "_1cj8r6g6",
+		med: "_1cj8r6g7",
+		lg: "_1cj8r6g8"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), i = "_1cj8r6g9";
+//#endregion
+export { i as clear, t as hiddenLabel, r as icon, n as input };

package/dist/SearchField/client.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { Box as e } from "../Box/index.mjs";
+import { Text as t } from "../Text/index.mjs";
+import { IconButton as n } from "../IconButton/index.mjs";
+import { SearchIcon as r } from "../icons/SearchIcon.mjs";
+import { XIcon as i } from "../icons/XIcon.mjs";
+import { icon as a, input as o } from "./SearchField.css.mjs";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l, useState as u } from "react";
+import { Input as d } from "@base-ui/react/input";
+//#region src/SearchField/client.tsx
+var f = {
+	sm: {
+		size: "sm",
+		square: "xs"
+	},
+	med: {
+		size: "sm",
+		square: "sm"
+	},
+	lg: {
+		size: "med",
+		square: "med"
+	}
+};
+function p({ value: p, defaultValue: m, onValueChange: h, placeholder: g, size: _, disabled: v, required: y, name: b, clearLabel: x }) {
+	let S = l(null), [C, w] = u(m), T = p ?? C, E = (e) => {
+		p === void 0 && w(e), h?.(e);
+	}, D = T !== "" && (p === void 0 || h !== void 0), O = (e) => {
+		let t = e.nativeEvent.isComposing || e.keyCode === 229;
+		e.key === "Escape" && D && !t && (e.preventDefault(), e.stopPropagation(), E(""));
+	}, k = f[_];
+	return /* @__PURE__ */ c(e, {
+		alignItems: "center",
+		display: "grid",
+		children: [
+			/* @__PURE__ */ s(d, {
+				name: b,
+				onKeyDown: O,
+				onValueChange: E,
+				placeholder: g,
+				ref: S,
+				render: /* @__PURE__ */ s(t, {
+					as: "input",
+					className: o({ size: _ }),
+					size: _
+				}),
+				required: y,
+				type: "search",
+				value: T
+			}),
+			/* @__PURE__ */ s(r, {
+				className: a({ size: _ }),
+				size: _
+			}),
+			T !== "" && !v && /* @__PURE__ */ s(n, {
+				className: "_1cj8r6g9",
+				icon: i,
+				label: x,
+				minBlockSize: k.square,
+				minInlineSize: k.square,
+				onClick: () => {
+					E(""), S.current?.focus();
+				},
+				size: k.size
+			})
+		]
+	});
+}
+//#endregion
+export { p as SearchFieldControl };

package/dist/SearchField/index.d.mts

@@ -0,0 +1,22 @@
+import { StyleProps } from "../Box/index.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/SearchField/index.d.ts
+export type SearchFieldProps = StyleProps & {
+  className?: string;
+  clearLabel?: string;
+  defaultValue?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  error?: ReactNode;
+  hideLabel?: boolean;
+  label: ReactNode;
+  name?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  size?: "sm" | "med" | "lg";
+  style?: CSSProperties;
+  value?: string;
+};
+export declare function SearchField({ label, hideLabel, value, defaultValue, onValueChange, placeholder, description, error, size, disabled, required, name, clearLabel, className, style, ...atoms }: SearchFieldProps): import("react").JSX.Element;
+//#endregion

package/dist/SearchField/index.mjs

@@ -0,0 +1,35 @@
+import { Field as e } from "../Field/index.mjs";
+import { hiddenLabel as t } from "./SearchField.css.mjs";
+import { SearchFieldControl as n } from "./client.mjs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SearchField/index.tsx
+function a({ label: a, hideLabel: o = !1, value: s, defaultValue: c = "", onValueChange: l, placeholder: u, description: d, error: f, size: p = "med", disabled: m = !1, required: h = !1, name: g, clearLabel: _ = "Clear search", className: v, style: y, ...b }) {
+	return /* @__PURE__ */ i(e, {
+		...b,
+		className: v,
+		disabled: m,
+		invalid: f != null && f !== !1 && f !== "",
+		style: y,
+		children: [
+			/* @__PURE__ */ r(e.Label, {
+				className: o ? t : void 0,
+				children: a
+			}),
+			/* @__PURE__ */ r(n, {
+				clearLabel: _,
+				defaultValue: c,
+				disabled: m,
+				name: g,
+				onValueChange: l,
+				placeholder: u,
+				required: h,
+				size: p,
+				value: s
+			}),
+			d != null && /* @__PURE__ */ r(e.Description, { children: d }),
+			/* @__PURE__ */ r(e.Error, { children: f })
+		]
+	});
+}
+//#endregion
+export { a as SearchField };

package/dist/Stack/Stack.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.stack;

package/dist/Stack/Stack.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./Stack.css";
+/* empty css                               */
+/* empty css                      */
+//#region src/Stack/Stack.css.ts
+var e = "_122fjme0";
+//#endregion
+export { e as root };

package/dist/Stack/index.d.mts

@@ -0,0 +1,15 @@
+import { OmitEach } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/Stack/index.d.ts
+type Gap = StyleProps["gap"];
+type Token = Extract<Gap, string>;
+export type StackProps<T extends ElementType = "div"> = {
+  as?: T;
+  gap: Token | (Extract<Gap, object> & {
+    base: Token;
+  });
+} & Omit<StyleProps, "gap"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps>;
+export declare function Stack<T extends ElementType = "div">({ display, flexDirection, className, ...props }: StackProps<T>): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/Stack/index.mjs

@@ -0,0 +1,15 @@
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { root as n } from "./Stack.css.mjs";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/Stack/index.tsx
+function i({ display: i = "flex", flexDirection: a = "column", className: o, ...s }) {
+	return /* @__PURE__ */ r(t, {
+		display: i,
+		flexDirection: a,
+		...s,
+		className: e(n, o)
+	});
+}
+//#endregion
+export { i as Stack };

package/dist/Tabs/Tabs.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}

package/dist/Tabs/Tabs.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./Tabs.css";
+/* empty css                               */
+/* empty css                     */
+//#region src/Tabs/Tabs.css.ts
+var e = "xowpd00", t = "xowpd01", n = "xowpd02", r = "xowpd03";
+//#endregion
+export { n as indicator, e as list, r as panel, t as tab };

package/dist/Tabs/index.d.mts

@@ -0,0 +1,20 @@
+import { PartProps } from "../styles/part-props.mjs";
+import { TextOwnProps } from "../Text/index.mjs";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/Tabs/index.d.ts
+export type TabsProps = PartProps<Tabs$1.Root.Props>;
+export type TabsListProps = PartProps<Tabs$1.List.Props>;
+type LabelProps = Omit<TextOwnProps, "truncate">;
+export type TabsTabProps = PartProps<Omit<Tabs$1.Tab.Props, keyof TextOwnProps>> & LabelProps;
+export type TabsPanelProps = PartProps<Tabs$1.Panel.Props>;
+declare function TabsRoot({ orientation, display, flexDirection, flexWrap, gap, className, style, ...props }: TabsProps): import("react").JSX.Element;
+declare function TabsList({ display, flexWrap, gap, position, className, style, ...props }: TabsListProps): import("react").JSX.Element;
+declare function TabsTab({ children, size, font, weight, leading, paddingInline, justifyContent, minBlockSize, position, color, className, style, ...props }: TabsTabProps): import("react").JSX.Element;
+declare function TabsPanel({ flexGrow, className, style, ...props }: TabsPanelProps): import("react").JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+  List: typeof TabsList;
+  Tab: typeof TabsTab;
+  Panel: typeof TabsPanel;
+};
+//#endregion
+export {};