@retray-dev/ui-kit 12.1.0 → 12.2.0

package/COMPONENTS.md

@@ -275,8 +275,9 @@ The full palette components consume. Never supply these directly — they are co
 |-------|-------------|---------|
 | `foregroundSubtle` | `foreground` @ ~70% | Body text, subtitles, secondary content |
 | `foregroundMuted` | `foreground` @ ~62% | Captions, timestamps, placeholders |
-| `surface` | `background` slightly off-canvas | Chip backgrounds, input fills, tag backgrounds, skeleton |
+| `surface` | `background` slightly off-canvas | Chip backgrounds, input fills, tag backgrounds |
 | `surfaceStrong` | `background` stronger offset | Pressed/hover fill states |
+| `skeleton` | `background` @ ±10% | Skeleton placeholder — higher contrast than surface for visibility |
 | `destructiveTint` | `destructive` blended to bg | Alert banner background, toast background |
 | `destructiveBorder` | `destructive` @ 30% | Alert banner border, badge outline |
 | `successTint` | `success` blended to bg | Success banner background |
@@ -285,6 +286,7 @@ The full palette components consume. Never supply these directly — they are co
 | `warningBorder` | `warning` @ 30% | Warning banner border |
 | `ring` | `= primary` | Focus ring color (always matches primary) |
 | `input` | `= border` | Input field border (always matches border) |
+| `separator` | `border` @ ±16-22% | Divider/separator line — deliberately darker than border |
 | `overlay` | `overlay` token or `rgba(0,0,0,0.45)` | Backdrop behind sheets and dialogs |
 | `accentResolved` | `accent` token or `= primary` | Resolved accent color — always present |
 | `accentForegroundResolved` | `accentForeground` token or `= primaryForeground` | Resolved text on accent — always present |
@@ -312,7 +314,7 @@ const { colors } = useTheme()
 import { deriveColors } from '@retray-dev/ui-kit'
 
 const resolved = deriveColors(myThemeColors, 'light')
