@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/form-field.js

@@ -0,0 +1,352 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as y } from "class-variance-authority";
+import { cn as i } from "../../lib/utils.js";
+import { Icon as f } from "./icon.js";
+import { Label as u } from "./label.js";
+import { Separator as v } from "./separator.js";
+const x = s.createContext({}), N = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e(
+    "fieldset",
+    {
+      ref: a,
+      className: i("flex flex-col gap-[var(--space-m)]", r),
+      ...t
+    }
+  )
+);
+N.displayName = "FieldSet";
+const b = y(
+  "block text-[var(--color-text-primary)] mb-[var(--space-xs)]",
+  {
+    variants: {
+      variant: {
+        legend: "[&]:text-heading-sm",
+        label: "[&]:text-body-md"
+      }
+    },
+    defaultVariants: {
+      variant: "legend"
+    }
+  }
+), F = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, variant: t, ...a }, l) => /* @__PURE__ */ e(
+    "legend",
+    {
+      ref: l,
+      className: i(b({ variant: t }), r),
+      ...a
+    }
+  )
+);
+F.displayName = "FieldLegend";
+const g = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: i("@container/field-group flex flex-col gap-[var(--space-m)]", r),
+      ...t
+    }
+  )
+);
+g.displayName = "FieldGroup";
+const h = y(
+  "flex gap-[var(--space-m)]",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col",
+        horizontal: "flex-row items-start",
+        responsive: "flex-col @md/field-group:flex-row @md/field-group:items-start"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+), w = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, orientation: t, invalid: a, ...l }, o) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      role: "group",
+      "data-invalid": a ? "" : void 0,
+      className: i(h({ orientation: t }), a && "group/invalid", r),
+      ...l
+    }
+  )
+);
+w.displayName = "Field";
+const R = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, asChild: t, ...a }, l) => t ? /* @__PURE__ */ e("div", { ref: l, className: r, ...a }) : /* @__PURE__ */ e(
+    "div",
+    {
+      ref: l,
+      className: i("flex flex-col gap-[var(--space-xs)]", r),
+      ...a
+    }
+  )
+);
+R.displayName = "FieldContent";
+const C = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, asChild: t, ...a }, l) => /* @__PURE__ */ e(
+    u,
+    {
+      ref: l,
+      className: i(
+        "peer [&]:text-body-md cursor-pointer",
+        "group-data-[invalid]/invalid:text-[var(--color-text-error-bold)]",
+        r
+      ),
+      ...a
+    }
+  )
+);
+C.displayName = "FieldLabel";
+const z = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: i(
+        "[&]:text-body-medium-sm text-[var(--color-text-primary)]",
+        "group-disabled:opacity-50",
+        r
+      ),
+      ...t
+    }
+  )
+);
+z.displayName = "FieldTitle";
+const L = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, children: t, ...a }, l) => /* @__PURE__ */ e(
+    "p",
+    {
+      ref: l,
+      className: i(
+        "[&]:text-body-sm text-[var(--color-text-tertiary)]",
+        "group-disabled:opacity-50",
+        r
+      ),
+      style: { textWrap: "balance" },
+      ...a,
+      children: t
+    }
+  )
+);
+L.displayName = "FieldDescription";
+const k = /* @__PURE__ */ s.forwardRef(({ children: r, className: t, ...a }, l) => r ? /* @__PURE__ */ m("div", { className: i("relative flex items-center gap-[var(--space-m)]", t), children: [
+  /* @__PURE__ */ e(v, { ref: l, className: "flex-1", ...a }),
+  /* @__PURE__ */ e("span", { className: "[&]:text-body-sm text-[var(--color-text-tertiary)]", children: r }),
+  /* @__PURE__ */ e(v, { className: "flex-1", ...a })
+] }) : /* @__PURE__ */ e(v, { ref: l, className: t, ...a }));
+k.displayName = "FieldSeparator";
+const S = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, errors: t, children: a, ...l }, o) => {
+    const d = t || a;
+    return d ? typeof d == "string" ? /* @__PURE__ */ m(
+      "div",
+      {
+        ref: o,
+        role: "alert",
+        "aria-live": "polite",
+        className: i(
+          "[&]:text-body-sm flex items-start gap-[var(--space-xs)] text-[var(--color-text-error-bold)]",
+          r
+        ),
+        ...l,
+        children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              name: "circle-alert",
+              size: "s",
+              color: "error",
+              className: "mt-[1px] flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: d })
+        ]
+      }
+    ) : Array.isArray(d) ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: o,
+        role: "alert",
+        "aria-live": "polite",
+        className: i(
+          "[&]:text-body-sm text-[var(--color-text-error-bold)]",
+          r
+        ),
+        ...l,
+        children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-[var(--space-xs)] list-disc list-inside", children: d.map((c, n) => /* @__PURE__ */ e("li", { children: c }, n)) })
+      }
+    ) : null : null;
+  }
+);
+S.displayName = "FieldError";
+const A = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, isCheckboxField: t = !1, invalid: a = !1, ...l }, o) => /* @__PURE__ */ e(x.Provider, { value: { isCheckboxField: t, invalid: a }, children: /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      "data-invalid": a ? "" : void 0,
+      className: i(
+        t ? "space-y-[var(--space-xs)]" : "space-y-[var(--space-s)]",
+        r
+      ),
+      ...l
+    }
+  ) })
+);
+A.displayName = "FormField";
+const E = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, ...t }, a) => {
+    const { invalid: l } = s.useContext(x);
+    return /* @__PURE__ */ e(
+      "label",
+      {
+        ref: a,
+        className: i(
+          "[&]:text-body-md mb-[var(--space-xs)] block text-[var(--color-text-primary)] cursor-pointer",
+          l && "text-[var(--color-text-error-bold)]",
+          r
+        ),
+        ...t
+      }
+    );
+  }
+);
+E.displayName = "FormLabel";
+const T = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e("div", { ref: a, className: i("", r), ...t })
+);
+T.displayName = "FormControl";
+const V = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, children: t, ...a }, l) => {
+    const { isCheckboxField: o } = s.useContext(x);
+    return o ? /* @__PURE__ */ e("div", { className: "ml-[calc(var(--size-2xs)+var(--space-s))]", children: /* @__PURE__ */ e(
+      "div",
+      {
+        ref: l,
+        className: i(
+          "[&]:text-body-sm text-[var(--color-text-tertiary)]",
+          r
+        ),
+        ...a,
+        children: t
+      }
+    ) }) : /* @__PURE__ */ m(
+      "div",
+      {
+        ref: l,
+        className: i(
+          "[&]:text-body-sm flex items-start gap-[var(--space-xs)] text-[var(--color-text-tertiary)]",
+          r
+        ),
+        ...a,
+        children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              name: "info",
+              size: "s",
+              color: "tertiary",
+              className: "mt-[1px] flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: t })
+        ]
+      }
+    );
+  }
+);
+V.displayName = "FormHelperText";
+const j = /* @__PURE__ */ s.forwardRef(({ className: r, errors: t, children: a, ...l }, o) => {
+  const { isCheckboxField: d } = s.useContext(x), c = t || a;
+  return c ? Array.isArray(c) ? d ? /* @__PURE__ */ e("div", { className: "ml-[calc(var(--size-2xs)+var(--space-s))]", children: /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      role: "alert",
+      "aria-live": "polite",
+      className: i(
+        "[&]:text-body-sm text-[var(--color-text-error-bold)]",
+        r
+      ),
+      ...l,
+      children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-[var(--space-xs)] list-disc list-inside", children: c.map((n, p) => /* @__PURE__ */ e("li", { children: n }, p)) })
+    }
+  ) }) : /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      role: "alert",
+      "aria-live": "polite",
+      className: i(
+        "[&]:text-body-sm flex flex-col gap-[var(--space-xs)] text-[var(--color-text-error-bold)]",
+        r
+      ),
+      ...l,
+      children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-[var(--space-xs)] list-disc list-inside ml-[calc(var(--size-s)+var(--space-xs))]", children: c.map((n, p) => /* @__PURE__ */ e("li", { children: n }, p)) })
+    }
+  ) : d ? /* @__PURE__ */ e("div", { className: "ml-[calc(var(--size-2xs)+var(--space-s))]", children: /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      role: "alert",
+      "aria-live": "polite",
+      className: i(
+        "[&]:text-body-sm text-[var(--color-text-error-bold)]",
+        r
+      ),
+      ...l,
+      children: c
+    }
+  ) }) : /* @__PURE__ */ m(
+    "div",
+    {
+      ref: o,
+      role: "alert",
+      "aria-live": "polite",
+      className: i(
+        "[&]:text-body-sm flex items-start gap-[var(--space-xs)] text-[var(--color-text-error-bold)]",
+        r
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            name: "circle-alert",
+            size: "s",
+            color: "error",
+            className: "mt-[1px] flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ e("span", { children: c })
+      ]
+    }
+  ) : null;
+});
+j.displayName = "FormErrorMessage";
+export {
+  w as Field,
+  R as FieldContent,
+  L as FieldDescription,
+  S as FieldError,
+  g as FieldGroup,
+  C as FieldLabel,
+  F as FieldLegend,
+  k as FieldSeparator,
+  N as FieldSet,
+  z as FieldTitle,
+  T as FormControl,
+  j as FormErrorMessage,
+  A as FormField,
+  V as FormHelperText,
+  E as FormLabel,
+  b as fieldLegendVariants,
+  h as fieldVariants
+};

