ctc-component-library 0.3.0 → 1.0.0-alpha.4

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,74 @@
+import { cn as e } from "../../lib/cn.js";
+import { Table as t, TableBody as n, TableCell as r, TableHead as i, TableHeader as a, TableRow as o } from "./Table.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CaretRight as u, Tray as d } from "@phosphor-icons/react";
+import { flexRender as f, getCoreRowModel as p, getExpandedRowModel as m, getSortedRowModel as h, useReactTable as g } from "@tanstack/react-table";
+//#region src/components/DataTable/DataTable.tsx
+function _({ columns: _, data: v, expandable: y, className: b, emptyText: x = "Sin datos", loading: S, ...C }) {
+	let [w, T] = s.useState([]), [E, D] = s.useState({}), O = g({
+		data: v,
+		columns: _,
+		state: {
+			sorting: w,
+			expanded: E
+		},
+		onSortingChange: T,
+		onExpandedChange: D,
+		getRowCanExpand: y ? () => !0 : void 0,
+		getCoreRowModel: p(),
+		getSortedRowModel: h(),
+		getExpandedRowModel: y ? m() : void 0
+	}), k = (i) => {
+		if (!y) return null;
+		if (y.expandedRowRender) return y.expandedRowRender(i.original);
+		let a = y.expandedRowData(i.original);
+		if (a.length === 0) return null;
+		let s = y.alignSubRowsWithParent !== !1, u = y.expandedRowColumns ?? _;
+		return /* @__PURE__ */ c("div", {
+			className: e("w-full", y.expandedRowNestedClassName),
+			children: /* @__PURE__ */ c(t, { children: /* @__PURE__ */ c(n, { children: a.map((e, t) => /* @__PURE__ */ l(o, { children: [s && /* @__PURE__ */ c(r, { className: "w-12" }), u.map((t, n) => {
+				let i = t.accessorKey;
+				return /* @__PURE__ */ c(r, { children: i ? e[i] : null }, n);
+			})] }, t)) }) })
+		});
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e("rounded-x4 border border-gray-20 bg-gray-00", b),
+		...C,
+		children: /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(a, { children: O.getHeaderGroups().map((e) => /* @__PURE__ */ l(o, { children: [y && /* @__PURE__ */ c(i, { className: "w-12" }), e.headers.map((e) => /* @__PURE__ */ c(i, { children: e.isPlaceholder ? null : f(e.column.columnDef.header, e.getContext()) }, e.id))] }, e.id)) }), /* @__PURE__ */ c(n, { children: O.getRowModel().rows.length === 0 ? /* @__PURE__ */ c(o, { children: /* @__PURE__ */ c(r, {
+			colSpan: _.length + +!!y,
+			className: "h-32 text-center text-gray-60",
+			children: S ? "Cargando..." : /* @__PURE__ */ l("span", {
+				className: "inline-flex flex-col items-center gap-x2",
+				children: [/* @__PURE__ */ c(d, {
+					weight: "regular",
+					className: "size-8 text-gray-40"
+				}), x]
+			})
+		}) }) : O.getRowModel().rows.map((t) => /* @__PURE__ */ l(s.Fragment, { children: [/* @__PURE__ */ l(o, {
+			"data-state": t.getIsSelected() ? "selected" : void 0,
+			children: [y && /* @__PURE__ */ c(r, {
+				className: "w-12",
+				children: /* @__PURE__ */ c("button", {
+					type: "button",
+					"data-pressable": "",
+					onClick: t.getToggleExpandedHandler(),
+					"aria-expanded": t.getIsExpanded(),
+					"aria-label": t.getIsExpanded() ? "Colapsar fila" : "Expandir fila",
+					className: e("inline-flex size-6 items-center justify-center rounded-x1 hover:bg-gray-20", "[transition:background-color_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "active:scale-[0.92]"),
+					children: /* @__PURE__ */ c(u, {
+						weight: "bold",
+						className: e("size-4 [transition:transform_var(--duration-base)_var(--ease-out)]", t.getIsExpanded() && "rotate-90")
+					})
+				})
+			}), t.getVisibleCells().map((e) => /* @__PURE__ */ c(r, { children: f(e.column.columnDef.cell, e.getContext()) }, e.id))]
+		}), t.getIsExpanded() && /* @__PURE__ */ c(o, { children: /* @__PURE__ */ c(r, {
+			colSpan: t.getVisibleCells().length + +!!y,
+			className: e("bg-gray-20/30 p-0", "[animation:ctc-fade-rise_var(--duration-base)_var(--ease-out)]"),
+			children: k(t)
+		}) })] }, t.id)) })] })
+	});
+}
+//#endregion
+export { _ as DataTable };

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

