@thewhileloop/whileui 3.0.0 → 4.1.0

package/dist/index.js

@@ -7,7 +7,7 @@ export { PortalHost } from './lib/portal';
 export { ThemeBridge, applyThemeMode, resolveThemeMode, syncThemeMode, useThemeBridge, } from './lib/theme-bridge';
 export { useThemeColors, useThemeTokens, useIconColors, } from './lib/theme-colors';
 export { THEME_TOKEN_SPECS, THEME_TOKEN_GROUPS, WHILEUI_LIGHT_THEME_COLORS, WHILEUI_DARK_THEME_COLORS, } from './lib/theme-contract';
-export { useInteractionTokens, withInteractivePressableStyle, } from './lib/interaction-tokens';
+export { INTERACTION_TOKENS, useInteractionTokens, withInteractivePressableStyle, } from './lib/interaction-tokens';
 export { MotionProvider, useMotionPolicy, } from './lib/motion-policy';
 export { useVisualTokens } from './lib/visual-tokens';
 export { VISUAL_TOKEN_SPECS, VISUAL_TOKEN_GROUPS, } from './lib/visual-token-contract';
@@ -16,6 +16,7 @@ export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadiu
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
 export { Text, textVariants } from './components/text';
+export { Surface } from './components/surface';
 export { View } from './components/view';
 export { Pressable } from './components/pressable';
 export { Stack, stackVariants } from './components/stack';
@@ -25,9 +26,10 @@ export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
 export { Input, inputVariants } from './components/input';
 export { NumericInput, numericInputVariants, numericInputTextVariants, } from './components/numeric-input';
 export { OTPInput, otpCellVariants } from './components/otp-input';
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, } from './components/form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, } from './components/form-field';
 export { LabeledField, LabeledFieldControl, } from './components/labeled-field';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, } from './components/badge';
+export { FAB, FABGroup, fabVariants } from './components/fab';
 export { Alert, AlertTitle, AlertDescription, alertVariants, } from './components/alert';
 export { Switch } from './components/switch';
 export { Checkbox } from './components/checkbox';

package/dist/lib/focus-ring.d.ts

@@ -23,3 +23,13 @@ export declare const focusRing = "web:outline-none web:focus-visible:ring-2 web:
  * would be clipped by the parent or collide with a neighbour.
  */
 export declare const focusRingInset = "web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring";
+/**
+ * For text fields. Browsers treat every focus on a text field as keyboard focus, so a
+ * `:focus-visible` ring fires on a tap too — and an offset ring around a rounded field
+ * reads as a second, squarer border. A field shows focus the way the platforms do:
+ * its own border takes the ring colour. The class carries the colour; a field whose
+ * border lives on a wrapper (`Input`, `NumericInput`) applies it there from focus state.
+ */
+export declare const focusField = "web:outline-none web:focus-visible:border-ring";
+/** The wrapper half of `focusField`: the border colour while the inner field has focus. */
+export declare const focusFieldWrapper = "border-ring";

package/dist/lib/focus-ring.js

@@ -23,3 +23,13 @@ export const focusRing = 'web:outline-none web:focus-visible:ring-2 web:focus-vi
  * would be clipped by the parent or collide with a neighbour.
  */
 export const focusRingInset = 'web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring';
+/**
+ * For text fields. Browsers treat every focus on a text field as keyboard focus, so a
+ * `:focus-visible` ring fires on a tap too — and an offset ring around a rounded field
+ * reads as a second, squarer border. A field shows focus the way the platforms do:
+ * its own border takes the ring colour. The class carries the colour; a field whose
+ * border lives on a wrapper (`Input`, `NumericInput`) applies it there from focus state.
+ */
+export const focusField = 'web:outline-none web:focus-visible:border-ring';
+/** The wrapper half of `focusField`: the border colour while the inner field has focus. */
+export const focusFieldWrapper = 'border-ring';

package/dist/lib/interaction-tokens.d.ts

@@ -1,5 +1,28 @@
 import { type PressableProps } from 'react-native';
