@ztwoint/z-ui 0.1.8 → 0.1.10

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

@@ -0,0 +1,42 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as f from "react";
+import { cva as n } from "class-variance-authority";
+import { cn as u } from "../../lib/utils.js";
+import { useZ2SideNavBar as m } from "./context.js";
+const p = n(
+  "relative flex flex-col h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      variant: {
+        default: "h-full",
+        floating: "h-full rounded-lg shadow-lg",
+        inset: "h-full border-l-0 border-r-0"
+      },
+      side: {
+        left: "left-0",
+        right: "right-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      side: "left"
+    }
+  }
+), c = f.forwardRef(
+  ({ className: a, variant: e, side: t, children: i, ...l }, o) => {
+    const { isCollapsed: r } = m(), s = u(
+      p({ variant: e, side: t }),
+      {
+        "w-42px": r,
+        "w-240px": !r
+      },
+      a
+    );
+    return /* @__PURE__ */ d("div", { ref: o, "data-sidebar": !0, className: s, ...l, children: i });
+  }
+);
+c.displayName = "Z2SideNavBar";
+export {
+  c as Z2SideNavBar,
+  p as Z2SidebarVariants
+};

package/dist/components/collapsible-side-nav-bar/side-nav-bar.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2SideNavBar } from './index';
+declare const meta: Meta<typeof Z2SideNavBar>;
+export default meta;
+type Story = StoryObj<typeof Z2SideNavBar>;
+export declare const Default: Story;

