@lexydesign/designsystem 0.1.0

package/README.md

@@ -0,0 +1,72 @@
+# @lexydesign/designsystem
+
+The Lexy Design System — 34 React components built on **Tailwind CSS v4**, generated from Figma. Works in Vite, CRA, and **Next.js App Router** (all interactive components ship with `"use client"`).
+
+## Install
+
+```bash
+npm install @lexydesign/designsystem
+# peer deps (if not already in your app):
+npm install react react-dom
+```
+
+## Setup (Tailwind v4)
+
+The components use Tailwind utility classes + design-token CSS variables. In your app's main CSS file:
+
+```css
+@import "tailwindcss";
+@import "@lexydesign/designsystem/tokens.css";   /* design tokens → @theme */
+@import "@lexydesign/designsystem/globals.css";  /* optional: reset, base body, .type-* */
+
+/* let Tailwind generate the utilities the components use */
+@source "../node_modules/@lexydesign/designsystem/dist";
+```
+
+> The `@source` line points Tailwind at our compiled JS so it can scan the class names we use and emit exactly those utilities. Adjust the relative path to your CSS file's location.
+
+Geist (the type family) is pulled in automatically by `globals.css`. Skip that import if you load Geist yourself.
+
+## Usage
+
+```tsx
+import { Button, Modal, Badge } from '@lexydesign/designsystem';
+
+export function Example() {
+  return (
+    <div className="flex gap-2">
+      <Button variant="primary">Save</Button>
+      <Button variant="destructive" hierarchy="outline">Delete</Button>
+      <Badge tone="green" variant="subtle">Active</Badge>
+    </div>
+  );
+}
+```
+
+Compound components expose their parts as properties:
+
+```tsx
+import { Modal } from '@lexydesign/designsystem';
+
+<Modal open={open} onClose={close}>
+  <Modal.Header title="Invite members" />
+  <Modal.Body>…</Modal.Body>
+  <Modal.Footer>
+    <Button onClick={close}>Done</Button>
+  </Modal.Footer>
+</Modal>
+```
+
+Also exported: `cn` (class merge helper) and `useFloating` (anchored-popover positioning hook).
+
+## Components
+
+Accordion · Avatar · Badge · Breadcrumb · Button · Checkbox · Combobox · CounterBadge · Divider · Dropdown · FeatureCard · HeaderBar · InfoLabel · Input · Logo · Menu · Modal · Nav · ProfileCard · ProgressBar · Radio · Searchbox · Skeleton · Slider · Snippet · StatusDot · Switch · Tabs · Tag · Textarea · Toast · Tooltip · Tree
+
+## Development
+
+```bash
+npm run storybook   # explore components
+npm run css         # regenerate tokens from figma-export.json
+npm run build       # build the distributable library to dist/
+```

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,13 @@
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function Accordion({ className, ...props }: AccordionProps): import("react").JSX.Element;
+export declare namespace Accordion {
+    var Item: typeof AccordionItem;
+}
+export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: React.ReactNode;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+}
+declare function AccordionItem({ title, defaultOpen, disabled, children, className, ...props }: AccordionItemProps): import("react").JSX.Element;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { useState as t } from "react";
+import { ChevronDown as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+function a({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("w-full overflow-hidden rounded-[var(--radius-surface)] border border-border bg-surface [font-family:var(--font-base)]", "[&>*:last-child]:border-b-0", t),
+		...n
+	});
+}
+function o({ title: a, defaultOpen: o = !1, disabled: s, children: c, className: l, ...u }) {
+	let [d, f] = t(o);
+	return /* @__PURE__ */ i("div", {
+		className: e("border-b border-border", l),
+		...u,
+		children: [/* @__PURE__ */ i("button", {
+			type: "button",
+			"aria-expanded": d,
+			disabled: s,
+			onClick: () => f((e) => !e),
+			className: e("flex w-full items-center justify-between h-12 px-4 text-left cursor-pointer", "text-sm font-medium text-text-foreground transition-colors", "hover:bg-surface-background-subtle", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset", "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"),
+			children: [/* @__PURE__ */ r("span", { children: a }), /* @__PURE__ */ r(n, { className: e("h-4 w-4 text-text-foreground-muted transition-transform duration-200", d && "rotate-180") })]
+		}), d && /* @__PURE__ */ r("div", {
+			className: "px-4 pb-4 text-xs text-text-foreground-secondary",
+			children: c
+		})]
+	});
+}
+a.Item = o;
+//#endregion
+export { a as Accordion };

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    src?: string;
+    alt?: string;
+    initials?: string;
+}
+export declare function Avatar({ size, src, alt, initials, className, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+var n = {
+	sm: {
+		px: "h-6 w-6",
+		text: "text-[10px]"
+	},
+	md: {
+		px: "h-8 w-8",
+		text: "text-xs"
+	},
+	lg: {
+		px: "h-10 w-10",
+		text: "text-sm"
+	},
+	xl: {
+		px: "h-12 w-12",
+		text: "text-sm"
+	}
+};
+function r({ size: r = "md", src: i, alt: a = "", initials: o, className: s, ...c }) {
+	let { px: l, text: u } = n[r];
+	return /* @__PURE__ */ t("span", {
+		className: e("inline-flex items-center justify-center rounded-full overflow-hidden flex-shrink-0", "bg-accent text-primary-pressed font-medium [font-family:var(--font-base)]", l, u, s),
+		...c,
+		children: i ? /* @__PURE__ */ t("img", {
+			src: i,
+			alt: a,
+			className: "h-full w-full object-cover"
+		}) : /* @__PURE__ */ t("span", {
+			"aria-label": a,
+			children: o ?? "?"
+		})
+	});
+}
+//#endregion
+export { r as Avatar };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    tone?: "gray" | "blue" | "purple" | "amber" | "red" | "pink" | "green" | "teal" | "inverted" | null | undefined;
+    variant?: "solid" | "subtle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare function Badge({ className, tone, variant, ...props }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,137 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/Badge/Badge.tsx
+var r = n([
+	"inline-flex items-center justify-center gap-[5px]",
+	"h-5 px-2 py-0.5",
+	"rounded-full",
+	"text-xs font-medium leading-none whitespace-nowrap select-none",
+	"[font-family:var(--font-base)]"
+].join(" "), {
+	variants: {
+		tone: {
+			gray: "",
+			blue: "",
+			purple: "",
+			amber: "",
+			red: "",
+			pink: "",
+			green: "",
+			teal: "",
+			inverted: ""
+		},
+		variant: {
+			solid: "border",
+			subtle: ""
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "gray",
+			variant: "solid",
+			class: "bg-text-foreground text-neutral-white border-text-foreground"
+		},
+		{
+			tone: "blue",
+			variant: "solid",
+			class: "bg-status-info text-neutral-white border-status-info"
+		},
+		{
+			tone: "purple",
+			variant: "solid",
+			class: "bg-primary text-primary-foreground border-primary"
+		},
+		{
+			tone: "amber",
+			variant: "solid",
+			class: "bg-status-warning text-neutral-white border-status-warning"
+		},
+		{
+			tone: "red",
+			variant: "solid",
+			class: "bg-status-danger text-neutral-white border-status-danger"
+		},
+		{
+			tone: "pink",
+			variant: "solid",
+			class: "bg-subbrand-deudor text-neutral-white border-subbrand-deudor"
+		},
+		{
+			tone: "green",
+			variant: "solid",
+			class: "bg-status-success text-neutral-white border-status-success"
+		},
+		{
+			tone: "teal",
+			variant: "solid",
+			class: "bg-subbrand-salud text-subbrand-salud-foreground-strong border-subbrand-salud"
+		},
+		{
+			tone: "inverted",
+			variant: "solid",
+			class: "bg-surface-background-inverse text-neutral-white border-surface-background-inverse"
+		},
+		{
+			tone: "gray",
+			variant: "subtle",
+			class: "bg-surface-background-muted text-text-foreground"
+		},
+		{
+			tone: "blue",
+			variant: "subtle",
+			class: "bg-status-info-background text-status-info-foreground-strong"
+		},
+		{
+			tone: "purple",
+			variant: "subtle",
+			class: "bg-accent text-primary-pressed"
+		},
+		{
+			tone: "amber",
+			variant: "subtle",
+			class: "bg-status-warning-background text-status-warning-foreground-strong"
+		},
+		{
+			tone: "red",
+			variant: "subtle",
+			class: "bg-status-danger-background text-status-danger-foreground-strong"
+		},
+		{
+			tone: "pink",
+			variant: "subtle",
+			class: "bg-subbrand-deudor-background text-subbrand-deudor-foreground"
+		},
+		{
+			tone: "green",
+			variant: "subtle",
+			class: "bg-status-success-background text-status-success-foreground-strong"
+		},
+		{
+			tone: "teal",
+			variant: "subtle",
+			class: "bg-subbrand-salud-background text-subbrand-salud-foreground-strong"
+		},
+		{
+			tone: "inverted",
+			variant: "subtle",
+			class: "bg-surface-background text-text-foreground border border-border"
+		}
+	],
+	defaultVariants: {
+		tone: "gray",
+		variant: "solid"
+	}
+});
+function i({ className: n, tone: i, variant: a, ...o }) {
+	return /* @__PURE__ */ t("span", {
+		className: e(r({
+			tone: i,
+			variant: a
+		}), n),
+		...o
+	});
+}
+//#endregion
+export { i as Badge };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,14 @@
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+}
+export declare function Breadcrumb({ className, children, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export declare namespace Breadcrumb {
+    var Item: typeof BreadcrumbItem;
+    var Separator: typeof BreadcrumbSeparator;
+}
+export interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    type?: 'link' | 'current' | 'ellipsis';
+    href?: string;
+}
+declare function BreadcrumbItem({ type, href, children, className, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+declare function BreadcrumbSeparator({ className, ...props }: React.HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
+export {};

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { ChevronRight as t, MoreHorizontal as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+function a({ className: e, children: t, ...n }) {
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": "Breadcrumb",
+		className: e,
+		...n,
+		children: /* @__PURE__ */ r("ol", {
+			className: "flex items-center gap-2 [font-family:var(--font-base)] text-sm",
+			children: t
+		})
+	});
+}
+function o({ type: t = "link", href: a, children: o, className: s, ...c }) {
+	return /* @__PURE__ */ i("li", {
+		className: e("flex items-center", s),
+		...c,
+		children: [
+			t === "link" && /* @__PURE__ */ r("a", {
+				href: a,
+				className: "text-neutral-gray hover:text-text-foreground transition-colors",
+				children: o
+			}),
+			t === "current" && /* @__PURE__ */ r("span", {
+				"aria-current": "page",
+				className: "text-text-foreground font-medium",
+				children: o
+			}),
+			t === "ellipsis" && /* @__PURE__ */ r("span", {
+				className: "text-text-foreground-muted flex items-center",
+				"aria-label": "More",
+				children: /* @__PURE__ */ r(n, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ r("li", {
+		role: "presentation",
+		"aria-hidden": !0,
+		className: e("flex items-center text-text-foreground-muted", n),
+		...i,
+		children: /* @__PURE__ */ r(t, { className: "h-4 w-4" })
+	});
+}
+a.Item = o, a.Separator = s;
+//#endregion
+export { a as Breadcrumb };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "destructive" | "warning" | "success" | "neutral" | null | undefined;
+    hierarchy?: "normal" | "ghost" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { cva as r } from "class-variance-authority";
+//#region src/components/Button/Button.tsx
+var i = r([
+	"inline-flex items-center justify-center whitespace-nowrap select-none border border-transparent",
+	"gap-[var(--gap-button)]",
+	"[font-family:var(--font-base)] text-[length:var(--text-button)] font-[number:var(--font-weight-button)]",
+	"rounded-[var(--radius-control)]",
+	"transition-colors duration-150 cursor-pointer",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
+	"disabled:cursor-not-allowed",
+	"disabled:bg-surface-background-subtle disabled:text-neutral-border disabled:border-border disabled:[&>svg]:opacity-50"
+].join(" "), {
+	variants: {
+		variant: {
+			primary: "",
+			secondary: "",
+			destructive: "",
+			warning: "",
+			success: "",
+			neutral: ""
+		},
+		hierarchy: {
+			normal: "",
+			ghost: "",
+			outline: ""
+		},
+		size: {
+			sm: "h-[var(--height-button-sm)] px-[var(--padding-button-horizontal-sm)]",
+			md: "h-[var(--height-button-md)] px-[var(--padding-button-horizontal-md)]",
+			lg: "h-[var(--height-button-lg)] px-[var(--padding-button-horizontal-lg)]"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "primary",
+			hierarchy: "normal",
+			class: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-pressed"
+		},
+		{
+			variant: "primary",
+			hierarchy: "ghost",
+			class: "bg-transparent text-primary hover:bg-alpha-primary-alpha-hover active:bg-alpha-primary-alpha-pressed"
+		},
+		{
+			variant: "primary",
+			hierarchy: "outline",
+			class: "bg-surface text-primary border-primary hover:bg-alpha-primary-alpha-hover active:bg-alpha-primary-alpha-pressed"
+		},
+		{
+			variant: "secondary",
+			hierarchy: "normal",
+			class: "bg-surface text-neutral-gray border-border hover:text-primary hover:border-primary active:bg-neutral-surface-muted active:text-primary active:border-primary"
+		},
+		{
+			variant: "secondary",
+			hierarchy: "ghost",
+			class: "bg-transparent text-neutral-gray hover:bg-alpha-neutral-alpha-hover active:bg-alpha-neutral-alpha-pressed"
+		},
+		{
+			variant: "secondary",
+			hierarchy: "outline",
+			class: "bg-surface text-neutral-gray border-border hover:text-primary hover:border-primary active:bg-neutral-surface-muted"
+		},
+		{
+			variant: "destructive",
+			hierarchy: "normal",
+			class: "bg-status-danger text-primary-foreground hover:bg-status-danger-hover active:bg-status-danger-pressed"
+		},
+		{
+			variant: "destructive",
+			hierarchy: "ghost",
+			class: "bg-transparent text-status-danger hover:bg-alpha-danger-alpha-hover active:bg-alpha-danger-alpha-pressed"
+		},
+		{
+			variant: "destructive",
+			hierarchy: "outline",
+			class: "bg-surface text-status-danger border-status-danger hover:bg-alpha-danger-alpha-hover active:bg-alpha-danger-alpha-pressed"
+		},
+		{
+			variant: "warning",
+			hierarchy: "normal",
+			class: "bg-status-warning text-primary-foreground hover:bg-status-warning-hover active:bg-status-warning-pressed"
+		},
+		{
+			variant: "warning",
+			hierarchy: "ghost",
+			class: "bg-transparent text-status-warning hover:bg-alpha-warning-alpha-hover active:bg-alpha-warning-alpha-pressed"
+		},
+		{
+			variant: "warning",
+			hierarchy: "outline",
+			class: "bg-surface text-status-warning border-status-warning hover:bg-alpha-warning-alpha-hover active:bg-alpha-warning-alpha-pressed"
+		},
+		{
+			variant: "success",
+			hierarchy: "normal",
+			class: "bg-status-success text-primary-foreground hover:bg-status-success-hover active:bg-status-success-pressed"
+		},
+		{
+			variant: "success",
+			hierarchy: "ghost",
+			class: "bg-transparent text-status-success hover:bg-alpha-success-alpha-hover active:bg-alpha-success-alpha-pressed"
+		},
+		{
+			variant: "success",
+			hierarchy: "outline",
+			class: "bg-surface text-status-success border-status-success hover:bg-alpha-success-alpha-hover active:bg-alpha-success-alpha-pressed"
+		},
+		{
+			variant: "neutral",
+			hierarchy: "normal",
+			class: "bg-neutral-surface-muted text-text-foreground hover:bg-surface-pressed active:bg-surface-selected"
+		},
+		{
+			variant: "neutral",
+			hierarchy: "ghost",
+			class: "bg-transparent text-neutral-gray hover:bg-alpha-neutral-alpha-hover active:bg-alpha-neutral-alpha-pressed"
+		},
+		{
+			variant: "neutral",
+			hierarchy: "outline",
+			class: "bg-surface text-neutral-gray border-border hover:bg-neutral-surface-muted active:bg-surface-pressed"
+		}
+	],
+	defaultVariants: {
+		variant: "primary",
+		hierarchy: "normal",
+		size: "md"
+	}
+}), a = t(({ className: t, variant: r, hierarchy: a, size: o, ...s }, c) => /* @__PURE__ */ n("button", {
+	ref: c,
+	className: e(i({
+		variant: r,
+		hierarchy: a,
+		size: o
+	}), t),
+	...s
+}));
+a.displayName = "Button";
+//#endregion
+export { a as Button };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    children?: React.ReactNode;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { forwardRef as t, useEffect as n, useRef as r, useState as i } from "react";
+import { Check as a, Minus as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Checkbox/Checkbox.tsx
+var l = t(({ checked: t, defaultChecked: l, indeterminate: u = !1, disabled: d, onChange: f, children: p, className: m, ...h }, g) => {
+	let _ = r(null), v = g ?? _, [y, b] = i(l ?? !1), x = t !== void 0, S = x ? t : y;
+	n(() => {
+		v.current && (v.current.indeterminate = u);
+	}, [u, v]);
+	function C(e) {
+		x || b(e.target.checked), f?.(e.target.checked);
+	}
+	return /* @__PURE__ */ c("label", {
+		className: e("inline-flex items-center gap-2 cursor-pointer", d && "cursor-not-allowed opacity-50", m),
+		children: [/* @__PURE__ */ c("span", {
+			className: "relative inline-flex h-4 w-4 flex-shrink-0",
+			children: [/* @__PURE__ */ s("input", {
+				ref: v,
+				type: "checkbox",
+				checked: x ? t : void 0,
+				defaultChecked: x ? void 0 : l,
+				disabled: d,
+				onChange: C,
+				className: "sr-only peer",
+				...h
+			}), /* @__PURE__ */ c("span", {
+				className: e("absolute inset-0 flex items-center justify-center rounded-[var(--radius-control-sm)] border border-border", "transition-colors duration-150", "peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-1", S || u ? "bg-primary border-primary" : "bg-neutral-white"),
+				children: [S && !u && /* @__PURE__ */ s(a, {
+					className: "h-3 w-3 text-neutral-white",
+					strokeWidth: 3
+				}), u && /* @__PURE__ */ s(o, {
+					className: "h-3 w-3 text-neutral-white",
+					strokeWidth: 3
+				})]
+			})]
+		}), p && /* @__PURE__ */ s("span", {
+			className: "text-sm text-text-foreground [font-family:var(--font-base)]",
+			children: p
+		})]
+	});
+});
+l.displayName = "Checkbox";
+//#endregion
+export { l as Checkbox };

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,16 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, error, disabled, className, }: ComboboxProps): import("react").JSX.Element;

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,57 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { useFloating as t } from "../../lib/useFloating.js";
+import { useMemo as n, useRef as r, useState as i } from "react";
+import { Check as a, ChevronDown as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Combobox/Combobox.tsx
+function l({ options: l, value: u, defaultValue: d, onValueChange: f, placeholder: p = "Search…", error: m, disabled: h, className: g }) {
+	let [_, v] = i(d), [y, b] = i(""), x = u !== void 0, S = x ? u : _, C = r(null), { triggerRef: w, floatingRef: T, open: E, setOpen: D, floatingStyle: O } = t({ matchTriggerWidth: !0 }), k = l.find((e) => e.value === S)?.label ?? "", A = n(() => l.filter((e) => e.label.toLowerCase().includes(y.toLowerCase())), [l, y]);
+	function j(e) {
+		x || v(e), f?.(e), b(""), D(!1);
+	}
+	function M() {
+		h || (D(!0), requestAnimationFrame(() => C.current?.focus()));
+	}
+	return /* @__PURE__ */ c("div", {
+		className: e("w-[260px] [font-family:var(--font-base)]", g),
+		children: [/* @__PURE__ */ c("div", {
+			ref: w,
+			onClick: M,
+			className: e("flex items-center justify-between w-full h-10 px-3 gap-2 rounded-[var(--radius-control-lg)] border bg-surface text-sm transition-colors cursor-text", "border-border hover:border-border-hover", E && "border-primary", m && "border-status-danger", h && "opacity-50 cursor-not-allowed bg-surface-background-subtle"),
+			children: [E ? /* @__PURE__ */ s("input", {
+				ref: C,
+				value: y,
+				placeholder: k || p,
+				onChange: (e) => b(e.target.value),
+				className: "flex-1 min-w-0 bg-transparent outline-none text-text-foreground placeholder:text-text-foreground-muted"
+			}) : /* @__PURE__ */ s("span", {
+				className: e("truncate", k ? "text-text-foreground" : "text-text-foreground-muted"),
+				children: k || p
+			}), /* @__PURE__ */ s(o, { className: e("h-4 w-4 flex-shrink-0 text-text-foreground-muted transition-transform", E && "rotate-180") })]
+		}), E && /* @__PURE__ */ s("div", {
+			ref: T,
+			role: "listbox",
+			style: O,
+			className: "z-50 rounded-[var(--radius-popover)] border border-border bg-surface shadow-md p-1 max-h-64 overflow-auto",
+			children: A.length === 0 ? /* @__PURE__ */ s("div", {
+				className: "h-8 px-2 flex items-center text-sm text-text-foreground-muted",
+				children: "No results"
+			}) : A.map((t) => {
+				let n = t.value === S;
+				return /* @__PURE__ */ c("div", {
+					role: "option",
+					"aria-selected": n,
+					onClick: () => !t.disabled && j(t.value),
+					className: e("flex items-center justify-between h-8 px-2 rounded-[var(--radius-control-sm)] text-sm cursor-pointer transition-colors", n ? "bg-primary-subtle text-primary" : "text-text-foreground hover:bg-alpha-neutral-alpha-hover", t.disabled && "pointer-events-none text-text-foreground-disabled"),
+					children: [/* @__PURE__ */ s("span", {
+						className: "truncate",
+						children: t.label
+					}), n && /* @__PURE__ */ s(a, { className: "h-4 w-4 flex-shrink-0" })]
+				}, t.value);
+			})
+		})]
+	});
+}
+//#endregion
+export { l as Combobox };