-/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
+/**
+ * Press, disabled, and motion timing for the whole package.
+ *
+ * These are not theme tokens. A generated preset does not emit them, and reading the
+ * matching `--ui-*` variables warned in every app on that preset while resolving to
+ * these same numbers. One table, no CSS lookup.
+ */
+export declare const INTERACTION_TOKENS: {
+    readonly pressOpacity: 0.82;
+    readonly pressOpacityStrong: 0.92;
+    readonly disabledOpacity: 0.46;
+    readonly disabledOpacitySoft: 0.56;
+    readonly disabledOpacitySubtle: 0.36;
+    readonly inactiveOpacity: 0.54;
+    readonly motionFast: 140;
+    readonly motionNormal: 200;
+    readonly motionSlow: 280;
+    readonly motionSpringDamping: 20;
+    readonly motionSpringStiffness: 260;
+    readonly motionSpringMass: 0.8;
+    readonly drawerOpenDuration: 260;
+    readonly drawerCloseDuration: 180;
+};
+/** Motion slice of {@link INTERACTION_TOKENS}, for the provider-less policy. */
 export declare const MOTION_TOKEN_DEFAULTS: {
     readonly motionFast: 140;
     readonly motionNormal: 200;

package/dist/lib/interaction-tokens.js

@@ -1,55 +1,37 @@
-import { useCSSVariable } from 'uniwind';
-function parseNumber(value, fallback) {
-    if (value === undefined || value === null)
-        return fallback;
-    const parsed = Number.parseFloat(String(value));
-    return Number.isFinite(parsed) ? parsed : fallback;
-}
-function clampOpacity(value) {
-    return Math.max(0, Math.min(1, value));
-}
-/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
-export const MOTION_TOKEN_DEFAULTS = {
+/**
+ * Press, disabled, and motion timing for the whole package.
+ *
+ * These are not theme tokens. A generated preset does not emit them, and reading the
+ * matching `--ui-*` variables warned in every app on that preset while resolving to
+ * these same numbers. One table, no CSS lookup.
+ */
+export const INTERACTION_TOKENS = {
+    pressOpacity: 0.82,
+    pressOpacityStrong: 0.92,
+    disabledOpacity: 0.46,
+    disabledOpacitySoft: 0.56,
+    disabledOpacitySubtle: 0.36,
+    inactiveOpacity: 0.54,
     motionFast: 140,
     motionNormal: 200,
     motionSlow: 280,
     motionSpringDamping: 20,
     motionSpringStiffness: 260,
     motionSpringMass: 0.8,
+    drawerOpenDuration: 260,
+    drawerCloseDuration: 180,
+};
+/** Motion slice of {@link INTERACTION_TOKENS}, for the provider-less policy. */
+export const MOTION_TOKEN_DEFAULTS = {
+    motionFast: INTERACTION_TOKENS.motionFast,
+    motionNormal: INTERACTION_TOKENS.motionNormal,
+    motionSlow: INTERACTION_TOKENS.motionSlow,
+    motionSpringDamping: INTERACTION_TOKENS.motionSpringDamping,
+    motionSpringStiffness: INTERACTION_TOKENS.motionSpringStiffness,
+    motionSpringMass: INTERACTION_TOKENS.motionSpringMass,
 };
 export function useInteractionTokens() {
-    const [pressOpacity, pressOpacityStrong, disabledOpacity, disabledOpacitySoft, disabledOpacitySubtle, inactiveOpacity, motionFast, motionNormal, motionSlow, motionSpringDamping, motionSpringStiffness, motionSpringMass, drawerOpenDuration, drawerCloseDuration,] = useCSSVariable([
-        '--ui-press-opacity',
-        '--ui-press-opacity-strong',
-        '--ui-disabled-opacity',
-        '--ui-disabled-opacity-soft',
-        '--ui-disabled-opacity-subtle',
-        '--ui-inactive-opacity',
-        '--ui-motion-fast',
-        '--ui-motion-normal',
-        '--ui-motion-slow',
-        '--ui-motion-spring-damping',
-        '--ui-motion-spring-stiffness',
-        '--ui-motion-spring-mass',
-        '--ui-drawer-open-duration',
-        '--ui-drawer-close-duration',
-    ]);
-    return {
-        pressOpacity: clampOpacity(parseNumber(pressOpacity, 0.82)),
-        pressOpacityStrong: clampOpacity(parseNumber(pressOpacityStrong, 0.92)),
-        disabledOpacity: clampOpacity(parseNumber(disabledOpacity, 0.46)),
-        disabledOpacitySoft: clampOpacity(parseNumber(disabledOpacitySoft, 0.56)),
-        disabledOpacitySubtle: clampOpacity(parseNumber(disabledOpacitySubtle, 0.36)),
-        inactiveOpacity: clampOpacity(parseNumber(inactiveOpacity, 0.54)),
-        motionFast: Math.max(0, Math.round(parseNumber(motionFast, MOTION_TOKEN_DEFAULTS.motionFast))),
-        motionNormal: Math.max(0, Math.round(parseNumber(motionNormal, MOTION_TOKEN_DEFAULTS.motionNormal))),
-        motionSlow: Math.max(0, Math.round(parseNumber(motionSlow, MOTION_TOKEN_DEFAULTS.motionSlow))),
-        motionSpringDamping: Math.max(0, parseNumber(motionSpringDamping, MOTION_TOKEN_DEFAULTS.motionSpringDamping)),
-        motionSpringStiffness: Math.max(0, parseNumber(motionSpringStiffness, MOTION_TOKEN_DEFAULTS.motionSpringStiffness)),
-        motionSpringMass: Math.max(0.01, parseNumber(motionSpringMass, MOTION_TOKEN_DEFAULTS.motionSpringMass)),
-        drawerOpenDuration: Math.max(0, Math.round(parseNumber(drawerOpenDuration, 260))),
-        drawerCloseDuration: Math.max(0, Math.round(parseNumber(drawerCloseDuration, 180))),
-    };
+    return INTERACTION_TOKENS;
 }
 function resolveDisabledOpacity(tokens, variant) {
     if (variant === 'none')

package/dist/lib/motion-policy.js

@@ -4,8 +4,8 @@ import { AccessibilityInfo } from 'react-native';
 import { ReduceMotion, useReducedMotion } from 'react-native-reanimated';
 import { MOTION_TOKEN_DEFAULTS, useInteractionTokens } from './interaction-tokens';
 // Without a provider, components still render and Reanimated still follows the system
-// setting. Only `--ui-motion-*` overrides and the non-Reanimated reduced-motion paths
-// need `MotionProvider` at the root.
+// setting. The provider is what switches the non-Reanimated paths to reduced or
+// disabled motion. Durations and the spring come from `INTERACTION_TOKENS` either way.
 const DEFAULT_MOTION_POLICY = {
     mode: 'system',
     reduceMotion: false,

package/dist/lib/theme-presets.d.ts

@@ -1,4 +1,5 @@
 import { type ThemeColors } from './theme-contract';
+import { type ThemeBaseColors } from './theme-derive';
 import { type VisualTokens } from './visual-token-contract';
 /**
  * Canonical full-package theme presets.
@@ -15,6 +16,31 @@ export interface ThemePreset {
     /** Visual token overrides; unset keys keep contract fallbacks. */
     visual: Partial<VisualTokens>;
 }
+/**
+ * Build a preset from the 25 base colors, deriving the other 27.
+ *
+ * Prefer this to writing a `ThemePreset` literal. `visual` has always been
+ * `Partial`, but `light` and `dark` are the full 52-key `ThemeColors`, so the
+ * literal form asks an author for every active variant, soft variant, overlay,
+ * surface, interaction state and shadow — values `deriveThemeColors` already
+ * computes from the palette. Nothing in the literal's type points at that helper,
+ * and the predictable result is a hand-written derivation that drifts from the
+ * library's own. The Atelier preset below is 110 lines for this reason.
+ *
+ * Override a derived value by spreading the result:
+ *
+ * ```ts
+ * const preset = createThemePreset({ name, description, light, dark });
+ * preset.dark.overlay = 'rgba(0, 0, 0, 0.9)';
+ * ```
+ */
+export declare function createThemePreset(input: {
+    name: string;
+    description: string;
+    light: ThemeBaseColors;
+    dark: ThemeBaseColors;
+    visual?: Partial<VisualTokens>;
+}): ThemePreset;
 export declare const WHILEUI_PRESET_SOFT: ThemePreset;
 export declare const WHILEUI_PRESET_ATELIER: ThemePreset;
 export declare const WHILEUI_THEME_PRESETS: readonly ThemePreset[];

package/dist/lib/theme-presets.js

@@ -1,5 +1,33 @@
 import { THEME_TOKEN_SPECS, WHILEUI_DARK_THEME_COLORS, WHILEUI_LIGHT_THEME_COLORS, } from './theme-contract';
+import { deriveThemeColors } from './theme-derive';
 import { VISUAL_TOKEN_SPECS } from './visual-token-contract';
+/**
+ * Build a preset from the 25 base colors, deriving the other 27.
+ *
+ * Prefer this to writing a `ThemePreset` literal. `visual` has always been
+ * `Partial`, but `light` and `dark` are the full 52-key `ThemeColors`, so the
+ * literal form asks an author for every active variant, soft variant, overlay,
+ * surface, interaction state and shadow — values `deriveThemeColors` already
+ * computes from the palette. Nothing in the literal's type points at that helper,
+ * and the predictable result is a hand-written derivation that drifts from the
+ * library's own. The Atelier preset below is 110 lines for this reason.
+ *
+ * Override a derived value by spreading the result:
+ *
+ * ```ts
+ * const preset = createThemePreset({ name, description, light, dark });
+ * preset.dark.overlay = 'rgba(0, 0, 0, 0.9)';
+ * ```
+ */
+export function createThemePreset(input) {
+    return {
+        name: input.name,
+        description: input.description,
+        light: deriveThemeColors(input.light, 'light'),
+        dark: deriveThemeColors(input.dark, 'dark'),
+        visual: input.visual ?? {},
+    };
+}
 // Rounded, airy, frosted. Matches the contract fallbacks.
 export const WHILEUI_PRESET_SOFT = {
     name: 'soft',

package/dist/lib/web-autofill.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Browser autofill paints its own field background and text colours. The large inset
+ * shadow covers that paint without changing the native style contract; the other two
+ * declarations restore the active theme's text and caret.
+ *
+ * Apply only to fields whose own surface is `bg-muted`. Transparent/unstyled inputs
+ * must keep inheriting the surface chosen by their composition.
+ */
+export declare const webAutofillField = "web:autofill:shadow-[inset_0_0_0_1000px_var(--color-muted)] web:autofill:[-webkit-text-fill-color:var(--color-foreground)] web:autofill:caret-foreground";

package/dist/lib/web-autofill.js

@@ -0,0 +1,9 @@
+/**
+ * Browser autofill paints its own field background and text colours. The large inset
+ * shadow covers that paint without changing the native style contract; the other two
+ * declarations restore the active theme's text and caret.
+ *
+ * Apply only to fields whose own surface is `bg-muted`. Transparent/unstyled inputs
+ * must keep inheriting the surface chosen by their composition.
+ */
+export const webAutofillField = 'web:autofill:shadow-[inset_0_0_0_1000px_var(--color-muted)] web:autofill:[-webkit-text-fill-color:var(--color-foreground)] web:autofill:caret-foreground';

package/dist/markdown.d.ts

@@ -0,0 +1 @@
+export { Markdown, type MarkdownProps } from './components/markdown';

package/dist/markdown.js

@@ -0,0 +1 @@
+export { Markdown } from './components/markdown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "3.0.0",
+  "version": "4.1.0",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,14 @@
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
+    "./code": {
+      "types": "./dist/code.d.ts",
+      "import": "./dist/code.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -78,11 +86,15 @@
     "react-native-screens": ">=4.30.0",
     "tailwindcss": ">=4.0.0",
     "uniwind": ">=1.12.0",
-    "react-native-worklets": ">=0.13.0"
+    "react-native-worklets": ">=0.13.0",
+    "markdown-it": ">=14.1.0"
   },
   "peerDependenciesMeta": {
     "expo-blur": {
       "optional": true
+    },
+    "markdown-it": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -97,10 +109,12 @@
     "@testing-library/react-native": "^14.1.0",
     "@types/culori": "^4.0.1",
     "@types/jest": "^30.0.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/react": "~19.3.0",
     "expo-image": "~58.0.15",
     "jest": "^30.5.2",
     "jest-expo": "~58.0.11",
+    "markdown-it": "^14.1.0",
     "react-native-screens": "~4.30.0",
     "test-renderer": "^1.3.1",
     "typescript": "~6.0.3"