@likith99/react-native-adaptive-liquid-glass 0.1.0

package/src/adaptiveHeight.ts

@@ -0,0 +1,15 @@
+/**
+ * Default height for a native control host at the current system font scale.
+ *
+ * Native controls do not size Yoga from their intrinsic content, so each one needs an
+ * explicit React height. Only the text inside a control grows with the font scale; its
+ * icons, insets and touch padding do not. Scaling the whole default height therefore
+ * leaves a large empty box around the label at accessibility text sizes, so this grows
+ * only the share of the default height that the text occupies.
+ *
+ * `base` is the default height at font scale 1 and `text` is the line height the control
+ * gives its label there. A caller's explicit `style.height` still wins over this.
+ */
+export default function adaptiveHeight(base: number, text: number, fontScale: number): number {
+  return Math.round(base + text * (Math.max(1, fontScale) - 1));
+}

package/src/fallback/GlassActionCluster.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Text, View, useColorScheme} from 'react-native';
+import GlassButton from '../GlassButton';
+import {validateActions} from '../validateActions';
+import type {GlassActionClusterProps} from '../types';
+export default function GlassActionCluster({actions, expanded, onExpandedChange, onAction,
+  toggleLabel = 'Actions', style, spacing: _spacing, tintColor: _tint, material: _material,
+  interactive: _interactive, animationDuration: _duration, forceFallback: _force,
+  mergingEnabled: _merging, pressFeedback: _pressFeedback, ...props}: GlassActionClusterProps) {
+  validateActions(actions);
+  const dark = useColorScheme() === 'dark';
+  const textStyle = {color: dark ? '#F5F5FA' : '#242630', fontWeight: '600' as const};
+  return <View {...props} accessible={false} style={[{minHeight: 80, flexDirection: 'row', flexWrap: 'wrap', gap: 12,
+    alignItems: 'center', justifyContent: 'flex-end', padding: 12}, style]}>
+    {expanded && actions.map(action => <GlassButton key={action.id} forceFallback
+      testID={`glass-action-${action.id}`} accessibilityLabel={action.title} disabled={action.disabled}
+      onPress={() => onAction(action.id)} contentStyle={{paddingHorizontal: 16}}>
+      <Text style={textStyle}>{action.title}</Text>
+    </GlassButton>)}
+    <GlassButton forceFallback testID="glass-cluster-toggle" accessibilityLabel={toggleLabel}
+      accessibilityState={{expanded}} onPress={() => onExpandedChange(!expanded)}>
+      <Text style={textStyle}>{expanded ? 'Close' : toggleLabel}</Text>
+    </GlassButton>
+  </View>;
+}

package/src/fallback/GlassSegmentedControl.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Pressable, Text, View, useColorScheme} from 'react-native';
+import type {GlassSegmentedControlProps} from '../types';
+import {validateSegments} from '../validateSegments';
+export default function GlassSegmentedControl({options, value, onValueChange, disabled, tintColor,
+  colorScheme = 'system', forceFallback: _fallback, style, testID, ...props}: GlassSegmentedControlProps) {
+  validateSegments(options, value);
+  const system = useColorScheme();
+  const dark = (colorScheme === 'system' ? system : colorScheme) === 'dark';
+  return <View {...props} testID={testID} accessible={false}
+    style={[{flexDirection: 'row', alignItems: 'stretch', backgroundColor: dark ? '#242630' : '#E7E7EE', borderRadius: 16, padding: 4}, style]}>
+    {options.map(option => {
+      const inactive = !!(disabled || option.disabled);
+      const selected = option.value === value;
+      return <Pressable key={option.value} testID={testID ? `${testID}-${option.value}` : undefined}
+        accessibilityRole="radio" accessibilityLabel={option.label}
+        accessibilityState={{selected, checked: selected, disabled: inactive}} disabled={inactive}
+        android_ripple={{color: '#80808040', foreground: true}}
+        onPress={() => {if (!inactive && !selected) onValueChange(option.value);}}
+        style={{flex: 1, minHeight: 48, padding: 8, alignItems: 'center', justifyContent: 'center', borderRadius: 12,
+          overflow: 'hidden', opacity: inactive ? 0.4 : 1, backgroundColor: selected ? tintColor ?? (dark ? '#4B4D5A' : '#FFFFFF') : 'transparent'}}>
+        <Text style={{fontSize: 14, fontWeight: selected ? '700' : '500', textAlign: 'center', color: dark ? '#F4F4FA' : '#242630'}}>{option.label}</Text>
+      </Pressable>;
+    })}
+  </View>;
+}

