@ztwoint/z-ui 0.1.8 → 0.1.9

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;