@still-forest/canopy 0.28.1 → 0.29.0

package/README.md

@@ -41,3 +41,54 @@ Example `index.css`:
   /* your usual CSS definitions */
 }
 ```
+
+## Testing locally
+
+### Using pnpm link
+
+1. In this package, run build in watch mode:
+
+```bash
+pnpm build --watch
+```
+
+Then expose it locally for linking:
+
+```bash
+pnpm link
+```
+
+2. In the consuming package, link package.json to the locally built version:
+
+```bash
+pnpm link @still-forest/canopy
+```
+
+3. When done, cleanup:
+
+```bash
+pnpm unlink @still-forest/canopy
+pnpm store prune # clear pnpm's global store
+```
+
+### Using pnpm add
+
+1. In this package, run build in watch mode:
+
+```bash
+pnpm build --watch
+```
+
+2. In the consuming package, point package.json to the locally built version:
+
+```bash
+pnpm add ~/Development/canopy
+```
+
+### Direct file copy
+
+**Alternatively**, directly copy the built version periodically:
+
+```bash
+rm -rf ./node_modules/@still-forest/canopy/dist && cp -r ~/Development/canopy/dist ./node_modules/@still-forest/canopy/dist
+```

package/dist/chunks/Heading-Dwx3mHff.js

@@ -0,0 +1,251 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Text as k } from "@/typography";
+import { cn as b } from "@/utils";
+import h from "react";
+const R = ({ children: c, className: e, as: x = "p", ...l }) => /* @__PURE__ */ m(k, { as: x, className: b("mb-4", e), ...l, children: c }), y = h.forwardRef(
+  ({
+    className: c,
+    as: e,
+    size: x,
+    weight: l,
+    variant: t = "default",
+    align: s,
+    leading: r,
+    // No default: Tailwind applies a default from text size classes
+    tracking: d,
+    family: f = "display",
+    asForeground: o = !1,
+    truncate: u = !1,
+    numeric: i = !1,
+    ...a
+  }, g) => /* @__PURE__ */ m(
+    e || "p",
+    {
+      className: b(
+        // Font sizes
+        {
+          "text-xs": x === "xs",
+          "text-sm": x === "sm",
+          "text-base": x === "base" || x === "md",
+          "text-lg": x === "lg",
+          "text-xl": x === "xl",
+          "text-2xl": x === "2xl",
+          "text-3xl": x === "3xl",
+          "text-4xl": x === "4xl",
+          "text-5xl": x === "5xl",
+          "text-6xl": x === "6xl",
+          "text-7xl": x === "7xl",
+          "text-8xl": x === "8xl",
+          "text-9xl": x === "9xl"
+        },
+        // Font weights
+        {
+          "font-thin": l === "thin",
+          "font-extralight": l === "extralight",
+          "font-light": l === "light",
+          "font-normal": l === "normal",
+          "font-medium": l === "medium",
+          "font-semibold": l === "semibold",
+          "font-bold": l === "bold",
+          "font-extrabold": l === "extrabold",
+          "font-black": l === "black"
+        },
+        // Text colors (variants)
+        {
+          "text-foreground": t === "default",
+          "text-inherit": t === "inherit",
+          "text-muted-foreground": t === "muted",
+          "text-accent-foreground": t === "accent",
+          // Action colors
+          "text-primary-foreground": t === "primary",
+          "text-secondary-foreground": t === "secondary",
+          // Accent colors (rich color variants)
+          "text-info": !o && t === "info",
+          "text-warning": !o && t === "warning",
+          "text-destructive": !o && t === "destructive",
+          "text-success": !o && t === "success",
+          // Accent colors (foreground variants)
+          "text-info-foreground": o && t === "info",
+          "text-warning-foreground": o && t === "warning",
+          "text-destructive-foreground": o && t === "destructive",
+          "text-success-foreground": o && t === "success"
+        },
+        // Text alignment
+        {
+          "text-left": s === "left",
+          "text-center": s === "center",
+          "text-right": s === "right",
+          "text-justify": s === "justify",
+          "text-start": s === "start",
+          "text-end": s === "end"
+        },
+        // Leading (line height)
+        {
+          "leading-none": r === "none",
+          "leading-tight": r === "tight",
+          "leading-snug": r === "snug",
+          "leading-normal": r === "normal",
+          "leading-relaxed": r === "relaxed",
+          "leading-loose": r === "loose"
+        },
+        // Tracking (letter spacing)
+        {
+          "tracking-tighter": d === "tighter",
+          "tracking-tight": d === "tight",
+          "tracking-normal": d === "normal",
+          "tracking-wide": d === "wide",
+          "tracking-wider": d === "wider",
+          "tracking-widest": d === "widest"
+        },
+        // Font family
+        {
+          "font-display": f === "display",
+          "font-sans": f === "sans",
+          "font-serif": f === "serif",
+          "font-mono": f === "mono"
+        },
+        // Truncation
+        u && "truncate",
+        // Tabular numerals
+        i && "tabular-nums",
+        c
+      ),
+      ref: g,
+      ...a
+    }
+  )
+);
+y.displayName = "Text";
+const S = ({ children: c, ...e }) => /* @__PURE__ */ m(y, { className: "inline-block w-fit rounded bg-accent px-2", family: "mono", size: "sm", variant: "accent", ...e, children: c }), w = h.forwardRef(
+  ({
+    className: c,
+    variant: e = "default",
+    level: x = "2",
+    size: l,
+    weight: t = "bold",
+    // Typical default browser style for headings
+    align: s,
+    leading: r,
+    // No default: Tailwind applies a default from text size classes
+    tracking: d,
+    family: f = "display",
+    asForeground: o = !1,
+    truncate: u = !1,
+    numeric: i = !1,
+    ...a
+  }, g) => {
+    const p = `h${x}`, n = l || {
+      1: "4xl",
+      2: "3xl",
+      3: "2xl",
+      4: "xl",
+      5: "lg",
+      6: "base"
+    }[x];
+    return /* @__PURE__ */ m(
+      p,
+      {
+        className: b(
+          // Size scales
+          {
+            "text-xs": n === "xs",
+            "text-sm": n === "sm",
+            "text-base": n === "base" || n === "md",
+            "text-lg": n === "lg",
+            "text-xl": n === "xl",
+            "text-2xl": n === "2xl",
+            "text-3xl": n === "3xl",
+            "text-4xl": n === "4xl",
+            "text-5xl": n === "5xl",
+            "text-6xl": n === "6xl",
+            "text-7xl": n === "7xl",
+            "text-8xl": n === "8xl",
+            "text-9xl": n === "9xl"
+          },
+          // Font weights
+          {
+            "font-thin": t === "thin",
+            "font-extralight": t === "extralight",
+            "font-light": t === "light",
+            "font-normal": t === "normal",
+            "font-medium": t === "medium",
+            "font-semibold": t === "semibold",
+            "font-bold": t === "bold",
+            "font-extrabold": t === "extrabold",
+            "font-black": t === "black"
+          },
+          // Text colors (variants)
+          {
+            "text-foreground": e === "default",
+            "text-inherit": e === "inherit",
+            "text-muted-foreground": e === "muted",
+            "text-accent-foreground": e === "accent",
+            // Action colors
+            "text-primary-foreground": e === "primary",
+            "text-secondary-foreground": e === "secondary",
+            // Accent colors (rich color variants)
+            "text-info": !o && e === "info",
+            "text-warning": !o && e === "warning",
+            "text-destructive": !o && e === "destructive",
+            "text-success": !o && e === "success",
+            // Accent colors (foreground variants)
+            "text-info-foreground": o && e === "info",
+            "text-warning-foreground": o && e === "warning",
+            "text-destructive-foreground": o && e === "destructive",
+            "text-success-foreground": o && e === "success"
+          },
+          // Text alignment
+          {
+            "text-left": s === "left",
+            "text-center": s === "center",
+            "text-right": s === "right",
+            "text-justify": s === "justify",
+            "text-start": s === "start",
+            "text-end": s === "end"
+          },
+          // Leading (line height)
+          {
+            "leading-none": r === "none",
+            "leading-tight": r === "tight",
+            "leading-snug": r === "snug",
+            "leading-normal": r === "normal",
+            "leading-relaxed": r === "relaxed",
+            "leading-loose": r === "loose"
+          },
+          // Tracking (letter spacing)
+          {
+            "tracking-tighter": d === "tighter",
+            "tracking-tight": d === "tight",
+            "tracking-normal": d === "normal",
+            "tracking-wide": d === "wide",
+            "tracking-wider": d === "wider",
+            "tracking-widest": d === "widest"
+          },
+          // Font family
+          {
+            "font-display": f === "display",
+            "font-sans": f === "sans",
+            "font-serif": f === "serif",
+            "font-mono": f === "mono"
+          },
+          // Truncation
+          u && "truncate",
+          // Tabular numerals
+          i && "tabular-nums",
+          // Add some scroll margin for better anchor navigation
+          "scroll-m-20",
+          c
+        ),
+        ref: g,
+        ...a
+      }
+    );
+  }
+);
+w.displayName = "Heading";
+export {
+  S as C,
+  w as H,
+  R as P,
+  y as T
+};

package/dist/{Layout2.js → chunks/Layout-fBiCo4lc.js}

@@ -1,7 +1,9 @@
-import { j as u } from "./jsx-runtime.js";
+import { jsx as f } from "react/jsx-runtime";
 import g from "react";
-import { c as m } from "./index2.js";
-const w = g.forwardRef(
+import { cn as m } from "@/utils";
+import { Box as v, Flex as y, Container as i, Footer as N, Header as F } from "@/layout";
+import { Body as k } from "@/layout/Layout/Body";
+const C = g.forwardRef(
   ({
     className: c,
     as: t = "div",
@@ -15,9 +17,9 @@ const w = g.forwardRef(
     overflow: a,
     overflowX: b,
     overflowY: d,
-    rounded: f,
-    ...p
-  }, v) => /* @__PURE__ */ u.jsx(
+    rounded: u,
+    ...w
+  }, p) => /* @__PURE__ */ f(
     t,
     {
       className: m(
@@ -226,48 +228,45 @@ const w = g.forwardRef(
         },
         // Rounded
         {
-          rounded: f === !0,
-          "rounded-none": f === "none",
-          "rounded-xs": f === "xs",
-          "rounded-sm": f === "sm",
-          "rounded-md": f === "md",
-          "rounded-lg": f === "lg",
-          "rounded-xl": f === "xl",
-          "rounded-2xl": f === "2xl",
-          "rounded-3xl": f === "3xl",
-          "rounded-full": f === "full"
+          rounded: u === !0,
+          "rounded-none": u === "none",
+          "rounded-xs": u === "xs",
+          "rounded-sm": u === "sm",
+          "rounded-md": u === "md",
+          "rounded-lg": u === "lg",
+          "rounded-xl": u === "xl",
+          "rounded-2xl": u === "2xl",
+          "rounded-3xl": u === "3xl",
+          "rounded-full": u === "full"
         },
         c
       ),
-      ref: v,
-      ...p
+      ref: p,
+      ...w
     }
   )
 );
-w.displayName = "Box";
-const y = ({ children: c, className: t, direction: n = "col", ...r }) => {
+C.displayName = "Box";
+const z = ({ children: c, className: t, direction: n = "col", ...r }) => {
   const { display: e = "flex", ...o } = r, l = m("w-full px-4 py-2 md:px-8 md:py-4 lg:px-12 lg:py-6", t);
-  return e === "block" ? /* @__PURE__ */ u.jsx(w, { className: l, ...o, children: c }) : /* @__PURE__ */ u.jsx(i, { className: l, direction: n, ...o, children: c });
-}, j = ({ flex: c, className: t, as: n, children: r, ...e }) => {
-  const o = n || "div";
-  return /* @__PURE__ */ u.jsx(
-    o,
-    {
-      className: m(
-        {
-          "flex-1": c === "1",
-          "flex-auto": c === "auto",
-          "flex-initial": c === "initial",
-          "flex-none": c === "none"
-        },
-        t
-      ),
-      ...e,
-      children: r
-    }
-  );
-}, N = g.forwardRef(
-  ({ className: c, as: t = "div", direction: n, align: r, justify: e, grow: o, wrap: l, gap: s, gapX: x, gapY: a, ...b }, d) => /* @__PURE__ */ u.jsx(
+  return e === "block" ? /* @__PURE__ */ f(v, { className: l, ...o, children: c }) : /* @__PURE__ */ f(y, { className: l, direction: n, ...o, children: c });
+}, j = ({ flex: c, className: t, as: n, children: r, ...e }) => /* @__PURE__ */ f(
+  n || "div",
+  {
+    className: m(
+      {
+        "flex-1": c === "1",
+        "flex-auto": c === "auto",
+        "flex-initial": c === "initial",
+        "flex-none": c === "none"
+      },
+      t
+    ),
+    ...e,
+    children: r
+  }
+), B = g.forwardRef(
+  ({ className: c, as: t = "div", direction: n, align: r, justify: e, grow: o, wrap: l, gap: s, gapX: x, gapY: a, ...b }, d) => /* @__PURE__ */ f(
     t,
     {
       className: m(
@@ -385,8 +384,8 @@ const y = ({ children: c, className: t, direction: n = "col", ...r }) => {
       ...b
     }
   )
-), i = Object.assign(N, { Item: j }), k = ({ children: c, className: t, ...n }) => /* @__PURE__ */ u.jsx(y, { as: "footer", className: m("bottom-0 mt-auto pb-2", t), justify: "between", ...n, children: c }), R = g.forwardRef(
-  ({ className: c, as: t = "div", cols: n, rows: r, gap: e, gapX: o, gapY: l, flow: s, ...x }, a) => /* @__PURE__ */ u.jsx(
+), q = Object.assign(B, { Item: j }), A = ({ children: c, className: t, ...n }) => /* @__PURE__ */ f(i, { as: "footer", className: m("bottom-0 mt-auto pb-2", t), justify: "between", ...n, children: c }), H = g.forwardRef(
+  ({ className: c, as: t = "div", cols: n, rows: r, gap: e, gapX: o, gapY: l, flow: s, ...x }, a) => /* @__PURE__ */ f(
     t,
     {
       className: m(
@@ -505,12 +504,9 @@ const y = ({ children: c, className: t, direction: n = "col", ...r }) => {
     }
   )
 );
-R.displayName = "Grid";
-const C = ({ children: c, sticky: t = !1, className: n, ...r }) => /* @__PURE__ */ u.jsx(y, { as: "header", className: m("top-0 ", t && "z-50 sticky", n), justify: "between", ...r, children: c }), F = ({ children: c, className: t, withContainer: n = !1, ...r }) => {
-  const e = m("flex-1 grow", t);
-  return n ? /* @__PURE__ */ u.jsx(y, { as: "main", className: e, display: "block", ...r, children: c }) : /* @__PURE__ */ u.jsx(i.Item, { as: "main", className: e, ...r, children: c });
-}, B = g.forwardRef(({ children: c, className: t, ...n }, r) => /* @__PURE__ */ u.jsx(
-  i,
+H.displayName = "Grid";
+const D = ({ children: c, sticky: t = !1, className: n, ...r }) => /* @__PURE__ */ f(i, { as: "header", className: m("top-0 ", t && "z-50 sticky", n), justify: "between", ...r, children: c }), R = g.forwardRef(({ children: c, className: t, ...n }, r) => /* @__PURE__ */ f(
+  y,
   {
     className: m("mx-auto w-full max-w-screen-xl h-screen flex-1", t),
     direction: "col",
@@ -518,13 +514,13 @@ const C = ({ children: c, sticky: t = !1, className: n, ...r }) => /* @__PURE__
     ...n,
     children: c
   }
-)), H = Object.assign(B, { Header: C, Body: F, Footer: k });
+)), E = Object.assign(R, { Header: F, Body: k, Footer: N });
 export {
-  w as B,
-  y as C,
-  i as F,
-  R as G,
-  C as H,
-  H as L,
-  k as a
+  C as B,
+  z as C,
+  q as F,
+  H as G,
+  D as H,
+  E as L,
+  A as a
 };

package/dist/chunks/PageNotFound-DOYQfbRs.js

@@ -0,0 +1,51 @@
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { CircleX as s, RotateCcw as d, Loader2 as m, FileQuestion as u, Home as f } from "lucide-react";
+import { Button as h } from "@/forms";
+import { Flex as o, Box as p } from "@/layout";
+import { Heading as g, Code as w } from "@/typography";
+import { Button as x } from "@/forms/Button";
+import { Flex as y } from "@/layout/Flex";
+import { cn as N } from "@/utils";
+const c = ({ variant: e, iconComponent: r, message: t, children: a }) => {
+  if (!r && !t && !a)
+    return /* @__PURE__ */ n(o, { align: "center", className: "h-full w-full", justify: "center", children: "Content missing" });
+  const l = r || null;
+  return /* @__PURE__ */ n(o, { align: "center", className: "h-full w-full", justify: "center", children: /* @__PURE__ */ i(o, { direction: "col", justify: "center", children: [
+    l && /* @__PURE__ */ n(o, { align: "center", className: "my-6", gapX: "4", justify: "center", children: /* @__PURE__ */ n(
+      l,
+      {
+        "aria-hidden": !!t,
+        "aria-label": t ? void 0 : `${e || "info"} icon`,
+        className: N(
+          e === "error" && "text-destructive",
+          e === "success" && "text-success",
+          e === "warning" && "text-warning",
+          e === "info" && "text-info"
+        ),
+        "data-testid": "icon",
+        role: t ? void 0 : "img",
+        size: 128
+      }
+    ) }),
+    /* @__PURE__ */ i(o, { className: "max-w-[500px]", direction: "col", justify: "center", children: [
+      t ? /* @__PURE__ */ n(g, { align: "center", level: "4", weight: "normal", children: t }) : null,
+      a
+    ] })
+  ] }) });
+}, C = ({ message: e = "Something went wrong.", children: r }) => /* @__PURE__ */ n(c, { iconComponent: s, message: e, variant: "error", children: r }), v = () => {
+  try {
+    window.location.reload();
+  } catch {
+    console.warn("Page reload prevented in test environment");
+  }
+}, R = ({ error: e, onRetry: r = v }) => /* @__PURE__ */ n(C, { children: /* @__PURE__ */ i(o, { align: "center", className: "mt-8", direction: "col", children: [
+  /* @__PURE__ */ n(p, { className: "mb-8 p-4", variant: "muted", width: "full", children: /* @__PURE__ */ n(w, { align: "center", size: "xs", variant: "inherit", children: e.message || "Unknown error occurred" }) }),
+  /* @__PURE__ */ n(h, { icon: /* @__PURE__ */ n(d, {}), onClick: r, variant: "primary", children: "Reload" })
+] }) }), j = () => /* @__PURE__ */ n(m, { className: "animate-spin text-info", "data-testid": "icon", size: 64 }), $ = ({ iconComponent: e, message: r }) => /* @__PURE__ */ n(c, { iconComponent: e || j, message: r }), H = ({ goHome: e, message: r = "404: Not found" }) => /* @__PURE__ */ n(c, { iconComponent: u, message: r, variant: "warning", children: /* @__PURE__ */ n(y, { align: "center", className: "mt-8", direction: "col", children: e && /* @__PURE__ */ n(x, { icon: /* @__PURE__ */ n(f, {}), onClick: e, variant: "primary", children: "Home" }) }) });
+export {
+  R as E,
+  c as I,
+  $ as P,
+  C as a,
+  H as b
+};

package/dist/chunks/SidebarLayout-BtEWD4ew.js

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as a, Fragment as h } from "react/jsx-runtime";
+import { Sidebar as f, SidebarHeader as g, SidebarMenu as d, SidebarMenuItem as l, SidebarMenuButton as c, SidebarContent as x, SidebarGroup as C, SidebarGroupContent as M, SidebarFooter as N, SidebarTrigger as k, SidebarSeparator as u, SidebarRail as F, SidebarProvider as T, SidebarInset as j } from "@/components/ui/sidebar";
+import { SquareArrowOutUpRight as v } from "lucide-react";
+import { Fragment as z } from "react";
+import { ThemeSelector as $ } from "@/components/ThemeSelector/ThemeSelector";
+import { Flex as w } from "@/layout";
+import { Text as y } from "@/typography";
+const m = ({ children: i }) => /* @__PURE__ */ e(y, { size: "base", truncate: !0, children: i }), A = ({ itemSet: i, activeSlug: n }) => /* @__PURE__ */ e(h, { children: i.links.map((r) => /* @__PURE__ */ e(l, { className: "hover:cursor-pointer", onClick: r.onClick, children: /* @__PURE__ */ e(c, { asChild: !0, isActive: n === r.slug, children: /* @__PURE__ */ a("span", { children: [
+  /* @__PURE__ */ e(r.icon, {}),
+  /* @__PURE__ */ e(m, { children: r.title }),
+  r.external && /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(v, { size: 12, strokeWidth: 1.5 }) })
+] }) }) }, r.slug)) }), s = ({ itemSets: i, activeSlug: n }) => /* @__PURE__ */ e(d, { children: i.map((r, t) => /* @__PURE__ */ a(z, { children: [
+  /* @__PURE__ */ e(A, { activeSlug: n, itemSet: r }),
+  t < i.length - 1 && /* @__PURE__ */ e(u, {})
+] }, `item-set-${t}`)) }), G = ({
+  brandContent: i,
+  brandOnClick: n,
+  activeSlug: r,
+  itemSets: t,
+  bottomItemSets: o = [],
+  theme: S,
+  setTheme: b,
+  ...p
+}) => /* @__PURE__ */ a(f, { collapsible: "icon", ...p, children: [
+  /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+    c,
+    {
+      className: n ? "cursor-pointer" : "cursor-default",
+      onClick: n,
+      size: "lg",
+      children: i
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(s, { activeSlug: r, itemSets: t }) }) }) }),
+  /* @__PURE__ */ e(N, { className: "mb-4", children: /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e(k, { className: "justify-start font-normal", children: /* @__PURE__ */ e(m, { children: "Collapse menu" }) }) }) }),
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e($, { buttonClassName: "p-0", setTheme: b, theme: S, variant: "stacked" }) }) }),
+    o.length > 0 && /* @__PURE__ */ a(h, { children: [
+      /* @__PURE__ */ e(u, {}),
+      /* @__PURE__ */ e(s, { activeSlug: r, itemSets: o })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ e(F, {})
+] }), U = ({ children: i, ...n }) => /* @__PURE__ */ a(T, { children: [
+  /* @__PURE__ */ e(G, { ...n }),
+  /* @__PURE__ */ e(j, { className: "max-w-screen-xl", children: i })
+] });
+export {
+  m as M,
+  G as S,
+  U as a
+};