@danieljoffe/shared-ui 0.0.1 → 0.1.0

package/dist/lib/Pagination.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { ChevronLeft as N, ChevronRight as S } from "lucide-react";
+import { FOCUS_RING_OFFSET as l, FOCUS_RING as m, DISABLED as x } from "./styles/formStyles.js";
+import { cn as n } from "./utils/cn.js";
+const h = {
+  sm: "p-1",
+  md: "p-1.5",
+  lg: "p-2"
+}, w = {
+  sm: "h-6 min-w-6 px-1.5 text-xs",
+  md: "h-8 min-w-8 px-2 text-sm",
+  lg: "h-10 min-w-10 px-3 text-base"
+}, b = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+function k({
+  currentPage: i,
+  totalPages: o,
+  onPageChange: a,
+  className: p,
+  ariaLabel: u = "Pagination",
+  size: s = "md"
+}) {
+  const f = () => {
+    if (o <= 7)
+      return Array.from({ length: o }, (r, v) => v + 1);
+    const t = [1];
+    i > 3 && t.push("...");
+    for (let r = Math.max(2, i - 1); r <= Math.min(o - 1, i + 1); r++)
+      t.push(r);
+    return i < o - 2 && t.push("..."), t.push(o), t;
+  }, d = i <= 1, c = i >= o;
+  return /* @__PURE__ */ y(
+    "nav",
+    {
+      "aria-label": u,
+      className: n("flex items-center gap-1", p),
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => a(i - 1),
+            disabled: d,
+            "aria-label": "Previous page",
+            "aria-disabled": d ? "true" : void 0,
+            className: n(
+              "rounded-md text-text-secondary hover:bg-surface-tertiary transition-colors cursor-pointer",
+              x,
+              m,
+              l,
+              h[s]
+            ),
+            children: /* @__PURE__ */ e(N, { className: b[s] })
+          }
+        ),
+        f().map(
+          (t, r) => t === "..." ? /* @__PURE__ */ e(
+            "span",
+            {
+              className: n(
+                "px-1 text-text-tertiary",
+                s === "sm" ? "text-xs" : s === "lg" ? "text-base" : "text-sm"
+              ),
+              children: "..."
+            },
+            `dots-${r}`
+          ) : /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => a(t),
+              "aria-label": t === i ? `Page ${t}` : `Go to page ${t}`,
+              "aria-current": t === i ? "page" : void 0,
+              className: n(
+                "rounded-md transition-colors cursor-pointer",
+                m,
+                l,
+                w[s],
+                t === i ? "bg-brand-600 text-white font-medium" : "text-text-secondary hover:bg-surface-tertiary"
+              ),
+              children: t
+            },
+            t
+          )
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => a(i + 1),
+            disabled: c,
+            "aria-label": "Next page",
+            "aria-disabled": c ? "true" : void 0,
+            className: n(
+              "rounded-md text-text-secondary hover:bg-surface-tertiary transition-colors cursor-pointer",
+              x,
+              m,
+              l,
+              h[s]
+            ),
+            children: /* @__PURE__ */ e(S, { className: b[s] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  k as Pagination
+};

package/dist/lib/ProgressBar.js

@@ -0,0 +1,68 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Text as h } from "./Text.js";
+import { cn as t } from "./utils/cn.js";
+import "react";
+const f = {
+  accent: "bg-brand-500",
+  success: "bg-success",
+  error: "bg-error"
+}, g = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+function w({
+  value: s,
+  max: i = 100,
+  variant: n = "accent",
+  size: l = "md",
+  showLabel: o = !1,
+  className: c,
+  "aria-label": d = "Progress",
+  ref: m,
+  ...u
+}) {
+  const a = Math.min(Math.max(s / i * 100, 0), 100);
+  return /* @__PURE__ */ r("div", { ref: m, className: "w-full", ...u, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": Math.round(a),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": d,
+        className: t(
+          "w-full bg-surface-elevated rounded-full overflow-hidden",
+          g[l],
+          c
+        ),
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: t(
+              "h-full transition-all duration-300 ease-out motion-reduce:transition-none",
+              f[n]
+            ),
+            style: { width: `${a}%` }
+          }
+        )
+      }
+    ),
+    o && /* @__PURE__ */ r(
+      h,
+      {
+        variant: "caption",
+        className: "mt-1.5 text-right",
+        "aria-hidden": "true",
+        children: [
+          Math.round(a),
+          "%"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  w as ProgressBar
+};

package/dist/lib/Section.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Container as f } from "./Container.js";
+import { cn as y } from "./utils/cn.js";
+import "react";
+const u = {
+  none: "py-0",
+  sm: "py-4 sm:py-6",
+  md: "py-6 sm:py-8 md:py-12",
+  lg: "py-8 sm:py-12 md:py-16",
+  xl: "py-12 sm:py-16 md:py-24"
+}, v = {
+  default: "bg-surface",
+  alt: "bg-surface-secondary",
+  elevated: "bg-surface-elevated",
+  none: ""
+}, x = {
+  visible: "overflow-visible",
+  hidden: "overflow-hidden",
+  auto: "overflow-auto"
+};
+function h({
+  children: e,
+  ref: l,
+  padding: n = "md",
+  background: s = "none",
+  center: a = !1,
+  overflow: m = "visible",
+  fullWidth: r = !0,
+  contain: o,
+  className: p,
+  ...i
+}) {
+  const c = o ? /* @__PURE__ */ t(f, { size: o, children: e }) : e, d = s === "elevated";
+  return /* @__PURE__ */ t(
+    "section",
+    {
+      ref: l,
+      className: y(
+        "relative",
+        u[n],
+        v[s],
+        x[m],
+        a && "flex flex-col justify-center",
+        r && "w-full",
+        // Elevated sections float inside their parent — pull off the edges
+        // and add internal horizontal padding so content isn't flush to the
+        // card surface.
+        d && "max-w-[calc(100%-2rem)] mx-auto px-4 sm:px-6 md:px-8",
+        p
+      ),
+      ...i,
+      children: c
+    }
+  );
+}
+export {
+  h as Section
+};

package/dist/lib/SectionLabel.js

@@ -0,0 +1,19 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Text as o } from "./Text.js";
+import { cn as c } from "./utils/cn.js";
+import "react";
+function x({
+  icon: r,
+  label: t,
+  ref: i,
+  className: a
+}) {
+  return /* @__PURE__ */ m("div", { ref: i, className: c("flex items-center gap-2 mb-8", a), children: [
+    /* @__PURE__ */ e("div", { className: "p-1.5 rounded-md bg-surface-tertiary text-text-secondary", children: r }),
+    /* @__PURE__ */ e(o, { variant: "label", children: t }),
+    /* @__PURE__ */ e("div", { className: "flex-1 h-px bg-border ml-2" })
+  ] });
+}
+export {
+  x as SectionLabel
+};

