ctc-component-library 0.2.0 → 1.0.0-alpha.3

package/dist/components/Badge/Badge.js

@@ -0,0 +1,159 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+var a = n(["inline-flex items-center justify-center font-sans tracking-[-0.5px] whitespace-nowrap", "px-x4 gap-x1"].join(" "), {
+	variants: {
+		variant: {
+			success: "",
+			destructive: "",
+			alert: "",
+			purple: "",
+			brand: "",
+			skyblue: "",
+			neutral: "",
+			outline: ""
+		},
+		tone: {
+			quiet: "",
+			loud: ""
+		},
+		size: {
+			sm: "h-[16px] rounded-x1 text-[12px] leading-[16px] [&_svg]:size-3",
+			md: "h-[24px] rounded-x2 text-[14px] leading-[20px] [&_svg]:size-4",
+			lg: "h-[32px] rounded-x3 text-[16px] leading-[24px] font-medium [&_svg]:size-4"
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "quiet",
+			variant: "success",
+			class: "bg-success-light text-success"
+		},
+		{
+			tone: "quiet",
+			variant: "destructive",
+			class: "bg-error-light text-error"
+		},
+		{
+			tone: "quiet",
+			variant: "alert",
+			class: "bg-alert-light text-alert"
+		},
+		{
+			tone: "quiet",
+			variant: "purple",
+			class: "bg-purple-lighter text-purple-dark"
+		},
+		{
+			tone: "quiet",
+			variant: "brand",
+			class: "bg-primary-lighter text-primary"
+		},
+		{
+			tone: "quiet",
+			variant: "skyblue",
+			class: "bg-skyblue-lighter text-skyblue"
+		},
+		{
+			tone: "quiet",
+			variant: "neutral",
+			class: "bg-gray-20 text-gray-80"
+		},
+		{
+			tone: "quiet",
+			variant: "outline",
+			class: "bg-transparent text-gray-80 border border-gray-40"
+		},
+		{
+			tone: "loud",
+			variant: "success",
+			class: "bg-success text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "destructive",
+			class: "bg-error text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "alert",
+			class: "bg-alert text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "purple",
+			class: "bg-purple text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "brand",
+			class: "bg-primary text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "skyblue",
+			class: "bg-skyblue text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "neutral",
+			class: "bg-gray-80 text-gray-00"
+		},
+		{
+			tone: "loud",
+			variant: "outline",
+			class: "bg-gray-00 text-gray-80 border border-gray-80"
+		}
+	],
+	defaultVariants: {
+		variant: "neutral",
+		tone: "quiet",
+		size: "md"
+	}
+}), o = t.forwardRef(({ className: t, variant: n, tone: r, size: o, icon: s, children: c, ...l }, u) => /* @__PURE__ */ i("span", {
+	ref: u,
+	className: e(a({
+		variant: n,
+		tone: r,
+		size: o
+	}), t),
+	...l,
+	children: [s, c]
+}));
+o.displayName = "Badge";
+var s = {
+	success: "bg-success",
+	destructive: "bg-error",
+	alert: "bg-alert",
+	purple: "bg-purple",
+	brand: "bg-primary",
+	skyblue: "bg-skyblue",
+	neutral: "bg-gray-60",
+	outline: "bg-gray-60"
+}, c = t.forwardRef(({ className: t, variant: n = "success", size: i = "md", ...a }, o) => /* @__PURE__ */ r("span", {
+	ref: o,
+	role: "status",
+	className: e("inline-block rounded-full shrink-0", s[n], i === "sm" && "size-1", i === "md" && "size-2", t),
+	...a
+}));
+c.displayName = "BadgeDot";
+var l = {
+	success: "bg-success",
+	destructive: "bg-error",
+	alert: "bg-alert",
+	purple: "bg-purple",
+	brand: "bg-primary",
+	skyblue: "bg-skyblue",
+	neutral: "bg-gray-80",
+	outline: "bg-gray-00 border border-gray-80 text-gray-80"
+}, u = t.forwardRef(({ className: t, variant: n = "success", size: i = "md", children: a, ...o }, s) => /* @__PURE__ */ r("span", {
+	ref: s,
+	className: e("inline-flex items-center justify-center rounded-full font-sans tracking-[-0.5px] shrink-0", n !== "outline" && "text-gray-00", l[n], i === "sm" && "size-4 text-[12px] leading-[16px]", i === "md" && "size-6 text-[18px] leading-[24px]", t),
+	...o,
+	children: a
+}));
+u.displayName = "BadgeMinimal";
+//#endregion
+export { o as Badge, c as BadgeDot, u as BadgeMinimal };

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

