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

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,23 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    /** Max chips rendered in the trigger before collapsing to "+N more". */
+    maxTags?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    className?: string;
+}
+export declare const MultiSelect: {
+    ({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxTags, disabled, size, className }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,98 @@
+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 { Badge as a } from "../Badge/Badge.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { CaretDown as l, Check as u, MagnifyingGlass as d, X as f } from "@phosphor-icons/react";
+import { Command as p } from "cmdk";
+//#region src/components/MultiSelect/MultiSelect.tsx
+var m = ({ options: m, value: h, defaultValue: g = [], onValueChange: _, placeholder: v = "Seleccionar opciones", searchPlaceholder: y = "Buscar...", emptyText: b = "Sin resultados", maxTags: x = 3, disabled: S, size: C = "sm", className: w }) => {
+	let [T, E] = o.useState(!1), [D, O] = o.useState(g), k = h !== void 0, A = k ? h : D, j = (e) => {
+		k || O(e), _?.(e);
+	}, M = (e) => {
+		j(A.includes(e) ? A.filter((t) => t !== e) : [...A, e]);
+	}, N = (e, t) => {
+		t.stopPropagation(), j(A.filter((t) => t !== e));
+	}, P = A.map((e) => m.find((t) => t.value === e)).filter(Boolean), F = P.slice(0, x), I = P.length - F.length;
+	return /* @__PURE__ */ c(n, {
+		open: T,
+		onOpenChange: E,
+		children: [/* @__PURE__ */ s(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "combobox",
+				"aria-expanded": T,
+				disabled: S,
+				className: e(t({ size: C }), "inline-flex items-center justify-between text-left h-auto min-h-10 py-x2 flex-wrap gap-x1", A.length === 0 && "text-gray-40", w),
+				children: [A.length === 0 ? /* @__PURE__ */ s("span", { children: v }) : /* @__PURE__ */ c("span", {
+					className: "flex flex-wrap items-center gap-x1",
+					children: [F.map((e) => /* @__PURE__ */ c(a, {
+						variant: "neutral",
+						className: "gap-x1 [animation:ctc-scale-in_var(--duration-fast)_var(--ease-out)]",
+						children: [e.label, /* @__PURE__ */ s("span", {
+							role: "button",
+							"aria-label": `Quitar ${e.label}`,
+							onClick: (t) => N(e.value, t),
+							className: "hover:text-error cursor-pointer",
+							children: /* @__PURE__ */ s(f, {
+								weight: "bold",
+								className: "size-3"
+							})
+						})]
+					}, e.value)), I > 0 && /* @__PURE__ */ c(a, {
+						variant: "outline",
+						children: ["+", I]
+					})]
+				}), /* @__PURE__ */ s(l, {
+					weight: "bold",
+					className: e("size-4 text-gray-60 shrink-0 ml-x2", "[transition:transform_var(--duration-fast)_var(--ease-out)]", "[[data-state=open]_&]:rotate-180")
+				})]
+			})
+		}), /* @__PURE__ */ s(r, {
+			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			align: "start",
+			children: /* @__PURE__ */ c(p, {
+				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(p.Input, {
+						placeholder: y,
+						className: e("flex h-10 w-full bg-transparent py-x2 font-sans text-[14px] text-gray-80 outline-none", "placeholder:text-gray-40")
+					})]
+				}), /* @__PURE__ */ c(p.List, {
+					className: "max-h-64 overflow-y-auto p-x1",
+					children: [/* @__PURE__ */ s(p.Empty, {
+						className: "py-x6 text-center text-[14px] text-gray-60",
+						children: b
+					}), m.map((t) => {
+						let n = A.includes(t.value);
+						return /* @__PURE__ */ c(p.Item, {
+							value: t.value,
+							disabled: t.disabled,
+							onSelect: M,
+							className: e("relative flex cursor-default select-none items-center rounded-x1 py-x2 pl-x8 pr-x3", "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: e("absolute left-x3 size-4 rounded-x1 border-2 inline-flex items-center justify-center", n ? "bg-primary border-primary text-gray-00" : "border-gray-40"),
+								children: n && /* @__PURE__ */ s(u, {
+									weight: "bold",
+									className: "size-3"
+								})
+							}), /* @__PURE__ */ s("span", {
+								className: "truncate",
+								children: t.label
+							})]
+						}, t.value);
+					})]
+				})]
+			})
+		})]
+	});
+};
+m.displayName = "MultiSelect";
+//#endregion
+export { m as MultiSelect };

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

