@danieljoffe/shared-ui 0.0.1 → 0.1.0

package/dist/lib/Switch.js

@@ -0,0 +1,69 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useId as b } from "react";
+import { DISABLED as x, FOCUS_RING_OFFSET as v, FOCUS_RING as g } from "./styles/formStyles.js";
+import { Text as I } from "./Text.js";
+import { cn as o } from "./utils/cn.js";
+function F({
+  checked: e,
+  onChange: c,
+  label: t,
+  error: r,
+  disabled: a = !1,
+  className: m,
+  id: f,
+  ref: u
+}) {
+  const p = b(), i = f || p, s = t ? `${i}-label` : void 0, l = r ? `${i}-error` : void 0;
+  return /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          ref: u,
+          type: "button",
+          role: "switch",
+          id: i,
+          "aria-checked": e,
+          "aria-invalid": r ? "true" : void 0,
+          "aria-labelledby": s,
+          "aria-describedby": l,
+          disabled: a,
+          onClick: () => c(!e),
+          className: o(
+            "relative inline-flex h-6 w-11 items-center rounded-full transition-colors motion-reduce:transition-none",
+            g,
+            v,
+            x,
+            e ? "bg-brand-500" : "bg-border-strong",
+            r && "ring-1 ring-error",
+            m
+          ),
+          children: /* @__PURE__ */ n(
+            "span",
+            {
+              className: o(
+                "inline-block h-4 w-4 transform rounded-full bg-surface transition-transform motion-reduce:transition-none",
+                e ? "translate-x-6" : "translate-x-1"
+              )
+            }
+          )
+        }
+      ),
+      t && /* @__PURE__ */ n(
+        "span",
+        {
+          id: s,
+          className: o(
+            "text-text-primary select-none",
+            a && "opacity-50 cursor-not-allowed"
+          ),
+          children: t
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ n(I, { variant: "error", id: l, className: "mt-1.5", role: "alert", children: r })
+  ] });
+}
+export {
+  F as Switch
+};

package/dist/lib/Table.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { Text as y } from "./Text.js";
+import { cn as n } from "./utils/cn.js";
+function D({
+  columns: s,
+  data: l,
+  onRowClick: r,
+  striped: x = !1,
+  className: h,
+  caption: i,
+  ariaLabel: m,
+  rowKey: o,
+  getRowAriaLabel: c
+}) {
+  const b = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }, p = (e, d) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(d));
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n(
+        "w-full overflow-x-auto border border-border rounded-xl",
+        h
+      ),
+      children: /* @__PURE__ */ f(
+        "table",
+        {
+          className: "w-full text-sm",
+          "aria-label": i ? void 0 : m,
+          children: [
+            i && /* @__PURE__ */ t("caption", { className: "px-4 py-3 text-left text-sm font-medium text-text-secondary", children: i }),
+            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-border bg-surface-secondary", children: s.map((e) => /* @__PURE__ */ t(
+              "th",
+              {
+                scope: "col",
+                className: n(
+                  "px-4 py-3 font-medium text-text-secondary",
+                  b[e.align || "left"]
+                ),
+                style: e.width ? { width: e.width } : void 0,
+                children: e.header
+              },
+              e.key
+            )) }) }),
+            /* @__PURE__ */ f("tbody", { children: [
+              l.map((e, d) => {
+                const u = o ? o(e) : d;
+                return /* @__PURE__ */ t(
+                  "tr",
+                  {
+                    onClick: r ? () => r(e) : void 0,
+                    onKeyDown: r ? (a) => p(a, e) : void 0,
+                    tabIndex: r ? 0 : void 0,
+                    role: r ? "button" : void 0,
+                    "aria-label": r && c ? c(e) : void 0,
+                    className: n(
+                      "border-b border-border last:border-b-0 transition-colors",
+                      r && "cursor-pointer hover:bg-surface-secondary focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent",
+                      x && d % 2 === 1 && "bg-surface-secondary"
+                    ),
+                    children: s.map((a) => /* @__PURE__ */ t(
+                      "td",
+                      {
+                        className: n(
+                          "px-4 py-3 text-text-primary",
+                          b[a.align || "left"]
+                        ),
+                        children: a.render ? a.render(e) : e[a.key]
+                      },
+                      a.key
+                    ))
+                  },
+                  u
+                );
+              }),
+              l.length === 0 && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: s.length, className: "px-4 py-12 text-center", children: /* @__PURE__ */ t(y, { variant: "caption", as: "span", children: "No data available" }) }) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  D as Table
+};