package/dist/components/DataTable/Table.js

@@ -0,0 +1,57 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DataTable/Table.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	className: "relative w-full overflow-auto",
+	children: /* @__PURE__ */ n("table", {
+		ref: i,
+		className: e("w-full caption-bottom font-sans text-[14px]", t),
+		...r
+	})
+}));
+r.displayName = "Table";
+var i = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("thead", {
+	ref: i,
+	className: e("[&_tr]:border-b border-gray-20", t),
+	...r
+}));
+i.displayName = "TableHeader";
+var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tbody", {
+	ref: i,
+	className: e("[&_tr:last-child]:border-0", t),
+	...r
+}));
+a.displayName = "TableBody";
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tfoot", {
+	ref: i,
+	className: e("bg-gray-20 font-bold [&>tr]:last:border-b-0", t),
+	...r
+}));
+o.displayName = "TableFooter";
+var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tr", {
+	ref: i,
+	className: e("border-b border-gray-20 hover:bg-gray-20/50", "[transition:background-color_var(--duration-fast)_var(--ease-out)]", "data-[state=selected]:bg-gray-20", t),
+	...r
+}));
+s.displayName = "TableRow";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("th", {
+	ref: i,
+	className: e("h-12 px-x4 text-left align-middle font-bold text-gray-100 text-[12px]", "[&:has([role=checkbox])]:pr-0", t),
+	...r
+}));
+c.displayName = "TableHead";
+var l = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("td", {
+	ref: i,
+	className: e("p-x4 align-middle text-gray-80", "[&:has([role=checkbox])]:pr-0", t),
+	...r
+}));
+l.displayName = "TableCell";
+var u = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("caption", {
+	ref: i,
+	className: e("mt-x4 text-[12px] text-gray-60", t),
+	...r
+}));
+u.displayName = "TableCaption";
+//#endregion
+export { r as Table, a as TableBody, u as TableCaption, l as TableCell, o as TableFooter, c as TableHead, i as TableHeader, s as TableRow };

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

@@ -0,0 +1,3 @@
+export { DataTable, type DataTableProps, type ExpandableConfig } from './DataTable';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './Table';
+export type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';

