@oxyhq/bloom 0.29.1 → 0.29.3

package/src/design-tokens/theme.css

@@ -0,0 +1,81 @@
+/*
+ * AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
+ * Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
+ * Re-run `bun run generate:theme-css` (or any `bun run build`) after
+ * changing any design token.
+ */
+
+@theme {
+  --color-bg: var(--background);
+  --color-fill: var(--card);
+  --color-fill-secondary: var(--muted);
+  --color-fill-hover: var(--accent);
+  --color-fill-brand: var(--primary);
+  --color-fill-brand-hover: var(--ring);
+  --color-fill-inverse: var(--foreground);
+  --color-fill-inverse-hover: var(--muted-foreground);
+  --color-fill-placeholder: var(--muted);
+  --color-text: var(--foreground);
+  --color-text-secondary: var(--muted-foreground);
+  --color-text-tertiary: var(--muted-foreground);
+  --color-text-inverse: var(--primary-foreground);
+  --color-text-fixed-light: var(--primary-foreground);
+  --color-text-placeholder: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-border-image: var(--border);
+  --color-border-secondary: var(--input);
+  --color-border-input: var(--input);
+  --color-border-input-active: var(--ring);
+  --spacing-space-2: 2px;
+  --spacing-space-4: 4px;
+  --spacing-space-8: 8px;
+  --spacing-space-12: 12px;
+  --spacing-space-16: 16px;
+  --spacing-space-20: 20px;
+  --spacing-space-24: 24px;
+  --spacing-space-32: 32px;
+  --spacing-screen-margin: 20px;
+  --radius-radius-8: 8px;
+  --radius-radius-12: 12px;
+  --radius-radius-20: 20px;
+  --radius-radius-28: 28px;
+  --radius-radius-max: 9999px;
+  --border-width-hairline: 0.5px;
+  --text-caption: 11px;
+  --text-caption--line-height: 14px;
+  --text-caption--font-weight: 400;
+  --font-caption: var(--bloom-font-sans);
+  --text-bodySmall: 13px;
+  --text-bodySmall--line-height: 18px;
+  --text-bodySmall--font-weight: 400;
+  --font-bodySmall: var(--bloom-font-sans);
+  --text-bodyTitleSmall: 13px;
+  --text-bodyTitleSmall--line-height: 18px;
+  --text-bodyTitleSmall--font-weight: 600;
+  --font-bodyTitleSmall: var(--bloom-font-sans);
+  --text-body: 15px;
+  --text-body--line-height: 22px;
+  --text-body--font-weight: 400;
+  --font-body: var(--bloom-font-sans);
+  --text-subtitle: 17px;
+  --text-subtitle--line-height: 24px;
+  --text-subtitle--font-weight: 500;
+  --font-subtitle: var(--bloom-font-sans);
+  --text-sectionTitle: 20px;
+  --text-sectionTitle--line-height: 26px;
+  --text-sectionTitle--font-weight: 600;
+  --font-sectionTitle: var(--bloom-font-sans);
+  --text-headerBold: 28px;
+  --text-headerBold--line-height: 34px;
+  --text-headerBold--font-weight: 700;
+  --font-headerBold: var(--bloom-font-display);
+  --text-buttonLarge: 17px;
+  --text-buttonLarge--line-height: 22px;
+  --text-buttonLarge--font-weight: 600;
+  --font-buttonLarge: var(--bloom-font-sans);
+  --font-bloom-sans: var(--bloom-font-sans);
+  --font-bloom-display: var(--bloom-font-display);
+  --font-bloom-mono: var(--bloom-font-mono);
+  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
+  --shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
+}

package/src/dialog/Dialog.tsx

@@ -398,7 +398,7 @@ function SideSheet({
 
   const backdropAnimatedStyle = useAnimatedStyle(() => ({
     opacity: progress.value * SHEET_BACKDROP_OPACITY,
-  }));
+  }), []);
 
   const hiddenSign = side === 'left' ? -1 : 1;
   const panelAnimatedStyle = useAnimatedStyle(() => {

package/src/loading/Loading.tsx

@@ -92,12 +92,12 @@ const TopLoading: React.FC<TopLoadingProps> = ({
 
   const containerAnimated = useAnimatedStyle(() => ({
     height: height.value,
-  }));
+  }), []);
 
   const innerAnimated = useAnimatedStyle(() => ({
     opacity: opacity.value,
     transform: [{ translateY: translateY.value }],
-  }));
+  }), []);
 
   return (
     <Animated.View style={[styles.topContainer, containerAnimated]} testID={testID}>

package/src/loading/SpinnerIcon.tsx

@@ -60,7 +60,7 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${rotation.value}deg` }],
-  }));
+  }), []);
 
   return (
     <Animated.View

package/src/pressable-scale/PressableScale.tsx

@@ -65,7 +65,7 @@ export const PressableScale = forwardRef<View, PressableScaleProps>(
 
     const animatedStyle = useAnimatedStyle(() => ({
       transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     return (
       <AnimatedPressable