@danieljoffe/shared-ui 0.0.1 → 0.1.0

package/dist/lib/Dropdown.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs as D, jsx as f } from "react/jsx-runtime";
+import { useState as I, useRef as p, useId as R, useMemo as j, useCallback as v, useEffect as A } from "react";
+import { cn as m } from "./utils/cn.js";
+function U({
+  trigger: E,
+  items: l,
+  align: N = "left",
+  className: C
+}) {
+  const [o, a] = I(!1), [c, i] = I(-1), b = p(null), u = p(null), g = p([]), h = R(), x = `dropdown-menu-${h}`, w = `dropdown-trigger-${h}`, t = j(
+    () => l.reduce((e, r, n) => (!r.divider && !r.disabled && e.push(n), e), []),
+    [l]
+  ), s = v((e) => {
+    i(e), g.current[e]?.focus();
+  }, []), k = v(() => {
+    a(!0);
+  }, []), d = v(() => {
+    a(!1), i(-1), u.current?.focus();
+  }, []), y = p(!1);
+  A(() => {
+    const e = t[0];
+    o && !y.current && e != null && requestAnimationFrame(() => {
+      s(e);
+    }), y.current = o;
+  }, [o, t, s]), A(() => {
+    const e = (r) => {
+      b.current && !b.current.contains(r.target) && (a(!1), i(-1));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const K = (e) => {
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), o || k()) : e.key === "Escape" && o && (e.preventDefault(), d());
+  }, M = (e) => {
+    const r = t.indexOf(c);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const n = r < t.length - 1 ? t[r + 1] : t[0];
+        n != null && s(n);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const n = r > 0 ? t[r - 1] : t[t.length - 1];
+        n != null && s(n);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const n = t[0];
+        n != null && s(n);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const n = t[t.length - 1];
+        n != null && s(n);
+        break;
+      }
+      case "Escape": {
+        e.preventDefault(), d();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        if (e.preventDefault(), c >= 0) {
+          const n = l[c];
+          n && !n.divider && !n.disabled && (n.onClick?.(), a(!1), i(-1), u.current?.focus());
+        }
+        break;
+      }
+      case "Tab": {
+        d();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ D("div", { ref: b, className: m("relative inline-flex", C), children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        ref: u,
+        id: w,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": o,
+        "aria-controls": o ? x : void 0,
+        onClick: () => o ? d() : k(),
+        onKeyDown: K,
+        className: "inline-flex items-center",
+        children: E
+      }
+    ),
+    o && /* @__PURE__ */ f(
+      "div",
+      {
+        id: x,
+        role: "menu",
+        "aria-labelledby": w,
+        tabIndex: -1,
+        onKeyDown: M,
+        className: m(
+          "absolute z-50 mt-1 top-full min-w-[180px]",
+          "bg-surface-elevated border border-border rounded-lg shadow-lg",
+          "py-1 animate-slide-down motion-reduce:animate-none",
+          N === "right" ? "right-0" : "left-0"
+        ),
+        children: l.map(
+          (e, r) => e.divider ? /* @__PURE__ */ f(
+            "div",
+            {
+              role: "separator",
+              className: "my-1 border-t border-border"
+            },
+            r
+          ) : /* @__PURE__ */ D(
+            "button",
+            {
+              ref: (n) => {
+                g.current[r] = n;
+              },
+              role: "menuitem",
+              tabIndex: r === c ? 0 : -1,
+              "aria-disabled": e.disabled || void 0,
+              onClick: () => {
+                e.disabled || (e.onClick?.(), a(!1), i(-1), u.current?.focus());
+              },
+              className: m(
+                "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left",
+                "transition-colors duration-100 cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2",
+                "focus-visible:ring-offset-surface",
+                e.disabled && "opacity-50 cursor-not-allowed",
+                e.danger ? "text-error hover:bg-error-light" : "text-text-primary hover:bg-surface-tertiary"
+              ),
+              children: [
+                e.icon && /* @__PURE__ */ f(
+                  "span",
+                  {
+                    className: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
+                    "aria-hidden": "true",
+                    children: e.icon
+                  }
+                ),
+                e.label
+              ]
+            },
+            r
+          )
+        )
+      }
+    )
+  ] });
+}
+export {
+  U as Dropdown
+};