@@ -0,0 +1 @@
+export { MultiSelect, type MultiSelectProps, type MultiSelectOption } from './MultiSelect';

package/dist/components/MultiSelect/index.js

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

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../Input/Input';
+import * as React from 'react';
+export interface NumberInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onValueChange?: (value: number | undefined) => void;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/cn.js";
+import { Input as t, inputVariants as n } from "../Input/Input.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Minus as o, Plus as s } from "@phosphor-icons/react";
+//#region src/components/NumberInput/NumberInput.tsx
+var c = r.forwardRef(({ className: c, value: l, defaultValue: u, min: d, max: f, step: p = 1, disabled: m, onValueChange: h, size: g, ..._ }, v) => {
+	let [y, b] = r.useState(u), x = l !== void 0, S = x ? l : y, C = (e) => {
+		e !== void 0 && (d !== void 0 && e < d && (e = d), f !== void 0 && e > f && (e = f)), x || b(e), h?.(e);
+	}, w = (e) => {
+		C((S ?? 0) + e);
+	};
+	return /* @__PURE__ */ a("div", {
+		className: "relative inline-flex w-full",
+		children: [
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: () => w(-p),
+				disabled: m || d !== void 0 && (S ?? 0) <= d,
+				"aria-label": "Decrement",
+				"data-pressable": "",
+				className: e("absolute left-0 top-0 h-full px-x3 inline-flex items-center justify-center", "text-gray-80 hover:text-primary disabled:text-gray-40 disabled:cursor-not-allowed", "[transition:color_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "active:scale-[var(--press-scale)] disabled:active:transform-none"),
+				children: /* @__PURE__ */ i(o, {
+					weight: "bold",
+					className: "size-4"
+				})
+			}),
+			/* @__PURE__ */ i(t, {
+				ref: v,
+				type: "number",
+				value: S ?? "",
+				onChange: (e) => C(e.target.value === "" ? void 0 : Number(e.target.value)),
+				min: d,
+				max: f,
+				step: p,
+				disabled: m,
+				size: g,
+				className: e(n({ size: g }), "text-center tabular-nums", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "[appearance:textfield]", c),
+				..._
+			}),
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: () => w(p),
+				disabled: m || f !== void 0 && (S ?? 0) >= f,
+				"aria-label": "Increment",
+				"data-pressable": "",
+				className: e("absolute right-0 top-0 h-full px-x3 inline-flex items-center justify-center", "text-gray-80 hover:text-primary disabled:text-gray-40 disabled:cursor-not-allowed", "[transition:color_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "active:scale-[var(--press-scale)] disabled:active:transform-none"),
+				children: /* @__PURE__ */ i(s, {
+					weight: "bold",
+					className: "size-4"
+				})
+			})
+		]
+	});
+});
+c.displayName = "NumberInput";
+//#endregion
+export { c as NumberInput };

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

@@ -0,0 +1 @@
+export { NumberInput, type NumberInputProps } from './NumberInput';

