base-themes 0.1.0

package/dist/base-themes.js

@@ -0,0 +1,918 @@
+import { Accordion as e } from "@base-ui/react/accordion";
+import { forwardRef as t, useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
+import o from "clsx";
+import { Bold as s, Check as c, ChevronDown as l, Italic as ee, Link as te, Minus as ne, Plus as re, Search as ie, X as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { AlertDialog as p } from "@base-ui/react/alert-dialog";
+import { Autocomplete as m } from "@base-ui/react/autocomplete";
+import { Avatar as h } from "@base-ui/react/avatar";
+import { Button as ae } from "@base-ui/react/button";
+import { Checkbox as g } from "@base-ui/react/checkbox";
+import { CheckboxGroup as oe } from "@base-ui/react/checkbox-group";
+import { Collapsible as _ } from "@base-ui/react/collapsible";
+import { Combobox as v } from "@base-ui/react/combobox";
+import { ContextMenu as y } from "@base-ui/react/context-menu";
+import { CSPProvider as se } from "@base-ui/react/csp-provider";
+import { Dialog as b } from "@base-ui/react/dialog";
+import { DirectionProvider as ce, useDirection as le } from "@base-ui/react/direction-provider";
+import { Drawer as x } from "@base-ui/react/drawer";
+import { Field as S } from "@base-ui/react/field";
+import { Fieldset as C } from "@base-ui/react/fieldset";
+import { Form as ue } from "@base-ui/react/form";
+import { Input as de } from "@base-ui/react/input";
+import { Menu as w, Menu as T } from "@base-ui/react/menu";
+import { Menubar as fe } from "@base-ui/react/menubar";
+import { Meter as E } from "@base-ui/react/meter";
+import { NavigationMenu as D } from "@base-ui/react/navigation-menu";
+import { NumberField as O } from "@base-ui/react/number-field";
+import { OTPFieldPreview as k } from "@base-ui/react/otp-field";
+import { Popover as A } from "@base-ui/react/popover";
+import { PreviewCard as j } from "@base-ui/react/preview-card";
+import { Progress as M } from "@base-ui/react/progress";
+import { Radio as N, Radio as P } from "@base-ui/react/radio";
+import { RadioGroup as pe } from "@base-ui/react/radio-group";
+import { ScrollArea as F } from "@base-ui/react/scroll-area";
+import { Select as I } from "@base-ui/react/select";
+import { Separator as me } from "@base-ui/react/separator";
+import { Slider as L } from "@base-ui/react/slider";
+import { Switch as he } from "@base-ui/react/switch";
+import { Tabs as R } from "@base-ui/react/tabs";
+import { Toggle as z } from "@base-ui/react/toggle";
+import { Toast as B } from "@base-ui/react/toast";
+import { ToggleGroup as ge } from "@base-ui/react/toggle-group";
+import { Toolbar as V } from "@base-ui/react/toolbar";
+import { Tooltip as H } from "@base-ui/react/tooltip";
+//#region src/components/ui/Accordion.tsx
+function _e({ items: t, defaultValue: n, className: r, ...i }) {
+	return /* @__PURE__ */ d(e.Root, {
+		defaultValue: n ?? t.slice(0, 1).map((e) => e.value),
+		className: o("bento-accordion", r),
+		...i,
+		children: t.map((t) => /* @__PURE__ */ f(e.Item, {
+			className: "bento-accordion-item",
+			value: t.value,
+			children: [/* @__PURE__ */ d(e.Header, {
+				className: "bento-accordion-header",
+				children: /* @__PURE__ */ f(e.Trigger, {
+					className: "bento-accordion-trigger",
+					children: [t.label, /* @__PURE__ */ d(l, { size: 15 })]
+				})
+			}), /* @__PURE__ */ d(e.Panel, {
+				className: "bento-accordion-panel",
+				children: t.content
+			})]
+		}, t.value))
+	});
+}
+//#endregion
+//#region src/components/ui/AlertDialog.tsx
+function ve({ trigger: e, title: t, description: n, confirmLabel: r = "Confirm", cancelLabel: i = "Cancel", onConfirm: a, className: s }) {
+	return /* @__PURE__ */ f(p.Root, { children: [/* @__PURE__ */ d(p.Trigger, { render: e }), /* @__PURE__ */ f(p.Portal, { children: [/* @__PURE__ */ d(p.Backdrop, { className: "bento-alert-backdrop" }), /* @__PURE__ */ f(p.Popup, {
+		className: o("bento-alert-popup", s),
+		children: [
+			/* @__PURE__ */ d(p.Title, {
+				className: "bento-alert-title",
+				children: t
+			}),
+			/* @__PURE__ */ d(p.Description, {
+				className: "bento-alert-description",
+				children: n
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "bento-alert-actions",
+				children: [/* @__PURE__ */ f(p.Close, {
+					className: "bento-button outline",
+					children: [" ", i]
+				}), /* @__PURE__ */ d(p.Close, {
+					className: "bento-button accent",
+					onClick: a,
+					children: r
+				})]
+			})
+		]
+	})] })] });
+}
+//#endregion
+//#region src/components/ui/Autocomplete.tsx
+function ye({ options: e, label: t, placeholder: n = "Search...", className: r, ...i }) {
+	return /* @__PURE__ */ d("div", {
+		className: o("bento-combobox bento-autocomplete", r),
+		children: /* @__PURE__ */ f(m.Root, {
+			items: e,
+			...i,
+			children: [
+				t && /* @__PURE__ */ d("label", {
+					className: "field-label",
+					children: t
+				}),
+				/* @__PURE__ */ f(m.InputGroup, {
+					className: "bento-combobox-input-wrap",
+					children: [/* @__PURE__ */ d(ie, { size: 15 }), /* @__PURE__ */ d(m.Input, {
+						className: "bento-combobox-input",
+						placeholder: n
+					})]
+				}),
+				/* @__PURE__ */ d(m.Portal, { children: /* @__PURE__ */ d(m.Positioner, {
+					className: "bento-combobox-positioner",
+					sideOffset: 8,
+					children: /* @__PURE__ */ f(m.Popup, {
+						className: "bento-combobox-popup",
+						children: [/* @__PURE__ */ d(m.Empty, {
+							className: "bento-combobox-empty",
+							children: "No results"
+						}), /* @__PURE__ */ d(m.List, { children: (e) => /* @__PURE__ */ f(m.Item, {
+							className: "bento-combobox-item",
+							value: e.value,
+							children: [/* @__PURE__ */ d(m.Value, { children: e.label }), /* @__PURE__ */ d(c, { size: 14 })]
+						}, e.value) })]
+					})
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/Avatar.tsx
+var U = t(({ src: e, alt: t, fallback: n, size: r, className: i, ...a }, s) => /* @__PURE__ */ f(h.Root, {
+	ref: s,
+	className: o("bento-avatar", r && r !== "md" && r, i),
+	...a,
+	children: [e && /* @__PURE__ */ d(h.Image, {
+		src: e,
+		alt: t
+	}), /* @__PURE__ */ d(h.Fallback, { children: n })]
+}));
+U.displayName = "Avatar";
+var W = t(({ className: e, ...t }, n) => /* @__PURE__ */ d("div", {
+	ref: n,
+	className: o("bento-avatar-group", e),
+	...t
+}));
+W.displayName = "AvatarGroup";
+//#endregion
+//#region src/components/ui/Button.tsx
+var G = t(({ variant: e = "primary", className: t, ...n }, r) => /* @__PURE__ */ d(ae, {
+	ref: r,
+	className: o("bento-button", e !== "primary" && e, t),
+	...n
+}));
+G.displayName = "Button";
+//#endregion
+//#region src/components/ui/Checkbox.tsx
+var K = t(({ label: e, className: t, id: n, ...r }, i) => {
+	let a = /* @__PURE__ */ d(g.Root, {
+		ref: i,
+		id: n,
+		className: o("bento-checkbox", t),
+		...r,
+		children: /* @__PURE__ */ d(g.Indicator, { children: /* @__PURE__ */ d(c, { size: 14 }) })
+	});
+	return e ? /* @__PURE__ */ f("label", {
+		className: "bento-checkbox-label",
+		htmlFor: n,
+		children: [a, e]
+	}) : a;
+});
+K.displayName = "Checkbox";
+//#endregion
+//#region src/components/ui/CheckboxGroup.tsx
+function be({ options: e, className: t, defaultValue: n, ...r }) {
+	return /* @__PURE__ */ d(oe, {
+		className: o("bento-checkbox-group", t),
+		defaultValue: n,
+		...r,
+		children: e.map((e) => /* @__PURE__ */ d(K, {
+			name: e.value,
+			value: e.value,
+			label: e.label
+		}, e.value))
+	});
+}
+//#endregion
+//#region src/components/ui/Collapsible.tsx
+function xe({ label: e, children: t, defaultOpen: n, className: r }) {
+	return /* @__PURE__ */ f(_.Root, {
+		defaultOpen: n,
+		className: o("bento-collapsible", r),
+		children: [/* @__PURE__ */ f(_.Trigger, {
+			className: "bento-collapsible-trigger",
+			children: [e, /* @__PURE__ */ d(l, { size: 15 })]
+		}), /* @__PURE__ */ d(_.Panel, {
+			className: "bento-collapsible-panel",
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/Combobox.tsx
+function Se({ options: e, placeholder: t = "Search...", label: n, className: r }) {
+	let [i, s] = a(""), c = e.filter((e) => e.label.toLowerCase().includes(i.toLowerCase()));
+	return /* @__PURE__ */ f("div", {
+		className: o("bento-combobox", r),
+		children: [n && /* @__PURE__ */ d("label", {
+			className: "field-label",
+			children: n
+		}), /* @__PURE__ */ f(v.Root, {
+			inputValue: i,
+			onInputValueChange: s,
+			children: [/* @__PURE__ */ d(v.Input, {
+				className: "bento-combobox-input",
+				placeholder: t
+			}), /* @__PURE__ */ d(v.Portal, { children: /* @__PURE__ */ d(v.Positioner, {
+				sideOffset: 8,
+				children: /* @__PURE__ */ d(v.Popup, {
+					className: "bento-combobox-popup",
+					children: c.length === 0 ? /* @__PURE__ */ d("div", {
+						className: "bento-combobox-no-results",
+						children: "No results"
+					}) : c.map((e) => /* @__PURE__ */ d(v.Item, {
+						className: "bento-combobox-item",
+						value: e.value,
+						children: e.label
+					}, e.value))
+				})
+			}) })]
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/ContextMenu.tsx
+function Ce({ children: e, items: t, className: n }) {
+	return /* @__PURE__ */ f(y.Root, { children: [/* @__PURE__ */ d(y.Trigger, {
+		className: "bento-context-menu-trigger",
+		children: e
+	}), /* @__PURE__ */ d(y.Portal, { children: /* @__PURE__ */ d(y.Positioner, {
+		className: "bento-menu-positioner",
+		sideOffset: 8,
+		children: /* @__PURE__ */ d(y.Popup, {
+			className: o("bento-menu-popup", n),
+			children: t.map((e, t) => e === "separator" ? /* @__PURE__ */ d(y.Separator, { className: "bento-menu-separator" }, t) : /* @__PURE__ */ f(y.Item, {
+				className: "bento-menu-item",
+				disabled: e.disabled,
+				onClick: e.onClick,
+				children: [e.icon, e.label]
+			}, t))
+		})
+	}) })] });
+}
+//#endregion
+//#region src/components/ui/CspProvider.tsx
+function we(e) {
+	return /* @__PURE__ */ d(se, { ...e });
+}
+//#endregion
+//#region src/components/ui/Dialog.tsx
+function Te({ trigger: e, title: t, description: n, children: r, className: i }) {
+	return /* @__PURE__ */ f(b.Root, { children: [/* @__PURE__ */ d(b.Trigger, { render: e }), /* @__PURE__ */ f(b.Portal, { children: [/* @__PURE__ */ d(b.Backdrop, { className: "bento-dialog-backdrop" }), /* @__PURE__ */ f(b.Popup, {
+		className: o("bento-dialog-popup", i),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "bento-dialog-topline",
+				children: [/* @__PURE__ */ d(b.Title, {
+					className: "bento-dialog-title",
+					children: t
+				}), /* @__PURE__ */ d(b.Close, {
+					className: "bento-button icon",
+					"aria-label": "Close dialog",
+					render: /* @__PURE__ */ d("button", { type: "button" }),
+					children: /* @__PURE__ */ d(u, { size: 18 })
+				})]
+			}),
+			n && /* @__PURE__ */ d(b.Description, {
+				className: "bento-dialog-description",
+				children: n
+			}),
+			r
+		]
+	})] })] });
+}
+//#endregion
+//#region src/components/ui/DirectionProvider.tsx
+function Ee({ children: e, direction: t = "ltr" }) {
+	return /* @__PURE__ */ d(ce, {
+		direction: t,
+		children: /* @__PURE__ */ d("span", {
+			dir: t,
+			style: { display: "contents" },
+			children: e
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/Drawer.tsx
+function De({ trigger: e, title: t, description: n, children: r, side: i = "right", className: a }) {
+	return /* @__PURE__ */ f(x.Root, { children: [/* @__PURE__ */ d(x.Trigger, { render: e }), /* @__PURE__ */ f(x.Portal, { children: [/* @__PURE__ */ d(x.Backdrop, { className: "bento-drawer-backdrop" }), /* @__PURE__ */ f(x.Popup, {
+		className: o("bento-drawer-popup", a),
+		"data-side": i,
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "bento-drawer-header",
+				children: [/* @__PURE__ */ d(x.Title, {
+					className: "bento-drawer-title",
+					children: t
+				}), /* @__PURE__ */ d(x.Close, {
+					className: "bento-button icon",
+					"aria-label": "Close drawer",
+					render: /* @__PURE__ */ d("button", { type: "button" }),
+					children: /* @__PURE__ */ d(u, { size: 18 })
+				})]
+			}),
+			n && /* @__PURE__ */ d(x.Description, {
+				className: "bento-drawer-description",
+				children: n
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "bento-drawer-body",
+				children: r
+			})
+		]
+	})] })] });
+}
+//#endregion
+//#region src/components/ui/Field.tsx
+function Oe({ label: e, description: t, error: n, children: r, className: i, ...a }) {
+	return /* @__PURE__ */ f(S.Root, {
+		className: o("bento-field", i),
+		invalid: !!n,
+		...a,
+		children: [
+			/* @__PURE__ */ d(S.Label, {
+				className: "field-label",
+				children: e
+			}),
+			/* @__PURE__ */ d(S.Control, { render: r }),
+			t && /* @__PURE__ */ d(S.Description, {
+				className: "bento-field-description",
+				children: t
+			}),
+			n && /* @__PURE__ */ d(S.Error, {
+				className: "bento-field-error",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ui/Fieldset.tsx
+function ke({ legend: e, children: t, className: n, ...r }) {
+	return /* @__PURE__ */ f(C.Root, {
+		className: o("bento-fieldset", n),
+		...r,
+		children: [/* @__PURE__ */ d(C.Legend, {
+			className: "bento-fieldset-legend",
+			children: e
+		}), t]
+	});
+}
+//#endregion
+//#region src/components/ui/Form.tsx
+var q = t(({ className: e, ...t }, n) => /* @__PURE__ */ d(ue, {
+	ref: n,
+	className: o("bento-form", e),
+	...t
+}));
+q.displayName = "Form";
+//#endregion
+//#region src/components/ui/Input.tsx
+var J = t(({ label: e, className: t, id: n, ...r }, i) => {
+	let a = /* @__PURE__ */ d(de, {
+		ref: i,
+		id: n,
+		className: o("bento-input", t),
+		...r
+	});
+	return e ? /* @__PURE__ */ f("div", {
+		className: "bento-field",
+		children: [/* @__PURE__ */ d("label", {
+			className: "bento-field-label",
+			htmlFor: n,
+			children: e
+		}), a]
+	}) : a;
+});
+J.displayName = "Input";
+var Y = t(({ label: e, className: t, id: n, ...r }, i) => {
+	let a = /* @__PURE__ */ d("textarea", {
+		ref: i,
+		id: n,
+		className: o("bento-textarea", t),
+		...r
+	});
+	return e ? /* @__PURE__ */ f("div", {
+		className: "bento-field",
+		children: [/* @__PURE__ */ d("label", {
+			className: "bento-field-label",
+			htmlFor: n,
+			children: e
+		}), a]
+	}) : a;
+});
+Y.displayName = "Textarea";
+//#endregion
+//#region src/components/ui/Menu.tsx
+function Ae({ trigger: e, items: t, className: n }) {
+	return /* @__PURE__ */ f(w.Root, { children: [/* @__PURE__ */ d(w.Trigger, { render: e }), /* @__PURE__ */ d(w.Portal, { children: /* @__PURE__ */ d(w.Positioner, {
+		className: "bento-menu-positioner",
+		sideOffset: 8,
+		children: /* @__PURE__ */ d(w.Popup, {
+			className: o("bento-menu-popup", n),
+			children: t.map((e, t) => e === "separator" ? /* @__PURE__ */ d(w.Separator, { className: "bento-menu-separator" }, t) : /* @__PURE__ */ f(w.Item, {
+				className: "bento-menu-item",
+				disabled: e.disabled,
+				onClick: e.onClick,
+				children: [e.icon, e.label]
+			}, t))
+		})
+	}) })] });
+}
+//#endregion
+//#region src/components/ui/Menubar.tsx
+function je({ menus: e, className: t }) {
+	return /* @__PURE__ */ d(fe, {
+		className: o("bento-menubar", t),
+		children: e.map((e) => /* @__PURE__ */ f(T.Root, { children: [/* @__PURE__ */ d(T.Trigger, {
+			className: "bento-menubar-trigger",
+			children: e.label
+		}), /* @__PURE__ */ d(T.Portal, { children: /* @__PURE__ */ d(T.Positioner, {
+			className: "bento-menu-positioner",
+			sideOffset: 8,
+			children: /* @__PURE__ */ d(T.Popup, {
+				className: "bento-menu-popup",
+				children: e.items.map((e) => /* @__PURE__ */ f(T.Item, {
+					className: "bento-menu-item",
+					disabled: e.disabled,
+					children: [e.icon, e.label]
+				}, e.label))
+			})
+		}) })] }, e.label))
+	});
+}
+//#endregion
+//#region src/components/ui/Meter.tsx
+var X = t(({ value: e = 0, min: t = 0, max: n = 100, showValue: r, className: a, ...s }, c) => {
+	let l = (e - t) / (n - t) * 100, ee = i(() => l >= 80 ? "bento-meter-high" : l < 30 ? "bento-meter-low" : "bento-meter-mid", [l]);
+	return /* @__PURE__ */ f("div", {
+		className: o("bento-meter", a),
+		children: [r && /* @__PURE__ */ f("div", {
+			className: "bento-meter-label",
+			children: [/* @__PURE__ */ d("span", { children: s["aria-label"] ?? "Meter" }), /* @__PURE__ */ f("span", {
+				className: "bento-meter-value",
+				children: [Math.round(l), "%"]
+			})]
+		}), /* @__PURE__ */ d(E.Root, {
+			ref: c,
+			value: e,
+			min: t,
+			max: n,
+			...s,
+			children: /* @__PURE__ */ d(E.Track, {
+				className: "bento-meter-track",
+				children: /* @__PURE__ */ d(E.Indicator, { className: o("bento-meter-indicator", ee) })
+			})
+		})]
+	});
+});
+X.displayName = "Meter";
+//#endregion
+//#region src/components/ui/NavigationMenu.tsx
+function Me({ items: e, className: t }) {
+	return /* @__PURE__ */ d(D.Root, {
+		className: o("bento-nav-menu", t),
+		children: /* @__PURE__ */ d(D.List, {
+			className: "bento-nav-menu-list",
+			children: e.map((e, t) => e.children ? /* @__PURE__ */ f(D.Item, { children: [/* @__PURE__ */ f(D.Trigger, {
+				className: "bento-nav-menu-trigger",
+				children: [e.label, /* @__PURE__ */ d(l, { size: 14 })]
+			}), /* @__PURE__ */ d(D.Portal, { children: /* @__PURE__ */ d(D.Positioner, {
+				sideOffset: 8,
+				children: /* @__PURE__ */ d(D.Popup, {
+					className: "bento-nav-menu-popup",
+					children: e.children.map((e, t) => /* @__PURE__ */ d(D.Item, {
+						className: "bento-nav-menu-item",
+						render: /* @__PURE__ */ d("a", { href: e.href }),
+						children: e.label
+					}, t))
+				})
+			}) })] }, t) : /* @__PURE__ */ d(D.Item, { children: /* @__PURE__ */ d(D.Link, {
+				className: "bento-nav-menu-trigger",
+				href: e.href,
+				render: /* @__PURE__ */ d("a", { href: e.href }),
+				children: e.label
+			}) }, t))
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/NumberField.tsx
+function Ne({ label: e, className: t, ...n }) {
+	return /* @__PURE__ */ f(O.Root, {
+		className: o("bento-number-field", t),
+		...n,
+		children: [e && /* @__PURE__ */ d("label", {
+			className: "field-label",
+			children: e
+		}), /* @__PURE__ */ f(O.Group, {
+			className: "bento-number-field-group",
+			children: [
+				/* @__PURE__ */ d(O.Decrement, {
+					className: "bento-number-field-button",
+					"aria-label": "Decrease",
+					children: /* @__PURE__ */ d(ne, { size: 14 })
+				}),
+				/* @__PURE__ */ d(O.Input, { className: "bento-number-field-input" }),
+				/* @__PURE__ */ d(O.Increment, {
+					className: "bento-number-field-button",
+					"aria-label": "Increase",
+					children: /* @__PURE__ */ d(re, { size: 14 })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/OtpField.tsx
+function Pe({ length: e = 6, label: t, className: n, ...r }) {
+	return /* @__PURE__ */ f(k.Root, {
+		className: o("bento-otp-field", n),
+		length: e,
+		...r,
+		children: [t && /* @__PURE__ */ d("label", {
+			className: "field-label",
+			children: t
+		}), /* @__PURE__ */ d("div", {
+			className: "bento-otp-inputs",
+			children: Array.from({ length: e }, (e, t) => /* @__PURE__ */ d(k.Input, { className: "bento-otp-input" }, t))
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/Popover.tsx
+function Fe({ trigger: e, title: t, description: n, children: r, className: i }) {
+	return /* @__PURE__ */ f(A.Root, { children: [/* @__PURE__ */ d(A.Trigger, { render: e }), /* @__PURE__ */ d(A.Portal, { children: /* @__PURE__ */ d(A.Positioner, {
+		sideOffset: 10,
+		children: /* @__PURE__ */ f(A.Popup, {
+			className: o("bento-popover-popup", i),
+			children: [
+				/* @__PURE__ */ d(A.Arrow, { className: "bento-popover-arrow" }),
+				t && /* @__PURE__ */ d(A.Title, {
+					className: "bento-popover-title",
+					children: t
+				}),
+				n && /* @__PURE__ */ d(A.Description, {
+					className: "bento-popover-description",
+					children: n
+				}),
+				r
+			]
+		})
+	}) })] });
+}
+//#endregion
+//#region src/components/ui/PreviewCard.tsx
+function Ie({ trigger: e, title: t, description: n, imageUrl: r, imageAlt: i, className: a }) {
+	return /* @__PURE__ */ f(j.Root, { children: [/* @__PURE__ */ d(j.Trigger, { render: e }), /* @__PURE__ */ d(j.Portal, { children: /* @__PURE__ */ d(j.Positioner, {
+		sideOffset: 10,
+		children: /* @__PURE__ */ f(j.Popup, {
+			className: o("bento-preview-card", a),
+			children: [
+				/* @__PURE__ */ d(j.Arrow, { className: "bento-preview-card-arrow" }),
+				r && /* @__PURE__ */ d("img", {
+					src: r,
+					alt: i ?? ""
+				}),
+				/* @__PURE__ */ d("h3", {
+					className: "bento-preview-card-title",
+					children: t
+				}),
+				n && /* @__PURE__ */ d("p", {
+					className: "bento-preview-card-description",
+					children: n
+				})
+			]
+		})
+	}) })] });
+}
+//#endregion
+//#region src/components/ui/Progress.tsx
+var Le = t(({ value: e, showValue: t, className: n, ...r }, i) => /* @__PURE__ */ f("div", {
+	className: o("bento-progress", n),
+	children: [t && /* @__PURE__ */ f("div", {
+		className: "bento-progress-label",
+		children: [/* @__PURE__ */ d("span", { children: r["aria-label"] ?? "Progress" }), /* @__PURE__ */ f("span", {
+			className: "bento-progress-value",
+			children: [e ?? 0, "%"]
+		})]
+	}), /* @__PURE__ */ d(M.Root, {
+		ref: i,
+		value: e,
+		...r,
+		children: /* @__PURE__ */ d(M.Track, {
+			className: "bento-progress-track",
+			children: /* @__PURE__ */ d(M.Indicator, { className: "bento-progress-indicator" })
+		})
+	})]
+}));
+Le.displayName = "Progress";
+//#endregion
+//#region src/components/ui/Radio.tsx
+function Re({ label: e, className: t, ...n }) {
+	let r = /* @__PURE__ */ d(N.Root, {
+		className: o("bento-radio", t),
+		...n,
+		children: /* @__PURE__ */ d(N.Indicator, { className: "bento-radio-indicator" })
+	});
+	return e ? /* @__PURE__ */ f("label", {
+		className: "bento-radio-label",
+		children: [r, e]
+	}) : r;
+}
+//#endregion
+//#region src/components/ui/RadioGroup.tsx
+function ze({ options: e, defaultValue: t, className: n, ...r }) {
+	return /* @__PURE__ */ d(pe, {
+		defaultValue: t,
+		className: o("bento-radio-group", n),
+		...r,
+		children: e.map((e) => /* @__PURE__ */ f("label", {
+			className: "bento-radio-label",
+			children: [/* @__PURE__ */ d(P.Root, {
+				className: "bento-radio",
+				value: e.value,
+				children: /* @__PURE__ */ d(P.Indicator, { className: "bento-radio-indicator" })
+			}), e.label]
+		}, e.value))
+	});
+}
+//#endregion
+//#region src/components/ui/ScrollArea.tsx
+var Be = t(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ f(F.Root, {
+	ref: r,
+	className: o("bento-scroll-area", e),
+	...n,
+	children: [
+		/* @__PURE__ */ d(F.Viewport, {
+			className: "bento-scroll-area-viewport",
+			children: t
+		}),
+		/* @__PURE__ */ d(F.Scrollbar, {
+			className: "bento-scroll-area-scrollbar",
+			children: /* @__PURE__ */ d(F.Thumb, { className: "bento-scroll-area-thumb" })
+		}),
+		/* @__PURE__ */ d(F.Corner, { className: "bento-scroll-area-corner" })
+	]
+}));
+Be.displayName = "ScrollArea";
+//#endregion
+//#region src/components/ui/Select.tsx
+function Ve({ items: e, label: t, placeholder: n, defaultValue: r, ...i }) {
+	return /* @__PURE__ */ f(I.Root, {
+		defaultValue: r,
+		items: e,
+		...i,
+		children: [
+			t && /* @__PURE__ */ d("label", {
+				className: "field-label",
+				htmlFor: i.id,
+				children: t
+			}),
+			/* @__PURE__ */ f(I.Trigger, {
+				id: i.id,
+				className: "bento-select-trigger",
+				children: [/* @__PURE__ */ d(I.Value, { placeholder: n }), /* @__PURE__ */ d(I.Icon, { children: /* @__PURE__ */ d(l, { size: 16 }) })]
+			}),
+			/* @__PURE__ */ d(I.Portal, { children: /* @__PURE__ */ d(I.Positioner, {
+				className: "bento-select-positioner",
+				sideOffset: 8,
+				children: /* @__PURE__ */ d(I.Popup, {
+					className: o("bento-select-popup"),
+					children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ f(I.Item, {
+						className: "bento-select-item",
+						value: e,
+						children: [/* @__PURE__ */ d(I.ItemIndicator, { children: /* @__PURE__ */ d(c, { size: 15 }) }), /* @__PURE__ */ d(I.ItemText, { children: t })]
+					}, e))
+				})
+			}) })
+		]
+	});
+}
+//#endregion
+//#region src/components/ui/Separator.tsx
+var He = t(({ className: e, ...t }, n) => /* @__PURE__ */ d(me, {
+	ref: n,
+	className: o("bento-separator", e),
+	...t
+}));
+He.displayName = "Separator";
+//#endregion
+//#region src/components/ui/Slider.tsx
+var Ue = t(({ className: e, ...t }, n) => /* @__PURE__ */ d(L.Root, {
+	ref: n,
+	className: o("bento-slider", e),
+	...t,
+	children: /* @__PURE__ */ d(L.Control, {
+		className: "bento-slider-control",
+		children: /* @__PURE__ */ f(L.Track, {
+			className: "bento-slider-track",
+			children: [/* @__PURE__ */ d(L.Indicator, { className: "bento-slider-indicator" }), /* @__PURE__ */ d(L.Thumb, { className: "bento-slider-thumb" })]
+		})
+	})
+}));
+Ue.displayName = "Slider";
+//#endregion
+//#region src/components/ui/Switch.tsx
+var We = t(({ label: e, className: t, id: n, ...r }, i) => {
+	let a = /* @__PURE__ */ d(he.Root, {
+		ref: i,
+		id: n,
+		className: o("bento-switch", t),
+		...r,
+		children: /* @__PURE__ */ d(he.Thumb, { className: "bento-switch-thumb" })
+	});
+	return e ? /* @__PURE__ */ f("label", {
+		className: "bento-switch-label",
+		htmlFor: n,
+		children: [a, e]
+	}) : a;
+});
+We.displayName = "Switch";
+//#endregion
+//#region src/components/ui/Tabs.tsx
+function Ge({ panels: e, defaultValue: t, className: n, ...r }) {
+	return /* @__PURE__ */ f(R.Root, {
+		defaultValue: t ?? e[0]?.value,
+		className: o("bento-tabs", n),
+		...r,
+		children: [/* @__PURE__ */ f(R.List, {
+			className: o("bento-tabs-list", `cols-${e.length}`),
+			children: [e.map((e) => /* @__PURE__ */ d(R.Tab, {
+				className: "bento-tabs-tab",
+				value: e.value,
+				children: e.label
+			}, e.value)), /* @__PURE__ */ d(R.Indicator, { className: "bento-tabs-indicator" })]
+		}), e.map((e) => /* @__PURE__ */ f(R.Panel, {
+			className: "bento-tabs-panel",
+			value: e.value,
+			children: [e.title && /* @__PURE__ */ d("strong", {
+				className: "bento-tabs-panel-title",
+				children: e.title
+			}), /* @__PURE__ */ d("p", { children: e.content })]
+		}, e.value))]
+	});
+}
+//#endregion
+//#region src/components/ui/Toggle.tsx
+var Ke = t(({ className: e, ...t }, n) => /* @__PURE__ */ d(z, {
+	ref: n,
+	className: o("bento-toggle", e),
+	...t
+}));
+Ke.displayName = "Toggle";
+//#endregion
+//#region src/components/ui/Toast.tsx
+function qe() {
+	let { toasts: e } = B.useToastManager();
+	return e.length === 0 ? null : /* @__PURE__ */ d("div", {
+		className: "bento-toast-provider",
+		children: e.map((e) => /* @__PURE__ */ f(B.Root, {
+			className: "bento-toast",
+			toast: e,
+			children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d(B.Title, {
+				className: "bento-toast-title",
+				children: e.title
+			}), e.description && /* @__PURE__ */ d(B.Description, {
+				className: "bento-toast-description",
+				children: e.description
+			})] }), /* @__PURE__ */ d(B.Close, {
+				className: "bento-toast-close",
+				"aria-label": "Dismiss",
+				render: /* @__PURE__ */ d("button", { type: "button" }),
+				children: /* @__PURE__ */ d(u, { size: 15 })
+			})]
+		}, e.id))
+	});
+}
+function Je({ children: e }) {
+	return /* @__PURE__ */ f(B.Provider, { children: [e, /* @__PURE__ */ d(qe, {})] });
+}
+//#endregion
+//#region src/components/ui/useToastManager.ts
+function Ye() {
+	let e = B.useToastManager();
+	return {
+		add: (t, n) => e.add({
+			title: t,
+			description: n
+		}),
+		close: (t) => e.close(t)
+	};
+}
+//#endregion
+//#region src/components/ui/ToggleGroup.tsx
+function Xe({ options: e, defaultValue: t, className: n, ...r }) {
+	return /* @__PURE__ */ d(ge, {
+		defaultValue: t,
+		className: o("bento-toggle-group", n),
+		...r,
+		children: e.map((e) => /* @__PURE__ */ d(z, {
+			className: "bento-toggle",
+			value: e.value,
+			children: e.label
+		}, e.value))
+	});
+}
+//#endregion
+//#region src/components/ui/Toolbar.tsx
+function Ze({ className: e, showSearch: t = !0, ...n }) {
+	return /* @__PURE__ */ f(V.Root, {
+		className: o("bento-toolbar", e),
+		...n,
+		children: [/* @__PURE__ */ f(V.Group, {
+			className: "bento-toolbar-group",
+			children: [
+				/* @__PURE__ */ d(Qe, {
+					"aria-label": "Bold",
+					children: /* @__PURE__ */ d(s, { size: 15 })
+				}),
+				/* @__PURE__ */ d(Qe, {
+					"aria-label": "Italic",
+					children: /* @__PURE__ */ d(ee, { size: 15 })
+				}),
+				/* @__PURE__ */ d(V.Separator, { className: "bento-toolbar-separator" }),
+				/* @__PURE__ */ d(V.Link, {
+					className: "bento-toolbar-button",
+					href: "https://base-ui.com",
+					target: "_blank",
+					rel: "noreferrer",
+					"aria-label": "Base UI docs",
+					children: /* @__PURE__ */ d(te, { size: 15 })
+				})
+			]
+		}), t && /* @__PURE__ */ f("div", {
+			className: "bento-toolbar-search",
+			children: [/* @__PURE__ */ d(ie, { size: 14 }), /* @__PURE__ */ d(V.Input, {
+				className: "bento-toolbar-input",
+				placeholder: "Search docs"
+			})]
+		})]
+	});
+}
+function Qe({ children: e, ...t }) {
+	return /* @__PURE__ */ d(V.Button, {
+		className: "bento-toolbar-button",
+		...t,
+		children: e
+	});
+}
+//#endregion
+//#region src/components/ui/Tooltip.tsx
+function $e({ content: e, children: t, className: n }) {
+	return /* @__PURE__ */ f(H.Root, { children: [/* @__PURE__ */ d(H.Trigger, { render: t }), /* @__PURE__ */ d(H.Portal, { children: /* @__PURE__ */ d(H.Positioner, {
+		sideOffset: 8,
+		children: /* @__PURE__ */ f(H.Popup, {
+			className: o("bento-tooltip-popup", n),
+			children: [e, /* @__PURE__ */ d(H.Arrow, { className: "bento-tooltip-arrow" })]
+		})
+	}) })] });
+}
+$e.Provider = H.Provider;
+//#endregion
+//#region src/hooks/useTheme.ts
+function et() {
+	if (typeof window > "u") return "system";
+	let e = localStorage.getItem("bento-theme");
+	return e === "light" || e === "dark" || e === "system" ? e : "system";
+}
+function tt() {
+	if (typeof window > "u") return "bento";
+	let e = localStorage.getItem("bento-style");
+	return e === "bento" || e === "shadcn" || e === "neo-brutalism" ? e : "bento";
+}
+function Z(e) {
+	return e === "system" ? typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
+}
+function Q(e) {
+	document.documentElement.setAttribute("data-theme", e);
+}
+function $(e) {
+	document.documentElement.setAttribute("data-style", e);
+}
+function nt() {
+	let [e, t] = a(et), [i, o] = a(tt), s = n((e) => {
+		t(e), localStorage.setItem("bento-theme", e), Q(Z(e));
+	}, []), c = n((e) => {
+		o(e), localStorage.setItem("bento-style", e), $(e);
+	}, []);
+	return r(() => {
+		if (Q(Z(e)), $(i), e !== "system") return;
+		let t = window.matchMedia("(prefers-color-scheme: dark)"), n = () => Q(t.matches ? "dark" : "light");
+		return t.addEventListener("change", n), () => t.removeEventListener("change", n);
+	}, [e, i]), {
+		theme: e,
+		setTheme: s,
+		resolved: Z(e),
+		style: i,
+		setStyle: c
+	};
+}
+//#endregion
+export { _e as Accordion, ve as AlertDialog, ye as Autocomplete, U as Avatar, W as AvatarGroup, G as Button, K as Checkbox, be as CheckboxGroup, xe as Collapsible, Se as Combobox, Ce as ContextMenu, we as CspProvider, Te as Dialog, Ee as DirectionProvider, De as Drawer, Oe as Field, ke as Fieldset, q as Form, J as Input, Ae as Menu, je as Menubar, X as Meter, Me as NavigationMenu, Ne as NumberField, Pe as OtpField, Fe as Popover, Ie as PreviewCard, Le as Progress, Re as Radio, ze as RadioGroup, Be as ScrollArea, Ve as Select, He as Separator, Ue as Slider, We as Switch, Ge as Tabs, Y as Textarea, Je as ToastProvider, Ke as Toggle, Xe as ToggleGroup, Ze as Toolbar, $e as Tooltip, le as useDirection, nt as useTheme, Ye as useToastManager };