@lexydesign/designsystem 0.1.0

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,49 @@
+import { LucideIcon } from 'lucide-react';
+export interface MenuProps {
+    /** The element that opens the menu (rendered as the anchor). */
+    trigger: React.ReactNode;
+    align?: 'start' | 'end';
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function Menu({ trigger, align, className, children }: MenuProps): import("react").JSX.Element;
+export declare namespace Menu {
+    var Item: typeof MenuItem;
+    var CheckboxItem: typeof MenuCheckboxItem;
+    var RadioItem: typeof MenuRadioItem;
+    var SubTrigger: typeof MenuSubTrigger;
+    var Label: typeof MenuLabel;
+    var Separator: typeof MenuSeparator;
+}
+export interface MenuItemProps {
+    icon?: LucideIcon;
+    shortcut?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+    children: React.ReactNode;
+}
+declare function MenuItem({ icon: Icon, shortcut, destructive, disabled, onSelect, children }: MenuItemProps): import("react").JSX.Element;
+export interface MenuCheckboxItemProps {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+declare function MenuCheckboxItem({ checked, onCheckedChange, disabled, children }: MenuCheckboxItemProps): import("react").JSX.Element;
+export interface MenuRadioItemProps {
+    checked?: boolean;
+    onSelect?: () => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+declare function MenuRadioItem({ checked, onSelect, disabled, children }: MenuRadioItemProps): import("react").JSX.Element;
+declare function MenuSubTrigger({ icon: Icon, children }: {
+    icon?: LucideIcon;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+declare function MenuLabel({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+declare function MenuSeparator(): import("react").JSX.Element;
+export {};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,108 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { useFloating as t } from "../../lib/useFloating.js";
+import { createContext as n, useContext as r } from "react";
+import { Check as i, ChevronRight as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Menu/Menu.tsx
+var c = n(null);
+function l({ trigger: n, align: r = "start", className: i, children: a }) {
+	let { triggerRef: l, floatingRef: u, open: d, setOpen: f, floatingStyle: p } = t({ placement: r === "end" ? "bottom-end" : "bottom-start" });
+	return /* @__PURE__ */ s(c.Provider, {
+		value: { close: () => f(!1) },
+		children: [/* @__PURE__ */ o("div", {
+			ref: l,
+			className: "inline-flex",
+			onClick: () => f((e) => !e),
+			children: n
+		}), d && /* @__PURE__ */ o("div", {
+			ref: u,
+			role: "menu",
+			style: p,
+			className: e("z-50 min-w-[220px] rounded-[var(--radius-popover)] border border-border bg-surface shadow-md p-1", "[font-family:var(--font-base)]", i),
+			children: a
+		})]
+	});
+}
+var u = "flex items-center gap-2 h-8 px-2 rounded-[var(--radius-control-sm)] text-sm cursor-pointer transition-colors select-none";
+function d({ icon: t, shortcut: n, destructive: i, disabled: a, onSelect: l, children: d }) {
+	let f = r(c);
+	return /* @__PURE__ */ s("div", {
+		role: "menuitem",
+		"aria-disabled": a || void 0,
+		onClick: () => {
+			a || (l?.(), f?.close());
+		},
+		className: e(u, i ? "text-status-danger-foreground" : "text-text-foreground", !a && "hover:bg-alpha-neutral-alpha-hover", a && "pointer-events-none text-text-foreground-disabled"),
+		children: [
+			t && /* @__PURE__ */ o(t, { className: "h-4 w-4 flex-shrink-0" }),
+			/* @__PURE__ */ o("span", {
+				className: "flex-1 truncate",
+				children: d
+			}),
+			n && /* @__PURE__ */ o("span", {
+				className: "text-xs text-text-foreground-muted",
+				children: n
+			})
+		]
+	});
+}
+function f({ checked: t, onCheckedChange: n, disabled: r, children: a }) {
+	return /* @__PURE__ */ s("div", {
+		role: "menuitemcheckbox",
+		"aria-checked": t,
+		onClick: () => !r && n?.(!t),
+		className: e(u, "text-text-foreground", !r && "hover:bg-alpha-neutral-alpha-hover", r && "pointer-events-none text-text-foreground-disabled"),
+		children: [/* @__PURE__ */ o("span", {
+			className: "flex h-4 w-4 flex-shrink-0 items-center justify-center",
+			children: t && /* @__PURE__ */ o(i, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ o("span", {
+			className: "flex-1 truncate",
+			children: a
+		})]
+	});
+}
+function p({ checked: t, onSelect: n, disabled: r, children: i }) {
+	return /* @__PURE__ */ s("div", {
+		role: "menuitemradio",
+		"aria-checked": t,
+		onClick: () => !r && n?.(),
+		className: e(u, "text-text-foreground", !r && "hover:bg-alpha-neutral-alpha-hover", r && "pointer-events-none text-text-foreground-disabled"),
+		children: [/* @__PURE__ */ o("span", {
+			className: "flex h-4 w-4 flex-shrink-0 items-center justify-center",
+			children: t && /* @__PURE__ */ o("span", { className: "h-1.5 w-1.5 rounded-full bg-current" })
+		}), /* @__PURE__ */ o("span", {
+			className: "flex-1 truncate",
+			children: i
+		})]
+	});
+}
+function m({ icon: t, children: n }) {
+	return /* @__PURE__ */ s("div", {
+		role: "menuitem",
+		className: e(u, "text-text-foreground hover:bg-alpha-neutral-alpha-hover"),
+		children: [
+			t && /* @__PURE__ */ o(t, { className: "h-4 w-4 flex-shrink-0" }),
+			/* @__PURE__ */ o("span", {
+				className: "flex-1 truncate",
+				children: n
+			}),
+			/* @__PURE__ */ o(a, { className: "h-4 w-4 flex-shrink-0 text-text-foreground-muted" })
+		]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ o("div", {
+		className: "h-7 px-2 flex items-center text-xs font-medium text-text-foreground-muted select-none",
+		children: e
+	});
+}
+function g() {
+	return /* @__PURE__ */ o("div", {
+		role: "separator",
+		className: "my-1 h-px bg-border"
+	});
+}
+l.Item = d, l.CheckboxItem = f, l.RadioItem = p, l.SubTrigger = m, l.Label = h, l.Separator = g;
+//#endregion
+export { l as Menu };

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,33 @@
+import { LucideIcon } from 'lucide-react';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function Modal({ open, onClose, className, children }: ModalProps): import("react").JSX.Element | null;
+export declare namespace Modal {
+    var Header: typeof ModalHeader;
+    var Body: typeof ModalBody;
+    var Footer: typeof ModalFooter;
+}
+export interface ModalHeaderProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: LucideIcon;
+    alignment?: 'left' | 'center';
+}
+declare function ModalHeader({ title, description, icon: Icon, alignment }: ModalHeaderProps): import("react").JSX.Element;
+declare function ModalBody({ alignment, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    alignment?: 'left' | 'center';
+}): import("react").JSX.Element;
+declare const footerAlign: {
+    right: string;
+    left: string;
+    center: string;
+    split: string;
+};
+declare function ModalFooter({ alignment, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    alignment?: keyof typeof footerAlign;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { useEffect as t, useRef as n } from "react";
+import { X as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Modal/Modal.tsx
+function o({ open: o, onClose: s, className: c, children: l }) {
+	let u = n(null), d = n(null);
+	return t(() => {
+		if (!o) return;
+		d.current = document.activeElement;
+		let e = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		let t = () => u.current?.querySelectorAll("a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex=\"-1\"])");
+		t()?.[0]?.focus();
+		let n = (e) => {
+			if (e.key === "Escape") {
+				s();
+				return;
+			}
+			if (e.key === "Tab") {
+				let n = t();
+				if (!n || n.length === 0) return;
+				let r = n[0], i = n[n.length - 1];
+				e.shiftKey && document.activeElement === r ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
+			}
+		};
+		return document.addEventListener("keydown", n), () => {
+			document.removeEventListener("keydown", n), document.body.style.overflow = e, d.current?.focus();
+		};
+	}, [o, s]), o ? /* @__PURE__ */ i("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-surface-background-inverse/50 [font-family:var(--font-base)]",
+		onClick: s,
+		children: /* @__PURE__ */ a("div", {
+			ref: u,
+			role: "dialog",
+			"aria-modal": "true",
+			onClick: (e) => e.stopPropagation(),
+			className: e("relative flex w-full max-w-[520px] flex-col gap-6 rounded-[var(--radius-modal)] border border-border bg-surface p-6 shadow-md", c),
+			children: [/* @__PURE__ */ i("button", {
+				type: "button",
+				"aria-label": "Close",
+				onClick: s,
+				className: "absolute right-4 top-4 text-text-foreground-muted hover:text-text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",
+				children: /* @__PURE__ */ i(r, { className: "h-4 w-4" })
+			}), l]
+		})
+	}) : null;
+}
+function s({ title: t, description: n, icon: r, alignment: o = "left" }) {
+	return /* @__PURE__ */ a("div", {
+		className: e("flex flex-col gap-1", o === "center" && "items-center text-center"),
+		children: [
+			r && /* @__PURE__ */ i("span", {
+				className: "mb-2 inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary-subtle text-primary",
+				children: /* @__PURE__ */ i(r, { className: "h-5 w-5" })
+			}),
+			/* @__PURE__ */ i("h2", {
+				className: "text-base font-medium text-text-foreground pr-6",
+				children: t
+			}),
+			n && /* @__PURE__ */ i("p", {
+				className: "text-sm text-text-foreground-muted",
+				children: n
+			})
+		]
+	});
+}
+function c({ alignment: t = "left", className: n, ...r }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("text-sm text-text-foreground-secondary", t === "center" && "text-center", n),
+		...r
+	});
+}
+var l = {
+	right: "justify-end",
+	left: "justify-start",
+	center: "justify-center",
+	split: "justify-between"
+};
+function u({ alignment: t = "right", className: n, ...r }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("flex items-center gap-2", l[t], n),
+		...r
+	});
+}
+o.Header = s, o.Body = c, o.Footer = u;
+//#endregion
+export { o as Modal };

package/dist/components/Nav/Nav.d.ts

@@ -0,0 +1,20 @@
+import { LucideIcon } from 'lucide-react';
+export interface NavProps extends React.HTMLAttributes<HTMLElement> {
+}
+export declare function Nav({ className, ...props }: NavProps): import("react").JSX.Element;
+export declare namespace Nav {
+    var Item: typeof NavItem;
+    var Group: typeof NavGroup;
+}
+export interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+    disabled?: boolean;
+    icon?: LucideIcon;
+}
+declare function NavItem({ active, disabled, icon: Icon, children, className, ...props }: NavItemProps): import("react").JSX.Element;
+export interface NavGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: React.ReactNode;
+    defaultExpanded?: boolean;
+}
+declare function NavGroup({ title, defaultExpanded, children, className, ...props }: NavGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/Nav/Nav.js

@@ -0,0 +1,44 @@
+"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/Nav/Nav.tsx
+function a({ className: t, ...n }) {
+	return /* @__PURE__ */ r("nav", {
+		className: e("flex flex-col gap-0.5 w-64 [font-family:var(--font-base)]", t),
+		...n
+	});
+}
+function o({ active: t, disabled: n, icon: a, children: o, className: s, ...c }) {
+	return /* @__PURE__ */ i("a", {
+		"aria-current": t ? "page" : void 0,
+		"aria-disabled": n || void 0,
+		className: e("flex items-center gap-2 h-8 px-3 rounded-[var(--radius-control)] text-sm transition-colors cursor-pointer", a ? "pl-2" : "pl-3", t ? "bg-primary-subtle text-primary font-medium" : "text-text-foreground-secondary hover:bg-neutral-surface-muted hover:text-text-foreground", n && "pointer-events-none text-text-foreground-muted opacity-60", s),
+		...c,
+		children: [a && /* @__PURE__ */ r(a, { className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ r("span", {
+			className: "truncate",
+			children: o
+		})]
+	});
+}
+function s({ title: a, defaultExpanded: o = !0, children: s, className: c, ...l }) {
+	let [u, d] = t(o);
+	return /* @__PURE__ */ i("div", {
+		className: c,
+		...l,
+		children: [/* @__PURE__ */ i("button", {
+			type: "button",
+			"aria-expanded": u,
+			onClick: () => d((e) => !e),
+			className: "flex items-center gap-3 w-full h-8 px-2 rounded-[var(--radius-control)] text-sm font-medium text-text-foreground transition-colors hover:bg-neutral-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+			children: [/* @__PURE__ */ r(n, { className: e("h-4 w-4 text-text-foreground-muted transition-transform", !u && "-rotate-90") }), /* @__PURE__ */ r("span", { children: a })]
+		}), u && /* @__PURE__ */ r("div", {
+			className: "flex flex-col gap-0.5 mt-0.5",
+			children: s
+		})]
+	});
+}
+a.Item = o, a.Group = s;
+//#endregion
+export { a as Nav };

package/dist/components/ProfileCard/ProfileCard.d.ts

@@ -0,0 +1,11 @@
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    role?: string;
+    initials?: string;
+    src?: string;
+    primaryAction?: string;
+    secondaryAction?: string;
+    onPrimary?: () => void;
+    onSecondary?: () => void;
+}
+export declare function ProfileCard({ name, role, initials, src, primaryAction, secondaryAction, onPrimary, onSecondary, className, ...props }: ProfileCardProps): import("react").JSX.Element;

package/dist/components/ProfileCard/ProfileCard.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Avatar as t } from "../Avatar/Avatar.js";
+import { Button as n } from "../Button/Button.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ProfileCard/ProfileCard.tsx
+function a({ name: a, role: o, initials: s, src: c, primaryAction: l = "Ver perfil", secondaryAction: u = "Mensaje", onPrimary: d, onSecondary: f, className: p, ...m }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("flex w-[280px] flex-col gap-4 p-6 rounded-[var(--radius-card)] border border-border bg-surface", "[font-family:var(--font-base)] transition-shadow hover:shadow-md", p),
+		...m,
+		children: [
+			/* @__PURE__ */ r(t, {
+				size: "lg",
+				src: c,
+				initials: s,
+				alt: a
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ r("span", {
+					className: "text-sm font-medium text-text-foreground",
+					children: a
+				}), o && /* @__PURE__ */ r("span", {
+					className: "text-xs text-text-foreground-muted",
+					children: o
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ r(n, {
+					size: "sm",
+					variant: "primary",
+					onClick: d,
+					children: l
+				}), /* @__PURE__ */ r(n, {
+					size: "sm",
+					variant: "secondary",
+					onClick: f,
+					children: u
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { a as ProfileCard };

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    showLabel?: boolean;
+}
+export declare function ProgressBar({ value, variant, showLabel, className, ...props }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/ProgressBar/ProgressBar.tsx
+var r = {
+	default: "bg-primary",
+	success: "bg-status-success",
+	warning: "bg-status-warning",
+	error: "bg-status-danger"
+};
+function i({ value: i, variant: a = "default", showLabel: o = !1, className: s, ...c }) {
+	let l = Math.min(100, Math.max(0, i));
+	return /* @__PURE__ */ t("div", {
+		role: "progressbar",
+		"aria-valuenow": l,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		className: e("w-full rounded-full bg-neutral-surface-muted overflow-hidden", o ? "h-6" : "h-2.5", s),
+		...c,
+		children: /* @__PURE__ */ t("div", {
+			className: e("h-full rounded-full transition-[width] duration-300 flex items-center justify-end", r[a]),
+			style: { width: `${l}%` },
+			children: o && l > 0 && /* @__PURE__ */ n("span", {
+				className: "pr-2 text-[length:var(--text-11)] font-bold text-neutral-white [font-family:var(--font-base)] leading-none select-none",
+				children: [l, "%"]
+			})
+		})
+	});
+}
+//#endregion
+export { i as ProgressBar };

package/dist/components/Radio/Radio.d.ts

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

package/dist/components/Radio/Radio.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Radio/Radio.tsx
+var i = t(({ disabled: t, onChange: i, children: a, className: o, ...s }, c) => /* @__PURE__ */ r("label", {
+	className: e("inline-flex items-center gap-2 cursor-pointer", t && "cursor-not-allowed opacity-50", o),
+	children: [/* @__PURE__ */ r("span", {
+		className: "relative inline-flex h-4 w-4 flex-shrink-0",
+		children: [/* @__PURE__ */ n("input", {
+			ref: c,
+			type: "radio",
+			disabled: t,
+			onChange: (e) => i?.(e.target.checked),
+			className: "peer sr-only",
+			...s
+		}), /* @__PURE__ */ n("span", {
+			className: e("absolute inset-0 flex items-center justify-center rounded-full border bg-surface", "border-border transition-colors duration-150", "peer-checked:border-primary peer-checked:[&>span]:scale-100", "peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-1"),
+			children: /* @__PURE__ */ n("span", { className: "h-2 w-2 rounded-full bg-primary scale-0 transition-transform duration-150" })
+		})]
+	}), a && /* @__PURE__ */ n("span", {
+		className: "text-sm text-text-foreground [font-family:var(--font-base)]",
+		children: a
+	})]
+}));
+i.displayName = "Radio";
+//#endregion
+export { i as Radio };

package/dist/components/Searchbox/Searchbox.d.ts

@@ -0,0 +1,10 @@
+export interface SearchboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onClear?: () => void;
+}
+export declare const Searchbox: import('react').ForwardRefExoticComponent<SearchboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export interface ExpandingSearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Width when expanded. */
+    expandedWidth?: string;
+}
+/** A compact search button that expands into a full searchbox (same shape/spacing as Searchbox). */
+export declare function ExpandingSearchbox({ placeholder, expandedWidth, className, ...props }: ExpandingSearchboxProps): import("react").JSX.Element;

package/dist/components/Searchbox/Searchbox.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { forwardRef as t, useRef as n, useState as r } from "react";
+import { Search as i, X as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Searchbox/Searchbox.tsx
+var c = t(({ disabled: t, value: n, onClear: r, className: c, ...l }, u) => {
+	let d = n !== void 0 && n !== "";
+	return /* @__PURE__ */ s("div", {
+		className: e("inline-flex items-center gap-2 h-9 w-80 px-2.5 rounded-[var(--radius-control-lg)] border bg-surface", "border-border transition-colors duration-150", "focus-within:border-primary", t && "opacity-50 cursor-not-allowed bg-surface-background-subtle", c),
+		children: [
+			/* @__PURE__ */ o(i, { className: "h-4 w-4 flex-shrink-0 text-text-foreground-muted" }),
+			/* @__PURE__ */ o("input", {
+				ref: u,
+				type: "search",
+				value: n,
+				disabled: t,
+				className: e("flex-1 min-w-0 bg-transparent outline-none text-sm text-text-foreground", "placeholder:text-text-foreground-muted [font-family:var(--font-base)]", "[&::-webkit-search-cancel-button]:hidden"),
+				...l
+			}),
+			d && r && /* @__PURE__ */ o("button", {
+				type: "button",
+				onClick: r,
+				"aria-label": "Clear search",
+				className: "flex-shrink-0 text-text-foreground-muted hover:text-text-foreground transition-colors",
+				children: /* @__PURE__ */ o(a, { className: "h-4 w-4" })
+			})
+		]
+	});
+});
+c.displayName = "Searchbox";
+function l({ placeholder: t = "Search…", expandedWidth: a = "20rem", className: c, ...l }) {
+	let [u, d] = r(!1), f = n(null);
+	function p() {
+		d(!0), requestAnimationFrame(() => f.current?.focus());
+	}
+	function m(e) {
+		e.target.value || d(!1);
+	}
+	return /* @__PURE__ */ s("div", {
+		className: e("inline-flex items-center h-9 rounded-[var(--radius-control-lg)] border bg-surface overflow-hidden", "transition-[width,border-color] duration-300 ease-out", u ? "gap-2 px-2.5 border-primary justify-start" : "gap-0 px-0 justify-center border-border hover:border-border-hover", c),
+		style: { width: u ? a : "2.25rem" },
+		children: [/* @__PURE__ */ o("button", {
+			type: "button",
+			onClick: p,
+			"aria-label": "Open search",
+			tabIndex: u ? -1 : 0,
+			className: e("flex items-center justify-center flex-shrink-0 h-4 w-4 text-text-foreground-muted transition-colors", u ? "pointer-events-none" : "hover:text-text-foreground"),
+			children: /* @__PURE__ */ o(i, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ o("input", {
+			ref: f,
+			type: "search",
+			placeholder: t,
+			onBlur: m,
+			tabIndex: u ? 0 : -1,
+			className: e("bg-transparent outline-none text-sm text-text-foreground", "placeholder:text-text-foreground-muted [font-family:var(--font-base)]", "[&::-webkit-search-cancel-button]:hidden", u ? "opacity-100 flex-1 min-w-0" : "opacity-0 w-0 flex-none"),
+			...l
+		})]
+	});
+}
+//#endregion
+export { l as ExpandingSearchbox, c as Searchbox };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    shape?: 'line' | 'avatar' | 'block';
+}
+export declare function Skeleton({ shape, className, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,13 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/Skeleton.tsx
+function n({ shape: n = "line", className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"aria-hidden": "true",
+		className: e("animate-pulse bg-surface-background-muted", n === "line" && "h-4 w-full rounded-[var(--radius-control)]", n === "avatar" && "h-10 w-10 rounded-full", n === "block" && "h-24 w-full rounded-[var(--radius-control-lg)]", r),
+		...i
+	});
+}
+//#endregion
+export { n as Skeleton };

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,9 @@
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value' | 'defaultValue'> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { forwardRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Slider/Slider.tsx
+var a = t(({ value: t, defaultValue: a = 0, min: o = 0, max: s = 100, step: c = 1, disabled: l, onChange: u, className: d, ...f }, p) => {
+	let [m, h] = n(a), g = t !== void 0, _ = g ? t : m, v = (_ - o) / (s - o) * 100;
+	function y(e) {
+		let t = Number(e.target.value);
+		g || h(t), u?.(t);
+	}
+	return /* @__PURE__ */ i("div", {
+		className: e("relative flex items-center w-[280px] h-4 select-none", l && "opacity-50", d),
+		children: [
+			/* @__PURE__ */ r("div", { className: "absolute inset-x-0 h-1.5 rounded-full bg-neutral-surface-muted" }),
+			/* @__PURE__ */ r("div", {
+				className: "absolute h-1.5 rounded-full bg-primary",
+				style: { width: `${v}%` }
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "absolute h-4 w-4 rounded-full bg-surface border border-primary shadow-sm -translate-x-1/2 pointer-events-none",
+				style: { left: `${v}%` }
+			}),
+			/* @__PURE__ */ r("input", {
+				ref: p,
+				type: "range",
+				min: o,
+				max: s,
+				step: c,
+				value: _,
+				disabled: l,
+				onChange: y,
+				className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed m-0",
+				...f
+			})
+		]
+	});
+});
+a.displayName = "Slider";
+//#endregion
+export { a as Slider };

package/dist/components/Snippet/Snippet.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+declare const snippetVariants: (props?: ({
+    variant?: "default" | "warning" | "success" | "error" | null | undefined;
+    font?: "mono" | "sans" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SnippetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof snippetVariants> {
+    children: string;
+    lines?: 'single' | 'multi';
+}
+export declare function Snippet({ variant, font, lines, children, className, ...props }: SnippetProps): import("react").JSX.Element;
+export {};