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

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,62 @@
+import { cn as e } from "../../lib/cn.js";
+import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../Select/Select.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/TimePicker/TimePicker.tsx
+var l = (e) => String(e).padStart(2, "0"), u = ({ value: u, defaultValue: d, onValueChange: f, minuteStep: p = 5, hour12: m = !1, disabled: h, size: g = "sm", className: _, ...v }) => {
+	let [y, b] = o.useState(d ?? {
+		hours: 0,
+		minutes: 0
+	}), x = u !== void 0, S = x ? u : y, C = (e) => {
+		x || b(e), f?.(e);
+	}, w = m ? 12 : 24, T = Array.from({ length: w }, (e, t) => m ? t + 1 : t), E = Array.from({ length: Math.floor(60 / p) }, (e, t) => t * p);
+	return /* @__PURE__ */ c("div", {
+		className: e("inline-flex items-center gap-x1", _),
+		role: "group",
+		"aria-label": "Hora",
+		...v,
+		children: [
+			/* @__PURE__ */ c(t, {
+				value: String(S.hours),
+				onValueChange: (e) => C({
+					...S,
+					hours: Number(e)
+				}),
+				disabled: h,
+				children: [/* @__PURE__ */ s(i, {
+					size: g,
+					className: "w-20",
+					"aria-label": "Horas",
+					children: /* @__PURE__ */ s(a, { placeholder: "HH" })
+				}), /* @__PURE__ */ s(n, { children: T.map((e) => /* @__PURE__ */ s(r, {
+					value: String(e),
+					children: l(e)
+				}, e)) })]
+			}),
+			/* @__PURE__ */ s("span", {
+				className: "text-gray-60 font-bold",
+				children: ":"
+			}),
+			/* @__PURE__ */ c(t, {
+				value: String(S.minutes),
+				onValueChange: (e) => C({
+					...S,
+					minutes: Number(e)
+				}),
+				disabled: h,
+				children: [/* @__PURE__ */ s(i, {
+					size: g,
+					className: "w-20",
+					"aria-label": "Minutos",
+					children: /* @__PURE__ */ s(a, { placeholder: "MM" })
+				}), /* @__PURE__ */ s(n, { children: E.map((e) => /* @__PURE__ */ s(r, {
+					value: String(e),
+					children: l(e)
+				}, e)) })]
+			})
+		]
+	});
+};
+u.displayName = "TimePicker";
+//#endregion
+export { u as TimePicker };

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

@@ -0,0 +1 @@
+export { TimePicker, type TimePickerProps, type TimeValue } from './TimePicker';

