eidos-ui 2.0.0 → 3.0.0

package/dist/theme-provider/index.d.cts

@@ -0,0 +1,123 @@
+import React__default from 'react';
+import { f as ThemeProviderProps, d as ThemeContextValue, c as ThemeConfig } from '../ThemeProvider.types-DgXN0gEH.cjs';
+export { R as ResolvedTheme, T as ThemeColorKey, a as ThemeColorValue, b as ThemeColors, e as ThemeFontOption, g as ThemeTypography } from '../ThemeProvider.types-DgXN0gEH.cjs';
+
+/**
+ * Applies a theme by writing CSS custom properties to `document.documentElement`.
+ *
+ * Two deliberate choices worth knowing:
+ *
+ * **The target is `documentElement`, not a wrapper element.** Every overlay in
+ * this library (`Dropdown`, `Modal`, `Drawer`, `Snackbar`, `Tooltip`, …) portals
+ * to `document.body`, so tokens scoped to a wrapper `<div>` would leave every
+ * popup rendering the preset instead.
+ *
+ * **Properties are set through the CSSOM** (`style.setProperty`), which no CSP
+ * directive gates - `style-src` and `style-src-attr` only cover the `style`
+ * HTML attribute and stylesheet loads. Nothing here needs a nonce, and no
+ * `<style>` element is ever created. See `ContentSecurityPolicy.mdx`.
+ *
+ * Under SSR the server sends the preset from `dist/index.css` and the theme is
+ * applied on hydration; use `toCss()` if you need a themed first paint.
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+/**
+ * Reads the active theme. Throws outside a `ThemeProvider`, matching
+ * `useSnackbarContext` - a silent fallback would make a missing provider look
+ * like a theme that simply is not applying.
+ */
+declare const useTheme: () => ThemeContextValue;
+
+/**
+ * The shipped values from `src/styles/variables.scss`.
+ *
+ * This is a literal copy, not something derived: the ramp is hand-tuned and no
+ * generator reproduces it byte for byte. Keeping it literal means a theme equal
+ * to the preset writes no CSS properties at all, so default rendering is
+ * identical to `dist/index.css`.
+ *
+ * Must be kept in sync with `variables.scss` by hand. The bases are all chosen
+ * to clear WCAG AA against white text; see the comment at the top of that file.
+ */
+declare const defaultTheme: Required<ThemeConfig>;
+
+/**
+ * Runtime font registration for the theme system.
+ *
+ * `--font-family-primary` only *names* families - it cannot make a font
+ * available. Selecting "Plus Jakarta Sans" on a machine that doesn't have it
+ * installed silently falls through to the next stack entry, which is why a
+ * theme needs a way to supply the font data itself.
+ *
+ * ## Why this is CSP-safe
+ *
+ * Fonts are registered with the CSS Font Loading API from an `ArrayBuffer`:
+ *
+ * ```ts
+ * document.fonts.add(new FontFace(family, buffer));
+ * ```
+ *
+ * CSP's `font-src` directive governs *fetching* a font resource by URL - it is
+ * what gates `@font-face { src: url(...) }` and the string form of the
+ * `FontFace` constructor. The binary form performs no fetch at all, so there is
+ * no request for `font-src` to check and no allowance to configure. Notably
+ * this also avoids `blob:` URLs, which *would* require `font-src blob:`.
+ *
+ * No `<style>` element is created either, so nothing here needs a nonce - the
+ * same position as the rest of the theme system.
+ */
+/** A font registered at runtime, as listed by the editor. */
+interface RegisteredFont {
+    /** The family name to reference in a font stack. */
+    family: string;
+    /** Where it came from, so the UI can distinguish uploads from built-ins. */
+    source: 'upload';
+}
+/**
+ * Turns a filename into a usable CSS family name.
+ *
+ * Deliberately conservative: the real family name lives in the font's internal
+ * `name` table, and parsing SFNT tables to read it would be a disproportionate
+ * amount of binary handling for a label. The filename is what the user
+ * recognises anyway.
+ */
+declare const familyNameFromFile: (filename: string) => string;
+/**
+ * Builds a full stack from a custom family, keeping sensible fallbacks so the
+ * page stays readable if the font is ever unavailable.
+ */
+declare const toFontStack: (family: string, mono?: boolean) => string;
+/** Font formats accepted for upload, as an `accept` attribute value. */
+declare const FONT_ACCEPT = ".woff2,.woff,.ttf,.otf";
+/**
+ * Registers font data with the document so a theme can reference its family.
+ *
+ * Resolves with the family name actually registered. Rejects if the data is not
+ * a font the browser can parse, or if the Font Loading API is unavailable
+ * (notably during SSR, where there is no `document` to register against).
+ */
+declare const registerFontFace: (family: string, data: ArrayBuffer) => Promise<string>;
+/** Reads a File and registers it, returning the family name it was given. */
+declare const registerFontFile: (file: File, family?: string) => Promise<string>;
+/**
+ * Whether a font family will actually render, rather than silently falling
+ * through to the next entry in the stack.
+ *
+ * **`document.fonts.check` cannot answer this.** Per spec it reports whether
+ * the faces *in the FontFaceSet* matching the query are loaded, so with no
+ * matching face it returns `true` vacuously. Verified in a real browser: it
+ * answers `true` for `'Totally Not A Real Font 12345'`, and therefore for every
+ * uninstalled system font too. Using it here produced a check that could never
+ * fail.
+ *
+ * Instead the family is measured on a canvas against two fallbacks. If it
+ * resolves to anything real, the text measures differently from at least one
+ * fallback alone; if it does not resolve, the browser renders that fallback and
+ * the widths match exactly.
+ */
+declare const isFontAvailable: (family: string) => boolean;
+/** Whether the first family in a stack will render. */
+declare const isFontStackAvailable: (stack: string) => boolean;
+
+export { FONT_ACCEPT, type RegisteredFont, ThemeConfig, ThemeContextValue, ThemeProvider, ThemeProviderProps, defaultTheme, familyNameFromFile, isFontAvailable, isFontStackAvailable, registerFontFace, registerFontFile, toFontStack, useTheme };