@@ -0,0 +1,2 @@
+export { Badge, BadgeDot, BadgeMinimal } from './Badge';
+export type { BadgeProps, BadgeDotProps, BadgeMinimalProps } from './Badge';

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+import { Badge as e, BadgeDot as t, BadgeMinimal as n } from "./Badge.js";
+export { e as Badge, t as BadgeDot, n as BadgeMinimal };

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

@@ -0,0 +1,7 @@
+import { ButtonVariants } from './button.variants';
+import * as React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
+    asChild?: boolean;
+    loading?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../lib/cn.js";
+import { buttonVariants as t } from "./button.variants.js";
+import * as n from "react";
+import { Slot as r } from "@radix-ui/react-slot";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CircleNotch as o } from "@phosphor-icons/react";
+//#region src/components/Button/Button.tsx
+var s = n.forwardRef(({ className: n, variant: s, size: c, iconOnly: l, fullWidth: u, asChild: d = !1, loading: f = !1, disabled: p, children: m, type: h = "button", ...g }, _) => {
+	let v = d ? r : "button", y = p || f;
+	return d ? /* @__PURE__ */ i(v, {
+		ref: _,
+		className: e(t({
+			variant: s,
+			size: c,
+			iconOnly: l,
+			fullWidth: u
+		}), n),
+		"aria-busy": f || void 0,
+		"aria-disabled": y || void 0,
+		...g,
+		children: m
+	}) : /* @__PURE__ */ a(v, {
+		ref: _,
+		type: h,
+		className: e(t({
+			variant: s,
+			size: c,
+			iconOnly: l,
+			fullWidth: u
+		}), n),
+		disabled: y,
+		"aria-busy": f || void 0,
+		...g,
+		children: [f ? /* @__PURE__ */ i(o, {
+			"data-icon": "inline-start",
+			weight: "bold",
+			className: "[animation:ctc-spin_700ms_linear_infinite]",
+			"aria-hidden": "true"
+		}) : null, m]
+	});
+});
+s.displayName = "Button";
+//#endregion
+export { s as Button };

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

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Button — pixel-perfect to Figma spec.
+ *
+ * Size matrix (per Figma):
+ *   sm  → h-8  (32px), text 16px (Body4/Md), px-x4 (16), icon child 24, icon-only 24×24
+ *   md  → h-12 (48px), text 18px (Body3/Md), px-x6 (24), icon child 24, icon-only 32×32
+ *   lg  → h-14 (56px), text 18px (Body3/Md), px-x8 (32), icon child 32, icon-only 40×40
+ *
+ * Border radius is constant at 32px (rounded-x8) across all sizes.
+ *
+ * Note: NT Bau only ships Regular (400) and Bold (700). The Figma "Md"
+ * weight resolves to font-weight: 500 which browsers synthesize from the
+ * Regular face.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "success" | "destructive" | "brand" | "skyblue" | "outline" | "outline-skyblue" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/components/Button/button.variants.js

@@ -0,0 +1,62 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/Button/button.variants.ts
+var t = e([
+	"inline-flex items-center justify-center gap-x2",
+	"rounded-x8 font-sans select-none",
+	"[transition:transform_var(--duration-fast)_var(--ease-out),background-color_var(--duration-fast)_var(--ease-out),border-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)]",
+	"active:[transform:scale(var(--press-scale))]",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+	"disabled:cursor-not-allowed disabled:bg-gray-20 disabled:text-gray-40 disabled:border-transparent disabled:active:transform-none",
+	"[&_[data-icon='inline-start']]:-ml-1 [&_[data-icon='inline-end']]:-mr-1"
+], {
+	variants: {
+		variant: {
+			brand: "bg-primary-light text-gray-80 hover:bg-primary-lighter hover:text-gray-60",
+			skyblue: "bg-skyblue text-gray-00 hover:bg-skyblue-hover",
+			default: "bg-gray-80 text-gray-00 hover:bg-gray-60 hover:text-gray-20",
+			success: "bg-success text-gray-00 hover:bg-success-hover",
+			destructive: "bg-error text-gray-00 hover:bg-error-hover",
+			outline: "bg-transparent text-gray-80 border border-gray-80 hover:bg-gray-20 hover:border-gray-60 disabled:border-gray-40",
+			"outline-skyblue": "bg-transparent text-skyblue border border-skyblue hover:bg-skyblue-lighter disabled:border-gray-40 disabled:text-gray-40",
+			ghost: "bg-transparent text-gray-80 hover:bg-gray-20"
+		},
+		size: {
+			sm: "h-8 px-x4 text-[16px] leading-[20px] font-medium [&_[data-icon]]:size-6",
+			md: "h-12 px-x6 text-[18px] leading-[24px] font-medium [&_[data-icon]]:size-6",
+			lg: "h-14 px-x8 text-[18px] leading-[24px] font-medium [&_[data-icon]]:size-8"
+		},
+		iconOnly: {
+			true: "p-0",
+			false: ""
+		},
+		fullWidth: {
+			true: "w-full",
+			false: "w-fit"
+		}
+	},
+	compoundVariants: [
+		{
+			iconOnly: !0,
+			size: "sm",
+			class: "size-6 h-6 px-0"
+		},
+		{
+			iconOnly: !0,
+			size: "md",
+			class: "size-8 h-8 px-0"
+		},
+		{
+			iconOnly: !0,
+			size: "lg",
+			class: "size-10 h-10 px-0"
+		}
+	],
+	defaultVariants: {
+		variant: "brand",
+		size: "md",
+		iconOnly: !1,
+		fullWidth: !1
+	}
+});
+//#endregion
+export { t as buttonVariants };

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

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps } from './Button';
+export { buttonVariants, type ButtonVariants } from './button.variants';

