@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

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

@@ -0,0 +1,123 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useState as y, useRef as D, useEffect as I, createContext as B, useContext as K } from "react";
+const S = B(null), k = () => {
+  const t = K(S);
+  if (!t)
+    throw new Error("Editable compound components must be used within Editable");
+  return t;
+}, V = ({
+  value: t,
+  defaultValue: o = "",
+  onSubmit: u,
+  onChange: s,
+  disabled: a = !1,
+  placeholder: c,
+  autoFocus: f = !0,
+  selectAllOnFocus: d = !0,
+  children: g,
+  className: m,
+  style: C
+}) => {
+  const e = t !== void 0, [x, i] = y(t ?? o), [h, r] = y(!1), [E, n] = y(t ?? o), v = D(null), b = e ? t : x;
+  I(() => {
+    e && (i(t), h || n(t));
+  }, [t, e, h]);
+  const w = {
+    isEditing: h,
+    value: b,
+    originalValue: E,
+    disabled: a,
+    placeholder: c,
+    onStartEdit: () => {
+      a || (r(!0), n(b), f && setTimeout(() => {
+        v.current && (v.current.focus(), d && v.current.select());
+      }, 0));
+    },
+    onSave: () => {
+      const l = b.trim();
+      if (!l) {
+        e || i(E), r(!1);
+        return;
+      }
+      u?.(l), e || i(l), r(!1);
+    },
+    onCancel: () => {
+      e || i(E), r(!1);
+    },
+    onChange: (l) => {
+      s?.(l), e || i(l);
+    },
+    inputRef: v
+  };
+  return /* @__PURE__ */ p(S.Provider, { value: w, children: /* @__PURE__ */ p("div", { className: m, style: C, children: g }) });
+}, W = ({
+  className: t,
+  style: o,
+  children: u
+}) => {
+  const { isEditing: s, value: a, disabled: c, onStartEdit: f } = k();
+  return s ? null : /* @__PURE__ */ p(
+    "div",
+    {
+      onClick: () => {
+        f();
+      },
+      className: t,
+      style: {
+        cursor: c ? "default" : "pointer",
+        ...o
+      },
+      children: u || a || "Click to edit"
+    }
+  );
+}, $ = ({
+  className: t,
+  style: o,
+  type: u = "text",
+  autoResize: s = !1,
+  minWidth: a = 120,
+  charWidth: c = 16
+}) => {
+  const {
+    isEditing: f,
+    value: d,
+    placeholder: g,
+    onChange: m,
+    onSave: C,
+    onCancel: e,
+    inputRef: x
+  } = k();
+  if (!f) return null;
+  const i = (n) => {
+    m(n.target.value);
+  }, h = (n) => {
+    n.key === "Enter" ? (n.preventDefault(), C()) : n.key === "Escape" && (n.preventDefault(), e());
+  }, r = () => {
+    C();
+  }, E = s ? Math.max(a, d.length * c) : void 0;
+  return /* @__PURE__ */ p(
+    "input",
+    {
+      ref: x,
+      type: u,
+      value: d,
+      onChange: i,
+      onKeyDown: h,
+      onBlur: r,
+      placeholder: g,
+      className: t,
+      style: {
+        ...o,
+        ...s && { width: `${E}px` }
+      }
+    }
+  );
+};
+export {
+  V as Editable,
+  W as EditableDisplay,
+  $ as EditableField,
+  $ as EditableInput,
+  W as EditablePreview,
+  V as default
+};

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