package/dist/theme-provider/index.d.ts

@@ -0,0 +1,123 @@
+import React__default from 'react';
+import { f as ThemeProviderProps, d as ThemeContextValue, c as ThemeConfig } from '../ThemeProvider.types-DgXN0gEH.js';
+export { R as ResolvedTheme, T as ThemeColorKey, a as ThemeColorValue, b as ThemeColors, e as ThemeFontOption, g as ThemeTypography } from '../ThemeProvider.types-DgXN0gEH.js';
+
+/**
+ * Applies a theme by writing CSS custom properties to `document.documentElement`.
+ *
+ * Two deliberate choices worth knowing:
+ *
+ * **The target is `documentElement`, not a wrapper element.** Every overlay in
+ * this library (`Dropdown`, `Modal`, `Drawer`, `Snackbar`, `Tooltip`, …) portals
+ * to `document.body`, so tokens scoped to a wrapper `<div>` would leave every
+ * popup rendering the preset instead.
+ *
+ * **Properties are set through the CSSOM** (`style.setProperty`), which no CSP
+ * directive gates - `style-src` and `style-src-attr` only cover the `style`
+ * HTML attribute and stylesheet loads. Nothing here needs a nonce, and no
+ * `<style>` element is ever created. See `ContentSecurityPolicy.mdx`.
+ *
+ * Under SSR the server sends the preset from `dist/index.css` and the theme is
+ * applied on hydration; use `toCss()` if you need a themed first paint.
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+/**
+ * Reads the active theme. Throws outside a `ThemeProvider`, matching
+ * `useSnackbarContext` - a silent fallback would make a missing provider look
+ * like a theme that simply is not applying.
+ */
+declare const useTheme: () => ThemeContextValue;
+
+/**
+ * The shipped values from `src/styles/variables.scss`.
+ *
+ * This is a literal copy, not something derived: the ramp is hand-tuned and no
+ * generator reproduces it byte for byte. Keeping it literal means a theme equal
+ * to the preset writes no CSS properties at all, so default rendering is
+ * identical to `dist/index.css`.
+ *
+ * Must be kept in sync with `variables.scss` by hand. The bases are all chosen
+ * to clear WCAG AA against white text; see the comment at the top of that file.
+ */
+declare const defaultTheme: Required<ThemeConfig>;
+
+/**
+ * Runtime font registration for the theme system.
+ *
+ * `--font-family-primary` only *names* families - it cannot make a font
+ * available. Selecting "Plus Jakarta Sans" on a machine that doesn't have it
+ * installed silently falls through to the next stack entry, which is why a
+ * theme needs a way to supply the font data itself.
+ *
+ * ## Why this is CSP-safe
+ *
+ * Fonts are registered with the CSS Font Loading API from an `ArrayBuffer`:
+ *
+ * ```ts
+ * document.fonts.add(new FontFace(family, buffer));
+ * ```
+ *
+ * CSP's `font-src` directive governs *fetching* a font resource by URL - it is
+ * what gates `@font-face { src: url(...) }` and the string form of the
+ * `FontFace` constructor. The binary form performs no fetch at all, so there is
+ * no request for `font-src` to check and no allowance to configure. Notably
+ * this also avoids `blob:` URLs, which *would* require `font-src blob:`.
+ *
+ * No `<style>` element is created either, so nothing here needs a nonce - the
+ * same position as the rest of the theme system.
+ */
+/** A font registered at runtime, as listed by the editor. */
+interface RegisteredFont {
+    /** The family name to reference in a font stack. */
+    family: string;
+    /** Where it came from, so the UI can distinguish uploads from built-ins. */
+    source: 'upload';
+}
+/**
+ * Turns a filename into a usable CSS family name.
+ *
+ * Deliberately conservative: the real family name lives in the font's internal
+ * `name` table, and parsing SFNT tables to read it would be a disproportionate
+ * amount of binary handling for a label. The filename is what the user
+ * recognises anyway.
+ */
+declare const familyNameFromFile: (filename: string) => string;
+/**
+ * Builds a full stack from a custom family, keeping sensible fallbacks so the
+ * page stays readable if the font is ever unavailable.
+ */
+declare const toFontStack: (family: string, mono?: boolean) => string;
+/** Font formats accepted for upload, as an `accept` attribute value. */
+declare const FONT_ACCEPT = ".woff2,.woff,.ttf,.otf";
+/**
+ * Registers font data with the document so a theme can reference its family.
+ *
+ * Resolves with the family name actually registered. Rejects if the data is not
+ * a font the browser can parse, or if the Font Loading API is unavailable
+ * (notably during SSR, where there is no `document` to register against).
+ */
+declare const registerFontFace: (family: string, data: ArrayBuffer) => Promise<string>;
+/** Reads a File and registers it, returning the family name it was given. */
+declare const registerFontFile: (file: File, family?: string) => Promise<string>;
+/**
+ * Whether a font family will actually render, rather than silently falling
+ * through to the next entry in the stack.
+ *
+ * **`document.fonts.check` cannot answer this.** Per spec it reports whether
+ * the faces *in the FontFaceSet* matching the query are loaded, so with no
+ * matching face it returns `true` vacuously. Verified in a real browser: it
+ * answers `true` for `'Totally Not A Real Font 12345'`, and therefore for every
+ * uninstalled system font too. Using it here produced a check that could never
+ * fail.
+ *
+ * Instead the family is measured on a canvas against two fallbacks. If it
+ * resolves to anything real, the text measures differently from at least one
+ * fallback alone; if it does not resolve, the browser renders that fallback and
+ * the widths match exactly.
+ */
+declare const isFontAvailable: (family: string) => boolean;
+/** Whether the first family in a stack will render. */
+declare const isFontStackAvailable: (stack: string) => boolean;
+
+export { FONT_ACCEPT, type RegisteredFont, ThemeConfig, ThemeContextValue, ThemeProvider, ThemeProviderProps, defaultTheme, familyNameFromFile, isFontAvailable, isFontStackAvailable, registerFontFace, registerFontFile, toFontStack, useTheme };

