@getgreenline/blaze-ui 1.0.48 → 1.0.49-beta.1

package/dist/components/badge.js

@@ -3,14 +3,14 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '../lib/utils.js';
 
-const badgeVariants = cva("tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-md tw:!border tw:!px-2 tw:!py-0.5 tw:!text-[12px] tw:!font-medium tw:!w-fit tw:!whitespace-nowrap tw:!shrink-0 [&>svg]:tw:!size-3 tw:!gap-1 [&>svg]:tw:!pointer-events-none focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px] aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive tw:!transition-[color,box-shadow] tw:!overflow-hidden", {
+const badgeVariants = cva("tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-md tw:!border tw:!px-2 tw:!py-0.5 tw:!text-[12px] tw:!font-medium tw:!w-fit tw:!whitespace-nowrap tw:!shrink-0 tw:[&>svg]:!size-3 tw:!gap-1 tw:[&>svg]:!pointer-events-none tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px] tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40 tw:aria-invalid:!border-destructive tw:!transition-[color,box-shadow] tw:!overflow-hidden", {
     variants: {
         variant: {
-            default: "tw:!border-transparent tw:!bg-primary tw:!text-primary-foreground [a&]:hover:tw:!bg-primary/90",
-            secondary: "tw:!border-transparent tw:!bg-secondary tw:!text-secondary-foreground [a&]:hover:tw:!bg-secondary/90",
-            soft: "tw:!border-primary/20 tw:!bg-primary/10 tw:!text-primary dark:tw:!border-primary/30 dark:tw:!bg-primary/20",
-            destructive: "tw:!border-transparent tw:!bg-destructive tw:!text-white [a&]:hover:tw:!bg-destructive/90 focus-visible:tw:!ring-destructive/20 dark:focus-visible:tw:!ring-destructive/40 dark:tw:!bg-destructive/60",
-            outline: "tw:!text-foreground [a&]:hover:tw:!bg-accent [a&]:hover:tw:!text-accent-foreground",
+            default: "tw:!border-transparent tw:!bg-primary tw:!text-primary-foreground tw:[a&]:hover:!bg-primary/90",
+            secondary: "tw:!border-transparent tw:!bg-secondary tw:!text-secondary-foreground tw:[a&]:hover:!bg-secondary/90",
+            soft: "tw:!border-primary/20 tw:!bg-primary/10 tw:!text-primary tw:dark:!border-primary/30 tw:dark:!bg-primary/20",
+            destructive: "tw:!border-transparent tw:!bg-destructive tw:!text-white tw:[a&]:hover:!bg-destructive/90 tw:focus-visible:!ring-destructive/20 tw:dark:focus-visible:!ring-destructive/40 tw:dark:!bg-destructive/60",
+            outline: "tw:!text-foreground tw:[a&]:hover:!bg-accent tw:[a&]:hover:!text-accent-foreground",
         },
     },
     defaultVariants: {

package/dist/components/blaze-layout/blaze-layout.d.ts

@@ -0,0 +1,5 @@
+import type { BlazeLayoutProps } from "./types";
+declare function BlazeLayout({ className, logo, breadcrumbs, pageHeader, navGroups, activeNavItemIds, pendingNavItemIds, currentPath, renderNavLink, renderBreadcrumbLink, topActions, appSwitcher, user, userAction, shopSwitcher, sidebarCollapsible, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, children, ...props }: BlazeLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function BlazeLayoutDummyShopSwitcher(): null;
+export { BlazeLayout, BlazeLayoutDummyShopSwitcher };
+//# sourceMappingURL=blaze-layout.d.ts.map

package/dist/components/blaze-layout/blaze-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blaze-layout.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/blaze-layout.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,UAAU,EACV,WAAW,EACX,IAAS,EACT,UAAU,EACV,YAAY,EACZ,kBAA2B,EAC3B,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAoHlB;AAED,iBAAS,4BAA4B,SAEpC;AAED,OAAO,EAAE,WAAW,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/components/blaze-layout/blaze-layout.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { HeaderAppSwitcher } from '../header-app-switcher.js';
+import { PageHeader } from '../page-header.js';
+import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarFooter, SidebarInset, SidebarTrigger } from '../sidebar.js';
+import { Separator } from '../separator.js';
+import { cn } from '../../lib/utils.js';
+import { BlazeLayoutBreadcrumbs } from './breadcrumbs.js';
+import { BlazeLayoutLogo } from './logo.js';
+import { toOptionalSet } from './navigation.js';
+import { isPageHeaderConfig } from './page-header.js';
+import { BlazeLayoutNavItemView } from './sidebar-nav.js';
+import { BlazeLayoutUserAction } from './user-action.js';
+
+function BlazeLayout({ className, logo, breadcrumbs, pageHeader, navGroups, activeNavItemIds, pendingNavItemIds, currentPath, renderNavLink, renderBreadcrumbLink, topActions, appSwitcher, user = {}, userAction, shopSwitcher, sidebarCollapsible = "none", sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, children, ...props }) {
+    const activeIds = React.useMemo(() => toOptionalSet(activeNavItemIds), [activeNavItemIds]);
+    const pendingIds = React.useMemo(() => toOptionalSet(pendingNavItemIds), [pendingNavItemIds]);
+    const hasSidebarNavigation = Boolean(navGroups?.some((group) => group.items.length));
+    const isSidebarCollapsible = sidebarCollapsible !== "none";
+    return (jsx("div", { "data-slot": "blaze-layout", className: cn("blaze-ui-root tw:min-h-svh tw:bg-background", className), ...props, children: jsxs(SidebarProvider, { open: sidebarOpen, defaultOpen: defaultSidebarOpen, onOpenChange: onSidebarOpenChange, children: [jsxs(Sidebar, { collapsible: sidebarCollapsible, className: cn("tw:border-r", !isSidebarCollapsible && "tw:sticky tw:top-0 tw:h-svh tw:shrink-0"), children: [jsx(SidebarHeader, { className: "tw:h-14 tw:flex-row tw:items-center tw:border-b tw:px-3 tw:py-0", children: jsx(BlazeLayoutLogo, { logo: logo }) }), jsx(SidebarContent, { children: hasSidebarNavigation
+                                ? navGroups?.map((group, groupIndex) => (jsxs(SidebarGroup, { children: [group.label ? (jsx(SidebarGroupLabel, { children: group.label })) : null, jsx(SidebarGroupContent, { children: jsx(SidebarMenu, { children: group.items.map((item) => (jsx(BlazeLayoutNavItemView, { item: item, activeIds: activeIds, pendingIds: pendingIds, currentPath: currentPath, renderNavLink: renderNavLink }, item.id))) }) })] }, group.id ?? groupIndex)))
+                                : null }), jsx(SidebarFooter, { children: shopSwitcher })] }), jsxs(SidebarInset, { className: "tw:min-h-0 tw:min-w-0", children: [jsxs("header", { "data-slot": "blaze-layout-topbar", className: "tw:sticky tw:top-0 tw:z-30 tw:flex tw:h-14 tw:shrink-0 tw:items-center tw:gap-3 tw:border-b tw:bg-background tw:px-4", children: [jsxs("div", { className: "tw:flex tw:min-w-0 tw:items-center tw:gap-3", children: [jsx(SidebarTrigger, { className: "tw:-ml-1 tw:size-8" }), isSidebarCollapsible ? (jsx(Separator, { orientation: "vertical", className: "tw:data-[orientation=vertical]:h-4" })) : null, jsx(BlazeLayoutBreadcrumbs, { breadcrumbs: breadcrumbs, renderBreadcrumbLink: renderBreadcrumbLink })] }), jsxs("div", { "data-slot": "blaze-layout-actions", className: "tw:ml-auto tw:flex tw:shrink-0 tw:items-center tw:gap-1", children: [topActions, appSwitcher !== false ? (jsx(HeaderAppSwitcher, { ...appSwitcher })) : null, userAction ??
+                                            (user !== false ? jsx(BlazeLayoutUserAction, { user: user }) : null)] })] }), jsxs("div", { "data-slot": "blaze-layout-content", className: "tw:min-h-0 tw:flex-1 tw:overflow-auto tw:px-6 tw:py-10", children: [pageHeader ? (jsx("div", { "data-slot": "blaze-layout-page-header", className: "tw:mb-8", children: isPageHeaderConfig(pageHeader) ? (jsx(PageHeader, { variant: "plain", ...pageHeader })) : (pageHeader) })) : null, jsx("div", { "data-slot": "blaze-layout-page", className: "tw:min-h-full tw:w-full", children: children })] })] })] }) }));
+}
+function BlazeLayoutDummyShopSwitcher() {
+    return null;
+}
+
+export { BlazeLayout, BlazeLayoutDummyShopSwitcher };

package/dist/components/blaze-layout/breadcrumbs.d.ts

@@ -0,0 +1,7 @@
+import type { BlazeLayoutBreadcrumbItem, BlazeLayoutProps } from "./types";
+declare function BlazeLayoutBreadcrumbs({ breadcrumbs, renderBreadcrumbLink, }: {
+    breadcrumbs?: BlazeLayoutBreadcrumbItem[];
+    renderBreadcrumbLink?: BlazeLayoutProps["renderBreadcrumbLink"];
+}): import("react/jsx-runtime").JSX.Element | null;
+export { BlazeLayoutBreadcrumbs };
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/blaze-layout/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/breadcrumbs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1E,iBAAS,sBAAsB,CAAC,EAC9B,WAAW,EACX,oBAAoB,GACrB,EAAE;IACD,WAAW,CAAC,EAAE,yBAAyB,EAAE,CAAA;IACzC,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAA;CAChE,kDAkDA;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/blaze-layout/breadcrumbs.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Breadcrumb, BreadcrumbList, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink } from '../breadcrumb.js';
+import { cn } from '../../lib/utils.js';
+import { DefaultAnchor } from './default-anchor.js';
+
+function BlazeLayoutBreadcrumbs({ breadcrumbs, renderBreadcrumbLink, }) {
+    if (!breadcrumbs?.length)
+        return null;
+    return (jsx(Breadcrumb, { className: "tw:min-w-0", children: jsx(BreadcrumbList, { className: "tw:min-w-0 tw:flex-nowrap", children: breadcrumbs.map((item, index) => {
+                const isLast = index === breadcrumbs.length - 1;
+                const content = (jsx("span", { className: "tw:block tw:max-w-[140px] tw:truncate tw:sm:max-w-[180px] tw:md:max-w-none", children: item.label }));
+                return (jsxs(React.Fragment, { children: [index > 0 ? (jsx(BreadcrumbSeparator, { className: "tw:hidden tw:md:block" })) : null, jsx(BreadcrumbItem, { className: cn(!isLast && "tw:hidden tw:md:inline-flex", "tw:min-w-0"), children: isLast ? (jsx(BreadcrumbPage, { children: content })) : (jsx(BreadcrumbLink, { asChild: true, children: renderBreadcrumbLink ? (renderBreadcrumbLink({
+                                    item,
+                                    isActive: false,
+                                    isPending: false,
+                                    children: content,
+                                })) : (jsx(DefaultAnchor, { href: item.href, onClick: item.onClick, children: content })) })) })] }, item.id));
+            }) }) }));
+}
+
+export { BlazeLayoutBreadcrumbs };

package/dist/components/blaze-layout/default-anchor.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+declare function DefaultAnchor({ href, disabled, onClick, children, ...props }: React.ComponentProps<"a"> & {
+    href?: string;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { DefaultAnchor };
+//# sourceMappingURL=default-anchor.d.ts.map

package/dist/components/blaze-layout/default-anchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-anchor.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/default-anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,2CAmBA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/blaze-layout/default-anchor.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+
+function DefaultAnchor({ href, disabled, onClick, children, ...props }) {
+    if (disabled || !href) {
+        return (jsx("button", { type: "button", disabled: disabled, onClick: onClick, ...props, children: children }));
+    }
+    return (jsx("a", { href: href, onClick: onClick, ...props, children: children }));
+}
+
+export { DefaultAnchor };

package/dist/components/blaze-layout/logo.d.ts

@@ -0,0 +1,6 @@
+import type { BlazeLayoutLogo } from "./types";
+declare function BlazeLayoutLogo({ logo }: {
+    logo?: BlazeLayoutLogo;
+}): import("react/jsx-runtime").JSX.Element;
+export { BlazeLayoutLogo };
+//# sourceMappingURL=logo.d.ts.map

package/dist/components/blaze-layout/logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/logo.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAc9C,iBAAS,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,eAAe,CAAA;CAAE,2CA4C5D;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/blaze-layout/logo.js

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Badge } from '../badge.js';
+import { BillingLogo } from '../../svgs/header-app-switcher-logos.js';
+import { cn } from '../../lib/utils.js';
+
+const defaultLogo = {
+    label: (jsxs(Fragment, { children: ["BLAZE ", jsx("span", { className: "tw:text-primary", children: "BILLING" })] })),
+};
+function DefaultLogoMark() {
+    return jsx(BillingLogo, { className: "tw:size-7" });
+}
+function BlazeLayoutLogo({ logo }) {
+    const resolvedLogo = { ...defaultLogo, ...logo };
+    const sizeStyle = {
+        width: resolvedLogo.width,
+        height: resolvedLogo.height,
+    };
+    return (jsxs("div", { "data-slot": "blaze-layout-logo", className: "tw:flex tw:min-w-0 tw:items-center tw:gap-2", children: [resolvedLogo.node ? (jsx("span", { className: cn("tw:flex tw:shrink-0 tw:items-center", resolvedLogo.className), style: sizeStyle, children: resolvedLogo.node })) : resolvedLogo.src ? (jsx("img", { src: resolvedLogo.src, alt: resolvedLogo.alt ?? "", className: cn("tw:h-7 tw:w-auto tw:shrink-0", resolvedLogo.className), style: sizeStyle })) : (jsx(DefaultLogoMark, {})), resolvedLogo.label ? (jsx("span", { className: "tw:truncate tw:text-sm tw:font-bold tw:tracking-normal", children: resolvedLogo.label })) : null, resolvedLogo.beta ? (jsx(Badge, { variant: "outline", className: "tw:shrink-0 tw:text-[10px]", children: "Beta" })) : null] }));
+}
+
+export { BlazeLayoutLogo };

package/dist/components/blaze-layout/navigation.d.ts

@@ -0,0 +1,5 @@
+import type { BlazeLayoutNavItem } from "./types";
+declare const toOptionalSet: (values?: Iterable<string>) => Set<string> | undefined;
+declare function isNavItemActive(item: BlazeLayoutNavItem, activeIds?: Set<string>, currentPath?: string): boolean;
+export { isNavItemActive, toOptionalSet };
+//# sourceMappingURL=navigation.d.ts.map

package/dist/components/blaze-layout/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAQjD,QAAA,MAAM,aAAa,GAAI,SAAS,QAAQ,CAAC,MAAM,CAAC,4BACV,CAAA;AAEtC,iBAAS,eAAe,CACtB,IAAI,EAAE,kBAAkB,EACxB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EACvB,WAAW,CAAC,EAAE,MAAM,GACnB,OAAO,CAeT;AAED,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/blaze-layout/navigation.js

@@ -0,0 +1,23 @@
+const cleanPath = (value) => {
+    if (!value)
+        return "";
+    const normalized = value.split(/[?#]/)[0]?.replace(/\/+$/, "") ?? "";
+    return normalized || "/";
+};
+const toOptionalSet = (values) => values ? new Set(values) : undefined;
+function isNavItemActive(item, activeIds, currentPath) {
+    if (activeIds?.has(item.id))
+        return true;
+    if (item.children?.some((child) => isNavItemActive(child, activeIds, currentPath))) {
+        return true;
+    }
+    const path = cleanPath(currentPath);
+    const href = cleanPath(item.href);
+    if (!path || !href)
+        return false;
+    if (item.exact)
+        return path === href;
+    return path === href || path.startsWith(`${href}/`);
+}
+
+export { isNavItemActive, toOptionalSet };

package/dist/components/blaze-layout/page-header.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { PageHeaderProps } from "../page-header";
+declare function isPageHeaderConfig(value: PageHeaderProps | React.ReactNode): value is PageHeaderProps;
+export { isPageHeaderConfig };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/blaze-layout/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/page-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAErD,iBAAS,kBAAkB,CACzB,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,GACvC,KAAK,IAAI,eAAe,CAO1B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/blaze-layout/page-header.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+function isPageHeaderConfig(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        "title" in value);
+}
+
+export { isPageHeaderConfig };

package/dist/components/blaze-layout/sidebar-nav.d.ts

@@ -0,0 +1,10 @@
+import type { BlazeLayoutNavItem, BlazeLayoutProps } from "./types";
+declare function BlazeLayoutNavItemView({ item, activeIds, pendingIds, currentPath, renderNavLink, }: {
+    item: BlazeLayoutNavItem;
+    activeIds?: Set<string>;
+    pendingIds?: Set<string>;
+    currentPath?: string;
+    renderNavLink?: BlazeLayoutProps["renderNavLink"];
+}): import("react/jsx-runtime").JSX.Element;
+export { BlazeLayoutNavItemView };
+//# sourceMappingURL=sidebar-nav.d.ts.map

package/dist/components/blaze-layout/sidebar-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/sidebar-nav.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAWnE,iBAAS,sBAAsB,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,GACd,EAAE;IACD,IAAI,EAAE,kBAAkB,CAAA;IACxB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACvB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;CAClD,2CA6EA;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/blaze-layout/sidebar-nav.js

@@ -0,0 +1,40 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from '../sidebar.js';
+import { DefaultAnchor } from './default-anchor.js';
+import { isNavItemActive } from './navigation.js';
+
+function renderIcon(icon) {
+    if (!icon)
+        return null;
+    if (React.isValidElement(icon))
+        return icon;
+    const Icon = icon;
+    return jsx(Icon, { className: "tw:size-4" });
+}
+function BlazeLayoutNavItemView({ item, activeIds, pendingIds, currentPath, renderNavLink, }) {
+    const isActive = isNavItemActive(item, activeIds, currentPath);
+    const isPending = Boolean(pendingIds?.has(item.id));
+    const content = (jsxs(Fragment, { children: [renderIcon(item.icon), jsx("span", { children: item.label })] }));
+    const link = renderNavLink ? (renderNavLink({
+        item,
+        isActive,
+        isPending,
+        ariaCurrent: isActive ? "page" : undefined,
+        children: content,
+    })) : (jsx(DefaultAnchor, { href: item.href, disabled: item.disabled, onClick: item.onClick, children: content }));
+    return (jsxs(SidebarMenuItem, { children: [jsx(SidebarMenuButton, { asChild: true, isActive: isActive, tooltip: typeof item.label === "string" ? item.label : undefined, className: "tw:[&>svg]:size-4 tw:data-[active=true]:!bg-sky-500/10 tw:data-[active=true]:!text-sky-500", children: link }), item.children?.length ? (jsx(SidebarMenuSub, { children: item.children.map((child) => {
+                    const childActive = isNavItemActive(child, activeIds, currentPath);
+                    const childPending = Boolean(pendingIds?.has(child.id));
+                    const childContent = (jsxs(Fragment, { children: [renderIcon(child.icon), jsx("span", { children: child.label })] }));
+                    return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, isActive: childActive, children: renderNavLink ? (renderNavLink({
+                                item: child,
+                                isActive: childActive,
+                                isPending: childPending,
+                                ariaCurrent: childActive ? "page" : undefined,
+                                children: childContent,
+                            })) : (jsx(DefaultAnchor, { href: child.href, disabled: child.disabled, onClick: child.onClick, children: childContent })) }) }, child.id));
+                }) })) : null] }));
+}
+
+export { BlazeLayoutNavItemView };

package/dist/components/blaze-layout/types.d.ts

@@ -0,0 +1,85 @@
+import type { ComponentProps, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { DropdownMenuItem } from "../dropdown-menu";
+import type { HeaderAppSwitcherProps } from "../header-app-switcher";
+import type { PageHeaderProps } from "../page-header";
+type BlazeLayoutLinkRenderArgs<TItem> = {
+    item: TItem;
+    isActive: boolean;
+    isPending: boolean;
+    ariaCurrent?: "page";
+    children: ReactNode;
+};
+type BlazeLayoutLinkRenderer<TItem> = (args: BlazeLayoutLinkRenderArgs<TItem>) => ReactNode;
+type BlazeLayoutLogo = {
+    src?: string;
+    alt?: string;
+    node?: ReactNode;
+    label?: ReactNode;
+    beta?: boolean;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+};
+type BlazeLayoutBreadcrumbItem = {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+type BlazeLayoutNavItem = {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    icon?: ElementType<{
+        className?: string;
+    }> | ReactNode;
+    exact?: boolean;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    children?: BlazeLayoutNavItem[];
+};
+type BlazeLayoutNavGroup = {
+    id?: string;
+    label?: ReactNode;
+    items: BlazeLayoutNavItem[];
+};
+type BlazeLayoutUserMenuItem = {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    variant?: "default" | "destructive";
+    onSelect?: ComponentProps<typeof DropdownMenuItem>["onSelect"];
+    disabled?: boolean;
+};
+type BlazeLayoutUser = {
+    initials?: string;
+    name?: ReactNode;
+    email?: ReactNode;
+    avatarSrc?: string;
+    menuItems?: BlazeLayoutUserMenuItem[];
+    logoutItem?: BlazeLayoutUserMenuItem | false;
+};
+type BlazeLayoutSidebarCollapsible = "offcanvas" | "icon" | "none";
+type BlazeLayoutProps = ComponentProps<"div"> & {
+    logo?: BlazeLayoutLogo;
+    breadcrumbs?: BlazeLayoutBreadcrumbItem[];
+    pageHeader?: PageHeaderProps | ReactNode;
+    navGroups?: BlazeLayoutNavGroup[];
+    activeNavItemIds?: Iterable<string>;
+    pendingNavItemIds?: Iterable<string>;
+    currentPath?: string;
+    renderNavLink?: BlazeLayoutLinkRenderer<BlazeLayoutNavItem>;
+    renderBreadcrumbLink?: BlazeLayoutLinkRenderer<BlazeLayoutBreadcrumbItem>;
+    topActions?: ReactNode;
+    appSwitcher?: HeaderAppSwitcherProps | false;
+    user?: BlazeLayoutUser | false;
+    userAction?: ReactNode;
+    shopSwitcher?: ReactNode;
+    sidebarCollapsible?: BlazeLayoutSidebarCollapsible;
+    sidebarOpen?: boolean;
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+};
+export type { BlazeLayoutBreadcrumbItem, BlazeLayoutLinkRenderArgs, BlazeLayoutLinkRenderer, BlazeLayoutLogo, BlazeLayoutNavGroup, BlazeLayoutNavItem, BlazeLayoutProps, BlazeLayoutSidebarCollapsible, BlazeLayoutUser, BlazeLayoutUserMenuItem, };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/blaze-layout/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/types.ts"],"names":[],"mappings":"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"}

package/dist/components/blaze-layout/user-action.d.ts

@@ -0,0 +1,6 @@
+import type { BlazeLayoutUser } from "./types";
+declare function BlazeLayoutUserAction({ user }: {
+    user?: BlazeLayoutUser;
+}): import("react/jsx-runtime").JSX.Element;
+export { BlazeLayoutUserAction };
+//# sourceMappingURL=user-action.d.ts.map

package/dist/components/blaze-layout/user-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-action.d.ts","sourceRoot":"","sources":["../../../src/components/blaze-layout/user-action.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,iBAAS,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,eAAe,CAAA;CAAE,2CAuElE;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/blaze-layout/user-action.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LogOutIcon } from 'lucide-react';
+import { Avatar, AvatarImage, AvatarFallback } from '../avatar.js';
+import { Button } from '../button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from '../dropdown-menu.js';
+
+function BlazeLayoutUserAction({ user }) {
+    const resolvedUser = {
+        initials: "U",
+        name: "User",
+        ...user,
+    };
+    const menuItems = resolvedUser.menuItems ?? [];
+    const logoutItem = resolvedUser.logoutItem;
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", "aria-label": "User menu", children: jsxs(Avatar, { className: "tw:size-8", children: [resolvedUser.avatarSrc ? (jsx(AvatarImage, { src: resolvedUser.avatarSrc, alt: "" })) : null, jsx(AvatarFallback, { className: "tw:text-xs tw:font-medium", children: resolvedUser.initials })] }) }) }), jsxs(DropdownMenuContent, { align: "end", className: "tw:w-56", children: [jsxs(DropdownMenuLabel, { className: "tw:flex tw:min-w-0 tw:items-center tw:gap-2", children: [jsxs(Avatar, { children: [resolvedUser.avatarSrc ? (jsx(AvatarImage, { src: resolvedUser.avatarSrc, alt: "" })) : null, jsx(AvatarFallback, { className: "tw:text-xs tw:font-medium", children: resolvedUser.initials })] }), jsxs("span", { className: "tw:min-w-0 tw:leading-tight", children: [jsx("span", { className: "tw:block tw:truncate tw:font-semibold", children: resolvedUser.name }), resolvedUser.email ? (jsx("span", { className: "tw:block tw:truncate tw:text-xs tw:text-muted-foreground", children: resolvedUser.email })) : null] })] }), menuItems.length || logoutItem !== false ? (jsx(DropdownMenuSeparator, {})) : null, menuItems.map((item) => (jsxs(DropdownMenuItem, { variant: item.variant, disabled: item.disabled, onSelect: item.onSelect, children: [item.icon, item.label] }, item.id))), logoutItem !== false ? (jsxs(DropdownMenuItem, { variant: logoutItem?.variant ?? "destructive", disabled: logoutItem?.disabled, onSelect: logoutItem?.onSelect, children: [logoutItem?.icon ?? jsx(LogOutIcon, { className: "tw:size-4" }), logoutItem?.label ?? "Sign out"] })) : null] })] }));
+}
+
+export { BlazeLayoutUserAction };

package/dist/components/blaze-layout.d.ts

@@ -0,0 +1,4 @@
+export { BlazeLayout, BlazeLayoutDummyShopSwitcher, } from "./blaze-layout/blaze-layout";
+export { BlazeLayoutUserAction } from "./blaze-layout/user-action";
+export type { BlazeLayoutBreadcrumbItem, BlazeLayoutLinkRenderArgs, BlazeLayoutLinkRenderer, BlazeLayoutLogo, BlazeLayoutNavGroup, BlazeLayoutNavItem, BlazeLayoutProps, BlazeLayoutSidebarCollapsible, BlazeLayoutUser, BlazeLayoutUserMenuItem, } from "./blaze-layout/types";
+//# sourceMappingURL=blaze-layout.d.ts.map

package/dist/components/blaze-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blaze-layout.d.ts","sourceRoot":"","sources":["../../src/components/blaze-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,4BAA4B,GAC7B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,6BAA6B,EAC7B,eAAe,EACf,uBAAuB,GACxB,MAAM,sBAAsB,CAAA"}

package/dist/components/button-group.js

@@ -4,11 +4,11 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../lib/utils.js';
 import { Separator } from './separator.js';
 
-const buttonGroupVariants = cva("tw:flex tw:w-fit tw:items-stretch [&>*]:focus-visible:tw:z-10 [&>*]:focus-visible:tw:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:tw:w-fit [&>input]:tw:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:tw:rounded-r-md has-[>[data-slot=button-group]]:tw:gap-2", {
+const buttonGroupVariants = cva("tw:flex tw:w-fit tw:items-stretch tw:[&>*]:focus-visible:z-10 tw:[&>*]:focus-visible:relative tw:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit tw:[&>input]:flex-1 tw:has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md tw:has-[>[data-slot=button-group]]:gap-2", {
     variants: {
         orientation: {
-            horizontal: "[&>*:not(:first-child)]:tw:rounded-l-none [&>*:not(:first-child)]:tw:border-l-0 [&>*:not(:last-child)]:tw:rounded-r-none",
-            vertical: "tw:flex-col [&>*:not(:first-child)]:tw:rounded-t-none [&>*:not(:first-child)]:tw:border-t-0 [&>*:not(:last-child)]:tw:rounded-b-none",
+            horizontal: "tw:[&>*:not(:first-child)]:rounded-l-none tw:[&>*:not(:first-child)]:border-l-0 tw:[&>*:not(:last-child)]:rounded-r-none",
+            vertical: "tw:flex-col tw:[&>*:not(:first-child)]:rounded-t-none tw:[&>*:not(:first-child)]:border-t-0 tw:[&>*:not(:last-child)]:rounded-b-none",
         },
     },
     defaultVariants: {
@@ -20,10 +20,10 @@ function ButtonGroup({ className, orientation, ...props }) {
 }
 function ButtonGroupText({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : "div";
-    return (jsx(Comp, { className: cn("tw:bg-muted tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-4 tw:text-sm tw:font-medium tw:shadow-xs [&_svg]:tw:pointer-events-none [&_svg:not([class*='size-'])]:tw:size-4", className), ...props }));
+    return (jsx(Comp, { className: cn("tw:bg-muted tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-4 tw:text-sm tw:font-medium tw:shadow-xs tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-    return (jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("tw:bg-input tw:relative !tw:m-0 tw:self-stretch data-[orientation=vertical]:tw:h-auto", className), ...props }));
+    return (jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("tw:bg-input tw:relative tw:!m-0 tw:self-stretch tw:data-[orientation=vertical]:h-auto", className), ...props }));
 }
 
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button.js

@@ -5,20 +5,20 @@ import { cva } from 'class-variance-authority';
 import { LoaderCircleIcon } from 'lucide-react';
 import { cn } from '../lib/utils.js';
 
-const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:rounded-md tw:text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer disabled:tw:!cursor-not-allowed disabled:tw:!pointer-events-none data-[disabled]:tw:!pointer-events-none data-[loading]:tw:!pointer-events-none disabled:tw:!opacity-50 data-[disabled]:tw:!opacity-50 [&_svg]:tw:!pointer-events-none [&_svg:not([class*='size-'])]:tw:!size-4 tw:!shrink-0 [&_svg]:tw:!shrink-0 tw:!outline-none focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px] aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40 aria-invalid:tw:!border-destructive", {
+const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:rounded-md tw:text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer tw:disabled:!cursor-not-allowed tw:disabled:!pointer-events-none tw:data-[disabled]:!pointer-events-none tw:data-[loading]:!pointer-events-none tw:disabled:!opacity-50 tw:data-[disabled]:!opacity-50 tw:[&_svg]:!pointer-events-none tw:[&_svg:not([class*='size-'])]:!size-4 tw:!shrink-0 tw:[&_svg]:!shrink-0 tw:!outline-none tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px] tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40 tw:aria-invalid:!border-destructive", {
     variants: {
         variant: {
-            default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs hover:tw:!bg-primary/90",
-            destructive: "tw:!bg-destructive tw:!text-white tw:!shadow-xs hover:tw:!bg-destructive/90 focus-visible:tw:!ring-destructive/20 dark:focus-visible:tw:!ring-destructive/40 dark:tw:!bg-destructive/60",
-            outline: "tw:!border tw:!bg-background tw:!shadow-xs hover:tw:!bg-accent hover:tw:!text-accent-foreground dark:tw:!bg-input/30 dark:tw:!border-input dark:hover:tw:!bg-input/50",
-            secondary: "tw:!bg-secondary tw:!text-secondary-foreground tw:!shadow-xs hover:tw:!bg-secondary/80",
-            ghost: "hover:tw:!bg-accent hover:tw:!text-accent-foreground dark:hover:tw:!bg-accent/50",
-            link: "tw:!text-primary tw:!underline-offset-4 hover:tw:!underline",
+            default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs tw:hover:!bg-primary/90",
+            destructive: "tw:!bg-destructive tw:!text-white tw:!shadow-xs tw:hover:!bg-destructive/90 tw:focus-visible:!ring-destructive/20 tw:dark:focus-visible:!ring-destructive/40 tw:dark:!bg-destructive/60",
+            outline: "tw:!border tw:!bg-background tw:!shadow-xs tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:dark:!bg-input/30 tw:dark:!border-input tw:dark:hover:!bg-input/50",
+            secondary: "tw:!bg-secondary tw:!text-secondary-foreground tw:!shadow-xs tw:hover:!bg-secondary/80",
+            ghost: "tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:dark:hover:!bg-accent/50",
+            link: "tw:!text-primary tw:!underline-offset-4 tw:hover:!underline",
         },
         size: {
-            default: "tw:!h-9 tw:!px-4 tw:!py-2 has-[>svg]:tw:!px-3",
-            sm: "tw:!h-8 tw:!rounded-md tw:!gap-1.5 tw:!px-3 has-[>svg]:tw:!px-2.5",
-            lg: "tw:!h-10 tw:!rounded-md tw:!px-6 has-[>svg]:tw:!px-4",
+            default: "tw:!h-9 tw:!px-4 tw:!py-2 tw:has-[>svg]:!px-3",
+            sm: "tw:!h-8 tw:!rounded-md tw:!gap-1.5 tw:!px-3 tw:has-[>svg]:!px-2.5",
+            lg: "tw:!h-10 tw:!rounded-md tw:!px-6 tw:has-[>svg]:!px-4",
             icon: "tw:!size-9",
         },
     },

package/dist/components/chart.js

@@ -16,7 +16,7 @@ function useChart() {
 function ChartContainer({ id, className, children, config, ...props }) {
     const uniqueId = React.useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-    return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:tw:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:tw:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:tw:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:tw:stroke-border [&_.recharts-radial-bar-background-sector]:tw:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:tw:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:tw:stroke-border tw:flex tw:aspect-video tw:justify-center tw:text-xs [&_.recharts-dot[stroke='#fff']]:tw:stroke-transparent [&_.recharts-layer]:tw:outline-hidden [&_.recharts-sector]:tw:outline-hidden [&_.recharts-sector[stroke='#fff']]:tw:stroke-transparent [&_.recharts-surface]:tw:outline-hidden", className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+    return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground tw:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border tw:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border tw:[&_.recharts-radial-bar-background-sector]:fill-muted tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted tw:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border tw:flex tw:aspect-video tw:justify-center tw:text-xs tw:[&_.recharts-dot[stroke='#fff']]:stroke-transparent tw:[&_.recharts-layer]:outline-hidden tw:[&_.recharts-sector]:outline-hidden tw:[&_.recharts-sector[stroke='#fff']]:stroke-transparent tw:[&_.recharts-surface]:outline-hidden", className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
 }
 const ChartStyle = ({ id, config }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
@@ -78,7 +78,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                     const key = `${nameKey || item.name || item.dataKey || "value"}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color || item.payload?.fill || item.color;
-                    return (jsx("div", { className: cn("[&>svg]:tw:text-muted-foreground tw:flex tw:w-full tw:flex-wrap tw:items-stretch tw:gap-2 [&>svg]:tw:h-2.5 [&>svg]:tw:w-2.5", indicator === "dot" && "tw:items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn("tw:shrink-0 tw:rounded-[2px] tw:border-(--color-border) tw:bg-(--color-bg)", {
+                    return (jsx("div", { className: cn("tw:[&>svg]:text-muted-foreground tw:flex tw:w-full tw:flex-wrap tw:items-stretch tw:gap-2 tw:[&>svg]:h-2.5 tw:[&>svg]:w-2.5", indicator === "dot" && "tw:items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn("tw:shrink-0 tw:rounded-[2px] tw:border-(--color-border) tw:bg-(--color-bg)", {
                                         "tw:h-2.5 tw:w-2.5": indicator === "dot",
                                         "tw:w-1": indicator === "line",
                                         "tw:w-0 tw:border-[1.5px] tw:border-dashed tw:bg-transparent": indicator === "dashed",
@@ -100,7 +100,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
             .map((item) => {
             const key = `${nameKey || item.dataKey || "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (jsxs("div", { className: cn("[&>svg]:tw:text-muted-foreground tw:flex tw:items-center tw:gap-1.5 [&>svg]:tw:h-3 [&>svg]:tw:w-3"), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: "tw:h-2 tw:w-2 tw:shrink-0 tw:rounded-[2px]", style: {
+            return (jsxs("div", { className: cn("tw:[&>svg]:text-muted-foreground tw:flex tw:items-center tw:gap-1.5 tw:[&>svg]:h-3 tw:[&>svg]:w-3"), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: "tw:h-2 tw:w-2 tw:shrink-0 tw:rounded-[2px]", style: {
                             backgroundColor: item.color,
                         } })), itemConfig?.label] }, String(item.value ?? item.dataKey ?? item.name)));
         }) }));

package/dist/components/command.js

@@ -8,10 +8,10 @@ function Command({ className, ...props }) {
     return (jsx(Command$1, { "data-slot": "command", className: cn("tw:bg-popover tw:text-popover-foreground tw:flex tw:h-full tw:w-full tw:flex-col tw:overflow-hidden tw:rounded-md", className), ...props }));
 }
 function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
-    return (jsxs(Dialog, { ...props, children: [jsxs(DialogHeader, { className: "tw:sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: cn("tw:overflow-hidden tw:p-0", className), showCloseButton: showCloseButton, children: jsx(Command, { className: "[&_[cmdk-group-heading]]:tw:text-muted-foreground **:data-[slot=command-input-wrapper]:tw:h-12 [&_[cmdk-group-heading]]:tw:px-2 [&_[cmdk-group-heading]]:tw:font-medium [&_[cmdk-group]]:tw:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:tw:pt-0 [&_[cmdk-input-wrapper]_svg]:tw:h-5 [&_[cmdk-input-wrapper]_svg]:tw:w-5 [&_[cmdk-input]]:tw:h-12 [&_[cmdk-item]]:tw:px-2 [&_[cmdk-item]]:tw:py-3 [&_[cmdk-item]_svg]:tw:h-5 [&_[cmdk-item]_svg]:tw:w-5", children: children }) })] }));
+    return (jsxs(Dialog, { ...props, children: [jsxs(DialogHeader, { className: "tw:sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: cn("tw:overflow-hidden tw:p-0", className), showCloseButton: showCloseButton, children: jsx(Command, { className: "tw:[&_[cmdk-group-heading]]:text-muted-foreground tw:**:data-[slot=command-input-wrapper]:h-12 tw:[&_[cmdk-group-heading]]:px-2 tw:[&_[cmdk-group-heading]]:font-medium tw:[&_[cmdk-group]]:px-2 tw:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 tw:[&_[cmdk-input-wrapper]_svg]:h-5 tw:[&_[cmdk-input-wrapper]_svg]:w-5 tw:[&_[cmdk-input]]:h-12 tw:[&_[cmdk-item]]:px-2 tw:[&_[cmdk-item]]:py-3 tw:[&_[cmdk-item]_svg]:h-5 tw:[&_[cmdk-item]_svg]:w-5", children: children }) })] }));
 }
 function CommandInput({ className, ...props }) {
-    return (jsxs("div", { "data-slot": "command-input-wrapper", className: "tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3", children: [jsx(SearchIcon, { className: "tw:size-4 tw:shrink-0 tw:opacity-50" }), jsx(Command$1.Input, { "data-slot": "command-input", className: cn("placeholder:tw:text-muted-foreground tw:flex tw:h-10 tw:w-full tw:rounded-md tw:bg-transparent tw:py-3 tw:text-sm tw:outline-hidden disabled:tw:cursor-not-allowed disabled:tw:opacity-50", className), ...props })] }));
+    return (jsxs("div", { "data-slot": "command-input-wrapper", className: "tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3", children: [jsx(SearchIcon, { className: "tw:size-4 tw:shrink-0 tw:opacity-50" }), jsx(Command$1.Input, { "data-slot": "command-input", className: cn("tw:placeholder:text-muted-foreground tw:flex tw:h-10 tw:w-full tw:rounded-md tw:bg-transparent tw:py-3 tw:text-sm tw:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props })] }));
 }
 function CommandList({ className, ...props }) {
     return (jsx(Command$1.List, { "data-slot": "command-list", className: cn("tw:max-h-[300px] tw:scroll-py-1 tw:overflow-x-hidden tw:overflow-y-auto", className), ...props }));
@@ -20,13 +20,13 @@ function CommandEmpty({ ...props }) {
     return (jsx(Command$1.Empty, { "data-slot": "command-empty", className: "tw:py-6 tw:text-center tw:text-sm", ...props }));
 }
 function CommandGroup({ className, ...props }) {
-    return (jsx(Command$1.Group, { "data-slot": "command-group", className: cn("tw:text-foreground [&_[cmdk-group-heading]]:tw:text-muted-foreground tw:overflow-hidden tw:p-1 [&_[cmdk-group-heading]]:tw:px-2 [&_[cmdk-group-heading]]:tw:py-1.5 [&_[cmdk-group-heading]]:tw:text-xs [&_[cmdk-group-heading]]:tw:font-medium", className), ...props }));
+    return (jsx(Command$1.Group, { "data-slot": "command-group", className: cn("tw:text-foreground tw:[&_[cmdk-group-heading]]:text-muted-foreground tw:overflow-hidden tw:p-1 tw:[&_[cmdk-group-heading]]:px-2 tw:[&_[cmdk-group-heading]]:py-1.5 tw:[&_[cmdk-group-heading]]:text-xs tw:[&_[cmdk-group-heading]]:font-medium", className), ...props }));
 }
 function CommandSeparator({ className, ...props }) {
     return (jsx(Command$1.Separator, { "data-slot": "command-separator", className: cn("tw:bg-border tw:-mx-1 tw:h-px", className), ...props }));
 }
 function CommandItem({ className, ...props }) {
-    return (jsx(Command$1.Item, { "data-slot": "command-item", className: cn("data-[selected=true]:tw:bg-accent data-[selected=true]:tw:text-accent-foreground [&_svg:not([class*='text-'])]:tw:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none data-[disabled=true]:tw:pointer-events-none data-[disabled=true]:tw:opacity-50 [&_svg]:tw:pointer-events-none [&_svg]:tw:shrink-0 [&_svg:not([class*='size-'])]:tw:size-4", className), ...props }));
+    return (jsx(Command$1.Item, { "data-slot": "command-item", className: cn("tw:data-[selected=true]:bg-accent tw:data-[selected=true]:text-accent-foreground tw:[&_svg:not([class*='text-'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled=true]:pointer-events-none tw:data-[disabled=true]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function CommandShortcut({ className, ...props }) {
     return (jsx("span", { "data-slot": "command-shortcut", className: cn("tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest", className), ...props }));