@getgreenline/blaze-ui 1.0.49-beta.0 → 1.0.49-beta.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/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +2 -2
- package/dist/components/badge.js +6 -6
- package/dist/components/button-group.js +5 -5
- package/dist/components/button.js +10 -10
- package/dist/components/chart.js +3 -3
- package/dist/components/command.js +4 -4
- package/dist/components/context-menu.js +2 -2
- package/dist/components/data-table.js +8 -8
- package/dist/components/dialog.js +2 -2
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown-menu.js +6 -6
- package/dist/components/field.js +14 -14
- package/dist/components/form.js +1 -1
- package/dist/components/header-app-switcher.js +2 -2
- package/dist/components/hierarchical-select.js +3 -3
- package/dist/components/hover-card.js +1 -1
- package/dist/components/item.js +6 -6
- package/dist/components/login-screen.js +3 -3
- package/dist/components/login-screen.views.js +3 -3
- package/dist/components/menubar.js +1 -1
- package/dist/components/multi-search-select.js +3 -3
- package/dist/components/multi-select.js +3 -3
- package/dist/components/navigation-menu.js +6 -6
- package/dist/components/pagination.js +3 -3
- package/dist/components/popover.js +1 -1
- package/dist/components/resizable.js +2 -2
- package/dist/components/search-bar.js +1 -1
- package/dist/components/select.js +4 -4
- package/dist/components/sheet.js +2 -2
- package/dist/components/sidebar.js +25 -25
- package/dist/components/slider.js +2 -2
- package/dist/components/table.js +6 -6
- package/dist/components/tabs.js +1 -1
- package/dist/components/toggle-group.js +2 -2
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/package.json +1 -1
package/dist/components/item.js
CHANGED
|
@@ -10,7 +10,7 @@ function ItemGroup({ className, ...props }) {
|
|
|
10
10
|
function ItemSeparator({ className, ...props }) {
|
|
11
11
|
return (jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("tw:my-0", className), ...props }));
|
|
12
12
|
}
|
|
13
|
-
const itemVariants = cva("group/item tw:flex tw:items-center tw:border tw:border-transparent tw:text-sm tw:rounded-md tw:transition-colors [a]:hover:
|
|
13
|
+
const itemVariants = cva("group/item tw:flex tw:items-center tw:border tw:border-transparent tw:text-sm tw:rounded-md tw:transition-colors tw:[a]:hover:bg-accent/50 tw:[a]:transition-colors tw:duration-100 tw:flex-wrap tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", {
|
|
14
14
|
variants: {
|
|
15
15
|
variant: {
|
|
16
16
|
default: "tw:bg-transparent",
|
|
@@ -31,12 +31,12 @@ function Item({ className, variant = "default", size = "default", asChild = fals
|
|
|
31
31
|
const Comp = asChild ? Slot : "div";
|
|
32
32
|
return (jsx(Comp, { "data-slot": "item", "data-variant": variant, "data-size": size, className: cn(itemVariants({ variant, size, className })), ...props }));
|
|
33
33
|
}
|
|
34
|
-
const itemMediaVariants = cva("tw:flex tw:shrink-0 tw:items-center tw:justify-center tw:gap-2 group-has-[[data-slot=item-description]]/item:
|
|
34
|
+
const itemMediaVariants = cva("tw:flex tw:shrink-0 tw:items-center tw:justify-center tw:gap-2 tw:group-has-[[data-slot=item-description]]/item:self-start tw:[&_svg]:pointer-events-none tw:group-has-[[data-slot=item-description]]/item:translate-y-0.5", {
|
|
35
35
|
variants: {
|
|
36
36
|
variant: {
|
|
37
37
|
default: "tw:bg-transparent",
|
|
38
|
-
icon: "tw:size-8 tw:border tw:rounded-sm tw:bg-muted [&_svg:not([class*='size-'])]:
|
|
39
|
-
image: "tw:size-10 tw:rounded-sm tw:overflow-hidden [&_img]:
|
|
38
|
+
icon: "tw:size-8 tw:border tw:rounded-sm tw:bg-muted tw:[&_svg:not([class*='size-'])]:size-4",
|
|
39
|
+
image: "tw:size-10 tw:rounded-sm tw:overflow-hidden tw:[&_img]:size-full tw:[&_img]:object-cover",
|
|
40
40
|
},
|
|
41
41
|
},
|
|
42
42
|
defaultVariants: {
|
|
@@ -47,13 +47,13 @@ function ItemMedia({ className, variant = "default", ...props }) {
|
|
|
47
47
|
return (jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function ItemContent({ className, ...props }) {
|
|
50
|
-
return (jsx("div", { "data-slot": "item-content", className: cn("tw:flex tw:flex-1 tw:flex-col tw:gap-1 [&+[data-slot=item-content]]:
|
|
50
|
+
return (jsx("div", { "data-slot": "item-content", className: cn("tw:flex tw:flex-1 tw:flex-col tw:gap-1 tw:[&+[data-slot=item-content]]:flex-none", className), ...props }));
|
|
51
51
|
}
|
|
52
52
|
function ItemTitle({ className, ...props }) {
|
|
53
53
|
return (jsx("div", { "data-slot": "item-title", className: cn("tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium", className), ...props }));
|
|
54
54
|
}
|
|
55
55
|
function ItemDescription({ className, ...props }) {
|
|
56
|
-
return (jsx("p", { "data-slot": "item-description", className: cn("tw:text-muted-foreground tw:line-clamp-2 tw:text-sm tw:leading-normal tw:font-normal tw:text-balance", "[&>a:hover]:
|
|
56
|
+
return (jsx("p", { "data-slot": "item-description", className: cn("tw:text-muted-foreground tw:line-clamp-2 tw:text-sm tw:leading-normal tw:font-normal tw:text-balance", "tw:[&>a:hover]:text-primary tw:[&>a]:underline tw:[&>a]:underline-offset-4", className), ...props }));
|
|
57
57
|
}
|
|
58
58
|
function ItemActions({ className, ...props }) {
|
|
59
59
|
return (jsx("div", { "data-slot": "item-actions", className: cn("tw:flex tw:items-center tw:gap-2", className), ...props }));
|
|
@@ -290,11 +290,11 @@ function LoginScreen({ className, splitLayout = true, splitImageWidthPercent = 4
|
|
|
290
290
|
};
|
|
291
291
|
}, [mode, resendCountdown]);
|
|
292
292
|
const modeView = mode === "sign-in" ? (jsx(SignInView, { tabs: tabs, activeTabId: activeTabId, tabListRef: tabListRef, onTabClick: (tab) => handleTabClick(tab), onTabKeyDown: handleTabKeyDown, identifierId: identifierId, identifierLabel: resolvedIdentifierLabel, identifierType: getIdentifierInputType(identifierMode), identifierPlaceholder: resolvedIdentifierPlaceholder, identifier: identifier, onIdentifierChange: setIdentifier, passwordId: passwordId, passwordLabel: passwordLabel, passwordPlaceholder: passwordPlaceholder, password: password, onPasswordChange: setPassword, showPassword: showPassword, onTogglePassword: () => setShowPassword((previous) => !previous), rememberId: rememberId, rememberMe: rememberMe, onRememberMeChange: setRememberMe, rememberMeLabel: rememberMeLabel, forgotPasswordLabel: forgotPasswordLabel, onForgotPasswordClick: handleForgotPasswordClick, isSubmitting: isSubmitting, submitLabel: submitLabel, submitLoadingLabel: submitLoadingLabel, onSubmit: handleSignInSubmit, ssoLabel: ssoLabel, ssoButtonLabel: ssoButtonLabel, onSsoClick: handleSsoClick, legalNotice: legalNotice ?? DEFAULT_LEGAL_NOTICE, logo: logo, logoLoadError: logoLoadError, onLogoError: () => setLogoLoadError(true), title: title, description: description, autoCompleteIdentifier: identifierMode === "phone" ? "tel" : "email" })) : mode === "forgot-password" ? (jsx(ForgotPasswordView, { title: forgotPasswordTitle, description: forgotPasswordDescription, emailId: forgotEmailId, emailLabel: forgotPasswordEmailLabel, email: forgotEmail, onEmailChange: setForgotEmail, emailPlaceholder: forgotPasswordEmailPlaceholder, submitLabel: forgotPasswordSubmitLabel, backLabel: forgotPasswordBackLabel, isSubmitting: isForgotPasswordSubmitting, onSubmit: handleForgotPasswordSubmit, onBack: handleBackToSignIn, error: forgotPasswordError })) : mode === "forgot-password-sent" ? (jsx(ForgotPasswordSentView, { backAriaLabel: ssoEmailBackAriaLabel, onBack: handleBackToSignIn, title: forgotPasswordSentTitle, descriptionPrefix: forgotPasswordSentDescriptionPrefix, email: forgotEmail, instructions: forgotPasswordSentInstructions, resendLabel: forgotPasswordResendLabel, resendCountdown: resendCountdown, onResend: handleResendEmail, isResending: isResending, error: forgotPasswordError, backLabel: forgotPasswordBackLabel })) : (jsx(SsoEmailView, { backAriaLabel: ssoEmailBackAriaLabel, onBack: () => setMode("sign-in"), title: ssoEmailTitle, description: ssoEmailDescription, emailId: ssoEmailId, emailLabel: ssoEmailLabel, email: ssoEmail, onEmailChange: setSsoEmail, emailPlaceholder: ssoEmailPlaceholder, submitLabel: ssoEmailSubmitLabel, isSubmitting: isSsoSubmitting, onSubmit: handleSsoEmailSubmit, hint: ssoEmailHint }));
|
|
293
|
-
const content = (jsxs("div", { className: "tw:w-full tw:max-w-md", children: [jsx("div", { className: "tw:rounded-xl tw:border tw:border-border tw:bg-card tw:p-6 tw:shadow-sm sm:
|
|
293
|
+
const content = (jsxs("div", { className: "tw:w-full tw:max-w-md", children: [jsx("div", { className: "tw:rounded-xl tw:border tw:border-border tw:bg-card tw:p-6 tw:shadow-sm tw:sm:p-8", children: jsx("div", { className: "tw:flex tw:flex-col tw:gap-8", children: modeView }) }), jsx(FooterLinks, { links: footerLinks })] }));
|
|
294
294
|
if (!splitLayout) {
|
|
295
|
-
return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsx("div", { className: "tw:flex tw:min-h-svh tw:w-full tw:items-center tw:justify-center tw:p-6 sm:
|
|
295
|
+
return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsx("div", { className: "tw:flex tw:min-h-svh tw:w-full tw:items-center tw:justify-center tw:p-6 tw:sm:p-12", children: content }) }));
|
|
296
296
|
}
|
|
297
|
-
return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsxs("div", { className: "tw:flex tw:min-h-svh tw:w-full", children: [shouldShowSplitPane ? (jsx(SplitMediaPane, { widthPercent: imageWidth, hasSplitImage: hasSplitImage, imageSrc: imageSrc, imageAlt: imageAlt, onImageError: () => setImageLoadError(true), overlayOpacity: overlayOpacity, imageOverlayContent: imageOverlayContent, testimonial: resolvedTestimonial })) : null, jsx("div", { className: cn("tw:flex tw:w-full tw:items-center tw:justify-center tw:p-6 sm:
|
|
297
|
+
return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsxs("div", { className: "tw:flex tw:min-h-svh tw:w-full", children: [shouldShowSplitPane ? (jsx(SplitMediaPane, { widthPercent: imageWidth, hasSplitImage: hasSplitImage, imageSrc: imageSrc, imageAlt: imageAlt, onImageError: () => setImageLoadError(true), overlayOpacity: overlayOpacity, imageOverlayContent: imageOverlayContent, testimonial: resolvedTestimonial })) : null, jsx("div", { className: cn("tw:flex tw:w-full tw:items-center tw:justify-center tw:p-6 tw:sm:p-12", shouldShowSplitPane && "tw:flex-1"), children: content })] }) }));
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
export { LoginScreen };
|
|
@@ -25,8 +25,8 @@ function SignInView({ tabs, activeTabId, tabListRef, onTabClick, onTabKeyDown, i
|
|
|
25
25
|
const isActive = tab.id === activeTabId;
|
|
26
26
|
return (jsx("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-disabled": tab.disabled, tabIndex: isActive ? 0 : -1, disabled: tab.disabled, onClick: () => onTabClick(tab), onKeyDown: (event) => onTabKeyDown(event, index), className: cn("tw:flex-1 tw:rounded-md tw:px-3 tw:py-2 tw:text-sm tw:font-medium tw:transition-colors", "tw:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-2", isActive
|
|
27
27
|
? "tw:bg-background tw:text-foreground tw:shadow-sm"
|
|
28
|
-
: "tw:text-muted-foreground hover:
|
|
29
|
-
}) })) : null, jsxs("form", { onSubmit: onSubmit, className: "tw:flex tw:flex-col tw:gap-5", children: [jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [jsx(Label, { htmlFor: identifierId, children: identifierLabel }), jsx(Input, { id: identifierId, type: identifierType, placeholder: identifierPlaceholder, value: identifier, onChange: (event) => onIdentifierChange(event.target.value), autoComplete: autoCompleteIdentifier, className: "tw:h-12", disabled: isSubmitting, required: true })] }), jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [jsx(Label, { htmlFor: passwordId, children: passwordLabel }), jsxs("div", { className: "tw:relative", children: [jsx(Input, { id: passwordId, type: showPassword ? "text" : "password", placeholder: passwordPlaceholder, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "current-password", className: "tw:h-12 tw:pr-10", disabled: isSubmitting, required: true }), jsx("button", { type: "button", className: "tw:absolute tw:right-3 tw:top-1/2 tw:-translate-y-1/2 tw:text-muted-foreground hover:
|
|
28
|
+
: "tw:text-muted-foreground tw:hover:text-foreground", tab.disabled && "tw:cursor-not-allowed tw:opacity-50"), children: tab.label }, tab.id));
|
|
29
|
+
}) })) : null, jsxs("form", { onSubmit: onSubmit, className: "tw:flex tw:flex-col tw:gap-5", children: [jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [jsx(Label, { htmlFor: identifierId, children: identifierLabel }), jsx(Input, { id: identifierId, type: identifierType, placeholder: identifierPlaceholder, value: identifier, onChange: (event) => onIdentifierChange(event.target.value), autoComplete: autoCompleteIdentifier, className: "tw:h-12", disabled: isSubmitting, required: true })] }), jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [jsx(Label, { htmlFor: passwordId, children: passwordLabel }), jsxs("div", { className: "tw:relative", children: [jsx(Input, { id: passwordId, type: showPassword ? "text" : "password", placeholder: passwordPlaceholder, value: password, onChange: (event) => onPasswordChange(event.target.value), autoComplete: "current-password", className: "tw:h-12 tw:pr-10", disabled: isSubmitting, required: true }), jsx("button", { type: "button", className: "tw:absolute tw:right-3 tw:top-1/2 tw:-translate-y-1/2 tw:text-muted-foreground tw:hover:text-foreground", onClick: onTogglePassword, "aria-label": showPassword ? "Hide password" : "Show password", children: showPassword ? (jsx(EyeOff, { className: "tw:size-4" })) : (jsx(Eye, { className: "tw:size-4" })) })] })] }), jsxs("div", { className: "tw:flex tw:items-center tw:justify-between", children: [jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [jsx(Checkbox, { id: rememberId, checked: rememberMe, onCheckedChange: (checked) => onRememberMeChange(checked === true), disabled: isSubmitting }), jsx(Label, { htmlFor: rememberId, className: "tw:cursor-pointer tw:text-sm tw:font-normal", children: rememberMeLabel })] }), jsx("button", { type: "button", className: "tw:text-sm tw:text-primary tw:hover:underline", onClick: onForgotPasswordClick, disabled: isSubmitting, children: forgotPasswordLabel })] }), jsx(Button, { type: "submit", className: "tw:h-12 tw:w-full", loading: isSubmitting, loadingText: submitLoadingLabel, disabled: !identifier.trim() || !password.trim(), children: submitLabel })] }), ssoLabel !== null ? (jsxs(Fragment, { children: [jsxs("div", { className: "tw:relative", children: [jsx("div", { className: "tw:absolute tw:inset-0 tw:flex tw:items-center", children: jsx("span", { className: "tw:w-full tw:border-t tw:border-border" }) }), jsx("div", { className: "tw:relative tw:flex tw:justify-center tw:text-xs tw:uppercase", children: jsx("span", { className: "tw:bg-card tw:px-2 tw:text-muted-foreground", children: ssoLabel }) })] }), jsxs(Button, { type: "button", variant: "outline", className: "tw:h-12 tw:w-full", onClick: onSsoClick, disabled: isSubmitting, children: [jsx(Building2, { className: "tw:size-4" }), ssoButtonLabel] })] })) : null, jsx("p", { className: "tw:text-center tw:text-xs tw:text-muted-foreground", children: legalNotice })] }));
|
|
30
30
|
}
|
|
31
31
|
function ForgotPasswordView({ title, description, emailId, emailLabel, email, onEmailChange, emailPlaceholder, submitLabel, backLabel, isSubmitting, onSubmit, onBack, error, }) {
|
|
32
32
|
return (jsxs("form", { onSubmit: onSubmit, className: "tw:flex tw:flex-col tw:gap-5", children: [jsxs("div", { className: "tw:space-y-2 tw:text-center", children: [jsx("h2", { className: "tw:text-xl tw:font-semibold", children: title }), jsx("p", { className: "tw:text-sm tw:text-muted-foreground", children: description })] }), jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [jsx(Label, { htmlFor: emailId, children: emailLabel }), jsx(Input, { id: emailId, type: "email", value: email, onChange: (event) => onEmailChange(event.target.value), placeholder: emailPlaceholder, autoComplete: "email", className: "tw:h-12", disabled: isSubmitting, required: true })] }), jsx(Button, { type: "submit", className: "tw:h-12 tw:w-full", loading: isSubmitting, loadingText: submitLabel, disabled: !email.trim(), children: submitLabel }), error ? (jsx("p", { className: "tw:text-center tw:text-sm tw:text-destructive", children: error })) : null, jsx(Button, { type: "button", variant: "ghost", className: "tw:w-full", onClick: onBack, disabled: isSubmitting, children: backLabel })] }));
|
|
@@ -47,7 +47,7 @@ function FooterLinks({ links }) {
|
|
|
47
47
|
if (links.length === 0) {
|
|
48
48
|
return null;
|
|
49
49
|
}
|
|
50
|
-
return (jsx("div", { className: "tw:mt-6 tw:flex tw:flex-wrap tw:items-center tw:justify-center tw:gap-4 tw:text-xs tw:text-muted-foreground", children: links.map((link, index) => (jsxs(React.Fragment, { children: [index > 0 ? jsx("span", { "aria-hidden": "true", children: "·" }) : null, jsx("a", { href: link.href, ...getLinkAttributes(link.external), className: "hover:
|
|
50
|
+
return (jsx("div", { className: "tw:mt-6 tw:flex tw:flex-wrap tw:items-center tw:justify-center tw:gap-4 tw:text-xs tw:text-muted-foreground", children: links.map((link, index) => (jsxs(React.Fragment, { children: [index > 0 ? jsx("span", { "aria-hidden": "true", children: "·" }) : null, jsx("a", { href: link.href, ...getLinkAttributes(link.external), className: "tw:hover:text-foreground tw:hover:underline", children: link.label })] }, `${link.label}-${index}`))) }));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
export { BrandHeader, FooterLinks, ForgotPasswordSentView, ForgotPasswordView, SignInView, SplitMediaPane, SsoEmailView };
|
|
@@ -49,7 +49,7 @@ function MenubarSubTrigger({ className, inset, children, ...props }) {
|
|
|
49
49
|
return (jsxs(MenubarPrimitive.SubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[state=open]:bg-accent tw:data-[state=open]:text-accent-foreground tw:flex tw:cursor-default tw:items-center tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-none tw:select-none tw:data-[inset]:pl-8", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "tw:ml-auto tw:h-4 tw:w-4" })] }));
|
|
50
50
|
}
|
|
51
51
|
function MenubarSubContent({ className, ...props }) {
|
|
52
|
-
return (jsx(MenubarPrimitive.SubContent, { "data-slot": "menubar-sub-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--radix-menubar-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg", className), ...props }));
|
|
52
|
+
return (jsx(MenubarPrimitive.SubContent, { "data-slot": "menubar-sub-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--radix-menubar-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg", className), ...props }));
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
|
|
@@ -119,12 +119,12 @@ function MultiSearchSelect({ className, options, value, onValueChange, placehold
|
|
|
119
119
|
setOpen(nextOpen);
|
|
120
120
|
if (!nextOpen)
|
|
121
121
|
setSearch("");
|
|
122
|
-
}, children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", id: triggerId, "data-slot": "multi-search-select-trigger", disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, className: cn("tw:!flex tw:!w-full tw:!min-h-9 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!outline-none", "focus-visible
|
|
122
|
+
}, children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", id: triggerId, "data-slot": "multi-search-select-trigger", disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, className: cn("tw:!flex tw:!w-full tw:!min-h-9 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!outline-none", "tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px]", "tw:disabled:!cursor-not-allowed tw:disabled:!opacity-50", className), ...props, children: [jsx("div", { className: "tw:!flex tw:!min-w-0 tw:!flex-1 tw:!flex-wrap tw:!items-center tw:!gap-1.5", children: selectedOptions.length === 0 ? (jsx("span", { className: "tw:!text-muted-foreground", children: placeholder })) : (jsxs(Fragment, { children: [visibleSelectedOptions.map((option) => (jsxs(Badge, { variant: "secondary", className: "tw:!max-w-full tw:!pr-1", children: [jsx("span", { className: "tw:!max-w-[140px] tw:!truncate", children: option.label }), jsx("button", { type: "button", "aria-label": `Remove ${option.label}`, onClick: (event) => removeValue(option.value, event), className: "tw:!ml-1 tw:!inline-flex tw:!items-center tw:!justify-center", children: jsx(XIcon, { className: "tw:!size-3" }) })] }, option.value))), hiddenSelectedCount > 0 && (jsx("span", { className: "tw:!text-sm tw:!text-muted-foreground tw:!truncate", children: selectedCountText }))] })) }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsxs(PopoverPrimitive.Content, { "data-slot": "multi-search-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!w-[var(--radix-popover-trigger-width)] tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md tw:!outline-none", children: [jsxs("div", { className: "tw:!flex tw:!items-center tw:!gap-2 tw:!border-b tw:!px-3", children: [jsx(SearchIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("input", { id: searchInputId, type: "text", value: search, onChange: (event) => setSearch(event.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "tw:!h-9 tw:!w-full tw:!bg-transparent tw:!text-[14px] tw:!outline-none tw:placeholder:!text-muted-foreground" })] }), jsxs("div", { id: listboxId, role: "listbox", "aria-labelledby": triggerId, "aria-describedby": searchInputId, "aria-multiselectable": "true", className: "tw:!max-h-72 tw:!overflow-y-auto tw:!p-1", children: [shouldShowMinSearchHint ? (jsx("div", { role: "status", "aria-live": "polite", className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: resolvedMinSearchMessage })) : null, isSearching ? (jsx("div", { role: "status", "aria-live": "polite", className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: "Searching..." })) : null, !isSearching &&
|
|
123
123
|
!shouldShowMinSearchHint &&
|
|
124
124
|
filteredOptions.length === 0 ? (jsx("div", { role: "status", "aria-live": "polite", className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : !isSearching ? (filteredOptions.map((option) => {
|
|
125
125
|
const isSelected = value.includes(option.value);
|
|
126
|
-
return (jsxs("button", { type: "button", disabled: option.disabled, role: "option", "aria-selected": isSelected, onClick: () => toggleValue(option.value), className: cn("tw:!flex tw:!w-full tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-left tw:!text-[14px]", "hover
|
|
127
|
-
"tw:!cursor-not-allowed tw:!opacity-50 hover
|
|
126
|
+
return (jsxs("button", { type: "button", disabled: option.disabled, role: "option", "aria-selected": isSelected, onClick: () => toggleValue(option.value), className: cn("tw:!flex tw:!w-full tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-left tw:!text-[14px]", "tw:hover:!bg-accent tw:hover:!text-accent-foreground", option.disabled &&
|
|
127
|
+
"tw:!cursor-not-allowed tw:!opacity-50 tw:hover:!bg-transparent tw:hover:!text-foreground"), children: [jsx("span", { className: cn("tw:!inline-flex tw:!size-4 tw:!items-center tw:!justify-center tw:!rounded-[4px] tw:!border tw:!border-border", isSelected &&
|
|
128
128
|
"tw:!border-primary tw:!bg-primary tw:!text-primary-foreground"), children: isSelected ? jsx(CheckIcon, { className: "tw:!size-3" }) : null }), jsx("span", { className: "tw:!min-w-0 tw:!flex-1 tw:!truncate", children: option.label })] }, option.value));
|
|
129
129
|
})) : null] })] }) })] }));
|
|
130
130
|
}
|
|
@@ -39,10 +39,10 @@ function MultiSelect({ className, options, value, onValueChange, attentionKey, p
|
|
|
39
39
|
: [...value, optionValue];
|
|
40
40
|
onValueChange(nextValue);
|
|
41
41
|
}
|
|
42
|
-
return (jsxs(PopoverPrimitive.Root, { children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-select-trigger", "data-size": size, disabled: disabled, className: cn("tw:!flex tw:!w-fit tw:!min-w-0 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "focus-visible
|
|
42
|
+
return (jsxs(PopoverPrimitive.Root, { children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-select-trigger", "data-size": size, disabled: disabled, className: cn("tw:!flex tw:!w-fit tw:!min-w-0 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px]", "tw:aria-invalid:!border-destructive tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40", "tw:dark:!bg-input/30 tw:dark:hover:!bg-input/50", "tw:disabled:!cursor-not-allowed tw:disabled:!opacity-50", "tw:data-[size=default]:!min-h-9 tw:data-[size=sm]:!min-h-8", isInvalid && "tw:!border-destructive", className), "aria-invalid": isInvalid || undefined, style: attentionProps.style, ...props, children: [jsx("span", { ref: valueRef, "data-slot": "multi-select-value", className: cn("tw:!block tw:!min-w-0 tw:!flex-1 tw:!truncate tw:!text-left", selectedOptions.length === 0 && "tw:!text-muted-foreground"), children: selectedOptions.length === 0 ? placeholder : displayValue }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "multi-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!max-h-72 tw:!min-w-[var(--radix-popover-trigger-width)] tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!p-1 tw:!text-popover-foreground tw:!shadow-md tw:!outline-none tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95", children: options.length === 0 ? (jsx("div", { className: "tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : (options.map((option) => {
|
|
43
43
|
const isSelected = value.includes(option.value);
|
|
44
|
-
return (jsxs("button", { type: "button", "data-slot": "multi-select-item", disabled: option.disabled, className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-left tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover
|
|
45
|
-
"tw:!cursor-not-allowed tw:!bg-muted/50 tw:!text-muted-foreground tw:!opacity-60 hover
|
|
44
|
+
return (jsxs("button", { type: "button", "data-slot": "multi-select-item", disabled: option.disabled, className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-left tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:focus:!bg-accent tw:focus:!text-accent-foreground", option.disabled &&
|
|
45
|
+
"tw:!cursor-not-allowed tw:!bg-muted/50 tw:!text-muted-foreground tw:!opacity-60 tw:hover:!bg-muted/50 tw:hover:!text-muted-foreground"), onClick: () => toggleValue(option.value), children: [jsx("span", { className: "tw:!absolute tw:!right-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: isSelected ? jsx(CheckIcon, { className: "tw:!size-4" }) : null }), jsx("span", { className: "tw:!min-w-0 tw:!flex-1 tw:!truncate", children: option.label })] }, option.value));
|
|
46
46
|
})) }) })] }));
|
|
47
47
|
}
|
|
48
48
|
function getCollapsedDisplayValue(labels, availableWidth, valueElement) {
|
|
@@ -13,21 +13,21 @@ function NavigationMenuList({ className, ...props }) {
|
|
|
13
13
|
function NavigationMenuItem({ className, ...props }) {
|
|
14
14
|
return (jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("tw:relative", className), ...props }));
|
|
15
15
|
}
|
|
16
|
-
const navigationMenuTriggerStyle = cva("tw:group tw:inline-flex tw:h-9 tw:w-max tw:items-center tw:justify-center tw:rounded-md tw:bg-background tw:px-4 tw:py-2 tw:text-sm tw:font-medium hover:
|
|
16
|
+
const navigationMenuTriggerStyle = cva("tw:group tw:inline-flex tw:h-9 tw:w-max tw:items-center tw:justify-center tw:rounded-md tw:bg-background tw:px-4 tw:py-2 tw:text-sm tw:font-medium tw:hover:bg-accent tw:hover:text-accent-foreground tw:focus:bg-accent tw:focus:text-accent-foreground tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:data-[state=open]:hover:bg-accent tw:data-[state=open]:text-accent-foreground tw:data-[state=open]:focus:bg-accent tw:data-[state=open]:bg-accent/50 tw:focus-visible:ring-ring/50 tw:outline-none tw:transition-[color,box-shadow] tw:focus-visible:ring-[3px] tw:focus-visible:outline-1");
|
|
17
17
|
function NavigationMenuTrigger({ className, children, ...props }) {
|
|
18
|
-
return (jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "tw:group", className), ...props, children: [children, " ", jsx(ChevronDownIcon, { className: "tw:relative tw:top-[1px] tw:ml-1 tw:size-3 tw:transition tw:duration-300 group-data-[state=open]:
|
|
18
|
+
return (jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "tw:group", className), ...props, children: [children, " ", jsx(ChevronDownIcon, { className: "tw:relative tw:top-[1px] tw:ml-1 tw:size-3 tw:transition tw:duration-300 tw:group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
|
|
19
19
|
}
|
|
20
20
|
function NavigationMenuContent({ className, ...props }) {
|
|
21
|
-
return (jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("data-[motion^=from-]:
|
|
21
|
+
return (jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("tw:data-[motion^=from-]:animate-in tw:data-[motion^=to-]:animate-out tw:data-[motion^=to-]:fill-mode-forwards tw:data-[motion^=from-]:fade-in tw:data-[motion^=to-]:fade-out tw:data-[motion=from-end]:slide-in-from-right-52 tw:data-[motion=from-start]:slide-in-from-left-52 tw:data-[motion=to-end]:slide-out-to-right-52 tw:data-[motion=to-start]:slide-out-to-left-52 tw:top-0 tw:left-0 tw:w-full tw:p-2 tw:pr-2.5 tw:md:absolute tw:md:w-auto", "tw:group-data-[viewport=false]/navigation-menu:bg-popover tw:group-data-[viewport=false]/navigation-menu:text-popover-foreground tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:fill-mode-forwards tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 tw:group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 tw:group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 tw:group-data-[viewport=false]/navigation-menu:top-full tw:group-data-[viewport=false]/navigation-menu:mt-1.5 tw:group-data-[viewport=false]/navigation-menu:overflow-hidden tw:group-data-[viewport=false]/navigation-menu:rounded-md tw:group-data-[viewport=false]/navigation-menu:border tw:group-data-[viewport=false]/navigation-menu:shadow tw:group-data-[viewport=false]/navigation-menu:duration-200 tw:**:data-[slot=navigation-menu-link]:focus:ring-0 tw:**:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function NavigationMenuViewport({ className, ...props }) {
|
|
24
|
-
return (jsx("div", { className: cn("tw:absolute tw:top-full tw:left-0 tw:isolate tw:z-50 tw:flex tw:justify-center"), children: jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn("tw:origin-top-center tw:bg-popover tw:text-popover-foreground data-[state=open]:
|
|
24
|
+
return (jsx("div", { className: cn("tw:absolute tw:top-full tw:left-0 tw:isolate tw:z-50 tw:flex tw:justify-center"), children: jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn("tw:origin-top-center tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-90 tw:relative tw:mt-1.5 tw:h-[var(--radix-navigation-menu-viewport-height)] tw:w-full tw:overflow-hidden tw:rounded-md tw:border tw:shadow tw:md:w-[var(--radix-navigation-menu-viewport-width)]", className), ...props }) }));
|
|
25
25
|
}
|
|
26
26
|
function NavigationMenuLink({ className, ...props }) {
|
|
27
|
-
return (jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:
|
|
27
|
+
return (jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("tw:data-[active=true]:focus:bg-accent tw:data-[active=true]:hover:bg-accent tw:data-[active=true]:bg-accent/50 tw:data-[active=true]:text-accent-foreground tw:hover:bg-accent tw:hover:text-accent-foreground tw:focus:bg-accent tw:focus:text-accent-foreground tw:focus-visible:ring-ring/50 tw:[&_svg:not([class*='text-'])]:text-muted-foreground tw:flex tw:flex-col tw:gap-1 tw:rounded-sm tw:p-2 tw:text-sm tw:transition-all tw:outline-none tw:focus-visible:ring-[3px] tw:focus-visible:outline-1 tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
28
28
|
}
|
|
29
29
|
function NavigationMenuIndicator({ className, ...props }) {
|
|
30
|
-
return (jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn("data-[state=visible]:
|
|
30
|
+
return (jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn("tw:data-[state=visible]:animate-in tw:data-[state=hidden]:animate-out tw:data-[state=hidden]:fill-mode-forwards tw:data-[state=hidden]:fade-out tw:data-[state=visible]:fade-in tw:top-full tw:z-[1] tw:flex tw:h-1.5 tw:items-end tw:justify-center tw:overflow-hidden", className), ...props, children: jsx("div", { className: "tw:bg-border tw:relative tw:top-[60%] tw:h-2 tw:w-2 tw:rotate-45 tw:rounded-tl-sm tw:shadow-md" }) }));
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
|
|
@@ -16,13 +16,13 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
|
16
16
|
return (jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
|
|
17
17
|
variant: isActive ? "outline" : "ghost",
|
|
18
18
|
size,
|
|
19
|
-
}), "tw:!text-foreground tw:!text-[14px] tw:!no-underline hover
|
|
19
|
+
}), "tw:!text-foreground tw:!text-[14px] tw:!no-underline tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:data-[active=true]:!text-accent-foreground tw:data-[active=true]:!border tw:data-[active=true]:!border-input tw:!h-[32px]", size === "icon" && "tw:!w-[32px]", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function PaginationPrevious({ className, ...props }) {
|
|
22
|
-
return (jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 sm
|
|
22
|
+
return (jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 tw:sm:!pl-2.5 tw:!h-[32px]", className), ...props, children: [jsx(ChevronLeftIcon, { className: "tw:!size-4" }), jsx("span", { className: "tw:!hidden tw:sm:!block", children: "Previous" })] }));
|
|
23
23
|
}
|
|
24
24
|
function PaginationNext({ className, ...props }) {
|
|
25
|
-
return (jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 sm
|
|
25
|
+
return (jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("tw:!gap-1 tw:!px-2.5 tw:sm:!pr-2.5 tw:!h-8", className), ...props, children: [jsx("span", { className: "tw:!hidden tw:sm:!block", children: "Next" }), jsx(ChevronRightIcon, { className: "tw:!size-4" })] }));
|
|
26
26
|
}
|
|
27
27
|
function PaginationEllipsis({ className, ...props }) {
|
|
28
28
|
return (jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("tw:!flex tw:!size-9 tw:!items-center tw:!justify-center", className), ...props, children: [jsx(MoreHorizontalIcon, { className: "tw:!size-4" }), jsx("span", { className: "tw:sr-only", children: "More pages" })] }));
|
|
@@ -9,7 +9,7 @@ function PopoverTrigger({ ...props }) {
|
|
|
9
9
|
return jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
10
10
|
}
|
|
11
11
|
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
12
|
-
return (jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground data-[state=open]
|
|
12
|
+
return (jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95 tw:data-[side=bottom]:!slide-in-from-top-2 tw:data-[side=left]:!slide-in-from-right-2 tw:data-[side=right]:!slide-in-from-left-2 tw:data-[side=top]:!slide-in-from-bottom-2 tw:!z-50 tw:!w-72 tw:!origin-(--radix-popover-content-transform-origin) tw:!rounded-md tw:!border tw:!p-4 tw:!shadow-md tw:!outline-hidden", className), ...props }) }));
|
|
13
13
|
}
|
|
14
14
|
function PopoverAnchor({ ...props }) {
|
|
15
15
|
return jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
@@ -4,13 +4,13 @@ import { Separator, Panel, Group } from 'react-resizable-panels';
|
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
|
|
6
6
|
function ResizablePanelGroup({ className, ...props }) {
|
|
7
|
-
return (jsx(Group, { "data-slot": "resizable-panel-group", className: cn("tw:flex tw:h-full tw:w-full data-[panel-group-direction=vertical]:
|
|
7
|
+
return (jsx(Group, { "data-slot": "resizable-panel-group", className: cn("tw:flex tw:h-full tw:w-full tw:data-[panel-group-direction=vertical]:flex-col", className), ...props }));
|
|
8
8
|
}
|
|
9
9
|
function ResizablePanel({ ...props }) {
|
|
10
10
|
return jsx(Panel, { "data-slot": "resizable-panel", ...props });
|
|
11
11
|
}
|
|
12
12
|
function ResizableHandle({ withHandle, className, ...props }) {
|
|
13
|
-
return (jsx(Separator, { "data-slot": "resizable-handle", className: cn("tw:bg-border focus-visible:
|
|
13
|
+
return (jsx(Separator, { "data-slot": "resizable-handle", className: cn("tw:bg-border tw:focus-visible:ring-ring tw:relative tw:flex tw:w-px tw:items-center tw:justify-center tw:after:absolute tw:after:inset-y-0 tw:after:left-1/2 tw:after:w-1 tw:after:-translate-x-1/2 tw:focus-visible:ring-1 tw:focus-visible:ring-offset-1 tw:focus-visible:outline-hidden tw:data-[panel-group-direction=vertical]:h-px tw:data-[panel-group-direction=vertical]:w-full tw:data-[panel-group-direction=vertical]:after:left-0 tw:data-[panel-group-direction=vertical]:after:h-1 tw:data-[panel-group-direction=vertical]:after:w-full tw:data-[panel-group-direction=vertical]:after:translate-x-0 tw:data-[panel-group-direction=vertical]:after:-translate-y-1/2 tw:[&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle && (jsx("div", { className: "tw:bg-border tw:z-10 tw:flex tw:h-4 tw:w-3 tw:items-center tw:justify-center tw:rounded-xs tw:border", children: jsx(GripVerticalIcon, { className: "tw:size-2.5" }) })) }));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
|
@@ -19,7 +19,7 @@ function SearchBar({ value, onChange, onSearch, onClear, placeholder = "Search..
|
|
|
19
19
|
onChange("");
|
|
20
20
|
onClear();
|
|
21
21
|
};
|
|
22
|
-
return (jsxs("div", { "data-slot": "search-bar", className: cn("tw:!flex tw:!w-full tw:!gap-2", className), children: [jsxs("div", { className: "tw:!relative tw:!flex-1", children: [jsx(SearchIcon, { className: "tw:!absolute tw:!left-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground tw:!pointer-events-none", "aria-hidden": "true" }), jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: "tw:!pl-9", "aria-label": inputAriaLabel }), value && !disabled && (jsx("button", { type: "button", onClick: handleClearClick, className: "tw:!absolute tw:!right-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground hover:
|
|
22
|
+
return (jsxs("div", { "data-slot": "search-bar", className: cn("tw:!flex tw:!w-full tw:!gap-2", className), children: [jsxs("div", { className: "tw:!relative tw:!flex-1", children: [jsx(SearchIcon, { className: "tw:!absolute tw:!left-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground tw:!pointer-events-none", "aria-hidden": "true" }), jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: "tw:!pl-9", "aria-label": inputAriaLabel }), value && !disabled && (jsx("button", { type: "button", onClick: handleClearClick, className: "tw:!absolute tw:!right-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground tw:hover:text-foreground tw:transition-colors tw:!cursor-pointer", "aria-label": "Clear search", children: jsx(XIcon, { className: "tw:!h-4 tw:!w-4" }) }))] }), jsx(Button, { variant: "default", size: "sm", onClick: () => onSearch(value), disabled: disabled || !value, loading: loading, className: cn("tw:!min-w-[80px]", (disabled || !value) && "tw:!opacity-50 tw:!cursor-not-allowed"), "aria-label": "Apply search", children: applyLabel }), jsx(Button, { variant: "outline", size: "sm", onClick: handleClearClick, disabled: disabled || !value, className: cn("tw:!min-w-[80px]", (disabled || !value) && "tw:!opacity-50 tw:!cursor-not-allowed"), "aria-label": "Clear search", children: clearLabel })] }));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export { SearchBar };
|
|
@@ -13,18 +13,18 @@ function SelectValue({ ...props }) {
|
|
|
13
13
|
return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
14
14
|
}
|
|
15
15
|
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
16
|
-
return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("tw:!flex tw:!w-fit tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "data-[placeholder]
|
|
16
|
+
return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("tw:!flex tw:!w-fit tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "tw:data-[placeholder]:!text-muted-foreground tw:[&_svg:not([class*='text-'])]:!text-muted-foreground", "tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px]", "tw:aria-invalid:!border-destructive tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40", "tw:dark:!bg-input/30 tw:dark:hover:!bg-input/50", "tw:disabled:!cursor-not-allowed tw:disabled:!opacity-50", "tw:data-[size=default]:!h-9 tw:data-[size=sm]:!h-8", "tw:*:data-[slot=select-value]:!line-clamp-1 tw:*:data-[slot=select-value]:!flex tw:*:data-[slot=select-value]:!items-center tw:*:data-[slot=select-value]:!gap-2", "tw:[&_svg]:!pointer-events-none tw:[&_svg]:!shrink-0 tw:[&_svg:not([class*='size-'])]:!size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!opacity-50" }) })] }));
|
|
17
17
|
}
|
|
18
18
|
function SelectContent({ className, children, position = "popper", ...props }) {
|
|
19
|
-
return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("tw:!relative tw:!z-50 tw:!min-w-[8rem] tw:!max-h-(--radix-select-content-available-height) tw:!origin-(--radix-select-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md", "data-[state=open]
|
|
20
|
-
"data-[side=bottom]
|
|
19
|
+
return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("tw:!relative tw:!z-50 tw:!min-w-[8rem] tw:!max-h-(--radix-select-content-available-height) tw:!origin-(--radix-select-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md", "tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95", "tw:data-[side=bottom]:!slide-in-from-top-2 tw:data-[side=left]:!slide-in-from-right-2 tw:data-[side=right]:!slide-in-from-left-2 tw:data-[side=top]:!slide-in-from-bottom-2", position === "popper" &&
|
|
20
|
+
"tw:data-[side=bottom]:!translate-y-1 tw:data-[side=left]:!-translate-x-1 tw:data-[side=right]:!translate-x-1 tw:data-[side=top]:!-translate-y-1", className), position: position, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn("tw:!p-1", position === "popper" &&
|
|
21
21
|
"tw:!h-[var(--radix-select-trigger-height)] tw:!w-full tw:!min-w-[var(--radix-select-trigger-width)] tw:!scroll-my-1"), children: children }), jsx(SelectScrollDownButton, {})] }) }));
|
|
22
22
|
}
|
|
23
23
|
function SelectLabel({ className, ...props }) {
|
|
24
24
|
return (jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("tw:!text-muted-foreground tw:!px-2 tw:!py-1.5 tw:!text-[12px]", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function SelectItem({ className, children, ...props }) {
|
|
27
|
-
return (jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "focus
|
|
27
|
+
return (jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "tw:focus:!bg-accent tw:focus:!text-accent-foreground", "tw:data-[disabled]:!pointer-events-none tw:data-[disabled]:!opacity-50", "tw:[&>span]:!line-clamp-1 tw:[&>span]:!flex tw:[&>span]:!items-center tw:[&>span]:!gap-2", "tw:[&_svg]:!pointer-events-none tw:[&_svg]:!shrink-0 tw:[&_svg:not([class*='size-'])]:!size-4 tw:[&_svg:not([class*='text-'])]:!text-muted-foreground", className), ...props, children: [jsx("span", { className: "tw:!absolute tw:!right-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "tw:!size-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] }));
|
|
28
28
|
}
|
|
29
29
|
function SelectSeparator({ className, ...props }) {
|
|
30
30
|
return (jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("tw:!bg-border tw:!pointer-events-none tw:!-mx-1 tw:!my-1 tw:!h-px", className), ...props }));
|
package/dist/components/sheet.js
CHANGED
|
@@ -17,10 +17,10 @@ function SheetPortal({ ...props }) {
|
|
|
17
17
|
return jsx(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
18
18
|
}
|
|
19
19
|
function SheetOverlay({ className, ...props }) {
|
|
20
|
-
return (jsx(DialogPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0", className), ...props }));
|
|
20
|
+
return (jsx(DialogPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function SheetContent({ className, overlayClassName, children, side = "right", ...props }) {
|
|
23
|
-
return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { className: overlayClassName }), jsx(DialogPrimitive.Content, { "data-slot": "sheet-content", className: cn("tw:fixed tw:z-50 tw:flex tw:flex-col tw:gap-4 tw:bg-background tw:shadow-lg tw:transition tw:ease-in-out", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:duration-300 tw:data-[state=open]:duration-500", side === "right" &&
|
|
23
|
+
return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { className: overlayClassName }), jsx(DialogPrimitive.Content, { "data-slot": "sheet-content", className: cn("tw:fixed tw:z-50 tw:flex tw:flex-col tw:gap-4 tw:bg-background tw:shadow-lg tw:transition tw:ease-in-out", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:duration-300 tw:data-[state=open]:duration-500", side === "right" &&
|
|
24
24
|
"tw:inset-y-0 tw:right-0 tw:h-full tw:w-3/4 tw:border-l tw:data-[state=closed]:slide-out-to-right tw:data-[state=open]:slide-in-from-right tw:sm:max-w-sm", side === "left" &&
|
|
25
25
|
"tw:inset-y-0 tw:left-0 tw:h-full tw:w-3/4 tw:border-r tw:data-[state=closed]:slide-out-to-left tw:data-[state=open]:slide-in-from-left tw:sm:max-w-sm", side === "top" &&
|
|
26
26
|
"tw:inset-x-0 tw:top-0 tw:h-auto tw:border-b tw:data-[state=closed]:slide-out-to-top tw:data-[state=open]:slide-in-from-top", side === "bottom" &&
|
|
@@ -76,7 +76,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
|
|
|
76
76
|
"--sidebar-width": SIDEBAR_WIDTH,
|
|
77
77
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
78
78
|
...style,
|
|
79
|
-
}, className: cn("group/sidebar-wrapper has-data-[variant=inset]:
|
|
79
|
+
}, className: cn("group/sidebar-wrapper tw:has-data-[variant=inset]:bg-sidebar tw:flex tw:min-h-svh tw:w-full", className), ...props, children: children }) }) }));
|
|
80
80
|
}
|
|
81
81
|
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
|
|
82
82
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
@@ -84,19 +84,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
84
84
|
return (jsx("div", { "data-slot": "sidebar", className: cn("tw:bg-sidebar tw:text-sidebar-foreground tw:flex tw:h-full tw:w-(--sidebar-width) tw:flex-col", className), ...props, children: children }));
|
|
85
85
|
}
|
|
86
86
|
if (isMobile) {
|
|
87
|
-
return (jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "tw:bg-sidebar tw:text-sidebar-foreground tw:w-(--sidebar-width) tw:p-0 [&>button]:
|
|
87
|
+
return (jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "tw:bg-sidebar tw:text-sidebar-foreground tw:w-(--sidebar-width) tw:p-0 tw:[&>button]:hidden", style: {
|
|
88
88
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
|
89
89
|
}, side: side, children: [jsxs(SheetHeader, { className: "tw:sr-only", children: [jsx(SheetTitle, { children: "Sidebar" }), jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), jsx("div", { className: "tw:flex tw:h-full tw:w-full tw:flex-col", children: children })] }) }));
|
|
90
90
|
}
|
|
91
|
-
return (jsxs("div", { className: "group peer tw:text-sidebar-foreground tw:hidden md:
|
|
92
|
-
? "group-data-[collapsible=icon]:
|
|
93
|
-
: "group-data-[collapsible=icon]:
|
|
94
|
-
? "tw:left-0 group-data-[collapsible=offcanvas]:
|
|
95
|
-
: "tw:right-0 group-data-[collapsible=offcanvas]:
|
|
91
|
+
return (jsxs("div", { className: "group peer tw:text-sidebar-foreground tw:hidden tw:md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [jsx("div", { "data-slot": "sidebar-gap", className: cn("tw:relative tw:w-(--sidebar-width) tw:bg-transparent tw:transition-[width] tw:duration-200 tw:ease-linear", "tw:group-data-[collapsible=offcanvas]:w-0", "tw:group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
|
|
92
|
+
? "tw:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
|
93
|
+
: "tw:group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), jsx("div", { "data-slot": "sidebar-container", className: cn("tw:fixed tw:inset-y-0 tw:z-10 tw:hidden tw:h-svh tw:w-(--sidebar-width) tw:transition-[left,right,width] tw:duration-200 tw:ease-linear tw:md:flex", side === "left"
|
|
94
|
+
? "tw:left-0 tw:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
95
|
+
: "tw:right-0 tw:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
96
96
|
// Adjust the padding for floating and inset variants.
|
|
97
97
|
variant === "floating" || variant === "inset"
|
|
98
|
-
? "tw:p-2 group-data-[collapsible=icon]:
|
|
99
|
-
: "group-data-[collapsible=icon]:
|
|
98
|
+
? "tw:p-2 tw:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
|
99
|
+
: "tw:group-data-[collapsible=icon]:w-(--sidebar-width-icon) tw:group-data-[side=left]:border-r tw:group-data-[side=right]:border-l", className), ...props, children: jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "tw:bg-sidebar tw:group-data-[variant=floating]:border-sidebar-border tw:flex tw:h-full tw:w-full tw:flex-col tw:group-data-[variant=floating]:rounded-lg tw:group-data-[variant=floating]:border tw:group-data-[variant=floating]:shadow-sm", children: children }) })] }));
|
|
100
100
|
}
|
|
101
101
|
function SidebarTrigger({ className, onClick, ...props }) {
|
|
102
102
|
const { toggleSidebar } = useSidebar();
|
|
@@ -107,10 +107,10 @@ function SidebarTrigger({ className, onClick, ...props }) {
|
|
|
107
107
|
}
|
|
108
108
|
function SidebarRail({ className, ...props }) {
|
|
109
109
|
const { toggleSidebar } = useSidebar();
|
|
110
|
-
return (jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("hover:after:
|
|
110
|
+
return (jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("tw:hover:after:bg-sidebar-border tw:absolute tw:inset-y-0 tw:z-20 tw:hidden tw:w-4 tw:-translate-x-1/2 tw:transition-all tw:ease-linear tw:group-data-[side=left]:-right-4 tw:group-data-[side=right]:left-0 tw:after:absolute tw:after:inset-y-0 tw:after:left-1/2 tw:after:w-[2px] tw:sm:flex", "tw:in-data-[side=left]:cursor-w-resize tw:in-data-[side=right]:cursor-e-resize", "tw:[[data-side=left][data-state=collapsed]_&]:cursor-e-resize tw:[[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "tw:hover:group-data-[collapsible=offcanvas]:bg-sidebar tw:group-data-[collapsible=offcanvas]:translate-x-0 tw:group-data-[collapsible=offcanvas]:after:left-full", "tw:[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "tw:[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
|
|
111
111
|
}
|
|
112
112
|
function SidebarInset({ className, ...props }) {
|
|
113
|
-
return (jsx("main", { "data-slot": "sidebar-inset", className: cn("tw:bg-background tw:relative tw:flex tw:w-full tw:flex-1 tw:flex-col", "md:peer-data-[variant=inset]:
|
|
113
|
+
return (jsx("main", { "data-slot": "sidebar-inset", className: cn("tw:bg-background tw:relative tw:flex tw:w-full tw:flex-1 tw:flex-col", "tw:md:peer-data-[variant=inset]:m-2 tw:md:peer-data-[variant=inset]:ml-0 tw:md:peer-data-[variant=inset]:rounded-xl tw:md:peer-data-[variant=inset]:shadow-sm tw:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
|
|
114
114
|
}
|
|
115
115
|
function SidebarInput({ className, ...props }) {
|
|
116
116
|
return (jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("tw:bg-background tw:h-8 tw:w-full tw:shadow-none", className), ...props }));
|
|
@@ -125,20 +125,20 @@ function SidebarSeparator({ className, ...props }) {
|
|
|
125
125
|
return (jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("tw:bg-sidebar-border tw:mx-2 tw:w-auto", className), ...props }));
|
|
126
126
|
}
|
|
127
127
|
function SidebarContent({ className, ...props }) {
|
|
128
|
-
return (jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:gap-2 tw:overflow-auto group-data-[collapsible=icon]:
|
|
128
|
+
return (jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("tw:flex tw:min-h-0 tw:flex-1 tw:flex-col tw:gap-2 tw:overflow-auto tw:group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
|
|
129
129
|
}
|
|
130
130
|
function SidebarGroup({ className, ...props }) {
|
|
131
131
|
return (jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("tw:relative tw:flex tw:w-full tw:min-w-0 tw:flex-col tw:p-2", className), ...props }));
|
|
132
132
|
}
|
|
133
133
|
function SidebarGroupLabel({ className, asChild = false, ...props }) {
|
|
134
134
|
const Comp = asChild ? Slot : "div";
|
|
135
|
-
return (jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("tw:text-sidebar-foreground/70 tw:ring-sidebar-ring tw:flex tw:h-8 tw:shrink-0 tw:items-center tw:rounded-md tw:px-2 tw:text-xs tw:font-medium tw:outline-hidden tw:transition-[margin,opacity] tw:duration-200 tw:ease-linear focus-visible:
|
|
135
|
+
return (jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("tw:text-sidebar-foreground/70 tw:ring-sidebar-ring tw:flex tw:h-8 tw:shrink-0 tw:items-center tw:rounded-md tw:px-2 tw:text-xs tw:font-medium tw:outline-hidden tw:transition-[margin,opacity] tw:duration-200 tw:ease-linear tw:focus-visible:ring-2 tw:[&>svg]:size-4 tw:[&>svg]:shrink-0", "tw:group-data-[collapsible=icon]:-mt-8 tw:group-data-[collapsible=icon]:opacity-0", className), ...props }));
|
|
136
136
|
}
|
|
137
137
|
function SidebarGroupAction({ className, asChild = false, ...props }) {
|
|
138
138
|
const Comp = asChild ? Slot : "button";
|
|
139
|
-
return (jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring hover:
|
|
139
|
+
return (jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground tw:absolute tw:top-3.5 tw:right-3 tw:flex tw:aspect-square tw:w-5 tw:items-center tw:justify-center tw:rounded-md tw:p-0 tw:outline-hidden tw:transition-transform tw:focus-visible:ring-2 tw:[&>svg]:size-4 tw:[&>svg]:shrink-0",
|
|
140
140
|
// Increases the hit area of the button on mobile.
|
|
141
|
-
"after:tw:
|
|
141
|
+
"tw:after:absolute tw:after:-inset-2 tw:md:after:hidden", "tw:group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
142
142
|
}
|
|
143
143
|
function SidebarGroupContent({ className, ...props }) {
|
|
144
144
|
return (jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("tw:w-full tw:text-sm", className), ...props }));
|
|
@@ -149,16 +149,16 @@ function SidebarMenu({ className, ...props }) {
|
|
|
149
149
|
function SidebarMenuItem({ className, ...props }) {
|
|
150
150
|
return (jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item tw:relative", className), ...props }));
|
|
151
151
|
}
|
|
152
|
-
const sidebarMenuButtonVariants = cva("peer/menu-button tw:flex tw:w-full tw:items-center tw:gap-2 tw:overflow-hidden tw:rounded-md tw:p-2 tw:text-left tw:text-sm tw:outline-hidden tw:ring-sidebar-ring tw:transition-[width,height,padding] hover:
|
|
152
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button tw:flex tw:w-full tw:items-center tw:gap-2 tw:overflow-hidden tw:rounded-md tw:p-2 tw:text-left tw:text-sm tw:outline-hidden tw:ring-sidebar-ring tw:transition-[width,height,padding] tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground tw:focus-visible:ring-2 tw:active:bg-sidebar-accent tw:active:text-sidebar-accent-foreground tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:group-has-data-[sidebar=menu-action]/menu-item:pr-8 tw:aria-disabled:pointer-events-none tw:aria-disabled:opacity-50 tw:data-[active=true]:bg-sidebar-accent tw:data-[active=true]:font-medium tw:data-[active=true]:text-sidebar-accent-foreground tw:data-[state=open]:hover:bg-sidebar-accent tw:data-[state=open]:hover:text-sidebar-accent-foreground tw:group-data-[collapsible=icon]:size-8! tw:group-data-[collapsible=icon]:p-2! tw:[&>span:last-child]:truncate tw:[&>svg]:size-4 tw:[&>svg]:shrink-0", {
|
|
153
153
|
variants: {
|
|
154
154
|
variant: {
|
|
155
|
-
default: "hover:
|
|
156
|
-
outline: "tw:bg-background tw:shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:
|
|
155
|
+
default: "tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground",
|
|
156
|
+
outline: "tw:bg-background tw:shadow-[0_0_0_1px_hsl(var(--sidebar-border))] tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground tw:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
|
157
157
|
},
|
|
158
158
|
size: {
|
|
159
159
|
default: "tw:h-8 tw:text-sm",
|
|
160
160
|
sm: "tw:h-7 tw:text-xs",
|
|
161
|
-
lg: "tw:h-12 tw:text-sm group-data-[collapsible=icon]:
|
|
161
|
+
lg: "tw:h-12 tw:text-sm tw:group-data-[collapsible=icon]:p-0!",
|
|
162
162
|
},
|
|
163
163
|
},
|
|
164
164
|
defaultVariants: {
|
|
@@ -182,13 +182,13 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = "defau
|
|
|
182
182
|
}
|
|
183
183
|
function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
|
|
184
184
|
const Comp = asChild ? Slot : "button";
|
|
185
|
-
return (jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring hover:
|
|
185
|
+
return (jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground tw:peer-hover/menu-button:text-sidebar-accent-foreground tw:absolute tw:top-1.5 tw:right-1 tw:flex tw:aspect-square tw:w-5 tw:items-center tw:justify-center tw:rounded-md tw:p-0 tw:outline-hidden tw:transition-transform tw:focus-visible:ring-2 tw:[&>svg]:size-4 tw:[&>svg]:shrink-0",
|
|
186
186
|
// Increases the hit area of the button on mobile.
|
|
187
|
-
"after:tw:
|
|
188
|
-
"peer-data-[active=true]/menu-button:
|
|
187
|
+
"tw:after:absolute tw:after:-inset-2 tw:md:after:hidden", "tw:peer-data-[size=sm]/menu-button:top-1", "tw:peer-data-[size=default]/menu-button:top-1.5", "tw:peer-data-[size=lg]/menu-button:top-2.5", "tw:group-data-[collapsible=icon]:hidden", showOnHover &&
|
|
188
|
+
"tw:peer-data-[active=true]/menu-button:text-sidebar-accent-foreground tw:group-focus-within/menu-item:opacity-100 tw:group-hover/menu-item:opacity-100 tw:data-[state=open]:opacity-100 tw:md:opacity-0", className), ...props }));
|
|
189
189
|
}
|
|
190
190
|
function SidebarMenuBadge({ className, ...props }) {
|
|
191
|
-
return (jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("tw:text-sidebar-foreground tw:pointer-events-none tw:absolute tw:right-1 tw:flex tw:h-5 tw:min-w-5 tw:items-center tw:justify-center tw:rounded-md tw:px-1 tw:text-xs tw:font-medium tw:tabular-nums tw:select-none", "peer-hover/menu-button:
|
|
191
|
+
return (jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("tw:text-sidebar-foreground tw:pointer-events-none tw:absolute tw:right-1 tw:flex tw:h-5 tw:min-w-5 tw:items-center tw:justify-center tw:rounded-md tw:px-1 tw:text-xs tw:font-medium tw:tabular-nums tw:select-none", "tw:peer-hover/menu-button:text-sidebar-accent-foreground tw:peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "tw:peer-data-[size=sm]/menu-button:top-1", "tw:peer-data-[size=default]/menu-button:top-1.5", "tw:peer-data-[size=lg]/menu-button:top-2.5", "tw:group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
192
192
|
}
|
|
193
193
|
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
194
194
|
// Random width between 50 to 90%.
|
|
@@ -200,14 +200,14 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
|
200
200
|
} })] }));
|
|
201
201
|
}
|
|
202
202
|
function SidebarMenuSub({ className, ...props }) {
|
|
203
|
-
return (jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("tw:border-sidebar-border tw:mx-3.5 tw:flex tw:min-w-0 tw:translate-x-px tw:flex-col tw:gap-1 tw:border-l tw:px-2.5 tw:py-0.5", "group-data-[collapsible=icon]:
|
|
203
|
+
return (jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("tw:border-sidebar-border tw:mx-3.5 tw:flex tw:min-w-0 tw:translate-x-px tw:flex-col tw:gap-1 tw:border-l tw:px-2.5 tw:py-0.5", "tw:group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
204
204
|
}
|
|
205
205
|
function SidebarMenuSubItem({ className, ...props }) {
|
|
206
206
|
return (jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item tw:relative", className), ...props }));
|
|
207
207
|
}
|
|
208
208
|
function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
|
|
209
209
|
const Comp = asChild ? Slot : "a";
|
|
210
|
-
return (jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring hover:
|
|
210
|
+
return (jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("tw:text-sidebar-foreground tw:ring-sidebar-ring tw:hover:bg-sidebar-accent tw:hover:text-sidebar-accent-foreground tw:active:bg-sidebar-accent tw:active:text-sidebar-accent-foreground tw:[&>svg]:text-sidebar-accent-foreground tw:flex tw:h-7 tw:min-w-0 tw:-translate-x-px tw:items-center tw:gap-2 tw:overflow-hidden tw:rounded-md tw:px-2 tw:outline-hidden tw:focus-visible:ring-2 tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:aria-disabled:pointer-events-none tw:aria-disabled:opacity-50 tw:[&>span:last-child]:truncate tw:[&>svg]:size-4 tw:[&>svg]:shrink-0", "tw:data-[active=true]:bg-sidebar-accent tw:data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "tw:text-xs", size === "md" && "tw:text-sm", "tw:group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
|
|
@@ -9,11 +9,11 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
|
|
|
9
9
|
: Array.isArray(defaultValue)
|
|
10
10
|
? defaultValue
|
|
11
11
|
: [min, max], [value, defaultValue, min, max]);
|
|
12
|
-
return (jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, orientation: orientation, className: cn("tw:relative tw:flex tw:w-full tw:touch-none tw:select-none data-[disabled]:
|
|
12
|
+
return (jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, orientation: orientation, className: cn("tw:relative tw:flex tw:w-full tw:touch-none tw:select-none tw:data-[disabled]:opacity-50", orientation === "horizontal"
|
|
13
13
|
? "tw:items-center"
|
|
14
14
|
: "tw:h-full tw:w-auto tw:min-h-44 tw:flex-col", className), ...props, children: [jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("tw:bg-muted tw:relative tw:grow tw:overflow-hidden tw:rounded-full", orientation === "horizontal"
|
|
15
15
|
? "tw:h-1.5 tw:w-full"
|
|
16
|
-
: "tw:h-full tw:w-1.5"), children: jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("tw:bg-primary tw:absolute", orientation === "horizontal" ? "tw:h-full" : "tw:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "tw:border-primary tw:ring-ring/50 tw:block tw:size-4 tw:shrink-0 tw:rounded-full tw:border tw:bg-white tw:shadow-sm tw:transition-[color,box-shadow] hover:
|
|
16
|
+
: "tw:h-full tw:w-1.5"), children: jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("tw:bg-primary tw:absolute", orientation === "horizontal" ? "tw:h-full" : "tw:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "tw:border-primary tw:ring-ring/50 tw:block tw:size-4 tw:shrink-0 tw:rounded-full tw:border tw:bg-white tw:shadow-sm tw:transition-[color,box-shadow] tw:hover:ring-4 tw:focus-visible:ring-4 tw:focus-visible:outline-hidden tw:disabled:pointer-events-none tw:disabled:opacity-50" }, index)))] }));
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export { Slider };
|