@blurrow/ui 0.1.0 → 0.2.1

package/README.md

@@ -1,20 +1,56 @@
+<a href="https://www.blurrow.org">
+  <img src="https://raw.githubusercontent.com/manyports/blurrow/main/.github/readme/banner.png" alt="blurrow/ui: buttons you want to press, fields you want to fill in" width="100%">
+</a>
+
 # @blurrow/ui
 
-buttons you want to press, fields you want to fill in.
+62 react components that look and feel like physical things. buttons sit in a bezel and sink when you press them, text fields are cut into the surface, and every shadow agrees on where the light is coming from.
+
+free, mit licensed, and built for react 19 and tailwind css v4. made with care by [@manyports](https://manyports.com).
 
-48 react components that share the same materials and the same light. made with care by [@manyports](https://manyports.com).
+**[website](https://www.blurrow.org)** · [docs](https://www.blurrow.org/docs) · [all components](https://www.blurrow.org/docs/components) · [github](https://github.com/manyports/blurrow)
 
-## install
+<img src="https://raw.githubusercontent.com/manyports/blurrow/main/.github/readme/favourites.png" alt="nine blurrow components: buttons, toggles, an input, tabs, pagination, a radio group, a select, a stat card and an alert" width="100%">
+
+## getting started
 
 ```bash
-npm install @blurrow/ui
+npx @blurrow/ui init
+```
+
+that's the whole setup. it installs the package, adds two lines to your stylesheet, loads the archivo font and wraps your app in `ToastProvider`, showing you each change before it writes anything.
+
+<img src="https://raw.githubusercontent.com/manyports/blurrow/main/.github/readme/cli.png" alt="the blurrow cli setting up a next.js project" width="560">
+
+then use whatever you like:
+
+```tsx
+import { Button, Input, Toggle } from "@blurrow/ui";
+
+export default function Settings() {
+  return (
+    <form className="flex flex-col gap-4">
+      <Input label="display name" placeholder="ada" />
+      <Toggle label="email me when someone replies" defaultChecked />
+      <Button variant="primary">save</Button>
+    </form>
+  );
+}
 ```
 
-you'll need react 19 and tailwind css v4.
+they drop straight into server components. the interactive ones are marked `"use client"`, and the static ones (badges, cards, avatars, skeletons…) render on the server and send no javascript.
+
+## setting it up by hand
+
+if you'd rather not run `init`, it does four things:
+
+**1. install**
 
-## set up
+```bash
+npm install @blurrow/ui
+```
 
-**1. styles.** add the tokens to your global stylesheet, after tailwind, and point tailwind at the package so it picks up the classes the components use:
+**2. styles.** add the tokens after tailwind, and let tailwind see the classes the components use. the `@source` path is relative to your css file.
 
 ```css
 /* app/globals.css */
@@ -24,9 +60,7 @@ you'll need react 19 and tailwind css v4.
 @source "../node_modules/@blurrow/ui";
 ```
 
-the `@source` path is relative to the css file, so adjust it if your stylesheet lives somewhere else.
-
-**2. font.** everything is set in archivo. load it as the `--font-archivo` variable. with next.js:
+**3. font.** everything is set in archivo, loaded as the `--font-archivo` variable. with next.js:
 
 ```tsx
 // app/layout.tsx
@@ -39,7 +73,7 @@ const archivo = Archivo({ subsets: ["latin"], variable: "--font-archivo" });
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={archivo.variable}>
-      <body className="bg-[#EBEBEB] font-sans text-neutral-900 antialiased">
+      <body className="bg-page font-sans text-ink antialiased">
         <ToastProvider>{children}</ToastProvider>
       </body>
     </html>
@@ -47,20 +81,26 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-`ToastProvider` is only needed if you use toasts.
+**4. toasts.** `ToastProvider` above is only needed if you use `useToast()`.
 
-## use
+## dark mode
 
-```tsx
-import { Button } from "@blurrow/ui";
+every colour, shadow and gradient is a css variable with a light and a dark value. put `data-theme="dark"` on `<html>` (or the class `dark`), or on any element to darken just that part. `data-theme="system"` follows the os setting, and an explicit `light` or `dark` always wins. `bg-page` and `text-ink` let your own page follow along. more in [the docs](https://www.blurrow.org/docs/installation#dark-mode).
 
-export default function Page() {
-  return <Button variant="primary">say hi</Button>;
-}
+## the cli
+
+```bash
+npx @blurrow/ui init            # set up a project, safe to run again
+npx @blurrow/ui add [names…]    # copy components' source in, with anything they need
+npx @blurrow/ui list            # every component, and which ones you've copied
+npx @blurrow/ui diff [name]     # what you've changed in your copies
+npx @blurrow/ui doctor [--fix]  # check the setup, and repair the css if it's off
 ```
 
-every component is marked `"use client"`, so you can import them straight into server components.
+`add` with no names opens a picker: type to filter, space to choose. names are forgiving (`button`, `Button` and `button-group` all work) and typos get a suggestion. files you've edited are never overwritten unless you pass `--overwrite`.
+
+everything takes `--yes`, `--dry-run` and `--cwd <path>`. settings live in `blurrow.json`. once the package is installed, `npx blurrow` works as a shorter name.
 
 ## license
 
-MIT
+mit. issues and ideas are welcome on [github](https://github.com/manyports/blurrow/issues).

package/dist/Accordion.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AccordionItem {
+    key: string;
+    title: string;
+    content: ReactNode;
+    defaultOpen?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    className?: string;
+}
+declare function Accordion({ items, allowMultiple, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion };

package/dist/Accordion.js

@@ -0,0 +1,138 @@
+"use client";
+
+// ../../components/ui/Accordion.tsx
+import { useState, useCallback, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Accordion({ items, allowMultiple = false, className }) {
+  const [openKeys, setOpenKeys] = useState(() => {
+    const defaults = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      if (item.defaultOpen) {
+        defaults.add(item.key);
+      }
+    }
+    return defaults;
+  });
+  const toggle = useCallback(
+    (key) => {
+      setOpenKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          if (allowMultiple) {
+            next.add(key);
+          } else {
+            next.clear();
+            next.add(key);
+          }
+        }
+        return next;
+      });
+    },
+    [allowMultiple]
+  );
+  const uid = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["rounded-[18px] p-1.5", className].filter(Boolean).join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-panel-face rounded-[13px] overflow-hidden p-1",
+          style: { boxShadow: "var(--panel-face-shadow)" },
+          children: items.map((item, index) => {
+            const isOpen = openKeys.has(item.key);
+            const isLast = index === items.length - 1;
+            const headerId = `${uid}-${item.key}-header`;
+            const panelId = `${uid}-${item.key}-panel`;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: [
+                  "relative",
+                  // Hairline between rows, inset so it doesn't touch the rounded corners
+                  !isLast && "after:absolute after:left-3 after:right-3 after:bottom-0 after:h-px after:bg-line"
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      id: headerId,
+                      "aria-expanded": isOpen,
+                      "aria-controls": panelId,
+                      onClick: () => toggle(item.key),
+                      className: [
+                        "group/acc w-full flex items-center justify-between gap-3 py-3 px-3 text-left text-[13.5px] font-medium cursor-pointer rounded-[10px]",
+                        "transition-colors duration-150",
+                        isOpen ? "text-ink" : "text-ink-label hover:text-ink hover:bg-surface-hover"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: item.title }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            "aria-hidden": true,
+                            className: "relative shrink-0 w-6 h-6 rounded-[7px] flex items-center justify-center text-ink-muted group-hover/acc:text-ink transition-colors",
+                            style: { background: "var(--face)", boxShadow: "var(--face-shadow)" },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "absolute w-2.5 h-[1.5px] rounded-full bg-current" }),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "absolute w-2.5 h-[1.5px] rounded-full bg-current",
+                                  style: {
+                                    transform: isOpen ? "rotate(0deg)" : "rotate(90deg)",
+                                    transition: "transform 300ms var(--ease-spring)"
+                                  }
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: panelId,
+                      role: "region",
+                      "aria-labelledby": headerId,
+                      inert: !isOpen,
+                      style: {
+                        display: "grid",
+                        gridTemplateRows: isOpen ? "1fr" : "0fr",
+                        transition: "grid-template-rows 320ms var(--ease-out-soft)"
+                      },
+                      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "px-3 pb-4 pt-0.5 text-[13px] text-ink-body leading-relaxed",
+                          style: {
+                            opacity: isOpen ? 1 : 0,
+                            transform: isOpen ? "translateY(0)" : "translateY(-4px)",
+                            transition: "opacity 240ms ease-out, transform 320ms var(--ease-out-soft)"
+                          },
+                          children: item.content
+                        }
+                      ) })
+                    }
+                  )
+                ]
+              },
+              item.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useId, ReactNode } from \"react\";\n\ninterface AccordionItem {\n  key: string;\n  title: string;\n  content: ReactNode;\n  defaultOpen?: boolean;\n}\n\ninterface AccordionProps {\n  items: AccordionItem[];\n  allowMultiple?: boolean;\n  className?: string;\n}\n\nexport function Accordion({ items, allowMultiple = false, className }: AccordionProps) {\n  const [openKeys, setOpenKeys] = useState<Set<string>>(() => {\n    const defaults = new Set<string>();\n    for (const item of items) {\n      if (item.defaultOpen) {\n        defaults.add(item.key);\n      }\n    }\n    return defaults;\n  });\n\n  const toggle = useCallback(\n    (key: string) => {\n      setOpenKeys((prev) => {\n        const next = new Set(prev);\n        if (next.has(key)) {\n          next.delete(key);\n        } else {\n          if (allowMultiple) {\n            next.add(key);\n          } else {\n            next.clear();\n            next.add(key);\n          }\n        }\n        return next;\n      });\n    },\n    [allowMultiple]\n  );\n  const uid = useId();\n\n  return (\n    <div\n      className={[\"rounded-[18px] p-1.5\", className].filter(Boolean).join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <div\n        className=\"bg-panel-face rounded-[13px] overflow-hidden p-1\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        {items.map((item, index) => {\n          const isOpen = openKeys.has(item.key);\n          const isLast = index === items.length - 1;\n          const headerId = `${uid}-${item.key}-header`;\n          const panelId = `${uid}-${item.key}-panel`;\n\n          return (\n            <div\n              key={item.key}\n              className={[\n                \"relative\",\n                // Hairline between rows, inset so it doesn't touch the rounded corners\n                !isLast &&\n                  \"after:absolute after:left-3 after:right-3 after:bottom-0 after:h-px after:bg-line\",\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n            >\n              <h3>\n                <button\n                  type=\"button\"\n                  id={headerId}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  onClick={() => toggle(item.key)}\n                  className={[\n                    \"group/acc w-full flex items-center justify-between gap-3 py-3 px-3 text-left text-[13.5px] font-medium cursor-pointer rounded-[10px]\",\n                    \"transition-colors duration-150\",\n                    isOpen ? \"text-ink\" : \"text-ink-label hover:text-ink hover:bg-surface-hover\",\n                  ].join(\" \")}\n                >\n                  <span>{item.title}</span>\n                  {/* Plus that turns into a minus: says \"more inside\", not \"navigate\" */}\n                  <span\n                    aria-hidden\n                    className=\"relative shrink-0 w-6 h-6 rounded-[7px] flex items-center justify-center text-ink-muted group-hover/acc:text-ink transition-colors\"\n                    style={{ background: \"var(--face)\", boxShadow: \"var(--face-shadow)\" }}\n                  >\n                    <span className=\"absolute w-2.5 h-[1.5px] rounded-full bg-current\" />\n                    <span\n                      className=\"absolute w-2.5 h-[1.5px] rounded-full bg-current\"\n                      style={{\n                        transform: isOpen ? \"rotate(0deg)\" : \"rotate(90deg)\",\n                        transition: \"transform 300ms var(--ease-spring)\",\n                      }}\n                    />\n                  </span>\n                </button>\n              </h3>\n\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={headerId}\n                // Closed panels are removed from the tab order and the a11y tree\n                inert={!isOpen}\n                style={{\n                  display: \"grid\",\n                  gridTemplateRows: isOpen ? \"1fr\" : \"0fr\",\n                  transition: \"grid-template-rows 320ms var(--ease-out-soft)\",\n                }}\n              >\n                <div className=\"overflow-hidden\">\n                  <div\n                    className=\"px-3 pb-4 pt-0.5 text-[13px] text-ink-body leading-relaxed\"\n                    style={{\n                      opacity: isOpen ? 1 : 0,\n                      transform: isOpen ? \"translateY(0)\" : \"translateY(-4px)\",\n                      transition: \"opacity 240ms ease-out, transform 320ms var(--ease-out-soft)\",\n                    }}\n                  >\n                    {item.content}\n                  </div>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Alert.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AlertVariant = "default" | "success" | "warning" | "error";
+interface AlertProps {
+    variant?: AlertVariant;
+    title: string;
+    description?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+declare function Alert({ variant, title, description, onDismiss, className }: AlertProps): react_jsx_runtime.JSX.Element;
+
+export { Alert };

package/dist/Alert.js

@@ -0,0 +1,69 @@
+// ../../components/ui/Alert.tsx
+import { CloseButton } from "./CloseButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantConfig = {
+  default: {
+    tile: "var(--face-inverse)",
+    icon: /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 8v4m0 4h.01" })
+    ] })
+  },
+  success: {
+    tile: "var(--tile-success)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+  },
+  warning: {
+    tile: "var(--tile-warning)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }) })
+  },
+  error: {
+    tile: "var(--tile-error)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+  }
+};
+function Alert({ variant = "default", title, description, onDismiss, className = "" }) {
+  const { tile, icon } = variantConfig[variant];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: variant === "error" || variant === "warning" ? "alert" : "status",
+      className: ["rounded-[18px] p-1.5", className].join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3",
+          style: { boxShadow: "var(--panel-face-shadow)" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: [
+                  "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center",
+                  // the default tile is the inverse face; status tiles stay white-on-colour
+                  tile === "var(--face-inverse)" ? "text-ink-inverse" : "text-white"
+                ].join(" "),
+                style: {
+                  background: tile,
+                  boxShadow: "var(--tile-status-shadow)"
+                },
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pt-[5px]", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-ink-muted mt-1 leading-relaxed", children: description })
+            ] }),
+            onDismiss && /* @__PURE__ */ jsx(CloseButton, { size: "sm", label: "Dismiss", onClick: onDismiss })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloseButton } from \"./CloseButton\";\n\ntype AlertVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\ninterface AlertProps {\n  variant?: AlertVariant;\n  title: string;\n  description?: string;\n  onDismiss?: () => void;\n  className?: string;\n}\n\n/* Tiles share Toast's lit-from-above gradients, so an alert and the toast\n   it came from look like the same object.                              */\nconst variantConfig: Record<AlertVariant, {\n  tile: string;\n  icon: React.ReactNode;\n}> = {\n  default: {\n    tile: \"var(--face-inverse)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path strokeLinecap=\"round\" d=\"M12 8v4m0 4h.01\" />\n      </svg>\n    ),\n  },\n  success: {\n    tile: \"var(--tile-success)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n    ),\n  },\n  warning: {\n    tile: \"var(--tile-warning)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\" />\n      </svg>\n    ),\n  },\n  error: {\n    tile: \"var(--tile-error)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    ),\n  },\n};\n\nexport function Alert({ variant = \"default\", title, description, onDismiss, className = \"\" }: AlertProps) {\n  const { tile, icon } = variantConfig[variant];\n\n  return (\n    <div\n      // Errors and warnings interrupt; everything else waits its turn\n      role={variant === \"error\" || variant === \"warning\" ? \"alert\" : \"status\"}\n      className={[\"rounded-[18px] p-1.5\", className].join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <div\n        className=\"bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        <div\n          aria-hidden\n          className={[\n              \"shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center\",\n              // the default tile is the inverse face; status tiles stay white-on-colour\n              tile === \"var(--face-inverse)\" ? \"text-ink-inverse\" : \"text-white\",\n            ].join(\" \")}\n          style={{\n            background: tile,\n            boxShadow: \"var(--tile-status-shadow)\",\n          }}\n        >\n          {icon}\n        </div>\n\n        <div className=\"flex-1 min-w-0 pt-[5px]\">\n          <p className=\"text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]\">{title}</p>\n          {description && (\n            <p className=\"text-[12.5px] text-ink-muted mt-1 leading-relaxed\">{description}</p>\n          )}\n        </div>\n\n        {onDismiss && <CloseButton size=\"sm\" label=\"Dismiss\" onClick={onDismiss} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AACA,SAAS,mBAAmB;AAqBtB,SACE,KADF;AAPN,IAAM,gBAGD;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MACE,qBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,QAAO,SAAQ,aACvF;AAAA,0BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,MAC/B,oBAAC,UAAK,eAAc,SAAQ,GAAE,mBAAkB;AAAA,OAClD;AAAA,EAEJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MACE,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,SAAQ,aACpF,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB,GACxE;AAAA,EAEJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MACE,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,QAAO,SAAQ,aACvF,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,sGAAqG,GAC5J;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,SAAQ,aACpF,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB,GAC9E;AAAA,EAEJ;AACF;AAEO,SAAS,MAAM,EAAE,UAAU,WAAW,OAAO,aAAa,WAAW,YAAY,GAAG,GAAe;AACxG,QAAM,EAAE,MAAM,KAAK,IAAI,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,YAAY,WAAW,YAAY,YAAY,UAAU;AAAA,MAC/D,WAAW,CAAC,wBAAwB,SAAS,EAAE,KAAK,GAAG;AAAA,MACvD,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,MAE5E;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,UAE/C;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAW;AAAA,kBACP;AAAA;AAAA,kBAEA,SAAS,wBAAwB,qBAAqB;AAAA,gBACxD,EAAE,KAAK,GAAG;AAAA,gBACZ,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,WAAW;AAAA,gBACb;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YAEA,qBAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,OAAE,WAAU,uEAAuE,iBAAM;AAAA,cACzF,eACC,oBAAC,OAAE,WAAU,qDAAqD,uBAAY;AAAA,eAElF;AAAA,YAEC,aAAa,oBAAC,eAAY,MAAK,MAAK,OAAM,WAAU,SAAS,WAAW;AAAA;AAAA;AAAA,MAC3E;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/AuthorCard.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AuthorCardProps {
+    name: string;
+    bio?: string;
+    avatarSrc?: string;
+    onFollow?: () => void;
+    className?: string;
+}
+declare function AuthorCard({ name, bio, avatarSrc, onFollow, className, }: AuthorCardProps): react_jsx_runtime.JSX.Element;
+
+export { AuthorCard };

