@inspirare/design-system 0.0.18 → 0.0.20

package/dist/src/components/ui/calendar.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t, buttonVariants as n } from "./button.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { ChevronDownIcon as a, ChevronLeftIcon as o, ChevronRightIcon as s } from "lucide-react";
+import { DayPicker as c, getDefaultClassNames as l } from "react-day-picker";
+//#region src/components/ui/calendar.tsx
+function u({ className: t, classNames: r, showOutsideDays: u = !0, captionLayout: f = "label", buttonVariant: p = "ghost", formatters: m, components: h, ...g }) {
+	let _ = l();
+	return /* @__PURE__ */ i(c, {
+		showOutsideDays: u,
+		className: e("group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, t),
+		captionLayout: f,
+		formatters: {
+			formatMonthDropdown: (e) => e.toLocaleString("default", { month: "short" }),
+			...m
+		},
+		classNames: {
+			root: e("w-fit", _.root),
+			months: e("relative flex flex-col gap-4 md:flex-row", _.months),
+			month: e("flex w-full flex-col gap-4", _.month),
+			nav: e("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", _.nav),
+			button_previous: e(n({ variant: p }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", _.button_previous),
+			button_next: e(n({ variant: p }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", _.button_next),
+			month_caption: e("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", _.month_caption),
+			dropdowns: e("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", _.dropdowns),
+			dropdown_root: e("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", _.dropdown_root),
+			dropdown: e("absolute inset-0 bg-popover opacity-0", _.dropdown),
+			caption_label: e("font-medium select-none", f === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", _.caption_label),
+			table: "w-full border-collapse",
+			weekdays: e("flex", _.weekdays),
+			weekday: e("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", _.weekday),
+			week: e("mt-2 flex w-full", _.week),
+			week_number_header: e("w-(--cell-size) select-none", _.week_number_header),
+			week_number: e("text-[0.8rem] text-muted-foreground select-none", _.week_number),
+			day: e("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md", g.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", _.day),
+			range_start: e("rounded-l-md bg-accent", _.range_start),
+			range_middle: e("rounded-none", _.range_middle),
+			range_end: e("rounded-r-md bg-accent", _.range_end),
+			today: e("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", _.today),
+			outside: e("text-muted-foreground aria-selected:text-muted-foreground", _.outside),
+			disabled: e("text-muted-foreground opacity-50", _.disabled),
+			hidden: e("invisible", _.hidden),
+			...r
+		},
+		components: {
+			Root: ({ className: t, rootRef: n, ...r }) => /* @__PURE__ */ i("div", {
+				"data-slot": "calendar",
+				ref: n,
+				className: e(t),
+				...r
+			}),
+			Chevron: ({ className: t, orientation: n, ...r }) => i(n === "left" ? o : n === "right" ? s : a, {
+				className: e("size-4", t),
+				...r
+			}),
+			DayButton: d,
+			WeekNumber: ({ children: e, ...t }) => /* @__PURE__ */ i("td", {
+				...t,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex size-(--cell-size) items-center justify-center text-center",
+					children: e
+				})
+			}),
+			...h
+		},
+		...g
+	});
+}
+function d({ className: n, day: a, modifiers: o, ...s }) {
+	let c = l(), u = r.useRef(null);
+	return r.useEffect(() => {
+		o.focused && u.current?.focus();
+	}, [o.focused]), /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: "ghost",
+		size: "icon",
+		"data-day": a.date.toLocaleDateString(),
+		"data-selected-single": o.selected && !o.range_start && !o.range_end && !o.range_middle,
+		"data-range-start": o.range_start,
+		"data-range-end": o.range_end,
+		"data-range-middle": o.range_middle,
+		className: e("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", c.day, n),
+		...s
+	});
+}
+//#endregion
+export { u as Calendar, d as CalendarDayButton };

package/dist/src/components/ui/card.js

@@ -0,0 +1,55 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ui/card.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card",
+		className: e("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", n),
+		...r
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-header",
+		className: e("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", n),
+		...r
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-title",
+		className: e("leading-none font-semibold", n),
+		...r
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-description",
+		className: e("text-muted-foreground text-sm", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-action",
+		className: e("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-content",
+		className: e("px-6", n),
+		...r
+	});
+}
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-footer",
+		className: e("flex items-center px-6 [.border-t]:pt-6", n),
+		...r
+	});
+}
+//#endregion
+export { n as Card, o as CardAction, s as CardContent, a as CardDescription, c as CardFooter, r as CardHeader, i as CardTitle };