package/dist/lib/FormFieldError.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Text as i } from "./Text.js";
+function m({ message: r, id: o }) {
+  return r ? /* @__PURE__ */ t(i, { variant: "error", id: o, className: "mt-1.5", children: r }) : null;
+}
+export {
+  m as FormFieldError
+};

package/dist/lib/Grid.js

@@ -0,0 +1,67 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as m } from "./utils/cn.js";
+import "react";
+const r = {
+  0: "",
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+  12: "grid-cols-4 sm:grid-cols-6 lg:grid-cols-12"
+}, i = {
+  none: "gap-0",
+  sm: "gap-2 sm:gap-3",
+  md: "gap-4 sm:gap-6",
+  lg: "gap-6 sm:gap-8",
+  xl: "gap-8 sm:gap-12"
+};
+function u({
+  as: s,
+  children: o,
+  cols: l = 12,
+  gap: c = "md",
+  className: n,
+  ref: g,
+  ...p
+}) {
+  return /* @__PURE__ */ a(
+    s || "div",
+    {
+      ref: g,
+      className: m("grid", r[l], i[c], n),
+      ...p,
+      children: o
+    }
+  );
+}
+const d = {
+  1: "col-span-1",
+  2: "col-span-1 sm:col-span-2",
+  3: "col-span-1 sm:col-span-2 lg:col-span-3",
+  4: "col-span-1 sm:col-span-2 lg:col-span-4",
+  6: "col-span-2 sm:col-span-3 lg:col-span-6",
+  12: "col-span-full"
+};
+function x({
+  as: s,
+  children: o,
+  colSpan: l = 1,
+  className: c,
+  ref: n,
+  ...g
+}) {
+  return /* @__PURE__ */ a(
+    s || "div",
+    {
+      ref: n,
+      className: m("flex", d[l], c),
+      ...g,
+      children: o
+    }
+  );
+}
+export {
+  u as Grid,
+  x as GridItem
+};

package/dist/lib/GridBg.js

@@ -0,0 +1,31 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { cn as o } from "./utils/cn.js";
+import "react";
+function s({ ref: e, className: a }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: e,
+      className: o(
+        "absolute inset-0 overflow-hidden pointer-events-none",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "absolute inset-0 opacity-[0.03]",
+            style: {
+              backgroundImage: "linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px)",
+              backgroundSize: "64px 64px"
+            }
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-brand-500/5 rounded-full blur-3xl" })
+      ]
+    }
+  );
+}
+export {
+  s as GridBg
+};

package/dist/lib/Heading.js

@@ -0,0 +1,40 @@
+import { jsx as l } from "react/jsx-runtime";
+import { cn as n } from "./utils/cn.js";
+import "react";
+const a = {
+  hero: "text-4xl sm:text-5xl font-bold text-text-primary tracking-tight leading-[1.1]",
+  detail: "text-3xl sm:text-4xl lg:text-5xl font-bold text-text-primary tracking-tight",
+  subtitle: "text-2xl font-bold text-text-primary tracking-tight",
+  section: "text-2xl sm:text-3xl font-bold text-text-primary tracking-tight",
+  cardTitle: "text-sm font-semibold text-text-primary",
+  component: "text-lg font-semibold text-text-primary",
+  mdxH1: "text-2xl font-bold text-text-primary tracking-tight mb-6",
+  mdxH2: "text-lg font-semibold text-text-primary mt-12 mb-4 scroll-mt-20",
+  mdxH3: "text-sm font-semibold text-text-primary mt-8 mb-3 scroll-mt-20",
+  mdxH4: "text-xs font-medium text-text-secondary mt-6 mb-2 uppercase tracking-wider"
+}, d = {
+  hero: "h1",
+  detail: "h1",
+  subtitle: "h2",
+  section: "h2",
+  cardTitle: "h3",
+  component: "h3",
+  mdxH1: "h1",
+  mdxH2: "h2",
+  mdxH3: "h3",
+  mdxH4: "h4"
+};
+function h({
+  as: e,
+  variant: t,
+  className: x,
+  children: m,
+  ref: r,
+  ...i
+}) {
+  const o = e ?? d[t];
+  return /* @__PURE__ */ l(o, { ref: r, className: n(a[t], x), ...i, children: m });
+}
+export {
+  h as Heading
+};