package/dist/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import { Table as e, TableBody as t, TableCaption as n, TableCell as r, TableFooter as i, TableHead as a, TableHeader as o, TableRow as s } from "./Table.js";
+import { DataTable as c } from "./DataTable.js";
+export { c as DataTable, e as Table, t as TableBody, n as TableCaption, r as TableCell, i as TableFooter, a as TableHead, o as TableHeader, s as TableRow };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,20 @@
+import { DayPickerProps } from 'react-day-picker';
+import { Input } from '../Input/Input';
+export interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    size?: 'sm' | 'lg';
+    className?: string;
+    /** Forwarded to the underlying DayPicker. */
+    calendarProps?: Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect'>;
+    'data-testid'?: string;
+}
+export declare const DatePicker: {
+    ({ value, defaultValue, onValueChange, placeholder, disabled, locale, size, className, calendarProps, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Input };

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,73 @@
+import { cn as e } from "../../lib/cn.js";
+import { inputVariants as t } from "../Input/Input.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../Popover/Popover.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { CalendarIcon as c, CaretLeftIcon as l, CaretRightIcon as u } from "@phosphor-icons/react";
+import { DayPicker as d } from "react-day-picker";
+//#region src/components/DatePicker/DatePicker.tsx
+var f = (e, t = "es-AR") => e ? new Intl.DateTimeFormat(t, { dateStyle: "medium" }).format(e) : "", p = (e, t = "es-AR") => {
+	let n = new Intl.DateTimeFormat(t, { weekday: "short" }).format(e).replace(/\.$/, "");
+	return n.charAt(0).toUpperCase() + n.slice(1).toLowerCase();
+}, m = ({ value: m, defaultValue: h, onValueChange: g, placeholder: _ = "Seleccionar fecha", disabled: v, locale: y = "es-AR", size: b = "sm", className: x, calendarProps: S, ...C }) => {
+	let [w, T] = a.useState(h), [E, D] = a.useState(!1), O = m !== void 0, k = O ? m : w, A = (e) => {
+		O || T(e), g?.(e), D(!1);
+	};
+	return /* @__PURE__ */ s(n, {
+		open: E,
+		onOpenChange: D,
+		children: [/* @__PURE__ */ o(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ s("button", {
+				type: "button",
+				disabled: v,
+				className: e(t({ size: b }), "inline-flex items-center justify-between text-left", !k && "text-gray-40", x),
+				...C,
+				children: [/* @__PURE__ */ o("span", { children: k ? f(k, y) : _ }), /* @__PURE__ */ o(c, {
+					weight: "regular",
+					className: "size-5 text-gray-60 ml-x2 shrink-0"
+				})]
+			})
+		}), /* @__PURE__ */ o(r, {
+			className: "w-[284px] p-x4 rounded-x4 bg-gray-00",
+			align: "start",
+			children: /* @__PURE__ */ o(d, {
+				mode: "single",
+				selected: k,
+				onSelect: A,
+				showOutsideDays: !0,
+				weekStartsOn: 1,
+				formatters: { formatWeekdayName: (e) => p(e, y) },
+				...S,
+				components: { Chevron: ({ orientation: e }) => o(e === "left" ? l : u, {
+					weight: "bold",
+					className: "size-4"
+				}) },
+				classNames: {
+					root: "p-0 font-sans",
+					months: "flex flex-col gap-x3",
+					month: "flex flex-col gap-x3 relative",
+					month_caption: "flex items-center justify-center h-6 font-sans font-bold text-[18px] leading-[24px] text-gray-80 tracking-[-0.5px]",
+					caption_label: "",
+					nav: "absolute top-0 left-0 right-0 flex items-center justify-between z-10",
+					button_previous: e("inline-flex items-center justify-center size-6 rounded-x1 text-gray-80", "hover:bg-gray-20 [transition:background-color_var(--duration-fast)_var(--ease-out)]", "disabled:opacity-40 disabled:cursor-not-allowed"),
+					button_next: e("inline-flex items-center justify-center size-6 rounded-x1 text-gray-80", "hover:bg-gray-20 [transition:background-color_var(--duration-fast)_var(--ease-out)]", "disabled:opacity-40 disabled:cursor-not-allowed"),
+					month_grid: "w-full border-collapse",
+					weekdays: "",
+					weekday: "text-[11px] leading-[14px] tracking-[-0.5px] text-gray-40 font-medium w-9 h-8 align-middle text-center",
+					week: "",
+					day: "p-0 text-center align-middle",
+					day_button: e("size-8 rounded-x2 inline-flex items-center justify-center mx-auto", "font-medium text-[15px] leading-[24px] tracking-[-0.5px] text-gray-80", "[transition:background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out),border-color_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "hover:bg-gray-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "active:scale-[var(--press-scale)] disabled:active:transform-none", "border border-transparent"),
+					today: "[&_button]:font-bold",
+					selected: "[&_button]:border-gray-60 [&_button]:font-bold [&_button:hover]:bg-gray-20",
+					outside: "[&_button]:text-gray-20 [&_button]:hover:bg-transparent",
+					disabled: "[&_button]:text-gray-40 [&_button]:cursor-not-allowed [&_button:hover]:bg-transparent",
+					hidden: "invisible"
+				}
+			})
+		})]
+	});
+};
+m.displayName = "DatePicker";
+//#endregion
+export { m as DatePicker };

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

@@ -0,0 +1 @@
+export { DatePicker, type DatePickerProps } from './DatePicker';

package/dist/components/DatePicker/index.js

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

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    hideCloseButton?: boolean;
+}
+export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,51 @@
+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 { X as i } from "@phosphor-icons/react";
+import * as a from "@radix-ui/react-dialog";
+//#region src/components/Dialog/Dialog.tsx
+var o = a.Root, s = a.Trigger, c = a.Portal, l = a.Close, u = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Overlay, {
+	ref: i,
+	className: e("fixed inset-0 z-50 bg-gray-100/50", "data-[state=open]:[animation:ctc-overlay-in_var(--modal-open-dur)_var(--modal-ease)_both]", "data-[state=closed]:[animation:ctc-overlay-out_var(--modal-close-dur)_var(--modal-ease)_both]", t),
+	...r
+}));
+u.displayName = "DialogOverlay";
+var d = t.forwardRef(({ className: t, children: o, hideCloseButton: s = !1, ...l }, d) => /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(u, {}), /* @__PURE__ */ r(a.Content, {
+	ref: d,
+	className: e("fixed left-1/2 top-1/2 z-50", "w-full max-w-[475px] rounded-x4 border border-gray-20 bg-gray-00 p-x6 shadow-lg", "origin-center", "data-[state=open]:[animation:ctc-modal-in_var(--modal-open-dur)_var(--modal-ease)_both]", "data-[state=closed]:[animation:ctc-modal-out_var(--modal-close-dur)_var(--modal-ease)_both]", "flex flex-col gap-x4", t),
+	...l,
+	children: [o, !s && /* @__PURE__ */ n(a.Close, {
+		"aria-label": "Cerrar",
+		"data-pressable": "",
+		className: e("absolute right-x4 top-x4 inline-flex size-8 items-center justify-center rounded-x2", "text-gray-60 hover:text-gray-80 hover:bg-gray-20", "[transition:transform_var(--duration-fast)_var(--ease-out),background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+		children: /* @__PURE__ */ n(i, {
+			weight: "bold",
+			className: "size-5"
+		})
+	})]
+})] }));
+d.displayName = "DialogContent";
+var f = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("flex flex-col gap-x2 pr-x8", t),
+	...r
+});
+f.displayName = "DialogHeader";
+var p = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("flex flex-col-reverse sm:flex-row sm:justify-end gap-x2", t),
+	...r
+});
+p.displayName = "DialogFooter";
+var m = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Title, {
+	ref: i,
+	className: e("font-display font-light text-[24px] leading-[30px] tracking-[0.8px] text-gray-100", t),
+	...r
+}));
+m.displayName = "DialogTitle";
+var h = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Description, {
+	ref: i,
+	className: e("font-sans text-[16px] leading-[22px] text-gray-60", t),
+	...r
+}));
+h.displayName = "DialogDescription";
+//#endregion
+export { o as Dialog, l as DialogClose, d as DialogContent, h as DialogDescription, p as DialogFooter, f as DialogHeader, u as DialogOverlay, c as DialogPortal, m as DialogTitle, s as DialogTrigger };

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