package/dist/src/components/ui/carousel.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ArrowLeft as a, ArrowRight as o } from "lucide-react";
+import s from "embla-carousel-react";
+//#region src/components/ui/carousel.tsx
+var c = n.createContext(null);
+function l() {
+	let e = n.useContext(c);
+	if (!e) throw Error("useCarousel must be used within a <Carousel />");
+	return e;
+}
+var u = n.forwardRef(({ orientation: t = "horizontal", opts: i, setApi: a, plugins: o, className: l, children: u, ...d }, f) => {
+	let [p, m] = s({
+		...i,
+		axis: t === "horizontal" ? "x" : "y"
+	}, o), [h, g] = n.useState(!1), [_, v] = n.useState(!1), y = n.useCallback((e) => {
+		e && (g(e.canScrollPrev()), v(e.canScrollNext()));
+	}, []), b = n.useCallback(() => {
+		m?.scrollPrev();
+	}, [m]), x = n.useCallback(() => {
+		m?.scrollNext();
+	}, [m]), S = n.useCallback((e) => {
+		e.key === "ArrowLeft" ? (e.preventDefault(), b()) : e.key === "ArrowRight" && (e.preventDefault(), x());
+	}, [b, x]);
+	return n.useEffect(() => {
+		!m || !a || a(m);
+	}, [m, a]), n.useEffect(() => {
+		if (m) return y(m), m.on("reInit", y), m.on("select", y), () => {
+			m?.off("select", y);
+		};
+	}, [m, y]), /* @__PURE__ */ r(c.Provider, {
+		value: {
+			carouselRef: p,
+			api: m,
+			opts: i,
+			orientation: t || (i?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev: b,
+			scrollNext: x,
+			canScrollPrev: h,
+			canScrollNext: _
+		},
+		children: /* @__PURE__ */ r("div", {
+			ref: f,
+			onKeyDownCapture: S,
+			className: e("relative", l),
+			role: "region",
+			"aria-roledescription": "carousel",
+			...d,
+			children: u
+		})
+	});
+});
+u.displayName = "Carousel";
+var d = n.forwardRef(({ className: t, ...n }, i) => {
+	let { carouselRef: a, orientation: o } = l();
+	return /* @__PURE__ */ r("div", {
+		ref: a,
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ r("div", {
+			ref: i,
+			className: e("flex", o === "horizontal" ? "-ml-4" : "-mt-4 flex-col", t),
+			...n
+		})
+	});
+});
+d.displayName = "CarouselContent";
+var f = n.forwardRef(({ className: t, ...n }, i) => {
+	let { orientation: a } = l();
+	return /* @__PURE__ */ r("div", {
+		ref: i,
+		role: "group",
+		"aria-roledescription": "slide",
+		className: e("min-w-0 shrink-0 grow-0 basis-full", a === "horizontal" ? "pl-4" : "pt-4", t),
+		...n
+	});
+});
+f.displayName = "CarouselItem";
+var p = n.forwardRef(({ className: n, variant: o = "outline", size: s = "icon", ...c }, u) => {
+	let { orientation: d, scrollPrev: f, canScrollPrev: p } = l();
+	return /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: o,
+		size: s,
+		className: e("absolute  h-8 w-8 rounded-full", d === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", n),
+		disabled: !p,
+		onClick: f,
+		...c,
+		children: [/* @__PURE__ */ r(a, { className: "h-4 w-4" }), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+});
+p.displayName = "CarouselPrevious";
+var m = n.forwardRef(({ className: n, variant: a = "outline", size: s = "icon", ...c }, u) => {
+	let { orientation: d, scrollNext: f, canScrollNext: p } = l();
+	return /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: a,
+		size: s,
+		className: e("absolute h-8 w-8 rounded-full", d === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", n),
+		disabled: !p,
+		onClick: f,
+		...c,
+		children: [/* @__PURE__ */ r(o, { className: "h-4 w-4" }), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+});
+m.displayName = "CarouselNext";
+//#endregion
+export { u as Carousel, d as CarouselContent, f as CarouselItem, m as CarouselNext, p as CarouselPrevious };

package/dist/src/components/ui/chart.js

@@ -0,0 +1,128 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "recharts";
+//#region src/components/ui/chart.tsx
+var o = {
+	light: "",
+	dark: ".dark"
+}, s = t.createContext(null);
+function c() {
+	let e = t.useContext(s);
+	if (!e) throw Error("useChart must be used within a <ChartContainer />");
+	return e;
+}
+var l = t.forwardRef(({ id: n, className: o, children: c, config: l, ...d }, f) => {
+	let p = t.useId(), m = `chart-${n || p.replace(/:/g, "")}`;
+	return /* @__PURE__ */ r(s.Provider, {
+		value: { config: l },
+		children: /* @__PURE__ */ i("div", {
+			"data-chart": m,
+			ref: f,
+			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", o),
+			...d,
+			children: [/* @__PURE__ */ r(u, {
+				id: m,
+				config: l
+			}), /* @__PURE__ */ r(a.ResponsiveContainer, { children: c })]
+		})
+	});
+});
+l.displayName = "Chart";
+var u = ({ id: e, config: t }) => {
+	let n = Object.entries(t).filter(([, e]) => e.theme || e.color);
+	return n.length ? /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: Object.entries(o).map(([t, r]) => `
+${r} [data-chart=${e}] {
+${n.map(([e, n]) => {
+		let r = n.theme?.[t] || n.color;
+		return r ? `  --color-${e}: ${r};` : null;
+	}).join("\n")}
+}
+`).join("\n") } }) : null;
+}, d = a.Tooltip, f = t.forwardRef(({ active: a, payload: o, className: s, indicator: l = "dot", hideLabel: u = !1, hideIndicator: d = !1, label: f, labelFormatter: p, labelClassName: m, formatter: g, color: _, nameKey: v, labelKey: y }, b) => {
+	let { config: x } = c(), S = t.useMemo(() => {
+		if (u || !o?.length) return null;
+		let [t] = o, n = h(x, t, `${y || t?.dataKey || t?.name || "value"}`), i = !y && typeof f == "string" ? x[f]?.label || f : n?.label;
+		return p ? /* @__PURE__ */ r("div", {
+			className: e("font-medium", m),
+			children: p(i, o)
+		}) : i ? /* @__PURE__ */ r("div", {
+			className: e("font-medium", m),
+			children: i
+		}) : null;
+	}, [
+		f,
+		p,
+		o,
+		u,
+		m,
+		x,
+		y
+	]);
+	if (!a || !o?.length) return null;
+	let C = o.length === 1 && l !== "dot";
+	return /* @__PURE__ */ i("div", {
+		ref: b,
+		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", s),
+		children: [C ? null : S, /* @__PURE__ */ r("div", {
+			className: "grid gap-1.5",
+			children: o.filter((e) => e.type !== "none").map((t, a) => {
+				let o = h(x, t, `${v || t.name || t.dataKey || "value"}`), s = _ || t.payload.fill || t.color;
+				return /* @__PURE__ */ r("div", {
+					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", l === "dot" && "items-center"),
+					children: g && t?.value !== void 0 && t.name ? g(t.value, t.name, t, a, t.payload) : /* @__PURE__ */ i(n, { children: [o?.icon ? /* @__PURE__ */ r(o.icon, {}) : !d && /* @__PURE__ */ r("div", {
+						className: e("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+							"h-2.5 w-2.5": l === "dot",
+							"w-1": l === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": l === "dashed",
+							"my-0.5": C && l === "dashed"
+						}),
+						style: {
+							"--color-bg": s,
+							"--color-border": s
+						}
+					}), /* @__PURE__ */ i("div", {
+						className: e("flex flex-1 justify-between leading-none", C ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ i("div", {
+							className: "grid gap-1.5",
+							children: [C ? S : null, /* @__PURE__ */ r("span", {
+								className: "text-muted-foreground",
+								children: o?.label || t.name
+							})]
+						}), t.value && /* @__PURE__ */ r("span", {
+							className: "font-mono font-medium tabular-nums text-foreground",
+							children: t.value.toLocaleString()
+						})]
+					})] })
+				}, t.dataKey);
+			})
+		})]
+	});
+});
+f.displayName = "ChartTooltip";
+var p = a.Legend, m = t.forwardRef(({ className: t, hideIcon: n = !1, payload: a, verticalAlign: o = "bottom", nameKey: s }, l) => {
+	let { config: u } = c();
+	return a?.length ? /* @__PURE__ */ r("div", {
+		ref: l,
+		className: e("flex items-center justify-center gap-4", o === "top" ? "pb-3" : "pt-3", t),
+		children: a.filter((e) => e.type !== "none").map((t) => {
+			let a = h(u, t, `${s || t.dataKey || "value"}`);
+			return /* @__PURE__ */ i("div", {
+				className: e("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [a?.icon && !n ? /* @__PURE__ */ r(a.icon, {}) : /* @__PURE__ */ r("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: t.color }
+				}), a?.label]
+			}, t.value);
+		})
+	}) : null;
+});
+m.displayName = "ChartLegend";
+function h(e, t, n) {
+	if (typeof t != "object" || !t) return;
+	let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
+	return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
+}
+//#endregion
+export { l as ChartContainer, p as ChartLegend, m as ChartLegendContent, u as ChartStyle, d as ChartTooltip, f as ChartTooltipContent };