package/dist/theme-provider/index.js

@@ -0,0 +1,27 @@
+import {
+  FONT_ACCEPT,
+  ThemeProvider,
+  defaultTheme,
+  familyNameFromFile,
+  isFontAvailable,
+  isFontStackAvailable,
+  registerFontFace,
+  registerFontFile,
+  toFontStack,
+  useTheme
+} from "../chunk-2ZY7M72Q.js";
+import "../chunk-KBG77JHC.js";
+import "../chunk-5WRI5ZAA.js";
+export {
+  FONT_ACCEPT,
+  ThemeProvider,
+  defaultTheme,
+  familyNameFromFile,
+  isFontAvailable,
+  isFontStackAvailable,
+  registerFontFace,
+  registerFontFile,
+  toFontStack,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/theme-provider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/toolbar/index.cjs

@@ -1,20 +1,20 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkUGMONQGHcjs = require('../chunk-UGMONQGH.cjs');
+var _chunkGR2PMCVNcjs = require('../chunk-GR2PMCVN.cjs');
 require('../chunk-3EPND5M2.cjs');
 require('../chunk-VW32UTUE.cjs');
-require('../chunk-FMPXSF3H.cjs');
+require('../chunk-DAXZRNNO.cjs');
 require('../chunk-FRUOA2QU.cjs');
 require('../chunk-KVIL4EP4.cjs');
 require('../chunk-Q3GNKF74.cjs');
 require('../chunk-5O73AALP.cjs');
 require('../chunk-EACNRR3C.cjs');
-require('../chunk-A7Z2QAFZ.cjs');
+require('../chunk-APK5OQRV.cjs');
 require('../chunk-I6UOIS4J.cjs');
-require('../chunk-GOR642KK.cjs');
+require('../chunk-GEHL4LKK.cjs');
 require('../chunk-Z5U4NJTW.cjs');
 require('../chunk-DZUJEN5N.cjs');
 
 
-exports.Toolbar = _chunkUGMONQGHcjs.Toolbar;
+exports.Toolbar = _chunkGR2PMCVNcjs.Toolbar;
 //# sourceMappingURL=index.cjs.map

package/dist/toolbar/index.d.cts

@@ -1,7 +1,8 @@
 import React__default from 'react';
-import { a as ToolbarProps } from '../Toolbar.types-tQkLmPIu.cjs';
-export { T as ToolbarActionProps } from '../Toolbar.types-tQkLmPIu.cjs';
+import { a as ToolbarProps } from '../Toolbar.types-DSk8z2iy.cjs';
+export { T as ToolbarActionProps } from '../Toolbar.types-DSk8z2iy.cjs';
 import '../Breadcrumb.types-DaykU-C8.cjs';
+import '../Avatar.types-BY-C09Ke.cjs';
 import '../Button.types-DZRCVqyN.cjs';
 import '../renderIcon-C2lEMMzb.cjs';
 import '../sizes-DM6Rrrgq.cjs';

package/dist/toolbar/index.d.ts

@@ -1,7 +1,8 @@
 import React__default from 'react';
-import { a as ToolbarProps } from '../Toolbar.types-BGD57Uhm.js';
-export { T as ToolbarActionProps } from '../Toolbar.types-BGD57Uhm.js';
+import { a as ToolbarProps } from '../Toolbar.types-RN0klQzu.js';
+export { T as ToolbarActionProps } from '../Toolbar.types-RN0klQzu.js';
 import '../Breadcrumb.types-DaykU-C8.js';
+import '../Avatar.types-BY-C09Ke.js';
 import '../Button.types-BH0CPyPx.js';
 import '../renderIcon-C2lEMMzb.js';
 import '../sizes-DM6Rrrgq.js';

package/dist/toolbar/index.js

@@ -1,17 +1,17 @@
 import {
   Toolbar
-} from "../chunk-IV4LM3MB.js";
+} from "../chunk-F26VIKNF.js";
 import "../chunk-PY2376XI.js";
 import "../chunk-XUZOU2EB.js";