package/dist/components/Button/index.js

@@ -0,0 +1,3 @@
+import { buttonVariants as e } from "./button.variants.js";
+import { Button as t } from "./Button.js";
+export { t as Button, e as buttonVariants };

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    /** lg=22px (default), sm=16px */
+    size?: 'sm' | 'lg';
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,23 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Check as r, Minus as i } from "@phosphor-icons/react";
+import * as a from "@radix-ui/react-checkbox";
+//#region src/components/Checkbox/Checkbox.tsx
+var o = t.forwardRef(({ className: t, size: o = "lg", checked: s, ...c }, l) => /* @__PURE__ */ n(a.Root, {
+	ref: l,
+	checked: s,
+	"data-pressable": "",
+	className: e("peer shrink-0 rounded-[2px] border bg-gray-00", "inline-flex items-center justify-center", "[transition:background-color_var(--duration-fast)_var(--ease-out),border-color_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "active:scale-[0.92]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "border-gray-80", "hover:border-gray-100", "data-[state=checked]:bg-gray-80 data-[state=checked]:border-gray-80 data-[state=checked]:text-gray-00", "hover:data-[state=checked]:bg-gray-100 hover:data-[state=checked]:border-gray-100", "data-[state=indeterminate]:bg-gray-80 data-[state=indeterminate]:border-gray-80 data-[state=indeterminate]:text-gray-00", "hover:data-[state=indeterminate]:bg-gray-100 hover:data-[state=indeterminate]:border-gray-100", "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-40 disabled:active:transform-none", "disabled:data-[state=checked]:bg-gray-20 disabled:data-[state=checked]:border-gray-40 disabled:data-[state=checked]:text-gray-40", "disabled:data-[state=indeterminate]:bg-gray-20 disabled:data-[state=indeterminate]:border-gray-40 disabled:data-[state=indeterminate]:text-gray-40", "aria-invalid:border-error", o === "lg" && "size-[22px]", o === "sm" && "size-[16px]", t),
+	...c,
+	children: /* @__PURE__ */ n(a.Indicator, {
+		className: e("flex items-center justify-center text-current", "[animation:ctc-scale-in_var(--duration-fast)_var(--ease-out)]"),
+		children: n(s === "indeterminate" ? i : r, {
+			weight: "bold",
+			className: e(o === "lg" ? "size-4" : "size-3")
+		})
+	})
+}));
+o.displayName = "Checkbox";
+//#endregion
+export { o as Checkbox };

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

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox as e } from "./Checkbox.js";
+export { e as Checkbox };

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface DismissibleChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: 'dismissible';
+    disabled?: boolean;
+    onDismiss?: () => void;
+}
+export interface SelectableChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'choice' | 'multi';
+    selected?: boolean;
+}
+export type ChipProps = DismissibleChipProps | SelectableChipProps;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
+export interface ChipGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Apply staggered mount animation (35ms step, max 12 children). Default false. */
+    stagger?: boolean;
+}
+export declare const ChipGroup: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/Chip.js

