acai-ui-library 0.1.13 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert.cjs +3 -2
- package/dist/components/alert.cjs.map +1 -1
- package/dist/components/alert.js +3 -2
- package/dist/components/alert.js.map +1 -1
- package/dist/components/card.cjs +1 -1
- package/dist/components/card.cjs.map +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/checkbox.cjs +2 -1
- package/dist/components/checkbox.cjs.map +1 -1
- package/dist/components/checkbox.js +2 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/data-table.cjs +2 -1
- package/dist/components/data-table.cjs.map +1 -1
- package/dist/components/data-table.js +2 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.cjs.map +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dropdown-menu.cjs +2 -2
- package/dist/components/dropdown-menu.cjs.map +1 -1
- package/dist/components/dropdown-menu.js +2 -2
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/impersonation-banner.cjs +137 -0
- package/dist/components/impersonation-banner.cjs.map +1 -0
- package/dist/components/impersonation-banner.d.cts +36 -0
- package/dist/components/impersonation-banner.d.ts +36 -0
- package/dist/components/impersonation-banner.js +101 -0
- package/dist/components/impersonation-banner.js.map +1 -0
- package/dist/components/input.cjs +2 -1
- package/dist/components/input.cjs.map +1 -1
- package/dist/components/input.js +2 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/item.cjs +1 -2
- package/dist/components/item.cjs.map +1 -1
- package/dist/components/item.js +1 -2
- package/dist/components/item.js.map +1 -1
- package/dist/components/pagination.cjs +3 -1
- package/dist/components/pagination.cjs.map +1 -1
- package/dist/components/pagination.d.cts +1 -1
- package/dist/components/pagination.d.ts +1 -1
- package/dist/components/pagination.js +3 -1
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/read-only-guard.cjs +103 -0
- package/dist/components/read-only-guard.cjs.map +1 -0
- package/dist/components/read-only-guard.d.cts +40 -0
- package/dist/components/read-only-guard.d.ts +40 -0
- package/dist/components/read-only-guard.js +64 -0
- package/dist/components/read-only-guard.js.map +1 -0
- package/dist/components/stepper.cjs.map +1 -1
- package/dist/components/stepper.js.map +1 -1
- package/dist/components/switch.cjs +2 -2
- package/dist/components/switch.cjs.map +1 -1
- package/dist/components/switch.js +2 -2
- package/dist/components/switch.js.map +1 -1
- package/dist/components/typography.cjs +4 -4
- package/dist/components/typography.cjs.map +1 -1
- package/dist/components/typography.js +4 -4
- package/dist/components/typography.js.map +1 -1
- package/dist/index.cjs +240 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +228 -16
- package/dist/index.js.map +1 -1
- package/dist/lib/impersonation.cjs +127 -0
- package/dist/lib/impersonation.cjs.map +1 -0
- package/dist/lib/impersonation.d.cts +45 -0
- package/dist/lib/impersonation.d.ts +45 -0
- package/dist/lib/impersonation.js +86 -0
- package/dist/lib/impersonation.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
// src/components/impersonation-banner.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
// src/lib/utils.ts
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import { twMerge } from "tailwind-merge";
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// src/components/impersonation-banner.tsx
|
|
12
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
function toMs(value) {
|
|
14
|
+
if (value instanceof Date) return value.getTime();
|
|
15
|
+
if (typeof value === "number") return value;
|
|
16
|
+
const parsed = Date.parse(value);
|
|
17
|
+
return Number.isNaN(parsed) ? 0 : parsed;
|
|
18
|
+
}
|
|
19
|
+
function formatRemaining(ms) {
|
|
20
|
+
const total = Math.max(0, Math.floor(ms / 1e3));
|
|
21
|
+
const h = Math.floor(total / 3600);
|
|
22
|
+
const m = Math.floor(total % 3600 / 60);
|
|
23
|
+
const s = total % 60;
|
|
24
|
+
const pad = (n) => String(n).padStart(2, "0");
|
|
25
|
+
return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
|
|
26
|
+
}
|
|
27
|
+
var ImpersonationBanner = React.forwardRef(
|
|
28
|
+
({ actorLabel, mode, expiresAt, onExit, targetLabel, ops, inline = false, onExpire, className }, ref) => {
|
|
29
|
+
const endMs = toMs(expiresAt);
|
|
30
|
+
const [now, setNow] = React.useState(() => Date.now());
|
|
31
|
+
const remaining = endMs - now;
|
|
32
|
+
const expired = remaining <= 0;
|
|
33
|
+
const onExpireRef = React.useRef(onExpire);
|
|
34
|
+
onExpireRef.current = onExpire;
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
if (expired) return void 0;
|
|
37
|
+
const timer = setInterval(() => setNow(Date.now()), 1e3);
|
|
38
|
+
return () => clearInterval(timer);
|
|
39
|
+
}, [expired]);
|
|
40
|
+
const firedFor = React.useRef(null);
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
if (expired && firedFor.current !== endMs) {
|
|
43
|
+
firedFor.current = endMs;
|
|
44
|
+
onExpireRef.current?.();
|
|
45
|
+
}
|
|
46
|
+
}, [expired, endMs]);
|
|
47
|
+
const isRead = mode === "READ";
|
|
48
|
+
const modeText = isRead ? "Read-only" : "Changes allowed";
|
|
49
|
+
const opsText = ops && ops.length > 0 ? ops.join(", ") : null;
|
|
50
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
51
|
+
inline ? null : /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-12", "data-impersonation-spacer": "" }),
|
|
52
|
+
/* @__PURE__ */ jsxs(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
ref,
|
|
56
|
+
role: "alert",
|
|
57
|
+
"data-impersonation-banner": "",
|
|
58
|
+
"data-mode": mode,
|
|
59
|
+
className: cn(
|
|
60
|
+
inline ? "relative" : "fixed inset-x-0 top-0 z-[2147483000]",
|
|
61
|
+
"flex h-12 items-center gap-3 border-b-2 px-4 text-sm font-medium shadow-md",
|
|
62
|
+
isRead ? "border-black bg-[#FDE047] text-black" : "border-white bg-[#991B1B] text-white",
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsx("span", { className: "shrink-0 rounded px-2 py-0.5 text-xs font-bold uppercase tracking-wide ring-1 ring-current", children: "Support session" }),
|
|
67
|
+
/* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 truncate", children: [
|
|
68
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: actorLabel }),
|
|
69
|
+
targetLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
70
|
+
" is acting as ",
|
|
71
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold", children: targetLabel })
|
|
72
|
+
] }) : " is acting as this user",
|
|
73
|
+
" \xB7 ",
|
|
74
|
+
/* @__PURE__ */ jsx("span", { "data-testid": "impersonation-mode", children: modeText }),
|
|
75
|
+
opsText ? /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: ` (${opsText})` }) : null
|
|
76
|
+
] }),
|
|
77
|
+
/* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums", "aria-live": "off", title: "Time left in this support session", children: /* @__PURE__ */ jsx("time", { "data-testid": "impersonation-countdown", dateTime: new Date(endMs).toISOString(), children: expired ? "Expired" : formatRemaining(remaining) }) }),
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
"button",
|
|
80
|
+
{
|
|
81
|
+
type: "button",
|
|
82
|
+
onClick: onExit,
|
|
83
|
+
className: cn(
|
|
84
|
+
"shrink-0 rounded-md px-3 py-1 text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
85
|
+
isRead ? "bg-black text-[#FDE047] hover:bg-black/85 focus-visible:ring-black focus-visible:ring-offset-[#FDE047]" : "bg-white text-[#991B1B] hover:bg-white/90 focus-visible:ring-white focus-visible:ring-offset-[#991B1B]"
|
|
86
|
+
),
|
|
87
|
+
children: "Exit"
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
ImpersonationBanner.displayName = "ImpersonationBanner";
|
|
97
|
+
export {
|
|
98
|
+
ImpersonationBanner,
|
|
99
|
+
formatRemaining
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=impersonation-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/impersonation-banner.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport type { ImpersonationMode, OperationClass } from \"../lib/impersonation\"\n\nexport interface ImpersonationBannerProps {\n /** Who is acting, e.g. the support person's email. */\n actorLabel: string\n /** READ or WRITE (from the token's imp_mode). */\n mode: ImpersonationMode\n /** When the session ends (Date, ISO string or epoch milliseconds). */\n expiresAt: Date | string | number\n /** Ends the session: the app clears the token. The banner itself never hides. */\n onExit: () => void\n /** Whose account is being used, e.g. the user's name. */\n targetLabel?: string\n /** Approved operation classes (imp_ops), shown next to the mode. */\n ops?: readonly OperationClass[]\n /** Render in the page flow instead of fixed to the top (docs and stories only). Default false. */\n inline?: boolean\n /** Called once when the countdown reaches zero. */\n onExpire?: () => void\n className?: string\n}\n\nfunction toMs(value: Date | string | number): number {\n if (value instanceof Date) return value.getTime()\n if (typeof value === \"number\") return value\n const parsed = Date.parse(value)\n return Number.isNaN(parsed) ? 0 : parsed\n}\n\n/** 29:59, or 1:02:03 past an hour. */\nexport function formatRemaining(ms: number): string {\n const total = Math.max(0, Math.floor(ms / 1000))\n const h = Math.floor(total / 3600)\n const m = Math.floor((total % 3600) / 60)\n const s = total % 60\n const pad = (n: number) => String(n).padStart(2, \"0\")\n return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`\n}\n\n/**\n * Fixed, non-dismissible top bar shown on every page while a support person acts as a user (acai-ai-platform#1274).\n *\n * - role=\"alert\" so screen readers announce it once (the countdown is aria-live off); there is no close control and Escape does nothing.\n * - Fixed colours that do not change with the theme: black on yellow for READ, white on dark red for WRITE. Both are\n * above 7:1 contrast in light and dark mode.\n * - A live countdown to the end of the session. \"Exit\" calls onExit; the app ends the session and unmounts the banner.\n * - Renders a spacer of the same height so page content is not hidden under the bar.\n */\nconst ImpersonationBanner = React.forwardRef<HTMLDivElement, ImpersonationBannerProps>(\n ({ actorLabel, mode, expiresAt, onExit, targetLabel, ops, inline = false, onExpire, className }, ref) => {\n const endMs = toMs(expiresAt)\n const [now, setNow] = React.useState(() => Date.now())\n const remaining = endMs - now\n const expired = remaining <= 0\n const onExpireRef = React.useRef(onExpire)\n onExpireRef.current = onExpire\n\n React.useEffect(() => {\n if (expired) return undefined\n const timer = setInterval(() => setNow(Date.now()), 1000)\n return () => clearInterval(timer)\n }, [expired])\n\n const firedFor = React.useRef<number | null>(null)\n React.useEffect(() => {\n if (expired && firedFor.current !== endMs) {\n firedFor.current = endMs\n onExpireRef.current?.()\n }\n }, [expired, endMs])\n\n const isRead = mode === \"READ\"\n const modeText = isRead ? \"Read-only\" : \"Changes allowed\"\n const opsText = ops && ops.length > 0 ? ops.join(\", \") : null\n\n return (\n <>\n {inline ? null : <div aria-hidden=\"true\" className=\"h-12\" data-impersonation-spacer=\"\" />}\n <div\n ref={ref}\n role=\"alert\"\n data-impersonation-banner=\"\"\n data-mode={mode}\n className={cn(\n inline ? \"relative\" : \"fixed inset-x-0 top-0 z-[2147483000]\",\n \"flex h-12 items-center gap-3 border-b-2 px-4 text-sm font-medium shadow-md\",\n isRead\n ? \"border-black bg-[#FDE047] text-black\"\n : \"border-white bg-[#991B1B] text-white\",\n className\n )}\n >\n <span className=\"shrink-0 rounded px-2 py-0.5 text-xs font-bold uppercase tracking-wide ring-1 ring-current\">\n Support session\n </span>\n <p className=\"min-w-0 flex-1 truncate\">\n <span className=\"font-semibold\">{actorLabel}</span>\n {targetLabel ? (\n <>\n {\" is acting as \"}\n <span className=\"font-semibold\">{targetLabel}</span>\n </>\n ) : (\n \" is acting as this user\"\n )}\n {\" · \"}\n <span data-testid=\"impersonation-mode\">{modeText}</span>\n {opsText ? <span className=\"hidden sm:inline\">{` (${opsText})`}</span> : null}\n </p>\n {/* aria-live off: the ticking countdown must not be re-announced every second. */}\n <span className=\"shrink-0 tabular-nums\" aria-live=\"off\" title=\"Time left in this support session\">\n <time data-testid=\"impersonation-countdown\" dateTime={new Date(endMs).toISOString()}>\n {expired ? \"Expired\" : formatRemaining(remaining)}\n </time>\n </span>\n <button\n type=\"button\"\n onClick={onExit}\n className={cn(\n \"shrink-0 rounded-md px-3 py-1 text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n isRead\n ? \"bg-black text-[#FDE047] hover:bg-black/85 focus-visible:ring-black focus-visible:ring-offset-[#FDE047]\"\n : \"bg-white text-[#991B1B] hover:bg-white/90 focus-visible:ring-white focus-visible:ring-offset-[#991B1B]\"\n )}\n >\n Exit\n </button>\n </div>\n </>\n )\n }\n)\nImpersonationBanner.displayName = \"ImpersonationBanner\"\n\nexport { ImpersonationBanner }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD0EyB,SAqBX,UArBW,KAqBX,YArBW;AAvDzB,SAAS,KAAK,OAAuC;AACnD,MAAI,iBAAiB,KAAM,QAAO,MAAM,QAAQ;AAChD,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,KAAK,MAAM,KAAK;AAC/B,SAAO,OAAO,MAAM,MAAM,IAAI,IAAI;AACpC;AAGO,SAAS,gBAAgB,IAAoB;AAClD,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;AAC/C,QAAM,IAAI,KAAK,MAAM,QAAQ,IAAI;AACjC,QAAM,IAAI,KAAK,MAAO,QAAQ,OAAQ,EAAE;AACxC,QAAM,IAAI,QAAQ;AAClB,QAAM,MAAM,CAAC,MAAc,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,SAAO,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC;AAC5D;AAWA,IAAM,sBAA4B;AAAA,EAChC,CAAC,EAAE,YAAY,MAAM,WAAW,QAAQ,aAAa,KAAK,SAAS,OAAO,UAAU,UAAU,GAAG,QAAQ;AACvG,UAAM,QAAQ,KAAK,SAAS;AAC5B,UAAM,CAAC,KAAK,MAAM,IAAU,eAAS,MAAM,KAAK,IAAI,CAAC;AACrD,UAAM,YAAY,QAAQ;AAC1B,UAAM,UAAU,aAAa;AAC7B,UAAM,cAAoB,aAAO,QAAQ;AACzC,gBAAY,UAAU;AAEtB,IAAM,gBAAU,MAAM;AACpB,UAAI,QAAS,QAAO;AACpB,YAAM,QAAQ,YAAY,MAAM,OAAO,KAAK,IAAI,CAAC,GAAG,GAAI;AACxD,aAAO,MAAM,cAAc,KAAK;AAAA,IAClC,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,WAAiB,aAAsB,IAAI;AACjD,IAAM,gBAAU,MAAM;AACpB,UAAI,WAAW,SAAS,YAAY,OAAO;AACzC,iBAAS,UAAU;AACnB,oBAAY,UAAU;AAAA,MACxB;AAAA,IACF,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,UAAM,SAAS,SAAS;AACxB,UAAM,WAAW,SAAS,cAAc;AACxC,UAAM,UAAU,OAAO,IAAI,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI;AAEzD,WACE,iCACG;AAAA,eAAS,OAAO,oBAAC,SAAI,eAAY,QAAO,WAAU,QAAO,6BAA0B,IAAG;AAAA,MACvF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,6BAA0B;AAAA,UAC1B,aAAW;AAAA,UACX,WAAW;AAAA,YACT,SAAS,aAAa;AAAA,YACtB;AAAA,YACA,SACI,yCACA;AAAA,YACJ;AAAA,UACF;AAAA,UAEA;AAAA,gCAAC,UAAK,WAAU,8FAA6F,6BAE7G;AAAA,YACA,qBAAC,OAAE,WAAU,2BACX;AAAA,kCAAC,UAAK,WAAU,iBAAiB,sBAAW;AAAA,cAC3C,cACC,iCACG;AAAA;AAAA,gBACD,oBAAC,UAAK,WAAU,iBAAiB,uBAAY;AAAA,iBAC/C,IAEA;AAAA,cAED;AAAA,cACD,oBAAC,UAAK,eAAY,sBAAsB,oBAAS;AAAA,cAChD,UAAU,oBAAC,UAAK,WAAU,oBAAoB,eAAK,OAAO,KAAI,IAAU;AAAA,eAC3E;AAAA,YAEA,oBAAC,UAAK,WAAU,yBAAwB,aAAU,OAAM,OAAM,qCAC5D,8BAAC,UAAK,eAAY,2BAA0B,UAAU,IAAI,KAAK,KAAK,EAAE,YAAY,GAC/E,oBAAU,YAAY,gBAAgB,SAAS,GAClD,GACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA,SACI,2GACA;AAAA,gBACN;AAAA,gBACD;AAAA;AAAA,YAED;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;","names":[]}
|
|
@@ -87,7 +87,8 @@ var Input = React.forwardRef(
|
|
|
87
87
|
onChange,
|
|
88
88
|
...props
|
|
89
89
|
}, ref) => {
|
|
90
|
-
const
|
|
90
|
+
const generatedId = React.useId();
|
|
91
|
+
const inputId = id || generatedId;
|
|
91
92
|
const isControlled = value !== void 0;
|
|
92
93
|
const [internalValue, setInternalValue] = React.useState(defaultValue);
|
|
93
94
|
const innerRef = React.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n error:\n \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n success:\n \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n },\n inputSize: {\n default: \"h-10 px-3 py-2 text-sm\",\n sm: \"h-8 px-2.5 py-1.5 text-xs\",\n lg: \"h-12 px-4 py-3 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n inputSize: \"default\",\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n VariantProps<typeof inputVariants> {\n label?: string\n hint?: string\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n clearable?: boolean\n onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n label,\n hint,\n variant = \"default\",\n inputSize = \"default\",\n leadingIcon,\n trailingIcon,\n clearable,\n onClear,\n disabled,\n id,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const inputId = id || React.useId()\n const isControlled = value !== undefined\n const [internalValue, setInternalValue] = React.useState<\n string | number | readonly string[] | undefined\n >(defaultValue)\n const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(\n ref,\n () => innerRef.current as HTMLInputElement,\n []\n )\n\n const currentValue = isControlled ? value : internalValue\n const hasValue =\n currentValue !== undefined &&\n currentValue !== null &&\n String(currentValue).length > 0\n\n const isPassword = type === \"password\"\n const [showPassword, setShowPassword] = React.useState(false)\n const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value)\n }\n onChange?.(e)\n }\n\n const handleClear = () => {\n if (!isControlled) {\n setInternalValue(\"\")\n }\n // Fire a synthetic input event so consumers relying on onChange receive it.\n const input = innerRef.current\n if (input) {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set\n nativeInputValueSetter?.call(input, \"\")\n const event = new Event(\"input\", { bubbles: true })\n input.dispatchEvent(event)\n input.focus()\n }\n onClear?.()\n }\n\n const showClearButton = clearable && hasValue && !isPassword && !disabled\n const showPasswordToggle = isPassword && !disabled\n\n const trailingSlots = [\n showClearButton ? 1 : 0,\n showPasswordToggle ? 1 : 0,\n trailingIcon ? 1 : 0,\n ].reduce((a, b) => a + b, 0)\n\n const inputPaddingEnd =\n trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n return (\n <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"text-sm font-medium text-foreground\",\n disabled && \"text-muted-foreground\"\n )}\n >\n {label}\n </label>\n )}\n <div\n data-slot=\"input-wrapper\"\n className={cn(\n inputVariants({ variant, inputSize }),\n \"relative flex items-center gap-2\",\n disabled && \"cursor-not-allowed opacity-50\",\n className\n )}\n >\n {leadingIcon && (\n <span className=\"shrink-0 text-muted-foreground\">\n {leadingIcon}\n </span>\n )}\n <input\n id={inputId}\n type={resolvedType}\n disabled={disabled}\n className={cn(\n \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n inputPaddingEnd\n )}\n ref={innerRef}\n value={isControlled ? value : internalValue}\n defaultValue={isControlled ? undefined : undefined}\n onChange={handleChange}\n {...props}\n />\n {(showClearButton || showPasswordToggle) && (\n <span\n className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n >\n {showClearButton && (\n <button\n type=\"button\"\n aria-label=\"Clear\"\n onClick={handleClear}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n <X className=\"size-4\" aria-hidden=\"true\" />\n </button>\n )}\n {showPasswordToggle && (\n <button\n type=\"button\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onClick={() => setShowPassword((s) => !s)}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n {showPassword ? (\n <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n ) : (\n <Eye className=\"size-4\" aria-hidden=\"true\" />\n )}\n </button>\n )}\n </span>\n )}\n {trailingIcon && !showClearButton && !showPasswordToggle && (\n <span className=\"shrink-0 text-muted-foreground\">\n {trailingIcon}\n </span>\n )}\n </div>\n {hint && (\n <p\n className={cn(\n \"text-xs\",\n variant === \"default\" && \"text-muted-foreground\",\n variant === \"error\" && \"text-destructive\",\n variant === \"success\" && \"text-success\"\n )}\n >\n {hint}\n </p>\n )}\n </div>\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n error:\n \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n success:\n \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n },\n inputSize: {\n default: \"h-10 px-3 py-2 text-sm\",\n sm: \"h-8 px-2.5 py-1.5 text-xs\",\n lg: \"h-12 px-4 py-3 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n inputSize: \"default\",\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n VariantProps<typeof inputVariants> {\n label?: string\n hint?: string\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n clearable?: boolean\n onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n label,\n hint,\n variant = \"default\",\n inputSize = \"default\",\n leadingIcon,\n trailingIcon,\n clearable,\n onClear,\n disabled,\n id,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const generatedId = React.useId()\n const inputId = id || generatedId\n const isControlled = value !== undefined\n const [internalValue, setInternalValue] = React.useState<\n string | number | readonly string[] | undefined\n >(defaultValue)\n const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(\n ref,\n () => innerRef.current as HTMLInputElement,\n []\n )\n\n const currentValue = isControlled ? value : internalValue\n const hasValue =\n currentValue !== undefined &&\n currentValue !== null &&\n String(currentValue).length > 0\n\n const isPassword = type === \"password\"\n const [showPassword, setShowPassword] = React.useState(false)\n const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value)\n }\n onChange?.(e)\n }\n\n const handleClear = () => {\n if (!isControlled) {\n setInternalValue(\"\")\n }\n // Fire a synthetic input event so consumers relying on onChange receive it.\n const input = innerRef.current\n if (input) {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set\n nativeInputValueSetter?.call(input, \"\")\n const event = new Event(\"input\", { bubbles: true })\n input.dispatchEvent(event)\n input.focus()\n }\n onClear?.()\n }\n\n const showClearButton = clearable && hasValue && !isPassword && !disabled\n const showPasswordToggle = isPassword && !disabled\n\n const trailingSlots = [\n showClearButton ? 1 : 0,\n showPasswordToggle ? 1 : 0,\n trailingIcon ? 1 : 0,\n ].reduce((a, b) => a + b, 0)\n\n const inputPaddingEnd =\n trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n return (\n <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"text-sm font-medium text-foreground\",\n disabled && \"text-muted-foreground\"\n )}\n >\n {label}\n </label>\n )}\n <div\n data-slot=\"input-wrapper\"\n className={cn(\n inputVariants({ variant, inputSize }),\n \"relative flex items-center gap-2\",\n disabled && \"cursor-not-allowed opacity-50\",\n className\n )}\n >\n {leadingIcon && (\n <span className=\"shrink-0 text-muted-foreground\">\n {leadingIcon}\n </span>\n )}\n <input\n id={inputId}\n type={resolvedType}\n disabled={disabled}\n className={cn(\n \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n inputPaddingEnd\n )}\n ref={innerRef}\n value={isControlled ? value : internalValue}\n defaultValue={isControlled ? undefined : undefined}\n onChange={handleChange}\n {...props}\n />\n {(showClearButton || showPasswordToggle) && (\n <span\n className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n >\n {showClearButton && (\n <button\n type=\"button\"\n aria-label=\"Clear\"\n onClick={handleClear}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n <X className=\"size-4\" aria-hidden=\"true\" />\n </button>\n )}\n {showPasswordToggle && (\n <button\n type=\"button\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onClick={() => setShowPassword((s) => !s)}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n {showPassword ? (\n <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n ) : (\n <Eye className=\"size-4\" aria-hidden=\"true\" />\n )}\n </button>\n )}\n </span>\n )}\n {trailingIcon && !showClearButton && !showPasswordToggle && (\n <span className=\"shrink-0 text-muted-foreground\">\n {trailingIcon}\n </span>\n )}\n </div>\n {hint && (\n <p\n className={cn(\n \"text-xs\",\n variant === \"default\" && \"text-muted-foreground\",\n variant === \"error\" && \"text-destructive\",\n variant === \"success\" && \"text-success\"\n )}\n >\n {hint}\n </p>\n )}\n </div>\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}
|
package/dist/components/input.js
CHANGED
|
@@ -52,7 +52,8 @@ var Input = React.forwardRef(
|
|
|
52
52
|
onChange,
|
|
53
53
|
...props
|
|
54
54
|
}, ref) => {
|
|
55
|
-
const
|
|
55
|
+
const generatedId = React.useId();
|
|
56
|
+
const inputId = id || generatedId;
|
|
56
57
|
const isControlled = value !== void 0;
|
|
57
58
|
const [internalValue, setInternalValue] = React.useState(defaultValue);
|
|
58
59
|
const innerRef = React.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n error:\n \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n success:\n \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n },\n inputSize: {\n default: \"h-10 px-3 py-2 text-sm\",\n sm: \"h-8 px-2.5 py-1.5 text-xs\",\n lg: \"h-12 px-4 py-3 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n inputSize: \"default\",\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n VariantProps<typeof inputVariants> {\n label?: string\n hint?: string\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n clearable?: boolean\n onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n label,\n hint,\n variant = \"default\",\n inputSize = \"default\",\n leadingIcon,\n trailingIcon,\n clearable,\n onClear,\n disabled,\n id,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const inputId = id || React.useId()\n const isControlled = value !== undefined\n const [internalValue, setInternalValue] = React.useState<\n string | number | readonly string[] | undefined\n >(defaultValue)\n const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(\n ref,\n () => innerRef.current as HTMLInputElement,\n []\n )\n\n const currentValue = isControlled ? value : internalValue\n const hasValue =\n currentValue !== undefined &&\n currentValue !== null &&\n String(currentValue).length > 0\n\n const isPassword = type === \"password\"\n const [showPassword, setShowPassword] = React.useState(false)\n const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value)\n }\n onChange?.(e)\n }\n\n const handleClear = () => {\n if (!isControlled) {\n setInternalValue(\"\")\n }\n // Fire a synthetic input event so consumers relying on onChange receive it.\n const input = innerRef.current\n if (input) {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set\n nativeInputValueSetter?.call(input, \"\")\n const event = new Event(\"input\", { bubbles: true })\n input.dispatchEvent(event)\n input.focus()\n }\n onClear?.()\n }\n\n const showClearButton = clearable && hasValue && !isPassword && !disabled\n const showPasswordToggle = isPassword && !disabled\n\n const trailingSlots = [\n showClearButton ? 1 : 0,\n showPasswordToggle ? 1 : 0,\n trailingIcon ? 1 : 0,\n ].reduce((a, b) => a + b, 0)\n\n const inputPaddingEnd =\n trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n return (\n <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"text-sm font-medium text-foreground\",\n disabled && \"text-muted-foreground\"\n )}\n >\n {label}\n </label>\n )}\n <div\n data-slot=\"input-wrapper\"\n className={cn(\n inputVariants({ variant, inputSize }),\n \"relative flex items-center gap-2\",\n disabled && \"cursor-not-allowed opacity-50\",\n className\n )}\n >\n {leadingIcon && (\n <span className=\"shrink-0 text-muted-foreground\">\n {leadingIcon}\n </span>\n )}\n <input\n id={inputId}\n type={resolvedType}\n disabled={disabled}\n className={cn(\n \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n inputPaddingEnd\n )}\n ref={innerRef}\n value={isControlled ? value : internalValue}\n defaultValue={isControlled ? undefined : undefined}\n onChange={handleChange}\n {...props}\n />\n {(showClearButton || showPasswordToggle) && (\n <span\n className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n >\n {showClearButton && (\n <button\n type=\"button\"\n aria-label=\"Clear\"\n onClick={handleClear}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n <X className=\"size-4\" aria-hidden=\"true\" />\n </button>\n )}\n {showPasswordToggle && (\n <button\n type=\"button\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onClick={() => setShowPassword((s) => !s)}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n {showPassword ? (\n <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n ) : (\n <Eye className=\"size-4\" aria-hidden=\"true\" />\n )}\n </button>\n )}\n </span>\n )}\n {trailingIcon && !showClearButton && !showPasswordToggle && (\n <span className=\"shrink-0 text-muted-foreground\">\n {trailingIcon}\n </span>\n )}\n </div>\n {hint && (\n <p\n className={cn(\n \"text-xs\",\n variant === \"default\" && \"text-muted-foreground\",\n variant === \"error\" && \"text-destructive\",\n variant === \"success\" && \"text-success\"\n )}\n >\n {hint}\n </p>\n )}\n </div>\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n error:\n \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n success:\n \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n },\n inputSize: {\n default: \"h-10 px-3 py-2 text-sm\",\n sm: \"h-8 px-2.5 py-1.5 text-xs\",\n lg: \"h-12 px-4 py-3 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n inputSize: \"default\",\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n VariantProps<typeof inputVariants> {\n label?: string\n hint?: string\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n clearable?: boolean\n onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n label,\n hint,\n variant = \"default\",\n inputSize = \"default\",\n leadingIcon,\n trailingIcon,\n clearable,\n onClear,\n disabled,\n id,\n value,\n defaultValue,\n onChange,\n ...props\n },\n ref\n ) => {\n const generatedId = React.useId()\n const inputId = id || generatedId\n const isControlled = value !== undefined\n const [internalValue, setInternalValue] = React.useState<\n string | number | readonly string[] | undefined\n >(defaultValue)\n const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(\n ref,\n () => innerRef.current as HTMLInputElement,\n []\n )\n\n const currentValue = isControlled ? value : internalValue\n const hasValue =\n currentValue !== undefined &&\n currentValue !== null &&\n String(currentValue).length > 0\n\n const isPassword = type === \"password\"\n const [showPassword, setShowPassword] = React.useState(false)\n const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalValue(e.target.value)\n }\n onChange?.(e)\n }\n\n const handleClear = () => {\n if (!isControlled) {\n setInternalValue(\"\")\n }\n // Fire a synthetic input event so consumers relying on onChange receive it.\n const input = innerRef.current\n if (input) {\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set\n nativeInputValueSetter?.call(input, \"\")\n const event = new Event(\"input\", { bubbles: true })\n input.dispatchEvent(event)\n input.focus()\n }\n onClear?.()\n }\n\n const showClearButton = clearable && hasValue && !isPassword && !disabled\n const showPasswordToggle = isPassword && !disabled\n\n const trailingSlots = [\n showClearButton ? 1 : 0,\n showPasswordToggle ? 1 : 0,\n trailingIcon ? 1 : 0,\n ].reduce((a, b) => a + b, 0)\n\n const inputPaddingEnd =\n trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n return (\n <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n {label && (\n <label\n htmlFor={inputId}\n className={cn(\n \"text-sm font-medium text-foreground\",\n disabled && \"text-muted-foreground\"\n )}\n >\n {label}\n </label>\n )}\n <div\n data-slot=\"input-wrapper\"\n className={cn(\n inputVariants({ variant, inputSize }),\n \"relative flex items-center gap-2\",\n disabled && \"cursor-not-allowed opacity-50\",\n className\n )}\n >\n {leadingIcon && (\n <span className=\"shrink-0 text-muted-foreground\">\n {leadingIcon}\n </span>\n )}\n <input\n id={inputId}\n type={resolvedType}\n disabled={disabled}\n className={cn(\n \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n inputPaddingEnd\n )}\n ref={innerRef}\n value={isControlled ? value : internalValue}\n defaultValue={isControlled ? undefined : undefined}\n onChange={handleChange}\n {...props}\n />\n {(showClearButton || showPasswordToggle) && (\n <span\n className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n >\n {showClearButton && (\n <button\n type=\"button\"\n aria-label=\"Clear\"\n onClick={handleClear}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n <X className=\"size-4\" aria-hidden=\"true\" />\n </button>\n )}\n {showPasswordToggle && (\n <button\n type=\"button\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onClick={() => setShowPassword((s) => !s)}\n tabIndex={-1}\n className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n >\n {showPassword ? (\n <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n ) : (\n <Eye className=\"size-4\" aria-hidden=\"true\" />\n )}\n </button>\n )}\n </span>\n )}\n {trailingIcon && !showClearButton && !showPasswordToggle && (\n <span className=\"shrink-0 text-muted-foreground\">\n {trailingIcon}\n </span>\n )}\n </div>\n {hint && (\n <p\n className={cn(\n \"text-xs\",\n variant === \"default\" && \"text-muted-foreground\",\n variant === \"error\" && \"text-destructive\",\n variant === \"success\" && \"text-success\"\n )}\n >\n {hint}\n </p>\n )}\n </div>\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}
|
package/dist/components/item.cjs
CHANGED
|
@@ -54,7 +54,7 @@ var Item = React.forwardRef(
|
|
|
54
54
|
({ className, clickable, onClick, children, ...props }, ref) => {
|
|
55
55
|
const baseClasses = "flex items-center gap-3 px-4 py-3 rounded-md";
|
|
56
56
|
const interactiveClasses = "cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start";
|
|
57
|
-
if (clickable) {
|
|
57
|
+
if (clickable || onClick) {
|
|
58
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
59
|
"button",
|
|
60
60
|
{
|
|
@@ -71,7 +71,6 @@ var Item = React.forwardRef(
|
|
|
71
71
|
"div",
|
|
72
72
|
{
|
|
73
73
|
ref,
|
|
74
|
-
onClick,
|
|
75
74
|
className: cn(baseClasses, className),
|
|
76
75
|
...props,
|
|
77
76
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/item.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLElement> {\n /** When true, renders as a focusable button with hover/focus styles */\n clickable?: boolean\n /** Click handler; works for both clickable and non-clickable items */\n onClick?: React.MouseEventHandler<HTMLElement>\n}\n\nconst Item = React.forwardRef<HTMLElement, ItemProps>(\n ({ className, clickable, onClick, children, ...props }, ref) => {\n const baseClasses = \"flex items-center gap-3 px-4 py-3 rounded-md\"\n const interactiveClasses =\n \"cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start\"\n\n if (clickable) {\n return (\n <button\n type=\"button\"\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n className={cn(baseClasses, interactiveClasses, className)}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n )\n }\n\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n
|
|
1
|
+
{"version":3,"sources":["../../src/components/item.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLElement> {\n /** When true, renders as a focusable button with hover/focus styles */\n clickable?: boolean\n /** Click handler; works for both clickable and non-clickable items */\n onClick?: React.MouseEventHandler<HTMLElement>\n}\n\nconst Item = React.forwardRef<HTMLElement, ItemProps>(\n ({ className, clickable, onClick, children, ...props }, ref) => {\n const baseClasses = \"flex items-center gap-3 px-4 py-3 rounded-md\"\n const interactiveClasses =\n \"cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start\"\n\n if (clickable || onClick) {\n return (\n <button\n type=\"button\"\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n className={cn(baseClasses, interactiveClasses, className)}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n )\n }\n\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n className={cn(baseClasses, className)}\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n )\n }\n)\nItem.displayName = \"Item\"\n\nconst ItemMedia = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"shrink-0 flex items-center\", className)}\n {...props}\n />\n))\nItemMedia.displayName = \"ItemMedia\"\n\nconst ItemContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex-1 min-w-0 flex flex-col gap-0.5\", className)}\n {...props}\n />\n))\nItemContent.displayName = \"ItemContent\"\n\nconst ItemTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm font-medium text-foreground truncate\", className)}\n {...props}\n />\n))\nItemTitle.displayName = \"ItemTitle\"\n\nconst ItemDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-xs text-muted-foreground truncate\", className)}\n {...props}\n />\n))\nItemDescription.displayName = \"ItemDescription\"\n\nconst ItemActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"shrink-0 flex items-center gap-1 ms-auto\", className)}\n {...props}\n />\n))\nItemActions.displayName = \"ItemActions\"\n\nconst ItemGroup = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col divide-y divide-[var(--hc-color-border-subtle)] rounded-md border border-[var(--hc-color-border-subtle)] bg-background overflow-hidden\",\n className\n )}\n {...props}\n />\n))\nItemGroup.displayName = \"ItemGroup\"\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemTitle,\n ItemDescription,\n ItemActions,\n ItemGroup,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADaQ;AARR,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,WAAW,WAAW,SAAS,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAM,cAAc;AACpB,UAAM,qBACJ;AAEF,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,GAAG,aAAa,oBAAoB,SAAS;AAAA,UACvD,GAAI;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,aAAa,SAAS;AAAA,QACnC,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wCAAwC,SAAS;AAAA,IAC9D,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gDAAgD,SAAS;AAAA,IACtE,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA;AACN,CACD;AACD,gBAAgB,cAAc;AAE9B,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,4CAA4C,SAAS;AAAA,IAClE,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;","names":[]}
|
package/dist/components/item.js
CHANGED
|
@@ -14,7 +14,7 @@ var Item = React.forwardRef(
|
|
|
14
14
|
({ className, clickable, onClick, children, ...props }, ref) => {
|
|
15
15
|
const baseClasses = "flex items-center gap-3 px-4 py-3 rounded-md";
|
|
16
16
|
const interactiveClasses = "cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start";
|
|
17
|
-
if (clickable) {
|
|
17
|
+
if (clickable || onClick) {
|
|
18
18
|
return /* @__PURE__ */ jsx(
|
|
19
19
|
"button",
|
|
20
20
|
{
|
|
@@ -31,7 +31,6 @@ var Item = React.forwardRef(
|
|
|
31
31
|
"div",
|
|
32
32
|
{
|
|
33
33
|
ref,
|
|
34
|
-
onClick,
|
|
35
34
|
className: cn(baseClasses, className),
|
|
36
35
|
...props,
|
|
37
36
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/item.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLElement> {\n /** When true, renders as a focusable button with hover/focus styles */\n clickable?: boolean\n /** Click handler; works for both clickable and non-clickable items */\n onClick?: React.MouseEventHandler<HTMLElement>\n}\n\nconst Item = React.forwardRef<HTMLElement, ItemProps>(\n ({ className, clickable, onClick, children, ...props }, ref) => {\n const baseClasses = \"flex items-center gap-3 px-4 py-3 rounded-md\"\n const interactiveClasses =\n \"cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start\"\n\n if (clickable) {\n return (\n <button\n type=\"button\"\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n className={cn(baseClasses, interactiveClasses, className)}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n )\n }\n\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n
|
|
1
|
+
{"version":3,"sources":["../../src/components/item.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLElement> {\n /** When true, renders as a focusable button with hover/focus styles */\n clickable?: boolean\n /** Click handler; works for both clickable and non-clickable items */\n onClick?: React.MouseEventHandler<HTMLElement>\n}\n\nconst Item = React.forwardRef<HTMLElement, ItemProps>(\n ({ className, clickable, onClick, children, ...props }, ref) => {\n const baseClasses = \"flex items-center gap-3 px-4 py-3 rounded-md\"\n const interactiveClasses =\n \"cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start\"\n\n if (clickable || onClick) {\n return (\n <button\n type=\"button\"\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n className={cn(baseClasses, interactiveClasses, className)}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {children}\n </button>\n )\n }\n\n return (\n <div\n ref={ref as React.Ref<HTMLDivElement>}\n className={cn(baseClasses, className)}\n {...(props as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n )\n }\n)\nItem.displayName = \"Item\"\n\nconst ItemMedia = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"shrink-0 flex items-center\", className)}\n {...props}\n />\n))\nItemMedia.displayName = \"ItemMedia\"\n\nconst ItemContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex-1 min-w-0 flex flex-col gap-0.5\", className)}\n {...props}\n />\n))\nItemContent.displayName = \"ItemContent\"\n\nconst ItemTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm font-medium text-foreground truncate\", className)}\n {...props}\n />\n))\nItemTitle.displayName = \"ItemTitle\"\n\nconst ItemDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-xs text-muted-foreground truncate\", className)}\n {...props}\n />\n))\nItemDescription.displayName = \"ItemDescription\"\n\nconst ItemActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"shrink-0 flex items-center gap-1 ms-auto\", className)}\n {...props}\n />\n))\nItemActions.displayName = \"ItemActions\"\n\nconst ItemGroup = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"flex flex-col divide-y divide-[var(--hc-color-border-subtle)] rounded-md border border-[var(--hc-color-border-subtle)] bg-background overflow-hidden\",\n className\n )}\n {...props}\n />\n))\nItemGroup.displayName = \"ItemGroup\"\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemTitle,\n ItemDescription,\n ItemActions,\n ItemGroup,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADaQ;AARR,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,WAAW,WAAW,SAAS,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAM,cAAc;AACpB,UAAM,qBACJ;AAEF,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,GAAG,aAAa,oBAAoB,SAAS;AAAA,UACvD,GAAI;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,aAAa,SAAS;AAAA,QACnC,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wCAAwC,SAAS;AAAA,IAC9D,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gDAAgD,SAAS;AAAA,IACtE,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,kBAAwB,iBAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA;AACN,CACD;AACD,gBAAgB,cAAc;AAE9B,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,4CAA4C,SAAS;AAAA,IAClE,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;","names":[]}
|
|
@@ -153,6 +153,7 @@ var PaginationLink = ({
|
|
|
153
153
|
className,
|
|
154
154
|
isActive,
|
|
155
155
|
size = "icon",
|
|
156
|
+
children,
|
|
156
157
|
...props
|
|
157
158
|
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
158
159
|
"a",
|
|
@@ -165,7 +166,8 @@ var PaginationLink = ({
|
|
|
165
166
|
}),
|
|
166
167
|
className
|
|
167
168
|
),
|
|
168
|
-
...props
|
|
169
|
+
...props,
|
|
170
|
+
children
|
|
169
171
|
}
|
|
170
172
|
);
|
|
171
173
|
PaginationLink.displayName = "PaginationLink";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/pagination.tsx","../../src/lib/utils.ts","../../src/components/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { buttonVariants, type ButtonProps } from \"./button\"\n\n/* ----------------------------------- Nav ---------------------------------- */\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n {...props}\n />\n)\nPagination.displayName = \"Pagination\"\n\n/* --------------------------------- Content -------------------------------- */\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\"flex flex-row items-center gap-1\", className)}\n {...props}\n />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\n/* ---------------------------------- Item ---------------------------------- */\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\n/* ---------------------------------- Link ---------------------------------- */\n\ntype PaginationLinkProps = {\n isActive?: boolean\n size?: ButtonProps[\"size\"]\n} & React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) => (\n <a\n aria-current={isActive ? \"page\" : undefined}\n className={cn(\n buttonVariants({\n variant: isActive ? \"default\" : \"ghost\",\n size,\n }),\n className\n )}\n {...props}\n />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\n/* -------------------------------- Previous -------------------------------- */\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <ChevronLeft className=\"size-4\" />\n <span className=\"hidden sm:block\">Previous</span>\n </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\n/* ---------------------------------- Next ---------------------------------- */\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <ChevronRight className=\"size-4\" />\n </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\n/* -------------------------------- Ellipsis -------------------------------- */\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n aria-hidden\n className={cn(\"flex size-10 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\n/* ---------------------------------- Info ---------------------------------- */\n\ninterface PaginationInfoProps extends React.ComponentProps<\"div\"> {\n currentPage: number\n totalPages: number\n formatPage?: (page: number) => string\n}\n\nconst PaginationInfo = ({\n currentPage,\n totalPages,\n formatPage = (p) => String(p).padStart(2, \"0\"),\n className,\n ...props\n}: PaginationInfoProps) => (\n <div\n className={cn(\"inline-flex items-center gap-1.5 text-sm\", className)}\n {...props}\n >\n <span className=\"text-muted-foreground\">Page</span>\n <span className=\"font-medium text-foreground\">{formatPage(currentPage)}</span>\n <span className=\"text-muted-foreground\">of</span>\n <span className=\"font-medium text-foreground\">{formatPage(totalPages)}</span>\n </div>\n)\nPaginationInfo.displayName = \"PaginationInfo\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationInfo,\n type PaginationLinkProps,\n type PaginationInfoProps,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive-hover\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground\",\n link:\n \"text-primary underline-offset-4 hover:underline\",\n success:\n \"bg-success text-success-foreground hover:bg-success-hover\",\n },\n size: {\n xs: \"h-7 px-2.5 text-xs\",\n sm: \"h-9 px-3\",\n default: \"h-10 px-4 py-2\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n \"icon-sm\": \"h-8 w-8\",\n },\n shape: {\n default: \"rounded-md\",\n rounded: \"rounded-lg\",\n pill: \"rounded-full\",\n square: \"rounded-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n loading?: boolean\n prefixIcon?: React.ReactNode\n suffixIcon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n shape,\n asChild = false,\n loading = false,\n prefixIcon,\n suffixIcon,\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, shape, className }))}\n ref={ref}\n disabled={isDisabled}\n {...props}\n >\n {loading && <Loader2 className=\"animate-spin\" />}\n {!loading && prefixIcon}\n {children}\n {suffixIcon}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":["React","import_lucide_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/pagination.tsx","../../src/lib/utils.ts","../../src/components/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { buttonVariants, type ButtonProps } from \"./button\"\n\n/* ----------------------------------- Nav ---------------------------------- */\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n {...props}\n />\n)\nPagination.displayName = \"Pagination\"\n\n/* --------------------------------- Content -------------------------------- */\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\"flex flex-row items-center gap-1\", className)}\n {...props}\n />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\n/* ---------------------------------- Item ---------------------------------- */\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\n/* ---------------------------------- Link ---------------------------------- */\n\ntype PaginationLinkProps = {\n isActive?: boolean\n size?: ButtonProps[\"size\"]\n} & React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n children,\n ...props\n}: PaginationLinkProps) => (\n <a\n aria-current={isActive ? \"page\" : undefined}\n className={cn(\n buttonVariants({\n variant: isActive ? \"default\" : \"ghost\",\n size,\n }),\n className\n )}\n {...props}\n >\n {children}\n </a>\n)\nPaginationLink.displayName = \"PaginationLink\"\n\n/* -------------------------------- Previous -------------------------------- */\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <ChevronLeft className=\"size-4\" />\n <span className=\"hidden sm:block\">Previous</span>\n </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\n/* ---------------------------------- Next ---------------------------------- */\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <ChevronRight className=\"size-4\" />\n </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\n/* -------------------------------- Ellipsis -------------------------------- */\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n aria-hidden\n className={cn(\"flex size-10 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\n/* ---------------------------------- Info ---------------------------------- */\n\ninterface PaginationInfoProps extends React.ComponentProps<\"div\"> {\n currentPage: number\n totalPages: number\n formatPage?: (page: number) => string\n}\n\nconst PaginationInfo = ({\n currentPage,\n totalPages,\n formatPage = (p) => String(p).padStart(2, \"0\"),\n className,\n ...props\n}: PaginationInfoProps) => (\n <div\n className={cn(\"inline-flex items-center gap-1.5 text-sm\", className)}\n {...props}\n >\n <span className=\"text-muted-foreground\">Page</span>\n <span className=\"font-medium text-foreground\">{formatPage(currentPage)}</span>\n <span className=\"text-muted-foreground\">of</span>\n <span className=\"font-medium text-foreground\">{formatPage(totalPages)}</span>\n </div>\n)\nPaginationInfo.displayName = \"PaginationInfo\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationInfo,\n type PaginationLinkProps,\n type PaginationInfoProps,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive-hover\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground\",\n link:\n \"text-primary underline-offset-4 hover:underline\",\n success:\n \"bg-success text-success-foreground hover:bg-success-hover\",\n },\n size: {\n xs: \"h-7 px-2.5 text-xs\",\n sm: \"h-9 px-3\",\n default: \"h-10 px-4 py-2\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n \"icon-sm\": \"h-8 w-8\",\n },\n shape: {\n default: \"rounded-md\",\n rounded: \"rounded-lg\",\n pill: \"rounded-full\",\n square: \"rounded-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n loading?: boolean\n prefixIcon?: React.ReactNode\n suffixIcon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n shape,\n asChild = false,\n loading = false,\n prefixIcon,\n suffixIcon,\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, shape, className }))}\n ref={ref}\n disabled={isDisabled}\n {...props}\n >\n {loading && <Loader2 className=\"animate-spin\" />}\n {!loading && prefixIcon}\n {children}\n {suffixIcon}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":["React","import_lucide_react","import_jsx_runtime"]}
|
|
@@ -15,7 +15,7 @@ type PaginationLinkProps = {
|
|
|
15
15
|
size?: ButtonProps["size"];
|
|
16
16
|
} & React.ComponentProps<"a">;
|
|
17
17
|
declare const PaginationLink: {
|
|
18
|
-
({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
({ className, isActive, size, children, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
19
19
|
displayName: string;
|
|
20
20
|
};
|
|
21
21
|
declare const PaginationPrevious: {
|
|
@@ -15,7 +15,7 @@ type PaginationLinkProps = {
|
|
|
15
15
|
size?: ButtonProps["size"];
|
|
16
16
|
} & React.ComponentProps<"a">;
|
|
17
17
|
declare const PaginationLink: {
|
|
18
|
-
({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
({ className, isActive, size, children, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
19
19
|
displayName: string;
|
|
20
20
|
};
|
|
21
21
|
declare const PaginationPrevious: {
|
|
@@ -112,6 +112,7 @@ var PaginationLink = ({
|
|
|
112
112
|
className,
|
|
113
113
|
isActive,
|
|
114
114
|
size = "icon",
|
|
115
|
+
children,
|
|
115
116
|
...props
|
|
116
117
|
}) => /* @__PURE__ */ jsx2(
|
|
117
118
|
"a",
|
|
@@ -124,7 +125,8 @@ var PaginationLink = ({
|
|
|
124
125
|
}),
|
|
125
126
|
className
|
|
126
127
|
),
|
|
127
|
-
...props
|
|
128
|
+
...props,
|
|
129
|
+
children
|
|
128
130
|
}
|
|
129
131
|
);
|
|
130
132
|
PaginationLink.displayName = "PaginationLink";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/pagination.tsx","../../src/lib/utils.ts","../../src/components/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { buttonVariants, type ButtonProps } from \"./button\"\n\n/* ----------------------------------- Nav ---------------------------------- */\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n {...props}\n />\n)\nPagination.displayName = \"Pagination\"\n\n/* --------------------------------- Content -------------------------------- */\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\"flex flex-row items-center gap-1\", className)}\n {...props}\n />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\n/* ---------------------------------- Item ---------------------------------- */\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\n/* ---------------------------------- Link ---------------------------------- */\n\ntype PaginationLinkProps = {\n isActive?: boolean\n size?: ButtonProps[\"size\"]\n} & React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) => (\n <a\n aria-current={isActive ? \"page\" : undefined}\n className={cn(\n buttonVariants({\n variant: isActive ? \"default\" : \"ghost\",\n size,\n }),\n className\n )}\n {...props}\n />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\n/* -------------------------------- Previous -------------------------------- */\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <ChevronLeft className=\"size-4\" />\n <span className=\"hidden sm:block\">Previous</span>\n </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\n/* ---------------------------------- Next ---------------------------------- */\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <ChevronRight className=\"size-4\" />\n </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\n/* -------------------------------- Ellipsis -------------------------------- */\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n aria-hidden\n className={cn(\"flex size-10 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\n/* ---------------------------------- Info ---------------------------------- */\n\ninterface PaginationInfoProps extends React.ComponentProps<\"div\"> {\n currentPage: number\n totalPages: number\n formatPage?: (page: number) => string\n}\n\nconst PaginationInfo = ({\n currentPage,\n totalPages,\n formatPage = (p) => String(p).padStart(2, \"0\"),\n className,\n ...props\n}: PaginationInfoProps) => (\n <div\n className={cn(\"inline-flex items-center gap-1.5 text-sm\", className)}\n {...props}\n >\n <span className=\"text-muted-foreground\">Page</span>\n <span className=\"font-medium text-foreground\">{formatPage(currentPage)}</span>\n <span className=\"text-muted-foreground\">of</span>\n <span className=\"font-medium text-foreground\">{formatPage(totalPages)}</span>\n </div>\n)\nPaginationInfo.displayName = \"PaginationInfo\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationInfo,\n type PaginationLinkProps,\n type PaginationInfoProps,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive-hover\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground\",\n link:\n \"text-primary underline-offset-4 hover:underline\",\n success:\n \"bg-success text-success-foreground hover:bg-success-hover\",\n },\n size: {\n xs: \"h-7 px-2.5 text-xs\",\n sm: \"h-9 px-3\",\n default: \"h-10 px-4 py-2\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n \"icon-sm\": \"h-8 w-8\",\n },\n shape: {\n default: \"rounded-md\",\n rounded: \"rounded-lg\",\n pill: \"rounded-full\",\n square: \"rounded-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n loading?: boolean\n prefixIcon?: React.ReactNode\n suffixIcon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n shape,\n asChild = false,\n loading = false,\n prefixIcon,\n suffixIcon,\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, shape, className }))}\n ref={ref}\n disabled={isDisabled}\n {...props}\n >\n {loading && <Loader2 className=\"animate-spin\" />}\n {!loading && prefixIcon}\n {children}\n {suffixIcon}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":["React","jsx","jsxs"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/pagination.tsx","../../src/lib/utils.ts","../../src/components/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { buttonVariants, type ButtonProps } from \"./button\"\n\n/* ----------------------------------- Nav ---------------------------------- */\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n {...props}\n />\n)\nPagination.displayName = \"Pagination\"\n\n/* --------------------------------- Content -------------------------------- */\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\"flex flex-row items-center gap-1\", className)}\n {...props}\n />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\n/* ---------------------------------- Item ---------------------------------- */\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\n/* ---------------------------------- Link ---------------------------------- */\n\ntype PaginationLinkProps = {\n isActive?: boolean\n size?: ButtonProps[\"size\"]\n} & React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n children,\n ...props\n}: PaginationLinkProps) => (\n <a\n aria-current={isActive ? \"page\" : undefined}\n className={cn(\n buttonVariants({\n variant: isActive ? \"default\" : \"ghost\",\n size,\n }),\n className\n )}\n {...props}\n >\n {children}\n </a>\n)\nPaginationLink.displayName = \"PaginationLink\"\n\n/* -------------------------------- Previous -------------------------------- */\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <ChevronLeft className=\"size-4\" />\n <span className=\"hidden sm:block\">Previous</span>\n </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\n/* ---------------------------------- Next ---------------------------------- */\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"gap-1 px-2.5\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <ChevronRight className=\"size-4\" />\n </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\n/* -------------------------------- Ellipsis -------------------------------- */\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n aria-hidden\n className={cn(\"flex size-10 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\n/* ---------------------------------- Info ---------------------------------- */\n\ninterface PaginationInfoProps extends React.ComponentProps<\"div\"> {\n currentPage: number\n totalPages: number\n formatPage?: (page: number) => string\n}\n\nconst PaginationInfo = ({\n currentPage,\n totalPages,\n formatPage = (p) => String(p).padStart(2, \"0\"),\n className,\n ...props\n}: PaginationInfoProps) => (\n <div\n className={cn(\"inline-flex items-center gap-1.5 text-sm\", className)}\n {...props}\n >\n <span className=\"text-muted-foreground\">Page</span>\n <span className=\"font-medium text-foreground\">{formatPage(currentPage)}</span>\n <span className=\"text-muted-foreground\">of</span>\n <span className=\"font-medium text-foreground\">{formatPage(totalPages)}</span>\n </div>\n)\nPaginationInfo.displayName = \"PaginationInfo\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationInfo,\n type PaginationLinkProps,\n type PaginationInfoProps,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive-hover\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground\",\n link:\n \"text-primary underline-offset-4 hover:underline\",\n success:\n \"bg-success text-success-foreground hover:bg-success-hover\",\n },\n size: {\n xs: \"h-7 px-2.5 text-xs\",\n sm: \"h-9 px-3\",\n default: \"h-10 px-4 py-2\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n \"icon-sm\": \"h-8 w-8\",\n },\n shape: {\n default: \"rounded-md\",\n rounded: \"rounded-lg\",\n pill: \"rounded-full\",\n square: \"rounded-none\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n shape: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n loading?: boolean\n prefixIcon?: React.ReactNode\n suffixIcon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n shape,\n asChild = false,\n loading = false,\n prefixIcon,\n suffixIcon,\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, shape, className }))}\n ref={ref}\n disabled={isDisabled}\n {...props}\n >\n {loading && <Loader2 className=\"animate-spin\" />}\n {!loading && prefixIcon}\n {children}\n {suffixIcon}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":["React","jsx","jsxs"]}
|