package/dist/lib/Select.js

@@ -0,0 +1,67 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { ChevronDown as N } from "lucide-react";
+import { useId as S } from "react";
+import { FORM_LABEL as D, REQUIRED_MARK as R, DISABLED as L, BASE_FIELD as b, FIELD_ERROR as g, FIELD_SUCCESS as F } from "./styles/formStyles.js";
+import { Text as o } from "./Text.js";
+import { cn as _ } from "./utils/cn.js";
+const A = {
+  sm: "px-3 py-1.5 pr-8 text-sm",
+  md: "px-4 py-2.5 pr-10",
+  lg: "px-5 py-3 pr-12 text-lg"
+};
+function O({
+  label: n,
+  error: e,
+  helperText: r,
+  success: m,
+  size: p = "md",
+  options: v,
+  className: h,
+  id: u,
+  required: s,
+  ref: f,
+  ...E
+}) {
+  const I = S(), a = u ?? I, c = e ? `${a}-error` : void 0, d = r && !e ? `${a}-helper` : void 0, x = c || d, y = () => e ? g : m ? F : "";
+  return /* @__PURE__ */ l("div", { className: "w-full", children: [
+    n && /* @__PURE__ */ l("label", { htmlFor: a, className: D, children: [
+      n,
+      s && /* @__PURE__ */ t("span", { className: R, children: "*" })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "relative", children: [
+      /* @__PURE__ */ t(
+        "select",
+        {
+          ref: f,
+          id: a,
+          "aria-invalid": e ? "true" : void 0,
+          "aria-required": s || void 0,
+          "aria-describedby": x,
+          required: s,
+          className: _(
+            b,
+            A[p],
+            "appearance-none",
+            L,
+            y(),
+            h
+          ),
+          ...E,
+          children: v.map((i) => /* @__PURE__ */ t("option", { value: i.value, children: i.label }, i.value))
+        }
+      ),
+      /* @__PURE__ */ t(
+        N,
+        {
+          className: "absolute right-3 top-1/2 -translate-y-1/2 size-5 text-text-tertiary pointer-events-none",
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ t(o, { variant: "error", id: c, className: "mt-1.5", role: "alert", children: e }),
+    r && !e && /* @__PURE__ */ t(o, { variant: "helper", id: d, className: "mt-1.5", children: r })
+  ] });
+}
+export {
+  O as Select
+};

package/dist/lib/Sidebar.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs as d, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { ChevronDown as x } from "lucide-react";
+import { useState as h } from "react";
+import { Button as p } from "./Button.js";
+import { cn as m } from "./utils/cn.js";
+function b({
+  item: r,
+  activeId: i,
+  onSelect: o,
+  collapsed: t,
+  depth: a = 0
+}) {
+  const [n, l] = h(!1), s = i === r.id, c = r.children && r.children.length > 0;
+  return /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ d(
+      p,
+      {
+        variant: "bare",
+        size: "sm",
+        onClick: () => {
+          c && l(!n), o?.(r.id);
+        },
+        className: m(
+          "w-full justify-start",
+          a > 0 && "ml-6 w-[calc(100%-1.5rem)]",
+          s ? "bg-brand-50 text-brand-700 font-medium" : "text-text-secondary hover:bg-surface-tertiary hover:text-text-primary"
+        ),
+        children: [
+          r.icon,
+          !t && /* @__PURE__ */ d(u, { children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 text-left truncate", children: r.label }),
+            r.badge !== void 0 && /* @__PURE__ */ e("span", { className: "text-xs px-1.5 py-0.5 rounded-full bg-surface-tertiary text-text-tertiary", children: r.badge }),
+            c && /* @__PURE__ */ e(
+              x,
+              {
+                className: m(
+                  "h-4 w-4 text-text-tertiary transition-transform duration-200 motion-reduce:transition-none",
+                  n && "rotate-180"
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    c && n && !t && /* @__PURE__ */ e("div", { className: "mt-0.5", children: r.children?.map((f) => /* @__PURE__ */ e(
+      b,
+      {
+        item: f,
+        activeId: i,
+        onSelect: o,
+        collapsed: t,
+        depth: a + 1
+      },
+      f.id
+    )) })
+  ] });
+}
+function C({
+  items: r,
+  activeId: i,
+  onSelect: o,
+  header: t,
+  footer: a,
+  collapsed: n = !1,
+  className: l
+}) {
+  return /* @__PURE__ */ d(
+    "aside",
+    {
+      className: m(
+        "flex flex-col h-full bg-surface border-r border-border",
+        "transition-all duration-200 motion-reduce:transition-none",
+        n ? "w-16" : "w-48 md:w-60",
+        l
+      ),
+      children: [
+        t && /* @__PURE__ */ e("div", { className: "p-4 border-b border-border shrink-0", children: t }),
+        /* @__PURE__ */ e("nav", { className: "flex-1 overflow-y-auto p-2 space-y-0.5", children: r.map((s) => /* @__PURE__ */ e(
+          b,
+          {
+            item: s,
+            activeId: i,
+            onSelect: o,
+            collapsed: n
+          },
+          s.id
+        )) }),
+        a && /* @__PURE__ */ e("div", { className: "p-4 border-t border-border shrink-0", children: a })
+      ]
+    }
+  );
+}
+export {
+  C as Sidebar
+};

package/dist/lib/Skeleton.js

@@ -0,0 +1,63 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as r } from "./utils/cn.js";
+const d = {
+  sm: "h-3",
+  md: "h-4",
+  lg: "h-5"
+}, i = {
+  sm: 32,
+  md: 40,
+  lg: 56
+}, f = {
+  sm: 80,
+  md: 120,
+  lg: 180
+};
+function p({
+  className: l,
+  variant: m = "text",
+  width: e,
+  height: n,
+  lines: a = 1,
+  size: s = "md"
+}) {
+  const c = "animate-pulse motion-reduce:animate-none bg-surface-tertiary";
+  if (m === "circular") {
+    const o = i[s];
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: r(c, "rounded-full", l),
+        style: {
+          width: e || o,
+          height: n || e || o
+        }
+      }
+    );
+  }
+  return m === "rectangular" ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: r(c, "rounded-lg", l),
+      style: {
+        width: e || "100%",
+        height: n || f[s]
+      }
+    }
+  ) : /* @__PURE__ */ t("div", { className: r("space-y-2", l), style: { width: e }, children: Array.from({ length: a }).map((o, u) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: r(
+        c,
+        d[s],
+        "rounded-xs",
+        u === a - 1 && a > 1 && "w-3/4"
+      ),
+      style: { height: n }
+    },
+    u
+  )) });
+}
+export {
+  p as Skeleton
+};

package/dist/lib/Spacer.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as e } from "./utils/cn.js";
+import "react";
+const h = {
+  xs: "h-2",
+  sm: "h-4",
+  md: "h-8",
+  lg: "h-12",
+  xl: "h-16",
+  "2xl": "h-24"
+};
+function n({ size: s = "md", className: m, ref: r, ...o }) {
+  return /* @__PURE__ */ t("div", { ref: r, className: e(h[s], m), ...o });
+}
+export {
+  n as Spacer
+};

package/dist/lib/Spinner.js

@@ -0,0 +1,39 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SEMANTIC_SPINNER as s } from "./styles/semanticVariants.js";
+import { cn as d } from "./utils/cn.js";
+import "react";
+const m = {
+  sm: "size-4 border-2",
+  md: "size-8 border-2",
+  lg: "size-12 border-3"
+}, l = {
+  accent: "border-brand-500/30 border-t-brand-500",
+  ...s
+};
+function f({
+  size: r = "md",
+  variant: e = "accent",
+  "aria-label": n = "Loading",
+  className: o,
+  ref: i,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: i,
+      role: "status",
+      "aria-label": n,
+      className: d(
+        "inline-block rounded-full animate-spin motion-reduce:animate-none",
+        m[r],
+        l[e],
+        o
+      ),
+      ...a
+    }
+  );
+}
+export {
+  f as Spinner
+};

package/dist/lib/Stack.js

@@ -0,0 +1,59 @@
+import { jsx as f } from "react/jsx-runtime";
+import { cn as m } from "./utils/cn.js";
+import "react";
+const p = {
+  vertical: "flex-col",
+  horizontal: "flex-row"
+}, u = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+}, d = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+}, g = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+function v({
+  as: t,
+  children: e,
+  direction: s = "vertical",
+  gap: n = "md",
+  align: r = "stretch",
+  justify: a = "start",
+  wrap: o = !1,
+  className: i,
+  ref: c,
+  ...l
+}) {
+  return /* @__PURE__ */ f(
+    t || "div",
+    {
+      ref: c,
+      className: m(
+        "flex",
+        p[s],
+        u[n],
+        d[r],
+        g[a],
+        o && "flex-wrap",
+        i
+      ),
+      ...l,
+      children: e
+    }
+  );
+}
+export {
+  v as Stack
+};