package/dist/components/NumberInput/index.js

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

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverPortal: React.FC<PopoverPrimitive.PopoverPortalProps>;
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    /** Render an arrow pointing to the anchor. */
+    arrow?: boolean;
+}
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,20 @@
+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 * as i from "@radix-ui/react-popover";
+//#region src/components/Popover/Popover.tsx
+var a = i.Root, o = i.Trigger, s = i.Anchor, c = i.Close, l = i.Portal, u = t.forwardRef(({ className: t, align: a = "center", sideOffset: o = 8, arrow: s = !1, children: c, ...l }, u) => /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ r(i.Content, {
+	ref: u,
+	align: a,
+	sideOffset: o,
+	className: e("z-50 rounded-x4 border border-gray-20 bg-gray-00 p-x4 shadow-md outline-none", "[transform-origin:var(--radix-popover-content-transform-origin)]", "data-[state=open]:[animation:ctc-dropdown-in_var(--dropdown-open-dur)_var(--dropdown-ease)_both]", "data-[state=closed]:[animation:ctc-dropdown-out_var(--dropdown-close-dur)_var(--dropdown-ease)_both]", t),
+	...l,
+	children: [c, s && /* @__PURE__ */ n(i.Arrow, {
+		className: "fill-gray-00 stroke-gray-20",
+		width: 12,
+		height: 6
+	})]
+}) }));
+u.displayName = "PopoverContent";
+//#endregion
+export { a as Popover, s as PopoverAnchor, c as PopoverClose, u as PopoverContent, l as PopoverPortal, o as PopoverTrigger };

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

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverPortal, PopoverContent, type PopoverContentProps } from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import { Popover as e, PopoverAnchor as t, PopoverClose as n, PopoverContent as r, PopoverPortal as i, PopoverTrigger as a } from "./Popover.js";
+export { e as Popover, t as PopoverAnchor, n as PopoverClose, r as PopoverContent, i as PopoverPortal, a as PopoverTrigger };

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+type RadioVariant = 'default' | 'skyblue';
+export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    /** lg=22px (default), sm=16px */
+    size?: 'sm' | 'lg';
+    /** Selected color. default=gray-80, skyblue=B2C brand. */
+    variant?: RadioVariant;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,42 @@
+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-radio-group";
+//#region src/components/RadioGroup/RadioGroup.tsx
+var i = t.createContext({
+	size: "lg",
+	variant: "default"
+}), a = {
+	default: "data-[state=checked]:border-gray-80 hover:data-[state=checked]:border-gray-100",
+	skyblue: "data-[state=checked]:border-skyblue hover:data-[state=checked]:border-skyblue-hover"
+}, o = {
+	default: "bg-gray-80 group-hover:bg-gray-100",
+	skyblue: "bg-skyblue group-hover:bg-skyblue-hover"
+}, s = t.forwardRef(({ className: t, size: a = "lg", variant: o = "default", ...s }, c) => /* @__PURE__ */ n(i.Provider, {
+	value: {
+		size: a,
+		variant: o
+	},
+	children: /* @__PURE__ */ n(r.Root, {
+		ref: c,
+		className: e("grid gap-x2", t),
+		...s
+	})
+}));
+s.displayName = "RadioGroup";
+var c = t.forwardRef(({ className: s, ...c }, l) => {
+	let { size: u, variant: d } = t.useContext(i);
+	return /* @__PURE__ */ n(r.Item, {
+		ref: l,
+		"data-pressable": "",
+		className: e("group peer aspect-square shrink-0 rounded-full border bg-gray-00", "inline-flex items-center justify-center", "[transition:border-color_var(--duration-fast)_var(--ease-out),background-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", a[d], "disabled:cursor-not-allowed disabled:border-gray-40 disabled:bg-gray-20 disabled:active:transform-none", "disabled:data-[state=checked]:border-gray-40", "aria-invalid:border-error", u === "lg" && "size-[22px]", u === "sm" && "size-[16px]", s),
+		...c,
+		children: /* @__PURE__ */ n(r.Indicator, {
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ n("span", { className: e("block rounded-full", o[d], "[transition:background-color_var(--duration-fast)_var(--ease-out)]", "group-disabled:bg-gray-40", "[animation:ctc-scale-in_var(--duration-fast)_var(--ease-out)]", u === "lg" && "size-[10px]", u === "sm" && "size-[8px]") })
+		})
+	});
+});
+c.displayName = "RadioGroupItem";
+//#endregion
+export { s as RadioGroup, c as RadioGroupItem };

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

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from './RadioGroup';

package/dist/components/RadioGroup/index.js

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const Select: React.FC<SelectPrimitive.SelectProps>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    size?: 'sm' | 'lg';
+}
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Select/Select.js

