@axtec/components 0.1.6 → 0.1.7
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.
|
@@ -7,6 +7,7 @@ export interface SelectionCardProps {
|
|
|
7
7
|
onClick?: () => void;
|
|
8
8
|
variant?: 'default' | 'branded';
|
|
9
9
|
size?: 'sm' | 'md' | 'lg';
|
|
10
|
+
interactive?: boolean;
|
|
10
11
|
className?: string;
|
|
11
12
|
}
|
|
12
|
-
export declare function SelectionCard({ icon: Icon, label, description, selected, onClick, variant, size, className, }: SelectionCardProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function SelectionCard({ icon: Icon, label, description, selected, onClick, variant, size, interactive, className, }: SelectionCardProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/index58.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { cn as
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { cn as o } from "./index3.js";
|
|
3
3
|
import { CheckIcon as c } from "@heroicons/react/20/solid";
|
|
4
|
-
const
|
|
4
|
+
const x = {
|
|
5
5
|
sm: "p-3",
|
|
6
6
|
md: "p-5",
|
|
7
7
|
lg: "p-6"
|
|
@@ -9,59 +9,68 @@ const d = {
|
|
|
9
9
|
sm: "h-6 w-6",
|
|
10
10
|
md: "h-8 w-8",
|
|
11
11
|
lg: "h-10 w-10"
|
|
12
|
+
}, h = {
|
|
13
|
+
sm: "text-sm",
|
|
14
|
+
md: "text-sm",
|
|
15
|
+
lg: "text-base"
|
|
16
|
+
}, y = {
|
|
17
|
+
sm: "text-xs",
|
|
18
|
+
md: "text-xs",
|
|
19
|
+
lg: "text-sm"
|
|
12
20
|
};
|
|
13
|
-
function
|
|
14
|
-
icon:
|
|
15
|
-
label:
|
|
16
|
-
description:
|
|
21
|
+
function N({
|
|
22
|
+
icon: l,
|
|
23
|
+
label: i,
|
|
24
|
+
description: m,
|
|
17
25
|
selected: r = !1,
|
|
18
|
-
onClick:
|
|
19
|
-
variant:
|
|
20
|
-
size:
|
|
21
|
-
|
|
26
|
+
onClick: p,
|
|
27
|
+
variant: a = "default",
|
|
28
|
+
size: t = "md",
|
|
29
|
+
interactive: s = !0,
|
|
30
|
+
className: d
|
|
22
31
|
}) {
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
-
"button",
|
|
32
|
+
return /* @__PURE__ */ n(
|
|
33
|
+
s ? "button" : "div",
|
|
25
34
|
{
|
|
26
|
-
type: "button",
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
p
|
|
35
|
+
...s ? { type: "button", role: "radio", "aria-checked": r, onClick: p } : {},
|
|
36
|
+
className: o(
|
|
37
|
+
"relative rounded-xl border-2 transition-all text-center w-full",
|
|
38
|
+
x[t],
|
|
39
|
+
s && "cursor-pointer",
|
|
40
|
+
r ? "bg-primary-50 border-primary-300 ring-1 ring-primary-200" : a === "branded" ? "bg-primary-50/50 border-primary-200" : "bg-slate-50 border-slate-200",
|
|
41
|
+
!r && s && (a === "branded" ? "hover:border-primary-300 hover:bg-primary-50" : "hover:border-slate-300 hover:bg-slate-100"),
|
|
42
|
+
d
|
|
35
43
|
),
|
|
36
44
|
children: [
|
|
37
45
|
r && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white", children: /* @__PURE__ */ e(c, { className: "h-3.5 w-3.5" }) }),
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
/* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-2", children: [
|
|
47
|
+
l && /* @__PURE__ */ e(
|
|
48
|
+
l,
|
|
41
49
|
{
|
|
42
|
-
className:
|
|
43
|
-
b[
|
|
44
|
-
r ? "text-primary-600" :
|
|
50
|
+
className: o(
|
|
51
|
+
b[t],
|
|
52
|
+
r ? "text-primary-600" : a === "branded" ? "text-primary-400" : "text-slate-400"
|
|
45
53
|
)
|
|
46
54
|
}
|
|
47
55
|
),
|
|
48
56
|
/* @__PURE__ */ e(
|
|
49
57
|
"span",
|
|
50
58
|
{
|
|
51
|
-
className:
|
|
52
|
-
"font-semibold
|
|
59
|
+
className: o(
|
|
60
|
+
"font-semibold",
|
|
61
|
+
h[t],
|
|
53
62
|
r ? "text-primary-600" : "text-slate-800"
|
|
54
63
|
),
|
|
55
|
-
children:
|
|
64
|
+
children: i
|
|
56
65
|
}
|
|
57
66
|
),
|
|
58
|
-
|
|
67
|
+
m && /* @__PURE__ */ e("span", { className: o(y[t], "text-slate-500"), children: m })
|
|
59
68
|
] })
|
|
60
69
|
]
|
|
61
70
|
}
|
|
62
71
|
);
|
|
63
72
|
}
|
|
64
73
|
export {
|
|
65
|
-
|
|
74
|
+
N as SelectionCard
|
|
66
75
|
};
|
|
67
76
|
//# sourceMappingURL=index58.js.map
|
package/dist/index58.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index58.js","sources":["../src/components/SelectionCard/SelectionCard.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { CheckIcon } from '@heroicons/react/20/solid'\nimport type { ComponentType, SVGProps } from 'react'\n\nexport interface SelectionCardProps {\n icon?: ComponentType<SVGProps<SVGSVGElement>>\n label: string\n description?: string\n selected?: boolean\n onClick?: () => void\n variant?: 'default' | 'branded'\n size?: 'sm' | 'md' | 'lg'\n className?: string\n}\n\nconst sizeStyles = {\n sm: 'p-3',\n md: 'p-5',\n lg: 'p-6',\n}\n\nconst iconSizeStyles = {\n sm: 'h-6 w-6',\n md: 'h-8 w-8',\n lg: 'h-10 w-10',\n}\n\nexport function SelectionCard({\n icon: Icon,\n label,\n description,\n selected = false,\n onClick,\n variant = 'default',\n size = 'md',\n className,\n}: SelectionCardProps) {\n
|
|
1
|
+
{"version":3,"file":"index58.js","sources":["../src/components/SelectionCard/SelectionCard.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { CheckIcon } from '@heroicons/react/20/solid'\nimport type { ComponentType, SVGProps } from 'react'\n\nexport interface SelectionCardProps {\n icon?: ComponentType<SVGProps<SVGSVGElement>>\n label: string\n description?: string\n selected?: boolean\n onClick?: () => void\n variant?: 'default' | 'branded'\n size?: 'sm' | 'md' | 'lg'\n interactive?: boolean\n className?: string\n}\n\nconst sizeStyles = {\n sm: 'p-3',\n md: 'p-5',\n lg: 'p-6',\n}\n\nconst iconSizeStyles = {\n sm: 'h-6 w-6',\n md: 'h-8 w-8',\n lg: 'h-10 w-10',\n}\n\nconst labelSizeStyles = {\n sm: 'text-sm',\n md: 'text-sm',\n lg: 'text-base',\n}\n\nconst descriptionSizeStyles = {\n sm: 'text-xs',\n md: 'text-xs',\n lg: 'text-sm',\n}\n\nexport function SelectionCard({\n icon: Icon,\n label,\n description,\n selected = false,\n onClick,\n variant = 'default',\n size = 'md',\n interactive = true,\n className,\n}: SelectionCardProps) {\n const Component = interactive ? 'button' : 'div'\n\n const interactiveProps = interactive\n ? { type: 'button' as const, role: 'radio' as const, 'aria-checked': selected, onClick }\n : {}\n\n return (\n <Component\n {...interactiveProps}\n className={cn(\n 'relative rounded-xl border-2 transition-all text-center w-full',\n sizeStyles[size],\n interactive && 'cursor-pointer',\n selected\n ? 'bg-primary-50 border-primary-300 ring-1 ring-primary-200'\n : variant === 'branded'\n ? 'bg-primary-50/50 border-primary-200'\n : 'bg-slate-50 border-slate-200',\n !selected && interactive && (\n variant === 'branded'\n ? 'hover:border-primary-300 hover:bg-primary-50'\n : 'hover:border-slate-300 hover:bg-slate-100'\n ),\n className\n )}\n >\n {selected && (\n <span className=\"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white\">\n <CheckIcon className=\"h-3.5 w-3.5\" />\n </span>\n )}\n\n <div className=\"flex flex-col items-center gap-2\">\n {Icon && (\n <Icon\n className={cn(\n iconSizeStyles[size],\n selected ? 'text-primary-600' : variant === 'branded' ? 'text-primary-400' : 'text-slate-400'\n )}\n />\n )}\n <span\n className={cn(\n 'font-semibold',\n labelSizeStyles[size],\n selected ? 'text-primary-600' : 'text-slate-800'\n )}\n >\n {label}\n </span>\n {description && (\n <span className={cn(descriptionSizeStyles[size], 'text-slate-500')}>{description}</span>\n )}\n </div>\n </Component>\n )\n}\n"],"names":["sizeStyles","iconSizeStyles","labelSizeStyles","descriptionSizeStyles","SelectionCard","Icon","label","description","selected","onClick","variant","size","interactive","className","jsxs","cn","jsx","CheckIcon"],"mappings":";;;AAgBA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAc;AAAA,EAC5B,MAAMC;AAAA,EACN,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC;AACF,GAAuB;AAOrB,SACE,gBAAAC;AAAA,IAPgBF,IAAc,WAAW;AAAA,IAOxC;AAAA,MACE,GANoBA,IACrB,EAAE,MAAM,UAAmB,MAAM,SAAkB,gBAAgBJ,GAAU,SAAAC,EAAA,IAC7E,CAAA;AAAA,MAKA,WAAWM;AAAA,QACT;AAAA,QACAf,EAAWW,CAAI;AAAA,QACfC,KAAe;AAAA,QACfJ,IACI,6DACAE,MAAY,YACV,wCACA;AAAA,QACN,CAACF,KAAYI,MACXF,MAAY,YACR,iDACA;AAAA,QAENG;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAL,KACC,gBAAAQ,EAAC,UAAK,WAAU,0GACd,4BAACC,GAAA,EAAU,WAAU,eAAc,EAAA,CACrC;AAAA,QAGF,gBAAAH,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAT,KACC,gBAAAW;AAAA,YAACX;AAAA,YAAA;AAAA,cACC,WAAWU;AAAA,gBACTd,EAAeU,CAAI;AAAA,gBACnBH,IAAW,qBAAqBE,MAAY,YAAY,qBAAqB;AAAA,cAAA;AAAA,YAC/E;AAAA,UAAA;AAAA,UAGJ,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAb,EAAgBS,CAAI;AAAA,gBACpBH,IAAW,qBAAqB;AAAA,cAAA;AAAA,cAGjC,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFC,KACC,gBAAAS,EAAC,QAAA,EAAK,WAAWD,EAAGZ,EAAsBQ,CAAI,GAAG,gBAAgB,GAAI,UAAAJ,EAAA,CAAY;AAAA,QAAA,EAAA,CAErF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|