@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.2

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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = s.forwardRef(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e("div", { ref: a, className: i("", r), ...t })
+);
+T.displayName = "FormControl";
+const V = 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 = 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 = 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,205 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import C from "react";
+import { cn as d } from "../../lib/utils.js";
+import * as f from "lucide-react";
+import { X as k, Weight as m, Users as b, User as y, Upload as A, Truck as z, TriangleAlert as S, Trash2 as D, Trash as I, TextCursorInput as P, Table2 as L, Star as R, SquarePlus as T, Sparkles as N, Ship as U, ShieldCheck as M, Share2 as q, Share as B, Settings as W, Send as j, Search as E, Route as H, RotateCcw as F, RefreshCw as X, PlusCircle as Z, Plus as _, PanelRightClose as G, PanelLeft as O, Package as $, Navigation as J, MoreHorizontal as K, MessageSquare as Q, MessageCircle as V, MapPin as Y, Mail as rr, LogOut as er, Loader2 as or, ListFilter as ir, Link as tr, LayoutDashboard as cr, Info as nr, Handshake as ar, Grid2X2Plus as lr, FileText as sr, Eye as dr, Ellipsis as hr, Edit as wr, Download as ur, CreditCard as vr, Copy as xr, Code as pr, CircleHelp as gr, CircleDollarSign as Cr, CircleCheckBig as fr, CircleAlert as kr, Circle as mr, ChevronUp as br, ChevronRight as yr, ChevronLeft as Ar, ChevronDown as zr, CheckCircle as Sr, Check as Dr, CalendarDays as Ir, Bookmark as Pr, ArrowUp as Lr, ArrowRight as Rr, ArrowLeft as Tr, ArrowDownZA as Nr, ArrowDownWideNarrow as Ur, ArrowDownNarrowWide as Mr, ArrowDownAZ as qr, ArrowDown10 as Br, ArrowDown01 as Wr, ArrowDown as jr, Archive as Er, Anchor as Hr } from "lucide-react";
+import { customIcons as v } from "./custom-icons.js";
+const Fr = {
+  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)]"
+}, Xr = {
+  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
+};
+function Zr(r) {
+  return r.split("-").map((i) => i.charAt(0).toUpperCase() + i.slice(1)).join("");
+}
+const x = {
+  anchor: Hr,
+  archive: Er,
+  "arrow-down": jr,
+  "arrow-down-0-1": Wr,
+  "arrow-down-1-0": Br,
+  "arrow-down-a-z": qr,
+  "arrow-down-narrow-wide": Mr,
+  "arrow-down-wide-narrow": Ur,
+  "arrow-down-z-a": Nr,
+  "arrow-left": Tr,
+  "arrow-right": Rr,
+  "arrow-up": Lr,
+  bookmark: Pr,
+  "calendar-days": Ir,
+  check: Dr,
+  "check-circle": Sr,
+  "chevron-down": zr,
+  "chevron-left": Ar,
+  "chevron-right": yr,
+  "chevron-up": br,
+  circle: mr,
+  "circle-alert": kr,
+  "circle-check-big": fr,
+  "circle-dollar-sign": Cr,
+  "circle-help": gr,
+  code: pr,
+  copy: xr,
+  "credit-card": vr,
+  download: ur,
+  edit: wr,
+  ellipsis: hr,
+  eye: dr,
+  "file-text": sr,
+  "grid-2x2-plus": lr,
+  handshake: ar,
+  info: nr,
+  "layout-dashboard": cr,
+  link: tr,
+  "list-filter": ir,
+  "loader-2": or,
+  "log-out": er,
+  mail: rr,
+  "map-pin": Y,
+  "message-circle": V,
+  "message-square": Q,
+  "more-horizontal": K,
+  navigation: J,
+  package: $,
+  "panel-left": O,
+  "panel-right-close": G,
+  plus: _,
+  "plus-circle": Z,
+  "refresh-cw": X,
+  "rotate-ccw": F,
+  route: H,
+  search: E,
+  send: j,
+  settings: W,
+  share: B,
+  "share-2": q,
+  "shield-check": M,
+  ship: U,
+  sparkles: N,
+  "square-plus": T,
+  star: R,
+  "table-2": L,
+  "text-cursor-input": P,
+  trash: I,
+  "trash-2": D,
+  "triangle-alert": S,
+  truck: z,
+  upload: A,
+  user: y,
+  users: b,
+  weight: m,
+  x: k
+}, _r = C.forwardRef(
+  ({
+    name: r,
+    size: i = "m",
+    color: h,
+    className: t,
+    "aria-label": e,
+    ...c
+  }, n) => {
+    const a = h ? Fr[h] : "text-current", l = Xr[i], s = e ? { "aria-label": e, role: "img" } : { "aria-hidden": !0 };
+    if (r in v)
+      return /* @__PURE__ */ u(
+        "svg",
+        {
+          ref: n,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          className: d("shrink-0", l, a, t),
+          ...s,
+          ...c,
+          children: [
+            e && /* @__PURE__ */ o("title", { children: e }),
+            v[r]
+          ]
+        }
+      );
+    if (r in x) {
+      const g = x[r];
+      return /* @__PURE__ */ o(
+        g,
+        {
+          ref: n,
+          className: d("shrink-0", l, a, t),
+          ...s,
+          ...c
+        }
+      );
+    }
+    const p = Zr(r), w = f[p];
+    return w ? /* @__PURE__ */ o(
+      w,
+      {
+        ref: n,
+        className: d("shrink-0", l, a, t),
+        ...s,
+        ...c
+      }
+    ) : (console.warn(`Icon "${r}" not found in custom icons or Lucide icons`), /* @__PURE__ */ u(
+      "svg",
+      {
+        ref: n,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className: d("shrink-0", l, a, t),
+        ...s,
+        ...c,
+        children: [
+          e && /* @__PURE__ */ o("title", { children: e }),
+          /* @__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: "?"
+            }
+          )
+        ]
+      }
+    ));
+  }
+);
+_r.displayName = "Icon";
+export {
+  _r as Icon,
+  Fr as iconColors,
+  Xr as iconSizes
+};