@caqophony/ui 0.3.1 → 0.4.0

package/README.md

@@ -48,11 +48,48 @@ Tailwind v4 colour/radius/z-index/opacity/duration utilities and registers the
 package's built files as a Tailwind `@source`. Override any `--token` after the
 import to re-theme.
 
-Tailwind v3 consumers: add `./node_modules/@caqophony/ui/dist/**/*.js` to
-`content` and map the same variables in `theme.extend.colors`.
+## Styles (Tailwind v3)
 
-`animate-in` / `animate-out` (used by tooltips) come from `tailwindcss-animate`
-(v3) or `tw-animate-css` (v4); without it those animations are simply absent.
+Inside the Caqophony monorepo, an app takes the Gossamer preset and adds the
+library to `content`. Do not map the tokens by hand in `theme.extend.colors`:
+that left `bg-primary-solid` with no rule, or with a rule reading a variable
+nothing declares, and neither one raises an error.
+
+```ts
+import { gossamerPreset } from '@caqophony/tokens/tailwind-preset';
+
+export default {
+  presets: [gossamerPreset],
+  darkMode: ['class'],
+  content: ['./app/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
+};
+```
+
+The preset maps the library's tokens and declares its variables (light, and
+dark under `.dark`), and adds the utilities and the `not-first:` variant a v3
+theme cannot express. It only adds names: stock Tailwind keeps its values, your
+`theme` wins over the preset, and a variable your CSS declares wins over the
+preset's.
+
+`pnpm exec tsx scripts/check-ui-classes-compile.ts` covers the two surfaces that
+draw the library: the monorepo's product app on Tailwind v3, and a generated
+app's `globals.css` plus `styles.css` on Tailwind v4, each against the classes
+that surface can reach. It fails on a class Tailwind generates no rule for, or a
+rule reading a variable that does not reach the element by default. It runs in
+pre-push.
+
+The preset is not published. Outside the monorepo, a Tailwind v3 app needs
+`./node_modules/@caqophony/ui/dist/**/*.js` in `content` and the same mapping,
+variables, utilities and variant in its own config, or Tailwind v4 and
+`styles.css` above.
+
+## Animation and prose
+
+On Tailwind v4, `styles.css` defines the `animate-in` / `animate-out` utilities
+the modal and tooltip use, and loads `@tailwindcss/typography` for
+`MarkdownRenderer`, which `@caqophony/ui` depends on. There is nothing to add.
+On Tailwind v3, install `tailwindcss-animate` and `@tailwindcss/typography` as
+plugins.
 
 ## Use
 
@@ -60,9 +97,25 @@ Tailwind v3 consumers: add `./node_modules/@caqophony/ui/dist/**/*.js` to
 import { Button, Card, PageContent } from '@caqophony/ui';
 import { BarChart } from '@caqophony/ui/charts';
 import { MarkdownRenderer } from '@caqophony/ui/markdown';