package/dist/es/components/fundamental/hover-card.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import * as t from "@radix-ui/react-hover-card";
+import { cn as n } from "../../lib/utils.js";
+const c = t.Root, f = t.Trigger, m = /* @__PURE__ */ s.forwardRef(({ className: a, align: e = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+  t.Content,
+  {
+    ref: i,
+    align: e,
+    sideOffset: r,
+    className: n(
+      "z-50 w-64 rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-l)] text-[var(--color-text-primary)] shadow-lg outline-none 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",
+      a
+    ),
+    ...d
+  }
+) }));
+m.displayName = t.Content.displayName;
+export {
+  c as HoverCard,
+  m as HoverCardContent,
+  f as HoverCardTrigger
+};

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

@@ -0,0 +1,200 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import p from "react";
+import { cn as s } from "../../lib/utils.js";
+import { X as g, Weight as f, Users as C, User as k, Upload as m, Truck as A, TriangleAlert as y, Trash2 as b, Trash as z, TextCursorInput as S, Table2 as D, Star as L, SquarePlus as T, Sparkles as P, Ship as I, ShieldCheck as R, Share2 as U, Share as M, Settings as N, Send as q, Search as B, Route as E, RotateCcw as W, RefreshCw as F, PlusCircle as H, Plus as j, Pencil as X, PanelRightClose as Z, PanelLeft as _, Package as G, Navigation as O, MoreHorizontal as $, MessageSquare as J, MessageCircle as K, MapPin as Q, Mail as V, LogOut as Y, Loader2 as rr, ListFilter as er, Link as or, LayoutDashboard as ir, Info as tr, Handshake as nr, Grid2X2Plus as lr, Filter as ar, FileText as cr, Eye as sr, ExternalLink as dr, Ellipsis as hr, Edit as wr, Download as ur, Dot as vr, CreditCard as xr, Copy as pr, Code as gr, CircleHelp as fr, CircleDollarSign as Cr, CircleCheckBig as kr, CircleAlert as mr, Circle as Ar, ChevronUp as yr, ChevronRight as br, ChevronLeft as zr, ChevronDown as Sr, CheckCircle as Dr, Check as Lr, CalendarDays as Tr, Bookmark as Pr, ArrowUpToLine as Ir, ArrowUp as Rr, ArrowRightToLine as Ur, ArrowRight as Mr, ArrowLeftToLine as Nr, ArrowLeft as qr, ArrowDownZA as Br, ArrowDownWideNarrow as Er, ArrowDownToLine as Wr, ArrowDownNarrowWide as Fr, ArrowDownAZ as Hr, ArrowDown10 as jr, ArrowDown01 as Xr, ArrowDown as Zr, Archive as _r, Anchor as Gr, AlertCircle as Or } from "lucide-react";
+import { customIcons as w } from "./custom-icons.js";
+const $r = {
+  primary: "text-[var(--color-icon-primary)]",
+  secondary: "text-[var(--color-icon-secondary)]",
+  tertiary: "text-[var(--color-icon-tertiary)]",
+  "tertiary-hover": "text-[var(--color-icon-tertiary-hovered)]",
+  disabled: "text-[var(--color-icon-disabled)]",
+  "neutral-selected": "text-[var(--color-icon-neutral-bold-selected)]",
+  information: "text-[var(--color-icon-info-bold)]",
+  success: "text-[var(--color-icon-success-bold)]",
+  error: "text-[var(--color-icon-error-bold)]",
+  warning: "text-[var(--color-icon-warning-bold)]",
+  selected: "text-[var(--color-icon-brand-bold-selected)]",
+  brand: "text-[var(--color-icon-brand-bold)]",
+  "brand-hover": "text-[var(--color-icon-brand-bold-hovered)]",
+  "on-action": "text-[var(--color-icon-on-action)]",
+  inverse: "text-[var(--color-icon-inverse)]",
+  violet: "text-[var(--violet-500)]"
+}, Jr = {
+  s: "w-[var(--size-3xs)] h-[var(--size-3xs)]",
+  // 12px
+  m: "w-[var(--size-2xs)] h-[var(--size-2xs)]",
+  // 16px
+  l: "w-[var(--size-xs)] h-[var(--size-xs)]",
+  // 20px
+  xl: "w-[var(--size-s)] h-[var(--size-s)]"
+  // 24px
+}, u = {
+  "alert-circle": Or,
+  anchor: Gr,
+  archive: _r,
+  "arrow-down": Zr,
+  "arrow-down-0-1": Xr,
+  "arrow-down-1-0": jr,
+  "arrow-down-a-z": Hr,
+  "arrow-down-narrow-wide": Fr,
+  "arrow-down-to-line": Wr,
+  "arrow-down-wide-narrow": Er,
+  "arrow-down-z-a": Br,
+  "arrow-left": qr,
+  "arrow-left-to-line": Nr,
+  "arrow-right": Mr,
+  "arrow-right-to-line": Ur,
+  "arrow-up": Rr,
+  "arrow-up-to-line": Ir,
+  bookmark: Pr,
+  "calendar-days": Tr,
+  check: Lr,
+  "check-circle": Dr,
+  "chevron-down": Sr,
+  "chevron-left": zr,
+  "chevron-right": br,
+  "chevron-up": yr,
+  circle: Ar,
+  "circle-alert": mr,
+  "circle-check-big": kr,
+  "circle-dollar-sign": Cr,
+  "circle-help": fr,
+  code: gr,
+  copy: pr,
+  "credit-card": xr,
+  dot: vr,
+  download: ur,
+  edit: wr,
+  ellipsis: hr,
+  "external-link": dr,
+  eye: sr,
+  "file-text": cr,
+  filter: ar,
+  "grid-2x2-plus": lr,
+  handshake: nr,
+  info: tr,
+  "layout-dashboard": ir,
+  link: or,
+  "list-filter": er,
+  "loader-2": rr,
+  "log-out": Y,
+  mail: V,
+  "map-pin": Q,
+  "message-circle": K,
+  "message-square": J,
+  "more-horizontal": $,
+  navigation: O,
+  package: G,
+  "panel-left": _,
+  "panel-right-close": Z,
+  pencil: X,
+  plus: j,
+  "plus-circle": H,
+  "refresh-cw": F,
+  "rotate-ccw": W,
+  route: E,
+  search: B,
+  send: q,
+  settings: N,
+  share: M,
+  "share-2": U,
+  "shield-check": R,
+  ship: I,
+  sparkles: P,
+  "square-plus": T,
+  star: L,
+  "table-2": D,
+  "text-cursor-input": S,
+  trash: z,
+  "trash-2": b,
+  "triangle-alert": y,
+  truck: A,
+  upload: m,
+  user: k,
+  users: C,
+  weight: f,
+  x: g
+}, Kr = /* @__PURE__ */ p.forwardRef(
+  ({
+    name: e,
+    size: v = "m",
+    color: d,
+    className: i,
+    "aria-label": r,
+    ...t
+  }, n) => {
+    const l = d ? $r[d] : "text-current", a = Jr[v], c = r ? { "aria-label": r, role: "img" } : { "aria-hidden": !0 };
+    if (e in w)
+      return /* @__PURE__ */ h(
+        "svg",
+        {
+          ref: n,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          className: s("shrink-0", a, l, i),
+          ...c,
+          ...t,
+          children: [
+            r && /* @__PURE__ */ o("title", { children: r }),
+            w[e]
+          ]
+        }
+      );
+    if (e in u) {
+      const x = u[e];
+      return /* @__PURE__ */ o(
+        x,
+        {
+          ref: n,
+          className: s("shrink-0", a, l, i),
+          ...c,
+          ...t
+        }
+      );
+    }
+    return console.warn(`Icon "${e}" not found. Add it to the commonLucideIcons map in icon.tsx for tree-shaking support.`), /* @__PURE__ */ h(
+      "svg",
+      {
+        ref: n,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className: s("shrink-0", a, l, i),
+        ...c,
+        ...t,
+        children: [
+          r && /* @__PURE__ */ o("title", { children: r }),
+          /* @__PURE__ */ o(
+            "rect",
+            {
+              x: "2",
+              y: "2",
+              width: "20",
+              height: "20",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "text",
+            {
+              x: "12",
+              y: "16",
+              textAnchor: "middle",
+              fontSize: "12",
+              fill: "currentColor",
+              children: "?"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Kr.displayName = "Icon";
+export {
+  Kr as Icon,
+  $r as iconColors,
+  Jr as iconSizes
+};