@@ -0,0 +1,82 @@
+import { cn as e } from "../../lib/cn.js";
+import { inputVariants as t } from "../Input/Input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { CaretDown as a, CaretUp as o, Check as s } from "@phosphor-icons/react";
+import * as c from "@radix-ui/react-select";
+//#region src/components/Select/Select.tsx
+var l = c.Root, u = c.Group, d = c.Value, f = n.forwardRef(({ className: n, size: o = "sm", children: s, ...l }, u) => /* @__PURE__ */ i(c.Trigger, {
+	ref: u,
+	className: e(t({ size: o }), "inline-flex items-center justify-between", "data-[placeholder]:text-gray-40", n),
+	...l,
+	children: [s, /* @__PURE__ */ r(c.Icon, {
+		asChild: !0,
+		children: /* @__PURE__ */ r(a, {
+			weight: "bold",
+			className: e("size-4 text-gray-60 shrink-0 ml-x2", "[transition:transform_var(--duration-base)_var(--ease-out)]", "group-data-[state=open]/select:rotate-180", "[[data-state=open]_&]:rotate-180")
+		})
+	})]
+}));
+f.displayName = "SelectTrigger";
+var p = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.ScrollUpButton, {
+	ref: i,
+	className: e("flex cursor-default items-center justify-center py-x1", t),
+	...n,
+	children: /* @__PURE__ */ r(o, {
+		weight: "bold",
+		className: "size-4"
+	})
+}));
+p.displayName = "SelectScrollUpButton";
+var m = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.ScrollDownButton, {
+	ref: i,
+	className: e("flex cursor-default items-center justify-center py-x1", t),
+	...n,
+	children: /* @__PURE__ */ r(a, {
+		weight: "bold",
+		className: "size-4"
+	})
+}));
+m.displayName = "SelectScrollDownButton";
+var h = n.forwardRef(({ className: t, children: n, position: a = "popper", ...o }, s) => /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ i(c.Content, {
+	ref: s,
+	position: a,
+	className: e("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-x2 border border-gray-20 bg-gray-00", "shadow-md text-gray-80", "[transform-origin:var(--radix-select-content-transform-origin)]", "data-[state=open]:[animation:ctc-dropdown-in_var(--dropdown-open-dur)_var(--dropdown-ease)_both]", "data-[state=closed]:[animation:ctc-dropdown-out_var(--dropdown-close-dur)_var(--dropdown-ease)_both]", t),
+	...o,
+	children: [
+		/* @__PURE__ */ r(p, {}),
+		/* @__PURE__ */ r(c.Viewport, {
+			className: e("p-x1 ctc-stagger", a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+			children: n
+		}),
+		/* @__PURE__ */ r(m, {})
+	]
+}) }));
+h.displayName = "SelectContent";
+var g = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.Label, {
+	ref: i,
+	className: e("px-x3 py-x2 text-[12px] text-gray-60", t),
+	...n
+}));
+g.displayName = "SelectLabel";
+var _ = n.forwardRef(({ className: t, children: n, ...a }, o) => /* @__PURE__ */ i(c.Item, {
+	ref: o,
+	className: e("relative flex w-full cursor-default select-none items-center rounded-x1 py-x2 pl-x3 pr-x8 text-[14px]", "outline-none hover:bg-gray-20 focus:bg-gray-20", "[transition:background-color_var(--duration-fast)_var(--ease-out),color_var(--duration-fast)_var(--ease-out)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
+	...a,
+	children: [/* @__PURE__ */ r("span", {
+		className: "absolute right-x2 flex size-4 items-center justify-center",
+		children: /* @__PURE__ */ r(c.ItemIndicator, { children: /* @__PURE__ */ r(s, {
+			weight: "bold",
+			className: "size-4 text-primary"
+		}) })
+	}), /* @__PURE__ */ r(c.ItemText, { children: n })]
+}));
+_.displayName = "SelectItem";
+var v = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.Separator, {
+	ref: i,
+	className: e("-mx-1 my-x1 h-px bg-gray-20", t),
+	...n
+}));
+v.displayName = "SelectSeparator";
+//#endregion
+export { l as Select, h as SelectContent, u as SelectGroup, _ as SelectItem, g as SelectLabel, m as SelectScrollDownButton, p as SelectScrollUpButton, v as SelectSeparator, f as SelectTrigger, d as SelectValue };

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