package/src/fallback/GlassView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {View, useColorScheme} from 'react-native';
+import type {GlassViewProps} from '../types';
+
+export default function GlassView({material = 'regular', interactive: _interactive,
+  tintColor: _tint, cornerRadius = 24, animationDuration: _duration, colorScheme = 'system',
+  fallbackStyle, forceFallback: _force, style, ...props}: GlassViewProps) {
+  const system = useColorScheme();
+  const dark = (colorScheme === 'system' ? system : colorScheme) === 'dark';
+  return <View {...props} style={[{borderRadius: cornerRadius,
+    backgroundColor: material === 'none' ? 'transparent' : dark ? '#25272D' : '#F0F1F5'}, style, fallbackStyle]} />;
+}

package/src/fallback/NativeGlassButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {ActivityIndicator, Pressable, Text, useColorScheme} from 'react-native';
+import type {NativeGlassButtonProps} from '../types';
+export default function NativeGlassButton({title, systemImage: _symbol, variant = 'regular', disabled,
+  loading, onPress, tintColor, colorScheme = 'system', forceFallback: _fallback, style,
+  accessibilityLabel, accessibilityState, ...props}: NativeGlassButtonProps) {
+  const scheme = useColorScheme();
+  const dark = (colorScheme === 'system' ? scheme : colorScheme) === 'dark';
+  const inactive = !!(disabled || loading);
+  const foreground = variant === 'prominent' ? '#FFFFFF' : dark ? '#F4F4FA' : '#242630';
+  return <Pressable {...props} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? title}
+    accessibilityState={{...accessibilityState, disabled: inactive, busy: !!loading}} disabled={inactive}
+    onPress={() => {if (!inactive) onPress();}} android_ripple={{color: '#80808040', foreground: true}}
+    style={[{minHeight: 56, borderRadius: 28, paddingVertical: 14, paddingHorizontal: 20,
+      flexDirection: 'row', gap: 10, alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
+      backgroundColor: variant === 'prominent' ? tintColor ?? '#6159B7' : dark ? '#25272D' : '#F0F1F5',
+      opacity: disabled ? 0.45 : 1}, style]}>
+    {loading && <ActivityIndicator color={foreground} />}
+    <Text style={{color: foreground, fontSize: 16, fontWeight: '600', flexShrink: 1}}>{title}</Text>
+  </Pressable>;
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export {default as GlassView} from './GlassView';
+export {default as GlassContainer} from './GlassContainer';
+export {default as GlassButton} from './GlassButton';
+export {default as GlassPressable} from './GlassPressable';
+export {default as GlassSegmentedControl} from './GlassSegmentedControl';
+export {default as GlassSlider} from './GlassSlider';
+export type {GlassSliderProps} from './types';
+export {default as GlassActionCluster} from './GlassActionCluster';
+export {isLiquidGlassSupported} from './support';
+export type {GlassViewProps, GlassContainerProps, GlassButtonProps, GlassAction, GlassActionClusterProps} from './types';
+export type {NativeGlassButtonProps, GlassPressableProps, GlassSegment, GlassSegmentedControlProps} from './types';
+export {default as GlassMenuButton} from './GlassMenuButton';
+export type {GlassMenuButtonProps, GlassMenuItem} from './types';
+export {default as GlassToolbar} from './GlassToolbar';
+export type {GlassMenuElement, GlassMenuSubmenu, GlassMenuSection, GlassToolbarItem, GlassToolbarProps} from './types';
+export {default as GlassTabBar} from './GlassTabBar';
+export type {GlassTabBarProps, GlassTabItem, GlassTabIcon} from './types';

package/src/menuTree.ts