-import "../chunk-JMD3P4CY.js";
+import "../chunk-ZHFPV43D.js";
 import "../chunk-4BKTBV2I.js";
 import "../chunk-LYH3EKKQ.js";
 import "../chunk-XJBWFDDE.js";
 import "../chunk-DRXPTACG.js";
 import "../chunk-N5JDL4VE.js";
-import "../chunk-WIE7HDIM.js";
+import "../chunk-YJXZR7RL.js";
 import "../chunk-66R54X6R.js";
-import "../chunk-5CLC3FJO.js";
+import "../chunk-KBG77JHC.js";
 import "../chunk-YV57RSPD.js";
 import "../chunk-5WRI5ZAA.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidos-ui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A modern React component library with TypeScript and SCSS",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,6 +16,10 @@
       "types": "./dist/index.css.d.ts",
       "default": "./dist/index.css"
     },
+    "./fonts": {
+      "types": "./dist/fonts.css.d.ts",
+      "default": "./dist/fonts.css"
+    },
     "./*": {
       "types": "./dist/*/index.d.ts",
       "import": "./dist/*/index.js",
@@ -24,15 +28,21 @@
   },
   "sideEffects": [
     "dist/index.css",
-    "dist/index.css.d.ts"
+    "dist/index.css.d.ts",
+    "dist/fonts.css",
+    "dist/fonts.css.d.ts"
   ],
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "vite --config vite.dev.config.ts",
-    "build": "tsup && node scripts/build-styles.js",
     "storybook": "storybook dev -p 6007",
