@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-A4MDAP7G.mjs

@@ -0,0 +1,42 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function LabelValueBase({ label, value, iconName, iconColor, style }) {
+  const { colors } = useTheme();
+  const resolvedIcon = iconName ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted) : null;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.labelSide }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label)), typeof value === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+}
+var LabelValue = React.memo(LabelValueBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: s(12)
+  },
+  labelSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4)
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  value: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: "right"
+  }
+});
+
+export { LabelValue };

package/dist/chunk-AJ7ZDNBT.mjs

@@ -0,0 +1,120 @@
+import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, withRepeat, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+
+function Skeleton({
+  width = "100%",
+  height = 16,
+  borderRadius = 6,
+  preset = "base",
+  diameter = 40,
+  style
+}) {
+  const { colors, colorScheme } = useTheme();
+  const shimmer = useSharedValue(0);
+  const [containerWidth, setContainerWidth] = useState(300);
+  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
+  useEffect(() => {
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [shimmer]);
+  const shimmerStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
+  }));
+  const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
+  const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
+  const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.base,
+        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        style
+      ],
+      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading",
+      accessibilityState: { busy: true }
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: [StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React.createElement(
+      LinearGradient,
+      {
+        colors: ["transparent", shimmerHighlight, "transparent"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 0 },
+        style: StyleSheet.absoluteFill
+      }
+    ))
+  );
+}
+var aspectRatioMap = {
+  "1:1": 1,
+  "4:3": 3 / 4,
+  "16:9": 9 / 16,
+  "4:5": 5 / 4,
+  "3:2": 2 / 3
+};
+function MediaCardSkeleton({ aspectRatio = "4:3", showSubtitle = true, style }) {
+  const ratio = aspectRatioMap[aspectRatio];
+  return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React.createElement(View, { style: StyleSheet.absoluteFill }, /* @__PURE__ */ React.createElement(Skeleton, { width: "100%", height: void 0, style: skeletonStyles.fill, borderRadius: RADIUS.md }))), /* @__PURE__ */ React.createElement(View, { style: skeletonStyles.meta }, /* @__PURE__ */ React.createElement(Skeleton, { width: "70%", height: vs(14), borderRadius: RADIUS.xs }), showSubtitle ? /* @__PURE__ */ React.createElement(Skeleton, { width: "45%", height: vs(12), borderRadius: RADIUS.xs }) : null));
+}
+function ListItemSkeleton({ showAvatar = true, showSubtitle = true, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [skeletonStyles.row, style] }, showAvatar ? /* @__PURE__ */ React.createElement(Skeleton, { preset: "circle", diameter: 40 }) : null, /* @__PURE__ */ React.createElement(View, { style: skeletonStyles.rowText }, /* @__PURE__ */ React.createElement(Skeleton, { width: "60%", height: vs(14), borderRadius: RADIUS.xs }), showSubtitle ? /* @__PURE__ */ React.createElement(Skeleton, { width: "40%", height: vs(12), borderRadius: RADIUS.xs }) : null));
+}
+function ListSkeleton({
+  count = 6,
+  columns = 1,
+  gap = 12,
+  aspectRatio = "4:3",
+  showAvatar = true,
+  style
+}) {
+  if (columns <= 1) {
+    return /* @__PURE__ */ React.createElement(View, { style: [{ gap: vs(gap) }, style] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(ListItemSkeleton, { key: i, showAvatar })));
+  }
+  const widthPct = `${100 / columns}%`;
+  return /* @__PURE__ */ React.createElement(View, { style: [skeletonStyles.grid, { marginHorizontal: -s(gap) / 2 }, style] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: { width: widthPct, paddingHorizontal: s(gap) / 2, marginBottom: vs(gap) } }, /* @__PURE__ */ React.createElement(MediaCardSkeleton, { aspectRatio }))));
+}
+Skeleton.MediaCard = MediaCardSkeleton;
+Skeleton.ListItem = ListItemSkeleton;
+Skeleton.List = ListSkeleton;
+var styles = StyleSheet.create({
+  base: {
+    overflow: "hidden"
+  }
+});
+var skeletonStyles = StyleSheet.create({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  fill: {
+    width: "100%",
+    height: "100%"
+  },
+  meta: {
+    paddingTop: vs(8),
+    gap: vs(6)
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12),
+    paddingVertical: vs(8)
+  },
+  rowText: {
+    flex: 1,
+    gap: vs(6)
+  }
+});
+
+export { Skeleton };

package/dist/chunk-AV4EMIRH.mjs

