@lfrprazeres/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Luiz Fernando Prazeres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# @lfrprazeres/ui
+
+A React design system: shadcn elements, composed components, and a three-tier
+token contract with swappable palettes.
+
+Built for React 19 and Tailwind CSS v4. ESM only.
+
+> **Built for my own projects.** This exists so the things I build share one
+> component layer instead of each rebuilding buttons and a token system. It is
+> not a community project and has no roadmap beyond what I need next.
+>
+> That said, it is MIT licensed and genuinely usable. Install it, fork it, copy
+> the bits you like. Just know that the API moves when my projects need it to,
+> which is why it stays on `0.x`. Pin an exact version if that matters to you.
+
+**[Component docs and live playground](https://lfrprazeres.github.io/ui)** ·
+[Changelog](./CHANGELOG.md)
+
+## Install
+
+```bash
+pnpm add @lfrprazeres/ui
+```
+
+`react`, `react-dom` and `tailwindcss` are peer dependencies.
+
+## Setup
+
+Import the stylesheet once, at your CSS entry point:
+
+```css
+@import "tailwindcss";
+@import "@lfrprazeres/ui/styles.css";
+```
+
+That is the whole setup. You do **not** need a `@source` line pointing into
+`node_modules`: the shipped stylesheet scans its own `dist` for class names.
+
+On Next.js, add the package to `optimizePackageImports`. Importing from the root
+barrel is ergonomic but pulls the whole module graph into the dev server's
+module map, which slows cold start. This fixes it, and does not change the
+production bundle either way:
+
+```ts
+// next.config.ts
+export default {
+  experimental: { optimizePackageImports: ["@lfrprazeres/ui"] },
+};
+```
+
+## Use
+
+```tsx
+import { Button, Card, StatTile } from "@lfrprazeres/ui";
+```
+
+Or from a tier directly:
+
+```tsx
+import { Button } from "@lfrprazeres/ui/elements";
+import { StatTile } from "@lfrprazeres/ui/components";
+```
+
+Both resolve to the same bytes. `Button` measures 9.59 kB either way.
+
+## What ships
+
+**Elements** (16): Avatar, Badge, Button, Card, Checkbox, Dialog, DropdownMenu,
+Input, Label, Popover, Select, Separator, Skeleton, Switch, Textarea, Toaster.
+
+**Components** (7): Chip, LanguageSwitcher, Marquee, MessageBubble, StatTile,
+StreamingDots, ThemeToggle.
+
+## Tiers
+
+| Tier | What it is | Ships |
+| --- | --- | --- |
+| **elements** | Single-purpose. Composes no other exported part, carries no data shape. Taken from the shadcn registry as-is. | yes |
+| **components** | Composed from two or more elements. Owns interaction, still domain-agnostic. | yes |
+| **features** | Owns a typed data prop or a layout region, and knows your domain. | **no, build these in your app** |
+
+The library never ships features. If two projects need the same one, extract the
+reusable mechanism as a component and keep a thin feature on top of it in each.
+
+## Palettes
+
+A palette is a preset that redefines the semantic tier. Components never know
+which one is active, because they only read semantic names.
+
+```html
+<html class="palette-gold dark">
+```
+
+Four ship: `base` (no class, lives at `:root`), `palette-gold`,
+`palette-cyberpunk`, `palette-minimal`. Add `dark` alongside for the dark
+variant of any of them.
+
+A palette may redefine every semantic colour role, plus `--radius`, `--spacing`
+and the three font stacks. Because Tailwind emits utilities as
+`calc(var(--spacing) * n)` and `var(--radius)`, redefining those rescales the
+whole system at runtime with no rebuild.
+
+To write your own, redefine the semantic tier under a class. That is the entire
+theming API.
+
+## Reduced motion
+
+Handled at the token layer, not per component. Under
+`prefers-reduced-motion: reduce` the `--motion-duration-*` tokens collapse to
+zero, so anything reading them inherits the behaviour without opting in. The
+animation is not disabled, because disabling it hides the outcome: the user
+lands on the final state instantly instead.
+
+Two deliberate exceptions, both loops rather than transitions. A loop has no
+final state, so collapsing its duration to zero would be an infinite speed:
+
+- `Marquee` suppresses its animation and becomes a scrollable region.
+- `StreamingDots` swaps the bounce for an opacity pulse, because removing it
+  outright would delete the only "something is happening" cue a sighted user
+  has.
+
+The rule: **collapse durations for transitions, suppress movement for loops.**
+
+## One deviation from upstream shadcn
+
+`Toaster` takes `theme` as a prop. Upstream reads it with `useTheme()` from
+`next-themes`, which would put a Next-only dependency inside a
+framework-agnostic package. If you re-scaffold that file with the shadcn CLI,
+the import comes back and needs re-inverting.
+
+## Scripts
+
+| Command | What it does |
+| --- | --- |
+| `pnpm storybook` | Component docs on :6006 |
+| `pnpm test` | Every story as a browser test, axe violations fail |
+| `pnpm build` | Builds the package with tsdown |
+| `pnpm check:rsc` | Fails if a `"use client"` directive was lost in the build |
+| `pnpm check:package` | publint plus are-the-types-wrong |
+| `pnpm check:size` | size-limit budgets |
+
+## Notes on the build
+
+Built unbundled, preserving module structure. That is load-bearing rather than a
+preference: bundling hoists or strips the `"use client"` directives thirteen
+modules depend on, and React Server Components then break with no error at all.
+`pnpm check:rsc` compares source against the build and fails if any went
+missing.
+
+`verify/` holds a minimal Next App Router consumer that installs the packed
+tarball and proves the contract from outside. See `verify/README.md`.
+
+## Contributing
+
+Mostly for my own future reference, see [CONTRIBUTING.md](./CONTRIBUTING.md).
+Every change that ships needs a changeset, and CI enforces it.
+
+## Licence
+
+MIT. See [LICENSE](./LICENSE).

package/dist/components/chip.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/chip.d.ts
+declare const chipVariants: (props?: ({
+  size?: "default" | "sm" | null | undefined;
+  variant?: "default" | "accent" | "muted" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ChipProps = ComponentProps<"span"> & VariantProps<typeof chipVariants> & {
+  icon?: ReactNode;
+  /** Renders as an anchor when set, keeping the same visual treatment. */
+  href?: string;
+};
+declare function Chip({ className, variant, size, icon, href, children, ...props }: ChipProps): import("react").JSX.Element;
+//#endregion
+export { Chip, ChipProps, chipVariants };
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","names":[],"sources":["../../src/components/chip.tsx"],"mappings":";;;cAIM,eAAY;;;6CAoBjB;KAEW,YAAY,yBACtB,oBAAoB;EAClB,OAAO;;EAEP;;iBAGY,OACd,WACA,SACA,MACA,MACA,MACA,aACG,SACF,4BAAS,IAAA"}

package/dist/components/chip.js

@@ -0,0 +1,49 @@
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chip.tsx
+const chipVariants = cva("inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "px-2.5 py-1",
+			sm: "px-2 py-0.5 text-[11px]"
+		},
+		variant: {
+			accent: "border-transparent bg-accent text-accent-foreground",
+			default: "border-border bg-card text-card-foreground",
+			muted: "border-transparent bg-muted text-muted-foreground",
+			outline: "border-border bg-transparent text-foreground"
+		}
+	}
+});
+function Chip({ className, variant, size, icon, href, children, ...props }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children
+	})] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		className: cn(chipVariants({
+			size,
+			variant
+		}), "hover:bg-accent hover:text-accent-foreground", className),
+		href,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(chipVariants({
+			size,
+			variant
+		}), className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Chip, chipVariants };
+
+//# sourceMappingURL=chip.js.map

package/dist/components/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nconst chipVariants = cva(\n  \"inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"px-2.5 py-1\",\n        sm: \"px-2 py-0.5 text-[11px]\",\n      },\n      variant: {\n        accent: \"border-transparent bg-accent text-accent-foreground\",\n        default: \"border-border bg-card text-card-foreground\",\n        muted: \"border-transparent bg-muted text-muted-foreground\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n    },\n  }\n);\n\nexport type ChipProps = ComponentProps<\"span\"> &\n  VariantProps<typeof chipVariants> & {\n    icon?: ReactNode;\n    /** Renders as an anchor when set, keeping the same visual treatment. */\n    href?: string;\n  };\n\nexport function Chip({\n  className,\n  variant,\n  size,\n  icon,\n  href,\n  children,\n  ...props\n}: ChipProps) {\n  const content = (\n    <>\n      {icon}\n      <span className=\"truncate\">{children}</span>\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        className={cn(\n          chipVariants({ size, variant }),\n          \"hover:bg-accent hover:text-accent-foreground\",\n          className\n        )}\n        href={href}\n        {...(props as ComponentProps<\"a\">)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <span className={cn(chipVariants({ size, variant }), className)} {...props}>\n      {content}\n    </span>\n  );\n}\n\nexport { chipVariants };\n"],"mappings":";;;;AAIA,MAAM,eAAe,IACnB,yIACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,SAAS;GACT,IAAI;EACN;EACA,SAAS;GACP,QAAQ;GACR,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;AACF,CACF;AASA,SAAgB,KAAK,EACnB,WACA,SACA,MACA,MACA,MACA,UACA,GAAG,SACS;CACZ,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,QAAD;EAAM,WAAU;EAAY;CAAe,CAAA,CAC3C,EAAA,CAAA;CAGJ,IAAI,MACF,OACE,oBAAC,KAAD;EACE,WAAW,GACT,aAAa;GAAE;GAAM;EAAQ,CAAC,GAC9B,gDACA,SACF;EACM;EACN,GAAK;EAEJ,UAAA;CACA,CAAA;CAIP,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,aAAa;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAClE,UAAA;CACG,CAAA;AAEV"}

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+import { Chip, ChipProps, chipVariants } from "./chip.js";
+import { LanguageOption, LanguageSwitcher, LanguageSwitcherProps } from "./language-switcher.js";
+import { Marquee, MarqueeProps } from "./marquee.js";
+import { MessageBubble, MessageBubbleProps, MessageRole } from "./message-bubble.js";
+import { StatDirection, StatTile, StatTileProps } from "./stat-tile.js";
+import { StreamingDots, StreamingDotsProps } from "./streaming-dots.js";
+import { ThemeMode, ThemeToggle, ThemeToggleProps } from "./theme-toggle.js";
+export { Chip, ChipProps, LanguageOption, LanguageSwitcher, LanguageSwitcherProps, Marquee, MarqueeProps, MessageBubble, MessageBubbleProps, MessageRole, StatDirection, StatTile, StatTileProps, StreamingDots, StreamingDotsProps, ThemeMode, ThemeToggle, ThemeToggleProps, chipVariants };

package/dist/components/index.js

@@ -0,0 +1,8 @@
+import { Chip, chipVariants } from "./chip.js";
+import { LanguageSwitcher } from "./language-switcher.js";
+import { Marquee } from "./marquee.js";
+import { MessageBubble } from "./message-bubble.js";
+import { StatTile } from "./stat-tile.js";
+import { StreamingDots } from "./streaming-dots.js";
+import { ThemeToggle } from "./theme-toggle.js";
+export { Chip, LanguageSwitcher, Marquee, MessageBubble, StatTile, StreamingDots, ThemeToggle, chipVariants };

package/dist/components/language-switcher.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/components/language-switcher.d.ts
+interface LanguageOption {
+  /** Optional leading adornment, such as a flag emoji. */
+  icon?: ReactNode;
+  label: string;
+  /** Locale code, shown on the trigger. */
+  value: string;
+}
+interface LanguageSwitcherProps {
+  className?: string;
+  /** Accessible name for the trigger. */
+  label?: string;
+  onValueChange: (value: string) => void;
+  options: LanguageOption[];
+  value: string;
+}
+/** Controlled. Wires to next-intl, i18next or anything else from the outside. */
+declare function LanguageSwitcher({ options, value, onValueChange, label, className }: LanguageSwitcherProps): import("react").JSX.Element;
+//#endregion
+export { LanguageOption, LanguageSwitcher, LanguageSwitcherProps };
+//# sourceMappingURL=language-switcher.d.ts.map

package/dist/components/language-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-switcher.d.ts","names":[],"sources":["../../src/components/language-switcher.tsx"],"mappings":";;UAciB;;EAEf,OAAO;EACP;;EAEA;;UAGe;EACf;;EAEA;EACA,gBAAgB;EAChB,SAAS;EACT;;;iBAIc,mBACd,SACA,OACA,eACA,OACA,aACC,wCAAqB,IAAA"}

package/dist/components/language-switcher.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../elements/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../elements/dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GlobeIcon } from "lucide-react";
+//#region src/components/language-switcher.tsx
+/** Controlled. Wires to next-intl, i18next or anything else from the outside. */
+function LanguageSwitcher({ options, value, onValueChange, label = "Language", className }) {
+	const active = options.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			"aria-label": label,
+			className: cn("gap-1.5", className),
+			size: "sm",
+			variant: "ghost",
+			children: [/* @__PURE__ */ jsx(GlobeIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+				className: "font-medium uppercase tracking-wide",
+				children: active?.value ?? value
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "w-44",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			onValueChange,
+			value,
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				value: option.value,
+				children: [option.icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: option.icon
+				}) : null, option.label]
+			}, option.value))
+		})
+	})] });
+}
+//#endregion
+export { LanguageSwitcher };
+
+//# sourceMappingURL=language-switcher.js.map

package/dist/components/language-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-switcher.js","names":[],"sources":["../../src/components/language-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { GlobeIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Button } from \"@/elements/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/elements/dropdown-menu\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface LanguageOption {\n  /** Optional leading adornment, such as a flag emoji. */\n  icon?: ReactNode;\n  label: string;\n  /** Locale code, shown on the trigger. */\n  value: string;\n}\n\nexport interface LanguageSwitcherProps {\n  className?: string;\n  /** Accessible name for the trigger. */\n  label?: string;\n  onValueChange: (value: string) => void;\n  options: LanguageOption[];\n  value: string;\n}\n\n/** Controlled. Wires to next-intl, i18next or anything else from the outside. */\nexport function LanguageSwitcher({\n  options,\n  value,\n  onValueChange,\n  label = \"Language\",\n  className,\n}: LanguageSwitcherProps) {\n  const active = options.find((option) => option.value === value);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label={label}\n          className={cn(\"gap-1.5\", className)}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          <GlobeIcon aria-hidden=\"true\" />\n          <span className=\"font-medium uppercase tracking-wide\">\n            {active?.value ?? value}\n          </span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-44\">\n        <DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>\n          {options.map((option) => (\n            <DropdownMenuRadioItem key={option.value} value={option.value}>\n              {option.icon ? (\n                <span aria-hidden=\"true\">{option.icon}</span>\n              ) : null}\n              {option.label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;;AAgCA,SAAgB,iBAAiB,EAC/B,SACA,OACA,eACA,QAAQ,YACR,aACwB;CACxB,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK;CAE9D,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;EACnB,UAAA,qBAAC,QAAD;GACE,cAAY;GACZ,WAAW,GAAG,WAAW,SAAS;GAClC,MAAK;GACL,SAAQ;GAJV,UAAA,CAME,oBAAC,WAAD,EAAW,eAAY,OAAQ,CAAA,GAC/B,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,QAAQ,SAAS;GACd,CAAA,CACA;;CACW,CAAA,GACrB,oBAAC,qBAAD;EAAqB,OAAM;EAAM,WAAU;EACzC,UAAA,oBAAC,wBAAD;GAAuC;GAAsB;GAC1D,UAAA,QAAQ,KAAK,WACZ,qBAAC,uBAAD;IAA0C,OAAO,OAAO;IAAxD,UAAA,CACG,OAAO,OACN,oBAAC,QAAD;KAAM,eAAY;KAAQ,UAAA,OAAO;IAAW,CAAA,IAC1C,MACH,OAAO,KACa;GALK,GAAA,OAAO,KAKZ,CACxB;EACqB,CAAA;CACL,CAAA,CACT,EAAA,CAAA;AAElB"}

package/dist/components/marquee.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+//#region src/components/marquee.d.ts
+interface MarqueeProps {
+  children: ReactNode;
+  className?: string;
+  /** Seconds for one full pass. Larger is slower. */
+  duration?: number;
+  /** Fade the leading and trailing edges into the background. */
+  fade?: boolean;
+  /** Scroll direction. */
+  reverse?: boolean;
+}
+/**
+ * A continuously scrolling strip.
+ *
+ * Under reduced motion this suppresses the animation and becomes a scrollable
+ * region, rather than using the duration tokens. A loop has no final state to
+ * land on, so collapsing its duration to zero would be an infinite speed.
+ */
+declare function Marquee({ children, duration, reverse, fade, className }: MarqueeProps): import("react").JSX.Element;
+//#endregion
+export { Marquee, MarqueeProps };
+//# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","names":[],"sources":["../../src/components/marquee.tsx"],"mappings":";;UAMiB;EACf,UAAU;EACV;;EAEA;;EAEA;;EAEA;;;;;;;;;iBAac,UACd,UACA,UACA,SACA,MACA,aACC,+BAAY,IAAA"}

package/dist/components/marquee.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+//#region src/components/marquee.tsx
+const FADE_MASK = "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]";
+/**
+* A continuously scrolling strip.
+*
+* Under reduced motion this suppresses the animation and becomes a scrollable
+* region, rather than using the duration tokens. A loop has no final state to
+* land on, so collapsing its duration to zero would be an infinite speed.
+*/
+function Marquee({ children, duration = 30, reverse = false, fade = false, className }) {
+	const reduced = useReducedMotion();
+	const track = /* @__PURE__ */ jsx("div", {
+		"aria-hidden": void 0,
+		className: "flex shrink-0 items-center gap-6 pr-6",
+		children
+	});
+	if (reduced) return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-x-auto", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-max items-center",
+			children: track
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-hidden", fade && FADE_MASK, className),
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			animate: { x: reverse ? ["-50%", "0%"] : ["0%", "-50%"] },
+			className: "flex w-max items-center",
+			transition: {
+				duration,
+				ease: "linear",
+				repeat: Number.POSITIVE_INFINITY
+			},
+			children: [track, /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "flex shrink-0 items-center gap-6 pr-6",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { Marquee };
+
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":[],"sources":["../../src/components/marquee.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface MarqueeProps {\n  children: ReactNode;\n  className?: string;\n  /** Seconds for one full pass. Larger is slower. */\n  duration?: number;\n  /** Fade the leading and trailing edges into the background. */\n  fade?: boolean;\n  /** Scroll direction. */\n  reverse?: boolean;\n}\n\nconst FADE_MASK =\n  \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]\";\n\n/**\n * A continuously scrolling strip.\n *\n * Under reduced motion this suppresses the animation and becomes a scrollable\n * region, rather than using the duration tokens. A loop has no final state to\n * land on, so collapsing its duration to zero would be an infinite speed.\n */\nexport function Marquee({\n  children,\n  duration = 30,\n  reverse = false,\n  fade = false,\n  className,\n}: MarqueeProps) {\n  const reduced = useReducedMotion();\n\n  const track = (\n    <div\n      aria-hidden={undefined}\n      className=\"flex shrink-0 items-center gap-6 pr-6\"\n    >\n      {children}\n    </div>\n  );\n\n  if (reduced) {\n    return (\n      <div className={cn(\"overflow-x-auto\", className)}>\n        <div className=\"flex w-max items-center\">{track}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"overflow-hidden\", fade && FADE_MASK, className)}>\n      <motion.div\n        animate={{ x: reverse ? [\"-50%\", \"0%\"] : [\"0%\", \"-50%\"] }}\n        className=\"flex w-max items-center\"\n        transition={{\n          duration,\n          ease: \"linear\",\n          repeat: Number.POSITIVE_INFINITY,\n        }}\n      >\n        {track}\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center gap-6 pr-6\"\n        >\n          {children}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,MAAM,YACJ;;;;;;;;AASF,SAAgB,QAAQ,EACtB,UACA,WAAW,IACX,UAAU,OACV,OAAO,OACP,aACe;CACf,MAAM,UAAU,iBAAiB;CAEjC,MAAM,QACJ,oBAAC,OAAD;EACE,eAAa,KAAA;EACb,WAAU;EAET;CACE,CAAA;CAGP,IAAI,SACF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAC7C,UAAA,oBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAW,CAAA;CAClD,CAAA;CAIT,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,QAAQ,WAAW,SAAS;EAChE,UAAA,qBAAC,OAAO,KAAR;GACE,SAAS,EAAE,GAAG,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,MAAM,EAAE;GACxD,WAAU;GACV,YAAY;IACV;IACA,MAAM;IACN,QAAQ,OAAO;GACjB;GAPF,UAAA,CASG,OACD,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IAET;GACE,CAAA,CACK;;CACT,CAAA;AAET"}

package/dist/components/message-bubble.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+//#region src/components/message-bubble.d.ts
+type MessageRole = "user" | "assistant" | "tool";
+interface MessageBubbleProps {
+  children: ReactNode;
+  className?: string;
+  /** Rendered below the body, typically a row of Chips. */
+  footer?: ReactNode;
+  /** Who sent it. Maps directly from an AI SDK message role. */
+  from: MessageRole;
+}
+/**
+ * A chat message.
+ *
+ * Animates in on mount, and out when removed, but the exit only runs if the
+ * consumer wraps the list in `AnimatePresence` and gives each bubble a stable
+ * `key`. Without that the element unmounts immediately and there is nothing
+ * left to animate.
+ *
+ * Under reduced motion the movement is dropped and only the fade remains,
+ * rather than removing the animation outright. The preference targets
+ * vestibular triggers, which means translation and scale, so a cross-fade stays
+ * within it while still marking that a new message arrived.
+ */
+declare function MessageBubble({ from, children, footer, className }: MessageBubbleProps): import("react").JSX.Element;
+//#endregion
+export { MessageBubble, MessageBubbleProps, MessageRole };
+//# sourceMappingURL=message-bubble.d.ts.map

package/dist/components/message-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bubble.d.ts","names":[],"sources":["../../src/components/message-bubble.tsx"],"mappings":";;KAMY;UAuBK;EACf,UAAU;EACV;;EAEA,SAAS;;EAET,MAAM;;;;;;;;;;;;;;;iBAgBQ,gBACd,MACA,UACA,QACA,aACC,qCAAkB,IAAA"}

package/dist/components/message-bubble.js

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+//#region src/components/message-bubble.tsx
+const ROLE = {
+	assistant: {
+		align: "justify-start",
+		offset: -8,
+		surface: "border bg-card text-card-foreground"
+	},
+	tool: {
+		align: "justify-start",
+		offset: -8,
+		surface: "border border-dashed bg-muted text-muted-foreground"
+	},
+	user: {
+		align: "justify-end",
+		offset: 8,
+		surface: "bg-primary text-primary-foreground"
+	}
+};
+/**
+* A chat message.
+*
+* Animates in on mount, and out when removed, but the exit only runs if the
+* consumer wraps the list in `AnimatePresence` and gives each bubble a stable
+* `key`. Without that the element unmounts immediately and there is nothing
+* left to animate.
+*
+* Under reduced motion the movement is dropped and only the fade remains,
+* rather than removing the animation outright. The preference targets
+* vestibular triggers, which means translation and scale, so a cross-fade stays
+* within it while still marking that a new message arrived.
+*/
+function MessageBubble({ from, children, footer, className }) {
+	const reduced = useReducedMotion();
+	const { align, offset, surface } = ROLE[from];
+	return /* @__PURE__ */ jsx(motion.div, {
+		animate: {
+			opacity: 1,
+			scale: 1,
+			x: 0,
+			y: 0
+		},
+		className: cn("flex w-full", align, className),
+		exit: reduced ? { opacity: 0 } : {
+			opacity: 0,
+			scale: .97,
+			y: -4
+		},
+		initial: reduced ? { opacity: 0 } : {
+			opacity: 0,
+			scale: .98,
+			x: offset,
+			y: 6
+		},
+		transition: reduced ? {
+			duration: .15,
+			ease: "linear"
+		} : {
+			damping: 26,
+			stiffness: 320,
+			type: "spring"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("max-w-[80%] rounded-lg px-4 py-3 text-sm leading-relaxed", surface),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "whitespace-pre-wrap",
+				children
+			}), footer ? /* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex flex-wrap gap-1",
+				children: footer
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { MessageBubble };
+
+//# sourceMappingURL=message-bubble.js.map

package/dist/components/message-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bubble.js","names":[],"sources":["../../src/components/message-bubble.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type MessageRole = \"user\" | \"assistant\" | \"tool\";\n\nconst ROLE = {\n  assistant: {\n    align: \"justify-start\",\n    offset: -8,\n    surface: \"border bg-card text-card-foreground\",\n  },\n  tool: {\n    align: \"justify-start\",\n    offset: -8,\n    surface: \"border border-dashed bg-muted text-muted-foreground\",\n  },\n  user: {\n    align: \"justify-end\",\n    offset: 8,\n    surface: \"bg-primary text-primary-foreground\",\n  },\n} satisfies Record<\n  MessageRole,\n  { align: string; offset: number; surface: string }\n>;\n\nexport interface MessageBubbleProps {\n  children: ReactNode;\n  className?: string;\n  /** Rendered below the body, typically a row of Chips. */\n  footer?: ReactNode;\n  /** Who sent it. Maps directly from an AI SDK message role. */\n  from: MessageRole;\n}\n\n/**\n * A chat message.\n *\n * Animates in on mount, and out when removed, but the exit only runs if the\n * consumer wraps the list in `AnimatePresence` and gives each bubble a stable\n * `key`. Without that the element unmounts immediately and there is nothing\n * left to animate.\n *\n * Under reduced motion the movement is dropped and only the fade remains,\n * rather than removing the animation outright. The preference targets\n * vestibular triggers, which means translation and scale, so a cross-fade stays\n * within it while still marking that a new message arrived.\n */\nexport function MessageBubble({\n  from,\n  children,\n  footer,\n  className,\n}: MessageBubbleProps) {\n  const reduced = useReducedMotion();\n  const { align, offset, surface } = ROLE[from];\n\n  return (\n    <motion.div\n      animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}\n      className={cn(\"flex w-full\", align, className)}\n      exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.97, y: -4 }}\n      initial={\n        reduced ? { opacity: 0 } : { opacity: 0, scale: 0.98, x: offset, y: 6 }\n      }\n      transition={\n        reduced\n          ? { duration: 0.15, ease: \"linear\" }\n          : { damping: 26, stiffness: 320, type: \"spring\" }\n      }\n    >\n      <div\n        className={cn(\n          \"max-w-[80%] rounded-lg px-4 py-3 text-sm leading-relaxed\",\n          surface\n        )}\n      >\n        <div className=\"whitespace-pre-wrap\">{children}</div>\n        {footer ? (\n          <div className=\"mt-2 flex flex-wrap gap-1\">{footer}</div>\n        ) : null}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAQA,MAAM,OAAO;CACX,WAAW;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,SAAS;CACX;AACF;;;;;;;;;;;;;;AA2BA,SAAgB,cAAc,EAC5B,MACA,UACA,QACA,aACqB;CACrB,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,QAAQ,YAAY,KAAK;CAExC,OACE,oBAAC,OAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;GAAG,GAAG;EAAE;EAC5C,WAAW,GAAG,eAAe,OAAO,SAAS;EAC7C,MAAM,UAAU,EAAE,SAAS,EAAE,IAAI;GAAE,SAAS;GAAG,OAAO;GAAM,GAAG;EAAG;EAClE,SACE,UAAU,EAAE,SAAS,EAAE,IAAI;GAAE,SAAS;GAAG,OAAO;GAAM,GAAG;GAAQ,GAAG;EAAE;EAExE,YACE,UACI;GAAE,UAAU;GAAM,MAAM;EAAS,IACjC;GAAE,SAAS;GAAI,WAAW;GAAK,MAAM;EAAS;EAGpD,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,4DACA,OACF;GAJF,UAAA,CAME,oBAAC,OAAD;IAAK,WAAU;IAAuB;GAAc,CAAA,GACnD,SACC,oBAAC,OAAD;IAAK,WAAU;IAA6B,UAAA;GAAY,CAAA,IACtD,IACD;;CACK,CAAA;AAEhB"}

package/dist/components/stat-tile.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/components/stat-tile.d.ts
+type StatDirection = "up" | "down" | "flat";
+interface StatTileProps {
+  caption?: string;
+  className?: string;
+  /** Optional change indicator. Colour comes from the positive/negative tokens. */
+  delta?: {
+    direction: StatDirection;
+    label: string;
+  };
+  label: string;
+  value: ReactNode;
+}
+declare function StatTile({ label, value, delta, caption, className }: StatTileProps): import("react").JSX.Element;
+//#endregion
+export { StatDirection, StatTile, StatTileProps };
+//# sourceMappingURL=stat-tile.d.ts.map

package/dist/components/stat-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-tile.d.ts","names":[],"sources":["../../src/components/stat-tile.tsx"],"mappings":";;KAKY;UAWK;EACf;EACA;;EAEA;IAAU,WAAW;IAAe;;EACpC;EACA,OAAO;;iBAGO,WACd,OACA,OACA,OACA,SACA,aACC,gCAAa,IAAA"}

package/dist/components/stat-tile.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+import { Card, CardContent } from "../elements/card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "lucide-react";
+//#region src/components/stat-tile.tsx
+const DIRECTION = {
+	down: {
+		className: "text-negative",
+		icon: ArrowDownIcon
+	},
+	flat: {
+		className: "text-muted-foreground",
+		icon: ArrowRightIcon
+	},
+	up: {
+		className: "text-positive",
+		icon: ArrowUpIcon
+	}
+};
+function StatTile({ label, value, delta, caption, className }) {
+	const direction = delta ? DIRECTION[delta.direction] : null;
+	const DeltaIcon = direction?.icon;
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("gap-0 py-4", className),
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "px-4",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "font-medium text-muted-foreground text-xs uppercase tracking-wide",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-1 font-mono font-semibold text-2xl text-foreground tabular-nums",
+					children: value
+				}),
+				delta && direction && DeltaIcon ? /* @__PURE__ */ jsxs("div", {
+					className: cn("mt-1 flex items-center gap-1 font-medium text-xs tabular-nums", direction.className),
+					children: [/* @__PURE__ */ jsx(DeltaIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					}), delta.label]
+				}) : null,
+				caption ? /* @__PURE__ */ jsx("div", {
+					className: "mt-1 text-muted-foreground text-xs",
+					children: caption
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { StatTile };
+
+//# sourceMappingURL=stat-tile.js.map

package/dist/components/stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-tile.js","names":[],"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Card, CardContent } from \"@/elements/card\";\nimport { cn } from \"@/lib/cn\";\n\nexport type StatDirection = \"up\" | \"down\" | \"flat\";\n\nconst DIRECTION = {\n  down: { className: \"text-negative\", icon: ArrowDownIcon },\n  flat: { className: \"text-muted-foreground\", icon: ArrowRightIcon },\n  up: { className: \"text-positive\", icon: ArrowUpIcon },\n} satisfies Record<\n  StatDirection,\n  { className: string; icon: typeof ArrowUpIcon }\n>;\n\nexport interface StatTileProps {\n  caption?: string;\n  className?: string;\n  /** Optional change indicator. Colour comes from the positive/negative tokens. */\n  delta?: { direction: StatDirection; label: string };\n  label: string;\n  value: ReactNode;\n}\n\nexport function StatTile({\n  label,\n  value,\n  delta,\n  caption,\n  className,\n}: StatTileProps) {\n  const direction = delta ? DIRECTION[delta.direction] : null;\n  const DeltaIcon = direction?.icon;\n\n  return (\n    <Card className={cn(\"gap-0 py-4\", className)}>\n      <CardContent className=\"px-4\">\n        <div className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n          {label}\n        </div>\n        <div className=\"mt-1 font-mono font-semibold text-2xl text-foreground tabular-nums\">\n          {value}\n        </div>\n        {delta && direction && DeltaIcon ? (\n          <div\n            className={cn(\n              \"mt-1 flex items-center gap-1 font-medium text-xs tabular-nums\",\n              direction.className\n            )}\n          >\n            <DeltaIcon aria-hidden=\"true\" className=\"size-3\" />\n            {delta.label}\n          </div>\n        ) : null}\n        {caption ? (\n          <div className=\"mt-1 text-muted-foreground text-xs\">{caption}</div>\n        ) : null}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;AAOA,MAAM,YAAY;CAChB,MAAM;EAAE,WAAW;EAAiB,MAAM;CAAc;CACxD,MAAM;EAAE,WAAW;EAAyB,MAAM;CAAe;CACjE,IAAI;EAAE,WAAW;EAAiB,MAAM;CAAY;AACtD;AAcA,SAAgB,SAAS,EACvB,OACA,OACA,OACA,SACA,aACgB;CAChB,MAAM,YAAY,QAAQ,UAAU,MAAM,aAAa;CACvD,MAAM,YAAY,WAAW;CAE7B,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,cAAc,SAAS;EACzC,UAAA,qBAAC,aAAD;GAAa,WAAU;GAAvB,UAAA;IACE,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;IACL,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;IACJ,SAAS,aAAa,YACrB,qBAAC,OAAD;KACE,WAAW,GACT,iEACA,UAAU,SACZ;KAJF,UAAA,CAME,oBAAC,WAAD;MAAW,eAAY;MAAO,WAAU;KAAU,CAAA,GACjD,MAAM,KACJ;IACH,CAAA,IAAA;IACH,UACC,oBAAC,OAAD;KAAK,WAAU;KAAsC,UAAA;IAAa,CAAA,IAChE;GACO;;CACT,CAAA;AAEV"}