@@ -0,0 +1,35 @@
+import type {GlassMenuElement, GlassMenuItem} from './types';
+
+/** Bounded recursive contract shared by menu buttons and toolbar menus. */
+export function validateMenuItems(items: readonly GlassMenuElement[]) {
+  const ids = new Set<string>();
+  const visit = (elements: readonly GlassMenuElement[], depth: number, submenuDepth: number) => {
+    if (depth > 8) throw new Error('Menus support at most 8 levels.');
+    for (const item of elements) {
+      if (!item.id.trim() || (item.kind !== 'section' && !item.title.trim())) {
+        throw new Error('Menu IDs and action/submenu titles must be nonempty.');
+      }
+      if (ids.has(item.id)) throw new Error('Menu IDs must be unique throughout the tree.');
+      ids.add(item.id);
+      if (ids.size > 256) throw new Error('Menus support at most 256 elements.');
+      if (item.kind === 'section' || item.kind === 'submenu') {
+        if (!item.items.length) throw new Error('Menu groups must contain items.');
+        const nextSubmenuDepth = submenuDepth + (item.kind === 'submenu' ? 1 : 0);
+        if (nextSubmenuDepth > 1) throw new Error('Menus support one submenu level across platforms.');
+        visit(item.items, depth + 1, nextSubmenuDepth);
+      }
+    }
+  };
+  visit(items, 1, 0);
+}
+
+/** Only enabled leaves can emit actions; a disabled submenu blocks all descendants. */
+export function enabledMenuAction(items: readonly GlassMenuElement[], id: string): GlassMenuItem | undefined {
+  for (const item of items) {
+    if (item.kind === 'section' || item.kind === 'submenu') {
+      if (item.kind === 'submenu' && item.disabled) continue;
+      const action = enabledMenuAction(item.items, id);
+      if (action) return action;
+    } else if (item.id === id && !item.disabled) return item;
+  }
+}

package/src/sliderMath.ts

@@ -0,0 +1,12 @@
+export function validateSlider(value: number, minimum: number, maximum: number, step: number) {
+  if (![value, minimum, maximum, step, maximum - minimum].every(Number.isFinite)) {
+    throw new Error('GlassSlider values and range must be finite numbers.');
+  }
+  if (maximum <= minimum) throw new Error('GlassSlider maximumValue must exceed minimumValue.');
+  if (step < 0 || step > maximum - minimum) throw new Error('GlassSlider step must be between 0 and the range.');
+}
+export function normalizeSliderValue(value: number, minimum: number, maximum: number, step: number) {
+  const clamped = Math.max(minimum, Math.min(maximum, value));
+  if (clamped === maximum || step === 0) return clamped;
+  return Math.max(minimum, Math.min(maximum, minimum + Math.round((clamped - minimum) / step) * step));
+}

package/src/specs/ALGActionClusterNativeComponent.ts

@@ -0,0 +1,15 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  actionsJSON?: string;
+  expanded?: CodegenTypes.WithDefault<boolean, false>;
+  mergingEnabled?: CodegenTypes.WithDefault<boolean, false>;
+  spacing?: CodegenTypes.WithDefault<CodegenTypes.Float, 20>;
+  glassTint?: ColorValue;
+  material?: CodegenTypes.WithDefault<'regular' | 'clear', 'regular'>;
+  interactive?: CodegenTypes.WithDefault<boolean, true>;
+  duration?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.45>;
+  toggleLabel?: string;
+  onAction?: CodegenTypes.DirectEventHandler<Readonly<{id: string}>>;
+  onExpandedChange?: CodegenTypes.DirectEventHandler<Readonly<{expanded: boolean}>>;
+}
+export default codegenNativeComponent<NativeProps>('ALGActionCluster', {excludedPlatforms: ['android']});

package/src/specs/ALGButtonNativeComponent.ts

@@ -0,0 +1,15 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  title: string;
+  systemImage?: string;
+  variant?: CodegenTypes.WithDefault<'regular' | 'prominent', 'regular'>;
+  disabled?: CodegenTypes.WithDefault<boolean, false>;
+  loading?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  colorScheme?: CodegenTypes.WithDefault<'system' | 'light' | 'dark', 'system'>;
+  controlLabel?: string;
+  controlHint?: string;
+  controlTestID?: string;
+  onActivate?: CodegenTypes.DirectEventHandler<Readonly<{activated: boolean}>>;
+}
+export default codegenNativeComponent<NativeProps>('ALGButton', {excludedPlatforms: ['android']});

package/src/specs/ALGMenuNativeComponent.ts

@@ -0,0 +1,17 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  title: string;
+  itemsJSON: string;
+  toolbar?: CodegenTypes.WithDefault<boolean, false>;
+  maxVisibleItems?: CodegenTypes.WithDefault<CodegenTypes.Int32, 3>;
+  mergingEnabled?: CodegenTypes.WithDefault<boolean, false>;
+  systemImage?: string;
+  disabled?: CodegenTypes.WithDefault<boolean, false>;
+  forceFallback?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  controlLabel?: string;
+  controlHint?: string;
+  controlTestID?: string;
+  onMenuAction?: CodegenTypes.DirectEventHandler<Readonly<{id: string}>>;
+}
+export default codegenNativeComponent<NativeProps>('ALGMenu');

package/src/specs/ALGSegmentedNativeComponent.ts

@@ -0,0 +1,12 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  optionsJSON: string;
+  selectedValue: string;
+  disabled?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  colorScheme?: CodegenTypes.WithDefault<'system' | 'light' | 'dark', 'system'>;
+  controlLabel?: string;
+  controlTestID?: string;
+  onSelectionChange?: CodegenTypes.DirectEventHandler<Readonly<{value: string}>>;
+}
+export default codegenNativeComponent<NativeProps>('ALGSegmented', {excludedPlatforms: ['android']});

package/src/specs/ALGSliderNativeComponent.ts

@@ -0,0 +1,19 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+type SliderEvent = Readonly<{value: CodegenTypes.Double}>;
+export interface NativeProps extends ViewProps {
+  value: CodegenTypes.Double;
+  minimumValue?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  maximumValue?: CodegenTypes.WithDefault<CodegenTypes.Double, 1>;
+  step?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+  disabled?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  revision?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  controlLabel?: string;
+  controlHint?: string;
+  controlTestID?: string;
+  onSliderChange?: CodegenTypes.DirectEventHandler<SliderEvent>;
+  onSliderStart?: CodegenTypes.DirectEventHandler<SliderEvent>;
+  onSliderComplete?: CodegenTypes.DirectEventHandler<SliderEvent>;
+  onSliderCancel?: CodegenTypes.DirectEventHandler<SliderEvent>;
+}
+export default codegenNativeComponent<NativeProps>('ALGSlider');

package/src/specs/ALGSurfaceNativeComponent.ts

@@ -0,0 +1,13 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  material?: CodegenTypes.WithDefault<'regular' | 'clear' | 'none', 'regular'>;
+  interactive?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  glassRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 24>;
+  container?: CodegenTypes.WithDefault<boolean, false>;
+  mergingEnabled?: CodegenTypes.WithDefault<boolean, false>;
+  spacing?: CodegenTypes.WithDefault<CodegenTypes.Float, 20>;
+  animationDuration?: CodegenTypes.WithDefault<CodegenTypes.Double, 0.35>;
+  colorScheme?: CodegenTypes.WithDefault<'system' | 'light' | 'dark', 'system'>;
+}
+export default codegenNativeComponent<NativeProps>('ALGSurface', {excludedPlatforms: ['android']});

package/src/specs/ALGTabsNativeComponent.ts

@@ -0,0 +1,11 @@
+import {codegenNativeComponent, type ViewProps, type ColorValue, type CodegenTypes} from 'react-native';
+export interface NativeProps extends ViewProps {
+  itemsJSON: string;
+  selectedValue: string;
+  selectionRevision?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
+  disabled?: CodegenTypes.WithDefault<boolean, false>;
+  glassTint?: ColorValue;
+  controlTestID?: string;
+  onSelectionChange?: CodegenTypes.DirectEventHandler<Readonly<{id: string}>>;
+}
+export default codegenNativeComponent<NativeProps>('ALGTabs');

package/src/support.ts

@@ -0,0 +1,5 @@
+import {Platform} from 'react-native';
+/** The package requires a native build with Xcode 26+. This is an OS capability check. */
+export function isLiquidGlassSupported(): boolean {
+  return Platform.OS === 'ios' && Number.parseInt(String(Platform.Version), 10) >= 26;
+}

package/src/types.ts

