@misoto22/kioku-ui 0.0.0

package/dist/navigation/LinkProvider.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const linkDoc = {
+  name: 'Link',
+  description: 'Renders a native anchor or delegates navigation to the nearest LinkProvider.',
+  props: [{
+    name: 'href',
+    description: 'Sets the navigation destination.'
+  }],
+  inheritedProps: ['AnchorHTMLAttributes<HTMLAnchorElement>'],
+  example: '<Link href="/records">Records</Link>',
+  storyId: 'core-link--default'
+};
+export const linkProviderDoc = {
+  name: 'LinkProvider',
+  description: 'Supplies an optional host-router renderer to descendant Link components.',
+  props: [{
+    name: 'children',
+    description: 'Supplies links that share the host navigation adapter.',
+    required: true
+  }, {
+    name: 'renderLink',
+    description: 'Renders links through the host application router.'
+  }],
+  inheritedProps: ['No inherited DOM attributes'],
+  example: '<LinkProvider renderLink={renderLink}><Link href="/records">Records</Link></LinkProvider>',
+  storyId: 'core-link-provider--default'
+};

package/dist/navigation/LinkProvider.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LinkContext = createContext(undefined);
+export function LinkProvider({
+  children,
+  renderLink
+}) {
+  return /*#__PURE__*/_jsx(LinkContext, {
+    value: renderLink,
+    children: children
+  });
+}
+export function Link(props) {
+  const renderLink = useContext(LinkContext);
+  if (renderLink) {
+    return renderLink(props);
+  }
+  return /*#__PURE__*/_jsx("a", {
+    ...props
+  });
+}

package/dist/navigation/index.d.ts

@@ -0,0 +1 @@
+export { Link, LinkProvider, type LinkProps, type LinkProviderProps, type LinkRenderer, } from './LinkProvider.js';

package/dist/navigation/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Link, LinkProvider } from './LinkProvider.js';

package/dist/styles/global.stylex.d.ts

@@ -0,0 +1,20 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const globalStyles: Readonly<{
+    readonly document: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontFeatureSettings: stylex.StyleXClassNameFor<"fontFeatureSettings", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly focusRing: Readonly<{
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineOffset: stylex.StyleXVar<string>;
+            readonly outlineStyle: stylex.StyleXVar<string>;
+            readonly outlineWidth: stylex.StyleXVar<string>;
+        }>;
+    }>;
+}>;

package/dist/styles/global.stylex.js

@@ -0,0 +1,22 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "./stylex.css";
+export const globalStyles = {
+  document: {
+    kWkggS: "x1r2uulk",
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "xj0sio9",
+    kV0H8L: "xkcvkkb",
+    kGuDYH: "x1ti3rys",
+    k63SB2: "x1jcbhmk",
+    kLWn49: "x1ezks3f",
+    $$css: true
+  },
+  focusRing: {
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  }
+};

package/dist/styles/index.css

@@ -0,0 +1,14 @@
+/* Lowest to highest priority: browser normalization, StyleX rules, global accessibility. */
+@layer kioku-ui.reset, kioku-ui.stylex, kioku-ui.global;
+
+@import './reset.css' layer(kioku-ui.reset);
+@import './stylex.css' layer(kioku-ui.stylex);
+
+@layer kioku-ui.global {
+  :focus-visible {
+    outline-color: var(--kioku-ui-color-focus);
+    outline-offset: var(--kioku-ui-focus-offset);
+    outline-style: var(--kioku-ui-border-style);
+    outline-width: var(--kioku-ui-focus-width);
+  }
+}

package/dist/styles/reset.css

@@ -0,0 +1,35 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  font-family: inherit;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/styles/stylex.css

