@retray-dev/ui-kit 10.2.0 → 12.2.0

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.
 
-- 53 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
 
@@ -177,13 +177,17 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | `BREAKPOINTS` | `wide` (700) |
 | `TYPOGRAPHY` | 16 variants: `display-hero`, `display-xl`, `display-lg`, `display-md`, `display-sm`, `title-md`, `title-sm`, `body-md`, `body-sm`, `caption`, `caption-sm`, `badge-text`, `micro-label`, `uppercase-tag`, `button-lg`, `button-sm` |
 
+### Color Utilities
+
+- **`withAlpha(color: string, alpha: number)`** — takes a hex color string (e.g., `"#6366f1"`) and an opacity value (0–1), returns an `rgba()` string. Useful for semi-transparent overlays without adding a separate token.
+
 ## Components
 
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
-| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
+| 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`                                                         |
@@ -220,6 +224,11 @@ toast({ title: 'Saved', variant: 'success' })
   options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}
   placeholder="Pick one"
 />
+
+// Color utilities
+import { useTheme, withAlpha } from '@retray-dev/ui-kit'
+const { colors } = useTheme()
+;<View style={{ backgroundColor: withAlpha(colors.primary, 0.15) }} />
 ```
 
 Full props reference and more examples are available in [COMPONENTS.md](./COMPONENTS.md), which is also shipped inside the npm package for use with AI tools:

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-YJ7I257J.mjs';
+export { Accordion } from './chunk-NHDI3VQB.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-SOYNZDVY.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-BEMIQXXU.mjs';
+export { AlertBanner } from './chunk-4OORJ2DY.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/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-TBNZHU6C.mjs';
-import './chunk-T2KCAHOS.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-SOYNZDVY.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-JT7HKXRB.mjs';
-import './chunk-SOYNZDVY.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-VF2ATYN3.mjs';
+export { Badge } from './chunk-GH67YXG6.mjs';
 import './chunk-KA7LTET3.mjs';
-import './chunk-SOYNZDVY.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-HTHGSXFG.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-SOYNZDVY.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-ID72TK46.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-SOYNZDVY.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-6L4G6PBT.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-SOYNZDVY.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-AV4EMIRH.mjs';
+export { Checkbox } from './chunk-UBUXUMER.mjs';
 import './chunk-3DKJ2GIC.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/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-DYT7BG5I.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-SOYNZDVY.mjs';
+import './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/ConfirmDialog.d.mts

@@ -3,20 +3,15 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    /** Secondary text below title. */
     subtitle?: string;
-    /** @deprecated Use `subtitle` instead. */
-    description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
-    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
-    /** Show an X close button in the top-right corner. */
     showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.d.ts

@@ -3,20 +3,15 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    /** Secondary text below title. */
     subtitle?: string;
-    /** @deprecated Use `subtitle` instead. */
-    description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
-    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
-    /** Show an X close button in the top-right corner. */
     showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };