@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

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

@@ -0,0 +1,170 @@
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import * as o from "react";
+import * as t from "@radix-ui/react-tabs";
+import { cva as v } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+const m = v(
+  "inline-flex items-center text-[var(--color-text-secondary)]",
+  {
+    variants: {
+      variant: {
+        pilled: "bg-[var(--color-surface-deepest)] p-[4px] rounded-m gap-[var(--space-2xs)]",
+        line: "border-b border-[var(--grey-100)] gap-[var(--space-s)] p-0"
+      },
+      size: {
+        s: "",
+        m: "",
+        l: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "pilled",
+        size: "s",
+        className: "h-[32px]"
+      },
+      {
+        variant: "pilled",
+        size: "m",
+        className: "h-[40px]"
+      },
+      {
+        variant: "pilled",
+        size: "l",
+        className: "h-[48px]"
+      }
+    ],
+    defaultVariants: {
+      variant: "pilled",
+      size: "m",
+      fullWidth: !1
+    }
+  }
+), x = v(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap cursor-pointer gap-[var(--space-s)]",
+    "transition-all ring-offset-[var(--color-surface-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      variant: {
+        pilled: [
+          "rounded-s bg-transparent",
+          "data-[state=active]:bg-[var(--color-surface-primary)] data-[state=active]:text-[var(--color-text-brand-bold-selected)] data-[state=active]:[&_svg]:text-[var(--color-text-brand-bold-selected)] data-[state=active]:shadow-xs",
+          "hover:bg-[var(--grey-alpha-50)] hover:text-[var(--color-text-primary)]",
+          "disabled:opacity-50"
+        ],
+        line: [
+          "h-full border-0 border-b-2 border-transparent rounded-none",
+          "data-[state=active]:border-[var(--color-border-selected)] data-[state=active]:text-[var(--color-text-brand-bold)] data-[state=active]:[&_svg]:text-[var(--color-text-brand-bold)] data-[state=active]:shadow-none",
+          "hover:data-[state=inactive]:border-[var(--color-border-action-outline-hovered)] hover:data-[state=inactive]:text-[var(--color-text-primary)] hover:data-[state=inactive]:[&_svg]:text-[var(--color-text-primary)]",
+          "focus-visible:data-[state=active]:bg-[var(--color-background-brand-subtle-selected)]",
+          "focus-visible:data-[state=inactive]:bg-[var(--color-background-neutral-subtlest-hovered)] focus-visible:data-[state=inactive]:border-[var(--color-border-action-outline-hovered)] focus-visible:data-[state=inactive]:text-[var(--color-text-primary)]",
+          "disabled:text-[var(--color-text-disabled)] disabled:border-transparent disabled:[&_svg]:text-[var(--color-text-disabled)]"
+        ]
+      },
+      size: {
+        s: "text-label-sm px-[var(--space-m)] py-[var(--space-xs)] [&_svg]:w-[var(--size-3xs)] [&_svg]:h-[var(--size-3xs)]",
+        m: "text-label-md px-[var(--space-m)] py-[6px] [&_svg]:w-[var(--size-2xs)] [&_svg]:h-[var(--size-2xs)]",
+        l: "text-label-md px-[var(--space-l)] py-[10px] [&_svg]:w-[var(--size-xs)] [&_svg]:h-[var(--size-xs)]"
+      },
+      fullWidth: {
+        true: "flex-1",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "line",
+        size: "s",
+        className: "text-label-sm px-[var(--space-s)] py-[var(--space-xs)]"
+      },
+      {
+        variant: "line",
+        size: "m",
+        className: "text-label-md px-[var(--space-s)] py-[var(--space-s)]"
+      },
+      {
+        variant: "line",
+        size: "l",
+        className: "text-body-medium-lg px-[var(--space-s)] py-[var(--space-s)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "pilled",
+      size: "m",
+      fullWidth: !1
+    }
+  }
+), f = /* @__PURE__ */ o.forwardRef(({ className: a, ...e }, s) => /* @__PURE__ */ i(
+  t.Root,
+  {
+    ref: s,
+    className: l("flex flex-col gap-[var(--space-s)]", a),
+    ...e
+  }
+));
+f.displayName = t.Root.displayName;
+const u = /* @__PURE__ */ o.forwardRef(({ className: a, variant: e, size: s, fullWidth: r, ...c }, d) => /* @__PURE__ */ i(
+  t.List,
+  {
+    ref: d,
+    className: l(m({ variant: e, size: s, fullWidth: r }), a),
+    ...c
+  }
+));
+u.displayName = t.List.displayName;
+const g = /* @__PURE__ */ o.forwardRef(({ className: a, variant: e, size: s, fullWidth: r, icon: c, children: d, ...n }, p) => /* @__PURE__ */ b(
+  t.Trigger,
+  {
+    ref: p,
+    className: l(x({ variant: e, size: s, fullWidth: r }), a),
+    ...n,
+    children: [
+      c && /* @__PURE__ */ i("span", { className: "shrink-0", children: c }),
+      d
+    ]
+  }
+));
+g.displayName = t.Trigger.displayName;
+const y = /* @__PURE__ */ o.forwardRef(({ className: a, ...e }, s) => /* @__PURE__ */ i(
+  t.Content,
+  {
+    ref: s,
+    className: l(
+      "mt-[var(--space-s)] ring-offset-[var(--color-surface-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:outline-none",
+      a
+    ),
+    ...e
+  }
+));
+y.displayName = t.Content.displayName;
+const h = /* @__PURE__ */ o.forwardRef(
+  ({ className: a, children: e, ...s }, r) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: r,
+      className: l(
+        "text-caption-sm mb-[var(--space-s)] font-medium text-[var(--color-text-tertiary)]",
+        a
+      ),
+      ...s,
+      children: e
+    }
+  )
+);
+h.displayName = "TabsGroupLabel";
+export {
+  f as Tabs,
+  y as TabsContent,
+  h as TabsGroupLabel,
+  u as TabsList,
+  g as TabsTrigger,
+  m as tabsListVariants,
+  x as tabsTriggerVariants
+};

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