@@ -0,0 +1,212 @@
+@keyframes x1vfr86i-B{50%{background-color:var(--xu8qooe);}}
+@keyframes x1fy8ia8-B{to{transform:rotate(360deg);}}
+:root, .xrmadwz{--x1cq72ri:var(--kioku-ui-color-canvas);--xu8qooe:var(--kioku-ui-color-surface);--x14rudx0:var(--kioku-ui-color-surface-raised);--x194ig0k:var(--kioku-ui-color-surface-muted);--xfrcqq4:var(--kioku-ui-color-text);--x1de802z:var(--kioku-ui-color-text-secondary);--x1f22vz5:var(--kioku-ui-color-text-muted);--x1vmxqsc:var(--kioku-ui-color-text-on-accent);--x1bh700q:var(--kioku-ui-color-accent);--xa1h56u:var(--kioku-ui-color-accent-hover);--x3l7v5j:var(--kioku-ui-color-accent-active);--x1cxqvb6:var(--kioku-ui-color-overlay-hover);--x3mkrpc:var(--kioku-ui-color-overlay-active);--xfp4pro:var(--kioku-ui-color-disabled-surface);--x1cuz3ib:var(--kioku-ui-color-disabled-text);--x1doqpnu:var(--kioku-ui-color-focus);--xwf0as5:var(--kioku-ui-border-default);--x53p1qr:var(--kioku-ui-border-strong);--x113cbwm:var(--kioku-ui-border-interactive);--xfiqpwe:var(--kioku-ui-border-disabled);--xft28wq:var(--kioku-ui-border-width);--xeq3ive:var(--kioku-ui-border-style);--x1qb8v80:var(--kioku-ui-status-info-surface);--xm1gjpn:var(--kioku-ui-status-info-text);--xfs9e5l:var(--kioku-ui-status-success-surface);--xaqiz8e:var(--kioku-ui-status-success-text);--x10bscj6:var(--kioku-ui-status-warning-surface);--x18s4tcb:var(--kioku-ui-status-warning-text);--x9bkl3k:var(--kioku-ui-status-danger-surface);--xjxbi6p:var(--kioku-ui-status-danger-text);--xpsq03c:var(--kioku-ui-focus-width);--x1jr7oj0:var(--kioku-ui-focus-offset);--x1sq5zos:var(--kioku-ui-typography-font-family-body);--x1rfpocb:var(--kioku-ui-typography-font-family-heading);--xbiefh2:var(--kioku-ui-typography-font-family-display);--xxh3pa3:var(--kioku-ui-typography-font-family-mono);--x170l7ej:var(--kioku-ui-typography-font-feature-settings);--x1wkgbgz:var(--kioku-ui-typography-font-size-xs);--x1pipkt8:var(--kioku-ui-typography-font-size-sm);--xdc39sg:var(--kioku-ui-typography-font-size-md);--xkv0k7x:var(--kioku-ui-typography-font-size-lg);--x1wok735:var(--kioku-ui-typography-font-size-xl);--x1kkm6dc:var(--kioku-ui-typography-font-size2xl);--xtz9r7k:var(--kioku-ui-typography-font-weight-regular);--xuivm6y:var(--kioku-ui-typography-font-weight-medium);--x49sa2c:var(--kioku-ui-typography-font-weight-strong);--x13wxxvu:var(--kioku-ui-typography-line-height-body);--x11tbmtr:var(--kioku-ui-typography-line-height-heading);--xdjikt8:var(--kioku-ui-spacing-xs);--x5vtqbe:var(--kioku-ui-spacing-sm);--xpochg2:var(--kioku-ui-spacing-md);--xkgi81h:var(--kioku-ui-spacing-lg);--x3fz2am:var(--kioku-ui-spacing-xl);--x1xp2mai:var(--kioku-ui-spacing-2xl);--x1l7xjh:var(--kioku-ui-radius-inner);--x1g2gpfl:var(--kioku-ui-radius-element);--xucgv7m:var(--kioku-ui-radius-container);--xhhn8oy:var(--kioku-ui-radius-page);--xhr22cf:var(--kioku-ui-radius-full);--x8vzgg0:var(--kioku-ui-size-control-sm);--x2kaybk:var(--kioku-ui-size-control-md);--xtcwerp:var(--kioku-ui-size-control-lg);--x690rjz:var(--kioku-ui-size-hit-target);--xw7f8gl:var(--kioku-ui-elevation-low);--x1036efz:var(--kioku-ui-elevation-medium);--x1loblyq:var(--kioku-ui-elevation-high);--xp593nr:var(--kioku-ui-texture-grain);--x1hxkyqf:var(--kioku-ui-motion-duration-fast);--x10so70s:var(--kioku-ui-motion-duration-moderate);--x1db3u3v:var(--kioku-ui-motion-duration-slow);--x1sojct7:var(--kioku-ui-motion-easing-standard);--x149jslo:var(--kioku-ui-motion-easing-emphasized);}
+.xkdpibf:not(#\#){margin:-1px}
+.x1ghz6dp:not(#\#){margin:0}
+.x1wib74s:not(#\#){padding:var(--x1xp2mai)}
+.x167l562:not(#\#){padding:var(--x3fz2am)}
+.x1tkv3ku:not(#\#){padding:var(--xdjikt8)}
+.x1cfciu7:not(#\#){padding:var(--xkgi81h)}
+.x14rluyd:not(#\#){padding:var(--xpochg2)}
+.x9r1u3d:not(#\#):not(#\#){border-color:transparent}
+.xkfpxyo:not(#\#):not(#\#){border-color:var(--x18s4tcb)}
+.x2nywlj:not(#\#):not(#\#){border-color:var(--x194ig0k)}
+.x10ghty7:not(#\#):not(#\#){border-color:var(--x1bh700q)}
+.x1wxkff4:not(#\#):not(#\#){border-color:var(--x53p1qr)}
+.x86rt86:not(#\#):not(#\#){border-color:var(--xaqiz8e)}
+.x1lnk2a9:not(#\#):not(#\#){border-color:var(--xfiqpwe)}
+.xcf5wgx:not(#\#):not(#\#){border-color:var(--xjxbi6p)}
+.x124ze02:not(#\#):not(#\#){border-color:var(--xm1gjpn)}
+.xilcjya:not(#\#):not(#\#){border-color:var(--xwf0as5)}
+.x8kq9my:not(#\#):not(#\#){border-radius:var(--x1g2gpfl)}
+.x1l6hjkl:not(#\#):not(#\#){border-radius:var(--x1l7xjh)}
+.xnpwncj:not(#\#):not(#\#){border-radius:var(--xhr22cf)}
+.x7xrhi9:not(#\#):not(#\#){border-radius:var(--xucgv7m)}
+.xng3xce:not(#\#):not(#\#){border-style:none}
+.x1jnjmdy:not(#\#):not(#\#){border-style:var(--xeq3ive)}
+.xpxnlqs:not(#\#):not(#\#){border-width:var(--xft28wq)}
+.x98rzlu:not(#\#):not(#\#){flex:1}
+.xl3vxp:not(#\#):not(#\#){gap:var(--x1xp2mai)}
+.x1ws3dqe:not(#\#):not(#\#){gap:var(--x3fz2am)}
+.x1ap6kct:not(#\#):not(#\#){gap:var(--x5vtqbe)}
+.x1iwn5ga:not(#\#):not(#\#){gap:var(--xdjikt8)}
+.x4nws80:not(#\#):not(#\#){gap:var(--xkgi81h)}
+.xtl099x:not(#\#):not(#\#){gap:var(--xpochg2)}
+.x1suer1w:not(#\#):not(#\#){margin-inline:calc(-1 * var(--x3fz2am))}
+.xb3r6kr:not(#\#):not(#\#){overflow:hidden}
+.x3x1fh3:not(#\#):not(#\#){padding-block:var(--x1xp2mai)}
+.x18wayz0:not(#\#):not(#\#){padding-block:var(--x3fz2am)}
+.xoeao9w:not(#\#):not(#\#){padding-block:var(--x5vtqbe)}
+.x10y07nz:not(#\#):not(#\#){padding-block:var(--xdjikt8)}
+.x17uk85o:not(#\#):not(#\#){padding-block:var(--xkgi81h)}
+.x1lr58ck:not(#\#):not(#\#){padding-block:var(--xpochg2)}
+.xnjsko4:not(#\#):not(#\#){padding-inline:0}
+.x92ksv2:not(#\#):not(#\#){padding-inline:var(--x3fz2am)}
+.x1qtbwip:not(#\#):not(#\#){padding-inline:var(--x5vtqbe)}
+.xov5yc9:not(#\#):not(#\#){padding-inline:var(--xdjikt8)}
+.x1q83fih:not(#\#):not(#\#){padding-inline:var(--xkgi81h)}
+.x1wkw8jr:not(#\#):not(#\#){padding-inline:var(--xpochg2)}
+.x1be0cy8:hover:not(:disabled):not(:active):not(#\#):not(#\#){border-color:var(--x113cbwm)}
+.x1u44if6:active:not(:disabled):not(#\#):not(#\#){border-color:var(--x113cbwm)}
+.xn50xp2:focus-visible:not(#\#):not(#\#){border-color:var(--x113cbwm)}
+.xyo1xaz:hover:not(:disabled):not(:read-only):not(:focus-visible):not(#\#):not(#\#){border-color:var(--x113cbwm)}
+.x6v1che:active:not(:disabled):not(#\#):not(#\#){border-color:var(--x3l7v5j)}
+.xnhf8v:active:not(:disabled):not(:read-only):not(:focus-visible):not(#\#):not(#\#){border-color:var(--x3l7v5j)}
+.xx21tl2:hover:not(:disabled):not(:active):not(#\#):not(#\#){border-color:var(--xa1h56u)}
+.x1r1toob:hover:not(:disabled):not(:read-only):not(:focus-visible):not(#\#):not(#\#){border-color:var(--xjxbi6p)}
+.x1v4z90s:focus-visible:not(#\#):not(#\#){border-color:var(--xjxbi6p)}
+.xgozkua:active:not(:disabled):not(:read-only):not(:focus-visible):not(#\#):not(#\#){border-color:var(--xjxbi6p)}
+.x1oulntk:disabled:not(#\#):not(#\#){border-color:var(--xfiqpwe)}
+.x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
+.x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
+.xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
+.x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
+.x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
+.xpz12be:not(#\#):not(#\#):not(#\#){animation-direction:alternate}
+.xslpo9u:not(#\#):not(#\#):not(#\#){animation-duration:var(--x1db3u3v)}
+.xa4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
+.xpedhrg:not(#\#):not(#\#):not(#\#){animation-name:x1fy8ia8-B}
+.x125lowv:not(#\#):not(#\#):not(#\#){animation-name:x1vfr86i-B}
+.xsus3lq:not(#\#):not(#\#):not(#\#){animation-timing-function:var(--x1sojct7)}
+.xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
+.xqpqlc7:not(#\#):not(#\#):not(#\#){background-color:var(--x10bscj6)}
+.x40o0ze:not(#\#):not(#\#):not(#\#){background-color:var(--x14rudx0)}
+.xe2mao8:not(#\#):not(#\#):not(#\#){background-color:var(--x18s4tcb)}
+.xavu78a:not(#\#):not(#\#):not(#\#){background-color:var(--x194ig0k)}
+.x1j40q36:not(#\#):not(#\#):not(#\#){background-color:var(--x1bh700q)}
+.x1r2uulk:not(#\#):not(#\#):not(#\#){background-color:var(--x1cq72ri)}
+.xsq02lv:not(#\#):not(#\#):not(#\#){background-color:var(--x1cuz3ib)}
+.x1760qql:not(#\#):not(#\#):not(#\#){background-color:var(--x1qb8v80)}
+.x12uiudv:not(#\#):not(#\#):not(#\#){background-color:var(--x9bkl3k)}
+.x1sm82us:not(#\#):not(#\#):not(#\#){background-color:var(--xaqiz8e)}
+.x19blmh3:not(#\#):not(#\#):not(#\#){background-color:var(--xfp4pro)}
+.xjdu3ya:not(#\#):not(#\#):not(#\#){background-color:var(--xfs9e5l)}
+.xpqgouk:not(#\#):not(#\#):not(#\#){background-color:var(--xjxbi6p)}
+.x18i8t7:not(#\#):not(#\#):not(#\#){background-color:var(--xm1gjpn)}
+.x1ixvsy6:not(#\#):not(#\#):not(#\#){background-color:var(--xu8qooe)}
+.x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
+.x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
+.x165nt33:not(#\#):not(#\#):not(#\#){box-shadow:var(--x1036efz)}
+.x1elh21b:not(#\#):not(#\#):not(#\#){box-shadow:var(--xw7f8gl)}
+.x9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
+.x1hyvwdk:not(#\#):not(#\#):not(#\#){clip-path:inset(50%)}
+.xeh89do:not(#\#):not(#\#):not(#\#){clip:rect(0 0 0 0)}
+.x6rqny5:not(#\#):not(#\#):not(#\#){color:var(--x18s4tcb)}
+.x17y7oyd:not(#\#):not(#\#):not(#\#){color:var(--x1de802z)}
+.x1mgtvnk:not(#\#):not(#\#):not(#\#){color:var(--x1f22vz5)}
+.x8ect3v:not(#\#):not(#\#):not(#\#){color:var(--x1vmxqsc)}
+.xw2tli:not(#\#):not(#\#):not(#\#){color:var(--xaqiz8e)}
+.x1y4yzzg:not(#\#):not(#\#):not(#\#){color:var(--xfrcqq4)}
+.x8bm3zx:not(#\#):not(#\#):not(#\#){color:var(--xjxbi6p)}
+.x1ursi0k:not(#\#):not(#\#):not(#\#){color:var(--xm1gjpn)}
+.x19v85br:not(#\#):not(#\#):not(#\#){cursor:progress}
+.x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
+.xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
+.x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
+.x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
+.xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
+.x2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}
+.x69it5h:not(#\#):not(#\#):not(#\#){font-family:var(--x1rfpocb)}
+.xj0sio9:not(#\#):not(#\#):not(#\#){font-family:var(--x1sq5zos)}
+.x13fdfvb:not(#\#):not(#\#):not(#\#){font-family:var(--xbiefh2)}
+.xkcvkkb:not(#\#):not(#\#):not(#\#){font-feature-settings:var(--x170l7ej)}
+.x18wzw5v:not(#\#):not(#\#):not(#\#){font-size:var(--x1kkm6dc)}
+.xltg2ad:not(#\#):not(#\#):not(#\#){font-size:var(--x1pipkt8)}
+.xnlz8j1:not(#\#):not(#\#):not(#\#){font-size:var(--x1wkgbgz)}
+.xfuxfq0:not(#\#):not(#\#):not(#\#){font-size:var(--x1wok735)}
+.x1ti3rys:not(#\#):not(#\#):not(#\#){font-size:var(--xdc39sg)}
+.x1fkw5ar:not(#\#):not(#\#):not(#\#){font-size:var(--xkv0k7x)}
+.x1it3fuk:not(#\#):not(#\#):not(#\#){font-synthesis:none}
+.x1sa4947:not(#\#):not(#\#):not(#\#){font-weight:var(--x49sa2c)}
+.x1jcbhmk:not(#\#):not(#\#):not(#\#){font-weight:var(--xtz9r7k)}
+.x1m30uz7:not(#\#):not(#\#):not(#\#){font-weight:var(--xuivm6y)}
+.x11klgcs:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(1,minmax(0,1fr))}
+.xnby9oq:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(2,minmax(0,1fr))}
+.x185a7wo:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(3,minmax(0,1fr))}
+.x1sipb5g:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(4,minmax(0,1fr))}
+.x1tyajke:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai))),1fr))}
+.xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
+.x13a6bvl:not(#\#):not(#\#):not(#\#){justify-content:flex-end}
+.x1nhvcw1:not(#\#):not(#\#):not(#\#){justify-content:flex-start}
+.x1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
+.x1vslzj6:not(#\#):not(#\#):not(#\#){line-height:var(--x11tbmtr)}
+.x1ezks3f:not(#\#):not(#\#):not(#\#){line-height:var(--x13wxxvu)}
+.x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
+.x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
+.x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
+.x1yc453h:not(#\#):not(#\#):not(#\#){text-align:start}
+.x1elc2ff:not(#\#):not(#\#):not(#\#){transition-duration:var(--x1hxkyqf)}
+.x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
+.xxjumz:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--x1sojct7)}
+.xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
+.x12y31ib:focus-within:not(:active):not(#\#):not(#\#):not(#\#){background-color:var(--x1cxqvb6)}
+.x1975ut4:hover:not(:disabled):not(:active):not(#\#):not(#\#):not(#\#){background-color:var(--x1cxqvb6)}
+.x1ipqx2d:hover:not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x1cxqvb6)}
+.xx3trin:hover:not(:active):not(#\#):not(#\#):not(#\#){background-color:var(--x1cxqvb6)}
+.xzpaccd:active:not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x3l7v5j)}
+.xbo0ryh:active:not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--x3mkrpc)}
+.xahjstz:hover:not(:disabled):not(:active):not(#\#):not(#\#):not(#\#){background-color:var(--xa1h56u)}
+.xszm2ej:hover:not(:disabled):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--x1cxqvb6),var(--x1cxqvb6))}
+.xuc1b5w:hover:not(:disabled):not(:active):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--x1cxqvb6),var(--x1cxqvb6))}
+.x1pg383a:active:not(:disabled):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--x3mkrpc),var(--x3mkrpc))}
+.x17bc2d0:not(:last-child):not(#\#):not(#\#):not(#\#){border-inline-end-color:var(--xwf0as5)}
+.x1f0nvx8:not(:last-child):not(#\#):not(#\#):not(#\#){border-inline-end-style:var(--xeq3ive)}
+.x86nh4x:not(:last-child):not(#\#):not(#\#):not(#\#){border-inline-end-width:var(--xft28wq)}
+.x15meki4:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--x1doqpnu)}
+.xz32tfx:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--x1jr7oj0)}
+.x1p22nma:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:var(--xeq3ive)}
+.x17lds6u:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--xpsq03c)}
+.x48zea8:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--xfp4pro)}
+.x609gy3:disabled:not(#\#):not(#\#):not(#\#){color:var(--x1cuz3ib)}
+.x15nsxps:active:not(#\#):not(#\#):not(#\#){background-color:var(--x3mkrpc)}
+@media (prefers-reduced-motion: reduce){.x1aquc0h.x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
+.x1k3hjl9:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--xwf0as5)}
+.x1w5tod1:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:var(--xeq3ive)}
+.xeq6m5c:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--xft28wq)}
+.x11a5md6:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--x1bh700q)}
+.x1pe616k:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--xwf0as5)}
+.x4tqos1:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:var(--xeq3ive)}
+.xlyo07a:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--xft28wq)}
+.xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
+.xr8hsnb:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x2kaybk)}
+.x1ieyhmn:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x5vtqbe)}
+.x1vbl8lt:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x8vzgg0)}
+.x7s8d8b:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xkgi81h)}
+.x1t7hrd4:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xpochg2)}
+.xscltuj:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xtcwerp)}
+.x1yc2x4e:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--x3fz2am))}
+.x5845i8:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--x3fz2am)}
+.x1sx9ztw:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--x3fz2am))}
+.x19a07bp:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--x3fz2am)}
+.x6wfg6j:not(#\#):not(#\#):not(#\#):not(#\#){max-width:calc(var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai) + var(--x1xp2mai))}
+.x1edz59j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:96px}
+.xmm8wyw:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--x2kaybk)}
+.xq5j1ye:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--x690rjz)}
+.xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
+.x16d7gm3:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--x690rjz)}
+.xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
+.x1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
+.x4ml2zf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x2kaybk)}
+.x1rcf1qu:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x5vtqbe)}
+.x9mi25i:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x8vzgg0)}
+.x1psh5v9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--xkgi81h)}
+.x1af11ui:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--xpochg2)}
+.x1089um4:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--xtcwerp)}
+.xrrqrn:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--xwf0as5)}
+.xub24xa:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:var(--xeq3ive)}
+.xbg14n3:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--xft28wq)}
+.xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
+.xz4fk4o:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--xp593nr)}
+.x1e4qbc8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--x1f22vz5)}
+.x1cpjm7i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:""}
+.x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
+.xfbisj7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:50%}
+.x74lcen:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
+.x2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
+.x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
+.x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
+.xbnewub:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform:translate(-50%,-50%)}
+.xitxdhh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{z-index:1}
+.x17f96yv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--x690rjz)}
+.x1knuo7r:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
+.x1o8qpxl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--x690rjz)}

package/dist/theme/Theme.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type ThemeDefinition } from '../tokens/contracts.js';
+export type Density = 'compact' | 'standard';
+export interface ThemePersistence {
+    read(): string | undefined;
+    write(themeId: string): void;
+    readDensity?(): string | undefined;
+    writeDensity?(density: Density): void;
+}
+export interface ThemeProviderProps {
+    readonly children: ReactNode;
+    readonly defaultDensity?: Density;
+    readonly defaultThemeId: string;
+    readonly persistence?: ThemePersistence;
+    readonly themes: readonly ThemeDefinition[];
+}
+export interface ThemeContextValue {
+    readonly density: Density;
+    readonly setDensity: (density: Density) => void;
+    readonly setThemeId: (themeId: string) => void;
+    readonly theme: ThemeDefinition;
+}
+export declare function ThemeProvider({ children, defaultDensity, defaultThemeId, persistence, themes, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;

package/dist/theme/Theme.doc.d.ts

@@ -0,0 +1,16 @@
+export declare const themeProviderDoc: {
+    name: string;
+    description: string;
+    props: ({
+        name: string;
+        description: string;
+        required: true;
+    } | {
+        name: string;
+        description: string;
+        required?: undefined;
+    })[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/theme/Theme.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const themeProviderDoc = {
+  name: 'ThemeProvider',
+  description: 'Applies one validated theme definition and exposes theme selection to descendants.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the themed application subtree.',
+    required: true
+  }, {
+    name: 'defaultDensity',
+    description: 'Selects the initial spatial scale when persistence has no value.'
+  }, {
+    name: 'defaultThemeId',
+    description: 'Selects the initial theme when persistence has no value.',
+    required: true
+  }, {
+    name: 'persistence',
+    description: 'Reads and writes the selected theme through a host adapter.'
+  }, {
+    name: 'themes',
+    description: 'Supplies the complete set of valid theme definitions.',
+    required: true
+  }],
+  inheritedProps: ['No inherited DOM attributes'],
+  example: '<ThemeProvider defaultThemeId={hostDefaultThemeId} themes={hostThemes}>...</ThemeProvider>',
+  storyId: 'core-theme-provider--default'
+};

package/dist/theme/Theme.js

@@ -0,0 +1,110 @@
+import * as stylex from '@stylexjs/stylex';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { tokenCustomProperties, tokenNames, validateThemeDefinition } from '../tokens/contracts.js';
+import { semanticTokens } from '../authoring.stylex.js';
+
+/*
+ * Grain. Paper is never flat, and a flat fill is the strongest tell that a
+ * surface was generated rather than made. Drawn with feTurbulence, so nothing
+ * is fetched and nothing is stored, and masked rather than blended so the
+ * speckle takes the theme's own ink instead of a grey wash. A theme that wants
+ * none makes the colour transparent and pays nothing else.
+ *
+ * It sits above the content, where a printed texture sits. The stacking step
+ * is 1 rather than a nine-thousand, so a host's own layers still out-rank it.
+ */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const grainMask = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E\")";
+// StyleX emits semantic-token bridge variables for this generated scope. The
+// host theme values live on ThemeProvider, so the scope must live there too.
+const semanticTokenScopeClass = semanticTokens.__varGroupHash__;
+const densities = ['compact', 'standard'];
+
+// A theme pack fulfills the token contract twice, once per density. Density is
+// therefore a root attribute rather than a token value: the pack's CSS decides
+// what each step measures, and the library only says which one is selected.
+
+const ThemeContext = createContext(undefined);
+function validateThemes(themes) {
+  const themeIds = new Set();
+  for (const theme of themes) {
+    if (themeIds.has(theme.id)) {
+      throw new Error(`Duplicate theme ID: ${theme.id}`);
+    }
+    themeIds.add(theme.id);
+    const missingTokens = validateThemeDefinition(theme);
+    if (missingTokens.length > 0) {
+      throw new Error(`Theme "${theme.id}" is missing token roles: ${missingTokens.join(', ')}`);
+    }
+  }
+}
+function requiredDensity(density, fallback) {
+  return densities.includes(density) ? density : fallback;
+}
+function requiredTheme(themes, themeId) {
+  const theme = themes.find(({
+    id
+  }) => id === themeId);
+  if (!theme) {
+    throw new Error(`Unknown theme ID: ${themeId}`);
+  }
+  return theme;
+}
+function themeStyle(theme) {
+  return Object.fromEntries(tokenNames.map(tokenName => [tokenCustomProperties[tokenName], theme.tokens[tokenName]]));
+}
+export function ThemeProvider({
+  children,
+  defaultDensity = 'compact',
+  defaultThemeId,
+  persistence,
+  themes
+}) {
+  validateThemes(themes);
+  const [themeId, setCurrentThemeId] = useState(() => persistence?.read() ?? defaultThemeId);
+  const theme = requiredTheme(themes, themeId);
+  const setThemeId = useCallback(nextThemeId => {
+    requiredTheme(themes, nextThemeId);
+    persistence?.write(nextThemeId);
+    setCurrentThemeId(nextThemeId);
+  }, [persistence, themes]);
+  const [density, setCurrentDensity] = useState(() => requiredDensity(persistence?.readDensity?.(), defaultDensity));
+  const setDensity = useCallback(nextDensity => {
+    const resolved = requiredDensity(nextDensity, defaultDensity);
+    persistence?.writeDensity?.(resolved);
+    setCurrentDensity(resolved);
+  }, [defaultDensity, persistence]);
+  const value = useMemo(() => ({
+    density,
+    setDensity,
+    setThemeId,
+    theme
+  }), [density, setDensity, setThemeId, theme]);
+  const {
+    className,
+    style
+  } = {
+    className: "xkcvkkb x1n2onr6 xz4fk4o x1s928wv xarstr8 x74lcen x2q1x1w x1j6awrg xitxdhh"
+  };
+  return /*#__PURE__*/_jsx(ThemeContext, {
+    value: value,
+    children: /*#__PURE__*/_jsx("div", {
+      className: [semanticTokenScopeClass, className].filter(Boolean).join(' '),
+      "data-density": density,
+      "data-theme": theme.id,
+      style: {
+        ...style,
+        ...themeStyle(theme)
+      },
+      children: children
+    })
+  });
+}
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return theme;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme, type Density, type ThemeContextValue, type ThemePersistence, type ThemeProviderProps, } from './Theme.js';
+export type { ThemeDefinition } from '../tokens/contracts.js';

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ThemeProvider, useTheme } from './Theme.js';