@@ -0,0 +1 @@
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, type DialogContentProps } from './Dialog';

package/dist/components/Dialog/index.js

@@ -0,0 +1,2 @@
+import { Dialog as e, DialogClose as t, DialogContent as n, DialogDescription as r, DialogFooter as i, DialogHeader as a, DialogOverlay as o, DialogPortal as s, DialogTitle as c, DialogTrigger as l } from "./Dialog.js";
+export { e as Dialog, t as DialogClose, n as DialogContent, r as DialogDescription, i as DialogFooter, a as DialogHeader, o as DialogOverlay, s as DialogPortal, c as DialogTitle, l as DialogTrigger };

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export declare const FieldGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    /** Marks the field invalid; downstream control should also receive aria-invalid. */
+    'data-invalid'?: boolean;
+    /** Marks the field disabled; downstream control should also receive disabled. */
+    'data-disabled'?: boolean;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Visual size, paired with the input it labels.
+     * - `sm` → 18px / Body3 (default; pairs with sm Input).
+     * - `lg` → 20px / Body2 (pairs with lg Input).
+     */
+    size?: 'sm' | 'lg';
+}
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export declare const FieldDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const FieldSet: React.ForwardRefExoticComponent<React.FieldsetHTMLAttributes<HTMLFieldSetElement> & React.RefAttributes<HTMLFieldSetElement>>;
+export declare const FieldLegend: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLegendElement> & React.RefAttributes<HTMLLegendElement>>;