package/dist/src/components/ui/checkbox.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Checkbox as t, CheckboxIndicator as n } from "../../../node_modules/.pnpm/@radix-ui_react-checkbox@1._e21be6412c310c083d6755285c4c1ad9/node_modules/@radix-ui/react-checkbox/dist/index.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+import { CheckIcon as i } from "lucide-react";
+//#region src/components/ui/checkbox.tsx
+function a({ className: a, ...o }) {
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "checkbox",
+		className: e("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary", a),
+		...o,
+		children: /* @__PURE__ */ r(n, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none",
+			children: /* @__PURE__ */ r(i, { className: "size-3.5" })
+		})
+	});
+}
+//#endregion
+export { a as Checkbox };

package/dist/src/components/ui/collapsible.js

@@ -0,0 +1,26 @@
+"use client";
+import { CollapsibleContent as e, CollapsibleTrigger as t, Root as n } from "../../../node_modules/.pnpm/@radix-ui_react-collapsible_d381d44d4b8a6d58d9dfaae3a0126ca3/node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/ui/collapsible.tsx
+function a({ ...e }) {
+	return /* @__PURE__ */ i(n, {
+		"data-slot": "collapsible",
+		...e
+	});
+}
+function o({ className: e, ...n }) {
+	return /* @__PURE__ */ i(t, {
+		"data-slot": "collapsible-trigger",
+		className: r("cursor-pointer", e),
+		...n
+	});
+}
+function s({ ...t }) {
+	return /* @__PURE__ */ i(e, {
+		"data-slot": "collapsible-content",
+		...t
+	});
+}
+//#endregion
+export { a as Collapsible, s as CollapsibleContent, o as CollapsibleTrigger };