@@ -0,0 +1,152 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as l } from "../../lib/utils.js";
+import { cva as c } from "class-variance-authority";
+const m = c(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      size: {
+        s: "gap-[var(--space-m)] py-[var(--space-3xl)] px-[var(--space-l)]",
+        m: "gap-[var(--space-l)] py-[var(--space-4xl)] px-[var(--space-xl)]",
+        l: "gap-[var(--space-xl)] py-[var(--space-5xl)] px-[var(--space-2xl)]"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+), d = /* @__PURE__ */ s.forwardRef(
+  ({ className: a, size: e, ...t }, r) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: r,
+      className: l(m({ size: e }), a),
+      ...t
+    }
+  )
+);
+d.displayName = "Empty";
+const p = /* @__PURE__ */ s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: t,
+    className: l("flex flex-col items-center gap-[var(--space-m)]", a),
+    ...e
+  }
+));
+p.displayName = "EmptyHeader";
+const x = c(
+  "rounded-full flex items-center justify-center",
+  {
+    variants: {
+      variant: {
+        icon: "rounded-full",
+        default: ""
+        // For avatars, images, etc.
+      },
+      color: {
+        default: "bg-[var(--color-background-neutral-subtlest)] text-[var(--color-text-tertiary)]",
+        primary: "bg-[var(--color-background-brand-subtle)] text-[var(--color-text-brand-bold)]",
+        success: "bg-[var(--color-background-success-subtle)] text-[var(--color-text-success-bold)]",
+        warning: "bg-[var(--color-background-warning-subtle)] text-[var(--color-text-warning-bold)]",
+        error: "bg-[var(--color-background-error-subtle)] text-[var(--color-text-error-bold)]",
+        info: "bg-[var(--color-background-info-subtle)] text-[var(--color-text-info-bold)]"
+      },
+      size: {
+        s: "h-[var(--size-3xl)] w-[var(--size-3xl)]",
+        m: "h-[var(--size-4xl)] w-[var(--size-4xl)]",
+        l: "h-[var(--size-5xl)] w-[var(--size-5xl)]"
+      }
+    },
+    defaultVariants: {
+      variant: "icon",
+      color: "default",
+      size: "m"
+    }
+  }
+), v = /* @__PURE__ */ s.forwardRef(
+  ({ className: a, variant: e, color: t, size: r, ...i }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      className: l(
+        x({ variant: e, color: e === "icon" ? t : void 0, size: r }),
+        a
+      ),
+      ...i
+    }
+  )
+);
+v.displayName = "EmptyMedia";
+const f = c(
+  "font-semibold text-[var(--color-text-primary)]",
+  {
+    variants: {
+      size: {
+        s: "text-heading-sm",
+        m: "text-heading-md",
+        l: "text-heading-lg"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+), y = /* @__PURE__ */ s.forwardRef(
+  ({ className: a, size: e, ...t }, r) => /* @__PURE__ */ o(
+    "h3",
+    {
+      ref: r,
+      className: l(f({ size: e }), a),
+      ...t
+    }
+  )
+);
+y.displayName = "EmptyTitle";
+const u = c(
+  "text-[var(--color-text-secondary)]",
+  {
+    variants: {
+      size: {
+        s: "text-body-sm",
+        m: "text-body-md",
+        l: "text-body-lg"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+), b = /* @__PURE__ */ s.forwardRef(
+  ({ className: a, size: e, ...t }, r) => /* @__PURE__ */ o(
+    "p",
+    {
+      ref: r,
+      className: l(u({ size: e }), a),
+      ...t
+    }
+  )
+);
+b.displayName = "EmptyDescription";
+const g = /* @__PURE__ */ s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: t,
+    className: l("flex flex-col sm:flex-row items-center gap-[var(--space-m)]", a),
+    ...e
+  }
+));
+g.displayName = "EmptyContent";
+export {
+  d as Empty,
+  g as EmptyContent,
+  b as EmptyDescription,
+  p as EmptyHeader,
+  v as EmptyMedia,
+  y as EmptyTitle,
+  u as emptyDescriptionVariants,
+  x as emptyMediaVariants,
+  f as emptyTitleVariants,
+  m as emptyVariants
+};

package/dist/es/components/fundamental/file-upload.js

@@ -0,0 +1,289 @@
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as v } from "../../lib/utils.js";
+import { cva as X } from "class-variance-authority";
+import { Button as P } from "./button.js";
+import { Progress as Y } from "./progress.js";
+import { Icon as z } from "./icon.js";
+import { Badge as Z } from "./badge.js";
+const M = n.createContext(
+  null
+), D = () => {
+  const r = n.useContext(M);
+  if (!r)
+    throw new Error("useFileUpload must be used within a FileUpload component");
+  return r;
+}, j = /* @__PURE__ */ n.forwardRef(
+  ({
+    className: r,
+    files: e,
+    onFilesChange: o,
+    maxFiles: t = 10,
+    maxSize: l = 10 * 1024 * 1024,
+    // 10MB
+    accept: i,
+    disabled: m = !1,
+    multiple: c = !0,
+    onUpload: p,
+    children: u,
+    ...x
+  }, w) => {
+    const g = n.useMemo(
+      () => ({
+        files: e,
+        onFilesChange: o,
+        maxFiles: t,
+        maxSize: l,
+        accept: i,
+        disabled: m,
+        multiple: c,
+        onUpload: p
+      }),
+      [
+        e,
+        o,
+        t,
+        l,
+        i,
+        m,
+        c,
+        p
+      ]
+    );
+    return /* @__PURE__ */ s(M.Provider, { value: g, children: /* @__PURE__ */ s("div", { ref: w, className: v("space-y-4", r), ...x, children: u }) });
+  }
+);
+j.displayName = "FileUploadRoot";
+const _ = X(
+  "relative flex flex-col items-center justify-center rounded-l border-2 border-dashed p-6 text-center transition-colors duration-200",
+  {
+    variants: {
+      isDragActive: {
+        true: "border-[var(--color-border-brand-bold)] bg-[var(--color-background-brand-subtle)]",
+        false: "border-[var(--color-interaction-border-input)] hover:border-[var(--color-border-brand-bold)]"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      isDragActive: !1,
+      disabled: !1
+    }
+  }
+), k = /* @__PURE__ */ n.forwardRef(({ className: r, children: e, ...o }, t) => {
+  const {
+    files: l,
+    onFilesChange: i,
+    maxFiles: m,
+    maxSize: c,
+    accept: p,
+    disabled: u,
+    multiple: x
+  } = D(), [w, g] = n.useState(!1), y = n.useRef(null), O = (a) => {
+    if (c && a.size > c)
+      return `File size must be less than ${E(c)}`;
+    if (p && p.length > 0) {
+      const d = a.type, N = `.${a.name.split(".").pop()?.toLowerCase()}`;
+      if (!p.some((f) => {
+        if (f.startsWith("."))
+          return f.toLowerCase() === N;
+        if (f.includes("*")) {
+          const F = f.split("/")[0];
+          return d.startsWith(F);
+        }
+        return d === f;
+      }))
+        return `File type not supported. Accepted types: ${p.join(", ")}`;
+    }
+    return null;
+  }, I = (a) => {
+    const d = [], N = l.length;
+    Array.from(a).forEach((h, f) => {
+      if (m && N + d.length >= m) return;
+      const F = O(h), R = {
+        id: `${Date.now()}-${f}`,
+        file: h,
+        status: F ? "error" : "pending",
+        error: F || void 0,
+        progress: 0
+      };
+      if (h.type.startsWith("image/")) {
+        const C = new FileReader();
+        C.onload = (J) => {
+          const Q = l.map(
+            (U) => U.id === R.id ? { ...U, preview: J.target?.result } : U
+          );
+          i(Q);
+        }, C.readAsDataURL(h);
+      }
+      d.push(R);
+    }), d.length > 0 && i([...l, ...d]);
+  }, S = (a) => {
+    a.preventDefault(), a.stopPropagation(), u || g(!0);
+  }, G = (a) => {
+    a.preventDefault(), a.stopPropagation(), g(!1);
+  }, K = (a) => {
+    if (a.preventDefault(), a.stopPropagation(), g(!1), u) return;
+    const d = a.dataTransfer.files;
+    d.length > 0 && I(d);
+  }, q = () => {
+    u || y.current?.click();
+  }, H = (a) => {
+    const d = a.target.files;
+    d && I(d), a.target.value = "";
+  };
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: t,
+      className: v(_({ isDragActive: w, disabled: u }), r),
+      onDragOver: S,
+      onDragLeave: G,
+      onDrop: K,
+      onClick: q,
+      role: "button",
+      tabIndex: u ? -1 : 0,
+      "aria-label": "Upload files",
+      ...o,
+      children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: y,
+            type: "file",
+            multiple: x,
+            accept: p?.join(","),
+            disabled: u,
+            className: "hidden",
+            onChange: H
+          }
+        ),
+        e
+      ]
+    }
+  );
+});
+k.displayName = "FileUploadDropzone";
+const L = /* @__PURE__ */ n.forwardRef(({ children: r, ...e }, o) => {
+  const { disabled: t } = D();
+  return /* @__PURE__ */ s(P, { ref: o, disabled: t, ...e, children: r });
+});
+L.displayName = "FileUploadTrigger";
+const A = /* @__PURE__ */ n.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ s("div", { ref: t, className: v("space-y-2", r), ...o, children: e })
+);
+A.displayName = "FileUploadList";
+const B = /* @__PURE__ */ n.forwardRef(
+  ({ className: r, file: e, children: o, ...t }, l) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: l,
+      className: v(
+        "flex items-center gap-3 rounded-l border p-3",
+        "border-[var(--color-border-primary)]",
+        e.status === "error" && "border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",
+        e.status === "success" && "border-[var(--color-border-success-bold)] bg-[var(--color-background-success-subtle)]",
+        r
+      ),
+      ...t,
+      children: o
+    }
+  )
+);
+B.displayName = "FileUploadItem";
+const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
+  const l = (i) => i.startsWith("image/") ? "image" : i.startsWith("video/") ? "video" : i.startsWith("audio/") ? "volume-2" : i.includes("pdf") || i.includes("text/") || i.includes("application/json") ? "file-text" : "file";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: t,
+      className: v(
+        "flex h-10 w-10 items-center justify-center rounded",
+        r
+      ),
+      ...o,
+      children: e.preview ? /* @__PURE__ */ s(
+        "img",
+        {
+          src: e.preview,
+          alt: e.file.name,
+          className: "h-full w-full rounded object-cover"
+        }
+      ) : /* @__PURE__ */ s(
+        z,
+        {
+          name: l(e.file.type),
+          className: "h-5 w-5 text-[var(--color-text-secondary)]"
+        }
+      )
+    }
+  );
+});
+W.displayName = "FileUploadItemPreview";
+const $ = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => /* @__PURE__ */ b("div", { ref: t, className: v("flex-1 space-y-1", r), ...o, children: [
+  /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ s("p", { className: "text-body-sm truncate font-medium", children: e.file.name }),
+    /* @__PURE__ */ s(Z, { children: e.status })
+  ] }),
+  /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-secondary)]", children: E(e.file.size) }),
+  e.error && /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: e.error })
+] }));
+$.displayName = "FileUploadItemMetadata";
+const V = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, l) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ b("div", { ref: l, className: v("w-full", r), ...t, children: [
+  /* @__PURE__ */ s(Y, { value: e.progress, className: "h-2" }),
+  /* @__PURE__ */ b("p", { className: "text-caption-sm mt-1 text-[var(--color-text-secondary)]", children: [
+    Math.round(e.progress),
+    "%"
+  ] })
+] }));
+V.displayName = "FileUploadItemProgress";
+const T = /* @__PURE__ */ n.forwardRef(({ file: r, ...e }, o) => {
+  const { files: t, onFilesChange: l } = D();
+  return /* @__PURE__ */ s(
+    P,
+    {
+      ref: o,
+      variant: "ghost",
+      size: "s",
+      onClick: () => {
+        const m = t.filter((c) => c.id !== r.id);
+        l(m);
+      },
+      "aria-label": `Remove ${r.file.name}`,
+      ...e,
+      children: /* @__PURE__ */ s(z, { name: "x", className: "h-4 w-4" })
+    }
+  );
+});
+T.displayName = "FileUploadItemDelete";
+const E = (r) => {
+  if (r === 0) return "0 Bytes";
+  const e = 1024, o = ["Bytes", "KB", "MB", "GB"], t = Math.floor(Math.log(r) / Math.log(e));
+  return parseFloat((r / Math.pow(e, t)).toFixed(2)) + " " + o[t];
+}, ne = {
+  Root: j,
+  Dropzone: k,
+  Trigger: L,
+  List: A,
+  Item: B,
+  ItemPreview: W,
+  ItemMetadata: $,
+  ItemProgress: V,
+  ItemDelete: T
+};
+export {
+  ne as FileUpload,
+  k as FileUploadDropzone,
+  B as FileUploadItem,
+  T as FileUploadItemDelete,
+  $ as FileUploadItemMetadata,
+  W as FileUploadItemPreview,
+  V as FileUploadItemProgress,
+  A as FileUploadList,
+  j as FileUploadRoot,
+  L as FileUploadTrigger,
+  E as formatFileSize,
+  D as useFileUpload
+};

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