@@ -0,0 +1,181 @@
+import type {ColorValue, PressableProps, StyleProp, ViewProps, ViewStyle} from 'react-native';
+export interface GlassViewProps extends ViewProps {
+  material?: 'regular' | 'clear' | 'none';
+  interactive?: boolean;
+  tintColor?: ColorValue;
+  /** Uniform native shape radius. Use this instead of style.borderRadius. */
+  cornerRadius?: number;
+  /** Seconds, 0 disables material transitions. Reduce Motion takes precedence. */
+  animationDuration?: number;
+  colorScheme?: 'system' | 'light' | 'dark';
+  /** Surface style applied on older iOS, Android, or in forced fallback mode. */
+  fallbackStyle?: StyleProp<ViewStyle>;
+  /** Use an opaque React surface instead of native glass or older-iOS blur. */
+  forceFallback?: boolean;
+}
+export interface GlassContainerProps extends ViewProps {
+  /** Allow nearby glass surfaces to join. Defaults to false. */
+  mergingEnabled?: boolean;
+  /** Native merging threshold in points when enabled, not the layout gap. */
+  spacing?: number;
+  forceFallback?: boolean;
+}
+export interface GlassPressableProps extends Omit<PressableProps, 'style' | 'children'> {
+  title?: never;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  material?: GlassViewProps['material'];
+  tintColor?: ColorValue;
+  cornerRadius?: number;
+  fallbackStyle?: StyleProp<ViewStyle>;
+  forceFallback?: boolean;
+}
+/** SwiftUI owns the title/icon button on iOS 26+. */
+export interface NativeGlassButtonProps extends Omit<ViewProps, 'children'> {
+  children?: never;
+  title: string;
+  systemImage?: string;
+  variant?: 'regular' | 'prominent';
+  disabled?: boolean;
+  loading?: boolean;
+  onPress: () => void;
+  tintColor?: ColorValue;
+  colorScheme?: 'system' | 'light' | 'dark';
+  forceFallback?: boolean;
+}
+/** Custom children remain supported for compatibility; prefer GlassPressable for them. */
+export type GlassButtonProps = NativeGlassButtonProps | GlassPressableProps;
+export interface GlassSegment {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface GlassSegmentedControlProps extends Omit<ViewProps, 'children'> {
+  options: readonly GlassSegment[];
+  value: string | null;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  tintColor?: ColorValue;
+  colorScheme?: 'system' | 'light' | 'dark';
+  forceFallback?: boolean;
+}
+export interface GlassSliderProps extends Omit<ViewProps, 'children'> {
+  /** Controlled value; clamped to the range and snapped to step. */
+  value: number;
+  onValueChange: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  /** 0 means continuous; positive steps are anchored at minimumValue. */
+  step?: number;
+  disabled?: boolean;
+  tintColor?: ColorValue;
+  onSlidingStart?: (value: number) => void;
+  onSlidingComplete?: (value: number) => void;
+  /** Cancellation restores the latest controlled value; it is not completion. */
+  onSlidingCancel?: (value: number) => void;
+}
+export interface GlassAction {
+  /** Stable unique identity used to retain the native action control. '__toggle' is reserved. */
+  id: string;
+  title: string;
+  /** SF Symbol name on iOS. Android uses title. */
+  systemImage?: string;
+  disabled?: boolean;
+}
+export interface GlassActionClusterProps extends Omit<ViewProps, 'children'> {
+  actions: readonly GlassAction[];
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  onAction: (id: string) => void;
+  /** Enable shared glass merging and morphing. Defaults to false. */
+  mergingEnabled?: boolean;
+  spacing?: number;
+  /** Native material tint. Default: neutral dark-mode shading; overrides replace it. */
+  tintColor?: ColorValue;
+  material?: 'regular' | 'clear';
+  interactive?: boolean;
+  /** @deprecated Ignored. Native glass feedback follows interactive; custom feedback was removed. */
+  pressFeedback?: 'subtle' | 'native';
+  animationDuration?: number;
+  toggleLabel?: string;
+  forceFallback?: boolean;
+}
+
+export interface GlassMenuItem {
+  kind?: 'action';
+  id: string;
+  title: string;
+  /** SF Symbol on iOS; Android uses the title. */
+  systemImage?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+  /** Controlled checkmark. Update items in onAction to change selection. */
+  checked?: boolean;
+}
+export interface GlassMenuSubmenu {
+  kind: 'submenu';
+  id: string;
+  title: string;
+  systemImage?: string;
+  disabled?: boolean;
+  items: readonly GlassMenuElement[];
+}
+export interface GlassMenuSection {
+  kind: 'section';
+  id: string;
+  /** Empty title creates an untitled group. */
+  title: string;
+  items: readonly GlassMenuElement[];
+}
+export type GlassMenuElement = GlassMenuItem | GlassMenuSubmenu | GlassMenuSection;
+export type GlassToolbarItem = (GlassMenuItem | GlassMenuSubmenu) & {
+  /** Automatic items may move into overflow when space is limited. */
+  placement?: 'automatic' | 'overflow';
+};
+export interface GlassToolbarProps extends Omit<ViewProps, 'children'> {
+  items: readonly GlassToolbarItem[];
+  onAction: (id: string) => void;
+  disabled?: boolean;
+  /** Upper limit, not a guarantee. 0 places all items in overflow. Default 3. */
+  maxVisibleItems?: number;
+  /** Allow adjacent iOS toolbar items to share a native background. Default false. */
+  mergingEnabled?: boolean;
+  tintColor?: ColorValue;
+  forceFallback?: boolean;
+}
+export interface GlassMenuButtonProps extends Omit<ViewProps, 'children'> {
+  title: string;
+  items: readonly GlassMenuElement[];
+  onAction: (id: string) => void;
+  systemImage?: string;
+  disabled?: boolean;
+  /** Button foreground accent, not menu material tint. */
+  tintColor?: ColorValue;
+  /** Preview the standard iOS button. Android always uses its standard button. */
+  forceFallback?: boolean;
+}
+
+export type GlassTabIcon = 'home' | 'search' | 'library' | 'favorites' | 'inbox' | 'settings';
+export interface GlassTabItem {
+  id: string;
+  title: string;
+  /** Built-in platform icon preset; defaults to a circle when absent. */
+  icon?: GlassTabIcon;
+  systemImage?: string;
+  selectedSystemImage?: string;
+  /** Drawable resource name in the consuming Android application. */
+  androidIcon?: string;
+  badge?: number | 'dot';
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+export interface GlassTabBarProps extends Omit<ViewProps, 'children'> {
+  items: readonly GlassTabItem[];
+  /** Required for nonempty items. Set null only when items are empty. */
+  value: string | null;
+  onValueChange: (id: string) => void;
+  onTabReselect?: (id: string) => void;
+  disabled?: boolean;
+  tintColor?: ColorValue;
+}

package/src/validateActions.ts

@@ -0,0 +1,10 @@
+import type {GlassAction} from './types';
+export function validateActions(actions: readonly GlassAction[]): void {
+  const ids = new Set<string>();
+  for (const action of actions) {
+    if (!action.id || action.id === '__toggle' || ids.has(action.id)) {
+      throw new Error('GlassActionCluster requires unique, nonempty action IDs; __toggle is reserved.');
+    }
+    ids.add(action.id);
+  }
+}

package/src/validateSegments.ts

@@ -0,0 +1,11 @@
+import type {GlassSegment} from './types';
+export function validateSegments(options: readonly GlassSegment[], value: string | null) {
+  if (!options.length) throw new Error('GlassSegmentedControl requires at least one option.');
+  const values = new Set<string>();
+  for (const option of options) {
+    if (!option.value || values.has(option.value)) throw new Error('Segment values must be unique and nonempty.');
+    if (!option.label.trim()) throw new Error('Segments require a nonempty label.');
+    values.add(option.value);
+  }
+  if (value !== null && !values.has(value)) throw new Error('Selected value must match an option or be null.');
+}

package/src/validateTabs.ts

@@ -0,0 +1,17 @@
+import type {GlassTabItem} from './types';
+export function validateTabs(items: readonly GlassTabItem[], value: string | null) {
+  if (items.length > 5) throw new Error('GlassTabBar supports at most 5 tabs.');
+  const ids = new Set<string>();
+  for (const item of items) {
+    if (!item.id.trim() || !item.title.trim()) throw new Error('Tab IDs and titles must be nonempty.');
+    if (ids.has(item.id)) throw new Error('Tab IDs must be unique.');
+    ids.add(item.id);
+    if (item.badge !== undefined && item.badge !== 'dot' &&
+      (!Number.isInteger(item.badge) || item.badge < 0 || item.badge > 2147483647)) {
+      throw new Error('Tab badge must be dot or a nonnegative 32-bit integer.');
+    }
+  }
+  if (items.length === 0 ? value !== null : value === null || !ids.has(value)) {
+    throw new Error('Tab value must identify an existing tab, or be null for empty items.');
+  }
+}