package/dist/src/components/ui/color-picker.js

@@ -0,0 +1,133 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import { Input as n } from "./input.js";
+import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "./popover.js";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { HexColorPicker as l } from "react-colorful";
+//#region src/components/ui/color-picker.tsx
+function u({ value: u, onChange: d, className: f, disabled: p = !1 }) {
+	let [m, h] = o(u), [g, _] = o(!1), v = (e) => {
+		h(e), d(e);
+	};
+	return /* @__PURE__ */ c(r, {
+		open: g,
+		onOpenChange: _,
+		children: [/* @__PURE__ */ s(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ c(t, {
+				variant: "outline",
+				className: e("w-[200px] justify-start text-left font-normal border-border hover:border-primary/50 transition-colors gap-2 px-3", !m && "text-muted-foreground", f),
+				disabled: p,
+				children: [/* @__PURE__ */ s("div", {
+					className: "w-4 h-4 rounded border border-border shadow-sm shrink-0",
+					style: { backgroundColor: m || "#ffffff" }
+				}), /* @__PURE__ */ s("span", {
+					className: "truncate flex-1",
+					children: m ? /* @__PURE__ */ s("span", {
+						className: "font-mono text-xs",
+						children: m.toUpperCase()
+					}) : "Selecionar cor"
+				})]
+			})
+		}), /* @__PURE__ */ s(i, {
+			className: "w-80 p-0",
+			children: /* @__PURE__ */ c("div", {
+				className: "p-4 space-y-4",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "text-sm font-medium text-foreground pb-2 border-b border-border",
+						children: "Seletor de Cor"
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ s(l, {
+							color: m || "#ffffff",
+							onChange: v,
+							className: "w-full !h-32"
+						}), /* @__PURE__ */ c("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ s("label", {
+								className: "text-xs font-medium text-muted-foreground",
+								children: "Código Hexadecimal"
+							}), /* @__PURE__ */ s(n, {
+								value: m || "",
+								onChange: (e) => {
+									let t = e.target.value;
+									(/^#[0-9A-F]{6}$/i.test(t) || t === "") && (h(t), t !== "" && d(t));
+								},
+								placeholder: "#000000",
+								className: "font-mono text-sm border-border focus:border-primary/50 focus:ring-primary/20 bg-background text-foreground"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ s("label", {
+							className: "text-xs font-medium text-muted-foreground",
+							children: "Cores Predefinidas"
+						}), /* @__PURE__ */ s("div", {
+							className: "grid grid-cols-8 gap-1.5",
+							children: [
+								"#9192FA",
+								"#60A5FA",
+								"#e0e7ff",
+								"#dbeafe",
+								"#1f2937",
+								"#374151",
+								"#6b7280",
+								"#9ca3af",
+								"#d1d5db",
+								"#f3f4f6",
+								"#ffffff",
+								"#000000",
+								"#dc2626",
+								"#ea580c",
+								"#d97706",
+								"#16a34a",
+								"#2563eb",
+								"#4f46e5",
+								"#9333ea",
+								"#e11d48",
+								"#fef3c7",
+								"#d1fae5",
+								"#fce7f3",
+								"#e9d5ff"
+							].map((t) => /* @__PURE__ */ s("button", {
+								className: e("w-7 h-7 rounded border cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-md", m === t ? "border-primary ring-2 ring-primary/20" : "border-border hover:border-muted-foreground/50"),
+								style: { backgroundColor: t },
+								onClick: () => v(t),
+								title: t.toUpperCase()
+							}, t))
+						})]
+					}),
+					m && /* @__PURE__ */ c("div", {
+						className: "pt-2 border-t border-border",
+						children: [/* @__PURE__ */ s("div", {
+							className: "text-xs font-medium text-muted-foreground mb-2",
+							children: "Cor Atual"
+						}), /* @__PURE__ */ c("div", {
+							className: "flex items-center gap-3 p-2 bg-muted/50 rounded-md cursor-pointer hover:bg-muted transition-colors",
+							children: [/* @__PURE__ */ s("div", {
+								className: "w-8 h-8 rounded border border-border shadow-sm shrink-0",
+								style: { backgroundColor: m }
+							}), /* @__PURE__ */ c("div", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ s("div", {
+									className: "font-mono text-sm font-medium text-foreground",
+									children: m.toUpperCase()
+								}), /* @__PURE__ */ s("div", {
+									className: "text-xs text-muted-foreground",
+									children: "Clique para copiar"
+								})]
+							})]
+						})]
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { u as ColorPicker };

package/dist/src/components/ui/combobox.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "./popover.js";
+import { Command as a, CommandEmpty as o, CommandGroup as s, CommandInput as c, CommandItem as l, CommandList as u } from "./command.js";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Check as m, ChevronsUpDown as h } from "lucide-react";
+//#region src/components/ui/combobox.tsx
+function g({ options: g, value: _, onChange: v, placeholder: y = "Select option...", searchPlaceholder: b = "Search...", emptyMessage: x = "No option found.", className: S, buttonClassName: C, contentClassName: w, disabled: T = !1 }) {
+	let [E, D] = d.useState(!1), O = d.useMemo(() => g.find((e) => e.value === _)?.label, [g, _]);
+	return /* @__PURE__ */ p(n, {
+		open: E,
+		onOpenChange: D,
+		children: [/* @__PURE__ */ f(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ p(t, {
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": E,
+				disabled: T,
+				className: e("w-full justify-between", !_ && "text-muted-foreground", C),
+				children: [O || y, /* @__PURE__ */ f(h, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			})
+		}), /* @__PURE__ */ f(r, {
+			className: e("w-full p-0", w),
+			align: "start",
+			children: /* @__PURE__ */ p(a, {
+				className: S,
+				children: [/* @__PURE__ */ f(c, { placeholder: b }), /* @__PURE__ */ p(u, { children: [/* @__PURE__ */ f(o, { children: x }), /* @__PURE__ */ f(s, { children: g.map((t) => /* @__PURE__ */ p(l, {
+					value: t.value,
+					onSelect: (e) => {
+						v?.(e === _ ? "" : e), D(!1);
+					},
+					children: [/* @__PURE__ */ f(m, { className: e("mr-2 h-4 w-4", _ === t.value ? "opacity-100" : "opacity-0") }), t.label]
+				}, t.value)) })] })]
+			})
+		})]
+	});
+}
+//#endregion
+export { g as Combobox };