@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/toast.js

@@ -0,0 +1,108 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { Toaster as s } from "sonner";
+import { toast as f } from "sonner";
+import { cn as r } from "../../lib/utils.js";
+import { Spinner as n } from "./spinner.js";
+import { Icon as i } from "./icon.js";
+const a = ({ name: e, color: t, blurColor: c }) => /* @__PURE__ */ l("div", { className: "relative", children: [
+  c && /* @__PURE__ */ o(
+    "div",
+    {
+      className: "absolute inset-0 w-[20px] h-[20px] rounded-full -z-10",
+      style: {
+        backgroundColor: c,
+        filter: "blur(40px)"
+      }
+    }
+  ),
+  /* @__PURE__ */ o(i, { name: e, size: "m", className: t })
+] }), x = ({ className: e, ...t }) => /* @__PURE__ */ o(
+  s,
+  {
+    className: r("toaster group", e),
+    icons: {
+      loading: /* @__PURE__ */ o(n, { size: "m", variant: "primary", className: "mt-1" }),
+      success: /* @__PURE__ */ o(a, { name: "circle-check", color: "text-[var(--color-icon-success-bold)]", blurColor: "#1C741F" }),
+      error: /* @__PURE__ */ o(a, { name: "triangle-alert", color: "text-[var(--color-icon-error-bold)]", blurColor: "#D9493E" }),
+      warning: /* @__PURE__ */ o(a, { name: "circle-alert", color: "text-[var(--color-icon-warning-bold)]", blurColor: "#E57F19" }),
+      info: null
+    },
+    toastOptions: {
+      classNames: {
+        toast: r(
+          "group toast",
+          // Layout & dimensions
+          "w-[535px] max-w-[calc(100vw-2rem)] p-[var(--space-l)]",
+          // Background & borders
+          "bg-[var(--color-surface-primary)]",
+          "!border !border-[var(--color-border-primary-medium)] !border-solid",
+          "rounded-m",
+          // Shadow
+          "shadow-lg",
+          // Contain blur effect
+          "overflow-hidden",
+          // Flex layout
+          "flex items-start gap-[var(--space-l)]",
+          // Typography defaults
+          "text-[var(--color-text-primary)]"
+        ),
+        title: "text-heading-sm text-[var(--color-text-primary)]",
+        description: "text-body-md text-[var(--color-text-primary)] flex-1 min-w-0",
+        icon: "self-start mt-1",
+        actionButton: r(
+          // Base button styling
+          "h-[var(--size-m)] px-[var(--space-m)]",
+          "rounded-s",
+          "text-label-md",
+          // Primary action colors
+          "bg-[var(--color-background-blue-bold)]",
+          "text-[var(--color-text-on-action)]",
+          // Hover states
+          "hover:bg-[var(--color-background-blue-bold-hovered)]",
+          // Focus states
+          "focus:ring-2 focus:ring-[var(--color-border-focused)]"
+        ),
+        cancelButton: r(
+          // Base button styling
+          "h-[var(--size-m)] px-[var(--space-m)]",
+          "rounded-s",
+          "text-label-md",
+          // Secondary action colors
+          "bg-[var(--color-background-neutral-subtlest)]",
+          "text-[var(--color-text-secondary)]",
+          "border border-[var(--color-border-action-outline)]",
+          // Hover states
+          "hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+          "hover:border-[var(--color-border-action-outline-hovered)]",
+          // Focus states
+          "focus:ring-2 focus:ring-[var(--color-border-focused)]"
+        ),
+        closeButton: r(
+          // Icon sizing
+          "w-[20px] h-[20px]",
+          // Icon color
+          "text-[var(--color-icon-tertiary)]",
+          // Hover state
+          "hover:text-[var(--color-icon-tertiary-hovered)]"
+        ),
+        success: r(
+          // Icon color is handled by custom icon component
+          "[&_svg]:text-[var(--color-icon-success-bold)]"
+        ),
+        error: r(
+          // Icon color is handled by custom icon component
+          "[&_svg]:text-[var(--color-icon-error-bold)]"
+        ),
+        warning: r(
+          // Icon color is handled by custom icon component
+          "[&_svg]:text-[var(--color-icon-warning-bold)]"
+        )
+      }
+    },
+    ...t
+  }
+);
+export {
+  x as Toaster,
+  f as toast
+};

package/dist/es/components/fundamental/toggle-group.js