+    "verify": "node scripts/verify.js",
+    "release": "node scripts/release.js",
+    "release:approve": "npm run release -- approve",
+    "version:check": "npm view eidos-ui version",
+    "build": "node scripts/build.js",
     "build-storybook": "storybook build",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0",
     "typecheck": "tsc --noEmit",
@@ -41,10 +51,9 @@
     "prepublishOnly": "npm run build",
     "version": "node scripts/promote-changelog.js",
     "postversion": "git push --follow-tags",
-    "verify": "node scripts/verify.js",
     "release:needed": "node scripts/release-needed.js",
-    "release:preflight": "node scripts/preflight-release.js && npm run lint && npm run typecheck && npm run prettier:check && npm run build",
-    "release": "node scripts/release.js"
+    "check:docs": "node scripts/check-docs.js",
+    "release:preflight": "node scripts/preflight-release.js && npm run lint && npm run typecheck && npm run prettier:check && npm run build"
   },
   "keywords": [
     "react",
@@ -68,6 +77,8 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@eslint/js": "^10.0.1",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/plus-jakarta-sans": "^5.3.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/addon-links": "^10.6.0",
     "@storybook/addon-vitest": "^10.6.0",

package/dist/Toolbar.types-BGD57Uhm.d.ts

@@ -1,22 +0,0 @@
-import { a as BreadcrumbProps } from './Breadcrumb.types-DaykU-C8.js';
-import { I as IconButtonProps } from './Button.types-BH0CPyPx.js';
-import { b as MenuItemType } from './Menu.types-DNIpjSAK.js';
-import { C as CommandItem } from './CommandPalette.types-DRMMS_ev.js';
-
-interface ToolbarProps {
-    /** Breadcrumb trail rendered above the page. */
-    breadcrumbs: Pick<BreadcrumbProps, 'items' | 'separator'>;
-    /** User menu items, rendered right-aligned. */
-    userMenu: MenuItemType[];
-    /** Command palette items, rendered right-aligned. */
-    cmdPaletteItems?: CommandItem[];
-    /** Trailing action buttons, rendered right-aligned. */
-    actions?: ToolbarActionProps[];
-    className?: string;
-}
-/**
- * Restricted, discriminated subset of ButtonProps for Toolbar actions.
- */
-type ToolbarActionProps = Pick<IconButtonProps, 'color' | 'loading' | 'disabled' | 'preIcon' | 'posIcon' | 'icon' | 'children' | 'onClick' | 'tooltip'>;
-
-export type { ToolbarActionProps as T, ToolbarProps as a };

package/dist/Toolbar.types-tQkLmPIu.d.cts

@@ -1,22 +0,0 @@
-import { a as BreadcrumbProps } from './Breadcrumb.types-DaykU-C8.cjs';
-import { I as IconButtonProps } from './Button.types-DZRCVqyN.cjs';
-import { b as MenuItemType } from './Menu.types-DwcuCZM7.cjs';
-import { C as CommandItem } from './CommandPalette.types-DRMMS_ev.cjs';
-
-interface ToolbarProps {
-    /** Breadcrumb trail rendered above the page. */
-    breadcrumbs: Pick<BreadcrumbProps, 'items' | 'separator'>;
-    /** User menu items, rendered right-aligned. */
-    userMenu: MenuItemType[];
-    /** Command palette items, rendered right-aligned. */
-    cmdPaletteItems?: CommandItem[];
-    /** Trailing action buttons, rendered right-aligned. */
-    actions?: ToolbarActionProps[];
-    className?: string;
-}
-/**
- * Restricted, discriminated subset of ButtonProps for Toolbar actions.
- */
-type ToolbarActionProps = Pick<IconButtonProps, 'color' | 'loading' | 'disabled' | 'preIcon' | 'posIcon' | 'icon' | 'children' | 'onClick' | 'tooltip'>;
-
-export type { ToolbarActionProps as T, ToolbarProps as a };