@@ -0,0 +1,59 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Check as i, X as a } from "@phosphor-icons/react";
+//#region src/components/Chip/Chip.tsx
+var o = [
+	"inline-flex items-center gap-x1 py-x1 px-x4 rounded-x3",
+	"font-sans font-medium text-[16px] leading-[24px] tracking-[-0.5px]",
+	"[transition:background-color_var(--duration-fast)_var(--ease-out),border-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)]"
+].join(" "), s = ["bg-gray-00 border border-gray-40 text-gray-80", "hover:border-gray-60"].join(" "), c = ["bg-gray-80 text-gray-00 border border-transparent", "hover:bg-gray-100"].join(" "), l = "border-gray-40 text-gray-40 cursor-not-allowed", u = "bg-gray-20 text-gray-40 border-transparent cursor-not-allowed", d = (e, t) => e ? t ? u : l : t ? c : s, f = t.forwardRef((t, c) => {
+	if (t.variant === "dismissible") {
+		let { variant: i, className: u, disabled: d, onDismiss: f, children: p, ...m } = t;
+		return /* @__PURE__ */ r("div", {
+			ref: c,
+			className: e(o, d ? l : s, "cursor-default select-none", "[animation:ctc-fade-rise_var(--duration-base)_var(--ease-out)]", u),
+			"aria-disabled": d,
+			...m,
+			children: [/* @__PURE__ */ n("span", {
+				className: "shrink-0",
+				children: p
+			}), /* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: d ? void 0 : f,
+				disabled: d,
+				"aria-label": "Quitar",
+				"data-pressable": "",
+				className: e("inline-flex items-center justify-center shrink-0 size-6", "rounded-x1 opacity-60 hover:opacity-100", "active:scale-[var(--press-scale)]", "[transition:opacity_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", d && "pointer-events-none opacity-40 active:transform-none"),
+				children: /* @__PURE__ */ n(a, { className: "size-6" })
+			})]
+		});
+	}
+	let { variant: u = "choice", selected: f = !1, disabled: p, className: m, children: h, onClick: g, ..._ } = t;
+	return /* @__PURE__ */ r("button", {
+		ref: c,
+		type: "button",
+		disabled: p,
+		"aria-pressed": f,
+		onClick: g,
+		"data-pressable": "",
+		className: e(o, d(p, f), !p && "active:[transform:scale(var(--press-scale))]", m),
+		..._,
+		children: [u === "multi" && f && /* @__PURE__ */ n(i, {
+			weight: "bold",
+			className: "size-6 shrink-0"
+		}), /* @__PURE__ */ n("span", {
+			className: "shrink-0",
+			children: h
+		})]
+	});
+});
+f.displayName = "Chip";
+var p = t.forwardRef(({ className: t, stagger: r = !1, ...i }, a) => /* @__PURE__ */ n("div", {
+	ref: a,
+	className: e("flex flex-wrap gap-x2", r && "ctc-stagger", t),
+	...i
+}));
+p.displayName = "ChipGroup";
+//#endregion
+export { f as Chip, p as ChipGroup };

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip, ChipGroup } from './Chip';
+export type { ChipProps, DismissibleChipProps, SelectableChipProps } from './Chip';

package/dist/components/Chip/index.js

@@ -0,0 +1,2 @@
+import { Chip as e, ChipGroup as t } from "./Chip.js";
+export { e as Chip, t as ChipGroup };

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

