@sigx/lynx-zero 0.4.9 → 0.5.0

package/src/shared/styles.ts

@@ -1,82 +1,82 @@
-/**
- * Box-model style helpers shared by layout primitives and design-system
- * components. Color values resolve through the semantic token contract
- * (`resolveColorToken`), so `<Col background="base-100">` works identically
- * under every design system's active theme.
- */
-import { resolveColorToken, type BackgroundValue } from '../contract.js';
-
-export type SpacingValue = number | {
-  x?: number;
-  y?: number;
-  top?: number;
-  right?: number;
-  bottom?: number;
-  left?: number;
-};
-
-export interface BoxProps {
-  width?: number | string;
-  height?: number | string;
-  flex?: number;
-  background?: BackgroundValue;
-  borderRadius?: number;
-  padding?: SpacingValue;
-  margin?: SpacingValue;
-}
-
-export function resolveSpacing(
-  value: SpacingValue | undefined,
-  prefix: 'padding' | 'margin'
-): Record<string, number> {
-  if (value === undefined) return {};
-
-  if (typeof value === 'number') {
-    return {
-      [`${prefix}Top`]: value,
-      [`${prefix}Right`]: value,
-      [`${prefix}Bottom`]: value,
-      [`${prefix}Left`]: value,
-    };
-  }
-
-  const style: Record<string, number> = {};
-
-  if (value.top !== undefined) style[`${prefix}Top`] = value.top;
-  else if (value.y !== undefined) style[`${prefix}Top`] = value.y;
-
-  if (value.bottom !== undefined) style[`${prefix}Bottom`] = value.bottom;
-  else if (value.y !== undefined) style[`${prefix}Bottom`] = value.y;
-
-  if (value.right !== undefined) style[`${prefix}Right`] = value.right;
-  else if (value.x !== undefined) style[`${prefix}Right`] = value.x;
-
-  if (value.left !== undefined) style[`${prefix}Left`] = value.left;
-  else if (value.x !== undefined) style[`${prefix}Left`] = value.x;
-
-  return style;
-}
-
-export function resolveBoxStyle(props: BoxProps): Record<string, unknown> {
-  const style: Record<string, unknown> = {};
-
-  if (props.width !== undefined) style.width = props.width;
-  if (props.height !== undefined) style.height = props.height;
-  if (props.flex !== undefined) {
-    // Lynx (like React Native) expands `flex: n` shorthand to
-    // `flex: n n auto`, where `flexBasis: 'auto'` means "size to content
-    // first" — which collapses the layout chain. Write the long-form so
-    // `<Center flex={1}>` etc. actually fill remaining space.
-    style.flexGrow = props.flex;
-    style.flexShrink = 1;
-    style.flexBasis = 0;
-    style.minHeight = 0;
-  }
-  if (props.background !== undefined) style.backgroundColor = resolveColorToken(props.background);
-  if (props.borderRadius !== undefined) style.borderRadius = props.borderRadius;
-
-  Object.assign(style, resolveSpacing(props.padding, 'padding'));
-  Object.assign(style, resolveSpacing(props.margin, 'margin'));
-
-  return style;
-}
+/**
+ * Box-model style helpers shared by layout primitives and design-system
+ * components. Color values resolve through the semantic token contract
+ * (`resolveColorToken`), so `<Col background="base-100">` works identically
+ * under every design system's active theme.
+ */
+import { resolveColorToken, type BackgroundValue } from '../contract.js';
+
+export type SpacingValue = number | {
+  x?: number;
+  y?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export interface BoxProps {
+  width?: number | string;
+  height?: number | string;
+  flex?: number;
+  background?: BackgroundValue;
+  borderRadius?: number;
+  padding?: SpacingValue;
+  margin?: SpacingValue;
+}
+
+export function resolveSpacing(
+  value: SpacingValue | undefined,
+  prefix: 'padding' | 'margin'
+): Record<string, number> {
+  if (value === undefined) return {};
+
+  if (typeof value === 'number') {
+    return {
+      [`${prefix}Top`]: value,
+      [`${prefix}Right`]: value,
+      [`${prefix}Bottom`]: value,
+      [`${prefix}Left`]: value,
+    };
+  }
+
+  const style: Record<string, number> = {};
+
+  if (value.top !== undefined) style[`${prefix}Top`] = value.top;
+  else if (value.y !== undefined) style[`${prefix}Top`] = value.y;
+
+  if (value.bottom !== undefined) style[`${prefix}Bottom`] = value.bottom;
+  else if (value.y !== undefined) style[`${prefix}Bottom`] = value.y;
+
+  if (value.right !== undefined) style[`${prefix}Right`] = value.right;
+  else if (value.x !== undefined) style[`${prefix}Right`] = value.x;
+
+  if (value.left !== undefined) style[`${prefix}Left`] = value.left;
+  else if (value.x !== undefined) style[`${prefix}Left`] = value.x;
+
+  return style;
+}
+
+export function resolveBoxStyle(props: BoxProps): Record<string, unknown> {
+  const style: Record<string, unknown> = {};
+
+  if (props.width !== undefined) style.width = props.width;
+  if (props.height !== undefined) style.height = props.height;
+  if (props.flex !== undefined) {
+    // Lynx (like React Native) expands `flex: n` shorthand to
+    // `flex: n n auto`, where `flexBasis: 'auto'` means "size to content
+    // first" — which collapses the layout chain. Write the long-form so
+    // `<Center flex={1}>` etc. actually fill remaining space.
+    style.flexGrow = props.flex;
+    style.flexShrink = 1;
+    style.flexBasis = 0;
+    style.minHeight = 0;
+  }
+  if (props.background !== undefined) style.backgroundColor = resolveColorToken(props.background);
+  if (props.borderRadius !== undefined) style.borderRadius = props.borderRadius;
+
+  Object.assign(style, resolveSpacing(props.padding, 'padding'));
+  Object.assign(style, resolveSpacing(props.margin, 'margin'));
+
+  return style;
+}

package/src/shared/tabs-selection.ts

@@ -1,57 +1,57 @@
-/**
- * Headless tabs selection — the shared behavior behind every design system's
- * `Tabs`/`Tab` pair (extracted once daisy and hero both duplicated it; the
- * #219 pilot was the evidence gate).
- *
- * The DS's `Tabs` container provides a `TabsSelection` built from its
- * `activeTab`/`onChange` props; each `Tab` injects it to derive its active
- * state from its `value` and to report presses. Explicit per-tab
- * `active`/`onPress` props take precedence in the DS components, so the
- * fully-controlled per-tab style keeps working.
- *
- * Reactivity: `provideTabsSelection` is called once at the container's setup
- * with *getters* into the container's reactive props, so `isActive()` reads
- * track the current `activeTab` value on every render.
- */
-import { defineInjectable, defineProvide } from '@sigx/lynx';
-
-export interface TabsSelection {
-  /** Whether the tab with this `value` is the selected one. Reactive. */
-  isActive(value: string): boolean;
-  /** Report a press on the tab with this `value` (drives `onChange`). */
-  select(value: string): void;
-}
-
-const NO_SELECTION: TabsSelection = {
-  isActive: () => false,
-  select: () => {},
-};
-
-/**
- * Inject the nearest enclosing `Tabs` container's selection. Outside any
- * container this resolves to an inert selection (never active, presses
- * no-op), so a bare `Tab` driven purely by `active`/`onPress` still works.
- */
-export const useTabsSelection = defineInjectable<TabsSelection>(() => NO_SELECTION);
-
-/**
- * Provide a selection for the subtree. Call from the DS `Tabs` container's
- * setup with getters into its reactive props:
- *
- * ```ts
- * provideTabsSelection(
- *   () => props.activeTab,
- *   (v) => props.onChange?.(v),
- * );
- * ```
- */
-export function provideTabsSelection(
-  getActive: () => string | undefined,
-  onSelect: (value: string) => void,
-): void {
-  const selection: TabsSelection = {
-    isActive: (value) => getActive() === value,
-    select: onSelect,
-  };
-  defineProvide(useTabsSelection, () => selection);
-}
+/**
+ * Headless tabs selection — the shared behavior behind every design system's
+ * `Tabs`/`Tab` pair (extracted once daisy and hero both duplicated it; the
+ * #219 pilot was the evidence gate).
+ *
+ * The DS's `Tabs` container provides a `TabsSelection` built from its
+ * `activeTab`/`onChange` props; each `Tab` injects it to derive its active
+ * state from its `value` and to report presses. Explicit per-tab
+ * `active`/`onPress` props take precedence in the DS components, so the
+ * fully-controlled per-tab style keeps working.
+ *
+ * Reactivity: `provideTabsSelection` is called once at the container's setup
+ * with *getters* into the container's reactive props, so `isActive()` reads
+ * track the current `activeTab` value on every render.
+ */
+import { defineInjectable, defineProvide } from '@sigx/lynx';
+
+export interface TabsSelection {
+  /** Whether the tab with this `value` is the selected one. Reactive. */
+  isActive(value: string): boolean;
+  /** Report a press on the tab with this `value` (drives `onChange`). */
+  select(value: string): void;
+}
+
+const NO_SELECTION: TabsSelection = {
+  isActive: () => false,
+  select: () => {},
+};
+
+/**
+ * Inject the nearest enclosing `Tabs` container's selection. Outside any
+ * container this resolves to an inert selection (never active, presses
+ * no-op), so a bare `Tab` driven purely by `active`/`onPress` still works.
+ */
+export const useTabsSelection = defineInjectable<TabsSelection>(() => NO_SELECTION);
+
+/**
+ * Provide a selection for the subtree. Call from the DS `Tabs` container's
+ * setup with getters into its reactive props:
+ *
+ * ```ts
+ * provideTabsSelection(
+ *   () => props.activeTab,
+ *   (v) => props.onChange?.(v),
+ * );
+ * ```
+ */
+export function provideTabsSelection(
+  getActive: () => string | undefined,
+  onSelect: (value: string) => void,
+): void {
+  const selection: TabsSelection = {
+    isActive: (value) => getActive() === value,
+    select: onSelect,
+  };
+  defineProvide(useTabsSelection, () => selection);
+}

package/src/styles/tokens.css

@@ -1,98 +1,98 @@
-/* Theme-agnostic structural design tokens.
- *
- * Theme COLORS come from the theme registry (seeded by the design-system package) and are
- * applied as inline CSS custom properties by <ThemeProvider>. These
- * radius / sizing / component tokens are identical across themes, so they
- * ship once here under the `.lynx-zero` base class that <ThemeProvider> puts on
- * its host view; CSS inheritance propagates them to every descendant. A theme
- * may still override roundness via its `radius` field. */
-
-.lynx-zero {
-  /* ── Roundness (DaisyUI v5 contract) ── */
-  --radius-selector: 8px;
-  --radius-field: 8px;
-  --radius-box: 16px;
-
-  /* ── Base size units (DaisyUI v5 contract) ──
-   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
-   * re-derives the component dimensions below from them in JS. We deliberately
-   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
-   * engine. Defaults below are base 4px × the per-token multiples shown. */
-  --size-selector: 4px;
-  --size-field: 4px;
-
-  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
-  --size-xs: 24px;
-  --size-sm: 32px;
-  --size-md: 48px;
-  --size-lg: 64px;
-
-  /* ── Text ramp (public <Text> / <Heading> sizes) ──
-   * The xs→3xl scale the `text-*` utilities resolve to (the daisy preset maps
-   * Tailwind's fontSize keys onto these vars). Literal px so they resolve on
-   * the first paint, like every other structural token. Anchored on a 17px
-   * base — the iOS HIG Body size, so bare <Text> (the default) reads as native
-   * body — and stepped as an even ~1.2 modular scale (each step ≈1.17–1.21×).
-   *
-   * The controller's `fontScale` multiplies this ramp app-wide; <ThemeProvider>
-   * re-emits the literals in JS (no `calc(var() * n)` — unproven in Lynx).
-   * NOTE: keep in sync with FONT_DEFAULTS in theme/ThemeProvider.tsx. */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 17px;
-  --text-lg: 20px;
-  --text-xl: 24px;
-  --text-2xl: 28px;
-  --text-3xl: 34px;
-
-  /* ── Font sizes (control-internal: button / input / badge labels) ──
-   * A separate axis from the text ramp above and deliberately NOT scaled with
-   * it — control chrome stays fixed. Kept as independent literals (no
-   * var→var indirection; unproven in Lynx) even though values mirror the ramp. */
-  --font-xs: 12px;
-  --font-sm: 14px;
-  --font-md: 14px;
-  --font-lg: 18px;
-
-  /* ── Spacing ── */
-  --padding-btn-xs: 8px;
-  --padding-btn-sm: 12px;
-  --padding-btn-md: 16px;
-  --padding-btn-lg: 24px;
-  --padding-box: 16px;
-  --padding-box-compact: 8px;
-  --gap-box: 8px;
-
-  /* ── Borders ── */
-  --border-btn: 1px;
-  --border-card: 1px;
-
-  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
-   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
-  --checkbox-xs: 16px; /* ×4 */
-  --checkbox-sm: 20px; /* ×5 */
-  --checkbox-md: 24px; /* ×6 */
-  --checkbox-lg: 32px; /* ×8 */
-  --toggle-width-xs: 32px; /* ×8 */
-  --toggle-width-sm: 40px; /* ×10 */
-  --toggle-width-md: 48px; /* ×12 */
-  --toggle-width-lg: 56px; /* ×14 */
-  --toggle-height-xs: 24px; /* ×6 */
-  --toggle-height-sm: 24px; /* ×6 */
-  --toggle-height-md: 28px; /* ×7 */
-  --toggle-height-lg: 32px; /* ×8 */
-  --toggle-thumb-xs: 16px; /* ×4 */
-  --toggle-thumb-sm: 16px; /* ×4 */
-  --toggle-thumb-md: 20px; /* ×5 */
-  --toggle-thumb-lg: 24px; /* ×6 */
-  --badge-xs: 16px; /* ×4 */
-  --badge-sm: 20px; /* ×5 */
-  --badge-md: 24px; /* ×6 */
-  --badge-lg: 32px; /* ×8 */
-  --step-indicator: 32px;
-  --progress-height: 8px;
-  --modal-max-width: 400px;
-
-  /* ── Opacity ── */
-  --disabled-opacity: 0.5;
-}
+/* Theme-agnostic structural design tokens.
+ *
+ * Theme COLORS come from the theme registry (seeded by the design-system package) and are
+ * applied as inline CSS custom properties by <ThemeProvider>. These
+ * radius / sizing / component tokens are identical across themes, so they
+ * ship once here under the `.lynx-zero` base class that <ThemeProvider> puts on
+ * its host view; CSS inheritance propagates them to every descendant. A theme
+ * may still override roundness via its `radius` field. */
+
+.lynx-zero {
+  /* ── Roundness (DaisyUI v5 contract) ── */
+  --radius-selector: 8px;
+  --radius-field: 8px;
+  --radius-box: 16px;
+
+  /* ── Base size units (DaisyUI v5 contract) ──
+   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
+   * re-derives the component dimensions below from them in JS. We deliberately
+   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
+   * engine. Defaults below are base 4px × the per-token multiples shown. */
+  --size-selector: 4px;
+  --size-field: 4px;
+
+  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
+  --size-xs: 24px;
+  --size-sm: 32px;
+  --size-md: 48px;
+  --size-lg: 64px;
+
+  /* ── Text ramp (public <Text> / <Heading> sizes) ──
+   * The xs→3xl scale the `text-*` utilities resolve to (the daisy preset maps
+   * Tailwind's fontSize keys onto these vars). Literal px so they resolve on
+   * the first paint, like every other structural token. Anchored on a 17px
+   * base — the iOS HIG Body size, so bare <Text> (the default) reads as native
+   * body — and stepped as an even ~1.2 modular scale (each step ≈1.17–1.21×).
+   *
+   * The controller's `fontScale` multiplies this ramp app-wide; <ThemeProvider>
+   * re-emits the literals in JS (no `calc(var() * n)` — unproven in Lynx).
+   * NOTE: keep in sync with FONT_DEFAULTS in theme/ThemeProvider.tsx. */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 28px;
+  --text-3xl: 34px;
+
+  /* ── Font sizes (control-internal: button / input / badge labels) ──
+   * A separate axis from the text ramp above and deliberately NOT scaled with
+   * it — control chrome stays fixed. Kept as independent literals (no
+   * var→var indirection; unproven in Lynx) even though values mirror the ramp. */
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-md: 14px;
+  --font-lg: 18px;
+
+  /* ── Spacing ── */
+  --padding-btn-xs: 8px;
+  --padding-btn-sm: 12px;
+  --padding-btn-md: 16px;
+  --padding-btn-lg: 24px;
+  --padding-box: 16px;
+  --padding-box-compact: 8px;
+  --gap-box: 8px;
+
+  /* ── Borders ── */
+  --border-btn: 1px;
+  --border-card: 1px;
+
+  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
+   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
+  --checkbox-xs: 16px; /* ×4 */
+  --checkbox-sm: 20px; /* ×5 */
+  --checkbox-md: 24px; /* ×6 */
+  --checkbox-lg: 32px; /* ×8 */
+  --toggle-width-xs: 32px; /* ×8 */
+  --toggle-width-sm: 40px; /* ×10 */
+  --toggle-width-md: 48px; /* ×12 */
+  --toggle-width-lg: 56px; /* ×14 */
+  --toggle-height-xs: 24px; /* ×6 */
+  --toggle-height-sm: 24px; /* ×6 */
+  --toggle-height-md: 28px; /* ×7 */
+  --toggle-height-lg: 32px; /* ×8 */
+  --toggle-thumb-xs: 16px; /* ×4 */
+  --toggle-thumb-sm: 16px; /* ×4 */
+  --toggle-thumb-md: 20px; /* ×5 */
+  --toggle-thumb-lg: 24px; /* ×6 */
+  --badge-xs: 16px; /* ×4 */
+  --badge-sm: 20px; /* ×5 */
+  --badge-md: 24px; /* ×6 */
+  --badge-lg: 32px; /* ×8 */
+  --step-indicator: 32px;
+  --progress-height: 8px;
+  --modal-max-width: 400px;
+
+  /* ── Opacity ── */
+  --disabled-opacity: 0.5;
+}