@rafal.lemieszewski/tide-ui 0.82.1 → 0.84.2

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

@@ -0,0 +1,65 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as l } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const d = l(
+  "relative w-full rounded-m border p-[var(--space-l)] [&>svg~*]:pl-[var(--space-3xl)] [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-[var(--space-l)] [&>svg]:top-[var(--space-l)] [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-[var(--color-surface-primary)] text-[var(--color-text-primary)] border-[var(--color-border-primary-subtle)]"
+        ],
+        info: [
+          "bg-[var(--color-background-info-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-brand-bold)] [&>svg]:text-[var(--color-text-brand-bold)]"
+        ],
+        success: [
+          "bg-[var(--color-background-success-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-success-bold)] [&>svg]:text-[var(--color-text-success-bold)]"
+        ],
+        warning: [
+          "bg-[var(--color-background-warning-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-warning-bold)] [&>svg]:text-[var(--color-text-warning-bold)]"
+        ],
+        destructive: [
+          "bg-[var(--color-background-error-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-error-bold)] [&>svg]:text-[var(--color-text-error-bold)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), i = l(
+  "mb-[var(--space-xs)] [&]:text-body-strong-md text-[var(--color-text-primary)] leading-none tracking-tight"
+), v = l(
+  "[&]:text-body-md text-[var(--color-text-secondary)] [&_p]:leading-relaxed"
+), n = a.forwardRef(
+  ({ className: r, variant: t, ...e }, c) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: c,
+      role: "alert",
+      className: s(d({ variant: t }), r),
+      ...e
+    }
+  )
+);
+n.displayName = "Alert";
+const b = a.forwardRef(
+  ({ className: r, ...t }, e) => /* @__PURE__ */ o("h5", { ref: e, className: s(i(), r), ...t })
+);
+b.displayName = "AlertTitle";
+const x = a.forwardRef(({ className: r, ...t }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    className: s(v(), r),
+    ...t
+  }
+));
+x.displayName = "AlertDescription";
+export {
+  n as Alert,
+  x as AlertDescription,
+  b as AlertTitle,
+  d as alertVariants
+};

package/dist/es/components/fundamental/autocomplete-search.js