package/dist/components/Field/Field.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { Slot as n } from "@radix-ui/react-slot";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Field/Field.tsx
+var i = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("flex flex-col gap-x4", t),
+	...n
+}));
+i.displayName = "FieldGroup";
+var a = t.forwardRef(({ className: t, asChild: i, ...a }, o) => /* @__PURE__ */ r(i ? n : "div", {
+	ref: o,
+	className: e("flex flex-col gap-x1", "data-[invalid=true]:[--field-border:var(--color-error)]", "[transition:color_var(--duration-fast)_var(--ease-out)]", t),
+	...a
+}));
+a.displayName = "Field";
+var o = t.forwardRef(({ className: t, size: n = "sm", ...i }, a) => /* @__PURE__ */ r("label", {
+	ref: a,
+	className: e("font-sans text-gray-80 mb-x3", n === "sm" && "text-[18px] leading-[24px]", n === "lg" && "text-[20px] leading-[24px]", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", "[[data-invalid=true]_&]:text-error", "[[data-disabled=true]_&]:text-gray-40", t),
+	...i
+}));
+o.displayName = "FieldLabel";
+var s = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("p", {
+	ref: i,
+	className: e("font-sans text-[12px] leading-[16px] text-gray-60", "[[data-invalid=true]_&]:text-error", t),
+	...n
+}));
+s.displayName = "FieldDescription";
+var c = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("fieldset", {
+	ref: i,
+	className: e("flex flex-col gap-x2 border-0 m-0 p-0", t),
+	...n
+}));
+c.displayName = "FieldSet";
+var l = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("legend", {
+	ref: i,
+	className: e("font-sans font-bold text-[14px] leading-[20px] text-gray-80 mb-x2", t),
+	...n
+}));
+l.displayName = "FieldLegend";
+//#endregion
+export { a as Field, s as FieldDescription, i as FieldGroup, o as FieldLabel, l as FieldLegend, c as FieldSet };

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

@@ -0,0 +1 @@
+export { FieldGroup, Field, FieldLabel, FieldDescription, FieldSet, FieldLegend, type FieldProps, type FieldLabelProps } from './Field';

package/dist/components/Field/index.js