package/dist/lib/Input.js

@@ -0,0 +1,55 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useId as D } from "react";
+import { FORM_LABEL as R, REQUIRED_MARK as h, DISABLED as x, FIELD_PLACEHOLDER as S, BASE_FIELD as y, FIELD_ERROR as F, FIELD_SUCCESS as N } from "./styles/formStyles.js";
+import { Text as c } from "./Text.js";
+import { cn as _ } from "./utils/cn.js";
+const A = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2.5",
+  lg: "px-5 py-3 text-lg"
+};
+function j({
+  label: n,
+  error: t,
+  helperText: e,
+  success: l,
+  size: o = "md",
+  className: p,
+  id: E,
+  required: a,
+  ref: I,
+  ...u
+}) {
+  const f = D(), s = E ?? f, r = t ? `${s}-error` : void 0, d = e && !t ? `${s}-helper` : void 0, L = r || d, v = () => t ? F : l ? N : "";
+  return /* @__PURE__ */ m("div", { className: "w-full", children: [
+    n && /* @__PURE__ */ m("label", { htmlFor: s, className: R, children: [
+      n,
+      a && /* @__PURE__ */ i("span", { className: h, children: "*" })
+    ] }),
+    /* @__PURE__ */ i(
+      "input",
+      {
+        ref: I,
+        id: s,
+        "aria-invalid": t ? "true" : void 0,
+        "aria-required": a || void 0,
+        "aria-describedby": L,
+        required: a,
+        className: _(
+          y,
+          A[o],
+          S,
+          x,
+          v(),
+          p
+        ),
+        ...u
+      }
+    ),
+    t && /* @__PURE__ */ i(c, { variant: "error", id: r, className: "mt-1.5", role: "alert", children: t }),
+    e && !t && /* @__PURE__ */ i(c, { variant: "helper", id: d, className: "mt-1.5", children: e })
+  ] });
+}
+export {
+  j as Input
+};

package/dist/lib/Kbd.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as n } from "./utils/cn.js";
+import "react";
+function x({ children: e, ref: r, className: t }) {
+  return /* @__PURE__ */ o(
+    "kbd",
+    {
+      ref: r,
+      className: n(
+        "hidden sm:inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 text-[10px] font-mono font-medium text-text-tertiary bg-surface-tertiary border border-border rounded-xs",
+        t
+      ),
+      children: e
+    }
+  );
+}
+export {
+  x as Kbd
+};

package/dist/lib/Loading.js

@@ -0,0 +1,44 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { Text as s } from "./Text.js";
+import { cn as l } from "./utils/cn.js";
+import "react";
+function c({
+  "aria-label": i = "Loading content",
+  className: a,
+  ref: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: t,
+      className: l(
+        "flex items-center justify-center min-h-52 w-full",
+        a
+      ),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": i,
+      ...o,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-4", children: [
+        /* @__PURE__ */ n("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ e("div", { className: "size-2 bg-brand-500 rounded-full animate-[bounceSubtle_0.6s_ease-in-out_infinite] motion-reduce:animate-none" }),
+          /* @__PURE__ */ e("div", { className: "size-2 bg-brand-500/60 rounded-full animate-[bounceSubtle_0.6s_ease-in-out_infinite_0.1s] motion-reduce:animate-none" }),
+          /* @__PURE__ */ e("div", { className: "size-2 bg-brand-500 rounded-full animate-[bounceSubtle_0.6s_ease-in-out_infinite_0.2s] motion-reduce:animate-none" }),
+          /* @__PURE__ */ e("div", { className: "size-2 bg-brand-500/60 rounded-full animate-[bounceSubtle_0.6s_ease-in-out_infinite_0.3s] motion-reduce:animate-none" })
+        ] }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            variant: "caption",
+            className: "animate-[pulseSlow_2s_ease-in-out_infinite] motion-reduce:animate-none",
+            children: "Loading..."
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  c as Loading
+};

