@ztwoint/z-ui 0.1.25 → 0.1.27

package/dist/components/alert/alert.js

@@ -21,7 +21,7 @@ function C({
     /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
       f && /* @__PURE__ */ e(k, { className: "flex-shrink-0", children: f }),
       /* @__PURE__ */ s("div", { className: "flex flex-row flex-wrap w-full items-center", children: [
-        o && /* @__PURE__ */ e(b, { className: "flex-shrink-1", children: o }),
+        o && /* @__PURE__ */ e("span", { className: "flex-shrink-1", children: /* @__PURE__ */ e(b, { children: o }) }),
         p && (i || m) && /* @__PURE__ */ s("div", { className: "flex items-center self-end flex-shrink-0", children: [
           i && /* @__PURE__ */ e(
             "button",

package/dist/components/assets/icons/circle-check.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+function d({
+  fill: r = "currentColor",
+  secondaryfill: i,
+  strokewidth: l = 1,
+  width: c = "1em",
+  height: t = "1em",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      height: t,
+      id: "circle-check",
+      width: c,
+      viewBox: "0 0 12 12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...o,
+      children: /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "m6,0C2.691,0,0,2.691,0,6s2.691,6,6,6,6-2.691,6-6S9.309,0,6,0Zm2.853,4.45l-3.003,4c-.13.174-.329.282-.546.298-.019.001-.036.002-.054.002-.198,0-.389-.078-.53-.219l-1.503-1.5c-.293-.292-.293-.768,0-1.061s.768-.294,1.062,0l.892.89,2.484-3.31c.248-.331.718-.4,1.05-.149.331.249.398.719.149,1.05Z",
+          fill: r,
+          strokeWidth: "0"
+        }
+      ) })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/components/dropdown/helpers/hover-card.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-hover-card";
+import { cn as n } from "../../../lib/utils.js";
+function l({ ...t }) {
+  return /* @__PURE__ */ o(r.Root, { "data-slot": "hover-card", ...t });
+}
+function m({ ...t }) {
+  return /* @__PURE__ */ o(r.Trigger, { "data-slot": "hover-card-trigger", ...t });
+}
+function c({
+  className: t,
+  align: a = "center",
+  sideOffset: e = 4,
+  ...d
+}) {
+  return /* @__PURE__ */ o(r.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ o(
+    r.Content,
+    {
+      "data-slot": "hover-card-content",
+      align: a,
+      sideOffset: e,
+      className: n(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) bg-transparent shadow-lg rounded-2xl outline-hidden",
+        t
+      ),
+      ...d
+    }
+  ) });
+}
+export {
+  l as HoverCard,
+  c as HoverCardContent,
+  m as HoverCardTrigger
+};

package/dist/components/dropdown/z2-dropdown.d.ts

@@ -24,7 +24,7 @@ declare function Z2DropdownInput({ onSearchChange, placeholder, className, selec
 declare function Z2DropdownContent({ className, align, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export interface Z2DropdownItemProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: React.ReactNode;
-    label?: string;
+    label?: React.ReactNode;
     value: string;
     disabled?: boolean;
     disablePopoverClose?: boolean;

package/dist/components/dropdown/z2-dropdown.js

@@ -0,0 +1,245 @@
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as p from "@radix-ui/react-popover";
+import D, { createContext as N, useState as v, useRef as k, useEffect as C, useMemo as E, useCallback as P, useContext as V } from "react";
+import { cn as d } from "../../lib/utils.js";
+import { SearchIcon as Z, ChevronDown as S } from "lucide-react";
+import b from "../assets/icons/circle-check.js";
+import { HoverCard as T, HoverCardTrigger as O, HoverCardContent as R } from "./helpers/hover-card.js";
+const y = N(void 0), g = () => {
+  const e = V(y);
+  if (!e)
+    throw new Error("useDropdown must be used within a Z2Dropdown");
+  return e;
+};
+function q({
+  defaultOpen: e = !1,
+  value: a,
+  onValueChange: o,
+  ...l
+}) {
+  const [r, s] = v(e), [c, f] = v(""), [h, i] = v(a || "");
+  return /* @__PURE__ */ t(
+    y.Provider,
+    {
+      value: {
+        open: r,
+        setOpen: s,
+        searchValue: c,
+        setSearchValue: f,
+        value: h,
+        setSelectedValue: i,
+        onValueChange: o
+      },
+      children: /* @__PURE__ */ t(_, { ...l })
+    }
+  );
+}
+function _({ ...e }) {
+  const { open: a } = g();
+  return /* @__PURE__ */ t(p.Root, { "data-slot": "popover", open: a, ...e });
+}
+function I({ ...e }) {
+  return /* @__PURE__ */ t(p.Trigger, { "data-slot": "popover-trigger", ...e });
+}
+function j({
+  ...e
+}) {
+  return /* @__PURE__ */ t(p.Anchor, { "data-slot": "popover-anchor", ...e });
+}
+function B({
+  onSearchChange: e,
+  placeholder: a = "Search...",
+  className: o = "",
+  selectedIcon: l
+}) {
+  const { open: r, setOpen: s, searchValue: c, setSearchValue: f, value: h } = g(), i = k(null);
+  C(() => {
+    if (r && i.current) {
+      const n = setTimeout(() => {
+        var u;
+        (u = i.current) == null || u.focus();
+      }, 10);
+      return () => clearTimeout(n);
+    }
+    !r && i.current && i.current.blur();
+  }, [r]);
+  const m = (n) => {
+    const u = n.target.value;
+    f(u), e == null || e(u);
+  }, w = E(() => r ? c : h, [r, c, h]);
+  return /* @__PURE__ */ t(j, { asChild: !0, children: /* @__PURE__ */ t(I, { onClick: () => s(!r), "data-prevent-close": !0, className: "w-full", children: /* @__PURE__ */ x(
+    "div",
+    {
+      className: d(
+        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[0.5px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
+        o
+      ),
+      children: [
+        l && !r && /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: l }),
+        r && /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: /* @__PURE__ */ t(Z, { className: "w-3.5 h-3.5 flex-shrink-0" }) }),
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-center px-0.5 gap-2.5 flex-1 relative h-[14px]", children: /* @__PURE__ */ t(
+          "input",
+          {
+            ref: i,
+            id: "z2-dropdown-input",
+            type: "text",
+            placeholder: a,
+            className: "w-full text-default-primary h-3.5 !text-sm bg-transparent border-none outline-none placeholder:text-default-muted overflow-visible",
+            value: w,
+            onChange: m,
+            onClick: (n) => {
+              s(!0), n.stopPropagation();
+            },
+            onKeyDown: (n) => {
+              var u;
+              n.stopPropagation(), n.key === "Escape" ? (s(!1), f(""), (u = i.current) == null || u.blur()) : n.key === "Enter" || n.key === " " || (n.key === "ArrowDown" || n.key === "ArrowUp") && n.preventDefault();
+            },
+            onKeyUp: (n) => {
+              n.stopPropagation(), n.key === " " && n.preventDefault();
+            }
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "text-neutral-400 w-[14px] h-[14px] flex-shrink-0", children: /* @__PURE__ */ t(S, { className: d(r && "rotate-180", "w-3.5 h-3.5 flex-shrink-0") }) })
+      ]
+    }
+  ) }) });
+}
+function F({
+  className: e,
+  align: a = "start",
+  ...o
+}) {
+  const { setOpen: l } = g(), r = P((s) => {
+    s && setTimeout(() => {
+      const c = s.offsetHeight;
+      c > 0 && document.documentElement.style.setProperty(
+        "--radix-popover-content-height",
+        `${c}px`
+      );
+    }, 10);
+  }, []);
+  return /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ t(
+    p.Content,
+    {
+      ref: r,
+      onInteractOutside: (s) => {
+        if (s.target.closest("[data-prevent-close]")) {
+          s.preventDefault();
+          return;
+        }
+        l(!1);
+      },
+      "data-slot": "popover-content",
+      align: a,
+      sideOffset: 8,
+      className: d(
+        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg z-50 min-w-fit",
+        e
+      ),
+      ...o
+    }
+  ) });
+}
+function A({
+  icon: e,
+  label: a,
+  value: o,
+  hoverComponent: l,
+  disablePopoverClose: r = !1
+}) {
+  const { onValueChange: s, value: c, setSelectedValue: f, setOpen: h } = g(), i = c === o, m = D.useMemo(() => /* @__PURE__ */ x(
+    "div",
+    {
+      onClick: (w) => {
+        w.preventDefault(), f(o), s && s(o), r || h(!1);
+      },
+      className: d(
+        i && "bg-neutral-secondary",
+        "p-2 gap-2 flex items-center rounded-lg cursor-pointer h-[30px] self-stretch",
+        "hover:bg-neutral-secondary"
+      ),
+      children: [
+        e && /* @__PURE__ */ t("span", { className: "h-3.5 w-3.5 relative", children: e }),
+        a || o,
+        /* @__PURE__ */ t(b, { className: d("ml-auto", i ? "opacity-100" : "opacity-0") })
+      ]
+    },
+    o
+  ), [
+    o,
+    i,
+    e,
+    a,
+    f,
+    s,
+    r,
+    h
+  ]);
+  return l ? /* @__PURE__ */ x(T, { openDelay: 1e3, children: [
+    /* @__PURE__ */ t(O, { className: "w-full", children: m }),
+    /* @__PURE__ */ t(R, { side: "right", sideOffset: 14, children: l })
+  ] }) : m;
+}
+function G({ ...e }) {
+  return /* @__PURE__ */ t(p.Root, { "data-slot": "popover", ...e });
+}
+function J({
+  value: e,
+  label: a,
+  icon: o,
+  isSelected: l = !1
+}) {
+  return /* @__PURE__ */ x(
+    p.Trigger,
+    {
+      "data-slot": "popover-sub-trigger",
+      className: d(
+        "!w-full",
+        "p-2 gap-2 flex items-center rounded-lg cursor-pointer h-[30px] self-stretch",
+        "hover:bg-neutral-secondary"
+      ),
+      children: [
+        o && /* @__PURE__ */ t("span", { className: "h-3.5 w-3.5 relative", children: o }),
+        a || e,
+        /* @__PURE__ */ t(b, { className: d("ml-auto", l ? "opacity-100" : "opacity-0") })
+      ]
+    }
+  );
+}
+function L({
+  className: e,
+  align: a = "start",
+  sideOffset: o = 4,
+  side: l = "right",
+  ...r
+}) {
+  return /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ t(
+    p.Content,
+    {
+      "data-slot": "popover-content",
+      align: a,
+      sideOffset: o,
+      side: l,
+      className: d(
+        "min-w-md min-h-fit h-[var(--radix-popover-content-height)]",
+        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg z-50",
+        e
+      ),
+      ...r
+    }
+  ) });
+}
+function Q({ ...e }) {
+  return /* @__PURE__ */ t(A, { ...e });
+}
+export {
+  y as DropdownContext,
+  q as Z2Dropdown,
+  F as Z2DropdownContent,
+  B as Z2DropdownInput,
+  A as Z2DropdownItem,
+  G as Z2DropdownSub,
+  L as Z2DropdownSubContent,
+  Q as Z2DropdownSubItem,
+  J as Z2DropdownSubTrigger
+};

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

@@ -103,6 +103,21 @@
     color: var(--color-neutral-400);
   }
 
+  .z2-select-label{
+    display: flex;
+    padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-1, 4px) var(--spacing-2, 8px);
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    color: var(--color-neutral-600);
+    /* text small/leading-none/medium */
+    font-size: var(--base-sizes-small-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--font-weight-medium, 450);
+    line-height: 100%; /* 14px */
+    letter-spacing: var(--font-letter-spacing-bittight, -0.2px);
+  }
+
   .z2-select-item-text {
     @apply flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px];
   }