@danieljoffe/shared-ui 0.0.1 → 0.1.0

package/dist/lib/Alert.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { AlertCircle as $, AlertTriangle as g, CheckCircle as h, Info as E, X as T } from "lucide-react";
+import { useCallback as v, useEffect as I } from "react";
+import { Heading as x } from "./Heading.js";
+import { DISMISS_BUTTON as C } from "./styles/formStyles.js";
+import { SEMANTIC_BG_LIGHT as a, SEMANTIC_BORDER as t, SEMANTIC_TEXT as s } from "./styles/semanticVariants.js";
+import { cn as k } from "./utils/cn.js";
+const S = {
+  info: E,
+  success: h,
+  warning: g,
+  error: $
+}, A = {
+  info: `${a.info} ${t.info} ${s.info}`,
+  success: `${a.success} ${t.success} ${s.success}`,
+  warning: `${a.warning} ${t.warning} ${s.warning}`,
+  error: `${a.error} ${t.error} ${s.error}`
+};
+function z({
+  children: m,
+  variant: n = "info",
+  title: c,
+  dismissible: i = !1,
+  onDismiss: r,
+  className: f,
+  ref: u,
+  ...p
+}) {
+  const w = S[n], l = n === "error" || n === "warning", o = v(
+    (N) => {
+      N.key === "Escape" && r?.();
+    },
+    [r]
+  );
+  return I(() => {
+    if (!(!i || !r))
+      return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [i, r, o]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: u,
+      role: l ? "alert" : "status",
+      "aria-live": l ? "assertive" : "polite",
+      className: k(
+        "relative rounded-lg border p-4",
+        A[n],
+        f
+      ),
+      ...p,
+      children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ e(w, { className: "size-5 shrink-0 mt-0.5", "aria-hidden": "true" }),
+        /* @__PURE__ */ d("div", { className: "flex-1", children: [
+          c && /* @__PURE__ */ e(x, { variant: "cardTitle", as: "h5", className: "mb-1 mt-0", children: c }),
+          /* @__PURE__ */ e("div", { className: "text-sm text-text-primary", children: m })
+        ] }),
+        i && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: r,
+            "aria-label": "Dismiss alert",
+            className: C,
+            children: /* @__PURE__ */ e(T, { className: "size-4", "aria-hidden": "true" })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  z as Alert
+};

package/dist/lib/AspectRatio.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as p } from "./utils/cn.js";
+import "react";
+const r = {
+  "1/1": "aspect-square",
+  "4/3": "aspect-[4/3]",
+  "16/9": "aspect-video",
+  "21/9": "aspect-[21/9]",
+  "3/4": "aspect-[3/4]",
+  "9/16": "aspect-[9/16]"
+};
+function n({
+  children: t,
+  ratio: e = "16/9",
+  className: s,
+  ref: a,
+  ...c
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: a,
+      className: p("relative w-full", r[e], s),
+      ...c,
+      children: t
+    }
+  );
+}
+export {
+  n as AspectRatio
+};

package/dist/lib/Avatar.js

@@ -0,0 +1,47 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cn as r } from "./utils/cn.js";
+const c = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base"
+}, d = {
+  online: "bg-success",
+  offline: "bg-text-tertiary",
+  away: "bg-warning",
+  busy: "bg-error"
+};
+function b({
+  src: t,
+  alt: s = "",
+  initials: l,
+  size: n = "md",
+  status: o,
+  className: a
+}) {
+  return /* @__PURE__ */ i("div", { className: r("relative inline-flex shrink-0", a), children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: r(
+          "rounded-full flex items-center justify-center font-medium overflow-hidden",
+          "bg-brand-100 text-brand-700",
+          c[n]
+        ),
+        children: t ? /* @__PURE__ */ e("img", { src: t, alt: s, className: "h-full w-full object-cover" }) : /* @__PURE__ */ e("span", { children: l || s?.charAt(0)?.toUpperCase() || "?" })
+      }
+    ),
+    o && /* @__PURE__ */ e(
+      "span",
+      {
+        className: r(
+          "absolute bottom-0 right-0 rounded-full border-2 border-surface",
+          d[o],
+          n === "sm" ? "h-2 w-2" : "h-3 w-3"
+        )
+      }
+    )
+  ] });
+}
+export {
+  b as Avatar
+};

package/dist/lib/Badge.js

@@ -0,0 +1,43 @@
+import { jsx as a } from "react/jsx-runtime";
+import { SEMANTIC_BG_LIGHT as i, SEMANTIC_TEXT as m, SEMANTIC_BORDER as x } from "./styles/semanticVariants.js";
+import { cn as c } from "./utils/cn.js";
+import "react";
+const r = (e) => `${i[e]} ${m[e]} border ${x[e]}`, p = {
+  default: "bg-surface-elevated text-text-secondary border border-border",
+  success: r("success"),
+  warning: r("warning"),
+  error: r("error"),
+  info: r("info"),
+  brand: "bg-brand-50 text-brand-700",
+  "brand-solid": "bg-brand-600 text-white"
+}, b = {
+  sm: "px-1.5 py-0.5 text-[10px]",
+  md: "px-2.5 py-0.5 text-xs",
+  lg: "px-3 py-1 text-sm"
+};
+function y({
+  children: e,
+  variant: t = "default",
+  size: n = "md",
+  className: o,
+  ref: s,
+  ...d
+}) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: s,
+      className: c(
+        "inline-flex items-center rounded-md font-medium",
+        b[n],
+        p[t],
+        o
+      ),
+      ...d,
+      children: e
+    }
+  );
+}
+export {
+  y as Badge
+};