package/dist/components/TimePicker/index.js

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,57 @@
+import { ToasterProps } from 'sonner';
+/**
+ * CTC-themed Toaster. Mount once at the root of the app.
+ *
+ * @example
+ *   <Toaster />
+ *   import { toast } from 'ctc-component-library/toast';
+ *   toast.success('Guardado');
+ */
+export declare const Toaster: (props: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const toast: ((message: import('react').ReactNode | (() => React.ReactNode), data?: import('sonner').ExternalToast) => string | number) & {
+    success: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+    info: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+    warning: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+    error: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+    custom: (jsx: (id: number | string) => React.ReactElement, data?: import('sonner').ExternalToast) => string | number;
+    message: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+    promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: {
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        id?: number | string | undefined;
+        action?: import('react').ReactNode | import('sonner').Action;
+        cancel?: import('react').ReactNode | import('sonner').Action;
+        onDismiss?: ((toast: import('sonner').ToastT) => void) | undefined;
+        invert?: boolean | undefined;
+        icon?: import('react').ReactNode;
+        richColors?: boolean | undefined;
+        closeButton?: boolean | undefined;
+        dismissible?: boolean | undefined;
+        duration?: number | undefined;
+        onAutoClose?: ((toast: import('sonner').ToastT) => void) | undefined;
+        cancelButtonStyle?: React.CSSProperties | undefined;
+        actionButtonStyle?: React.CSSProperties | undefined;
+        unstyled?: boolean | undefined;
+        classNames?: import('sonner').ToastClassnames | undefined;
+        descriptionClassName?: string | undefined;
+        position?: ("top-right" | "top-left" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center") | undefined;
+    } & {
+        loading?: string | React.ReactNode;
+        success?: import('react').ReactNode | ((data: ToastData) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        error?: import('react').ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        description?: import('react').ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        finally?: () => void | Promise<void>;
+    }) => (string & {
+        unwrap: () => Promise<ToastData>;
+    }) | (number & {
+        unwrap: () => Promise<ToastData>;
+    }) | {
+        unwrap: () => Promise<ToastData>;
+    };
+    dismiss: (id?: number | string) => string | number;
+    loading: (message: (import('react').ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import('sonner').ExternalToast) => string | number;
+} & {
+    getHistory: () => (import('sonner').ToastT | import('sonner').ToastToDismiss)[];
+    getToasts: () => (import('sonner').ToastT | import('sonner').ToastToDismiss)[];
+};
+export type { ToasterProps };

package/dist/components/Toast/Toast.js

@@ -0,0 +1,40 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Toaster as t, toast as n } from "sonner";
+import { CheckCircle as r, Info as i, Warning as a, WarningCircle as o } from "@phosphor-icons/react";
+//#region src/components/Toast/Toast.tsx
+var s = (n) => /* @__PURE__ */ e(t, {
+	position: "top-right",
+	closeButton: !0,
+	icons: {
+		success: /* @__PURE__ */ e(r, {
+			weight: "fill",
+			className: "size-5 text-success"
+		}),
+		error: /* @__PURE__ */ e(o, {
+			weight: "fill",
+			className: "size-5 text-error"
+		}),
+		warning: /* @__PURE__ */ e(a, {
+			weight: "fill",
+			className: "size-5 text-alert"
+		}),
+		info: /* @__PURE__ */ e(i, {
+			weight: "fill",
+			className: "size-5 text-skyblue"
+		})
+	},
+	toastOptions: { classNames: {
+		toast: [
+			"rounded-x4 border-2 border-gray-20 bg-gray-00 p-x4",
+			"font-sans text-[14px] leading-[20px] text-gray-80",
+			"shadow-md flex items-start gap-x3"
+		].join(" "),
+		title: "font-bold",
+		description: "text-gray-60",
+		actionButton: "bg-primary text-gray-80 px-x3 py-x1 rounded-x2",
+		cancelButton: "bg-gray-20 text-gray-80 px-x3 py-x1 rounded-x2"
+	} },
+	...n
+}), c = n;
+//#endregion
+export { s as Toaster, c as toast };

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

@@ -0,0 +1 @@
+export { Toaster, toast, type ToasterProps } from './Toast';

package/dist/components/Toast/index.js

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+/**
+ * TooltipProvider with CTC defaults: 400ms delay before showing,
+ * 200ms grace window where adjacent tooltips open instantly.
+ * Override either by passing props.
+ */
+export declare const TooltipProvider: ({ delayDuration, skipDelayDuration, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,23 @@
+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-tooltip";
+//#region src/components/Tooltip/Tooltip.tsx
+var a = ({ delayDuration: e = 400, skipDelayDuration: t = 200, ...r }) => /* @__PURE__ */ n(i.Provider, {
+	delayDuration: e,
+	skipDelayDuration: t,
+	...r
+}), o = i.Root, s = i.Trigger, c = i.Portal, l = t.forwardRef(({ className: t, sideOffset: a = 6, children: o, ...s }, c) => /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ r(i.Content, {
+	ref: c,
+	sideOffset: a,
+	className: e("z-50 max-w-xs rounded-x2 bg-gray-100 px-x3 py-x2", "font-sans text-[12px] leading-[16px] text-gray-00", "[transform-origin:var(--radix-tooltip-content-transform-origin)]", "opacity-0 scale-[0.97]", "data-[state=delayed-open]:opacity-100 data-[state=delayed-open]:scale-100", "data-[state=instant-open]:opacity-100 data-[state=instant-open]:scale-100", "[transition:opacity_125ms_var(--ease-out),transform_125ms_var(--ease-out)]", "data-[state=instant-open]:[transition-duration:0ms]", "data-[state=closed]:opacity-0 data-[state=closed]:scale-[0.97]", t),
+	...s,
+	children: [o, /* @__PURE__ */ n(i.Arrow, {
+		className: "fill-gray-100",
+		width: 10,
+		height: 5
+	})]
+}) }));
+l.displayName = "TooltipContent";
+//#endregion
+export { o as Tooltip, l as TooltipContent, c as TooltipPortal, a as TooltipProvider, s as TooltipTrigger };

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

@@ -0,0 +1 @@
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from './Tooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import { Tooltip as e, TooltipContent as t, TooltipPortal as n, TooltipProvider as r, TooltipTrigger as i } from "./Tooltip.js";
+export { e as Tooltip, t as TooltipContent, n as TooltipPortal, r as TooltipProvider, i as TooltipTrigger };

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const typographyVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "body-1" | "body-2" | "body-3" | "body-4" | "body-5" | "body-6" | "button-1" | "button-2" | null | undefined;
+    underline?: boolean | null | undefined;
+    bolder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    asChild?: boolean;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Typography/Typography.js

@@ -0,0 +1,63 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { Slot as n } from "@radix-ui/react-slot";
+import { cva as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Typography/Typography.tsx
+var a = r("m-0 p-0", {
+	variants: {
+		variant: {
+			h1: "font-display font-light text-[56px] leading-[60px] tracking-[1.5px]",
+			h2: "font-display font-light text-[48px] leading-[55px] tracking-[1.2px]",
+			h3: "font-display font-light text-[34px] leading-[40px] tracking-[1px]",
+			h4: "font-display font-light text-[24px] leading-[30px] tracking-[0.8px]",
+			h5: "font-display font-light text-[20px] leading-[25px] tracking-[0.6px]",
+			"body-1": "font-sans text-[24px] leading-[30px] tracking-[-0.5px]",
+			"body-2": "font-sans text-[20px] leading-[24px] tracking-[-0.5px]",
+			"body-3": "font-sans text-[18px] leading-[24px] tracking-[-0.5px]",
+			"body-4": "font-sans text-[16px] leading-[22px] tracking-[-0.5px]",
+			"body-5": "font-sans text-[14px] leading-[20px] tracking-[-0.5px]",
+			"body-6": "font-sans text-[12px] leading-[16px] tracking-[-0.5px]",
+			"button-1": "font-sans text-[18px] leading-none tracking-[-0.5px]",
+			"button-2": "font-sans text-[16px] leading-none tracking-[-0.5px]"
+		},
+		underline: {
+			true: "underline",
+			false: ""
+		},
+		bolder: {
+			true: "font-bold",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "body-4",
+		underline: !1,
+		bolder: !1
+	}
+}), o = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	"body-1": "p",
+	"body-2": "p",
+	"body-3": "p",
+	"body-4": "p",
+	"body-5": "p",
+	"body-6": "p",
+	"button-1": "span",
+	"button-2": "span"
+}, s = t.forwardRef(({ className: t, variant: r = "body-4", underline: s, bolder: c, asChild: l, as: u, ...d }, f) => /* @__PURE__ */ i(l ? n : u ?? o[r], {
+	ref: f,
+	className: e(a({
+		variant: r,
+		underline: s,
+		bolder: c
+	}), t),
+	...d
+}));
+s.displayName = "Typography";
+//#endregion
+export { s as Typography };

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

@@ -0,0 +1 @@
+export { Typography, type TypographyProps } from './Typography';

package/dist/components/Typography/index.js

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

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/lib/cn.js

@@ -0,0 +1,6 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/lib/cn.ts
+var n = (...n) => t(e(n));
+//#endregion
+export { n as cn };

package/dist/presets/SelectCountry/SelectCountry.d.ts

@@ -0,0 +1,16 @@
+import { Country } from './countries';
+export interface SelectCountryProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (code: string) => void;
+    /** Override the bundled country list. */
+    countries?: Country[];
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    className?: string;
+}
+export declare const SelectCountry: {
+    ({ value, defaultValue, onValueChange, countries, placeholder, disabled, size, className }: SelectCountryProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/presets/SelectCountry/SelectCountry.js

@@ -0,0 +1,21 @@
+import { Combobox as e } from "../../components/Combobox/Combobox.js";
+import { countries as t } from "./countries.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/presets/SelectCountry/SelectCountry.tsx
+var i = ({ value: i, defaultValue: a, onValueChange: o, countries: s = t, placeholder: c = "Seleccionar país", disabled: l, size: u = "sm", className: d }) => /* @__PURE__ */ r(e, {
+	options: n.useMemo(() => s.map((e) => ({
+		value: e.code,
+		label: `${e.flag}  ${e.name}`
+	})), [s]),
+	value: i,
+	defaultValue: a,
+	onValueChange: o,
+	placeholder: c,
+	disabled: l,
+	size: u,
+	className: d
+});
+i.displayName = "SelectCountry";
+//#endregion
+export { i as SelectCountry };

package/dist/presets/SelectCountry/countries.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Minimal ISO 3166-1 alpha-2 dataset shipped inline.
+ * Consumers needing a richer list (regions, currencies) should pass a custom
+ * `countries` prop to <SelectCountry />.
+ */
+export interface Country {
+    code: string;
+    name: string;
+    flag: string;
+}
+export declare const countries: Country[];

package/dist/presets/SelectCountry/countries.js

@@ -0,0 +1,120 @@
+//#region src/presets/SelectCountry/countries.ts
+var e = [
+	{
+		code: "AR",
+		name: "Argentina",
+		flag: "🇦🇷"
+	},
+	{
+		code: "BO",
+		name: "Bolivia",
+		flag: "🇧🇴"
+	},
+	{
+		code: "BR",
+		name: "Brasil",
+		flag: "🇧🇷"
+	},
+	{
+		code: "CA",
+		name: "Canadá",
+		flag: "🇨🇦"
+	},
+	{
+		code: "CL",
+		name: "Chile",
+		flag: "🇨🇱"
+	},
+	{
+		code: "CO",
+		name: "Colombia",
+		flag: "🇨🇴"
+	},
+	{
+		code: "CR",
+		name: "Costa Rica",
+		flag: "🇨🇷"
+	},
+	{
+		code: "CU",
+		name: "Cuba",
+		flag: "🇨🇺"
+	},
+	{
+		code: "EC",
+		name: "Ecuador",
+		flag: "🇪🇨"
+	},
+	{
+		code: "SV",
+		name: "El Salvador",
+		flag: "🇸🇻"
+	},
+	{
+		code: "ES",
+		name: "España",
+		flag: "🇪🇸"
+	},
+	{
+		code: "US",
+		name: "Estados Unidos",
+		flag: "🇺🇸"
+	},
+	{
+		code: "GT",
+		name: "Guatemala",
+		flag: "🇬🇹"
+	},
+	{
+		code: "HN",
+		name: "Honduras",
+		flag: "🇭🇳"
+	},
+	{
+		code: "MX",
+		name: "México",
+		flag: "🇲🇽"
+	},
+	{
+		code: "NI",
+		name: "Nicaragua",
+		flag: "🇳🇮"
+	},
+	{
+		code: "PA",
+		name: "Panamá",
+		flag: "🇵🇦"
+	},
+	{
+		code: "PY",
+		name: "Paraguay",
+		flag: "🇵🇾"
+	},
+	{
+		code: "PE",
+		name: "Perú",
+		flag: "🇵🇪"
+	},
+	{
+		code: "PR",
+		name: "Puerto Rico",
+		flag: "🇵🇷"
+	},
+	{
+		code: "DO",
+		name: "República Dominicana",
+		flag: "🇩🇴"
+	},
+	{
+		code: "UY",
+		name: "Uruguay",
+		flag: "🇺🇾"
+	},
+	{
+		code: "VE",
+		name: "Venezuela",
+		flag: "🇻🇪"
+	}
+];
+//#endregion
+export { e as countries };

package/dist/presets/SelectCountry/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectCountry, type SelectCountryProps } from './SelectCountry';
+export { countries, type Country } from './countries';

package/dist/presets/SelectCountry/index.js

@@ -0,0 +1,3 @@
+import { countries as e } from "./countries.js";
+import { SelectCountry as t } from "./SelectCountry.js";
+export { t as SelectCountry, e as countries };

package/dist/presets/SelectPhone/SelectPhone.d.ts

@@ -0,0 +1,15 @@
+import { PhoneCode } from './phoneCodes';
+export interface SelectPhoneProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (code: string) => void;
+    codes?: PhoneCode[];
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'lg';
+    className?: string;
+}
+export declare const SelectPhone: {
+    ({ value, defaultValue, onValueChange, codes, placeholder, disabled, size, className }: SelectPhoneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/presets/SelectPhone/SelectPhone.js

@@ -0,0 +1,21 @@
+import { Combobox as e } from "../../components/Combobox/Combobox.js";
+import { phoneCodes as t } from "./phoneCodes.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/presets/SelectPhone/SelectPhone.tsx
+var i = ({ value: i, defaultValue: a, onValueChange: o, codes: s = t, placeholder: c = "Prefijo", disabled: l, size: u = "sm", className: d }) => /* @__PURE__ */ r(e, {
+	options: n.useMemo(() => s.map((e) => ({
+		value: e.code,
+		label: `${e.flag}  ${e.dial}  ${e.country}`
+	})), [s]),
+	value: i,
+	defaultValue: a,
+	onValueChange: o,
+	placeholder: c,
+	disabled: l,
+	size: u,
+	className: d
+});
+i.displayName = "SelectPhone";
+//#endregion
+export { i as SelectPhone };

package/dist/presets/SelectPhone/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectPhone, type SelectPhoneProps } from './SelectPhone';
+export { phoneCodes, type PhoneCode } from './phoneCodes';

package/dist/presets/SelectPhone/index.js

@@ -0,0 +1,3 @@
+import { phoneCodes as e } from "./phoneCodes.js";
+import { SelectPhone as t } from "./SelectPhone.js";
+export { t as SelectPhone, e as phoneCodes };

package/dist/presets/SelectPhone/phoneCodes.d.ts

@@ -0,0 +1,7 @@
+export interface PhoneCode {
+    code: string;
+    country: string;
+    flag: string;
+    dial: string;
+}
+export declare const phoneCodes: PhoneCode[];