package/dist/components/collapsible-side-nav-bar/types.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+export interface Z2SideNavBarContextType {
+    isCollapsed: boolean;
+    toggleCollapsed: () => void;
+}
+export interface Z2SideNavBarProviderProps {
+    children: React.ReactNode;
+    defaultCollapsed?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface Z2SideNavBarProps {
+    className?: string;
+    children?: React.ReactNode;
+    variant?: 'default' | 'floating' | 'inset';
+    side?: 'left' | 'right';
+}
+export interface Z2SideNavBarHeaderProps {
+    className?: string;
+    children?: React.ReactNode;
+    showCollapseButton?: boolean;
+    icon?: React.ReactNode;
+    title?: string;
+    forceMultiLine?: boolean;
+}
+export interface Z2SideNavBarContentProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface Z2SideNavBarFooterProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface Z2SideNavBarGroupProps {
+    className?: string;
+    children?: React.ReactNode;
+    title?: string;
+}
+export interface Z2SubNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    isActive?: boolean;
+}
+export interface Z2SideNavBarItemProps {
+    className?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    label?: string;
+    href?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    tooltip?: string;
+    subItems?: Z2SubNavItem[];
+}
+export interface Z2SideNavBarSeparatorProps {
+    className?: string;
+}
+export interface Z2PopoverContextType {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    triggerId: string;
+    cancelClose?: () => void;
+    scheduleClose?: () => void;
+}
+export interface Z2PopoverProps {
+    children: React.ReactNode;
+    delayDuration?: number;
+}
+export interface Z2PopoverTriggerProps {
+    children: React.ReactNode;
+    asChild?: boolean;
+}
+export interface Z2PopoverContentProps {
+    children: React.ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+export interface Z2IconProps {
+    className?: string;
+    style?: React.CSSProperties;
+}

package/dist/components/country-flags/__tests__/country-flags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/country-flags/country-flags.d.ts

@@ -0,0 +1,8 @@
+import { default as ReactCountryFlag } from 'react-country-flag';
+import { ComponentProps } from 'react';
+interface CountryFlagsProps extends Omit<ComponentProps<typeof ReactCountryFlag>, 'countryCode'> {
+    countryCode?: string;
+    className?: string;
+}
+export declare const CountryFlags: ({ countryCode, className, ...props }: CountryFlagsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/country-flags/country-flags.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import a from "react-country-flag";
+import n from "classnames";
+const d = ({
+  countryCode: e = "US",
+  className: s = "",
+  ...t
+}) => {
+  const r = s.includes("w-"), l = s.includes("h-");
+  return /* @__PURE__ */ o(
+    a,
+    {
+      svg: !0,
+      countryCode: e,
+      ...t,
+      style: {
+        width: "auto",
+        height: "revert-layer",
+        ...t.style
+      },
+      className: n(
+        "inline-block rounded-full object-cover aspect-square brightness-97",
+        {
+          "w-10": !r,
+          "h-10": !l
+        },
+        s
+      )
+    }
+  );
+};
+export {
+  d as CountryFlags
+};

package/dist/components/country-flags/country-flags.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CountryFlags } from './country-flags';
+declare const meta: Meta<typeof CountryFlags>;
+export default meta;
+type Story = StoryObj<typeof CountryFlags>;
+export declare const Default: Story;
+export declare const CustomSize: Story;
+export declare const SmallFlag: Story;
+export declare const LargeFlag: Story;
+export declare const CustomStyling: Story;
+export declare const DifferentCountries: Story;

package/dist/components/input/__tests__/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input/input.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Input: React.FC<React.InputHTMLAttributes<HTMLInputElement>>;

package/dist/components/input/input.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+const e = (r) => /* @__PURE__ */ o(
+  "input",
+  {
+    className: "border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+    ...r
+  }
+);
+export {
+  e as Input
+};

package/dist/components/nav-header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './nav-header';
+export * from './nav-item/nav-item';

package/dist/components/nav-header/nav-header.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { NavItemProps } from './nav-item/nav-item';
+export type { NavItemProps } from './nav-item/nav-item';
+export declare const NavHeader: {
+    Root: {
+        ({ className, children, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, children, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, ...props }: NavItemProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default NavHeader;

package/dist/components/nav-header/nav-header.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createContext as d } from "react";
+import n from "../assets/icons/z2-icon.js";
+import { cn as s } from "../../lib/utils.js";
+import { NavItem as c } from "./nav-item/nav-item.js";
+const N = d({}), i = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e(N.Provider, { value: {}, children: /* @__PURE__ */ l(
+  "header",
+  {
+    className: s(
+      "flex items-center h-14 p-3",
+      "gap-6",
+      // space between icon/separator/list
+      "bg-[#001534]",
+      a
+    ),
+    ...t,
+    children: [
+      /* @__PURE__ */ e("div", { className: "flex items-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "shrink-0" }) }),
+      /* @__PURE__ */ e("div", { className: "h-4 w-px bg-white/20", "aria-hidden": "true" }),
+      /* @__PURE__ */ e("div", { className: "flex-1 flex items-center min-w-0", children: r })
+    ]
+  }
+) });
+i.displayName = "NavHeader.Root";
+const m = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e("nav", { className: s("flex flex-row gap-2 ml-0", a), ...t, children: r });
+m.displayName = "NavHeader.List";
+const o = ({
+  className: a,
+  ...r
+}) => /* @__PURE__ */ e("div", { className: s("list-none", a), children: /* @__PURE__ */ e(c, { ...r }) });
+o.displayName = "NavHeader.Item";
+const H = {
+  Root: i,
+  List: m,
+  Item: o
+};
+export {
+  H as NavHeader,
+  H as default
+};

package/dist/components/nav-header/nav-header.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NavHeader } from './nav-header';
+declare const meta: Meta<typeof NavHeader.Root>;
+export default meta;
+type Story = StoryObj<typeof NavHeader.Root>;
+export declare const Default: Story;
+export declare const WithTwoActiveItem: Story;

package/dist/components/nav-header/nav-item/nav-item.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../button/button';
+export interface NavItemProps extends ButtonProps {
+    isActive?: boolean;
+}
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/nav-header/nav-item/nav-item.js

@@ -0,0 +1,31 @@
+import { jsx as f } from "react/jsx-runtime";
+import c from "react";
+import { Button as i } from "../../button/button.js";
+import { cn as v } from "../../../lib/utils.js";
+const d = c.forwardRef(
+  ({ leftIcon: t, label: r, rightIcon: a, onClick: o, className: l, isActive: m, asChild: e, children: n, ...s }, u) => /* @__PURE__ */ f(
+    i,
+    {
+      variant: "ghost",
+      shade: "neutralGhost",
+      size: "large",
+      leftIcon: t,
+      rightIcon: a,
+      label: r,
+      onClick: o,
+      className: v(
+        "text-inverted hover:surface-neutral-elevated active:surface-neutral-elevated ",
+        m && "surface-neutral-elevated",
+        l
+      ),
+      asChild: e,
+      ...s,
+      ref: u,
+      children: e ? n : null
+    }
+  )
+);
+d.displayName = "NavItem";
+export {
+  d as NavItem
+};

package/dist/components/nav-header/nav-item/nav-item.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NavItem } from './nav-item';
+declare const meta: Meta<typeof NavItem>;
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+export declare const Default: Story;
+export declare const DefaultActive: Story;
+export declare const DefaultDualIcon: Story;
+export declare const DualIconActive: Story;
+export declare const LinkWithLeftIcon: Story;
+export declare const LinkWithBothIcons: Story;
+export declare const LinkActiveAndInactive: Story;

package/dist/components/tab/__tests__/tab.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/tab/tab.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare function Z2Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Z2TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function Z2TabsTrigger({ className, icon, label, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Z2Tabs, Z2TabsList, Z2TabsTrigger, Z2TabsContent };

package/dist/components/tab/tab.js

@@ -0,0 +1,80 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tabs";
+import { cn as s } from "../../lib/utils.js";
+function o({ className: a, ...t }) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      "data-slot": "tabs",
+      className: s(a),
+      orientation: "horizontal",
+      ...t
+    }
+  );
+}
+function c({ className: a, ...t }) {
+  return /* @__PURE__ */ e(
+    r.List,
+    {
+      "data-slot": "tabs-list",
+      className: s(
+        "inline-flex items-center bg-transparent relative",
+        "w-full h-11",
+        "max-lg:w-full max-lg:max-w-[full] max-lg:overflow-x-auto max-lg:overflow-y-hidden",
+        "max-sm:w-full max-sm:px-2",
+        // 'after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-neutral-150',
+        a
+      ),
+      ...t
+    }
+  );
+}
+function p({
+  className: a,
+  icon: t,
+  label: i,
+  ...n
+}) {
+  return /* @__PURE__ */ l(
+    r.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: s(
+        "flex h-11 p-2.5 justify-center items-center gap-1 relative cursor-pointer",
+        "max-lg:min-w-fit max-lg:flex-shrink-0",
+        "max-sm:px-1.5 max-sm:py-2 max-sm:gap-0.5",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        "group",
+        a
+      ),
+      ...n,
+      children: [
+        t && /* @__PURE__ */ e("div", { className: "w-[14px] h-[14px] flex-shrink-0 flex items-center justify-center tab-icon", children: /* @__PURE__ */ e("div", { className: "w-[14px] h-[14px] [&>*]:!w-[14px] [&>*]:!h-[14px]", children: t }) }),
+        i && /* @__PURE__ */ e("div", { className: "flex px-0.5 justify-center items-center gap-1.5 max-sm:px-0.25 max-sm:gap-1", children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: s(
+              "text-center font-[450] transition-colors duration-200 tab-label",
+              "text-sm leading-none tracking-[-0.2px]",
+              "max-lg:text-[13px]",
+              "max-sm:text-xs"
+            ),
+            children: i
+          }
+        ) })
+      ]
+    }
+  );
+}
+function d({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(r.Content, { "data-slot": "tabs-content", className: s(a), ...t });
+}
+export {
+  o as Z2Tabs,
+  d as Z2TabsContent,
+  c as Z2TabsList,
+  p as Z2TabsTrigger
+};

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2Tabs } from './tab';
+declare const meta: Meta<typeof Z2Tabs>;
+export default meta;
+type Story = StoryObj<typeof Z2Tabs>;
+export declare const Default: Story;
+export declare const WithCustomIcons: Story;
+export declare const FewZ2Tabs: Story;
+export declare const WithDisabledTab: Story;
+export declare const IconOnly: Story;
+export declare const TextOnly: Story;
+export declare const MixedContent: Story;
+export declare const TwoZ2Tabs: Story;
+export declare const LongLabels: Story;
+export declare const ControlledExample: Story;
+export declare const CustomStyling: 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);
 }