@@ -0,0 +1,37 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as e from "react";
+import * as o from "@radix-ui/react-toggle-group";
+import { cn as p } from "../../lib/utils.js";
+import { toggleVariants as c } from "./toggle.js";
+const l = e.createContext({}), f = /* @__PURE__ */ e.forwardRef(({ className: t, size: r, children: a, ...m }, s) => /* @__PURE__ */ i(
+  o.Root,
+  {
+    ref: s,
+    className: p("flex items-center justify-center gap-1", t),
+    ...m,
+    children: /* @__PURE__ */ i(l.Provider, { value: { size: r }, children: a })
+  }
+));
+f.displayName = o.Root.displayName;
+const g = /* @__PURE__ */ e.forwardRef(({ className: t, children: r, size: a, ...m }, s) => {
+  const n = e.useContext(l);
+  return /* @__PURE__ */ i(
+    o.Item,
+    {
+      ref: s,
+      className: p(
+        c({
+          size: n.size || a
+        }),
+        t
+      ),
+      ...m,
+      children: r
+    }
+  );
+});
+g.displayName = o.Item.displayName;
+export {
+  f as ToggleGroup,
+  g as ToggleGroupItem
+};

package/dist/es/components/fundamental/toggle.js

@@ -0,0 +1,51 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as c from "react";
+import * as e from "@radix-ui/react-toggle";
+import { cva as d } from "class-variance-authority";
+import { cn as n } from "../../lib/utils.js";
+const b = d(
+  "inline-flex items-center justify-center font-medium ring-offset-[var(--color-surface-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-colors gap-[var(--space-s)] cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-transparent text-[var(--color-text-primary)]",
+          "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+          "data-[state=on]:bg-[var(--color-background-blue-subtle-selected)] data-[state=on]:text-[var(--color-text-brand-bold)] data-[state=on]:[&_svg]:text-[var(--color-text-brand-bold)]",
+          "data-[state=on]:hover:bg-[var(--color-background-blue-subtle-selected-hovered)]",
+          "aria-checked:bg-[var(--color-background-blue-subtle-selected)] aria-checked:text-[var(--color-text-brand-bold)] aria-checked:[&_svg]:text-[var(--color-text-brand-bold)]",
+          "aria-checked:hover:bg-[var(--color-background-blue-subtle-selected-hovered)]"
+        ],
+        outline: [
+          "border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] text-[var(--color-text-primary)]",
+          "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+          "data-[state=on]:bg-[var(--color-background-blue-subtle-selected)] data-[state=on]:text-[var(--color-text-brand-bold)] data-[state=on]:border-transparent data-[state=on]:[&_svg]:text-[var(--color-text-brand-bold)]",
+          "data-[state=on]:hover:bg-[var(--color-background-blue-subtle-selected-hovered)]",
+          "aria-checked:bg-[var(--color-background-blue-subtle-selected)] aria-checked:text-[var(--color-text-brand-bold)] aria-checked:border-transparent aria-checked:[&_svg]:text-[var(--color-text-brand-bold)]",
+          "aria-checked:hover:bg-[var(--color-background-blue-subtle-selected-hovered)]"
+        ]
+      },
+      size: {
+        s: "text-label-sm rounded-s px-[var(--space-s)] py-[var(--space-xs)]",
+        m: "text-label-md rounded-m px-[var(--space-m)] py-[var(--dimension-150)]",
+        l: "text-label-md rounded-m px-[var(--space-l)] py-[var(--space-m)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "s"
+    }
+  }
+), i = /* @__PURE__ */ c.forwardRef(({ className: r, variant: a, size: t, ...o }, s) => /* @__PURE__ */ l(
+  e.Root,
+  {
+    ref: s,
+    className: n(b({ variant: a, size: t, className: r })),
+    ...o
+  }
+));
+i.displayName = e.Root.displayName;
+export {
+  i as Toggle,
+  b as toggleVariants
+};

package/dist/es/components/fundamental/tooltip.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as d from "react";
+import * as o from "@radix-ui/react-tooltip";
+import { cn as s } from "../../lib/utils.js";
+const p = ({
+  delayDuration: t = 400,
+  ...e
+}) => /* @__PURE__ */ a(o.Provider, { delayDuration: t, ...e }), c = o.Root, f = o.Trigger, m = /* @__PURE__ */ d.forwardRef(({ className: t, sideOffset: e = 4, ...i }, r) => /* @__PURE__ */ a(
+  o.Content,
+  {
+    ref: r,
+    sideOffset: e,
+    className: s(
+      "[&]:text-body-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-2 z-50 max-w-[320px] overflow-hidden rounded-m bg-[var(--color-background-inverse)] px-[var(--space-m)] py-[var(--space-s)] text-[var(--color-text-inverse)] shadow-lg",
+      t
+    ),
+    ...i
+  }
+));
+m.displayName = o.Content.displayName;
+export {
+  c as Tooltip,
+  m as TooltipContent,
+  p as TooltipProvider,
+  f as TooltipTrigger
+};