@@ -0,0 +1 @@
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, type SelectTriggerProps } from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+import { Select as e, SelectContent as t, SelectGroup as n, SelectItem as r, SelectLabel as i, SelectScrollDownButton as a, SelectScrollUpButton as o, SelectSeparator as s, SelectTrigger as c, SelectValue as l } from "./Select.js";
+export { e as Select, t as SelectContent, n as SelectGroup, r as SelectItem, i as SelectLabel, a as SelectScrollDownButton, o as SelectScrollUpButton, s as SelectSeparator, c as SelectTrigger, l as SelectValue };

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,24 @@
+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";
+import { CircleNotch as i } from "@phosphor-icons/react";
+//#region src/components/Spinner/Spinner.tsx
+var a = n("shrink-0 [animation:ctc-spin_700ms_linear_infinite]", {
+	variants: { size: {
+		sm: "size-4",
+		md: "size-5",
+		lg: "size-6"
+	} },
+	defaultVariants: { size: "md" }
+}), o = t.forwardRef(({ className: t, size: n, ...o }, s) => /* @__PURE__ */ r(i, {
+	ref: s,
+	weight: "bold",
+	role: "status",
+	"aria-label": "Cargando",
+	className: e(a({ size: n }), t),
+	...o
+}));
+o.displayName = "Spinner";
+//#endregion
+export { o as Spinner };

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

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './Spinner';

package/dist/components/Spinner/index.js

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+    /** lg=40×22 (default), sm=30×16 */
+    size?: 'sm' | 'lg';
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.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 * as r from "@radix-ui/react-switch";
+//#region src/components/Switch/Switch.tsx
+var i = t.forwardRef(({ className: t, size: i = "lg", ...a }, o) => /* @__PURE__ */ n(r.Root, {
+	ref: o,
+	"data-pressable": "",
+	className: e("peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full", "[transition:background-color_var(--duration-base)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "active:scale-[0.95]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "data-[state=unchecked]:bg-gray-40", "data-[state=checked]:bg-gray-80", "hover:data-[state=checked]:bg-gray-100", "disabled:cursor-not-allowed disabled:active:transform-none", "disabled:data-[state=unchecked]:bg-gray-20", "disabled:data-[state=checked]:bg-gray-40", i === "lg" && "h-[22px] w-[40px]", i === "sm" && "h-[16px] w-[30px]", t),
+	...a,
+	children: /* @__PURE__ */ n(r.Thumb, { className: e("pointer-events-none block rounded-full bg-gray-00", "[transition:transform_var(--duration-switch)_var(--ease-back),background-color_var(--duration-fast)_var(--ease-out)]", "group-disabled:bg-gray-40 peer-disabled:bg-gray-40", i === "lg" && [
+		"size-[18px]",
+		"translate-x-[2px]",
+		"data-[state=checked]:translate-x-[20px]"
+	], i === "sm" && [
+		"size-[12px]",
+		"translate-x-[2px]",
+		"data-[state=checked]:translate-x-[16px]"
+	]) })
+}));
+i.displayName = "Switch";
+//#endregion
+export { i as Switch };

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

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';