package/dist/AuthorCard.js

@@ -0,0 +1,57 @@
+// ../../components/ui/AuthorCard.tsx
+import { Avatar } from "./Avatar.js";
+import { Button } from "./Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthorCard({
+  name,
+  bio,
+  avatarSrc,
+  onFollow,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "rim relative rounded-[22px] p-1.5",
+        className
+      ].filter(Boolean).join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--card-shadow)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "relative bg-panel-face rounded-[17px] overflow-hidden", style: { boxShadow: "var(--panel-face-shadow)" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "h-20 relative overflow-hidden",
+            style: {
+              background: "var(--cover)",
+              boxShadow: "var(--cover-shadow)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "px-6 pb-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "-mt-8 mb-4", children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: avatarSrc,
+              name,
+              size: "lg",
+              className: "ring-[3.5px] ring-panel-face shadow-[var(--avatar-lift)]"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[15px] font-semibold text-ink leading-snug truncate tracking-[-0.01em]", children: name }),
+              bio && /* @__PURE__ */ jsx("p", { className: "text-[13px] text-ink-muted leading-relaxed mt-1 line-clamp-2", children: bio })
+            ] }),
+            onFollow && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: onFollow, className: "shrink-0", children: "follow" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  AuthorCard
+};
+//# sourceMappingURL=AuthorCard.js.map