package/dist/lib/Tabs.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { useState as T, useId as N, useCallback as c } from "react";
+import { cn as i } from "./utils/cn.js";
+function D({
+  tabs: r,
+  defaultTab: h,
+  onChange: m,
+  className: p,
+  variant: a = "underline",
+  ref: g
+}) {
+  const v = r[0], [n, y] = T(h ?? v?.id ?? ""), o = N(), u = c(
+    (e) => {
+      y(e), m?.(e);
+    },
+    [m]
+  ), w = r.find((e) => e.id === n)?.content, l = c(
+    (e) => `${o}-tab-${e}`,
+    [o]
+  ), x = c(
+    (e) => `${o}-panel-${e}`,
+    [o]
+  ), I = c(
+    (e, f) => {
+      const b = r.findIndex((d) => d.id === f);
+      let t = null;
+      switch (e.key) {
+        case "ArrowRight":
+          t = (b + 1) % r.length;
+          break;
+        case "ArrowLeft":
+          t = (b - 1 + r.length) % r.length;
+          break;
+        case "Home":
+          t = 0;
+          break;
+        case "End":
+          t = r.length - 1;
+          break;
+      }
+      if (t !== null) {
+        const d = r[t];
+        if (!d) return;
+        e.preventDefault(), u(d.id), document.getElementById(l(d.id))?.focus();
+      }
+    },
+    [r, u, l]
+  );
+  return r.length === 0 ? null : /* @__PURE__ */ k("div", { ref: g, className: i("w-full", p), children: [
+    /* @__PURE__ */ s("div", { className: a === "underline" ? "border-b border-border" : "", children: /* @__PURE__ */ s(
+      "div",
+      {
+        role: "tablist",
+        className: i(
+          "flex flex-wrap",
+          a === "underline" ? "gap-1" : "gap-1 p-1 bg-surface-tertiary rounded-lg"
+        ),
+        children: r.map((e) => /* @__PURE__ */ s(
+          "button",
+          {
+            id: l(e.id),
+            role: "tab",
+            "aria-selected": n === e.id,
+            "aria-controls": x(e.id),
+            tabIndex: n === e.id ? 0 : -1,
+            onClick: () => u(e.id),
+            onKeyDown: (f) => I(f, e.id),
+            className: i(
+              "px-4 py-2.5 transition-colors focus-visible:outline-none",
+              "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2",
+              a === "underline" ? i(
+                "border-b-2",
+                n === e.id ? "border-brand-500 text-brand-500" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-secondary"
+              ) : i(
+                "rounded-md text-sm font-medium",
+                n === e.id ? "bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"
+              )
+            ),
+            children: e.label
+          },
+          e.id
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        id: x(n),
+        role: "tabpanel",
+        tabIndex: 0,
+        "aria-labelledby": l(n),
+        className: "mt-4",
+        children: w
+      }
+    )
+  ] });
+}
+export {
+  D as Tabs
+};

package/dist/lib/Text.js

@@ -0,0 +1,48 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as n } from "./utils/cn.js";
+import "react";
+const d = {
+  body: "text-sm text-text-secondary leading-relaxed",
+  bodyLg: "text-base text-text-secondary leading-relaxed",
+  subtitle: "text-lg text-text-secondary leading-relaxed",
+  cardDescription: "text-sm text-text-secondary leading-relaxed",
+  detail: "text-xs text-text-secondary",
+  label: "text-xs font-semibold uppercase tracking-wider text-text-tertiary",
+  meta: "text-xs text-text-tertiary",
+  caption: "text-sm text-text-tertiary",
+  helper: "text-sm text-text-tertiary",
+  error: "text-sm text-error"
+}, l = {
+  body: "p",
+  bodyLg: "p",
+  subtitle: "p",
+  cardDescription: "p",
+  detail: "p",
+  label: "span",
+  meta: "span",
+  caption: "p",
+  helper: "p",
+  error: "p"
+};
+function y({
+  as: e,
+  variant: t,
+  className: r,
+  children: x,
+  ref: a,
+  ...s
+}) {
+  const o = e ?? l[t];
+  return /* @__PURE__ */ i(
+    o,
+    {
+      ref: a,
+      className: n(d[t], r),
+      ...s,
+      children: x
+    }
+  );
+}
+export {
+  y as Text
+};

package/dist/lib/Textarea.js

@@ -0,0 +1,50 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { FORM_LABEL as L, REQUIRED_MARK as p, DISABLED as v, FIELD_PLACEHOLDER as f, FIELD_PADDING as R, BASE_FIELD as h, FIELD_ERROR as F, FIELD_SUCCESS as N } from "./styles/formStyles.js";
+import { Text as o } from "./Text.js";
+import { cn as S } from "./utils/cn.js";
+import "react";
+function g({
+  label: s,
+  error: e,
+  helperText: i,
+  success: l,
+  className: m,
+  id: E,
+  required: r,
+  ref: D,
+  ...I
+}) {
+  const a = E || s?.toLowerCase().replace(/\s+/g, "-"), c = e ? `${a}-error` : void 0, d = i && !e ? `${a}-helper` : void 0;
+  return /* @__PURE__ */ n("div", { className: "w-full", children: [
+    s && /* @__PURE__ */ n("label", { htmlFor: a, className: L, children: [
+      s,
+      r && /* @__PURE__ */ t("span", { className: p, children: "*" })
+    ] }),
+    /* @__PURE__ */ t(
+      "textarea",
+      {
+        ref: D,
+        id: a,
+        "aria-invalid": e ? "true" : void 0,
+        "aria-required": r || void 0,
+        "aria-describedby": c || d,
+        required: r,
+        className: S(
+          h,
+          R,
+          f,
+          "resize-vertical",
+          v,
+          e ? F : l ? N : "",
+          m
+        ),
+        ...I
+      }
+    ),
+    e && /* @__PURE__ */ t(o, { variant: "error", id: c, className: "mt-1.5", role: "alert", children: e }),
+    i && !e && /* @__PURE__ */ t(o, { variant: "helper", id: d, className: "mt-1.5", children: i })
+  ] });
+}
+export {
+  g as Textarea
+};

package/dist/lib/ThemeProvider.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as T } from "react/jsx-runtime";
+import { createContext as v, useState as h, useEffect as n, useMemo as l, useCallback as f, useContext as w } from "react";
+const g = v({
+  theme: "system",
+  resolvedTheme: "light",
+  isDarkMode: !1,
+  setTheme: () => {
+  },
+  toggleDarkMode: () => {
+  }
+});
+function x() {
+  return w(g);
+}
+const k = "theme";
+function E() {
+  return typeof window > "u" ? !1 : window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function p() {
+  if (typeof window > "u") return "system";
+  const t = localStorage.getItem(k);
+  return t === "light" || t === "dark" || t === "system" ? t : "system";
+}
+function C({ children: t }) {
+  const [s, a] = h("system"), [m, c] = h(!1);
+  n(() => {
+    queueMicrotask(() => {
+      a(p()), c(E());
+    });
+  }, []), n(() => {
+    const r = window.matchMedia("(prefers-color-scheme: dark)"), u = (M) => {
+      c(M.matches);
+    };
+    return r.addEventListener("change", u), () => r.removeEventListener("change", u);
+  }, []);
+  const e = l(() => s === "system" ? m : s === "dark", [s, m]), d = e ? "dark" : "light";
+  n(() => {
+    document.documentElement.classList.toggle("dark", e);
+  }, [e]);
+  const o = f((r) => {
+    a(r), localStorage.setItem(k, r);
+  }, []), i = f(() => {
+    o(e ? "light" : "dark");
+  }, [e, o]), y = l(
+    () => ({ theme: s, resolvedTheme: d, isDarkMode: e, setTheme: o, toggleDarkMode: i }),
+    [s, d, e, o, i]
+  );
+  return /* @__PURE__ */ T(g.Provider, { value: y, children: t });
+}
+export {
+  C as ThemeProvider,
+  x as useTheme
+};

package/dist/lib/ThemeToggle.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Sun as s, Moon as a, Monitor as m } from "lucide-react";
+import { useTheme as c } from "./ThemeProvider.js";
+import { cn as l } from "./utils/cn.js";
+function f() {
+  const { theme: o, setTheme: r } = c();
+  return /* @__PURE__ */ t("div", { className: "inline-flex items-center gap-0.5 p-0.5 bg-surface-tertiary rounded-lg", children: [
+    { value: "light", icon: s, label: "Light" },
+    { value: "dark", icon: a, label: "Dark" },
+    { value: "system", icon: m, label: "System" }
+  ].map(({ value: e, icon: n, label: i }) => /* @__PURE__ */ t(
+    "button",
+    {
+      onClick: () => r(e),
+      title: i,
+      "aria-pressed": o === e,
+      className: l(
+        "p-1.5 rounded-md transition-all duration-150 cursor-pointer motion-reduce:transition-none",
+        o === e ? "bg-surface text-text-primary shadow-xs" : "text-text-tertiary hover:text-text-secondary"
+      ),
+      children: /* @__PURE__ */ t(n, { className: "h-4 w-4" })
+    },
+    e
+  )) });
+}
+export {
+  f as ThemeToggle
+};

package/dist/lib/Toast.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { XCircle as C, AlertTriangle as w, CheckCircle as D, Info as N, X as S } from "lucide-react";
+import { createContext as b, useState as v, useCallback as i, useContext as I, useRef as d, useEffect as M } from "react";
+import { Heading as E } from "./Heading.js";
+import { DISMISS_BUTTON as k } from "./styles/formStyles.js";
+import { SEMANTIC_TEXT as R } from "./styles/semanticVariants.js";
+import { Text as _ } from "./Text.js";
+import { cn as f } from "./utils/cn.js";
+const g = b({ toast: () => {
+} });
+function y() {
+  return I(g);
+}
+const A = {
+  info: N,
+  success: D,
+  warning: w,
+  error: C
+}, U = R, X = 4e3;
+let j = 0;
+function B({
+  toast: t,
+  onDismiss: a
+}) {
+  const c = t.duration ?? X, r = d(null), l = d(c), e = d(Date.now()), [n, s] = v(!1), h = t.variant === "error" || t.variant === "warning", x = A[t.variant], m = i(() => {
+    s(!0), setTimeout(() => a(t.id), 150);
+  }, [a, t.id]), u = i(() => {
+    e.current = Date.now(), r.current = setTimeout(() => {
+      m();
+    }, l.current);
+  }, [m]), T = i(() => {
+    r.current && (clearTimeout(r.current), r.current = null, l.current -= Date.now() - e.current);
+  }, []);
+  return M(() => (u(), () => {
+    r.current && clearTimeout(r.current);
+  }), [u]), // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- hover/focus pause timer, not user interaction
+  /* @__PURE__ */ p(
+    "div",
+    {
+      role: h ? "alert" : "status",
+      "aria-atomic": "true",
+      onMouseEnter: T,
+      onMouseLeave: u,
+      onFocus: T,
+      onBlur: u,
+      className: f(
+        "flex items-start gap-3 p-4 bg-surface-elevated border border-border",
+        "rounded-lg shadow-lg motion-reduce:animate-none",
+        n ? "animate-slide-out-down" : "animate-slide-up"
+      ),
+      children: [
+        /* @__PURE__ */ o(x, { className: f("h-5 w-5 shrink-0", U[t.variant]) }),
+        /* @__PURE__ */ p("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ o(E, { variant: "cardTitle", as: "p", children: t.title }),
+          t.description && /* @__PURE__ */ o(_, { variant: "meta", className: "mt-0.5", children: t.description })
+        ] }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => m(),
+            "aria-label": "Dismiss notification",
+            className: f("p-0.5 cursor-pointer", k),
+            children: /* @__PURE__ */ o(S, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function G({ children: t }) {
+  const [a, c] = v([]), r = i((e) => {
+    const n = `toast-${++j}`;
+    c((s) => [...s, { ...e, id: n }]);
+  }, []), l = i(
+    (e) => c((n) => n.filter((s) => s.id !== e)),
+    []
+  );
+  return /* @__PURE__ */ p(g.Provider, { value: { toast: r }, children: [
+    t,
+    /* @__PURE__ */ o(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm",
+        children: a.map((e) => /* @__PURE__ */ o(B, { toast: e, onDismiss: l }, e.id))
+      }
+    )
+  ] });
+}
+export {
+  G as ToastProvider,
+  y as useToast
+};

package/dist/lib/Tooltip.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import { useState as v, useRef as T, useId as w, useCallback as r, useEffect as E, isValidElement as g, cloneElement as k } from "react";
+import { cn as u } from "./utils/cn.js";
+const I = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+function K({
+  content: p,
+  children: o,
+  position: d = "top",
+  delay: n = 200,
+  className: m,
+  ref: f
+}) {
+  const [i, l] = v(!1), e = T(null), s = w(), a = r(() => {
+    e.current = setTimeout(() => {
+      l(!0);
+    }, n);
+  }, [n]), t = r(() => {
+    e.current && (clearTimeout(e.current), e.current = null), l(!1);
+  }, []), b = r(
+    (h) => {
+      h.key === "Escape" && t();
+    },
+    [t]
+  );
+  E(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []);
+  const y = g(o) ? k(o, {
+    "aria-describedby": s
+  }) : o;
+  return /* @__PURE__ */ x("div", { ref: f, className: u("relative inline-block", m), children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        onMouseEnter: a,
+        onMouseLeave: t,
+        onFocus: a,
+        onBlur: t,
+        onKeyDown: b,
+        role: "presentation",
+        children: y
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        id: s,
+        role: "tooltip",
+        "aria-hidden": !i,
+        className: u(
+          "absolute z-50 px-3 py-1.5 bg-surface-elevated border",
+          "border-border-secondary rounded-md text-sm text-text-primary",
+          "whitespace-nowrap pointer-events-none transition-opacity duration-150",
+          I[d],
+          i ? "opacity-100" : "opacity-0"
+        ),
+        children: p
+      }
+    )
+  ] });
+}
+export {
+  K as Tooltip
+};