+import { MarketingCta, MarketingFooter } from '@caqophony/ui/marketing';
+import { Band, Display, Stack, Text } from '@caqophony/ui/material';
 ```
 
-Every entry point carries a `'use client'` directive.
+`@caqophony/ui/material` holds what a designed page is composed from: bands,
+display type, layout, and flat illustration pieces. Each colour is a token, so a
+theme change reaches all of it. Set a `Band`'s `surface` to `night` and every
+library component inside reads on the dark ground, with no prop of its own.
+
+`@caqophony/ui/material-tones` holds `FILL` and `STROKE`, the classes art draws
+in. It and `@caqophony/ui/material-art` are the entries with no `'use client'`
+directive, so a server component can use them. Every other entry point carries
+the directive.
+
+An app's own art is data, not code: a closed tree of SVG elements in tones, in a
+`*.art.json` file in `art/` beside `app/`, outside the library. `Art` from
+`@caqophony/ui/material-art` draws it, as a `Figure`'s one child, and nothing else
+makes elements in the slot. Shade `paper` with a held step at low opacity: `paper`
+keeps its colour in dark mode and `mist-*` does not.
 
 ## Licence
 

package/dist/chunk-BAW3RIMF.js

@@ -0,0 +1,229 @@
+'use client';
+import {
+  cn
+} from "./chunk-DP5WQAPO.js";
+
+// src/icon.tsx
+import {
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  ClipboardList,
+  Clock,
+  Database,
+  Download,
+  Ellipsis,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileText,
+  Filter,
+  Folder,
+  Heart,
+  House,
+  Inbox,
+  Info,
+  LayoutGrid,
+  Link,
+  List,
+  LoaderCircle,
+  Lock,
+  LogOut,
+  Mail,
+  MapPin,
+  Menu,
+  Package,
+  Pencil,
+  Phone,
+  Plus,
+  RefreshCw,
+  Rocket,
+  Search,
+  Settings,
+  Star,
+  Tag,
+  Trash2,
+  TriangleAlert,
+  Upload,
+  User,
+  Users,
+  X
+} from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var ICONS = {
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  bell: Bell,
+  calendar: Calendar,
+  check: Check,
+  "chevron-down": ChevronDown,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-up": ChevronUp,
+  "circle-alert": CircleAlert,
+  "circle-check": CircleCheck,
+  "clipboard-list": ClipboardList,
+  clock: Clock,
+  database: Database,
+  download: Download,
+  ellipsis: Ellipsis,
+  "external-link": ExternalLink,
+  eye: Eye,
+  "eye-off": EyeOff,
+  "file-text": FileText,
+  filter: Filter,
+  folder: Folder,
+  heart: Heart,
+  house: House,
+  inbox: Inbox,
+  info: Info,
+  "layout-grid": LayoutGrid,
+  link: Link,
+  list: List,
+  loader: LoaderCircle,
+  lock: Lock,
+  "log-out": LogOut,
+  mail: Mail,
+  "map-pin": MapPin,
+  menu: Menu,
+  package: Package,
+  pencil: Pencil,
+  phone: Phone,
+  plus: Plus,
+  "refresh-cw": RefreshCw,
+  rocket: Rocket,
+  search: Search,
+  settings: Settings,
+  star: Star,
+  tag: Tag,
+  trash: Trash2,
+  "triangle-alert": TriangleAlert,
+  upload: Upload,
+  user: User,
+  users: Users,
+  x: X
+};
+var ICON_SIZES = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+  xl: "size-8"
+};
+function Icon({ name, size, className }) {
+  const Glyph = ICONS[name];
+  return /* @__PURE__ */ jsx(Glyph, { className: cn(ICON_SIZES[size], className), "aria-hidden": "true" });
+}
+
+// src/scroll-hint.ts
+var SCROLL_HINT_X = "";
+var SCROLL_HINT_X_MARK = "pointer-events-none sticky right-0 z-10 ml-2 flex w-6 shrink-0 items-center justify-end self-stretch data-[scroll-hint-state=end]:invisible data-[scroll-hint-state=none]:hidden";
+var SCROLL_HINT_X_PILL = "flex h-full max-h-6 w-6 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm";
+var SCROLL_HINT_Y = "[container-type:scroll-state]";
+var SCROLL_HINT_Y_MARK = "pointer-events-none sticky bottom-1 -mt-7 flex h-6 justify-center supports-[container-type:scroll-state]:[@container_not_scroll-state(scrollable:bottom)]:hidden";
+
+// src/scroll-hint-mark.tsx
+import * as React from "react";
+
+// src/scroll-hint-watch.ts
+function scrollHintXState(box, slotWidth) {
+  if (box.scrollWidth - slotWidth <= box.clientWidth + 1) return "none";
+  return Math.abs(box.scrollLeft) + box.clientWidth >= box.scrollWidth - 1 ? "end" : "more";
+}
+function scrollHintXSlotWidth(mark, scroller) {
+  const own = getComputedStyle(mark);
+  if (own.display === "none") return 0;
+  const px = (v, what) => {
+    if (v === "normal") return 0;
+    const n = Number.parseFloat(v);
+    if (!Number.isFinite(n)) {
+      throw new Error(
+        `scrollHintXSlotWidth: ${what} is "${v}", not a length in px`
+      );
+    }
+    return n;
+  };
+  const gap = mark.previousElementSibling === null ? 0 : px(getComputedStyle(scroller).columnGap, "the scroller's column-gap");
+  return mark.getBoundingClientRect().width + px(own.marginLeft, "the mark's margin-left") + px(own.marginRight, "the mark's margin-right") + gap;
+}
+function watchScrollHintX(mark, write) {
+  const scroller = mark.parentElement;
+  if (scroller === null) {
+    throw new Error(
+      "watchScrollHintX: the mark has no parent element; it must be the last child of the box that scrolls on x"
+    );
+  }
+  let last;
+  const update = () => {
+    const state = scrollHintXState(
+      scroller,
+      scrollHintXSlotWidth(mark, scroller)
+    );
+    if (state === last) return;
+    last = state;
+    write(state);
+  };
+  const resize = new ResizeObserver(update);
+  const observeChildren = () => {
+    for (const child of Array.from(scroller.children)) resize.observe(child);
+  };
+  resize.observe(scroller);
+  observeChildren();
+  const added = new MutationObserver(() => {
+    observeChildren();
+    update();
+  });
+  added.observe(scroller, { childList: true });
+  scroller.addEventListener("scroll", update, { passive: true });
+  update();
+  return () => {
+    scroller.removeEventListener("scroll", update);
+    resize.disconnect();
+    added.disconnect();
+  };
+}
+
+// src/scroll-hint-mark.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ScrollHintXMark() {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const mark = ref.current;
+    if (mark === null) {
+      throw new Error(
+        "ScrollHintXMark: the effect ran with no mounted mark (ref.current is null)"
+      );
+    }
+    return watchScrollHintX(mark, (state) => {
+      mark.dataset.scrollHintState = state;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-scroll-hint": "x",
+      className: SCROLL_HINT_X_MARK,
+      children: /* @__PURE__ */ jsx2("span", { className: SCROLL_HINT_X_PILL, children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-right", size: "sm" }) })
+    }
+  );
+}
+
+export {
+  ICONS,
+  ICON_SIZES,
+  Icon,
+  SCROLL_HINT_X,
+  SCROLL_HINT_Y,
+  SCROLL_HINT_Y_MARK,
+  ScrollHintXMark
+};

package/dist/chunk-DP5WQAPO.js

@@ -0,0 +1,23 @@
+'use client';
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var merge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: ["display-poster", "display-headline", "display-title", "lede"]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return merge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/{chunk-4YA6BZDJ.js → chunk-ODRGJV46.js}

@@ -1,18 +1,12 @@
 'use client';
+import {
+  cn
+} from "./chunk-DP5WQAPO.js";
 
 // src/markdown-renderer.tsx
 import { memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-
-// src/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/markdown-renderer.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
 var components = {
   // Links open in new tab
@@ -67,6 +61,5 @@ var MarkdownRenderer = memo(
 MarkdownRenderer.displayName = "MarkdownRenderer";
 
 export {
-  cn,
   MarkdownRenderer
 };