@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/core/tokens/effects.d.ts

@@ -0,0 +1,103 @@
+import type { TokenOf } from './registry';
+export declare const shadow: {
+    readonly card: '0 10px 28px rgba(0, 0, 0, 0.45)';
+    readonly pop: '0 20px 50px rgba(0, 0, 0, 0.55)';
+    readonly hero: '0 20px 50px rgba(0, 0, 0, 0.6)';
+};
+/** The same elevations on paper: a tight contact shadow under a wide, very
+ *  faint ambient one, where the dark ground's single opaque drop would smear. */
+export declare const lightShadow: Record<keyof typeof shadow, string>;
+/** Shadows a theme adds. Augment it and the name is legal wherever an elevation
+ *  is written: the `shadow:` shorthand, <Box shadow> (see `ColorRegistry`). */
+export interface ShadowRegistry {
+}
+export type ShadowToken = TokenOf<typeof shadow, ShadowRegistry>;
+/** ONE ring width, everywhere. A control's focus visual is how a viewer keeps
+ * their place, so it must not change thickness as focus travels from a button
+ * to a field to a row: three widths across the kit read as three different
+ * kinds of focus. Every ring below, and the field outline the web draws in
+ * CSS, are this number. */
+export declare const RING_WIDTH = 4;
+/** How far the ring stands OFF the control it marks. The ring reads as a frame
+ * around the thing rather than a border on it, which is what keeps it legible
+ * over artwork at ten feet.
+ *
+ * Spent as an outline offset rather than as padding inside each component, and
+ * that is what keeps the corners honest: an outline follows the element's own
+ * radius, so the ring stays concentric with whatever it surrounds for free.
+ * Done with padding, every component owes the same sum by hand - outer = inner
+ * + gap - and gets it wrong (a 6px frame around a 13px corner needs a 19px
+ * radius, not 16). */
+export declare const RING_GAP = 6;
+/** How much room a focused control needs beside it, for anything that clips or
+ * abuts it - a scroll view's edge, the capsule a nav item sits in: the ring and
+ * its gap, and a hair more so the ring never lands on the very pixel that clips
+ * it. */
+export declare const RING_ROOM: number;
+/** A focus ring, as a style: an outline standing `RING_GAP` off the control,
+ * optionally over a shadow. */
+export interface RingStyle {
+    outlineStyle: 'solid';
+    outlineWidth: number;
+    outlineColor: string;
+    outlineOffset: number;
+    boxShadow?: string;
+    borderRadius?: number;
+}
+/** The 10-foot focus treatment: a CLEAN solid amber ring plus a dark drop
+ * shadow for lift, never an amber bloom, so the ring reads as a crisp border. */
+export declare function standoff(color: string, lift?: string): RingStyle;
+/** The same ring, drawn INSIDE the control: for a row that is flush with the
+ * card clipping it (a <ListRow.Group> member), where there is no outside to
+ * stand off into. Same width, same ink, the same gap - measured inward.
+ *
+ * A browser paints an outline's corner at the element's own radius moved by the
+ * offset, and a row flush with a card has no radius of its own to move: without
+ * this the ring is a square drawn inside a round card. */
+export declare function standoffInside(color: string): RingStyle;
+/** The same ring, drawn ON the control's edge: for a row that abuts its
+ * neighbours (a dropdown option), where a gap in EITHER direction lands on
+ * something - the row above outward, the row's own wash inward. Same width,
+ * same ink, no gap, because there is nowhere to put one. */
+export declare function standoffEdge(color: string): RingStyle;
+/** The steps the theme derives from the accent wash, as the `/NN` percentages a
+ *  colour is written with everywhere else. The build emits one property per
+ *  step, so a new one has to be added to the derived list in `vite/tokens.ts`. */
+export declare const WASH_ALPHA: {
+    readonly glow: 40;
+    readonly play: 32;
+    readonly ring: 28;
+};
+export declare const LIFT_SHADOW = "0 10px 28px rgba(0, 0, 0, 0.5)";
+export declare const ring: {
+    readonly focus: RingStyle;
+    /** Kept as a name callers already use; the same width as the rest. */
+    readonly focusSm: RingStyle;
+    /** Ring + lift, the combination every focusable actually renders. */
+    readonly focusLift: RingStyle;
+    /** For a control with no outside: see `standoffInside`. */
+    readonly focusInset: RingStyle;
+    /** For a row with no room either way: see `standoffEdge`. */
+    readonly focusEdge: RingStyle;
+};
+export declare const glow: {
+    readonly accent: '0 6px 22px rgba(242, 180, 66, 0.4)';
+    readonly play: '0 6px 22px rgba(242, 180, 66, 0.32)';
+};
+/** Motion. Durations in milliseconds (React Native's Animated unit); the CSS
+ * generator emits seconds. Easing curves are bezier control points, consumable
+ * by both `Easing.bezier(...)` and `cubic-bezier(...)`. */
+export declare const motion: {
+    readonly bezier: {
+        readonly out: readonly [0.22, 1, 0.36, 1];
+        readonly spring: readonly [0.34, 1.56, 0.64, 1];
+    };
+    readonly duration: {
+        readonly fast: 150;
+        readonly base: 200;
+        readonly slow: 400;
+    };
+    /** Buttons shrink on press; cards lift on focus. */
+    readonly pressScale: 0.95;
+    readonly focusLift: -6;
+};