@@ -0,0 +1,94 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+function Checkbox({
+  checked = false,
+  onCheckedChange,
+  label,
+  disabled,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    selectionAsync();
+    onCheckedChange?.(!checked);
+  };
+  return (
+    // AUDIT FIX: opacity was applied only to the box, leaving the label at full
+    // opacity when disabled — a contradictory visual signal. Now the entire row
+    // dims uniformly so label and control communicate the same disabled state.
+    /* @__PURE__ */ React.createElement(
+      PressableButton,
+      {
+        style: [styles.row, disabled && styles.rowDisabled, style],
+        onPress: handlePress,
+        enabled: !disabled,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        accessibilityRole: "checkbox",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { checked, disabled: !!disabled }
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: styles.box,
+          animate: {
+            borderColor: checked ? colors.primary : colors.border,
+            backgroundColor: checked ? colors.primary : "transparent"
+          },
+          transition: COLOR_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(EaseView, { animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] }))
+      ),
+      label ? /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: colors.foreground }],
+          allowFontScaling: true
+        },
+        label
+      ) : null
+    )
+  );
+}
+var styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  // AUDIT FIX: was inline opacity on the box only
+  rowDisabled: {
+    opacity: 0.45
+  },
+  box: {
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(4),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkmark: {
+    width: s(12),
+    height: vs(7),
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: "-45deg" }, { translateY: -1 }]
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  }
+});
+
+export { Checkbox };

package/dist/chunk-AZJF2BLK.mjs

@@ -0,0 +1,115 @@
+import { IconButton } from './chunk-3U4SSNWP.mjs';
+import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, useWindowDimensions, View, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function AppHeader({
+  title,
+  subtitle,
+  onBack,
+  backIconName = "chevron-left",
+  left,
+  right,
+  titleAlign = "auto",
+  bordered = true,
+  withSafeArea = true,
+  backgroundColor,
+  style
+}) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const isWide = width >= BREAKPOINTS.wide;
+  const centered = titleAlign === "center" || titleAlign === "auto" && isWide;
+  const leftNode = left ?? (onBack ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      iconName: backIconName,
+      variant: "text",
+      size: "md",
+      onPress: onBack,
+      accessibilityLabel: "Go back"
+    }
+  ) : null);
+  const titleBlock = /* @__PURE__ */ React.createElement(View, { style: [styles.titleBlock, centered && styles.titleBlockCentered], pointerEvents: "none" }, title ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.title, { color: colors.foreground }, centered && styles.textCentered],
+      numberOfLines: 1,
+      allowFontScaling: true,
+      accessibilityRole: "header"
+    },
+    title
+  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.subtitle, { color: colors.foregroundMuted }, centered && styles.textCentered],
+      numberOfLines: 1,
+      allowFontScaling: true
+    },
+    subtitle
+  ) : null);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? colors.background,
+          paddingTop: withSafeArea ? insets.top : 0,
+          borderBottomWidth: bordered ? StyleSheet.hairlineWidth : 0,
+          borderBottomColor: colors.border
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.bar }, centered ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: StyleSheet.absoluteFill }, titleBlock), /* @__PURE__ */ React.createElement(View, { style: styles.side }, leftNode), /* @__PURE__ */ React.createElement(View, { style: [styles.side, styles.sideRight] }, right)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.side }, leftNode), titleBlock, /* @__PURE__ */ React.createElement(View, { style: [styles.side, styles.sideRight] }, right)))
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  bar: {
+    minHeight: vs(48),
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: s(8)
+  },
+  side: {
+    minWidth: s(44),
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+  sideRight: {
+    justifyContent: "flex-end"
+  },
+  titleBlock: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: s(8),
+    gap: vs(1)
+  },
+  titleBlockCentered: {
+    alignItems: "center"
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    lineHeight: mvs(24)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(16)
+  },
+  textCentered: {
+    textAlign: "center"
+  }
+});
+
+export { AppHeader };

package/dist/chunk-BNP626TY.mjs

@@ -0,0 +1,159 @@
+import { PressableRow } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+
+function ListItemBase({
+  leftRender,
+  rightRender,
+  trailing,
+  icon,
+  leftIcon,
+  rightIcon,
+  leftIconColor,
+  rightIconColor,
+  title,
+  subtitle,
+  caption,
+  variant = "plain",
+  showChevron = false,
+  showSeparator = false,
+  onPress,
+  disabled,
+  style,
+  titleStyle,
+  subtitleStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    selectionAsync();
+    onPress?.();
+  };
+  const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
+  const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
+  const cardStyle = variant === "card" ? {
+    backgroundColor: colors.card,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2
+  } : {};
+  const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join(". ");
+  const content = /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveLeft ? /* @__PURE__ */ React.createElement(View, { style: styles.leftContainer }, effectiveLeft) : null, /* @__PURE__ */ React.createElement(View, { style: styles.content }, /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.title, { color: colors.foreground }, titleStyle],
+      numberOfLines: 2,
+      allowFontScaling: true
+    },
+    title
+  ), subtitle ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
+      numberOfLines: 2,
+      allowFontScaling: true
+    },
+    subtitle
+  ) : null, caption ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.caption, { color: colors.foregroundMuted }, captionStyle],
+      numberOfLines: 1,
+      allowFontScaling: true
+    },
+    caption
+  ) : null), effectiveRight !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.rightText, { color: colors.foregroundMuted }],
+      allowFontScaling: true
+    },
+    effectiveRight
+  ) : effectiveRight) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null);
+  if (onPress) {
+    return /* @__PURE__ */ React.createElement(View, { style: disabled && styles.disabled }, /* @__PURE__ */ React.createElement(
+      PressableRow,
+      {
+        style: [styles.container, cardStyle, style],
+        onPress: handlePress,
+        enabled: !disabled,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        activateOnHover: true,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { disabled: !!disabled }
+      },
+      content
+    ), showSeparator ? /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [disabled && styles.disabled] }, /* @__PURE__ */ React.createElement(View, { style: [styles.container, cardStyle, style] }, content), showSeparator ? /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
+}
+var ListItem = React.memo(ListItemBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: s(16),
+    paddingVertical: vs(10),
+    gap: s(12)
+  },
+  leftContainer: {
+    width: s(44),
+    height: s(44),
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  content: {
+    flex: 1,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15),
+    lineHeight: mvs(22)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  caption: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: mvs(16),
+    opacity: 0.7
+  },
+  rightContainer: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+    flexShrink: 0,
+    maxWidth: s(160)
+  },
+  rightText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14)
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 0
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+
+export { ListItem };

