@jonmilner/ui 0.0.0-stage → 0.1.0

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,51 @@
+# Third-party notices
+
+## Lucide
+
+The components exported from `@jonmilner/ui/icons` are generated from [Lucide](https://lucide.dev) icons (lucide-static 1.61.0). Lucide's license follows.
+
+```text
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/AlertDialog/index.d.mts

@@ -0,0 +1,21 @@
+import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
+import "../Dialog/index.mjs";
+import { ReactNode } from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/AlertDialog/index.d.ts
+export type AlertDialogTriggerProps = DialogTriggerProps;
+export type AlertDialogProps = Pick<AlertDialog$1.Root.Props, "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete"> & {
+  cancelLabel?: string;
+  children?: ReactNode;
+  confirmLabel: string;
+  description: Exclude<ReactNode, null | undefined | boolean>;
+  onConfirm: () => void;
+  title: Exclude<ReactNode, null | undefined | boolean>;
+  tone?: "default" | "danger";
+};
+declare function AlertDialogRoot({ title, description, confirmLabel, cancelLabel, tone, onConfirm, children, ...props }: AlertDialogProps): import("react").JSX.Element;
+export declare const AlertDialog: typeof AlertDialogRoot & {
+  Trigger: typeof DialogTrigger;
+};
+//#endregion
+export {};

package/dist/AlertDialog/index.mjs

@@ -0,0 +1,29 @@
+import { Button as e } from "../Button/index.mjs";
+import { PopupScope as t } from "../popup/client.mjs";
+import { Dialog as n } from "../Dialog/index.mjs";
+import { AlertDialog as r } from "@base-ui/react/alert-dialog";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/AlertDialog/index.tsx
+function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel", tone: u = "default", onConfirm: d, children: f, ...p }) {
+	return /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a(r.Root, {
+		...p,
+		children: [f, /* @__PURE__ */ i(n.Popup, {
+			description: s,
+			size: "sm",
+			title: o,
+			children: /* @__PURE__ */ a(n.Actions, { children: [/* @__PURE__ */ i(n.Close, {
+				variant: "secondary",
+				children: l
+			}), /* @__PURE__ */ i(r.Close, {
+				onClick: (e) => {
+					e.currentTarget.closest("[data-closed]") || d();
+				},
+				render: /* @__PURE__ */ i(e, { variant: u === "danger" ? "danger" : "primary" }),
+				children: c
+			})] })
+		})]
+	}) });
+}
+var s = Object.assign(o, { Trigger: n.Trigger });
+//#endregion
+export { s as AlertDialog };

package/dist/Badge/Badge.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.badge{._1ixfil10{white-space:nowrap;border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Badge/Badge.css.mjs

@@ -0,0 +1,24 @@
+import "../styles/layers.css";
+import "./Badge.css";
+/* empty css                               */
+/* empty css                      */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/Badge/Badge.css.ts
+var t = "_1ixfil10", n = e({
+	defaultClassName: "_1ixfil11",
+	variantClassNames: {
+		variant: {
+			neutral: "_1ixfil12",
+			accent: "_1ixfil13",
+			danger: "_1ixfil14"
+		},
+		size: {
+			sm: "_1ixfil15",
+			med: "_1ixfil16"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { n as badge, t as root };

package/dist/Badge/index.d.mts

@@ -0,0 +1,11 @@
+import { OmitEach } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/Badge/index.d.ts
+export type BadgeOwnProps = {
+  size?: "sm" | "med";
+  variant?: "neutral" | "accent" | "danger";
+};
+export type BadgeProps = StyleProps & BadgeOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof BadgeOwnProps>;
+export declare function Badge({ variant, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;
+//#endregion

package/dist/Badge/index.mjs

@@ -0,0 +1,54 @@
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Text as n } from "../Text/index.mjs";
+import { badge as r, root as i } from "./Badge.css.mjs";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/Badge/index.tsx
+var o = {
+	neutral: {
+		backgroundColor: "bgMuted",
+		color: "fgMuted"
+	},
+	accent: {
+		backgroundColor: "accent",
+		color: "accentFg"
+	},
+	danger: {
+		backgroundColor: "danger",
+		color: "dangerFg"
+	}
+}, s = {
+	sm: {
+		paddingInline: "6",
+		paddingBlock: "4"
+	},
+	med: {
+		paddingInline: "8",
+		paddingBlock: "6"
+	}
+};
+function c({ variant: c = "neutral", size: l = "med", display: u = "inline-block", paddingInline: d = s[l].paddingInline, paddingBlock: f = s[l].paddingBlock, borderRadius: p = "sm", backgroundColor: m = o[c].backgroundColor, color: h = o[c].color, className: g, children: _, ...v }) {
+	return _ == null || typeof _ == "boolean" || _ === "" ? null : /* @__PURE__ */ a(t, {
+		...v,
+		as: "span",
+		backgroundColor: m,
+		borderRadius: p,
+		className: e(i, r({
+			variant: c,
+			size: l
+		}), g),
+		color: h,
+		display: u,
+		paddingBlock: f,
+		paddingInline: d,
+		children: /* @__PURE__ */ a(n, {
+			as: "span",
+			font: "label",
+			size: l,
+			weight: "medium",
+			children: _
+		})
+	});
+}
+//#endregion
+export { c as Badge };

package/dist/Box/Box.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.box{._11caph0{box-sizing:border-box}}

package/dist/Box/Box.css.mjs

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

package/dist/Box/index.d.mts

@@ -0,0 +1,10 @@
+import { Sprinkles } from "../styles/atoms.css.mjs";
+import { OmitEach } from "../types.mjs";
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/Box/index.d.ts
+export type StyleProps = { [K in keyof Sprinkles]?: Sprinkles[K] | null | false; };
+export type BoxProps<T extends ElementType = "div"> = {
+  as?: T;
+} & StyleProps & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps>;
+export declare function Box<T extends ElementType = "div">({ as, className, ...props }: BoxProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/Box/index.mjs

@@ -0,0 +1,15 @@
+import { sprinkles as e } from "../styles/atoms.css.mjs";
+import { join as t } from "../styles/join.mjs";
+import { splitStyleProps as n } from "../styles/split-style-props.mjs";
+import { root as r } from "./Box.css.mjs";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/Box/index.tsx
+function a({ as: a, className: o, ...s }) {
+	let c = a ?? "div", [l, u] = n(s), d = Object.fromEntries(Object.entries(l).filter(([, e]) => e !== null && e !== !1));
+	return /* @__PURE__ */ i(c, {
+		...u,
+		className: t(r, e(d), o)
+	});
+}
+//#endregion
+export { a as Box };

package/dist/Button/Button.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;
+@keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}

package/dist/Button/Button.css.mjs

@@ -0,0 +1,25 @@
+import "../styles/layers.css";
+import "./Button.css";
+/* empty css                               */
+/* empty css                       */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/Button/Button.css.ts
+var t = "hkhd80", n = e({
+	defaultClassName: "hkhd81",
+	variantClassNames: {
+		variant: {
+			primary: "hkhd82",
+			secondary: "hkhd83",
+			danger: "hkhd84"
+		},
+		size: {
+			sm: "hkhd85",
+			med: "hkhd86",
+			lg: "hkhd87"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+}), r = "hkhd88", i = "hkhd89", a = "hkhd8b", o = "hkhd8c";
+//#endregion
+export { n as button, i as content, o as dot, t as root, a as spinner, r as stack };

package/dist/Button/index.d.mts

@@ -0,0 +1,20 @@
+import { OmitEach } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { ClickableOwnProps } from "../Clickable/index.mjs";
+import { IconProps } from "../Icon/index.mjs";
+import { ComponentPropsWithRef, ComponentType, ElementType } from "react";
+//#region src/Button/index.d.ts
+export type ButtonOwnProps = {
+  iconEnd?: ComponentType<IconProps>;
+  iconStart?: ComponentType<IconProps>;
+  loading?: boolean;
+  size?: "sm" | "med" | "lg";
+  variant?: "primary" | "secondary" | "danger";
+};
+export type ButtonProps<T extends ElementType = "button"> = {
+  as?: T;
+} & StyleProps & ButtonOwnProps & Omit<ClickableOwnProps, "busy"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | keyof ButtonOwnProps | "aria-disabled" | "aria-busy">;
+export declare function Button<T extends ElementType = "button">({ variant, size, loading: loadingProp, iconStart: IconStart, iconEnd: IconEnd, minBlockSize, paddingBlock, paddingInline, gap, borderRadius, backgroundColor, color, className, children, "aria-busy": ariaBusy, ...props }: ButtonProps<T> & {
+  "aria-busy"?: boolean | "true" | "false";
+}): import("react").JSX.Element;
+//#endregion

package/dist/Button/index.mjs

@@ -0,0 +1,97 @@
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Clickable as n } from "../Clickable/index.mjs";
+import { Icon as r } from "../Icon/index.mjs";
+import { fills as i } from "../styles/button-fills.mjs";
+import { Text as a } from "../Text/index.mjs";
+import { button as o, content as s, root as c, stack as l } from "./Button.css.mjs";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/Button/index.tsx
+var f = {
+	sm: {
+		minBlockSize: "sm",
+		paddingBlock: "6",
+		paddingInline: "12",
+		gap: "4"
+	},
+	med: {
+		minBlockSize: "med",
+		paddingBlock: "8",
+		paddingInline: "16",
+		gap: "8"
+	},
+	lg: {
+		minBlockSize: "lg",
+		paddingBlock: "12",
+		paddingInline: "20",
+		gap: "8"
+	}
+};
+function p({ variant: p = "secondary", size: m = "med", loading: h = !1, iconStart: g, iconEnd: _, minBlockSize: v = f[m].minBlockSize, paddingBlock: y = f[m].paddingBlock, paddingInline: b = f[m].paddingInline, gap: x = f[m].gap, borderRadius: S = "med", backgroundColor: C = i[p].backgroundColor, color: w = i[p].color, className: T, children: E, "aria-busy": D, ...O }) {
+	let k = h || String(D) === "true";
+	return /* @__PURE__ */ u(n, {
+		...O,
+		backgroundColor: C,
+		borderRadius: S,
+		busy: k,
+		className: e(c, o({
+			variant: p,
+			size: m
+		}), T),
+		color: w,
+		minBlockSize: v,
+		paddingBlock: y,
+		paddingInline: b,
+		children: /* @__PURE__ */ d(t, {
+			alignItems: "center",
+			as: "span",
+			className: l,
+			display: "grid",
+			children: [/* @__PURE__ */ d(t, {
+				alignItems: "center",
+				as: "span",
+				className: s,
+				display: "flex",
+				gap: x,
+				children: [
+					g && /* @__PURE__ */ u(g, { size: m }),
+					E != null && E !== !1 && E !== "" && /* @__PURE__ */ u(a, {
+						as: "span",
+						font: "label",
+						size: m,
+						weight: "medium",
+						children: E
+					}),
+					_ && /* @__PURE__ */ u(_, { size: m })
+				]
+			}), k && /* @__PURE__ */ d(r, {
+				className: "hkhd8b",
+				fill: "currentColor",
+				size: m,
+				stroke: "none",
+				children: [
+					/* @__PURE__ */ u("circle", {
+						className: "hkhd8c",
+						cx: "5",
+						cy: "12",
+						r: "2"
+					}),
+					/* @__PURE__ */ u("circle", {
+						className: "hkhd8c",
+						cx: "12",
+						cy: "12",
+						r: "2"
+					}),
+					/* @__PURE__ */ u("circle", {
+						className: "hkhd8c",
+						cx: "19",
+						cy: "12",
+						r: "2"
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { p as Button };

package/dist/Checkbox/Checkbox.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.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}

package/dist/Checkbox/Checkbox.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./Checkbox.css";
+/* empty css                               */
+/* empty css                         */
+//#region src/Checkbox/Checkbox.css.ts
+var e = "_1tze2y80", t = "_1tze2y81", n = "_1tze2y82", r = "_1tze2y83", i = "_1tze2y84";
+//#endregion
+export { t as box, i as dash, n as mark, e as root, r as tick };

package/dist/Checkbox/index.d.mts

@@ -0,0 +1,6 @@
+import { PartProps } from "../styles/part-props.mjs";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/Checkbox/index.d.ts
+export type CheckboxProps = PartProps<Omit<Checkbox$1.Root.Props, "nativeButton">>;
+export declare function Checkbox({ display, alignItems, justifyContent, flexShrink, minInlineSize, minBlockSize, className, style, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/Checkbox/index.mjs

@@ -0,0 +1,45 @@
+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 { box as r, dash as i, mark as a, root as o, tick as s } from "./Checkbox.css.mjs";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Checkbox as u } from "@base-ui/react/checkbox";
+//#region src/Checkbox/index.tsx
+function d({ display: d = "inline-flex", alignItems: f = "center", justifyContent: p = "center", flexShrink: m = 0, minInlineSize: h = "xs", minBlockSize: g = "xs", className: _, style: v, ...y }) {
+	let [b, x] = t(y);
+	return /* @__PURE__ */ c(u.Root, {
+		...x,
+		render: /* @__PURE__ */ c(n, {
+			as: "span",
+			display: d,
+			alignItems: f,
+			justifyContent: p,
+			flexShrink: m,
+			minInlineSize: h,
+			minBlockSize: g,
+			...b,
+			className: e(o, _),
+			style: v
+		}),
+		children: /* @__PURE__ */ c(n, {
+			as: "span",
+			className: r,
+			children: /* @__PURE__ */ l(u.Indicator, {
+				render: /* @__PURE__ */ c("svg", {
+					"aria-hidden": "true",
+					className: a,
+					viewBox: "0 0 16 16"
+				}),
+				children: [/* @__PURE__ */ c("path", {
+					className: s,
+					d: "M3.5 8.5l3 3 6-7"
+				}), /* @__PURE__ */ c("path", {
+					className: i,
+					d: "M4 8h8"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { d as Checkbox };

package/dist/Chip/Chip.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.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}

package/dist/Chip/Chip.css.mjs

@@ -0,0 +1,17 @@
+import "../styles/layers.css";
+import "./Chip.css";
+/* empty css                               */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/Chip/Chip.css.ts
+var t = "_1l071c80", n = e({
+	defaultClassName: "_1l071c81",
+	variantClassNames: { size: {
+		sm: "_1l071c82",
+		med: "_1l071c83"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), r = "_1l071c84";
+//#endregion
+export { r as check, n as chip, t as root };

package/dist/Chip/index.d.mts

@@ -0,0 +1,13 @@
+import { PartProps } from "../styles/part-props.mjs";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/Chip/index.d.ts
+export type ChipOwnProps = {
+  disabled?: boolean;
+  size?: "sm" | "med";
+};
+export type ChipProps = PartProps<Omit<Toggle.Props, "nativeButton" | keyof ChipOwnProps>> & ChipOwnProps;
+export type ChipGroupProps = PartProps<Omit<ToggleGroup.Props, "disabled">>;
+export declare function Chip({ size, disabled, children, minBlockSize, paddingBlock, paddingInline, gap, borderRadius, backgroundColor, color, className, style, ...props }: ChipProps): import("react").JSX.Element;
+export declare function ChipGroup({ orientation, display, flexDirection, flexWrap, alignItems, gap, className, style, ...props }: ChipGroupProps): import("react").JSX.Element;
+//#endregion

package/dist/Chip/index.mjs

@@ -0,0 +1,73 @@
+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 { Clickable as r } from "../Clickable/index.mjs";
+import { Text as i } from "../Text/index.mjs";
+import { CheckIcon as a } from "../icons/CheckIcon.mjs";
+import { check as o, chip as s, root as c } from "./Chip.css.mjs";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Toggle as d } from "@base-ui/react/toggle";
+import { ToggleGroup as f } from "@base-ui/react/toggle-group";
+//#region src/Chip/index.tsx
+var p = {
+	sm: {
+		minBlockSize: "xs",
+		paddingBlock: "4",
+		paddingInline: "8",
+		gap: "4"
+	},
+	med: {
+		minBlockSize: "sm",
+		paddingBlock: "6",
+		paddingInline: "12",
+		gap: "6"
+	}
+};
+function m({ size: n = "med", disabled: f = !1, children: m, minBlockSize: h = p[n].minBlockSize, paddingBlock: g = p[n].paddingBlock, paddingInline: _ = p[n].paddingInline, gap: v = p[n].gap, borderRadius: y = "full", backgroundColor: b = "bg", color: x = "fg", className: S, style: C, ...w }) {
+	let [T, E] = t(w);
+	return /* @__PURE__ */ u(d, {
+		...E,
+		render: /* @__PURE__ */ l(r, {
+			backgroundColor: b,
+			borderRadius: y,
+			color: x,
+			disabled: f,
+			gap: v,
+			minBlockSize: h,
+			paddingBlock: g,
+			paddingInline: _,
+			...T,
+			className: e(c, s({ size: n }), S),
+			style: C
+		}),
+		children: [/* @__PURE__ */ l(a, {
+			className: o,
+			size: "sm"
+		}), /* @__PURE__ */ l(i, {
+			as: "span",
+			font: "label",
+			size: "sm",
+			weight: "medium",
+			children: m
+		})]
+	});
+}
+function h({ orientation: e = "horizontal", display: r = "flex", flexDirection: i = e === "vertical" ? "column" : "row", flexWrap: a = "wrap", alignItems: o = e === "vertical" ? "start" : "center", gap: s = "8", className: c, style: u, ...d }) {
+	let [p, m] = t(d);
+	return /* @__PURE__ */ l(f, {
+		...m,
+		orientation: e,
+		render: /* @__PURE__ */ l(n, {
+			alignItems: o,
+			display: r,
+			flexDirection: i,
+			flexWrap: a,
+			gap: s,
+			...p,
+			className: c,
+			style: u
+		})
+	});
+}
+//#endregion
+export { m as Chip, h as ChipGroup };

package/dist/Clickable/Clickable.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.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}

package/dist/Clickable/Clickable.css.mjs

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

package/dist/Clickable/index.d.mts

@@ -0,0 +1,13 @@
+import { OmitEach } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/Clickable/index.d.ts
+export type ClickableOwnProps = {
+  busy?: boolean;
+  disabled?: boolean;
+};
+export type ClickableProps<T extends ElementType = "button"> = {
+  as?: T;
+} & StyleProps & ClickableOwnProps & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | "aria-disabled" | "aria-busy">;
+export declare function Clickable<T extends ElementType = "button">({ as, disabled, busy, display, alignItems, justifyContent, minInlineSize, minBlockSize, className, ...props }: ClickableProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/Clickable/index.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { root as n } from "./Clickable.css.mjs";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/Clickable/index.tsx
+function i({ as: i, disabled: a = !1, busy: o = !1, display: s = "inline-flex", alignItems: c = "center", justifyContent: l = "center", minInlineSize: u = "xs", minBlockSize: d = "xs", className: f, ...p }) {
+	let m = i ?? "button", { onClick: h, onAuxClick: g, "aria-disabled": _, "aria-busy": v, ...y } = p, b = a || String(_) === "true", x = o || String(v) === "true", S = (e) => (t) => {
+		b || x ? t.preventDefault() : e?.(t);
+	};
+	return /* @__PURE__ */ r(t, {
+		alignItems: c,
+		as: m,
+		display: s,
+		justifyContent: l,
+		minBlockSize: d,
+		minInlineSize: u,
+		type: m === "button" ? "button" : void 0,
+		...y,
+		"aria-busy": x || void 0,
+		"aria-disabled": b || void 0,
+		className: e(n, f),
+		onAuxClick: S(g),
+		onClick: S(h)
+	});
+}
+//#endregion
+export { i as Clickable };

package/dist/Dialog/Dialog.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.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}

package/dist/Dialog/Dialog.css.d.mts

@@ -0,0 +1,3 @@
+//#region src/Dialog/Dialog.css.d.ts
+export declare const size: Record<"lg" | "med" | "sm", string>;
+//#endregion