@pantoken/components 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, elevationDeclarations, focusOutlineDeclarations, focusOutlineRules } from "@pantoken/utils";
+
 //#region src/lib/helpers.d.ts
 /**
  * Shared primitives for the component builders: the class-prefix namespace helper, the standalone-sheet
@@ -8,6 +10,8 @@
  */
 /** The default class prefix (`instui` → `.instui-button`). */
 declare const DEFAULT_PREFIX = "instui";
+/** Theme keys emitted by `@pantoken/tokens`. */
+type ComponentTheme = "rebrand" | "canvas" | "canvasHighContrast";
 /** Options common to every builder. */
 interface ComponentOptions {
   /**
@@ -17,6 +21,10 @@ interface ComponentOptions {
    * built with `"instui"`.
    */
   prefix?: string | null;
+  /**
+   * Target theme for emitted CSS. Defaults to `"rebrand"` when omitted.
+   */
+  theme?: ComponentTheme;
 }
 //#endregion
 //#region src/rules/prose.d.ts
@@ -36,25 +44,6 @@ interface ProseOptions {
 declare function proseCss(options?: ProseOptions): string;
 //#endregion
 //#region src/declarations/elevation.d.ts
-/**
- * The `--instui-elevation-*` shadow scale. Helpers only — NOT a documented record and not in any
- * registry: `componentsCss()` leads its sheet with `elevationCss()` so the shadows components
- * reference (modal, alert, menu) resolve from `components.css` alone.
- *
- * @module
- */
-/**
- * Every elevation level and alias emitted as `--instui-elevation-<name>` (`resting`, `above`,
- * `topmost`, `depth1`–`depth3`, `card`, `cardHover`). Derived from the geometry + alias maps.
- */
-declare const ELEVATION_NAMES: readonly string[];
-/**
- * The `--instui-elevation-*` name/value pairs (each a multi-layer `box-shadow`). Values reference the
- * themed drop-shadow colour tokens, so they adapt per theme wherever a token sheet is loaded.
- *
- * @returns One `[customProperty, value]` pair per level and alias.
- */
-declare function elevationDeclarations(): [name: string, value: string][];
 /**
  * Build the elevation token block: `<selector> { --instui-elevation-*: … }`. Shipped inside
  * `components.css` (so shadows are intrinsic — no plugin, no extra import), and reusable by other
@@ -77,24 +66,6 @@ declare function elevationCss(options?: {
 }): string;
 //#endregion
 //#region src/declarations/focus.d.ts
-/** The elements the ring applies to by default (the common interactive/focusable elements). */
-declare const FOCUSABLE_SELECTOR = "a, button, input, select, textarea, summary, [tabindex]";
-/**
- * The `--instui-focus-outline-*` name/value pairs the ring rules read. Colour/width/offset reference
- * the themed shared focus tokens; the transition, line style, and inset are constants.
- *
- * @returns One `[customProperty, value]` pair per focus-ring variable.
- */
-declare function focusOutlineDeclarations(): [name: string, value: string][];
-/**
- * The focus-ring rules for a given focusable selector: a transparent resting ring that transitions in
- * on `:focus-visible`, plus the `-focus-color-*` / `-focus-position-inset` / `-focus-within` /
- * `-without-focus-animation` modifiers. All `:where()`-wrapped, so zero-specificity.
- *
- * @param selector - The focusable selector the base ring applies to (default {@link FOCUSABLE_SELECTOR}).
- * @returns The CSS rules string.
- */
-declare function focusOutlineRules(selector?: string): string;
 /**
  * Build the focus-outline block: the `--instui-focus-outline-*` token defs plus the ring rules.
  * Baked into `base.css` (so focusables get the ring out of the box), and reusable by other layered
@@ -341,19 +312,22 @@ declare function iconGlyphsCss(names: readonly string[], options?: IconGlyphsOpt
 //#region src/index.d.ts
 /**
  * Build the opt-in base/reset stylesheet: global document defaults from the tokens (box-sizing, body
- * reset, page surface, base text colour/font, `color-scheme`, base link), followed by the focus ring
- * (a document-level default that targets bare focusables). Load it once, ahead of the component and
- * prose sheets, when pantoken owns the page.
+ * reset, page surface, base text colour/font, `color-scheme`, base link), followed by the focus-ring
+ * rules (a document-level default that targets bare focusables). Only the ring *rules* live here — the
+ * `--instui-focus-outline-*` custom properties they read ship in the token sheet (`@pantoken/css`), so
+ * `base.css` no longer redefines them. Load it once, ahead of the component and prose sheets, when
+ * pantoken owns the page.
  *
  * @returns The CSS string.
  */
 declare function baseCss(): string;
 /**
- * Build the aggregated component stylesheet: the `--instui-elevation-*` scale (so shadows are intrinsic)
- * followed by every component's rules in the `COMPONENTS` concat order. The size-alias and
- * deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each alias documents on
- * its own page — the deprecated aliases are discovered from each record's `@deprecated {@link -x}`
- * metadata (see `withAliases`), not a central hand-kept list.
+ * Build the aggregated component stylesheet: every component's rules in the `COMPONENTS` concat order.
+ * The size-alias and deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each
+ * alias documents on its own page — the deprecated aliases are discovered from each record's
+ * `@deprecated {@link -x}` metadata (see `withAliases`), not a central hand-kept list. The
+ * `--instui-elevation-*` shadow scale the components reference is defined in the token sheet
+ * (`@pantoken/css`), so it's no longer inlined here.
  *
  * @param options - {@link ComponentOptions}.
  * @returns The CSS string.