@@ -0,0 +1,139 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import * as m from "react";
+import { Command as y } from "cmdk";
+import { Command as N, CommandList as x, CommandGroup as S, CommandItem as M, CommandEmpty as k } from "./command.js";
+import { Popover as A, PopoverAnchor as O, PopoverContent as $ } from "./popover.js";
+import { Input as D } from "./input.js";
+function E(t, r) {
+  if (!t || !r)
+    return !1;
+  const o = t.toLowerCase(), p = r.toLowerCase();
+  return p.includes(o) ? !0 : p.split(" ").some((i) => i.includes(o));
+}
+function j(t, r) {
+  if (!t || !r)
+    return null;
+  const o = t.toLowerCase(), l = r.toLowerCase().indexOf(o);
+  if (l !== -1)
+    return {
+      before: r.substring(0, l),
+      match: r.substring(l, l + t.length),
+      after: r.substring(l + t.length)
+    };
+  const i = r.split(" ");
+  for (let s = 0; s < i.length; s++) {
+    const d = i[s], a = d.toLowerCase().indexOf(o);
+    if (a !== -1) {
+      const b = i.slice(0, s).join(" ") + (s > 0 ? " " : "") + d.substring(0, a), f = d.substring(a, a + t.length), c = d.substring(a + t.length) + (s < i.length - 1 ? " " : "") + i.slice(s + 1).join(" ");
+      return { before: b, match: f, after: c };
+    }
+  }
+  return null;
+}
+function z({ text: t, search: r }) {
+  const o = j(r, t);
+  return o ? /* @__PURE__ */ u("span", { children: [
+    o.before,
+    /* @__PURE__ */ n("span", { className: "bg-[#ffeb10] text-body-strong-md", children: o.match }),
+    o.after
+  ] }) : /* @__PURE__ */ n("span", { children: t });
+}
+function G({
+  value: t,
+  onValueChange: r,
+  suggestions: o,
+  placeholder: p = "Search...",
+  minCharacters: l = 2,
+  emptyMessage: i = "No results found.",
+  className: s,
+  onSelect: d
+}) {
+  const [h, a] = m.useState(!1), b = m.useId(), f = m.useMemo(() => o.map((e) => typeof e == "string" ? {
+    label: e,
+    value: e,
+    filterLabel: "",
+    filterIcon: () => null
+  } : e), [o]), c = m.useMemo(() => !t || t.length < l ? [] : f.filter((e) => e && e.label).filter((e) => E(t, e.label)).slice(0, 50), [t, f, l]);
+  m.useEffect(() => {
+    const e = f.some((w) => w.value === t);
+    a(e ? !1 : c.length > 0 && t.length >= l);
+  }, [c.length, t.length, l, f, t]);
+  const L = (e) => {
+    r(e.value), a(!1), d?.(e.label, e.filterLabel);
+  }, v = (e) => {
+    e.relatedTarget?.hasAttribute("cmdk-list") || a(!1);
+  };
+  return /* @__PURE__ */ n("div", { className: s, children: /* @__PURE__ */ n(A, { open: h, onOpenChange: a, children: /* @__PURE__ */ u(
+    N,
+    {
+      shouldFilter: !1,
+      loop: !0,
+      className: "overflow-visible [&_[cmdk-input-wrapper]]:border-0 [&_[cmdk-input-wrapper]]:p-0",
+      children: [
+        /* @__PURE__ */ n(O, { asChild: !0, children: /* @__PURE__ */ n(
+          y.Input,
+          {
+            asChild: !0,
+            value: t,
+            onValueChange: r,
+            onKeyDown: (e) => {
+              e.key === "Escape" && a(!1);
+            },
+            onBlur: v,
+            children: /* @__PURE__ */ n(
+              D,
+              {
+                type: "search",
+                role: "combobox",
+                "aria-expanded": h,
+                "aria-haspopup": "listbox",
+                "aria-controls": b,
+                "aria-autocomplete": "list",
+                "aria-label": "Search with autocomplete suggestions",
+                placeholder: p
+              }
+            )
+          }
+        ) }),
+        !h && /* @__PURE__ */ n(x, { "aria-hidden": "true", className: "hidden" }),
+        /* @__PURE__ */ n(
+          $,
+          {
+            asChild: !0,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onInteractOutside: (e) => {
+              e.target instanceof Element && e.target.hasAttribute("cmdk-input") && e.preventDefault();
+            },
+            className: "w-[--radix-popover-trigger-width] p-[var(--space-s)]",
+            children: /* @__PURE__ */ u(x, { id: b, role: "listbox", "aria-label": "Autocomplete suggestions", children: [
+              c.length > 0 ? /* @__PURE__ */ n(S, { className: "[&]:p-0", children: c.map((e, w) => {
+                const C = e.filterIcon, I = e.filterLabel && e.filterLabel.length > 0;
+                return /* @__PURE__ */ u(
+                  M,
+                  {
+                    value: `${e.value}|${e.filterLabel}`,
+                    onMouseDown: (g) => g.preventDefault(),
+                    onSelect: () => L(e),
+                    className: "text-body-md h-[var(--size-m)] py-0 gap-[var(--space-m)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                    children: [
+                      /* @__PURE__ */ n(z, { text: e.label, search: t }),
+                      I && /* @__PURE__ */ u("span", { className: "ml-auto flex items-center gap-[var(--space-xs)] text-caption-sm text-[var(--color-text-tertiary)]", children: [
+                        /* @__PURE__ */ n(C, { className: "w-[12px] h-[12px]" }),
+                        e.filterLabel
+                      ] })
+                    ]
+                  },
+                  `${e.value}-${e.filterLabel}-${w}`
+                );
+              }) }) : null,
+              c.length === 0 && t.length >= l ? /* @__PURE__ */ n(k, { children: i }) : null
+            ] })
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  G as AutocompleteSearch
+};

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

@@ -0,0 +1,51 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as a from "react";
+import { cn as e } from "../../lib/utils.js";
+const u = {
+  xxs: "-ml-[6px]",
+  xs: "-ml-[var(--space-xs)]",
+  s: "-ml-[var(--space-s)]",
+  m: "-ml-[var(--space-m)]",
+  l: "-ml-[var(--space-l)]",
+  xl: "-ml-[var(--space-l)]"
+}, m = {
+  xxs: "border",
+  xs: "border",
+  s: "border-2",
+  m: "border-2",
+  l: "border-2",
+  xl: "border-2"
+}, b = a.forwardRef(
+  ({ className: c, children: p, size: s = "m", ...n }, d) => {
+    const t = a.Children.toArray(p), v = t.length;
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: d,
+        className: e("flex items-center", c),
+        ...n,
+        children: t.map((r, o) => {
+          if (!a.isValidElement(r)) return r;
+          const x = v - o, i = o === 0 ? e(m[s], "border-[var(--color-surface-primary)]") : e(
+            m[s],
+            "border-[var(--color-surface-primary)]",
+            u[s]
+          ), l = r.props;
+          return a.cloneElement(r, {
+            ...l,
+            className: e(l.className, i),
+            style: {
+              ...l.style,
+              zIndex: x
+            },
+            key: o
+          });
+        })
+      }
+    );
+  }
+);
+b.displayName = "AvatarGroup";
+export {
+  b as AvatarGroup
+};

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

@@ -0,0 +1,165 @@
+import { jsx as o, jsxs as c, Fragment as u } from "react/jsx-runtime";
+import * as n from "react";
+import * as a from "@radix-ui/react-avatar";
+import { cva as d } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+const p = d(
+  "relative flex shrink-0 overflow-hidden items-center justify-center aspect-square",
+  {
+    variants: {
+      size: {
+        xxs: "h-4 w-4",
+        // 16px
+        xs: "h-[var(--size-s)] w-[var(--size-s)]",
+        // 20px
+        s: "h-[var(--size-m)] w-[var(--size-m)]",
+        // 24px
+        m: "h-[var(--size-l)] w-[var(--size-l)]",
+        // 32px
+        l: "h-[var(--size-xl)] w-[var(--size-xl)]",
+        // 48px
+        xl: "h-[var(--size-2xl)] w-[var(--size-2xl)]"
+        // 64px
+      },
+      type: {
+        user: "rounded-full",
+        organization: ""
+      }
+    },
+    compoundVariants: [
+      {
+        type: "organization",
+        size: "xxs",
+        className: "rounded-[2px]"
+      },
+      {
+        type: "organization",
+        size: "xs",
+        className: "rounded-[3px]"
+      },
+      {
+        type: "organization",
+        size: "s",
+        className: "rounded-s"
+      },
+      {
+        type: "organization",
+        size: "m",
+        className: "rounded-m"
+      },
+      {
+        type: "organization",
+        size: "l",
+        className: "rounded-m"
+      },
+      {
+        type: "organization",
+        size: "xl",
+        className: "rounded-l"
+      }
+    ],
+    defaultVariants: {
+      size: "m",
+      type: "user"
+    }
+  }
+), x = d(
+  "flex h-full w-full items-center justify-center font-medium [&]:text-[var(--color-text-inverse)]",
+  {
+    variants: {
+      size: {
+        xxs: "text-[7px] leading-none",
+        xs: "text-[9px] leading-none",
+        s: "text-caption-sm",
+        m: "text-label-sm",
+        l: "text-label-md",
+        xl: "text-heading-sm"
+      },
+      type: {
+        user: "rounded-full",
+        organization: ""
+      },
+      variant: {
+        information: "bg-[var(--color-background-info-bold)]",
+        success: "bg-[var(--color-background-success-bold)]",
+        error: "bg-[var(--color-background-error-bold)]",
+        warning: "bg-[var(--color-background-warning-bold)]",
+        violet: "bg-[var(--violet-500)]",
+        magenta: "bg-[var(--magenta-500)]"
+      }
+    },
+    compoundVariants: [
+      {
+        type: "organization",
+        size: "xxs",
+        className: "rounded-[2px]"
+      },
+      {
+        type: "organization",
+        size: "xs",
+        className: "rounded-[3px]"
+      },
+      {
+        type: "organization",
+        size: "s",
+        className: "rounded-s"
+      },
+      {
+        type: "organization",
+        size: "m",
+        className: "rounded-m"
+      },
+      {
+        type: "organization",
+        size: "l",
+        className: "rounded-m"
+      },
+      {
+        type: "organization",
+        size: "xl",
+        className: "rounded-l"
+      }
+    ],
+    defaultVariants: {
+      size: "m",
+      type: "user",
+      variant: "information"
+    }
+  }
+), z = n.forwardRef(({ className: e, size: s, type: r, ...i }, t) => /* @__PURE__ */ o(
+  a.Root,
+  {
+    ref: t,
+    className: l(p({ size: s, type: r }), e),
+    ...i
+  }
+));
+z.displayName = a.Root.displayName;
+const v = n.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ c(u, { children: [
+  /* @__PURE__ */ o(
+    a.Image,
+    {
+      ref: r,
+      className: l("aspect-square h-full w-full object-cover rounded-[inherit]", e),
+      ...s
+    }
+  ),
+  /* @__PURE__ */ o("div", { className: "absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgba(85,95,109,0.1)] pointer-events-none" })
+] }));
+v.displayName = a.Image.displayName;
+const g = n.forwardRef(({ className: e, size: s, type: r, variant: i, ...t }, m) => /* @__PURE__ */ o(
+  a.Fallback,
+  {
+    ref: m,
+    className: l(x({ size: s, type: r, variant: i }), e),
+    ...t
+  }
+));
+g.displayName = a.Fallback.displayName;
+export {
+  z as Avatar,
+  g as AvatarFallback,
+  v as AvatarImage,
+  x as avatarFallbackVariants,
+  p as avatarVariants
+};

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

@@ -0,0 +1,157 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { cva as x } from "class-variance-authority";
+import { cn as e } from "../../lib/utils.js";
+const m = x(
+  "inline-flex items-center w-fit max-w-full shrink-0 rounded-s px-[var(--space-s)] py-[var(--space-xs)] text-caption-medium-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 cursor-default",
+  {
+    variants: {
+      intent: {
+        neutral: "",
+        brand: "",
+        success: "",
+        warning: "",
+        destructive: "",
+        information: "",
+        violet: "",
+        magenta: ""
+      },
+      appearance: {
+        bold: "border-transparent",
+        subtle: ""
+      },
+      size: {
+        xs: "px-[var(--space-xs)] h-4 [&]:text-body-medium-xsm min-w-[16px] justify-center",
+        s: "px-[var(--space-xs)] h-5 [&]:text-body-medium-xsm min-w-[20px] justify-center",
+        m: "px-[var(--space-s)] h-6 [&]:text-body-medium-sm",
+        l: "px-[var(--space-m)] h-7 [&]:text-body-medium-md"
+      }
+    },
+    compoundVariants: [
+      // Neutral intent variants
+      {
+        intent: "neutral",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--grey-600)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "neutral",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-neutral-subtle)] bg-[var(--grey-100)] text-[var(--color-text-primary)]"
+      },
+      // Brand intent variants
+      {
+        intent: "brand",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--color-background-blue-bold)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "brand",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-brand-subtle)] bg-[var(--blue-50)] text-[var(--color-text-brand-bold)]"
+      },
+      // Success intent variants
+      {
+        intent: "success",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--color-background-success-bold)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "success",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-success-subtle)] bg-[var(--color-background-success-subtle)] text-[var(--color-text-success-bold)]"
+      },
+      // Warning intent variants
+      {
+        intent: "warning",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--color-background-warning-bold)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "warning",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-warning-subtle)] bg-[var(--color-background-warning-subtle)] text-[var(--color-text-warning-bold)]"
+      },
+      // Destructive intent variants
+      {
+        intent: "destructive",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--color-background-error-bold)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "destructive",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-error-subtle)] bg-[var(--color-background-error-subtle)] text-[var(--color-text-error-bold)]"
+      },
+      // Information intent variants
+      {
+        intent: "information",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--color-background-info-bold)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "information",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-info-subtle)] bg-[var(--color-background-info-subtle)] text-[var(--color-text-info-bold)]"
+      },
+      // Violet intent variants
+      {
+        intent: "violet",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--violet-500)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "violet",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-violet-subtle)] bg-[var(--violet-50)] text-[var(--violet-600)]"
+      },
+      // Magenta intent variants
+      {
+        intent: "magenta",
+        appearance: "bold",
+        class: "border-transparent bg-[var(--magenta-500)] text-[var(--color-text-inverse)]"
+      },
+      {
+        intent: "magenta",
+        appearance: "subtle",
+        class: "border border-[var(--color-border-magenta-subtle)] bg-[var(--magenta-50)] text-[var(--magenta-600)]"
+      }
+    ],
+    defaultVariants: {
+      intent: "neutral",
+      appearance: "subtle",
+      size: "m"
+    }
+  }
+), o = {
+  xs: "w-3 h-3",
+  s: "w-3.5 h-3.5",
+  m: "w-4 h-4",
+  l: "w-[18px] h-[18px]"
+}, g = u.forwardRef(
+  ({ className: n, intent: s, appearance: l, size: a = "m", icon: r, truncate: c = !0, children: b, ...i }, d) => {
+    const p = o[a] ?? o.m;
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        ref: d,
+        className: e(
+          m({ intent: s, appearance: l, size: a }),
+          r && "gap-[var(--space-xs)]",
+          n
+        ),
+        ...i,
+        children: [
+          r && /* @__PURE__ */ t("span", { className: e("inline-flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full", p), children: r }),
+          /* @__PURE__ */ t("span", { className: e("min-w-0 whitespace-nowrap", c && "overflow-hidden text-ellipsis"), children: b })
+        ]
+      }
+    );
+  }
+);
+g.displayName = "Badge";
+export {
+  g as Badge,
+  m as badgeVariants,
+  o as iconSizeClasses
+};