@@ -0,0 +1,295 @@
+import { jsxs as C, jsx as t } from "react/jsx-runtime";
+import * as p from "react";
+import { cn as i } from "../../lib/utils.js";
+import { Icon as X } from "./icon.js";
+const E = {
+  cyan: "var(--cyan-500)",
+  neutral: "var(--grey-400)",
+  magenta: "var(--magenta-500)",
+  brand: "var(--blue-500)",
+  green: "var(--green-500)",
+  red: "var(--red-500)",
+  orange: "var(--orange-500)",
+  violet: "var(--violet-500)"
+}, I = {
+  neutral: "neutral",
+  brand: "brand",
+  success: "green",
+  warning: "orange",
+  destructive: "red"
+}, Q = ({ width: n, interactive: s = !1, className: a }) => {
+  const e = n - 0.5, l = `
+    M 11.8333 0.5
+    L ${e - 4} 0.5
+    Q ${e} 0.5 ${e} ${0.5 + 4}
+    L ${e} ${23.5 - 4}
+    Q ${e} 23.5 ${e - 4} 23.5
+    L 11.8333 23.5
+    C 10.7121 23.5 9.64236 23.0294 8.88472 22.2029
+    L 1.55138 14.2029
+    C 0.149538 12.6736 0.14954 10.3264 1.55138 8.7971
+    L 8.88472 0.7971
+    C 9.64236 0.5 10.7121 0.5 11.8333 0.5
+    Z
+  `;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      width: n,
+      height: 24,
+      viewBox: `0 0 ${n} 24`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: i("absolute inset-0 pointer-events-none overflow-visible", a),
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: l,
+          stroke: "var(--grey-100)",
+          className: i(
+            "fill-[var(--neutral-white)] transition-[fill]",
+            s && "group-hover:fill-[var(--grey-25)]"
+          )
+        }
+      )
+    }
+  );
+}, _ = ({ width: n, interactive: s = !1, className: a }) => {
+  const e = n - 0.5, l = `
+    M 11.1 0.5
+    L ${e - 4} 0.5
+    Q ${e} 0.5 ${e} ${0.5 + 4}
+    L ${e} ${19.5 - 4}
+    Q ${e} 19.5 ${e - 4} 19.5
+    L 11.1 19.5
+    C 10.1049 19.5 9.14559 19.1291 8.40931 18.4598
+    L 1.80931 12.4598
+    C 0.0635623 10.8727 0.0635653 8.1273 1.80931 6.5402
+    L 8.40931 0.5402
+    C 9.14559 0.5 10.1049 0.5 11.1 0.5
+    Z
+  `;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      width: n,
+      height: 20,
+      viewBox: `0 0 ${n} 20`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: i("absolute inset-0 pointer-events-none overflow-visible", a),
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: l,
+          stroke: "var(--grey-100)",
+          className: i(
+            "fill-[var(--neutral-white)] transition-[fill]",
+            s && "group-hover:fill-[var(--grey-25)]"
+          )
+        }
+      )
+    }
+  );
+}, j = {
+  s: {
+    height: 20,
+    typography: "[&]:text-label-sm",
+    dotSize: "w-1.5 h-1.5",
+    dotMargin: "mr-1",
+    closeSize: "w-3.5 h-3.5",
+    closeMargin: "ml-0.5",
+    paddingX: "px-[var(--space-s)]"
+  },
+  m: {
+    height: 24,
+    typography: "[&]:text-label-sm",
+    dotSize: "w-2 h-2",
+    dotMargin: "mr-1.5",
+    closeSize: "w-4 h-4",
+    closeMargin: "ml-1",
+    paddingX: "px-[var(--space-s)]"
+  }
+}, b = /* @__PURE__ */ p.forwardRef(
+  ({
+    className: n,
+    size: s = "m",
+    variant: a = "triangular",
+    children: g,
+    intent: h,
+    color: e,
+    showDot: l,
+    closable: f = !1,
+    onClose: x,
+    disabled: c = !1,
+    onClick: w,
+    interactive: r = !1,
+    style: $,
+    ...S
+  }, m) => {
+    const [y, N] = p.useState(0), v = p.useRef(null), o = j[s], u = a === "triangular";
+    p.useEffect(() => {
+      if (u && v.current) {
+        const d = new ResizeObserver((B) => {
+          for (const T of B) {
+            const D = T.borderBoxSize?.[0]?.inlineSize ?? T.target.getBoundingClientRect().width;
+            N(D);
+          }
+        });
+        return d.observe(v.current), () => d.disconnect();
+      }
+    }, [u]);
+    const z = (d) => {
+      d.stopPropagation(), c || x?.();
+    }, L = () => {
+      !c && r && w && w();
+    }, M = (d) => {
+      r && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), L());
+    }, k = e || (h ? I[h] : void 0), R = k ? E[k] : void 0, O = l ?? k !== void 0, A = s === "s" ? _ : Q;
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: m,
+        className: i(
+          "relative inline-flex group",
+          r && "cursor-pointer",
+          c && "opacity-50 cursor-not-allowed",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1",
+          n
+        ),
+        style: { height: `${o.height}px`, ...$ },
+        onClick: r ? L : void 0,
+        role: r ? "button" : void 0,
+        tabIndex: r && !c ? 0 : void 0,
+        onKeyDown: r ? M : void 0,
+        ...S,
+        children: [
+          u && y > 0 && /* @__PURE__ */ t(
+            A,
+            {
+              width: y,
+              interactive: r
+            }
+          ),
+          /* @__PURE__ */ C(
+            "div",
+            {
+              ref: u ? v : void 0,
+              className: i(
+                "relative z-10 inline-flex items-center",
+                o.typography,
+                o.paddingX,
+                "text-[var(--color-text-primary)]",
+                u && "pl-[12px]",
+                // notch width clearance
+                !u && [
+                  "border border-[var(--grey-100)] rounded-m",
+                  "bg-[var(--neutral-white)]",
+                  r && "group-hover:bg-[var(--grey-25)]",
+                  "transition-[background-color]"
+                ]
+              ),
+              children: [
+                O && R && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: i(
+                      "rounded-full shrink-0",
+                      o.dotSize,
+                      o.dotMargin
+                    ),
+                    style: { backgroundColor: R },
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "truncate", children: g }),
+                f && /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: i(
+                      "inline-flex items-center justify-center shrink-0 hover:bg-[var(--grey-alpha-50)] rounded-xs transition-colors",
+                      o.closeMargin,
+                      o.closeSize
+                    ),
+                    onClick: z,
+                    disabled: c,
+                    "aria-label": "Remove tag",
+                    children: /* @__PURE__ */ t(
+                      X,
+                      {
+                        name: "x",
+                        size: "s",
+                        color: c ? "disabled" : "secondary"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+b.displayName = "Tag";
+const G = /* @__PURE__ */ p.forwardRef(
+  ({
+    className: n,
+    tags: s,
+    onTagRemove: a,
+    onTagClick: g,
+    closable: h = !1,
+    interactive: e = !1,
+    size: l = "m",
+    variant: f,
+    intent: x,
+    color: c,
+    showDot: w,
+    maxVisible: r,
+    ...$
+  }, S) => {
+    const [m, y] = p.useState(!1), N = r && !m ? s.slice(0, r) : s, v = r && !m ? s.length - r : 0;
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: S,
+        className: i("flex flex-wrap items-center gap-[var(--space-s)]", n),
+        ...$,
+        children: [
+          N.map((o) => /* @__PURE__ */ t(
+            b,
+            {
+              intent: o.intent || x,
+              color: o.color || c,
+              size: l,
+              variant: f,
+              closable: h,
+              interactive: e,
+              disabled: o.disabled,
+              showDot: w,
+              onClose: a ? () => a(o.id) : void 0,
+              onClick: g ? () => g(o.id) : void 0,
+              children: o.label
+            },
+            o.id
+          )),
+          v > 0 && /* @__PURE__ */ C(b, { size: l, variant: f, interactive: !0, onClick: () => y(!0), children: [
+            "+",
+            v,
+            " more"
+          ] }),
+          m && r && /* @__PURE__ */ t(b, { size: l, variant: f, interactive: !0, onClick: () => y(!1), children: "Show less" })
+        ]
+      }
+    );
+  }
+);
+G.displayName = "TagGroup";
+export {
+  b as Tag,
+  G as TagGroup
+};

package/dist/es/components/fundamental/text-link.js

@@ -0,0 +1,105 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import * as r from "react";
+import { cva as w } from "class-variance-authority";
+import { cn as g } from "../../lib/utils.js";
+import { Icon as d } from "./icon.js";
+const N = w(
+  "inline-flex items-center gap-[var(--space-xs)] min-w-0 max-w-full transition-colors underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)] focus-visible:ring-offset-2",
+  {
+    variants: {
+      size: {
+        s: "[&]:text-body-sm",
+        m: "[&]:text-body-md",
+        l: "[&]:text-body-lg"
+      },
+      variant: {
+        default: "text-[var(--color-text-action-brand-bold)] hover:text-[var(--color-text-action-brand-bold-hovered)]",
+        subtle: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+      }
+    },
+    defaultVariants: {
+      size: "m",
+      variant: "default"
+    }
+  }
+), z = /* @__PURE__ */ r.forwardRef(
+  ({
+    className: x,
+    size: n = "m",
+    variant: a = "default",
+    icon: t,
+    iconPosition: l = "right",
+    disabled: e = !1,
+    children: v,
+    target: s,
+    rel: o,
+    onClick: c,
+    ...b
+  }, h) => {
+    const u = r.useMemo(() => {
+      switch (n) {
+        case "s":
+          return "s";
+        case "m":
+          return "s";
+        case "l":
+          return "m";
+        default:
+          return "s";
+      }
+    }, [n]), p = r.useMemo(() => s === "_blank" ? o ? `${o} noopener noreferrer` : "noopener noreferrer" : o, [s, o]), k = r.useCallback(
+      (m) => {
+        if (e) {
+          m.preventDefault();
+          return;
+        }
+        c?.(m);
+      },
+      [e, c]
+    ), f = r.useMemo(() => e ? "disabled" : a === "subtle" ? "secondary" : "brand", [e, a]);
+    return /* @__PURE__ */ y(
+      "a",
+      {
+        ref: h,
+        className: g(
+          N({ size: n, variant: a, className: x }),
+          e && "cursor-not-allowed text-[var(--color-text-disabled)] no-underline hover:no-underline hover:text-[var(--color-text-disabled)]"
+        ),
+        target: s,
+        rel: p,
+        onClick: k,
+        "aria-disabled": e,
+        tabIndex: e ? -1 : void 0,
+        ...b,
+        children: [
+          t && l === "left" && /* @__PURE__ */ i(
+            d,
+            {
+              name: t,
+              size: u,
+              color: f,
+              "aria-hidden": "true",
+              className: "flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ i("span", { className: "min-w-0 truncate", children: v }),
+          t && l === "right" && /* @__PURE__ */ i(
+            d,
+            {
+              name: t,
+              size: u,
+              color: f,
+              "aria-hidden": "true",
+              className: "flex-shrink-0"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "TextLink";
+export {
+  z as TextLink,
+  N as textLinkVariants
+};

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

@@ -0,0 +1,47 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as c } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+const p = c(
+  "flex min-h-[80px] w-full rounded-m border transition-colors placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_rgba(0,95,133,0.2),0px_3px_4px_0px_rgba(0,14,20,0.03)] disabled:cursor-not-allowed disabled:opacity-50 resize-y",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-[var(--color-interaction-background-input-neutral)] text-[var(--color-text-primary)]",
+          "border-[var(--color-interaction-border-input)]",
+          "hover:border-[var(--color-interaction-border-input-hovered)]",
+          "focus-visible:border-[#005f85]"
+        ],
+        error: [
+          "bg-[var(--color-interaction-background-input-neutral)] text-[var(--color-text-primary)]",
+          "border-[var(--color-border-error-bold)]",
+          "focus-visible:border-[var(--color-border-error-bold)]"
+        ]
+      },
+      size: {
+        s: "px-[var(--space-s)] py-[var(--space-xs)] text-body-sm",
+        m: "px-[var(--space-m)] py-[var(--space-s)] text-body-md",
+        l: "px-[var(--space-l)] py-[var(--space-m)] text-body-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "m"
+    }
+  }
+), d = /* @__PURE__ */ s.forwardRef(
+  ({ className: r, variant: e, size: o, ...a }, t) => /* @__PURE__ */ i(
+    "textarea",
+    {
+      className: l(p({ variant: e, size: o }), r),
+      ref: t,
+      ...a
+    }
+  )
+);
+d.displayName = "Textarea";
+export {
+  d as Textarea,
+  p as textareaVariants
+};