@capy-vn/ui 0.1.0 → 0.1.2
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/README.md +51 -61
- package/dist/index.browser.js +83 -61
- package/dist/index.cjs +83 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +83 -61
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2997,16 +2997,16 @@ function NavDesktopLink({ link }) {
|
|
|
2997
2997
|
variant: "ghost",
|
|
2998
2998
|
size: "sm",
|
|
2999
2999
|
className: cn(
|
|
3000
|
-
"gap-1",
|
|
3001
|
-
link.active && "text-foreground"
|
|
3000
|
+
"gap-1.5 text-muted-foreground hover:bg-transparent hover:text-foreground",
|
|
3001
|
+
link.active && "text-foreground font-medium"
|
|
3002
3002
|
),
|
|
3003
3003
|
children: [
|
|
3004
3004
|
link.label,
|
|
3005
|
-
/* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-
|
|
3005
|
+
/* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-50", "aria-hidden": "true" })
|
|
3006
3006
|
]
|
|
3007
3007
|
}
|
|
3008
3008
|
) }),
|
|
3009
|
-
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "
|
|
3009
|
+
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "center", children: link.children.map((child) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: !!child.href, children: child.href ? /* @__PURE__ */ jsx(
|
|
3010
3010
|
"a",
|
|
3011
3011
|
{
|
|
3012
3012
|
href: child.href,
|
|
@@ -3025,7 +3025,10 @@ function NavDesktopLink({ link }) {
|
|
|
3025
3025
|
variant: "ghost",
|
|
3026
3026
|
size: "sm",
|
|
3027
3027
|
asChild: !!link.href,
|
|
3028
|
-
className: cn(
|
|
3028
|
+
className: cn(
|
|
3029
|
+
"text-muted-foreground hover:bg-transparent hover:text-foreground",
|
|
3030
|
+
link.active && "text-foreground font-medium"
|
|
3031
|
+
),
|
|
3029
3032
|
onClick: !link.href ? link.onClick : void 0,
|
|
3030
3033
|
children: link.href ? /* @__PURE__ */ jsx(
|
|
3031
3034
|
"a",
|
|
@@ -3057,9 +3060,9 @@ function NavMobileLink({
|
|
|
3057
3060
|
onClose();
|
|
3058
3061
|
};
|
|
3059
3062
|
const baseClass = cn(
|
|
3060
|
-
"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
|
3063
|
+
"flex w-full items-center justify-between rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
|
|
3061
3064
|
"hover:bg-accent hover:text-accent-foreground",
|
|
3062
|
-
link.active
|
|
3065
|
+
link.active ? "text-foreground bg-accent/60" : "text-muted-foreground",
|
|
3063
3066
|
depth > 0 && "pl-6 font-normal"
|
|
3064
3067
|
);
|
|
3065
3068
|
return /* @__PURE__ */ jsxs("li", { children: [
|
|
@@ -3083,7 +3086,7 @@ function NavMobileLink({
|
|
|
3083
3086
|
ChevronDown,
|
|
3084
3087
|
{
|
|
3085
3088
|
className: cn(
|
|
3086
|
-
"h-4 w-4 opacity-
|
|
3089
|
+
"h-4 w-4 opacity-50 transition-transform",
|
|
3087
3090
|
open && "rotate-180"
|
|
3088
3091
|
),
|
|
3089
3092
|
"aria-hidden": "true"
|
|
@@ -3110,8 +3113,7 @@ var PublicNavbar = React50.forwardRef(
|
|
|
3110
3113
|
const [scrolled, setScrolled] = React50.useState(false);
|
|
3111
3114
|
const [sheetOpen, setSheetOpen] = React50.useState(false);
|
|
3112
3115
|
React50.useEffect(() => {
|
|
3113
|
-
|
|
3114
|
-
const handler = () => setScrolled(window.scrollY > transparentThreshold);
|
|
3116
|
+
const handler = () => setScrolled(window.scrollY > (transparent ? transparentThreshold : 10));
|
|
3115
3117
|
window.addEventListener("scroll", handler, { passive: true });
|
|
3116
3118
|
handler();
|
|
3117
3119
|
return () => window.removeEventListener("scroll", handler);
|
|
@@ -3126,41 +3128,52 @@ var PublicNavbar = React50.forwardRef(
|
|
|
3126
3128
|
{
|
|
3127
3129
|
ref,
|
|
3128
3130
|
className: cn(
|
|
3129
|
-
"z-50 w-full transition-all duration-
|
|
3131
|
+
"z-50 w-full transition-all duration-300",
|
|
3130
3132
|
sticky && "sticky top-0",
|
|
3131
|
-
isTransparent ? "bg-transparent" :
|
|
3133
|
+
isTransparent ? "bg-transparent" : cn(
|
|
3134
|
+
"border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
|
|
3135
|
+
scrolled && "shadow-sm"
|
|
3136
|
+
),
|
|
3132
3137
|
className
|
|
3133
3138
|
),
|
|
3134
3139
|
...props,
|
|
3135
|
-
children: /* @__PURE__ */ jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxs("div", { className: "
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
) }),
|
|
3151
|
-
/* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col", children: [
|
|
3152
|
-
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: mobileMenuTitle }) }),
|
|
3153
|
-
links && links.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mt-4 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: links.map((link) => /* @__PURE__ */ jsx(
|
|
3154
|
-
NavMobileLink,
|
|
3140
|
+
children: /* @__PURE__ */ jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxs("div", { className: "grid h-16 grid-cols-[auto_1fr_auto] items-center gap-4", children: [
|
|
3141
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
|
|
3142
|
+
/* @__PURE__ */ jsx(
|
|
3143
|
+
"nav",
|
|
3144
|
+
{
|
|
3145
|
+
className: "hidden items-center justify-center gap-0.5 md:flex",
|
|
3146
|
+
"aria-label": "Main navigation",
|
|
3147
|
+
children: (links ?? []).map((link) => /* @__PURE__ */ jsx(NavDesktopLink, { link }, link.label))
|
|
3148
|
+
}
|
|
3149
|
+
),
|
|
3150
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3151
|
+
cta && /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-3 md:flex", children: cta }),
|
|
3152
|
+
/* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: handleSheetOpen, children: [
|
|
3153
|
+
/* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
3154
|
+
Button,
|
|
3155
3155
|
{
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3156
|
+
variant: "ghost",
|
|
3157
|
+
size: "icon",
|
|
3158
|
+
"aria-label": "M\u1EDF menu",
|
|
3159
|
+
className: "h-9 w-9",
|
|
3160
|
+
children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5", "aria-hidden": "true" })
|
|
3161
|
+
}
|
|
3162
|
+
) }),
|
|
3163
|
+
/* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "flex flex-col w-72", children: [
|
|
3164
|
+
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: mobileMenuTitle }) }),
|
|
3165
|
+
links && links.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mt-4 flex-1", "aria-label": "Mobile navigation", children: /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: links.map((link) => /* @__PURE__ */ jsx(
|
|
3166
|
+
NavMobileLink,
|
|
3167
|
+
{
|
|
3168
|
+
link,
|
|
3169
|
+
onClose: () => handleSheetOpen(false)
|
|
3170
|
+
},
|
|
3171
|
+
link.label
|
|
3172
|
+
)) }) }),
|
|
3173
|
+
cta && /* @__PURE__ */ jsx("div", { className: "mt-auto border-t pt-4", children: cta })
|
|
3174
|
+
] })
|
|
3175
|
+
] }) })
|
|
3176
|
+
] })
|
|
3164
3177
|
] }) })
|
|
3165
3178
|
}
|
|
3166
3179
|
);
|
|
@@ -3194,31 +3207,40 @@ var PublicFooter = React50.forwardRef(
|
|
|
3194
3207
|
ref,
|
|
3195
3208
|
className: cn("border-t bg-background", className),
|
|
3196
3209
|
...props,
|
|
3197
|
-
children: /* @__PURE__ */ jsxs(Container, { size: containerSize, className: "py-
|
|
3198
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
3199
|
-
(logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "flex
|
|
3210
|
+
children: /* @__PURE__ */ jsxs(Container, { size: containerSize, className: "py-14", children: [
|
|
3211
|
+
(logo || tagline || linkGroups && linkGroups.length > 0) && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 md:grid-cols-[2fr_3fr] md:gap-16", children: [
|
|
3212
|
+
(logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
3200
3213
|
logo,
|
|
3201
|
-
tagline && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tagline })
|
|
3214
|
+
tagline && /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: tagline })
|
|
3202
3215
|
] }),
|
|
3203
|
-
linkGroups && linkGroups.length > 0 && /* @__PURE__ */ jsx(
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
className: "text-sm
|
|
3212
|
-
children: link
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
+
linkGroups && linkGroups.length > 0 && /* @__PURE__ */ jsx(
|
|
3217
|
+
"div",
|
|
3218
|
+
{
|
|
3219
|
+
className: cn(
|
|
3220
|
+
"grid gap-8",
|
|
3221
|
+
linkGroups.length === 1 ? "grid-cols-1" : linkGroups.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
|
|
3222
|
+
),
|
|
3223
|
+
children: linkGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
|
|
3224
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-wide", children: group.heading }),
|
|
3225
|
+
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
3226
|
+
"a",
|
|
3227
|
+
{
|
|
3228
|
+
href: link.href,
|
|
3229
|
+
target: link.external ? "_blank" : void 0,
|
|
3230
|
+
rel: link.external ? "noopener noreferrer" : void 0,
|
|
3231
|
+
className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
|
|
3232
|
+
children: link.label
|
|
3233
|
+
}
|
|
3234
|
+
) }, link.href)) })
|
|
3235
|
+
] }, group.heading))
|
|
3236
|
+
}
|
|
3237
|
+
)
|
|
3216
3238
|
] }),
|
|
3217
|
-
newsletter && /* @__PURE__ */ jsx("div", { className: "mt-10", children: newsletter }),
|
|
3239
|
+
newsletter && /* @__PURE__ */ jsx("div", { className: cn((logo || tagline || linkGroups?.length) && "mt-10"), children: newsletter }),
|
|
3218
3240
|
/* @__PURE__ */ jsx(Separator, { className: "my-8" }),
|
|
3219
|
-
/* @__PURE__ */ jsxs("div", { className: "flex flex-
|
|
3241
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
|
|
3220
3242
|
copyright && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyright }),
|
|
3221
|
-
socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-
|
|
3243
|
+
socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: socialLinks.map((social) => {
|
|
3222
3244
|
const Icon2 = socialIconMap[social.platform];
|
|
3223
3245
|
return /* @__PURE__ */ jsx(
|
|
3224
3246
|
"a",
|
|
@@ -3227,7 +3249,7 @@ var PublicFooter = React50.forwardRef(
|
|
|
3227
3249
|
target: "_blank",
|
|
3228
3250
|
rel: "noopener noreferrer",
|
|
3229
3251
|
"aria-label": social.label ?? social.platform,
|
|
3230
|
-
className: "flex h-
|
|
3252
|
+
className: "flex h-9 w-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
|
|
3231
3253
|
children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
3232
3254
|
},
|
|
3233
3255
|
social.platform
|