-// resolved contains all 24 ResolvedColors tokens
+// resolved contains all 26 ResolvedColors tokens
 ```
 
 ---
@@ -917,7 +919,7 @@ No consumer action required — the fix is internal.
 | size | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls height, padding, and icon size |
 | loading | `boolean` | `false` | Replaces label with spinner, forces disabled state |
 | fullWidth | `boolean` | `false` | Stretches to container width (`alignSelf: 'stretch'`) |
-| disabled | `boolean` | — | Reduces opacity to 0.5 |
+| disabled | `boolean` | — | Per-variant explicit colors (no opacity). `filled`→`surface` bg, `secondary`→`border` border, `text`/`outline`→`foregroundMuted` text |
 | icon | `React.ReactNode \| ((props: { label, size, variant }) => React.ReactNode)` | — | Icon rendered alongside label |
 | iconName | `string` | — | Icon name from `@expo/vector-icons`. Takes precedence over `icon` |
 | iconColor | `string` | — | Override icon color. Defaults to variant label color |
@@ -1902,6 +1904,7 @@ const renderItem = useCallback(({ item }) => (
 | width | `number \| string` | `'100%'` | Width of placeholder |
 | height | `number` | `16` | Height of placeholder |
 | borderRadius | `number` | `6` | Corner radius |
+| backgroundColor | `string` | `colors.skeleton` | Override placeholder background color |
 | preset | `'base' \| 'circle' \| 'text'` | `'base'` | Convenience preset |
 | diameter | `number` | `40` | Used by `'circle'` preset — overrides width/height |
 | style | `ViewStyle` | — | — |
@@ -2349,6 +2352,94 @@ const [accepted, setAccepted] = useState(false)
 
 ---
 
+### SelectableCard
+
+**Import:** `import { SelectableCard, SelectableCardGroup } from '@retray-dev/ui-kit'`
+
+**When to use:** Selectable cards with radio (single-select) or checkbox (multi-select) behavior. Each card supports an icon, title, description, and disabled state. Perfect for role selectors, plan pickers, feature/module configuration — anywhere you need descriptive options that communicate more than a simple label.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `string` | required | The value this card represents |
+| title | `string` | required | Card title |
+| description | `string` | — | Secondary text below title |
+| iconName | `string` | — | Left icon from @expo/vector-icons |
+| icon | `ReactNode` | — | Custom left icon |
+| disabled | `boolean` | `false` | Grayed out, no press/haptic |
+| style | `ViewStyle` | — | — |
+
+**SelectableCardGroup Props:**
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| type | `'radio' \| 'checkbox'` | `'radio'` | Selection mode |
+| value | `string \| string[]` | required | Selected value(s) |
+| onValueChange | `(value: string \| string[]) => void` | required | — |
+| variant | `'elevated' \| 'outlined' \| 'filled'` | `'elevated'` | Card surface |
+| gap | `number` | `s(8)` | Spacing between cards |
+| style | `ViewStyle` | — | — |
+
+**Card variants:** `elevated` (shadow depth, 2px border matches background when unselected — no layout shift on select), `outlined` (2px border), `filled` (surfaceStrong background + 2px border). All variants use a consistent 2px border width so cards don't resize when selected.
+
+**Selection visual:** Selected cards get a 2px `colors.primary` border + `EaseView` animated selector indicator. Radio shows a 24×24 circle with spring-animated inner dot. Checkbox shows a 24×24 box with opacity-animated checkmark. Both follow the same visual patterns as `RadioGroup` and `Checkbox`.
+
+**Haptics:** `impactLight` on selection.
+
+**Disabled:** Dims content to `foregroundMuted`, removes shadow/elevation, keeps border at `colors.border`. No press, no haptic.
+
+**Examples:**
+```tsx
+// Single select (radio)
+<SelectableCardGroup
+  type="radio"
+  value={selectedRole}
+  onValueChange={setSelectedRole}
+>
+  <SelectableCard
+    value="admin"
+    iconName="shield"
+    title="Administrator"
+    description="Full access to reports, settings, and business management"
+  />
+  <SelectableCard
+    value="waiter"
+    iconName="user-check"
+    title="Waiter"
+    description="Take orders from tables and manage requests"
+  />
+  <SelectableCard
+    value="cook"
+    iconName="chef-hat"
+    title="Cook"
+    description="Receive and prepare items from each order in the kitchen"
+    disabled
+  />
+</SelectableCardGroup>
+
+// Multi select (checkbox)
+<SelectableCardGroup
+  type="checkbox"
+  value={selectedRoles}
+  onValueChange={setSelectedRoles}
+  variant="outlined"
+>
+  <SelectableCard
+    value="reports"
+    iconName="bar-chart-2"
+    title="Reports"
+    description="View sales, inventory, and performance analytics"
+  />
+  <SelectableCard
+    value="inventory"
+    iconName="package"
+    title="Inventory"
+    description="Manage stock levels and supplier orders"
+  />
+</SelectableCardGroup>
+```
+
+---
+
 ### Slider
 
 **Import:** `import { Slider } from '@retray-dev/ui-kit'`
@@ -2510,6 +2601,7 @@ const [tab, setTab] = useState('profile')
   iconName?: string          // Icon name from @expo/vector-icons
   icon?: ReactNode           // Custom icon node
   iconColor?: string         // Override icon color (defaults to foregroundMuted)
+  triggerActions?: ReactNode // Action buttons rendered between trigger and chevron. Touch-isolated — taps on actions won't toggle the accordion.
 }
 ```
 
