@jonmilner/ui 0.0.0-stage → 0.1.0

package/dist/Dialog/Dialog.css.mjs

@@ -0,0 +1,12 @@
+import "../styles/layers.css";
+import "./Dialog.css";
+/* empty css                               */
+/* empty css                       */
+//#region src/Dialog/Dialog.css.ts
+var e = "iyoziv0", t = "iyoziv1", n = {
+	sm: "iyoziv2",
+	med: "iyoziv3",
+	lg: "iyoziv4"
+};
+//#endregion
+export { e as backdrop, t as popup, n as size };

package/dist/Dialog/client.d.mts

@@ -0,0 +1,12 @@
+import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { ReactNode } from "react";
+//#region src/Dialog/client.d.ts
+type TriggerOwnProps = Omit<Dialog.Trigger.Props, "render" | "className" | "style" | "nativeButton">;
+type CloseOwnProps = Omit<Dialog.Close.Props, "render" | "className" | "style" | "nativeButton">;
+export type DialogTriggerProps = TriggerOwnProps & TriggerLookProps & Omit<TriggerElementProps, keyof TriggerLookProps | keyof TriggerOwnProps>;
+export type DialogCloseProps = CloseOwnProps & TriggerLookProps & Omit<TriggerElementProps, keyof TriggerLookProps | keyof CloseOwnProps>;
+export declare function DialogTrigger({ disabled, handle, payload, id, ...props }: DialogTriggerProps): import("react").JSX.Element;
+export declare function DialogClose({ disabled, ...props }: DialogCloseProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/Dialog/client.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import { Dialog as r } from "@base-ui/react/dialog";
+//#region src/Dialog/client.tsx
+function i({ disabled: i = !1, handle: a, payload: o, id: s, ...c }) {
+	let { ref: l } = t();
+	return /* @__PURE__ */ n(r.Trigger, {
+		disabled: i,
+		handle: a,
+		payload: o,
+		id: s,
+		ref: l,
+		render: e(c)
+	});
+}
+function a({ disabled: t = !1, ...i }) {
+	return /* @__PURE__ */ n(r.Close, {
+		disabled: t,
+		render: e(i)
+	});
+}
+function o({ children: e }) {
+	let { container: i } = t();
+	return /* @__PURE__ */ n(r.Portal, {
+		container: i,
+		children: e
+	});
+}
+//#endregion
+export { a as DialogClose, o as DialogPortal, i as DialogTrigger };

package/dist/Dialog/index.d.mts

@@ -0,0 +1,30 @@
+import { BoxProps } from "../Box/index.mjs";
+import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
+import { PartProps } from "../styles/part-props.mjs";
+import { size as size$1 } from "./Dialog.css.mjs";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { ReactNode } from "react";
+//#region src/Dialog/index.d.ts
+export type DialogProps = Pick<Dialog$1.Root.Props, "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete"> & {
+  children?: ReactNode;
+};
+export type DialogPopupProps = PartProps<Omit<Dialog$1.Popup.Props, "title">> & {
+  description?: ReactNode;
+  size?: keyof typeof size$1;
+  title: Exclude<ReactNode, null | undefined | boolean>;
+};
+export type DialogBodyProps = Omit<BoxProps<"div">, "as">;
+export type DialogActionsProps = Omit<BoxProps<"div">, "as">;
+declare function DialogRoot({ children, ...props }: DialogProps): import("react").JSX.Element;
+declare function DialogPopup({ title, description, size, position, margin, blockSize, display, flexDirection, gap, padding, backgroundColor, borderRadius, boxShadow, overflow, className, style, children, ...props }: DialogPopupProps): import("react").JSX.Element;
+declare function DialogBody({ display, flexDirection, gap, ...props }: DialogBodyProps): import("react").JSX.Element;
+declare function DialogActions({ display, flexWrap, justifyContent, gap, ...props }: DialogActionsProps): import("react").JSX.Element;
+export declare const Dialog: typeof DialogRoot & {
+  Trigger: typeof DialogTrigger;
+  Popup: typeof DialogPopup;
+  Body: typeof DialogBody;
+  Actions: typeof DialogActions;
+  Close: typeof DialogClose;
+};
+//#endregion
+export type { DialogCloseProps, DialogTriggerProps };

package/dist/Dialog/index.mjs

@@ -0,0 +1,85 @@
+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 { Heading as i } from "../Heading/index.mjs";
+import { PopupScope as a } from "../popup/client.mjs";
+import { DialogClose as o, DialogPortal as s, DialogTrigger as c } from "./client.mjs";
+import { backdrop as l, popup as u, size as d } from "./Dialog.css.mjs";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Dialog as m } from "@base-ui/react/dialog";
+//#region src/Dialog/index.tsx
+function h({ children: e, ...t }) {
+	return /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(m.Root, {
+		...t,
+		children: e
+	}) });
+}
+function g({ title: a, description: o, size: c = "med", position: h = "fixed", margin: g = "auto", blockSize: _ = "fit", display: v = "flex", flexDirection: y = "column", gap: b = "16", padding: x = "24", backgroundColor: S = "bgRaised", borderRadius: C = "lg", boxShadow: w = "lg", overflow: T = "auto", className: E, style: D, children: O, ...k }) {
+	let [A, j] = t(k);
+	return /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(m.Backdrop, { render: /* @__PURE__ */ f(n, {
+		className: l,
+		position: "fixed",
+		zIndex: "modal"
+	}) }), /* @__PURE__ */ p(m.Popup, {
+		...j,
+		render: /* @__PURE__ */ f(n, {
+			zIndex: "modal",
+			position: h,
+			margin: g,
+			blockSize: _,
+			display: v,
+			flexDirection: y,
+			gap: b,
+			padding: x,
+			backgroundColor: S,
+			borderRadius: C,
+			boxShadow: w,
+			overflow: T,
+			...A,
+			className: e(u, d[c], E),
+			style: D
+		}),
+		children: [/* @__PURE__ */ p(n, {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8",
+			children: [/* @__PURE__ */ f(m.Title, {
+				render: /* @__PURE__ */ f(i, {
+					as: "h2",
+					size: "lg"
+				}),
+				children: a
+			}), o == null ? null : /* @__PURE__ */ f(m.Description, {
+				render: /* @__PURE__ */ f(r, { color: "fgMuted" }),
+				children: o
+			})]
+		}), O]
+	})] });
+}
+function _({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
+	return /* @__PURE__ */ f(n, {
+		display: e,
+		flexDirection: t,
+		gap: r,
+		...i
+	});
+}
+function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
+	return /* @__PURE__ */ f(n, {
+		display: e,
+		flexWrap: t,
+		justifyContent: r,
+		gap: i,
+		...a
+	});
+}
+var y = Object.assign(h, {
+	Trigger: c,
+	Popup: g,
+	Body: _,
+	Actions: v,
+	Close: o
+});
+//#endregion
+export { y as Dialog };

