@invana/ui 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -154,12 +154,12 @@ var buttonVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow ring-1 ring-primary/30           hover:ring-primary/50 hover:shadow-lg           active:bg-primary",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm ring-1 ring-destructive/40           hover:ring-destructive/60           active:bg-destructive/70",
-        outline: "bg-background shadow-sm ring-1 ring-border           hover:bg-primary/10 hover:text-primary hover:ring-primary/40           active:bg-primary/20",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm ring-1 ring-border           hover:bg-secondary/80 hover:ring-primary/40           active:bg-secondary/60",
-        ghost: "ring-1 ring-transparent           hover:bg-primary/10 hover:text-primary hover:ring-primary/25           active:bg-primary/15 active:text-primary",
-        soft: "bg-primary/10 text-primary ring-1 ring-primary/30 shadow-sm           hover:bg-primary/20 active:bg-primary/25",
+        default: "bg-[hsl(var(--primary)_/_var(--surface-alpha))] glassable text-primary-foreground shadow ring-1 ring-primary/30           hover:ring-primary/50 hover:shadow-lg           active:bg-[hsl(var(--primary)_/_var(--surface-alpha))]",
+        destructive: "bg-[hsl(var(--destructive)_/_var(--surface-alpha))] glassable text-destructive-foreground shadow-sm ring-1 ring-destructive/40           hover:ring-destructive/60           active:bg-destructive/70",
+        outline: "bg-[hsl(var(--background)_/_var(--surface-alpha))] glassable shadow-sm ring-1 ring-border           hover:bg-[hsl(var(--accent)_/_var(--surface-alpha))] hover:text-accent-foreground           active:bg-[hsl(var(--accent)_/_var(--surface-alpha))]",
+        secondary: "bg-[hsl(var(--secondary)_/_var(--surface-alpha))] glassable text-secondary-foreground shadow-sm ring-1 ring-border           hover:bg-secondary/80 hover:ring-border           active:bg-secondary/60",
+        ghost: "ring-1 ring-transparent           hover:bg-[hsl(var(--accent)_/_var(--surface-alpha))] hover:text-accent-foreground           active:bg-[hsl(var(--accent)_/_var(--surface-alpha))]",
+        soft: "bg-primary/10 glassable text-primary ring-1 ring-primary/30 shadow-sm           hover:bg-primary/20 active:bg-primary/25",
         link: "text-primary underline-offset-4 hover:underline           hover:text-primary/80 active:text-primary/60"
       },
       size: {
@@ -2746,6 +2746,75 @@ var MenuItem = ({
     )
   ] });
 };