package/dist/es/components/fundamental/tree.js

@@ -0,0 +1,161 @@
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import * as n from "react";
+import { FileIcon as g, FolderIcon as S, ChevronRightIcon as A } from "lucide-react";
+import { cn as u } from "../../lib/utils.js";
+import { Button as P } from "./button.js";
+const T = n.createContext(null), R = () => {
+  const e = n.useContext(T);
+  if (!e)
+    throw new Error("useTree must be used within a TreeProvider");
+  return e;
+}, k = /* @__PURE__ */ n.forwardRef(
+  ({ item: e, level: l }, c) => {
+    const {
+      selectedItemId: d,
+      expandedItems: t,
+      handleExpand: h,
+      handleSelect: I,
+      defaultNodeIcon: b,
+      defaultLeafIcon: p
+    } = R(), a = t.has(e.id), f = d === e.id, o = e.children && e.children.length > 0, i = f && !o, v = n.useMemo(() => e.disabled ? p || g : f && e.selectedIcon ? e.selectedIcon : o ? a && e.openIcon ? e.openIcon : e.icon || b || S : e.icon || p || g, [
+      e.disabled,
+      e.selectedIcon,
+      e.openIcon,
+      e.icon,
+      f,
+      o,
+      a,
+      b,
+      p
+    ]), y = () => {
+      e.disabled || (o && h(e.id), I(e), e.onClick?.());
+    }, w = (r) => {
+      r.stopPropagation(), o && !e.disabled && h(e.id);
+    };
+    return /* @__PURE__ */ C("div", { ref: c, className: "relative", children: [
+      /* @__PURE__ */ C(
+        "div",
+        {
+          className: u(
+            "flex items-center gap-1 rounded-s py-1 pr-1 cursor-pointer transition-colors",
+            "hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+            i && "bg-[var(--color-background-blue-subtle-selected)] hover:bg-[var(--color-background-blue-subtle-selected-hovered)]",
+            e.disabled && "opacity-50 cursor-not-allowed"
+          ),
+          style: { paddingLeft: `${l * 16 + 8}px` },
+          onClick: y,
+          children: [
+            o ? /* @__PURE__ */ s(
+              P,
+              {
+                variant: "ghost",
+                size: "s",
+                className: "h-4 w-4 p-0 opacity-50 hover:opacity-100",
+                onClick: w,
+                disabled: e.disabled,
+                children: /* @__PURE__ */ s(
+                  A,
+                  {
+                    className: u(
+                      "h-3 w-3 transition-transform duration-200",
+                      a && "transform rotate-90"
+                    )
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ s("div", { className: "h-4 w-4" }),
+            /* @__PURE__ */ s(v, { className: u(
+              "h-4 w-4 shrink-0",
+              i && "text-[var(--color-icon-brand-bold-selected)]"
+            ) }),
+            /* @__PURE__ */ s("span", { className: u(
+              "flex-1 truncate",
+              i ? "text-body-strong-sm" : "text-body-sm"
+            ), children: /* @__PURE__ */ s("span", { className: u(
+              i && "text-[var(--color-text-brand-bold-selected)]"
+            ), children: e.name }) }),
+            e.actions && /* @__PURE__ */ s(
+              "div",
+              {
+                className: "flex items-center gap-1",
+                onClick: (r) => r.stopPropagation(),
+                children: e.actions
+              }
+            )
+          ]
+        }
+      ),
+      o && a && /* @__PURE__ */ s("div", { children: e.children?.map((r) => /* @__PURE__ */ s(k, { item: r, level: l + 1 }, r.id)) })
+    ] });
+  }
+);
+k.displayName = "TreeItem";
+const L = /* @__PURE__ */ n.forwardRef(
+  ({
+    data: e,
+    initialSelectedItemId: l,
+    onSelectChange: c,
+    expandAll: d = !1,
+    defaultNodeIcon: t = S,
+    defaultLeafIcon: h = g,
+    className: I,
+    ...b
+  }, p) => {
+    const [a, f] = n.useState(
+      l
+    ), [o, m] = n.useState(
+      new Set(d ? N(Array.isArray(e) ? e : [e]) : [])
+    );
+    n.useEffect(() => {
+      d && m(new Set(N(Array.isArray(e) ? e : [e])));
+    }, [e, d]);
+    const i = n.useCallback((r) => {
+      m((E) => {
+        const x = new Set(E);
+        return x.has(r) ? x.delete(r) : x.add(r), x;
+      });
+    }, []), v = n.useCallback((r) => {
+      r.disabled || (f(r.id), c?.(r));
+    }, [c]), y = n.useMemo(
+      () => ({
+        selectedItemId: a,
+        expandedItems: o,
+        handleExpand: i,
+        handleSelect: v,
+        onSelectChange: c,
+        defaultNodeIcon: t,
+        defaultLeafIcon: h
+      }),
+      [
+        a,
+        o,
+        i,
+        v,
+        c,
+        t,
+        h
+      ]
+    ), w = Array.isArray(e) ? e : [e];
+    return /* @__PURE__ */ s(T.Provider, { value: y, children: /* @__PURE__ */ s(
+      "div",
+      {
+        ref: p,
+        className: u("space-y-1", I),
+        ...b,
+        children: w.map((r) => /* @__PURE__ */ s(k, { item: r, level: 0 }, r.id))
+      }
+    ) });
+  }
+);
+L.displayName = "Tree";
+function N(e) {
+  const l = [];
+  function c(d) {
+    for (const t of d)
+      l.push(t.id), t.children && c(t.children);
+  }
+  return c(e), l;
+}
+export {
+  L as Tree
+};

package/dist/es/components/product/activity-log.js

@@ -0,0 +1,231 @@
+import { jsx as a, jsxs as A, Fragment as b } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as n } from "../../lib/utils.js";
+import { Collapsible as L, CollapsibleTrigger as C, CollapsibleContent as R } from "../fundamental/collapsible.js";
+import { Icon as D } from "../fundamental/icon.js";
+const I = /* @__PURE__ */ r.forwardRef(
+  ({
+    className: i,
+    children: e,
+    separatorThreshold: t,
+    "aria-label": o = "Activity log",
+    ...d
+  }, y) => {
+    const v = r.useMemo(() => {
+      if (!t) return e;
+      const s = r.Children.toArray(e), c = [];
+      for (let m = 0; m < s.length; m++) {
+        const f = s[m];
+        c.push(f);
+        const p = s[m + 1];
+        if (p && r.isValidElement(f) && r.isValidElement(p) && f.type === w && p.type === w) {
+          const u = f.props.timestamp, g = p.props.timestamp;
+          if (u && g) {
+            const x = new Date(u), l = new Date(g);
+            Math.abs(l.getTime() - x.getTime()) >= t && c.push(/* @__PURE__ */ a(N, {}, `separator-${m}`));
+          }
+        }
+      }
+      return c;
+    }, [e, t]);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: y,
+        role: "log",
+        "aria-label": o,
+        "aria-live": "polite",
+        "aria-relevant": "additions",
+        className: n("flex flex-col gap-[var(--space-s)]", i),
+        ...d,
+        children: v
+      }
+    );
+  }
+);
+I.displayName = "ActivityLog";
+const w = /* @__PURE__ */ r.forwardRef(
+  ({
+    className: i,
+    children: e,
+    collapsible: t = !1,
+    defaultOpen: o,
+    open: d,
+    onOpenChange: y,
+    timestamp: v,
+    ...s
+  }, c) => t ? /* @__PURE__ */ a(
+    L,
+    {
+      ref: c,
+      defaultOpen: o,
+      open: d,
+      onOpenChange: y,
+      className: n("w-full group peer", i),
+      ...s,
+      children: e
+    }
+  ) : /* @__PURE__ */ a("div", { ref: c, className: n("w-full", i), ...s, children: e })
+);
+w.displayName = "ActivityLogItem";
+const N = /* @__PURE__ */ r.memo(
+  /* @__PURE__ */ r.forwardRef(
+    ({ className: i, ...e }, t) => /* @__PURE__ */ a(
+      "div",
+      {
+        ref: t,
+        role: "separator",
+        "aria-hidden": "true",
+        className: n(
+          "flex items-center ml-[7.5px] peer-data-[state=open]:hidden",
+          i
+        ),
+        ...e,
+        children: /* @__PURE__ */ a("div", { className: "w-px h-[var(--space-l)] bg-[var(--grey-alpha-100)]" })
+      }
+    )
+  )
+);
+N.displayName = "ActivityLogSeparator";
+const V = /* @__PURE__ */ r.forwardRef(
+  ({ className: i, children: e, asCollapsibleTrigger: t, ...o }, d) => {
+    const { avatarOrIcon: y, description: v, chevron: s, otherChildren: c } = r.useMemo(() => {
+      const f = r.Children.toArray(e);
+      let p = null, u = null, g = null;
+      const x = [];
+      return f.forEach((l) => {
+        if (r.isValidElement(l)) {
+          const h = l.type?.displayName;
+          h === "ActivityLogDescription" ? u = l : h === "ActivityLogChevron" ? g = l : p ? x.push(l) : p = l;
+        } else
+          x.push(l);
+      }), {
+        avatarOrIcon: p,
+        description: u,
+        chevron: g,
+        otherChildren: x
+      };
+    }, [e]), m = /* @__PURE__ */ A(
+      "div",
+      {
+        ref: t ? void 0 : d,
+        className: n(
+          "flex gap-[var(--space-s)] items-start w-full [&>*:first-child]:translate-y-[1px]",
+          t && "cursor-pointer rounded-s focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
+          i
+        ),
+        ...o,
+        children: [
+          y,
+          v && s ? (
+            // Group description and chevron together
+            /* @__PURE__ */ A("div", { className: "inline-flex gap-[var(--space-xs)] items-center min-w-0 flex-1", children: [
+              v,
+              s
+            ] })
+          ) : /* @__PURE__ */ A(b, { children: [
+            v,
+            s
+          ] }),
+          c
+        ]
+      }
+    );
+    return t ? /* @__PURE__ */ a(C, { asChild: !0, hideIcon: !0, children: m }) : m;
+  }
+);
+V.displayName = "ActivityLogHeader";
+const k = /* @__PURE__ */ r.forwardRef(({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+  R,
+  {
+    ref: o,
+    className: n(
+      "mt-[var(--space-s)] pl-[var(--space-s)] ml-[7.5px] border-l border-l-[var(--grey-alpha-100)] max-w-[320px]",
+      "[.group:last-child_&]:border-l-0",
+      i
+    ),
+    ...t,
+    children: e
+  }
+));
+k.displayName = "ActivityLogContent";
+const E = /* @__PURE__ */ r.forwardRef(({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: o,
+    className: n(
+      "inline-flex flex-wrap gap-x-[var(--space-xs)] gap-y-0 items-center min-w-0 [&]:text-body-sm text-[var(--color-text-primary)]",
+      i
+    ),
+    ...t,
+    children: e
+  }
+));
+E.displayName = "ActivityLogDescription";
+const M = /* @__PURE__ */ r.forwardRef(
+  ({ className: i, children: e, dateTime: t, ...o }, d) => /* @__PURE__ */ a(
+    "time",
+    {
+      ref: d,
+      dateTime: t,
+      className: n(
+        "[&]:text-body-xsm text-[var(--color-text-tertiary)] shrink-0 whitespace-nowrap",
+        i
+      ),
+      ...o,
+      children: e
+    }
+  )
+);
+M.displayName = "ActivityLogTime";
+const T = /* @__PURE__ */ r.memo(
+  /* @__PURE__ */ r.forwardRef(
+    ({ className: i, ...e }, t) => /* @__PURE__ */ a(
+      "div",
+      {
+        ref: t,
+        "aria-hidden": "true",
+        className: n("shrink-0", i),
+        ...e,
+        children: /* @__PURE__ */ a(
+          D,
+          {
+            name: "chevron-down",
+            size: "s",
+            color: "tertiary",
+            className: "[.group[data-state=open]_&]:rotate-180"
+          }
+        )
+      }
+    )
+  )
+);
+T.displayName = "ActivityLogChevron";
+const j = /* @__PURE__ */ r.memo(
+  /* @__PURE__ */ r.forwardRef(
+    ({ className: i, children: e, ...t }, o) => /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: n(
+          "inline-flex items-center gap-[var(--space-xs)] px-[4px] py-[2px] bg-[var(--color-background-neutral-subtlest)] border border-[var(--color-border-primary-medium)] rounded-xs shrink",
+          i
+        ),
+        ...t,
+        children: /* @__PURE__ */ a("span", { className: "[&]:text-body-medium-xsm text-[var(--color-text-primary)] whitespace-nowrap", children: e })
+      }
+    )
+  )
+);
+j.displayName = "ActivityLogValue";
+export {
+  I as ActivityLog,
+  T as ActivityLogChevron,
+  k as ActivityLogContent,
+  E as ActivityLogDescription,
+  V as ActivityLogHeader,
+  w as ActivityLogItem,
+  N as ActivityLogSeparator,
+  M as ActivityLogTime,
+  j as ActivityLogValue
+};