@@ -0,0 +1,60 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+const g = {
+  s: {
+    width: "w-[var(--size-3xs)]",
+    // 12px
+    height: "h-[9px]"
+    // 12 * 0.75 = 9px for 4:3 aspect ratio
+  },
+  m: {
+    width: "w-[var(--size-2xs)]",
+    // 16px
+    height: "h-[12px]"
+    // 16 * 0.75 = 12px for 4:3 aspect ratio
+  },
+  l: {
+    width: "w-[var(--size-xs)]",
+    // 20px
+    height: "h-[15px]"
+    // 20 * 0.75 = 15px for 4:3 aspect ratio
+  },
+  xl: {
+    width: "w-[var(--size-s)]",
+    // 24px
+    height: "h-[18px]"
+    // 24 * 0.75 = 18px for 4:3 aspect ratio
+  }
+};
+function d({
+  country: e,
+  size: s = "m",
+  className: t,
+  "aria-label": a,
+  ...r
+}) {
+  if (!e)
+    return null;
+  const i = g[s], h = e.toLowerCase();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: l(
+        "inline-block rounded-[2px] shadow-[inset_0_0_0_1px_rgba(85,95,109,0.1)] bg-cover bg-center bg-no-repeat",
+        i.width,
+        i.height,
+        t
+      ),
+      style: {
+        backgroundImage: `url(https://flagcdn.com/${h}.svg)`
+      },
+      role: "img",
+      "aria-label": a || `${e.toUpperCase()} flag`,
+      ...r
+    }
+  );
+}
+export {
+  d as Flag,
+  g as flagSizes
+};