@dloizides/ui-motion 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.2.0
+
+### Added
+- `@dloizides/ui-motion/hairline`: `HairlineFigure` (web: vanilla `@lucasmarkes/hairline@0.3.0` on the host DOM node; native: inlined bundle in `react-native-webview`, optional peer), `HairlineFigureName`, `hairlineVars` token mapping (HAIRLINE-1 "Adopt hairline isometric line figures").
+
 ## 1.1.0
 
 ### Added

package/README.md

@@ -118,3 +118,11 @@ verified in the app E2E suites.
 ## License
 
 MIT © dloizides
+
+## HairlineFigure (`@dloizides/ui-motion/hairline`)
+
+Wraps `@lucasmarkes/hairline@0.3.0` (exact pin) so apps never import it directly. Props: `figure` (`HairlineFigureName`), `colors` (a `ModeColors` from `@dloizides/design-tokens`, mapped onto `--hairline-*` by `hairlineVars`), `intensity` (0-1), `label` (translated), `testID`.
+
+- Web (RN-web, `browser` condition): mounts the vanilla API on the View's DOM node; destroyed on unmount.
+- Native (`react-native` condition): renders the upstream bundle inlined as HTML in `react-native-webview` (optional peer; install it to use this subpath on iOS/Android). One figure per screen.
+- A figure is decoration: never put information a user needs in it. On touch-first screens prefer horizontal/area figures (`terrain`, `riffle`, `keyboard`, `router`, `rail`, `dish`, `turntable`, `plot`).

package/dist/constants-BrJ7VJYu.d.mts

@@ -0,0 +1,54 @@
+import { ModeColors } from '@dloizides/design-tokens';
+
+declare const enum HairlineFigureName {
+    Basket = "basket",
+    Branches = "branches",
+    Cabinet = "cabinet",
+    Dish = "dish",
+    Drawer = "drawer",
+    Elevator = "elevator",
+    Exploded = "exploded",
+    Keyboard = "keyboard",
+    Laptop = "laptop",
+    Lockers = "lockers",
+    Loupe = "loupe",
+    Padlock = "padlock",
+    Patch = "patch",
+    Phone = "phone",
+    Phosphor = "phosphor",
+    Plot = "plot",
+    Plug = "plug",
+    Query = "query",
+    Rail = "rail",
+    Riffle = "riffle",
+    Router = "router",
+    Sieve = "sieve",
+    Slow = "slow",
+    Terminal = "terminal",
+    Terrain = "terrain",
+    Turntable = "turntable",
+    Vault = "vault"
+}
+
+interface HairlineFigureProps {
+    /** Which upstream figure to draw. */
+    figure: HairlineFigureName;
+    /** Mode colours of the current theme; mapped onto the `--hairline-*` vars. */
+    colors: ModeColors;
+    /** Pointer response strength, 0 (subtle) to 1 (strong). */
+    intensity?: number;
+    /** Accessible name of the figure (pass a translated string). */
+    label?: string;
+    testID?: string;
+}
+type HairlineVarName = '--hairline-plate' | '--hairline-hi' | '--hairline-edge' | '--hairline-mid' | '--hairline-lo';
+type HairlineVars = Record<HairlineVarName, string>;
+
+/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */
+declare const hairlineVars: (colors: ModeColors) => HairlineVars;
+
+declare const HAIRLINE_TEST_ID = "motion-hairline-figure";
+declare const HAIRLINE_ASPECT_RATIO: number;
+declare const DEFAULT_HAIRLINE_INTENSITY = 0.5;
+
+export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, type HairlineVarName as d, type HairlineVars as e, hairlineVars as h };

package/dist/constants-BrJ7VJYu.d.ts

@@ -0,0 +1,54 @@
+import { ModeColors } from '@dloizides/design-tokens';
+
+declare const enum HairlineFigureName {
+    Basket = "basket",
+    Branches = "branches",
+    Cabinet = "cabinet",
+    Dish = "dish",
+    Drawer = "drawer",
+    Elevator = "elevator",
+    Exploded = "exploded",
+    Keyboard = "keyboard",
+    Laptop = "laptop",
+    Lockers = "lockers",
+    Loupe = "loupe",
+    Padlock = "padlock",
+    Patch = "patch",
+    Phone = "phone",
+    Phosphor = "phosphor",
+    Plot = "plot",
+    Plug = "plug",
+    Query = "query",
+    Rail = "rail",
+    Riffle = "riffle",
+    Router = "router",
+    Sieve = "sieve",
+    Slow = "slow",
+    Terminal = "terminal",
+    Terrain = "terrain",
+    Turntable = "turntable",
+    Vault = "vault"
+}
+
+interface HairlineFigureProps {
+    /** Which upstream figure to draw. */
+    figure: HairlineFigureName;
+    /** Mode colours of the current theme; mapped onto the `--hairline-*` vars. */
+    colors: ModeColors;
+    /** Pointer response strength, 0 (subtle) to 1 (strong). */
+    intensity?: number;
+    /** Accessible name of the figure (pass a translated string). */
+    label?: string;
+    testID?: string;
+}
+type HairlineVarName = '--hairline-plate' | '--hairline-hi' | '--hairline-edge' | '--hairline-mid' | '--hairline-lo';
+type HairlineVars = Record<HairlineVarName, string>;
+
+/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */
+declare const hairlineVars: (colors: ModeColors) => HairlineVars;
+
+declare const HAIRLINE_TEST_ID = "motion-hairline-figure";
+declare const HAIRLINE_ASPECT_RATIO: number;
+declare const DEFAULT_HAIRLINE_INTENSITY = 0.5;
+
+export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, type HairlineVarName as d, type HairlineVars as e, hairlineVars as h };

package/dist/hairline/native.d.mts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.mjs';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.mjs';
+import '@dloizides/design-tokens';
+
+/** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */
+declare const HairlineFigure: ({ figure, colors, intensity, label, testID, }: HairlineFigureProps) => React.ReactElement;
+
+export { HairlineFigure, HairlineFigureProps };

package/dist/hairline/native.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.js';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.js';
+import '@dloizides/design-tokens';
+
+/** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */
+declare const HairlineFigure: ({ figure, colors, intensity, label, testID, }: HairlineFigureProps) => React.ReactElement;
+
+export { HairlineFigure, HairlineFigureProps };