@@ -0,0 +1,31 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    className?: string;
+    /** Async search: invoked when the user types in the search input. */
+    onSearch?: (query: string) => void;
+    /** Set when an async search is in flight. */
+    searching?: boolean;
+    /** Set when the consumer has more pages it can load. */
+    hasMore?: boolean;
+    /** Invoked when the user scrolls near the bottom of the option list. */
+    onEndReached?: () => void;
+    /** Set when the consumer is currently fetching the next page. */
+    loading?: boolean;
+}
+export declare const Combobox: {
+    ({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, size, className, onSearch, searching, hasMore, onEndReached, loading }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,98 @@
+import { cn as e } from "../../lib/cn.js";
+import { inputVariants as t } from "../Input/Input.js";
+import { Spinner as n } from "../Spinner/Spinner.js";
+import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "../Popover/Popover.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { CaretUpDownIcon as l, CheckIcon as u, MagnifyingGlassIcon as d } from "@phosphor-icons/react";
+import { Command as f } from "cmdk";
+//#region src/components/Combobox/Combobox.tsx
+var p = ({ options: p, value: m, defaultValue: h, onValueChange: g, placeholder: _ = "Seleccionar opción", searchPlaceholder: v = "Buscar...", emptyText: y = "Sin resultados", disabled: b, size: x = "sm", className: S, onSearch: C, searching: w, hasMore: T, onEndReached: E, loading: D }) => {
+	let [O, k] = o.useState(!1), [A, j] = o.useState(h), M = m !== void 0, N = M ? m : A, P = p.find((e) => e.value === N), F = (e) => {
+		M || j(e), g?.(e), k(!1);
+	}, I = o.useRef(null);
+	return /* @__PURE__ */ c(r, {
+		open: O,
+		onOpenChange: k,
+		children: [/* @__PURE__ */ s(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "combobox",
+				"data-pressable": "",
+				"aria-expanded": O,
+				disabled: b,
+				className: e(t({ size: x }), "inline-flex items-center justify-between text-left", "active:scale-[var(--press-scale)] disabled:active:transform-none", !P && "text-gray-40", S),
+				children: [/* @__PURE__ */ s("span", {
+					className: "truncate",
+					children: P ? P.label : _
+				}), /* @__PURE__ */ s(l, {
+					weight: "bold",
+					className: "size-4 text-gray-60 shrink-0 ml-x2"
+				})]
+			})
+		}), /* @__PURE__ */ s(i, {
+			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			align: "start",
+			children: /* @__PURE__ */ c(f, {
+				shouldFilter: !C,
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center border-b border-gray-20 px-x3",
+					children: [
+						/* @__PURE__ */ s(d, {
+							weight: "regular",
+							className: "size-4 text-gray-60 mr-x2 shrink-0"
+						}),
+						/* @__PURE__ */ s(f.Input, {
+							placeholder: v,
+							onValueChange: C,
+							className: e("flex h-10 w-full bg-transparent py-x2 font-sans text-[14px] text-gray-80 outline-none", "placeholder:text-gray-40 disabled:cursor-not-allowed disabled:opacity-50")
+						}),
+						w && /* @__PURE__ */ s(n, {
+							size: "sm",
+							className: "text-gray-60"
+						})
+					]
+				}), /* @__PURE__ */ c(f.List, {
+					ref: I,
+					onScroll: (e) => {
+						if (!T || D) return;
+						let t = e.currentTarget;
+						t.scrollTop + t.clientHeight >= t.scrollHeight - 32 && E?.();
+					},
+					className: "max-h-64 overflow-y-auto p-x1",
+					children: [
+						/* @__PURE__ */ s(f.Empty, {
+							className: "py-x6 text-center text-[14px] text-gray-60",
+							children: y
+						}),
+						p.map((t) => /* @__PURE__ */ c(f.Item, {
+							value: t.value,
+							disabled: t.disabled,
+							onSelect: F,
+							className: e("relative flex cursor-default select-none items-center rounded-x1 py-x2 pl-x3 pr-x8", "text-[14px] text-gray-80 outline-none", "[transition:background-color_var(--duration-fast)_var(--ease-out)]", "data-[selected=true]:bg-gray-20 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"),
+							children: [/* @__PURE__ */ s("span", {
+								className: "truncate",
+								children: t.label
+							}), N === t.value && /* @__PURE__ */ s(u, {
+								weight: "bold",
+								className: "absolute right-x3 size-4 text-primary"
+							})]
+						}, t.value)),
+						D && /* @__PURE__ */ s("div", {
+							className: "flex items-center justify-center py-x3",
+							children: /* @__PURE__ */ s(n, {
+								size: "sm",
+								className: "text-gray-60"
+							})
+						})
+					]
+				})]
+			})
+		})]
+	});
+};
+p.displayName = "Combobox";
+//#endregion
+export { p as Combobox };

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

@@ -0,0 +1 @@
+export { Combobox, type ComboboxProps, type ComboboxOption } from './Combobox';

package/dist/components/Combobox/index.js

@@ -0,0 +1,2 @@
+import { Combobox as e } from "./Combobox.js";
+export { e as Combobox };

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,24 @@
+import { ColumnDef } from '@tanstack/react-table';
+import * as React from 'react';
+export interface ExpandableConfig<T> {
+    /** Sub-rows to render under an expanded row. */
+    expandedRowData: (record: T) => T[];
+    /** Custom columns for sub-rows. Defaults to the parent columns. */
+    expandedRowColumns?: ColumnDef<T>[];
+    /** When true (default), inserts a leading spacer column to align nested rows. */
+    alignSubRowsWithParent?: boolean;
+    /** Optional override for the entire expanded row render. */
+    expandedRowRender?: (record: T) => React.ReactNode;
+    expandedRowNestedClassName?: string;
+}
+export interface DataTableProps<T> {
+    columns: ColumnDef<T>[];
+    data: T[];
+    expandable?: ExpandableConfig<T>;
+    className?: string;
+    emptyText?: string;
+    loading?: boolean;
+    /** Forwarded as `data-testid` to the root. */
+    'data-testid'?: string;
+}
+export declare function DataTable<T>({ columns, data, expandable, className, emptyText, loading, ...props }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;