package/dist/Field/Field.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.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}

package/dist/Field/Field.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./Field.css";
+/* empty css                               */
+/* empty css                      */
+//#region src/Field/Field.css.ts
+var e = "_13w7r940", t = "_13w7r941", n = "_13w7r942";
+//#endregion
+export { t as error, n as icon, e as label };

package/dist/Field/client.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { splitStyleProps as e } from "../styles/split-style-props.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { CircleAlertIcon as n } from "../icons/CircleAlertIcon.mjs";
+import { icon as r } from "./Field.css.mjs";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Field as o } from "@base-ui/react/field";
+//#region src/Field/client.tsx
+function s({ size: s, ...c }) {
+	return /* @__PURE__ */ i(o.Error, {
+		...c,
+		render: (o) => {
+			let [, c] = e(o);
+			return /* @__PURE__ */ a(t, {
+				as: "span",
+				...c,
+				children: [/* @__PURE__ */ i(n, {
+					className: r,
+					size: s
+				}), o.children]
+			});
+		}
+	});
+}
+//#endregion
+export { s as FieldErrorMessage };

package/dist/Field/index.d.mts

@@ -0,0 +1,20 @@
+import { PartProps } from "../styles/part-props.mjs";
+import { TextOwnProps } from "../Text/index.mjs";
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/Field/index.d.ts
+type TextPartProps<P> = PartProps<Omit<P, keyof TextOwnProps>> & TextOwnProps;
+export type FieldProps = PartProps<Field$1.Root.Props>;
+export type FieldLabelProps = TextPartProps<Field$1.Label.Props>;
+export type FieldDescriptionProps = TextPartProps<Field$1.Description.Props>;
+export type FieldErrorProps = TextPartProps<Field$1.Error.Props>;
+declare function FieldRoot({ display, flexDirection, gap, className, style, ...props }: FieldProps): import("react").JSX.Element;
+declare function FieldLabel({ nativeLabel, size, font, weight, leading, truncate, className, style, ...props }: FieldLabelProps): import("react").JSX.Element;
+declare function FieldDescription({ size, font, weight, leading, truncate, color, className, style, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+declare function FieldError({ children, match, size, font, weight, leading, truncate, color, className, style, ...props }: FieldErrorProps): import("react").JSX.Element;
+export declare const Field: typeof FieldRoot & {
+  Label: typeof FieldLabel;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+};
+//#endregion
+export {};

package/dist/Field/index.mjs

@@ -0,0 +1,88 @@
+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 { error as i, label as a } from "./Field.css.mjs";
+import { FieldErrorMessage as o } from "./client.mjs";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Children as l } from "react";
+import { Field as u } from "@base-ui/react/field";
+//#region src/Field/index.tsx
+function d({ display: e = "flex", flexDirection: r = "column", gap: i = "8", className: a, style: o, ...c }) {
+	let [l, d] = t(c);
+	return /* @__PURE__ */ s(u.Root, {
+		...d,
+		render: /* @__PURE__ */ s(n, {
+			display: e,
+			flexDirection: r,
+			gap: i,
+			...l,
+			className: a,
+			style: o
+		})
+	});
+}
+function f({ nativeLabel: n = !0, size: i = "sm", font: o = "label", weight: c = "medium", leading: l, truncate: d, className: f, style: p, ...m }) {
+	let [h, g] = t(m);
+	return /* @__PURE__ */ s(u.Label, {
+		...g,
+		nativeLabel: n,
+		render: /* @__PURE__ */ s(r, {
+			as: n ? "label" : "span",
+			size: i,
+			font: o,
+			weight: c,
+			leading: l,
+			truncate: d,
+			...h,
+			className: e(a, f),
+			style: p
+		})
+	});
+}
+function p({ size: e = "sm", font: n, weight: i, leading: a, truncate: o, color: c = "fgMuted", className: l, style: d, ...f }) {
+	let [p, m] = t(f);
+	return /* @__PURE__ */ s(u.Description, {
+		...m,
+		render: /* @__PURE__ */ s(r, {
+			size: e,
+			font: n,
+			weight: i,
+			leading: a,
+			truncate: o,
+			color: c,
+			...p,
+			className: l,
+			style: d
+		})
+	});
+}
+function m({ children: n, match: a, size: u = "sm", font: d, weight: f, leading: p, truncate: m, color: h = "danger", className: g, style: _, ...v }) {
+	let [y, b] = t(v), x = l.toArray(n).some((e) => e !== "");
+	return /* @__PURE__ */ c(r, {
+		as: "div",
+		role: "alert",
+		size: u,
+		font: d,
+		weight: f,
+		leading: p,
+		truncate: m,
+		color: h,
+		...y,
+		className: e(i, g),
+		style: _,
+		children: [/* @__PURE__ */ s(o, {
+			...b,
+			...x && { children: n },
+			match: a ?? (x || void 0),
+			size: u
+		}), "​"]
+	});
+}
+var h = Object.assign(d, {
+	Label: f,
+	Description: p,
+	Error: m
+});
+//#endregion
+export { h as Field };

package/dist/Heading/Heading.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.heading{.yaxwxv0{text-wrap:balance}}

package/dist/Heading/Heading.css.mjs

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

package/dist/Heading/index.d.mts

@@ -0,0 +1,9 @@
+import { TextProps } from "../Text/index.mjs";
+//#region src/Heading/index.d.ts
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingSize = "sm" | "med" | "lg" | "xl" | "2xl";
+export type HeadingProps<T extends HeadingLevel = "h2"> = Omit<TextProps<T>, "size"> & {
+  size?: HeadingSize;
+};
+export declare function Heading<T extends HeadingLevel = "h2">({ as, size, font, weight, leading, className, ...props }: HeadingProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/Heading/index.mjs

@@ -0,0 +1,27 @@
+import { join as e } from "../styles/join.mjs";
+import { Text as t } from "../Text/index.mjs";
+import { root as n } from "./Heading.css.mjs";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/Heading/index.tsx
+var i = {
+	h1: "2xl",
+	h2: "xl",
+	h3: "lg",
+	h4: "med",
+	h5: "sm",
+	h6: "sm"
+};
+function a({ as: a, size: o, font: s = "heading", weight: c = "semibold", leading: l = "sm", className: u, ...d }) {
+	let f = a ?? "h2";
+	return /* @__PURE__ */ r(t, {
+		...d,
+		as: f,
+		className: e(n, u),
+		font: s,
+		leading: l,
+		size: o ?? i[f],
+		weight: c
+	});
+}
+//#endregion
+export { a as Heading };

package/dist/Icon/Icon.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.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}

package/dist/Icon/Icon.css.mjs

@@ -0,0 +1,17 @@
+import "../styles/layers.css";
+import "./Icon.css";
+/* empty css                               */
+/* empty css                     */
+//#region src/Icon/Icon.css.ts
+var e = "wz3ei00", t = {
+	xs: "wz3ei01",
+	sm: "wz3ei02",
+	med: "wz3ei03",
+	lg: "wz3ei04",
+	xl: "wz3ei05",
+	"2xl": "wz3ei06",
+	"3xl": "wz3ei07",
+	"4xl": "wz3ei08"
+};
+//#endregion
+export { e as root, t as size };

package/dist/Icon/index.d.mts

@@ -0,0 +1,12 @@
+import { Sprinkles } from "../styles/atoms.css.mjs";
+import { tokens } from "../tokens/scales.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/Icon/index.d.ts
+export type IconProps = Omit<ComponentPropsWithRef<"svg">, "color" | "strokeWidth" | "width" | "height"> & {
+  color?: Sprinkles["color"];
+  label?: string;
+  size?: keyof typeof tokens.fontSize;
+  strokeWidth?: number;
+};
+export declare function Icon({ size, color, label, strokeWidth, viewBox, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: IconProps): import("react").JSX.Element;
+//#endregion

package/dist/Icon/index.mjs

@@ -0,0 +1,24 @@
+import { sprinkles as e } from "../styles/atoms.css.mjs";
+import { join as t } from "../styles/join.mjs";
+import { root as n, size as r } from "./Icon.css.mjs";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/Icon/index.tsx
+function a({ size: a = "med", color: o, label: s, strokeWidth: c = 2, viewBox: l = "0 0 24 24", className: u, "aria-label": d, "aria-labelledby": f, ...p }) {
+	let m = s || d || void 0, h = !!(m || f);
+	return /* @__PURE__ */ i("svg", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: c,
+		viewBox: l,
+		...p,
+		"aria-hidden": !h || void 0,
+		"aria-label": m,
+		"aria-labelledby": s ? void 0 : f,
+		className: t(n, r[a], o && e({ color: o }), u),
+		role: h ? "img" : void 0
+	});
+}
+//#endregion
+export { a as Icon };

package/dist/IconButton/IconButton.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.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0: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}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0: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){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}