package/dist/AuthorCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/AuthorCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { Avatar } from \"./Avatar\";\nimport { Button } from \"./Button\";\n\ninterface AuthorCardProps {\n  name: string;\n  bio?: string;\n  avatarSrc?: string;\n  onFollow?: () => void;\n  className?: string;\n}\n\nexport function AuthorCard({\n  name,\n  bio,\n  avatarSrc,\n  onFollow,\n  className = \"\",\n}: AuthorCardProps) {\n  return (\n    <div\n      className={[\n        \"rim relative rounded-[22px] p-1.5\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--card-shadow)\" }}\n    >\n      <div className=\"relative bg-panel-face rounded-[17px] overflow-hidden\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n        {/* Cover: a sunken well, so the avatar visibly sits on top of it */}\n        <div\n          aria-hidden\n          className=\"h-20 relative overflow-hidden\"\n          style={{\n            background:\n              \"var(--cover)\",\n            boxShadow: \"var(--cover-shadow)\",\n          }}\n        />\n        <div className=\"px-6 pb-6\">\n          <div className=\"-mt-8 mb-4\">\n            <Avatar\n              src={avatarSrc}\n              name={name}\n              size=\"lg\"\n              className=\"ring-[3.5px] ring-panel-face shadow-[var(--avatar-lift)]\"\n            />\n          </div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"flex-1 min-w-0\">\n              <p className=\"text-[15px] font-semibold text-ink leading-snug truncate tracking-[-0.01em]\">{name}</p>\n              {bio && (\n                <p className=\"text-[13px] text-ink-muted leading-relaxed mt-1 line-clamp-2\">{bio}</p>\n              )}\n            </div>\n            {onFollow && (\n              <Button variant=\"primary\" size=\"sm\" onClick={onFollow} className=\"shrink-0\">\n                follow\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AACA,SAAS,cAAc;AACvB,SAAS,cAAc;AA6Bf,cAmBI,YAnBJ;AAnBD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,YAAY,sBAAsB,WAAW,qBAAqB;AAAA,MAE3E,+BAAC,SAAI,WAAU,yDAAwD,OAAO,EAAE,WAAW,2BAA2B,GAEpH;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YACE;AAAA,cACF,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,QACA,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,SAAI,WAAU,cACb;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACA,qBAAC,SAAI,WAAU,0CACb;AAAA,iCAAC,SAAI,WAAU,kBACb;AAAA,kCAAC,OAAE,WAAU,+EAA+E,gBAAK;AAAA,cAChG,OACC,oBAAC,OAAE,WAAU,gEAAgE,eAAI;AAAA,eAErF;AAAA,YACC,YACC,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,UAAU,WAAU,YAAW,oBAE5E;AAAA,aAEJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/Avatar.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type AvatarSize = "sm" | "md" | "lg";
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    className?: string;
+}
+declare function Avatar({ src, alt, name, size, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    max?: number;
+    size?: AvatarSize;
+    className?: string;
+}
+declare function AvatarGroup({ children, max, size, className, }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarGroup };

package/dist/Avatar.js

@@ -0,0 +1,96 @@
+// ../../components/ui/Avatar.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "w-7 h-7 text-[10px]",
+  md: "w-9 h-9 text-[12px]",
+  lg: "w-12 h-12 text-[14px]"
+};
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toLowerCase();
+}
+function Avatar({
+  src,
+  alt = "",
+  name,
+  size = "md",
+  className = ""
+}) {
+  const initials = name ? getInitials(name) : "?";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-ink-body select-none",
+        sizeStyles[size],
+        className
+      ].filter(Boolean).join(" "),
+      style: { background: "var(--face)" },
+      children: [
+        src ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx("img", { src, alt: alt || name || "", loading: "lazy", className: "w-full h-full object-cover" })
+        ) : /* @__PURE__ */ jsx("span", { role: "img", "aria-label": name ?? "Unknown", children: initials }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-full",
+            style: {
+              boxShadow: "var(--avatar-rim)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var overlapStyles = {
+  sm: "-ml-2",
+  md: "-ml-2.5",
+  lg: "-ml-3"
+};
+function AvatarGroup({
+  children,
+  max = 5,
+  size = "md",
+  className = ""
+}) {
+  const items = React.Children.toArray(children);
+  const visible = items.slice(0, max);
+  const overflow = items.length - max;
+  return /* @__PURE__ */ jsxs("div", { className: ["flex items-center", className].join(" "), children: [
+    visible.map((child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "ring-2 ring-panel-face rounded-full",
+          i > 0 ? overlapStyles[size] : ""
+        ].join(" "),
+        children: child
+      },
+      i
+    )),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "ring-2 ring-panel-face rounded-full flex items-center justify-center font-semibold text-ink-body select-none",
+          overlapStyles[size],
+          sizeStyles[size]
+        ].join(" "),
+        style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+        "aria-label": `${overflow} more`,
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Avatar.tsx"],"sourcesContent":["import React from \"react\";\n\ntype AvatarSize = \"sm\" | \"md\" | \"lg\";\n\ninterface AvatarProps {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AvatarSize;\n  className?: string;\n}\n\nconst sizeStyles: Record<AvatarSize, string> = {\n  sm: \"w-7 h-7 text-[10px]\",\n  md: \"w-9 h-9 text-[12px]\",\n  lg: \"w-12 h-12 text-[14px]\",\n};\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((w) => w[0])\n    .slice(0, 2)\n    .join(\"\")\n    .toLowerCase();\n}\n\nexport function Avatar({\n  src,\n  alt = \"\",\n  name,\n  size = \"md\",\n  className = \"\",\n}: AvatarProps) {\n  const initials = name ? getInitials(name) : \"?\";\n\n  return (\n    <div\n      className={[\n        \"relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-ink-body select-none\",\n        sizeStyles[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ background: \"var(--face)\" }}\n    >\n      {src ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img src={src} alt={alt || name || \"\"} loading=\"lazy\" className=\"w-full h-full object-cover\" />\n      ) : (\n        <span role=\"img\" aria-label={name ?? \"Unknown\"}>{initials}</span>\n      )}\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 rounded-full\"\n        style={{\n          boxShadow: \"var(--avatar-rim)\",\n        }}\n      />\n    </div>\n  );\n}\n\ninterface AvatarGroupProps {\n  children: React.ReactNode;\n  max?: number;\n  size?: AvatarSize;\n  className?: string;\n}\n\nconst overlapStyles: Record<AvatarSize, string> = {\n  sm: \"-ml-2\",\n  md: \"-ml-2.5\",\n  lg: \"-ml-3\",\n};\n\nexport function AvatarGroup({\n  children,\n  max = 5,\n  size = \"md\",\n  className = \"\",\n}: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const visible = items.slice(0, max);\n  const overflow = items.length - max;\n\n  return (\n    <div className={[\"flex items-center\", className].join(\" \")}>\n      {visible.map((child, i) => (\n        <div\n          key={i}\n          className={[\n            \"ring-2 ring-panel-face rounded-full\",\n            i > 0 ? overlapStyles[size] : \"\",\n          ].join(\" \")}\n        >\n          {child}\n        </div>\n      ))}\n      {overflow > 0 && (\n        <div\n          className={[\n            \"ring-2 ring-panel-face rounded-full flex items-center justify-center font-semibold text-ink-body select-none\",\n            overlapStyles[size],\n            sizeStyles[size],\n          ].join(\" \")}\n          style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n          aria-label={`${overflow} more`}\n        >\n          +{overflow}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAAA,OAAO,WAAW;AAqCd,SAYI,KAZJ;AAzBJ,IAAM,aAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AACd,GAAgB;AACd,QAAM,WAAW,OAAO,YAAY,IAAI,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,QACf;AAAA,MACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,YAAY,cAAc;AAAA,MAElC;AAAA;AAAA;AAAA,UAEC,oBAAC,SAAI,KAAU,KAAK,OAAO,QAAQ,IAAI,SAAQ,QAAO,WAAU,8BAA6B;AAAA,YAE7F,oBAAC,UAAK,MAAK,OAAM,cAAY,QAAQ,WAAY,oBAAS;AAAA,QAE5D;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,IAAM,gBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AACd,GAAqB;AACnB,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,UAAU,MAAM,MAAM,GAAG,GAAG;AAClC,QAAM,WAAW,MAAM,SAAS;AAEhC,SACE,qBAAC,SAAI,WAAW,CAAC,qBAAqB,SAAS,EAAE,KAAK,GAAG,GACtD;AAAA,YAAQ,IAAI,CAAC,OAAO,MACnB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,IAAI,IAAI,cAAc,IAAI,IAAI;AAAA,QAChC,EAAE,KAAK,GAAG;AAAA,QAET;AAAA;AAAA,MANI;AAAA,IAOP,CACD;AAAA,IACA,WAAW,KACV;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,cAAc,IAAI;AAAA,UAClB,WAAW,IAAI;AAAA,QACjB,EAAE,KAAK,GAAG;AAAA,QACV,OAAO,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAAA,QACpE,cAAY,GAAG,QAAQ;AAAA,QACxB;AAAA;AAAA,UACG;AAAA;AAAA;AAAA,IACJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/Badge.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type BadgeVariant = "default" | "muted" | "accent";
+interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Badge({ variant, children, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge };