@danxbot/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dan Newman
+
+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,126 @@
+# @danxbot/ui
+
+A React design system with motion as a foundation, not a finish pass.
+
+```bash
+npm install @danxbot/ui
+```
+
+```tsx
+import { Button, Chat, ThemeMenu } from "@danxbot/ui";
+import "@danxbot/ui/styles.css";
+```
+
+Requires React 19 and Tailwind CSS 4. MIT licensed.
+
+## What is in it
+
+102 components across forms, overlays, structure, data, layout and chat.
+
+**Forms** — Field, FieldSet, Input, Textarea, Checkbox, Switch, Radio, RadioCard,
+Select, Combobox, MultiCombobox, Slider, NumberInput, OTPInput, FileUpload,
+DatePicker, Toggle, ToggleGroup, Toolbar
+
+**Overlays** — Dialog, AlertDialog, Popover, Tooltip, Toast, Menu, CommandPalette
+
+**Structure** — Card, Tabs, Accordion, Breadcrumb, Pagination, AppShell,
+Separator, ScrollArea, Collapsible, PanelGroup
+
+**Display** — Avatar, Progress, Meter, ProgressRing, Stat, Sparkline, Timeline,
+Tree, EmptyState, Badge, Icon, Spinner, Skeleton, LoadingOverlay
+
+**Data** — DataTable
+
+**Chat** — Chat, Message, MessageScroller, Composer, Markdown, CodeBlock,
+ToolCall, Attachment, ModelSelector, EffortControl, ContextMeter
+
+## The parts worth knowing about
+
+### Motion is a layer, not a decoration
+
+Four spring curves are baked as CSS `linear()` easings. A spring curve encodes
+its damping ratio — its *shape* — and nothing else, so duration stays a free
+parameter and one curve is correct at any speed. There is no JavaScript
+animation runtime; the equivalent costs 35–40 KB to do what these do for free.
+
+Reduced motion **reduces**. The usual `animation-duration: 0.01ms !important`
+sweep is wrong twice over: the spec asks for motion removed, reduced *or
+replaced*, and `!important` makes the decision unoverridable. Instead
+`--motion-scale` halves durations and `--motion-travel` zeroes distances, so
+components inherit the preference without knowing it exists.
+
+### Both themes come from one contract
+
+Colour is a three-tier OKLCH system — primitives, semantic tokens, component
+tokens — and both themes are written against the same semantic names. Dark
+accents are hand-tuned at roughly 20% reduced chroma, because a large saturated
+fill on a dark surface reads as glare rather than emphasis.
+
+### Accessibility is a floor you can opt into
+
+Contrast compliance is a switch (`data-contrast="aa"`), not a permanent state.
+Forcing AA everywhere flattens hierarchy: de-emphasised text stops being
+de-emphasised. The default is the palette as drawn; the AA overlay is one
+attribute away and honours `prefers-contrast: more` on first load.
+
+### Size is a multiplier, not a breakpoint
+
+`data-ui-scale` sets a unitless multiplier over `rem`, which composes with the
+reader's own browser font size instead of overriding it. It moves type, spacing,
+control heights and icon sizes together, with hard floors so a tap target never
+drops below 24px.
+
+### Chat messages are typed parts
+
+A message is a list of parts — text, code, reasoning, tool call, file, or a
+named application component — never a blob of markdown. An assistant turn
+routinely interleaves prose, a tool call and a confirmation button, and each is
+a different rendering problem. Applications register their own components by
+name, so a message can carry working UI:
+
+```tsx
+<Chat
+  messages={messages}
+  components={{
+    approval: (props, ctx) => (
+      <ApprovalCard {...props} onApprove={ctx.app.approve} />
+    ),
+  }}
+  appContext={{ approve }}
+/>
+```
+
+Props are plain data and components are addressed by name, so a transcript stays
+serialisable — a component reference in the message would make it impossible to
+persist or replay.
+
+## Setup
+
+The stylesheet carries the tokens, the base layer and the self-hosted fonts.
+Import it once at your application root:
+
+```tsx
+import "@danxbot/ui/styles.css";
+```
+
+Fonts are self-hosted woff2 subsets rather than CDN-loaded, because a blocked
+CDN renders every design in a system font with no error anywhere.
+
+Preferences are read from `<html>` attributes so plain CSS and portalled content
+both see them:
+
+```tsx
+import { useTheme, useUiScale, useContrast, useMotionPreference } from "@danxbot/ui";
+```
+
+`ThemeMenu` bundles all four into one popover.
+
+## Browser support
+
+Modern evergreen browsers — Chrome, Safari, Firefox and modern mobile. That
+choice is what makes `@property`, `@starting-style`, container queries,
+`field-sizing` and OKLCH available without fallbacks.
+
+## Licence
+
+MIT

package/dist/fonts.css

@@ -0,0 +1,187 @@
+/* GENERATED by scripts/fetch-fonts.mjs — do not edit by hand.
+   Self-hosted so the compiled bundle is self-contained: no CDN dependency, no
+   third-party request, no silent fallback to system fonts. Re-run the script
+   to refresh.
+
+   font-display: swap is preserved from the source CSS — text paints
+   immediately in a fallback and swaps, rather than blocking on the font. */
+
+/* ---- Bricolage Grotesque ---- */
+/* vietnamese */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-0.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-1.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 400 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url(./fonts/bricolage-grotesque-2.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ---- Figtree ---- */
+/* latin-ext */
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-0.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-1.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-2.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url(./fonts/figtree-3.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ---- JetBrains Mono ---- */
+/* cyrillic-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-0.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-1.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-2.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-3.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-4.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-5.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-6.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-7.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-8.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-9.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-10.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-11.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}