package/dist/lib/Breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ChevronRight as l } from "lucide-react";
+import { cn as o } from "./utils/cn.js";
+function p({ items: a, className: s }) {
+  return /* @__PURE__ */ n("nav", { className: o("flex items-center gap-1 text-sm", s), children: a.map((e, t) => {
+    const c = t === a.length - 1;
+    return /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
+      t > 0 && /* @__PURE__ */ n(l, { className: "h-3.5 w-3.5 text-text-tertiary" }),
+      c ? /* @__PURE__ */ r("span", { className: "font-medium text-text-primary flex items-center gap-1.5", children: [
+        e.icon,
+        e.label
+      ] }) : /* @__PURE__ */ r(
+        "a",
+        {
+          href: e.href || "#",
+          className: "text-text-secondary hover:text-text-primary transition-colors flex items-center gap-1.5",
+          children: [
+            e.icon,
+            e.label
+          ]
+        }
+      )
+    ] }, t);
+  }) });
+}
+export {
+  p as Breadcrumb
+};

package/dist/lib/Button.js

@@ -0,0 +1,82 @@
+import { jsxs as b, jsx as v } from "react/jsx-runtime";
+import { Spinner as p } from "./Spinner.js";
+import { FOCUS_RING as h, FOCUS_RING_OFFSET as y, DISABLED as x } from "./styles/formStyles.js";
+import { cn as n } from "./utils/cn.js";
+import "react";
+const f = [
+  "inline-flex items-center justify-center gap-2 rounded-md transition",
+  `duration-200 ${h} ${y}`,
+  x,
+  "hover:cursor-pointer motion-reduce:transition-none motion-reduce:hover:transform-none"
+].join(" "), t = "hover:shadow-lg/12.5", g = {
+  bare: "",
+  primary: `${t} bg-brand-500 text-text-on-brand hover:bg-brand-600 active:bg-brand-700`,
+  secondary: `${t} bg-surface-elevated text-text-primary hover:bg-surface border border-border`,
+  outline: `${t} border border-border-secondary text-text-primary hover:bg-surface-elevated`
+}, o = "hover:outline hover:outline-2 hover:outline-offset-2 hover:shadow-lg/12.5", I = {
+  bare: "",
+  primary: `${o} hover:outline-brand-500`,
+  secondary: `${o} hover:outline-border-strong`,
+  outline: `${o} hover:outline-border-strong`
+}, S = {
+  sm: "px-3 py-1.5 text-sm hover:scale-[1.1]",
+  md: "px-4 py-3 hover:scale-[1.05]",
+  lg: "px-6 py-3 text-lg hover:scale-[1.025]"
+}, $ = {
+  sm: "p-1.5 text-sm hover:scale-[1.1]",
+  md: "p-2.5 hover:scale-[1.05]",
+  lg: "p-3 text-lg hover:scale-[1.025]"
+}, B = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5"
+};
+function _({
+  variant: s = "primary",
+  size: e = "md",
+  loading: r = !1,
+  iconOnly: a = !1,
+  as: i = "button",
+  children: l,
+  className: d,
+  disabled: c,
+  ref: u,
+  ...m
+}) {
+  return /* @__PURE__ */ b(
+    i,
+    {
+      ref: u,
+      className: n(
+        f,
+        g[s],
+        a ? $[e] : S[e],
+        d
+      ),
+      disabled: c || r,
+      "aria-busy": r || void 0,
+      ...m,
+      children: [
+        r && /* @__PURE__ */ v(
+          p,
+          {
+            size: "sm",
+            className: n(
+              "border-current/30 border-t-current",
+              B[e]
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        l
+      ]
+    }
+  );
+}
+export {
+  _ as Button,
+  f as baseButtonStyles,
+  S as sizeButtonStyles,
+  g as variantButtonStyles,
+  I as variantLinkOutline
+};

package/dist/lib/CTACard.js

@@ -0,0 +1,31 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Heading as m } from "./Heading.js";
+import { Text as s } from "./Text.js";
+import { cn as c } from "./utils/cn.js";
+import "react";
+function v({
+  heading: e,
+  description: a,
+  children: o,
+  ref: t,
+  className: d
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      className: c(
+        "relative overflow-hidden rounded-xl bg-surface-secondary border border-border p-8 sm:p-12",
+        d
+      ),
+      children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r(m, { variant: "section", className: "text-center", children: e }),
+        /* @__PURE__ */ r(s, { variant: "body", className: "max-w-md mx-auto text-center", children: a }),
+        /* @__PURE__ */ r("div", { className: "pt-2", children: o })
+      ] })
+    }
+  );
+}
+export {
+  v as CTACard
+};