package/types/ui/src/core/tokens/index.d.ts

@@ -0,0 +1,10 @@
+export type { ColorRegistry, ColorToken } from './colors';
+export { colors, SERIES_COLORS, SHADE, shade, WHEEL_COLORS } from './colors';
+export type { RingStyle, ShadowRegistry, ShadowToken } from './effects';
+export { glow, motion, RING_GAP, RING_ROOM, RING_WIDTH, ring, shadow } from './effects';
+export type { BreakpointName, CornerValue, Radius, RadiusRegistry, RadiusToken } from './layout';
+export { absoluteFill, BREAKPOINTS, breakpoint, CANVAS, CIRCLE_PERCENT, CIRCLE_RADIUS, gutter, nestedRadius, radius, rhythm, space, } from './layout';
+export type { MobileTypeRole } from './mobile';
+export { mobileFonts, mobileRadius, mobileSpace, mobileType, mobileTypeSpec } from './mobile';
+export type { FontRegistry, FontToken, TypeRole, TypeRoleRegistry, TypeSpec } from './typography';
+export { BASE_RAMP, fontSizes, fonts, TV_RAMP, toType, tracking, type, typeSpec, } from './typography';

package/types/ui/src/core/tokens/layout.d.ts

@@ -0,0 +1,123 @@
+import type { TokenOf } from './registry';
+/** Every TV screen is authored against this fixed canvas and scaled to fit by
+ * `<TvStage>`. It is what makes the layout pixel-identical on a 1080p Tizen
+ * panel, a 4K Apple TV (1920x1080 points) and an Android TV (960x540 dp). */
+export declare const CANVAS: {
+    readonly width: 1920;
+    readonly height: 1080;
+};
+/** The design widths a layout may change at, ascending. `base` is mandatory in
+ *  a breakpoint object and means "no minimum". */
+export declare const BREAKPOINTS: readonly ['base', 'md', 'lg', 'tv'];
+export type BreakpointName = (typeof BREAKPOINTS)[number];
+/**
+ * What each step is for, in the units the target reports (px on a browser,
+ * points or dp natively):
+ *
+ * | `base` | a phone, and anything narrower than the next step |
+ * | `md`   | a tablet in portrait, or a half-screen split view on one |
+ * | `lg`   | a desktop window, or a tablet in landscape |
+ * | `tv`   | the 10-foot stage, which IS `CANVAS.width`, and the widest desktop |
+ *
+ * Deliberately closed, with no registry to augment: an open set would make an
+ * unknown key in `{ base: 16, xl: 40 }` legal rather than a compile error.
+ */
+export declare const breakpoint: {
+    readonly base: 0;
+    readonly md: 600;
+    readonly lg: 1024;
+    readonly tv: 1920;
+};
+export declare const space: {
+    readonly 1: 4;
+    readonly 2: 8;
+    readonly 3: 12;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 8: 32;
+    readonly 10: 40;
+    readonly 14: 56;
+    readonly 16: 64;
+};
+export declare const CIRCLE_PERCENT = "50%";
+export declare const radius: {
+    readonly sharp: 0.01;
+    readonly hairline: 1;
+    readonly outline: 1.5;
+    readonly track: 2;
+    readonly indicator: 3;
+    readonly compact: 4;
+    readonly badge: 7;
+    readonly control: 11;
+    readonly panel: 12;
+    readonly mobile: 14;
+    readonly photo: 15;
+    readonly tile: 17;
+    readonly mobileLarge: 18;
+    readonly search: 19;
+    readonly row: 20;
+    readonly dialog: 24;
+    readonly mobileHero: 28;
+    readonly disc: 32;
+    readonly success: 34;
+    readonly device: 36;
+    readonly transport: 38;
+    readonly largeDisc: 40;
+    readonly emptyState: 42;
+    readonly xs: 6;
+    readonly sm: 8;
+    readonly md: 10;
+    readonly lg: 13;
+    readonly xl: 16;
+    readonly '2xl': 22;
+    readonly pill: 999;
+};
+/** A corner as a style takes it: px, or on a browser the custom property a
+ *  theme rewrites and what {@link nestedRadius} derives from one. */
+export type Radius = number | `var(${string})` | `calc(${string})`;
+/** The radius of a box nested inside another, given the space between their
+ *  edges: corners are concentric only when the inner one is the outer minus
+ *  the inset. Through the cascade the difference is a `calc()`, and one that
+ *  goes negative is a length the browser drops, which is the square corner the
+ *  clamp gives a number. */
+export declare function nestedRadius(outer: Radius, inset: number): Radius;
+/** Radii a theme adds. Augment it and the name is legal wherever a radius is
+ *  written: the `radius:` shorthand, <Box radius> (see `ColorRegistry`). */
+export interface RadiusRegistry {
+}
+export type RadiusToken = TokenOf<typeof radius, RadiusRegistry>;
+/** What `'circle'` falls back to where the box's own side is not known at style
+ *  time: every target clamps a corner to half the shorter side. */
+export declare const CIRCLE_RADIUS = 9999;
+/**
+ * Everything a corner may be written as: a radius token, a raw px value, or
+ * `'circle'`.
+ *
+ * `'circle'` is GEOMETRY, not corner language, and is not a member of the scale
+ * above: a theme restating every radius may square a button, but it must not
+ * flatten a spinner, a radio or an avatar into a box.
+ */
+export type CornerValue = RadiusToken | 'circle' | Radius;
+/** Layout gutters. `tv` is the 10-foot side padding (overscan-safe on every
+ * panel we ship to). */
+export declare const gutter: {
+    readonly tv: 64;
+    readonly web: 56;
+    readonly mobile: 20;
+};
+/** Component rhythm shared by the rails. */
+export declare const rhythm: {
+    readonly rowGap: 18;
+    readonly cardWidth: 208;
+};
+/** Stretch to the positioned parent. React Native 0.86 removed
+ * `StyleSheet.absoluteFillObject`, and `StyleSheet.absoluteFill` is an opaque
+ * registered style that cannot be spread, so the plain object lives here. */
+export declare const absoluteFill: {
+    readonly position: 'absolute';
+    readonly top: 0;
+    readonly left: 0;
+    readonly right: 0;
+    readonly bottom: 0;
+};