package/dist/components/Switch/index.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+type TabsVariant = 'segmented' | 'underline';
+type TabsSize = 'sm' | 'lg';
+type TabsSpacing = 'condensed' | 'expanded';
+export interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+    variant?: TabsVariant;
+    /** Underline only. lg=Big (16px), sm=Small (12px). */
+    size?: TabsSize;
+    /** Underline only. condensed=tighter gaps, expanded=wider gaps. */
+    spacing?: TabsSpacing;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,78 @@
+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 * as i from "@radix-ui/react-tabs";
+//#region src/components/Tabs/Tabs.tsx
+var a = t.createContext({
+	variant: "underline",
+	size: "lg",
+	spacing: "condensed"
+}), o = t.forwardRef(({ className: t, variant: r = "underline", size: o = "lg", spacing: s = "condensed", ...c }, l) => /* @__PURE__ */ n(a.Provider, {
+	value: {
+		variant: r,
+		size: o,
+		spacing: s
+	},
+	children: /* @__PURE__ */ n(i.Root, {
+		ref: l,
+		className: e("flex flex-col gap-x4", t),
+		...c
+	})
+}));
+o.displayName = "Tabs";
+var s = {
+	lg: {
+		condensed: "gap-x8",
+		expanded: "gap-x12"
+	},
+	sm: {
+		condensed: "gap-x4",
+		expanded: "gap-x8"
+	}
+}, c = t.forwardRef(({ className: r, ...o }, c) => {
+	let { variant: l, size: u, spacing: d } = t.useContext(a);
+	return /* @__PURE__ */ n(i.List, {
+		ref: c,
+		className: e("inline-flex", l === "segmented" && "rounded-x2 bg-gray-20 p-x1 gap-x1", l === "underline" && [
+			"relative items-end",
+			s[u][d],
+			"after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-gray-80",
+			"after:[transition:background-color_var(--duration-fast)_var(--ease-out)]",
+			"has-[[data-state=active]:hover]:after:bg-gray-100",
+			"has-[:disabled]:after:bg-gray-40"
+		], r),
+		...o
+	});
+});
+c.displayName = "TabsList";
+var l = t.forwardRef(({ className: o, children: s, ...c }, l) => {
+	let { variant: u, size: d } = t.useContext(a);
+	return u === "segmented" ? /* @__PURE__ */ n(i.Trigger, {
+		ref: l,
+		"data-pressable": "",
+		className: e("inline-flex items-center justify-center font-sans text-[14px] leading-[20px]", "rounded-x2 px-x4 py-x2 text-gray-60", "[transition:color_var(--duration-fast)_var(--ease-out),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-gray-00 data-[state=active]:text-gray-80 data-[state=active]:shadow-sm", o),
+		...c,
+		children: s
+	}) : /* @__PURE__ */ r(i.Trigger, {
+		ref: l,
+		"data-pressable": "",
+		className: e("group relative inline-flex flex-col items-stretch gap-x1 min-w-[100px] font-sans tracking-[-0.5px]", "text-center text-gray-80", "focus-visible:outline-none focus-visible:[&_span]:underline focus-visible:[&_span]:underline-offset-2", "[transition:color_var(--duration-fast)_var(--ease-out)]", "hover:text-gray-100", "disabled:text-gray-40 disabled:cursor-not-allowed", "data-[state=active]:font-bold", "data-[state=inactive]:font-normal", d === "lg" && "text-[16px] leading-[22px]", d === "sm" && "text-[12px] leading-[16px]", o),
+		...c,
+		children: [/* @__PURE__ */ n("span", {
+			className: "px-x1",
+			children: s
+		}), /* @__PURE__ */ n("span", {
+			"aria-hidden": !0,
+			className: e("self-stretch h-[4px] rounded-tl-x1 rounded-tr-x1", "[transition:background-color_var(--duration-fast)_var(--ease-out)]", "bg-transparent", "group-hover:group-data-[state=inactive]:bg-gray-20", "group-data-[state=active]:bg-gray-80", "group-hover:group-data-[state=active]:bg-gray-100", "group-disabled:group-data-[state=active]:bg-gray-40")
+		})]
+	});
+});
+l.displayName = "TabsTrigger";
+var u = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.Content, {
+	ref: a,
+	className: e("focus-visible:outline-none", "data-[state=active]:[animation:ctc-fade-rise_var(--duration-base)_var(--ease-out)]", t),
+	...r
+}));
+u.displayName = "TabsContent";
+//#endregion
+export { o as Tabs, u as TabsContent, c as TabsList, l as TabsTrigger };

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

@@ -0,0 +1 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps } from './Tabs';

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs as e, TabsContent as t, TabsList as n, TabsTrigger as r } from "./Tabs.js";
+export { e as Tabs, t as TabsContent, n as TabsList, r as TabsTrigger };

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,20 @@
+export interface TimeValue {
+    hours: number;
+    minutes: number;
+}
+export interface TimePickerProps {
+    value?: TimeValue;
+    defaultValue?: TimeValue;
+    onValueChange?: (value: TimeValue) => void;
+    /** Step in minutes for the minutes select. Default: 5. */
+    minuteStep?: number;
+    hour12?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const TimePicker: {
+    ({ value, defaultValue, onValueChange, minuteStep, hour12, disabled, size, className, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};