@@ -0,0 +1,2 @@
+import { Field as e, FieldDescription as t, FieldGroup as n, FieldLabel as r, FieldLegend as i, FieldSet as a } from "./Field.js";
+export { e as Field, t as FieldDescription, n as FieldGroup, r as FieldLabel, i as FieldLegend, a as FieldSet };

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import { Icon as PhosphorIconType, IconProps as PhosphorIconProps } from '@phosphor-icons/react';
+import * as React from 'react';
+export interface IconProps extends Omit<PhosphorIconProps, 'ref'> {
+    icon: PhosphorIconType;
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export type { PhosphorIconType, PhosphorIconProps };

package/dist/components/Icon/Icon.js

@@ -0,0 +1,13 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Icon/Icon.tsx
+var r = t.forwardRef(({ icon: t, className: r, weight: i = "regular", ...a }, o) => /* @__PURE__ */ n(t, {
+	ref: o,
+	weight: i,
+	className: e("shrink-0", r),
+	...a
+}));
+r.displayName = "Icon";
+//#endregion
+export { r as Icon };

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

@@ -0,0 +1,13 @@
+/**
+ * Icon wrapper for Phosphor icons.
+ *
+ * Phosphor icons are NOT re-exported from this subpath because their names
+ * collide with components in this lib (e.g. `Spinner`, `Tabs`, `Table`).
+ * Import them directly from `@phosphor-icons/react`:
+ *
+ * @example
+ *   import { Heart, CheckCircle } from '@phosphor-icons/react';
+ *   import { Icon } from 'ctc-component-library/icon';
+ *   <Icon icon={Heart} weight="fill" />
+ */
+export { Icon, type IconProps, type PhosphorIconType, type PhosphorIconProps } from './Icon';

package/dist/components/Icon/index.js

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Input — pixel-perfect to Figma spec.
+ *
+ * Sizes:
+ *   sm → h=48px, stroke 1px, radius 12px (rounded-x3), L/R padding 18px,
+ *        text Body3/Rg (18px), inner icons 24px.
+ *   lg → h=60px, stroke 1px, radius 16px (rounded-x4), L/R padding 24px,
+ *        text Body2/Rg (20px), inner icons 32px.
+ *
+ * State colors per Figma:
+ *   default      → stroke gray-80,  content gray-40 (placeholder) / gray-100 (typing)
+ *   hover-empty  → stroke gray-60
+ *   hover-filled → stroke gray-80
+ *   focus        → stroke gray-80,  content gray-100
+ *   completed    → stroke gray-80,  content gray-80
+ *   disabled     → stroke gray-20,  content gray-40
+ *   error        → stroke error,    content gray-80
+ *   read-only    → stroke gray-20,  content gray-80
+ */
+export declare const inputVariants: (props?: ({
+    size?: "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+}
+export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputGroupInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputGroupPrefix: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const InputGroupSuffix: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * InputGroupBadge — for "USD" / "MX$" / unit suffixes that have a tonal
+ * background (per Figma spec, suffix/prefix uses BG Gray20).
+ */
+export declare const InputGroupBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,87 @@
+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 } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+var i = n([
+	"flex w-full bg-gray-00 font-sans text-gray-100",
+	"border border-gray-80",
+	"[transition:border-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out),background-color_var(--duration-fast)_var(--ease-out)]",
+	"placeholder:text-gray-40",
+	"hover:border-gray-60 hover:placeholder:text-gray-60",
+	"focus-visible:outline-none focus-visible:border-gray-80 focus-visible:text-gray-100",
+	"disabled:cursor-not-allowed disabled:bg-gray-00 disabled:border-gray-20 disabled:text-gray-40 disabled:placeholder:text-gray-40",
+	"read-only:border-gray-20 read-only:text-gray-80",
+	"aria-invalid:border-error aria-invalid:hover:border-error aria-invalid:focus-visible:border-error"
+], {
+	variants: { size: {
+		sm: "h-12 px-[18px] rounded-x3 text-[18px] leading-[24px]",
+		lg: "h-[60px] px-x6 rounded-x4 text-[20px] leading-[24px]"
+	} },
+	defaultVariants: { size: "sm" }
+}), a = t.forwardRef(({ className: t, type: n = "text", size: a, ...o }, s) => /* @__PURE__ */ r("input", {
+	ref: s,
+	type: n,
+	className: e(i({ size: a }), t),
+	...o
+}));
+a.displayName = "Input";
+var o = t.createContext({ size: "sm" }), s = t.forwardRef(({ className: t, size: n = "sm", disabled: i, invalid: a, ...s }, c) => /* @__PURE__ */ r(o.Provider, {
+	value: { size: n },
+	children: /* @__PURE__ */ r("div", {
+		ref: c,
+		"data-disabled": i || void 0,
+		"data-invalid": a || void 0,
+		className: e("flex w-full items-center bg-gray-00 font-sans text-gray-100", "border border-gray-80", "[transition:border-color_var(--duration-fast)_var(--ease-out)]", "hover:border-gray-60 focus-within:border-gray-80", "data-[disabled]:cursor-not-allowed data-[disabled]:border-gray-20 data-[disabled]:text-gray-40", "data-[invalid]:border-error data-[invalid]:hover:border-error", n === "sm" && "h-12 rounded-x3 text-[18px] leading-[24px] gap-x4 px-[18px]", n === "lg" && "h-[60px] rounded-x4 text-[20px] leading-[24px] gap-x3 px-x6", t),
+		...s
+	})
+}));
+s.displayName = "InputGroup";
+var c = t.forwardRef(({ className: t, type: n = "text", ...i }, a) => /* @__PURE__ */ r("input", {
+	ref: a,
+	type: n,
+	className: e("flex-1 min-w-0 bg-transparent border-0 outline-none", "font-sans text-current", "placeholder:text-gray-40", "disabled:cursor-not-allowed", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", t),
+	...i
+}));
+c.displayName = "InputGroupInput";
+var l = t.forwardRef(({ className: n, side: i, ...a }, s) => {
+	let { size: c } = t.useContext(o);
+	return /* @__PURE__ */ r("span", {
+		ref: s,
+		"data-side": i,
+		className: e("inline-flex items-center justify-center text-gray-60 shrink-0", c === "sm" && "[&_svg]:size-6", c === "lg" && "[&_svg]:size-8", n),
+		...a
+	});
+});
+l.displayName = "InputGroupAddon";
+var u = t.forwardRef((e, t) => /* @__PURE__ */ r(l, {
+	...e,
+	side: "prefix",
+	ref: t
+}));
+u.displayName = "InputGroupPrefix";
+var d = t.forwardRef((e, t) => /* @__PURE__ */ r(l, {
+	...e,
+	side: "suffix",
+	ref: t
+}));
+d.displayName = "InputGroupSuffix";
+var f = t.forwardRef(({ className: n, ...i }, a) => {
+	let { size: s } = t.useContext(o);
+	return /* @__PURE__ */ r("span", {
+		ref: a,
+		className: e("inline-flex items-center justify-center bg-gray-20 text-gray-80 font-sans shrink-0", "-my-px", s === "sm" && [
+			"h-12 px-x4 text-[18px] leading-[24px] rounded-x3",
+			"[&:first-child]:-ml-[19px] [&:first-child]:rounded-r-none",
+			"[&:last-child]:-mr-[19px] [&:last-child]:rounded-l-none"
+		], s === "lg" && [
+			"h-[60px] px-x6 text-[20px] leading-[24px] rounded-x4",
+			"[&:first-child]:-ml-[25px] [&:first-child]:rounded-r-none",
+			"[&:last-child]:-mr-[25px] [&:last-child]:rounded-l-none"
+		], n),
+		...i
+	});
+});
+f.displayName = "InputGroupBadge";
+//#endregion
+export { a as Input, s as InputGroup, f as InputGroupBadge, c as InputGroupInput, u as InputGroupPrefix, d as InputGroupSuffix, i as inputVariants };

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

@@ -0,0 +1 @@
+export { Input, inputVariants, InputGroup, InputGroupInput, InputGroupPrefix, InputGroupSuffix, InputGroupBadge, type InputProps, type InputGroupProps } from './Input';

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+import { Input as e, InputGroup as t, InputGroupBadge as n, InputGroupInput as r, InputGroupPrefix as i, InputGroupSuffix as a, inputVariants as o } from "./Input.js";
+export { e as Input, t as InputGroup, n as InputGroupBadge, r as InputGroupInput, i as InputGroupPrefix, a as InputGroupSuffix, o as inputVariants };

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/Label/Label.js

@@ -0,0 +1,13 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-label";
+//#region src/components/Label/Label.tsx
+var i = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Root, {
+	ref: a,
+	className: e("font-sans text-[14px] leading-none text-gray-80", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", t),
+	...i
+}));
+i.displayName = "Label";
+//#endregion
+export { i as Label };

package/dist/components/Label/index.js

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