package/types/ui/src/core/tokens/mobile.d.ts

@@ -0,0 +1,91 @@
+import type { TextStyle } from 'react-native';
+/** Rounder than the 10-foot radii: a phone's chrome sits closer to the eye and
+ * a tighter corner reads as sharp rather than crisp. */
+export declare const mobileRadius: {
+    readonly sm: 10;
+    readonly md: 14;
+    readonly lg: 18;
+    readonly xl: 28;
+    readonly pill: 999;
+};
+/** The phone's spacing ramp, named by t-shirt size the way the screens read it. */
+export declare const mobileSpace: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+};
+/**
+ * Type roles for a phone: the same families and weights as the 10-foot ramp, at
+ * the sizes a hand-held screen wants. Colour is applied by the component, not
+ * baked in, so a role can be reused on any surface.
+ *
+ * Authored as SPECS, not as finished styles, for the same reason the 10-foot
+ * ramp is: a spec carries the line-height ratio and the tracking in em, so a
+ * role keeps its proportions at whatever size a call site asks for, and a theme
+ * can restate the families without every role being rewritten.
+ *
+ * The ratios tighten as the size grows, which is what a phone wants: a 34pt
+ * screen title set at body leading looks airy and wastes a third of the fold,
+ * and 13pt caption set at title leading runs together.
+ */
+export declare const mobileTypeSpec: {
+    readonly display: {
+        readonly family: 'display';
+        readonly weight: '800';
+        readonly size: 34;
+        readonly ratio: 1.18;
+        readonly em: -0.0235;
+    };
+    readonly title: {
+        readonly family: 'display';
+        readonly weight: '800';
+        readonly size: 28;
+        readonly ratio: 1.21;
+        readonly em: -0.0179;
+    };
+    readonly heading: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 20;
+        readonly ratio: 1.3;
+        readonly em: -0.015;
+    };
+    readonly section: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 18;
+        readonly ratio: 1.33;
+        readonly em: -0.0167;
+    };
+    readonly body: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 15;
+        readonly ratio: 1.47;
+    };
+    readonly caption: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 13;
+        readonly ratio: 1.38;
+    };
+    readonly small: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 11;
+        readonly ratio: 1.45;
+    };
+};
+/** Exactly the keys `toType` emits, and no wider: these roles are SPREAD into
+ *  `styles({...})` declarations, and a full `TextStyle` there drags two hundred
+ *  optional properties into a shape that only wants five. */
+type MobileRoleStyle = Pick<TextStyle, 'fontFamily' | 'fontWeight' | 'fontSize' | 'lineHeight' | 'letterSpacing'>;
+/** The finished phone roles, derived from the specs above exactly as the
+ *  10-foot ones are (see `toType`), so they carry a line height rather than
+ *  leaving each platform's default leading to decide. */
+export declare const mobileType: Record<MobileTypeRole, MobileRoleStyle>;
+export type MobileTypeRole = keyof typeof mobileTypeSpec;
+/** The display family, for the few places a phone screen wants the title face. */
+export { fonts as mobileFonts } from './typography';

