@cdx-ui/components 0.3.5 → 0.3.7

package/src/components/SystemAlert/styles.ts

@@ -0,0 +1,212 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export type SystemAlertColor = 'danger' | 'warning' | 'success' | 'info' | 'brand';
+
+// Button and IconButton have no on-strong ghost colour (and no `brand`), so the
+// controls are restyled here, following Toast's neutral stand-in.
+const ON_STRONG_INTERACTION: Record<SystemAlertColor, string | undefined> = {
+  danger: Platform.select({
+    default: 'data-[active=true]:bg-surface-danger-strong-active',
+    web: [
+      'data-[hover=true]:bg-surface-danger-strong-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
+      'web:data-[focus-visible=true]:ring-offset-surface-danger-strong',
+    ].join(' '),
+  }),
+  warning: Platform.select({
+    default: 'data-[active=true]:bg-surface-warning-strong-active',
+    web: [
+      'data-[hover=true]:bg-surface-warning-strong-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-warning-strong-active',
+      'web:data-[focus-visible=true]:ring-offset-surface-warning-strong',
+    ].join(' '),
+  }),
+  success: Platform.select({
+    default: 'data-[active=true]:bg-surface-success-strong-active',
+    web: [
+      'data-[hover=true]:bg-surface-success-strong-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-success-strong-active',
+      'web:data-[focus-visible=true]:ring-offset-surface-success-strong',
+    ].join(' '),
+  }),
+  info: Platform.select({
+    default: 'data-[active=true]:bg-surface-info-strong-active',
+    web: [
+      'data-[hover=true]:bg-surface-info-strong-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-info-strong-active',
+      'web:data-[focus-visible=true]:ring-offset-surface-info-strong',
+    ].join(' '),
+  }),
+  brand: Platform.select({
+    default: 'data-[active=true]:bg-surface-brand-strong-active',
+    web: [
+      'data-[hover=true]:bg-surface-brand-strong-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-brand-strong-active',
+      'web:data-[focus-visible=true]:ring-offset-surface-brand-strong',
+    ].join(' '),
+  }),
+};
+
+const ON_STRONG_CONTENT: Record<SystemAlertColor, string> = {
+  danger: 'text-content-danger-on-strong',
+  warning: 'text-content-warning-on-strong',
+  success: 'text-content-success-on-strong',
+  info: 'text-content-info-on-strong',
+  brand: 'text-content-brand-on-strong',
+};
+
+// ── Root ─────────────────────────────────────────────────────────────────────
+
+export const systemAlertRootVariants = cva(['w-full'], {
+  variants: {
+    color: {
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong',
+      brand: 'bg-surface-brand-strong',
+    },
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Presence (internal clip wrapper and the surface inside it, `isOpen` only) ─
+
+// Web: inline px heights transition on the wrapper and on the clip inside it, with the same
+// timing. The wrapper's `minHeight` is the reserved inset, so the page moves only once the
+// surface leaves the strip. The clip has no minimum and `justify-end` pins the surface's bottom
+// edge to it, so the surface slides through the strip and `translateY = b − H` falls out of
+// layout. A translate transition is composited and starts a frame before a height one in
+// Chromium, which opens a gap. The timings mirror `SYSTEM_ALERT_ENTER_MS` /
+// `SYSTEM_ALERT_EXIT_MS` in `./animation`. Native overrides the overflow inline; see
+// `NATIVE_WRAPPER_STYLE` in `./index`.
+const WEB_HEIGHT_TRANSITION = [
+  'web:transition-[height] web:duration-300 web:ease-[cubic-bezier(0.32,0.72,0,1)]',
+  'web:data-[state=closed]:duration-[220ms] web:data-[state=closed]:ease-[cubic-bezier(0.4,0,1,1)]',
+  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+];
+
+export const systemAlertPresenceVariants = cva([
+  'w-full overflow-hidden',
+  ...WEB_HEIGHT_TRANSITION,
+]);
+
+export const systemAlertPresenceClipVariants = cva([
+  'w-full overflow-hidden justify-end',
+  ...WEB_HEIGHT_TRANSITION,
+]);
+
+// The surface stays in flow so a settled wrapper sizes to it (`height: auto`); `shrink-0`
+// keeps its natural height while the wrapper's animated height is smaller.
+export const systemAlertPresenceSurfaceVariants = cva(['shrink-0']);
+
+// ── Body (internal row below the safe-area padding) ──────────────────────────
+
+export const systemAlertBodyVariants = cva(['flex-row items-start min-h-11 ps-3 pe-3']);
+
+// ── Icon ─────────────────────────────────────────────────────────────────────
+
+// `mt-3` centres the 20px glyph on the first 20px text line of the 44px row.
+export const systemAlertIconVariants = cva(['size-5 shrink-0 mt-3 me-3'], {
+  variants: {
+    color: ON_STRONG_CONTENT,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Description ──────────────────────────────────────────────────────────────
+
+export const systemAlertDescriptionVariants = cva(['flex-1 min-w-0 py-3 body-md font-medium'], {
+  variants: {
+    color: ON_STRONG_CONTENT,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Actions ──────────────────────────────────────────────────────────────────
+
+// The `-me-1.5` end offset optically aligns the last ghost control with the row
+// padding. When the root renders a close button, the close button carries it.
+export const systemAlertActionsVariants = cva(['shrink-0 flex-row items-center gap-0.5 py-1.5'], {
+  variants: {
+    hasClose: {
+      true: '',
+      false: '-me-1.5',
+    },
+  },
+  defaultVariants: {
+    hasClose: false,
+  },
+});
+
+// ── Action (ghost small Button) ──────────────────────────────────────────────
+
+export const systemAlertActionVariants = cva([], {
+  variants: {
+    color: ON_STRONG_INTERACTION,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+export const systemAlertActionLabelVariants = cva([], {
+  variants: {
+    color: ON_STRONG_CONTENT,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── IconAction (ghost small IconButton) ──────────────────────────────────────
+
+export const systemAlertIconActionVariants = cva([], {
+  variants: {
+    color: ON_STRONG_INTERACTION,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+export const systemAlertIconActionIconVariants = cva([], {
+  variants: {
+    color: ON_STRONG_CONTENT,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Close (ghost small IconButton rendered by the root) ──────────────────────
+
+// `my-1.5` matches the actions row's vertical padding; `ms-0.5` matches its gap.
+export const systemAlertCloseVariants = cva(['my-1.5 ms-0.5 -me-1.5'], {
+  variants: {
+    color: ON_STRONG_INTERACTION,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+export const systemAlertCloseIconVariants = cva([], {
+  variants: {
+    color: ON_STRONG_CONTENT,
+  },
+  defaultVariants: {
+    color: 'info',
+  },
+});
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export type SystemAlertVariantProps = VariantProps<typeof systemAlertRootVariants>;

package/src/components/SystemAlert/useSystemAlertStatusBarStyle.ts

@@ -0,0 +1,57 @@
+import { useCSSVariable } from 'uniwind';
+import type { SystemAlertColor } from './styles';
+
+export type SystemAlertStatusBarStyle = 'light' | 'dark';
+
+// Light-theme glyphs, used when the token cannot be read (no Uniwind runtime, e.g. Jest).
+const FALLBACKS: Record<SystemAlertColor, SystemAlertStatusBarStyle> = {
+  danger: 'light',
+  warning: 'dark',
+  success: 'light',
+  info: 'light',
+  brand: 'light',
+};
+
+// Above this relative luminance, black contrasts more than white (the two ratios meet at ~0.179).
+const LIGHT_LUMINANCE = 0.179;
+
+function relativeLuminance(value: string): number | undefined {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})(?:[0-9a-f]{2})?$/i.exec(value.trim());
+  let channels: number[] | undefined;
+  if (hex) {
+    const digits =
+      hex[1].length === 3
+        ? hex[1]
+            .split('')
+            .map((digit) => digit + digit)
+            .join('')
+        : hex[1];
+    channels = [0, 2, 4].map((start) => Number.parseInt(digits.slice(start, start + 2), 16));
+  } else {
+    const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(value.trim());
+    if (rgb) channels = rgb.slice(1, 4).map(Number);
+  }
+  if (!channels || channels.some((channel) => !Number.isFinite(channel))) return undefined;
+  const [r, g, b] = channels.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * The status-bar glyph style that matches a SystemAlert's text on its strong surface, for a
+ * banner that paints behind the status bar. Read from the active theme's
+ * `content-{color}-on-strong` token, so it follows FI themes and light and dark mode.
+ *
+ * SystemAlert never sets the status bar. Pass the result to whatever owns it in your app,
+ * such as `expo-status-bar`'s `style`, React Native `StatusBar`'s `barStyle`
+ * (`'light-content'` / `'dark-content'`), or your navigator's status-bar option, and apply it
+ * only while the banner is open and its screen is focused.
+ */
+export function useSystemAlertStatusBarStyle(color: SystemAlertColor): SystemAlertStatusBarStyle {
+  const textColor = useCSSVariable(`--color-content-${color}-on-strong`);
+  const luminance = typeof textColor === 'string' ? relativeLuminance(textColor) : undefined;
+  if (luminance === undefined) return FALLBACKS[color];
+  return luminance > LIGHT_LUMINANCE ? 'light' : 'dark';
+}

package/src/components/Tabs/index.tsx

@@ -71,6 +71,9 @@ interface TabLayout {
   height: number;
 }
 
+/** Ignore subpixel web layout drift when deciding whether an overflow control is needed. */
+const SCROLL_EDGE_TOLERANCE = 1;
+
 /** Minimum horizontal scroll offset so `layout` is fully inside the viewport. */
 function scrollXToRevealTab(
   layout: TabLayout,
@@ -481,6 +484,7 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
         orientation="horizontal"
         surface={isSolidHorizontalScroll ? 'secondary' : 'background'}
         size={isSolidHorizontalScroll ? 'default' : 'small'}
+        offset={SCROLL_EDGE_TOLERANCE}
         edgeClassName={isSolidHorizontalScroll ? undefined : 'opacity-85'}
         onCapabilityChange={setScrollCapability}
       >

package/src/components/Tabs/styles.ts

@@ -307,7 +307,7 @@ export const tabsPanelVariants = cva(['data-[state=inactive]:hidden'], {
   defaultVariants: { orientation: 'horizontal' },
 });
 
-export const tabsTabLabelVariants = cva('body-md', {
+export const tabsTabLabelVariants = cva('body-md text-center', {
   variants: {
     state: {
       // Selection state is a CVA input (not a `data-[]` selector) so inactive/active