package/dist/IconButton/IconButton.css.mjs

@@ -0,0 +1,24 @@
+import "../styles/layers.css";
+import "./IconButton.css";
+/* empty css                               */
+/* empty css                           */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/IconButton/IconButton.css.ts
+var t = "n2fy8x0", n = e({
+	defaultClassName: "n2fy8x1",
+	variantClassNames: {
+		variant: {
+			primary: "n2fy8x2",
+			secondary: "n2fy8x3"
+		},
+		size: {
+			sm: "n2fy8x4",
+			med: "n2fy8x5",
+			lg: "n2fy8x6"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { n as iconButton, t as root };

package/dist/IconButton/index.d.mts

@@ -0,0 +1,17 @@
+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/IconButton/index.d.ts
+export type IconButtonOwnProps = {
+  icon: ComponentType<IconProps>;
+  label: string;
+  size?: "sm" | "med" | "lg";
+  variant?: "primary" | "secondary";
+};
+export type IconButtonProps<T extends ElementType = "button"> = {
+  as?: T;
+} & StyleProps & IconButtonOwnProps & Omit<ClickableOwnProps, "busy"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | keyof IconButtonOwnProps | "aria-disabled" | "aria-busy" | "aria-label" | "aria-labelledby" | "children">;
+export declare function IconButton<T extends ElementType = "button">({ label, icon: IconComponent, variant, size, minInlineSize, minBlockSize, borderRadius, backgroundColor, color, className, ...props }: IconButtonProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/IconButton/index.mjs

@@ -0,0 +1,25 @@
+import { join as e } from "../styles/join.mjs";
+import { Clickable as t } from "../Clickable/index.mjs";
+import { fills as n } from "../styles/button-fills.mjs";
+import { iconButton as r, root as i } from "./IconButton.css.mjs";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/IconButton/index.tsx
+function o({ label: o, icon: s, variant: c = "secondary", size: l = "med", minInlineSize: u = l, minBlockSize: d = l, borderRadius: f = "med", backgroundColor: p = n[c].backgroundColor, color: m = n[c].color, className: h, ...g }) {
+	return /* @__PURE__ */ a(t, {
+		...g,
+		"aria-label": o,
+		"aria-labelledby": void 0,
+		backgroundColor: p,
+		borderRadius: f,
+		className: e(i, r({
+			variant: c,
+			size: l
+		}), h),
+		color: m,
+		minBlockSize: d,
+		minInlineSize: u,
+		children: /* @__PURE__ */ a(s, { size: l })
+	});
+}
+//#endregion
+export { o as IconButton };

package/dist/Inline/Inline.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.inline;

package/dist/Inline/Inline.css.mjs

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

package/dist/Inline/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/Inline/index.d.ts
+type Gap = StyleProps["gap"];
+type Token = Extract<Gap, string>;
+export type InlineProps<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 Inline<T extends ElementType = "div">({ display, flexDirection, flexWrap, alignItems, className, ...props }: InlineProps<T>): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/Inline/index.mjs

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

package/dist/Menu/Menu.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.menu{._393eil0{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil0[data-starting-style],._393eil0[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil1{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil1[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil2{border-block-start:var(--space-1) solid var(--color-border)}@media (forced-colors:active){._393eil1[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil1[aria-disabled=true]{color:graytext}}}

package/dist/Menu/Menu.css.mjs

@@ -0,0 +1,8 @@
+import "../styles/layers.css";
+import "./Menu.css";
+/* empty css                               */
+/* empty css                     */
+//#region src/Menu/Menu.css.ts
+var e = "_393eil0", t = "_393eil1", n = "_393eil2";
+//#endregion
+export { t as item, e as popup, n as separator };

package/dist/Menu/client.d.mts

@@ -0,0 +1,9 @@
+import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
+import { ReactNode } from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/Menu/client.d.ts
+type TriggerOwnProps = Omit<Menu.Trigger.Props, "render" | "className" | "style" | "nativeButton">;
+export type MenuTriggerProps = TriggerOwnProps & TriggerLookProps & Omit<TriggerElementProps, keyof TriggerLookProps | keyof TriggerOwnProps>;
+export declare function MenuTrigger({ disabled, openOnHover, delay, closeDelay, handle, payload, ...props }: MenuTriggerProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/Menu/client.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import { Menu as r } from "@base-ui/react/menu";
+//#region src/Menu/client.tsx
+function i({ disabled: i = !1, openOnHover: a, delay: o, closeDelay: s, handle: c, payload: l, ...u }) {
+	let { ref: d } = t();
+	return /* @__PURE__ */ n(r.Trigger, {
+		disabled: i,
+		openOnHover: a,
+		delay: o,
+		closeDelay: s,
+		handle: c,
+		payload: l,
+		ref: d,
+		render: e(u)
+	});
+}
+function a({ children: e }) {
+	let { container: i } = t();
+	return /* @__PURE__ */ n(r.Portal, {
+		container: i,
+		children: e
+	});
+}
+//#endregion
+export { a as MenuPortal, i as MenuTrigger };