package/dist/lib/Card.js

@@ -0,0 +1,91 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Heading as m } from "./Heading.js";
+import { cn as n } from "./utils/cn.js";
+import "react";
+const s = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+function p({
+  children: e,
+  className: d,
+  elevated: a = !1,
+  padding: r = "md",
+  ref: o,
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: o,
+      className: n(
+        "rounded-lg border border-border",
+        a ? "bg-surface-elevated shadow-md shadow-black/10 border-border-secondary" : "bg-surface-elevated",
+        s[r],
+        d
+      ),
+      ...i,
+      children: e
+    }
+  );
+}
+function b({
+  children: e,
+  className: d,
+  ref: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t("div", { ref: a, className: n("mb-4", d), ...r, children: e });
+}
+function g({
+  children: e,
+  className: d,
+  ref: a,
+  as: r,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    m,
+    {
+      ref: a,
+      variant: "cardTitle",
+      className: d,
+      ...r ? { as: r } : {},
+      ...o,
+      children: e
+    }
+  );
+}
+function v({
+  children: e,
+  className: d,
+  ref: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t("div", { ref: a, className: n(d), ...r, children: e });
+}
+function C({
+  children: e,
+  className: d,
+  ref: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: a,
+      className: n("mt-4 flex items-center gap-2", d),
+      ...r,
+      children: e
+    }
+  );
+}
+export {
+  p as Card,
+  v as CardContent,
+  C as CardFooter,
+  b as CardHeader,
+  g as CardTitle
+};

package/dist/lib/Checkbox.js

@@ -0,0 +1,75 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Check as b } from "lucide-react";
+import { useId as h } from "react";
+import { DISABLED_PEER as u, FOCUS_RING_PEER as x } from "./styles/formStyles.js";
+import { Text as f } from "./Text.js";
+import { cn as n } from "./utils/cn.js";
+function g({
+  label: o,
+  error: e,
+  className: s,
+  id: l,
+  checked: d,
+  ref: m,
+  ...c
+}) {
+  const p = h(), t = l ?? p, a = e ? `${t}-error` : void 0;
+  return /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ i("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: m,
+            type: "checkbox",
+            id: t,
+            checked: d,
+            "aria-invalid": e ? "true" : void 0,
+            "aria-describedby": a,
+            className: "peer sr-only",
+            ...c
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            onClick: () => document.getElementById(t)?.click(),
+            className: n(
+              "flex items-center justify-center size-5 border-2",
+              "border-border-secondary rounded-xs bg-surface cursor-pointer transition-all",
+              "peer-checked:bg-brand-500 peer-checked:border-brand-500",
+              x,
+              u,
+              e && "border-error",
+              s
+            ),
+            children: d && /* @__PURE__ */ r(
+              b,
+              {
+                className: "size-3.5 text-text-inverse",
+                strokeWidth: 3,
+                "aria-hidden": "true"
+              }
+            )
+          }
+        )
+      ] }),
+      o && /* @__PURE__ */ r(
+        "label",
+        {
+          htmlFor: t,
+          className: n(
+            "text-text-primary select-none",
+            c.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+          ),
+          children: o
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ r(f, { variant: "error", id: a, className: "mt-1.5", role: "alert", children: e })
+  ] });
+}
+export {
+  g as Checkbox
+};

package/dist/lib/Container.js

@@ -0,0 +1,35 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as r } from "./utils/cn.js";
+import "react";
+const t = {
+  sm: "max-w-3xl",
+  md: "max-w-4xl",
+  lg: "max-w-5xl",
+  xl: "max-w-6xl",
+  "2xl": "max-w-7xl",
+  full: "max-w-full"
+};
+function p({
+  children: l,
+  size: x = "full",
+  className: m,
+  ref: a,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: r(
+        "mx-auto w-full px-4 sm:px-6 lg:px-8",
+        t[x],
+        m
+      ),
+      ...o,
+      children: l
+    }
+  );
+}
+export {
+  p as Container
+};

package/dist/lib/Divider.js

@@ -0,0 +1,48 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Text as l } from "./Text.js";
+import { cn as o } from "./utils/cn.js";
+import "react";
+function x({
+  orientation: n = "horizontal",
+  className: i,
+  label: t,
+  ref: a,
+  ...e
+}) {
+  return n === "vertical" ? /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      role: "separator",
+      "aria-orientation": "vertical",
+      className: o("w-px bg-border", i),
+      ...e
+    }
+  ) : t ? /* @__PURE__ */ d(
+    "div",
+    {
+      ref: a,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: o("flex items-center gap-4", i),
+      ...e,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex-1 h-px bg-border", "aria-hidden": "true" }),
+        /* @__PURE__ */ r(l, { variant: "caption", as: "span", children: t }),
+        /* @__PURE__ */ r("div", { className: "flex-1 h-px bg-border", "aria-hidden": "true" })
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: o("h-px bg-border", i),
+      ...e
+    }
+  );
+}
+export {
+  x as Divider
+};