package/dist/lib/Modal.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { X as x } from "lucide-react";
+import { useRef as g, useEffect as u, useCallback as D, useId as I } from "react";
+import { Button as E } from "./Button.js";
+import { Heading as R } from "./Heading.js";
+import { DISMISS_BUTTON as k } from "./styles/formStyles.js";
+import { cn as N } from "./utils/cn.js";
+const S = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', A = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+}, B = {
+  default: "bg-surface-elevated border border-border-secondary"
+};
+function X({
+  isOpen: r,
+  onClose: f,
+  title: n,
+  children: C,
+  size: L = "md",
+  footer: m,
+  variant: z = "default",
+  className: T,
+  closeOnBackdropClick: j = !0,
+  ref: l
+}) {
+  const i = g(null), d = g(null);
+  u(() => {
+    if (!(typeof document > "u"))
+      return r ? (i.current = document.activeElement, document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
+        document.body.style.overflow = "";
+      };
+  }, [r]);
+  const o = D(() => {
+    f(), i.current instanceof HTMLElement && i.current.focus();
+  }, [f]);
+  u(() => {
+    if (typeof window > "u") return;
+    const e = (v) => {
+      v.key === "Escape" && r && o();
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [r, o]), u(() => {
+    if (!r || !d.current) return;
+    const e = d.current, y = e.querySelectorAll(S)[0];
+    y && y.focus();
+    const h = (a) => {
+      if (a.key !== "Tab") return;
+      const s = e.querySelectorAll(S);
+      if (s.length === 0) return;
+      const p = s[0], w = s[s.length - 1];
+      a.shiftKey && document.activeElement === p ? (a.preventDefault(), w.focus()) : !a.shiftKey && document.activeElement === w && (a.preventDefault(), p.focus());
+    };
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }, [r]);
+  const b = I();
+  return r ? /* @__PURE__ */ c("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "absolute inset-0 bg-surface/80 backdrop-blur-sm",
+        onClick: j ? o : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ref: (e) => {
+          d.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": n ? b : void 0,
+        "aria-label": n ? void 0 : "Dialog",
+        className: N(
+          "relative w-full rounded-lg shadow-2xl",
+          A[L],
+          B[z],
+          T
+        ),
+        children: [
+          n && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-4 sm:p-6 border-b border-border", children: [
+            /* @__PURE__ */ t(R, { variant: "component", id: b, children: n }),
+            /* @__PURE__ */ t(
+              E,
+              {
+                variant: "bare",
+                size: "sm",
+                onClick: o,
+                "aria-label": "Close dialog",
+                className: k,
+                children: /* @__PURE__ */ t(x, { className: "size-5", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          !n && /* @__PURE__ */ t(
+            E,
+            {
+              variant: "bare",
+              size: "sm",
+              onClick: o,
+              "aria-label": "Close dialog",
+              className: N("absolute top-4 right-4", k),
+              children: /* @__PURE__ */ t(x, { className: "size-5", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "p-4 sm:p-6", children: C }),
+          m && /* @__PURE__ */ t("div", { className: "flex items-center justify-end gap-3 p-4 sm:p-6 border-t border-border", children: m })
+        ]
+      }
+    )
+  ] }) : null;
+}
+export {
+  X as Modal
+};

package/dist/lib/PageContainer.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Container as c } from "./Container.js";
+import { cn as t } from "./utils/cn.js";
+import "react";
+function x({
+  children: r,
+  as: a = "div",
+  size: n = "sm",
+  wrapperClassName: i,
+  className: o,
+  ref: m,
+  ...s
+}) {
+  return /* @__PURE__ */ e(
+    a,
+    {
+      ref: m,
+      className: t("flex justify-center", i),
+      "data-testid": "page-container-outer",
+      ...s,
+      children: /* @__PURE__ */ e(
+        c,
+        {
+          size: n,
+          className: t("flex flex-col py-8 md:py-14", o),
+          "data-testid": "page-container-inner",
+          children: r
+        }
+      )
+    }
+  );
+}
+export {
+  x as PageContainer
+};

package/dist/lib/PageLayout.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { PageContainer as e } from "./PageContainer.js";
+import { cn as i } from "./utils/cn.js";
+import "react";
+function f({
+  children: o,
+  wide: a = !1,
+  className: m,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    e,
+    {
+      as: "main",
+      id: "main-content",
+      size: a ? "lg" : "sm",
+      className: i("py-16 lg:py-24 space-y-24", m),
+      ...r,
+      children: o
+    }
+  );
+}
+export {
+  f as PageLayout
+};