@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/Pressable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, AccessibilityRole } from 'react-native';
 
 interface PressableProps {
     /** Children content to render inside the pressable. */
@@ -8,11 +8,6 @@ interface PressableProps {
     onPress?: () => void;
     /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
     pressScale?: number;
-    /**
-     * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
-     * Kept for backwards compatibility with v6.x consumers.
-     */
-    bounciness?: number;
     /** Enable haptic feedback on press. Defaults to `true`. */
     haptics?: boolean;
     /** Additional style for the wrapper. */
@@ -21,6 +16,19 @@ interface PressableProps {
     disabled?: boolean;
     /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
     hoverScale?: number;
+    /**
+     * Accessibility role for the pressable element.
+     * Defaults to `"button"`.
+     */
+    accessibilityRole?: AccessibilityRole;
+    /**
+     * Accessibility state for screen readers.
+     * Used to communicate states like `selected`, `expanded`, `checked`, etc.
+     * Defaults to `{ disabled: !!disabled }`.
+     */
+    accessibilityState?: Record<string, unknown>;
+    /** Accessibility label for screen readers. */
+    accessibilityLabel?: string;
 }
 /**
  * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
@@ -29,6 +37,6 @@ interface PressableProps {
  * Use this for any custom pressable surface that needs consistent press feel
  * (cards, list rows, image tiles, etc).
  */
-declare function Pressable({ children, onPress, pressScale: _pressScale, haptics, style, disabled, hoverScale: _hoverScale, }: PressableProps): React.JSX.Element;
+declare function Pressable({ children, onPress, pressScale: _pressScale, haptics, style, disabled, hoverScale: _hoverScale, accessibilityRole, accessibilityState, accessibilityLabel, }: PressableProps): React.JSX.Element;
 
 export { Pressable, type PressableProps };

package/dist/Pressable.js

@@ -117,7 +117,10 @@ function Pressable({
   haptics = true,
   style,
   disabled,
-  hoverScale: _hoverScale = 1.02
+  hoverScale: _hoverScale = 1.02,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel
 }) {
   const handlePress = () => {
     if (disabled || !onPress) return;
@@ -133,8 +136,9 @@ function Pressable({
       rippleColor: "transparent",
       touchSoundDisabled: true,
       activateOnHover: true,
-      accessibilityRole: "button",
-      accessibilityState: { disabled: !!disabled }
+      accessibilityRole: accessibilityRole ?? "button",
+      accessibilityState: accessibilityState ?? { disabled: !!disabled },
+      accessibilityLabel
     },
     children
   );

package/dist/Pressable.mjs

@@ -1,4 +1,4 @@
-export { Pressable } from './chunk-MBMXYJJV.mjs';
+export { Pressable } from './chunk-E7NEHHXV.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';

package/dist/PricingCard.js

@@ -108,6 +108,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -120,6 +121,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -350,24 +352,26 @@ function ButtonBase({
     impactMedium();
     onPress?.();
   };
-  const containerVariantStyle = {
+  const containerVariantStyle = isDisabled ? {
+    primary: { backgroundColor: colors.surface },
+    secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
+    text: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.surface }
+  }[variant] : {
     primary: { backgroundColor: colors.primary },
     secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
     text: { backgroundColor: "transparent" },
     destructive: { backgroundColor: colors.destructive }
   }[variant];
-  const labelVariantStyle = {
-    primary: { color: colors.primaryForeground },
-    secondary: { color: colors.primary },
-    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
-    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
-    // carry the brand voltage. Falls back to primary when no accent is defined.
-    text: { color: colors.accentResolved },
-    destructive: { color: colors.destructiveForeground }
+  const labelColor = isDisabled ? colors.foregroundMuted : {
+    primary: colors.primaryForeground,
+    secondary: colors.primary,
+    text: colors.accentResolved,
+    destructive: colors.destructiveForeground
   }[variant];
-  const textColor = iconColor ?? labelVariantStyle.color;
+  const textColor = iconColor ?? labelColor;
   const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
-  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
+  const spinnerColor = isDisabled ? colors.foregroundMuted : variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
   const styleArray = Array.isArray(style) ? style : style ? [style] : [];
   const flatStyle = reactNative.StyleSheet.flatten(styleArray);
   const { flex, ...restStyle } = flatStyle || {};
@@ -379,7 +383,6 @@ function ButtonBase({
         containerVariantStyle,
         containerSizeStyles[size],
         fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
         restStyle
       ],
       enabled: !isDisabled,
@@ -395,7 +398,7 @@ function ButtonBase({
     loading ? /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, /* @__PURE__ */ React3__default.default.createElement(reactNative.ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React3__default.default.createElement(
       reactNative.Text,
       {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
+        style: [styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading],
         allowFontScaling: true,
         numberOfLines: 1
       },
@@ -403,7 +406,7 @@ function ButtonBase({
     )) : /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, effectiveIcon), /* @__PURE__ */ React3__default.default.createElement(
       reactNative.Text,
       {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+        style: [styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
         allowFontScaling: true,
         numberOfLines: 1
       },
@@ -422,9 +425,6 @@ var styles = reactNative.StyleSheet.create({
   fullWidth: {
     width: "100%"
   },
-  disabled: {
-    opacity: 0.45
-  },
   label: {
     fontFamily: "Sohne-Medium",
     flexShrink: 1

package/dist/PricingCard.mjs

@@ -1,11 +1,11 @@
-export { PricingCard } from './chunk-AJRVDP2H.mjs';
-import './chunk-VF2ATYN3.mjs';
-import './chunk-HTHGSXFG.mjs';
+export { PricingCard } from './chunk-E5UKLSJZ.mjs';
+import './chunk-GH67YXG6.mjs';
+import './chunk-4J2PXL36.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Progress.js

@@ -91,6 +91,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -103,6 +104,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Progress.mjs

@@ -1,5 +1,5 @@
-export { Progress } from './chunk-OB4JUQ3O.mjs';
+export { Progress } from './chunk-TS7DGUIR.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/RadioGroup.js

@@ -151,6 +151,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -163,6 +164,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/RadioGroup.mjs

@@ -1,7 +1,7 @@
-export { RadioGroup } from './chunk-X4G6APW6.mjs';
+export { RadioGroup } from './chunk-LNPKGWBG.mjs';
 import './chunk-YNROWHQJ.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/RetrayProvider.d.mts

@@ -1,2 +1,2 @@
-export { c as RetrayProvider, d as RetrayProviderProps } from './index-wt-orHUi.mjs';
+export { c as RetrayProvider, d as RetrayProviderProps } from './index-CY34hxPN.mjs';
 import 'react';

package/dist/RetrayProvider.d.ts

@@ -1,2 +1,2 @@
-export { c as RetrayProvider, d as RetrayProviderProps } from './index-wt-orHUi.js';
+export { c as RetrayProvider, d as RetrayProviderProps } from './index-CY34hxPN.js';
 import 'react';

package/dist/RetrayProvider.js

@@ -112,6 +112,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -124,6 +125,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/RetrayProvider.mjs

@@ -1,5 +1,5 @@
-export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
-import './chunk-2UYENBLV.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { RetrayProvider } from './chunk-ZIMY2QUM.mjs';
+import './chunk-YMYIEVZP.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Select.js

@@ -152,6 +152,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -164,6 +165,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Select.mjs

@@ -1,7 +1,7 @@
-export { Select } from './chunk-A3A6KNQN.mjs';
+export { Select } from './chunk-HEDQPK4I.mjs';
 import './chunk-YNROWHQJ.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/SelectableCard.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type SelectType = 'radio' | 'checkbox';
+type CardVariant = 'elevated' | 'outlined' | 'filled';
+interface SelectableCardGroupProps {
+    type: SelectType;
+    value: string | string[];
+    onValueChange: (value: string | string[]) => void;
+    variant?: CardVariant;
+    gap?: number;
+    style?: ViewStyle;
+    children: React.ReactNode;
+}
+declare function SelectableCardGroup({ type, value, onValueChange, variant, gap, style, children, }: SelectableCardGroupProps): React.JSX.Element;
+interface SelectableCardProps {
+    value: string;
+    title: string;
+    description?: string;
+    iconName?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+declare function SelectableCard({ value, title, description, iconName, icon, disabled, style, }: SelectableCardProps): React.JSX.Element;
+
+export { SelectableCard, SelectableCardGroup, type SelectableCardGroupProps, type SelectableCardProps };

package/dist/SelectableCard.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type SelectType = 'radio' | 'checkbox';
+type CardVariant = 'elevated' | 'outlined' | 'filled';
+interface SelectableCardGroupProps {
+    type: SelectType;
+    value: string | string[];
+    onValueChange: (value: string | string[]) => void;
+    variant?: CardVariant;
+    gap?: number;
+    style?: ViewStyle;
+    children: React.ReactNode;
+}
+declare function SelectableCardGroup({ type, value, onValueChange, variant, gap, style, children, }: SelectableCardGroupProps): React.JSX.Element;
+interface SelectableCardProps {
+    value: string;
+    title: string;
+    description?: string;
+    iconName?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+declare function SelectableCard({ value, title, description, iconName, icon, disabled, style, }: SelectableCardProps): React.JSX.Element;
+
+export { SelectableCard, SelectableCardGroup, type SelectableCardGroupProps, type SelectableCardProps };