@ztwoint/z-ui 0.1.9 → 0.1.11

package/README.md

@@ -19,6 +19,7 @@ npm install @ztwoint/z-ui
 # or
 yarn add @ztwoint/z-ui
 ```
+
 > Note: To use this package on a remote server, you need to set up an SSH key with access to this repository.
 
-This package will be published to npm registry later.
+This package will be published to npm registry later.

package/dist/components/button/button.js

@@ -50,12 +50,12 @@ const N = z(
       {
         variant: "stroke",
         shade: "neutral",
-        class: "shadown-default button-secondary-surface-default text-default-primary hover:button-secondary-surface-hover hover:text-default-secondary active:button-secondary-surface-pressed active:text-default-disabled disabled:button-secondary-surface-disabled disabled:text-default-disabled"
+        class: "border-none shadow-default button-secondary-surface-default text-default-primary hover:button-secondary-surface-hover hover:text-default-secondary active:button-secondary-surface-pressed active:text-default-disabled disabled:button-secondary-surface-disabled disabled:text-default-disabled"
       },
       {
         variant: "stroke",
         shade: "danger",
-        class: "shadown-default button-secondary-surface-default text-default-danger hover:button-secondary-surface-hover hover:text-default-danger active:button-secondary-surface-pressed active:text-default-danger disabled:button-secondary-surface-disabled disabled:text-default-disabled"
+        class: "border-none shadow-default button-secondary-surface-default text-default-danger hover:button-secondary-surface-hover hover:text-default-danger active:button-secondary-surface-pressed active:text-default-danger disabled:button-secondary-surface-disabled disabled:text-default-disabled"
       },
       {
         variant: "ghost",
@@ -76,17 +76,17 @@ const N = z(
     shade: c,
     size: b,
     variant: f,
-    asChild: l = !1,
+    asChild: o = !1,
     leftIcon: a,
     rightIcon: t,
     label: p,
-    children: o,
+    children: l,
     ...m
   }, v) => {
-    const y = l ? O : "button", r = p || o, s = !r && !!(a || t), i = s ? a || t : null, h = n(
+    const y = o ? O : "button", r = p || l, s = !r && !!(a || t), i = s ? a || t : null, h = n(
       N({ shade: c, size: b, variant: f, iconOnly: s, className: u })
     ), d = "w-3.5 h-3.5";
-    return /* @__PURE__ */ e(y, { className: h, ref: v, ...m, children: l ? o : s ? i ? /* @__PURE__ */ e("span", { className: d, children: i }) : null : /* @__PURE__ */ x(g, { children: [
+    return /* @__PURE__ */ e(y, { className: h, ref: v, ...m, children: o ? l : s ? i ? /* @__PURE__ */ e("span", { className: d, children: i }) : null : /* @__PURE__ */ x(g, { children: [
       a && /* @__PURE__ */ e("span", { className: n(d), children: a }),
       r && /* @__PURE__ */ e("span", { children: r }),
       t && /* @__PURE__ */ e("span", { className: n(d), children: t })

package/dist/components/collapsible-side-nav-bar/side-nav-bar-header.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import * as n from "react";
 import { cn as x } from "../../lib/utils.js";
 import { useZ2SideNavBar as N } from "./context.js";
@@ -7,26 +7,26 @@ import w from "../assets/icons/sidebar-left-show-copy.js";
 const C = n.forwardRef(
   ({
     className: o,
-    children: s,
+    children: l,
     showCollapseButton: g = !0,
-    icon: r,
-    title: a,
+    icon: s,
+    title: r,
     forceMultiLine: c = !1,
     ...d
   }, m) => {
-    const { toggleCollapsed: p, isCollapsed: i } = N(), [v, h] = n.useState(c), f = n.useRef(null), b = v || !!s;
+    const { toggleCollapsed: p, isCollapsed: i } = N(), [v, h] = n.useState(c), f = n.useRef(null), b = v || !!l;
     return n.useEffect(() => {
       if (c) {
         h(!0);
         return;
       }
-      if (f.current && !i && a) {
+      if (f.current && !i && r) {
         const t = document.createElement("span");
-        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = a, document.body.appendChild(t);
+        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = r, document.body.appendChild(t);
         const y = t.offsetWidth;
         document.body.removeChild(t), h(y > 168);
       }
-    }, [a, i, c]), i && r ? /* @__PURE__ */ e(
+    }, [r, i, c]), i ? /* @__PURE__ */ e(
       "div",
       {
         ref: m,
@@ -45,7 +45,7 @@ const C = n.forwardRef(
           }
         )
       }
-    ) : b && !i ? /* @__PURE__ */ l(
+    ) : b && !i ? /* @__PURE__ */ a(
       "div",
       {
         ref: m,
@@ -55,8 +55,8 @@ const C = n.forwardRef(
         ),
         ...d,
         children: [
-          /* @__PURE__ */ l("div", { className: "header-icons-container flex justify-between items-center self-stretch relative", children: [
-            r && /* @__PURE__ */ e("div", { className: "database-icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: r }) }),
+          /* @__PURE__ */ a("div", { className: "header-icons-container flex justify-between items-center self-stretch relative", children: [
+            s && /* @__PURE__ */ e("div", { className: "database-icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
             g && /* @__PURE__ */ e(
               "button",
               {
@@ -67,20 +67,20 @@ const C = n.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ l("div", { className: "text-preset-container flex flex-col items-start gap-2.5 self-stretch relative", children: [
-            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: a }),
+          /* @__PURE__ */ a("div", { className: "text-preset-container flex flex-col items-start gap-2.5 self-stretch relative", children: [
+            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: r }),
             /* @__PURE__ */ e(
               "div",
               {
                 ref: f,
                 className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-gray-600 text-ellipsis text-sm font-normal leading-none tracking-tight relative",
-                children: s
+                children: l
               }
             )
           ] })
         ]
       }
-    ) : /* @__PURE__ */ l(
+    ) : /* @__PURE__ */ a(
       "div",
       {
         ref: m,
@@ -90,15 +90,15 @@ const C = n.forwardRef(
         ),
         ...d,
         children: [
-          r && /* @__PURE__ */ e("div", { className: "icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: r }) }),
-          /* @__PURE__ */ l(
+          s && /* @__PURE__ */ e("div", { className: "icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
+          /* @__PURE__ */ a(
             "div",
             {
               ref: f,
               className: "text-content flex flex-col items-start gap-2.5 flex-1 relative",
               children: [
-                /* @__PURE__ */ e("div", { className: "primary-text line-clamp-1 self-stretch overflow-hidden text-gray-950 text-ellipsis text-sm font-medium leading-none tracking-tight relative", children: a }),
-                s && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: s })
+                /* @__PURE__ */ e("div", { className: "primary-text line-clamp-1 self-stretch overflow-hidden text-gray-950 text-ellipsis text-sm font-medium leading-none tracking-tight relative", children: r }),
+                l && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: l })
               ]
             }
           ),

package/dist/components/collapsible-side-nav-bar/side-nav-bar-item.js

@@ -124,7 +124,7 @@ const K = d.forwardRef(
               ...N,
               children: [
                 m && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: m }),
-                o && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: c }) }),
+                o && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1 py-1", children: c }) }),
                 o && n && /* @__PURE__ */ r(P, { children: t ? /* @__PURE__ */ r(
                   B,
                   {

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,12 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare function Z2Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {}): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Z2Dialog, Z2DialogContent, Z2DialogDescription, Z2DialogFooter, Z2DialogHeader, Z2DialogOverlay, Z2DialogPortal, Z2DialogClose, Z2DialogTitle, Z2DialogTrigger, };

package/dist/components/dialog/dialog.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2Dialog } from './dialog';
+declare const meta: Meta<typeof Z2Dialog>;
+export default meta;
+type Story = StoryObj<typeof Z2Dialog>;
+export declare const Default: Story;
+export declare const WithLongDescription: Story;
+export declare const CustomFooter: Story;
+export declare const Fullscreen: Story;
+export declare const CloseInHeader: Story;

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+export interface TooltipProps extends Omit<RadixTooltip.TooltipContentProps, 'children' | 'asChild'> {
+    /**
+     * The content to show inside the tooltip.
+     */
+    message: React.ReactNode;
+    /**
+     * The element that triggers the tooltip (usually a button, icon, etc).
+     */
+    children: React.ReactNode;
+    /**
+     * Delay in ms before showing the tooltip (default: 300)
+     */
+    delayDuration?: number;
+}
+/**
+ * A reusable Tooltip component using Radix Tooltip primitive.
+ * Wraps any element as a trigger and shows a message on hover/focus.
+ */
+export declare const Z2Tooltip: React.FC<TooltipProps>;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,32 @@
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-tooltip";
+import { cn as s } from "../../lib/utils.js";
+const m = ({
+  message: a,
+  children: r,
+  delayDuration: i = 300,
+  side: d = "top",
+  className: n,
+  ...l
+}) => /* @__PURE__ */ o(t.Provider, { delayDuration: i, children: /* @__PURE__ */ e(t.Root, { children: [
+  /* @__PURE__ */ o(t.Trigger, { asChild: !0, children: r }),
+  /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ e(
+    t.Content,
+    {
+      side: d,
+      className: s(
+        "bg-[var(--color-neutral-950)] border-none text-white leading-none-regular-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-1 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        n
+      ),
+      ...l,
+      children: [
+        a,
+        /* @__PURE__ */ o(t.Arrow, { className: "bg-[var(--color-neutral-950)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) })
+] }) });
+m.displayName = "Z2Tooltip";
+export {
+  m as Z2Tooltip
+};

package/dist/components/tooltip/tooltip.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2Tooltip } from './tooltip';
+declare const meta: Meta<typeof Z2Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Z2Tooltip>;
+export declare const Default: Story;
+export declare const IconTrigger: Story;
+export declare const AllSides: Story;
+export declare const CustomStyling: Story;
+export declare const CustomDelay: Story;

package/dist/css/config/colors/components/button.css

@@ -86,8 +86,8 @@
 }
 
 /* Shadow utility class */
-@utility shadown-default {
+@utility shadow-default {
   box-shadow:
     0px 1px 2px 0px var(--color-alpha-dark-50),
-    0px 0px 0px var(0.5px) var(--color-neutral-150);
+    0px 0px 0px 0.5px var(--color-neutral-150);
 }

package/dist/css/config/colors/components/tab.css

@@ -57,4 +57,4 @@
 /* Hover state for icon */
 [data-slot='tabs-trigger']:hover .tab-icon {
   color: var(--color-neutral-950) !important;
-}
+}

package/dist/css/config/colors/text.css

@@ -74,4 +74,4 @@
 
 .text-default-muted {
   color: var(--color-neutral-400);
-}
+}

package/dist/css/config/config.css

@@ -36,4 +36,4 @@
   * {
     font-family: inherit;
   }
-}
+}