@@ -3980,12 +4072,13 @@ export default function TabLayout() {
 | icon | `React.ReactNode` | — | Custom icon node |
 | iconName | `string` | — | Icon from `@expo/vector-icons` (left of value, `colors.primary`) |
 | iconColor | `string` | `colors.primary` | Override icon color |
+| size | `'default' \| 'compact'` | `'default'` | `compact`: 16px SemiBold value, 11px label, reduced padding |
 | variant | `'elevated' \| 'outlined' \| 'filled'` | `'elevated'` | Card surface variant |
 | onPress | `() => void` | — | Makes the card pressable (haptic `impactLight()`) |
 | style | `ViewStyle` | — | — |
 | accessibilityLabel | `string` | — | — |
 
-**Design notes:** Value uses `Sohne-Bold` at 28px. Label uses `Sohne-Regular` at 13px in `foregroundSubtle`. Description uses `Sohne-Regular` at 12px in `foregroundMuted`. Icon renders at 22px, left-aligned with the value. All content is centered vertically and horizontally. The card shrinks to fit its content by default (`alignSelf: 'flex-start'`). When placed inside `Stats.Group`, cards stretch to equal width. When the card is narrow (< 150dp) and has an icon, the layout switches to vertical stacking (icon → value → label → description) to avoid overflow.
+**Design notes:** Value uses `Sohne-Bold` at 21px. Label uses `Sohne-Regular` at 13px in `foregroundSubtle`. Description uses `Sohne-Regular` at 12px in `foregroundMuted`. Icon renders at 20px, left-aligned with the value. All content is centered vertically and horizontally. The card shrinks to fit its content by default (`alignSelf: 'flex-start'`). When placed inside `Stats.Group`, cards stretch to equal width. When the card is narrow (< 150dp) and has an icon, the layout switches to vertical stacking (icon → value → label → description) to avoid overflow.
 
 **`Stats.Group`** — horizontal layout wrapper that distributes children equally:
 
@@ -4237,6 +4330,7 @@ import { HolographicCard, FOIL_PRESETS } from '@retray-dev/ui-kit/HolographicCar
 | borderRadius | `number` | `RADIUS.lg` | — |
 | resizeMode | `'cover' \| 'contain' \| 'stretch'` | `'cover'` | Image resize mode |
 | disabled | `boolean` | `false` | Prevents pressing |
+| allowsEditing | `boolean` | `true` | When `true`, iOS opens the crop/editing screen after selecting an image. Set `false` to accept the image directly without cropping |
 | style | `ViewStyle` | — | — |
 | accessibilityLabel | `string` | — | — |
 

package/README.md

@@ -2,8 +2,8 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 54 components across 9 categories (plus the deep-import `HolographicCard`)
-- Light/dark theme with 12 public tokens (25 resolved) and full customization
+- 55 components across 9 categories (plus the deep-import `HolographicCard`)
+- Light/dark theme with 12 public tokens (26 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
 - Built with TypeScript — full type declarations included
@@ -156,7 +156,7 @@ const { colors, colorScheme } = useTheme()
 
 **Public tokens (12 — override these):** `background`, `foreground`, `card`, `primary`, `primaryForeground`, `border`, `destructive`, `destructiveForeground`, `success`, `successForeground`, `warning`, `warningForeground`. Optional: `overlay`, `accent`, `accentForeground`.
 
-**Derived tokens (read-only via `useTheme()`):** `foregroundSubtle`, `foregroundMuted`, `surface`, `surfaceStrong`, `destructiveTint`, `destructiveBorder`, `successTint`, `successBorder`, `warningTint`, `warningBorder`, `ring`, `input`, `separator`, `overlay`, `accentResolved`, `accentForegroundResolved`
+**Derived tokens (read-only via `useTheme()`):** `foregroundSubtle`, `foregroundMuted`, `surface`, `surfaceStrong`, `skeleton`, `destructiveTint`, `destructiveBorder`, `successTint`, `successBorder`, `warningTint`, `warningBorder`, `ring`, `input`, `separator`, `overlay`, `accentResolved`, `accentForegroundResolved`
 
 ## Design Tokens
 
@@ -187,7 +187,7 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats` |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
-| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
+| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SelectableCard` (+ `SelectableCardGroup`), `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
 | Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |

package/dist/Accordion.d.mts

@@ -11,6 +11,12 @@ interface AccordionItem {
     icon?: React.ReactNode;
     /** Override icon color. Defaults to foregroundMuted. */
     iconColor?: string;
+    /**
+     * Action buttons rendered after the trigger content but before the chevron.
+     * Automatically touch-isolated — taps on actions won't toggle the accordion.
+     * Use this instead of embedding interactive elements inside `trigger`.
+     */
+    triggerActions?: React.ReactNode;
 }
 interface AccordionProps {
     items: AccordionItem[];

package/dist/Accordion.d.ts

@@ -11,6 +11,12 @@ interface AccordionItem {
     icon?: React.ReactNode;
     /** Override icon color. Defaults to foregroundMuted. */
     iconColor?: string;
+    /**
+     * Action buttons rendered after the trigger content but before the chevron.
+     * Automatically touch-isolated — taps on actions won't toggle the accordion.
+     * Use this instead of embedding interactive elements inside `trigger`.
+     */
+    triggerActions?: React.ReactNode;
 }
 interface AccordionProps {
     items: AccordionItem[];

package/dist/Accordion.js

@@ -163,6 +163,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);
@@ -175,6 +176,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -305,6 +307,14 @@ function AccordionItemComponent({
       accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
     /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
+    item.triggerActions ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.View,
+      {
+        style: styles.triggerActions,
+        onTouchEnd: (e) => e.stopPropagation()
+      },
+      item.triggerActions
+    ) : null,
     /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React3__default.default.createElement(
     reactNative.View,
@@ -374,6 +384,12 @@ var styles = reactNative.StyleSheet.create({
   chevron: {
     marginLeft: s(8)
   },
+  triggerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4),
+    marginLeft: s(8)
+  },
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {

package/dist/Accordion.mjs

@@ -1,7 +1,7 @@
-export { Accordion } from './chunk-265G6A46.mjs';
+export { Accordion } from './chunk-NHDI3VQB.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AlertBanner.js

@@ -102,6 +102,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);
@@ -114,6 +115,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/AlertBanner.mjs

@@ -1,6 +1,6 @@
-export { AlertBanner } from './chunk-V6NFJXKO.mjs';
+export { AlertBanner } from './chunk-4OORJ2DY.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AppHeader.js

@@ -109,6 +109,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);
@@ -121,6 +122,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/AppHeader.mjs

@@ -1,10 +1,10 @@
-export { AppHeader } from './chunk-ISY26JQJ.mjs';
-import './chunk-DF6DU42P.mjs';
+export { AppHeader } from './chunk-MVMGPZN6.mjs';
+import './chunk-LOBLCFMN.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Avatar.js

@@ -89,6 +89,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);
@@ -101,6 +102,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Avatar.mjs

@@ -1,4 +1,4 @@
-export { Avatar } from './chunk-S3KJCPEJ.mjs';
-import './chunk-EMUWGDWC.mjs';
+export { Avatar } from './chunk-QOLWA2PW.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Badge.js

@@ -101,6 +101,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);
@@ -113,6 +114,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Badge.mjs

@@ -1,5 +1,5 @@
-export { Badge } from './chunk-3UYAZ7I4.mjs';
+export { Badge } from './chunk-GH67YXG6.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Button.js

@@ -162,6 +162,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);
@@ -174,6 +175,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -342,24 +344,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 || {};
@@ -371,7 +375,6 @@ function ButtonBase({
         containerVariantStyle,
         containerSizeStyles[size],
         fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
         restStyle
       ],
       enabled: !isDisabled,
@@ -387,7 +390,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
       },
@@ -395,7 +398,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
       },
@@ -414,9 +417,6 @@ var styles = reactNative.StyleSheet.create({
   fullWidth: {
     width: "100%"
   },
-  disabled: {
-    opacity: 0.45
-  },
   label: {
     fontFamily: "Sohne-Medium",
     flexShrink: 1

package/dist/Button.mjs

@@ -1,9 +1,9 @@
-export { Button } from './chunk-DOGIPOF5.mjs';
+export { Button } from './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-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Card.js

@@ -150,6 +150,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);
@@ -162,6 +163,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Card.mjs

@@ -1,8 +1,8 @@
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-2CBQKU7H.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-BXF4AMHY.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/CategoryStrip.js

@@ -163,6 +163,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);
@@ -175,6 +176,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/CategoryStrip.mjs

@@ -1,9 +1,9 @@
-export { CategoryStrip } from './chunk-MYZ2EDYU.mjs';
+export { CategoryStrip } from './chunk-3XCFYSX4.mjs';
 import './chunk-YNROWHQJ.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Checkbox.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/Checkbox.mjs

@@ -1,7 +1,7 @@
-export { Checkbox } from './chunk-3N2M3WZL.mjs';
+export { Checkbox } from './chunk-UBUXUMER.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Chip.js

@@ -163,6 +163,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);
@@ -175,6 +176,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/dist/Chip.mjs

@@ -1,8 +1,8 @@
-export { Chip, ChipGroup } from './chunk-FA2KMTH5.mjs';
+export { Chip, ChipGroup } from './chunk-F3YTWO3T.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-EMUWGDWC.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';