+var NavItems = ({
+  items,
+  orientation = "horizontal",
+  tooltipSide = orientation === "vertical" ? "right" : "bottom",
+  iconClassName = orientation === "vertical" ? "w-5 h-5" : "w-4 h-4 flex-shrink-0"
+}) => {
+  const isVertical = orientation === "vertical";
+  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => {
+    const isActive = activeItem === item.name;
+    const padding = item.label ? "px-3 py-1.5" : "px-2 py-2";
+    const itemClass = `inline-flex border-0 items-center justify-center gap-2
+          whitespace-nowrap rounded-md cursor-pointer transition-colors
+          ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          ${padding}
+          hover:bg-primary/10 hover:text-primary hover:ring-primary/25
+          ${isActive ? `bg-primary/15 text-primary ring-primary/25 ${item.activeClass || ""}` : ""}
+          ${item.className || ""}`;
+    const icon = /* @__PURE__ */ jsxRuntime.jsx(
+      item.icon,
+      {
+        strokeWidth: item.iconStroke || 2,
+        className: item.iconClassName || iconClassName
+      }
+    );
+    const label = item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label });
+    return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: item.href,
+            onClick: () => setActiveItem(item.name),
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              item.onClick?.();
+              setActiveItem(isActive ? null : item.name);
+            },
+            className: itemClass,
+            children: [
+              icon,
+              label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemClass, children: [
+          icon,
+          label
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
+      ] }),
+      item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(
+        Separator,
+        {
+          orientation: isVertical ? "horizontal" : "vertical",
+          className: isVertical ? "" : "h-4"
+        }
+      )
+    ] }, item.key || item.name);
+  }) });
+};
 var NavBase = ({ className = "", orientation, sections }) => {
   const isVertical = orientation === "vertical";
   const containerClass = isVertical ? `flex flex-col items-center h-full ${className}` : `flex items-center   w-full ${className}`;
@@ -2759,75 +2828,7 @@ var NavBase = ({ className = "", orientation, sections }) => {
     sections.end?.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`, children: sections.end.content })
   ] });
 };
-var NavHorizontalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: item.href,
-          onClick: () => setActiveItem(item.name),
-          className: `flex border-0 items-center justify-center gap-2
-                    transition-colors rounded-md h-full whitespace-nowrap
-                    hover:bg-muted hover:text-foreground ${item.label ? "px-3" : "px-2"} ${item.className || ""}
-                    ${activeItem === item.name ? "bg-primary/15 text-primary ring-1 ring-primary/25" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          size: item.label ? "sm" : "icon",
-          variant: "ghost",
-          onClick: () => {
-            if (item.onClick) item.onClick();
-            setActiveItem(item.name === activeItem ? null : item.name);
-          },
-          className: `h-full gap-2 whitespace-nowrap ${item.label ? "w-auto px-3" : ""} ${item.className || ""}
-                    ${activeItem === item.name ? ` ${item?.activeClass || ""}` : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `flex border-0 items-center justify-center gap-2 h-full whitespace-nowrap
-                    transition-colors rounded-md  ${item.label ? "px-3" : "px-2"} ${item.className || ""}
-                    ${activeItem === item.name ? "bg-primary/15 text-primary ring-1 ring-primary/25" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              item.icon,
-              {
-                strokeWidth: item.iconStroke || 2,
-                className: item.iconClassName || "w-4 h-4 flex-shrink-0"
-              }
-            ),
-            item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide || "bottom", children: item.tooltip || item.name })
-    ] }),
-    item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" })
-  ] }, item.key || item.name)) });
-};
+var NavHorizontalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "horizontal" });
 var NavHorizontal = ({
   left,
   leftNavItems,
@@ -2866,48 +2867,7 @@ var NavHorizontal = ({
     }
   );
 };
-var NavVerticalItems = ({ items }) => {
-  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: item.href,
-          onClick: () => setActiveItem(item.name),
-          className: ` flex border-0 items-center justify-center 
-              transition-colors rounded-md
-              hover:text-primary/80 px-2 py-2 ${item.className || ""}
-              ${activeItem === item.name ? "bg-accent text-accent-foreground" : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "nav-icon",
-          variant: "ghost",
-          onClick: () => {
-            if (item.onClick) item.onClick();
-            setActiveItem(item.name === activeItem ? null : item.name);
-          },
-          className: `${item.className || ""}
-          ${activeItem === item.name ? ` ${item?.activeClass || ""}` : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: ` flex border-0  items-center justify-center 
-          transition-colors  rounded-md  px-2 py-2 ${item.className || ""}
-          ${activeItem === item.name ? "bg-accent text-accent-foreground" : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx(item.icon, { strokeWidth: item.iconStroke ? item.iconStroke : 2, className: item.iconClassName ? item.iconClassName : "w-5 h-5" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide ? item.tooltipSide : "right", children: item.tooltip || item.name })
-    ] }, item.name),
-    item.showSeperator && /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
-  ] }, item.name)) });
-};
+var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "vertical" });
 var NavVertical = ({
   className = "",
   top,
@@ -3877,6 +3837,7 @@ exports.MenubarTrigger = MenubarTrigger;
 exports.NavBase = NavBase;
 exports.NavHorizontal = NavHorizontal;
 exports.NavHorizontalItems = NavHorizontalItems;
+exports.NavItems = NavItems;
 exports.NavVertical = NavVertical;
 exports.NavVerticalItems = NavVerticalItems;
 exports.NavigationMenu = NavigationMenu;