package/types/ui/src/core/tokens/registry.d.ts

@@ -0,0 +1,4 @@
+/** A token union that stays open: the base table's names plus whatever its
+ *  registry gains through module augmentation (see `ColorRegistry`). Written
+ *  as one generic so each group's union reads identically. */
+export type TokenOf<Base, Registry> = keyof Base | keyof Registry;

package/types/ui/src/core/tokens/typography.d.ts

@@ -0,0 +1,265 @@
+import type { TextStyle } from 'react-native';
+import type { TokenOf } from './registry';
+export declare const fonts: {
+    readonly display: 'Bricolage Grotesque';
+    readonly ui: 'Hanken Grotesk';
+    readonly mono: 'ui-monospace, SFMono-Regular, Menlo, monospace';
+};
+/** The families KROMA serves as woff2. `mono` is absent on purpose: it is a
+ *  system stack, so there is no file to name, fingerprint or preload. */
+export declare const SELF_HOSTED: readonly string[];
+/** What a family paints with: a self-hosted face carries the system fallbacks
+ *  it is served beside, any other family is written as given. */
+export declare function fontStack(family: string): string;
+/** Families a theme adds. Augment it and the name is legal wherever a family is
+ *  written: a `font:` shorthand, a role's `family` (see `ColorRegistry`). */
+export interface FontRegistry {
+}
+export type FontToken = TokenOf<typeof fonts, FontRegistry>;
+/** Tracking as authored, in em. */
+export declare const tracking: {
+    readonly overline: 0.12;
+    readonly overlineTv: 0.22;
+    readonly display: -0.02;
+    readonly section: 0.04;
+    readonly footnote: 0.02;
+    readonly code: 0.0833;
+};
+export interface TypeSpec {
+    family: FontToken;
+    weight: '400' | '500' | '600' | '700' | '800';
+    size: number;
+    /** Line height as a multiple of `size`. */
+    ratio: number;
+    em?: number;
+    uppercase?: boolean;
+}
+/** A role's finished style: px off the browser, and on one the custom
+ *  properties the token sheet publishes it as, which a theme rewrites. */
+export type RoleStyle = Omit<TextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'letterSpacing'> & {
+    fontSize?: number | string;
+    lineHeight?: number | string;
+    fontWeight?: string;
+    letterSpacing?: number | string;
+};
+/** Size-only tokens for custom layouts that supply their own weight and leading.
+ * Complete text styles use the authored type roles below. */
+export declare const fontSizes: {
+    readonly micro: 10;
+    readonly microRaised: 10.5;
+    readonly overlineRaised: 11.5;
+    readonly caption: 12;
+    readonly captionRaised: 12.5;
+    readonly metaRaised: 13.5;
+    readonly compactLabel: 14;
+    readonly compactLabelRaised: 14.5;
+    readonly largeLabel: 18;
+    readonly controlTitle: 19;
+    readonly tileTitle: 23;
+    readonly panelTitle: 24;
+    readonly mobileDisplay: 34;
+    readonly pageTitle: 36;
+    readonly pageTitleMedium: 40;
+    readonly browseTitle: 46;
+    readonly pageTitleWide: 48;
+    readonly pageTitleTv: 56;
+};
+export declare const typeSpec: {
+    readonly hero: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 66;
+        readonly ratio: 0.98;
+        readonly em: -0.02;
+    };
+    readonly h1: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 38;
+        readonly ratio: 1;
+        readonly em: -0.02;
+    };
+    readonly heading: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 30;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly subheading: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 26;
+        readonly ratio: 1.07;
+        readonly em: -0.02;
+    };
+    readonly h2: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 22;
+        readonly ratio: 1.1;
+        readonly em: -0.02;
+    };
+    readonly title: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 20;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly cardTitle: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 17;
+        readonly ratio: 1.2;
+        readonly em: -0.02;
+    };
+    readonly body: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 16;
+        readonly ratio: 1.55;
+    };
+    readonly label: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 15;
+        readonly ratio: 1.3;
+    };
+    readonly meta: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 13;
+        readonly ratio: 1.4;
+    };
+    readonly overline: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 11;
+        readonly ratio: 1;
+        readonly em: 0.12;
+        readonly uppercase: true;
+    };
+    readonly codeTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 96;
+        readonly ratio: 1;
+        readonly em: 0.0833;
+    };
+    readonly heroTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 82;
+        readonly ratio: 0.96;
+        readonly em: -0.02;
+    };
+    readonly bannerTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 59;
+        readonly ratio: 0.98;
+        readonly em: -0.02;
+    };
+    readonly titleTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 44;
+        readonly ratio: 1;
+        readonly em: -0.02;
+    };
+    readonly headingTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 32;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly subheadingTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 28;
+        readonly ratio: 1.07;
+        readonly em: -0.02;
+    };
+    readonly bodyTv: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 20;
+        readonly ratio: 1.5;
+    };
+    readonly leadTv: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 17;
+        readonly ratio: 1.4;
+    };
+    readonly labelTv: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 17;
+        readonly ratio: 1.3;
+    };
+    readonly strongTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 17;
+        readonly ratio: 1.3;
+    };
+    readonly captionTv: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 15;
+        readonly ratio: 1.47;
+    };
+    readonly metaTv: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 15;
+        readonly ratio: 1.4;
+    };
+    readonly sectionTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 15;
+        readonly ratio: 1.2;
+        readonly em: 0.04;
+    };
+    readonly footnoteTv: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 13;
+        readonly ratio: 1.23;
+        readonly em: 0.02;
+    };
+    /** The eyebrow at 10-foot distance: authored wider, not the phone's tracking
+     * scaled up. `fontSize` may be overridden - <Text> re-derives from the em. */
+    readonly overlineTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 13;
+        readonly ratio: 1.23;
+        readonly em: 0.22;
+        readonly uppercase: true;
+    };
+};
+/** The base tier, largest first: what the web client, the desktop shell and the
+ *  phone-facing components read. Same order and the same purpose as
+ *  {@link TV_RAMP}. */
+export declare const BASE_RAMP: readonly ["hero", "h1", "heading", "subheading", "h2", "title", "cardTitle", "body", "label", "meta", "overline"];
+/** The 10-foot tier, largest first. The ramp's own order, so a caller reaching
+ *  for "one step down" reads it off rather than guessing, and so the invariants
+ *  that keep it a ramp have something to run over. */
+export declare const TV_RAMP: readonly ["codeTv", "heroTv", "bannerTv", "titleTv", "headingTv", "subheadingTv", "bodyTv", "leadTv", "labelTv", "strongTv", "captionTv", "metaTv", "sectionTv", "footnoteTv", "overlineTv"];
+/** Roles a theme adds. Augment it and the name is legal wherever a role is
+ *  written: a recipe's `text:` shorthand, <Text variant> (see `ColorRegistry`). */
+export interface TypeRoleRegistry {
+}
+export type TypeRole = TokenOf<typeof typeSpec, TypeRoleRegistry>;
+/**
+ * Derives the finished text styles from the authored specs against a set of
+ * families. Parameterised because a theme can restate either side: `createTheme`
+ * re-derives, so a swapped display font reaches every role that names it.
+ */
+export declare function toType(spec: Readonly<Record<string, TypeSpec>>, families: Readonly<Record<string, string>>): Record<string, TextStyle>;
+export declare const type: Record<TypeRole, TextStyle>;