package/dist/lib/StatsCard.js

@@ -0,0 +1,79 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { TrendingUp as f, TrendingDown as u } from "lucide-react";
+import { Text as c } from "./Text.js";
+import { cn as i } from "./utils/cn.js";
+function g({
+  title: n,
+  value: m,
+  change: s,
+  changeLabel: d,
+  changeUnit: l = "%",
+  invertChange: x = !1,
+  icon: o,
+  className: p
+}) {
+  const r = s !== void 0 && s >= 0, a = x ? !r : r;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: i(
+        "p-3 sm:p-6 bg-surface-elevated border border-border rounded-xl shadow-xs",
+        p
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ t("div", { children: [
+            /* @__PURE__ */ e(c, { variant: "caption", children: n }),
+            /* @__PURE__ */ e(
+              c,
+              {
+                variant: "bodyLg",
+                as: "p",
+                className: "mt-1 sm:mt-1.5 text-lg sm:text-2xl font-semibold tracking-tight",
+                children: m
+              }
+            )
+          ] }),
+          o && /* @__PURE__ */ e("div", { className: "p-2.5 bg-surface-tertiary rounded-lg text-text-secondary", children: o })
+        ] }),
+        s !== void 0 && /* @__PURE__ */ t("div", { className: "mt-3 flex items-center gap-1.5 text-xs", children: [
+          r ? /* @__PURE__ */ e(
+            f,
+            {
+              className: i(
+                "h-3.5 w-3.5",
+                a ? "text-success" : "text-error"
+              )
+            }
+          ) : /* @__PURE__ */ e(
+            u,
+            {
+              className: i(
+                "h-3.5 w-3.5",
+                a ? "text-success" : "text-error"
+              )
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: i(
+                "font-medium",
+                a ? "text-success" : "text-error"
+              ),
+              children: [
+                r ? "+" : "",
+                s,
+                l
+              ]
+            }
+          ),
+          d && /* @__PURE__ */ e("span", { className: "text-text-tertiary", children: d })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  g as StatsCard
+};

package/dist/lib/StructuredData.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+function n({ data: t }) {
+  return /* @__PURE__ */ r(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: {
+        __html: JSON.stringify(t).replace(/</g, "\\u003c")
+      }
+    }
+  );
+}
+export {
+  n as StructuredData
+};