package/dist/chunk-BRKYVJVV.mjs

@@ -0,0 +1,60 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var variantFontSize = {
+  hero: ms(48),
+  large: ms(32),
+  medium: ms(18),
+  small: ms(14)
+};
+var variantLetterSpacing = {
+  hero: -2,
+  large: -1,
+  medium: -0.5,
+  small: 0
+};
+function formatValue(value, prefix, showDecimals) {
+  const num = typeof value === "string" ? parseFloat(value.replace(/[^0-9.-]/g, "")) : value;
+  if (isNaN(num)) return `${prefix}0`;
+  const abs = Math.abs(num);
+  const sign = num < 0 ? "-" : "";
+  const intPart = Math.floor(abs).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  if (showDecimals) {
+    const decStr = (abs % 1).toFixed(2).slice(2);
+    return `${sign}${prefix}${intPart},${decStr}`;
+  }
+  return `${sign}${prefix}${intPart}`;
+}
+function CurrencyDisplayBase({ value, prefix = "$", showDecimals = false, textColor, variant, autoScale, maxFontSize, style }) {
+  const { colors } = useTheme();
+  const formatted = formatValue(value, prefix, showDecimals);
+  const baseFontSize = variant ? variantFontSize[variant] : ms(56);
+  const fontSize = maxFontSize ?? baseFontSize;
+  const letterSpacing = variant ? variantLetterSpacing[variant] : -2;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.amount, { color: textColor ?? colors.foreground, fontSize, letterSpacing }],
+      allowFontScaling: true,
+      numberOfLines: autoScale ? 1 : void 0,
+      adjustsFontSizeToFit: autoScale,
+      minimumFontScale: autoScale ? 0.5 : void 0
+    },
+    formatted
+  ));
+}
+var CurrencyDisplay = React.memo(CurrencyDisplayBase);
+var styles = StyleSheet.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  amount: {
+    fontFamily: "Sohne-Bold",
+    includeFontPadding: false,
+    textAlignVertical: "top"
+  }
+});
+
+export { CurrencyDisplay };

package/dist/chunk-DVK4G2GT.mjs

@@ -0,0 +1,59 @@
+import { Easing } from 'react-native-reanimated';
+
+// src/utils/animations.ts
+var SPRINGS = {
+  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
+  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
+  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
+  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
+  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
+  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
+  /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
+  glide: { stiffness: 380, damping: 38, mass: 1 },
+  /** Elastic indicator — Switch thumb, RadioGroup dot. */
+  elastic: { stiffness: 320, damping: 22, mass: 0.7 }
+};
+var TIMINGS = {
+  /** Color/opacity transitions on toggles, checkboxes, switches. */
+  state: { duration: 160 },
+  /** Focus ring on inputs. */
+  focusIn: { duration: 140 },
+  focusOut: { duration: 100 },
+  /** Accordion / collapsible content. */
+  expand: { duration: 240 },
+  collapse: { duration: 200 },
+  /** Skeleton shimmer cycle (full pass). */
+  shimmer: { duration: 1400 }
+};
+var EASINGS = {
+  /** Material-style ease-out — natural deceleration for state changes. */
+  standard: Easing.bezier(0.2, 0, 0, 1),
+  /** Strong ease-out for expanding surfaces (Accordion open). */
+  expand: Easing.bezier(0.23, 1, 0.32, 1),
+  /** Quick ease-in for collapsing. */
+  collapse: Easing.in(Easing.ease)
+};
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var OPACITY_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var SPRING_ELASTIC = {
+  type: "spring",
+  stiffness: 320,
+  damping: 22,
+  mass: 0.7
+};
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+
+export { COLOR_TRANSITION, EASINGS, OPACITY_TRANSITION, PRESS_SCALE, SPRINGS, SPRING_ELASTIC, TIMINGS };