panelui-native 0.1.0 → 0.4.0

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,kCAA+B,CAAC;AAG3F,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAmB,CAAC;AAG7D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAqB,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAmB,CAAC;AACzD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,oCAAiC,CAAC;AAGzC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAAoB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,8BAAqB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAAoB,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,GAC7B,MAAM,oCAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,8BAAqB,CAAC;AAC/D,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,kBAAkB,GACxB,MAAM,8BAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,8BAAqB,CAAC;AACrF,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,4BAAmB,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,4BAAmB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAuB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAAoB,CAAC;AAC5D,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,mBAAmB,GACzB,MAAM,mCAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,+BAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,8BAAqB,CAAC;AAG/D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAS,CAAC;AAG5E,OAAO,EAAE,EAAE,EAAE,MAAM,eAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/providers/panel-ui-provider.d.ts

@@ -1,13 +1,28 @@
 import type { ReactNode } from 'react';
 export interface PanelUIProviderProps {
     children: ReactNode;
+    /**
+     * Classes for the themed page surface. Defaults to `bg-background`, which
+     * follows the active theme. Pass your own to change the page colour.
+     */
+    className?: string;
+    /**
+     * Set to false to render without the themed page background — do this only
+     * if you paint the app background yourself.
+     */
+    background?: boolean;
 }
 /**
- * Root provider for PanelUI. Wraps the app with the gesture handler root and
- * the portal host used by overlay components (Dialog, BottomSheet, Select).
+ * Root provider for PanelUI. Owns three things:
+ * the gesture handler root, the themed page background, and the portal host
+ * used by overlay components (Dialog, BottomSheet, Select).
  *
- * Theme switching is handled natively by Uniwind — use `Uniwind.setTheme()`
- * or the `useTheme()` hook exported from panelui-native.
+ * The background lives here because native wrappers like SafeAreaView do not
+ * accept `className` — putting `bg-background` on one silently does nothing,
+ * leaving the page unthemed while its children follow the theme.
+ *
+ * Theme switching is handled natively by Uniwind — use the `useTheme()` hook
+ * exported from panelui-native.
  */
-export declare function PanelUIProvider({ children }: PanelUIProviderProps): import("react").JSX.Element;
+export declare function PanelUIProvider({ children, className, background, }: PanelUIProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=panel-ui-provider.d.ts.map

package/lib/typescript/src/providers/panel-ui-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BASjE"}
+{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAatB"}

package/lib/typescript/src/theme/use-theme.d.ts

@@ -1,12 +1,72 @@
-export type ThemeName = 'light' | 'dark' | 'system';
+/** Themes shipped in `panelui-native/theme.css`. */
+export type PanelTheme = 'light' | 'dark' | 'moon' | 'moon-dark' | 'grass' | 'grass-dark';
+export type ThemeName = PanelTheme | 'system';
+/** Light/dark mode within a theme family. */
+export type ThemeMode = 'light' | 'dark';
+/** A theme family — one look, in its light and dark form. */
+export interface PanelThemeFamily {
+    /** Stable id, e.g. `'moon'`. */
+    id: string;
+    /** Short display name, for a theme picker. */
+    name: string;
+    light: PanelTheme;
+    dark: PanelTheme;
+    /** Representative colour for a swatch, as `[light, dark]`. */
+    swatch: [string, string];
+}
+/**
+ * The theme families PanelUI ships. Each sets its own palette *and* its own
+ * radius scale, so switching family changes the shape of the UI as well as
+ * its colour — Panel is the Coss default, Moon is sharp and monochrome,
+ * Grass is soft and green.
+ *
+ * Everything beyond `panel` must be registered in your metro config, or
+ * `setTheme` throws "it was not registered":
+ *
+ * ```js
+ * withUniwindConfig(config, {
+ *   cssEntryFile: './global.css',
+ *   extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+ * });
+ * ```
+ */
+export declare const PANEL_THEMES: readonly PanelThemeFamily[];
+/** Every concrete theme name, in registration order. */
+export declare const PANEL_THEME_NAMES: readonly PanelTheme[];
+/** The names to pass as `extraThemes` in your metro config. */
+export declare const PANEL_EXTRA_THEMES: readonly string[];
 /**
  * Reactive access to the current Uniwind theme plus a setter.
  * Theme changes are applied natively by Uniwind without re-rendering the tree.
  */
 export declare function useTheme(): {
-    /** Currently resolved theme ('light' or 'dark'). */
-    theme: string;
-    /** Switch theme: 'light', 'dark', or 'system' (follows device). */
+    /** The active theme name, e.g. `'dark'` or `'moon-dark'`. */
+    theme: PanelTheme;
+    /** Switch theme by name, or `'system'` to follow the device. */
     setTheme: (name: ThemeName) => void;
 };
+/**
+ * Theme family and light/dark mode as two separate axes — what a picker like
+ * "choose a brand, then toggle the sun" actually needs.
+ *
+ * Named themes are not adaptive in Uniwind, so each brand ships as a
+ * light/dark pair. Toggling the mode keeps the current family, so a user in
+ * Moon dark lands in Moon light rather than the default theme.
+ *
+ * ```tsx
+ * const { family, mode, setFamily, toggleMode } = useThemeMode();
+ * ```
+ */
+export declare function useThemeMode(): {
+    /** The active theme family. */
+    family: PanelThemeFamily;
+    /** `'light'` or `'dark'` within that family. */
+    mode: ThemeMode;
+    /** Switch brand, staying in the current light/dark mode. */
+    setFamily: (id: string) => void;
+    /** Set the mode, staying in the current family. */
+    setMode: (next: ThemeMode) => void;
+    /** Flip light ↔ dark within the current family. */
+    toggleMode: () => void;
+};
 //# sourceMappingURL=use-theme.d.ts.map

package/lib/typescript/src/theme/use-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,QAAQ;IAIpB,oDAAoD;;IAEpD,mEAAmE;qBAClD,SAAS;EAE7B"}
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-theme.ts"],"names":[],"mappings":"AAEA,oDAAoD;AACpD,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,MAAM,GACN,MAAM,GACN,WAAW,GACX,OAAO,GACP,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE9C,6CAA6C;AAC7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,gBAAgB,EAsBnD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,iBAAiB,EAAE,SAAS,UAAU,EAElD,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAC;AASF;;;GAGG;AACH,wBAAgB,QAAQ;IAIpB,6DAA6D;WAC7C,UAAU;IAC1B,gEAAgE;qBAC/C,SAAS;EAE7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY;IAMxB,+BAA+B;;IAE/B,gDAAgD;;IAEhD,4DAA4D;oBAC5C,MAAM;IAItB,mDAAmD;oBACnC,SAAS;IACzB,mDAAmD;;EAGtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "High-performance React Native UI components for Expo. Coss UI design language, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -19,6 +19,7 @@
     "src",
     "lib",
     "theme.css",
+    "README.md",
     "!**/__tests__",
     "!**/*.tsbuildinfo"
   ],
@@ -32,19 +33,36 @@
     "react-native",
     "expo",
     "ui",
+    "ui-library",
+    "ui-components",
     "components",
+    "component-library",
     "tailwind",
+    "tailwindcss",
     "uniwind",
+    "nativewind",
+    "reanimated",
     "design-system",
-    "shadcn"
+    "shadcn",
+    "dark-mode",
+    "theming",
+    "accessibility",
+    "typescript",
+    "ios",
+    "android",
+    "mobile"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Khalidabdi1/PanelUI.git"
+    "url": "git+https://github.com/panel-ui/PanelUI.git",
+    "directory": "packages/panelui"
+  },
+  "bugs": {
+    "url": "https://github.com/panel-ui/PanelUI/issues"
   },
   "author": "Khalid Abdi",
   "license": "MIT",
-  "homepage": "https://github.com/Khalidabdi1/PanelUI#readme",
+  "homepage": "https://github.com/panel-ui/PanelUI#readme",
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
@@ -66,7 +84,12 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      ["module", { "esm": true }],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       "typescript"
     ]
   }

package/src/components/alert/index.tsx

@@ -1,41 +1,50 @@
+/**
+ * Alert — a status message with an optional leading status icon.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/alert/alert.tsx
+ * (Indicator / Content / Title / Description anatomy, status-driven icon and
+ * title colour), restyled with Coss UI tokens.
+ *
+ * The `variant` prop name is kept from PanelUI v0.2 rather than renamed to
+ * HeroUI's `status`, so existing code keeps working.
+ */
 import { createContext, forwardRef, useContext, type ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import { cn } from '../../utils/cn';
 import { Text, type TextProps } from '../../primitives/text';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from '../../icons';
 
 const alertVariants = tv({
   slots: {
-    root: 'w-full gap-1 rounded-xl border p-4',
-    title: 'font-semibold',
-    description: 'text-sm',
+    root: 'w-full flex-row gap-3 rounded-xl border px-3.5 py-3',
+    indicator: 'pt-px',
+    content: 'flex-1 gap-0.5',
+    title: 'text-sm font-medium',
+    description: 'text-sm text-muted-foreground',
   },
   variants: {
     variant: {
       default: {
-        root: 'border-border bg-card',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-border bg-surface',
+        title: 'text-card-foreground',
       },
       info: {
-        root: 'border-info/32 bg-info/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-info/32 bg-info-soft',
+        title: 'text-info-foreground',
       },
       success: {
-        root: 'border-success/32 bg-success/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-success/32 bg-success-soft',
+        title: 'text-success-foreground',
       },
       warning: {
-        root: 'border-warning/32 bg-warning/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-warning/32 bg-warning-soft',
+        title: 'text-warning-foreground',
       },
       destructive: {
-        root: 'border-destructive/32 bg-destructive/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-destructive/32 bg-destructive-soft',
+        title: 'text-destructive-foreground',
       },
     },
   },
@@ -44,20 +53,42 @@ const alertVariants = tv({
   },
 });
 
-type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 
 const AlertContext = createContext<AlertVariant>('default');
 
+/** CSS variable each variant's indicator icon takes its colour from. */
+const INDICATOR_COLOR_VAR: Record<AlertVariant, string> = {
+  default: '--color-muted-foreground',
+  info: '--color-info-foreground',
+  success: '--color-success-foreground',
+  warning: '--color-warning-foreground',
+  destructive: '--color-destructive-foreground',
+};
+
+const INDICATOR_ICON: Record<AlertVariant, typeof InfoIcon> = {
+  default: InfoIcon,
+  info: InfoIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  destructive: AlertTriangleIcon,
+};
+
 export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
   className?: string;
-  /** Optional leading icon rendered before the content. */
+  /**
+   * Leading element rendered before the content.
+   *
+   * @deprecated Prefer `<Alert.Indicator>`, which picks a status icon for you.
+   * Still honoured so v0.2 call sites keep rendering.
+   */
   icon?: ReactNode;
   children?: ReactNode;
 }
 
 const AlertRoot = forwardRef<View, AlertProps>(
   ({ className, variant = 'default', icon, children, ...props }, ref) => {
-    const { root } = alertVariants({ variant });
+    const { root, indicator, content } = alertVariants({ variant });
 
     return (
       <AlertContext.Provider value={variant}>
@@ -68,10 +99,10 @@ const AlertRoot = forwardRef<View, AlertProps>(
           {...props}
         >
           {icon ? (
-            <View className="flex-row items-start gap-3">
-              <View className="mt-0.5">{icon}</View>
-              <View className="flex-1 gap-1">{children}</View>
-            </View>
+            <>
+              <View className={indicator()}>{icon}</View>
+              <View className={content()}>{children}</View>
+            </>
           ) : (
             children
           )}
@@ -82,7 +113,48 @@ const AlertRoot = forwardRef<View, AlertProps>(
 );
 AlertRoot.displayName = 'Alert';
 
-const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+export interface AlertIndicatorProps extends ViewProps {
+  className?: string;
+  /** Overrides the size/colour of the default status icon. */
+  iconProps?: { size?: number; color?: string };
+  /** Replaces the default status icon entirely. */
+  children?: ReactNode;
+}
+
+/**
+ * Leading status icon. Resolves both the icon and its colour from the parent
+ * Alert's variant, so it follows the active theme.
+ */
+const AlertIndicator = forwardRef<View, AlertIndicatorProps>(
+  ({ className, iconProps, children, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { indicator } = alertVariants({ variant });
+    const themeColor = useCSSVariable(INDICATOR_COLOR_VAR[variant]);
+    const Icon = INDICATOR_ICON[variant];
+
+    const color =
+      iconProps?.color ?? (typeof themeColor === 'string' ? themeColor : undefined);
+
+    return (
+      <View ref={ref} className={indicator({ className })} {...props}>
+        {children ?? <Icon size={iconProps?.size ?? 18} color={color} />}
+      </View>
+    );
+  }
+);
+AlertIndicator.displayName = 'Alert.Indicator';
+
+/** Flex-1 wrapper for Alert.Title and Alert.Description. */
+const AlertContent = forwardRef<View, ViewProps & { className?: string }>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { content } = alertVariants({ variant });
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+AlertContent.displayName = 'Alert.Content';
+
+const AlertTitle = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { title } = alertVariants({ variant });
@@ -91,7 +163,7 @@ const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 );
 AlertTitle.displayName = 'Alert.Title';
 
-const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+const AlertDescription = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { description } = alertVariants({ variant });
@@ -101,6 +173,10 @@ const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 AlertDescription.displayName = 'Alert.Description';
 
 export const Alert = Object.assign(AlertRoot, {
+  /** @optional Status icon rendered as the leading visual element. */
+  Indicator: AlertIndicator,
+  /** @optional Wrapper for title and description. */
+  Content: AlertContent,
   Title: AlertTitle,
   Description: AlertDescription,
 });

package/src/components/avatar/index.tsx

@@ -12,7 +12,7 @@ import { Text } from '../../primitives/text';
 const avatarVariants = tv({
   slots: {
     root: 'items-center justify-center overflow-hidden rounded-full border border-border bg-muted',
-    image: 'h-full w-full',
+    image: 'absolute inset-0 h-full w-full',
     fallback: 'font-medium text-muted-foreground',
   },
   variants: {

package/src/components/badge/index.tsx

@@ -14,9 +14,9 @@ const badgeVariants = tv({
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
       outline: { root: 'border-border bg-transparent', label: 'text-foreground' },
       destructive: { root: 'bg-destructive', label: 'text-white' },
-      success: { root: 'bg-success/8 dark:bg-success/16', label: 'text-success-foreground' },
-      warning: { root: 'bg-warning/8 dark:bg-warning/16', label: 'text-warning-foreground' },
-      info: { root: 'bg-info/8 dark:bg-info/16', label: 'text-info-foreground' },
+      success: { root: 'bg-success-subtle', label: 'text-success-foreground' },
+      warning: { root: 'bg-warning-subtle', label: 'text-warning-foreground' },
+      info: { root: 'bg-info-subtle', label: 'text-info-foreground' },
     },
   },
   defaultVariants: {

package/src/components/bottom-sheet/index.tsx

@@ -111,7 +111,8 @@ function BottomSheetContent({
   children,
   ...props
 }: BottomSheetContentProps) {
-  const { open, setOpen } = useBottomSheet('BottomSheet.Content');
+  const context = useBottomSheet('BottomSheet.Content');
+  const { open, setOpen } = context;
   const { height: screenHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
@@ -145,7 +146,10 @@ function BottomSheetContent({
 
   return (
     <Portal>
-      <View className="absolute inset-0 justify-end">
+      {/* Portal content mounts under PortalHost, outside this provider's
+          subtree — re-provide the context so nested consumers keep working. */}
+      <BottomSheetContext.Provider value={context}>
+        <View className="absolute inset-0 justify-end">
         <Animated.View
           entering={FadeIn.duration(180)}
           exiting={FadeOut.duration(180)}
@@ -175,7 +179,8 @@ function BottomSheetContent({
             {children}
           </Animated.View>
         </GestureDetector>
-      </View>
+        </View>
+      </BottomSheetContext.Provider>
     </Portal>
   );
 }

package/src/components/button/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, isValidElement, type ReactNode } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import type { View } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import {
@@ -6,33 +6,40 @@ import {
   type AnimatedPressableProps,
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
+import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
     label: 'font-medium',
+    spinner: '',
   },
   variants: {
     variant: {
       primary: {
         root: 'border-primary bg-primary shadow-sm',
         label: 'text-primary-foreground',
+        spinner: 'border-primary-foreground/32 border-t-primary-foreground',
       },
       secondary: {
         root: 'bg-secondary',
         label: 'text-secondary-foreground',
+        spinner: 'border-secondary-foreground/24 border-t-secondary-foreground',
       },
       outline: {
         root: 'border-input bg-popover shadow-sm',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       ghost: {
         root: 'bg-transparent',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
         label: 'text-white',
+        spinner: 'border-white/32 border-t-white',
       },
     },
     size: {
@@ -41,6 +48,9 @@ const buttonVariants = tv({
       lg: { root: 'h-12 px-6', label: 'text-lg' },
       icon: { root: 'h-11 w-11 px-0' },
     },
+    fullWidth: {
+      true: { root: 'w-full' },
+    },
     disabled: {
       true: { root: 'opacity-[0.64]' },
     },
@@ -53,38 +63,68 @@ const buttonVariants = tv({
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 
+const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
+
 export interface ButtonProps
   extends Omit<AnimatedPressableProps, 'children' | 'disabled'>,
     Omit<ButtonVariantProps, 'disabled'> {
   children?: ReactNode;
   disabled?: boolean;
+  /** Show a spinner and block presses while an action is in flight. */
+  loading?: boolean;
+  /** Content rendered before the label (replaced by the spinner while loading). */
+  startContent?: ReactNode;
+  /** Content rendered after the label. */
+  endContent?: ReactNode;
   /** Extra classes for the label when children is a string. */
   labelClassName?: string;
 }
 
 export const Button = forwardRef<View, ButtonProps>(
   (
-    { children, className, labelClassName, variant, size, disabled, ...props },
+    {
+      children,
+      className,
+      labelClassName,
+      variant,
+      size,
+      fullWidth,
+      disabled,
+      loading = false,
+      startContent,
+      endContent,
+      ...props
+    },
     ref
   ) => {
-    const { root, label } = buttonVariants({ variant, size, disabled: !!disabled });
+    const isDisabled = disabled || loading;
+    const { root, label, spinner } = buttonVariants({
+      variant,
+      size,
+      fullWidth,
+      disabled: isDisabled,
+    });
 
     return (
       <AnimatedPressable
         ref={ref}
         accessibilityRole="button"
-        accessibilityState={{ disabled: !!disabled }}
-        disabled={disabled}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        disabled={isDisabled}
         className={root({ className })}
         {...props}
       >
+        {loading ? (
+          <Spinner size={SPINNER_SIZE[size ?? 'md']} className={spinner()} />
+        ) : (
+          startContent
+        )}
         {typeof children === 'string' ? (
           <Text className={label({ className: labelClassName })}>{children}</Text>
-        ) : isValidElement(children) ? (
-          children
         ) : (
           children
         )}
+        {endContent}
       </AnimatedPressable>
     );
   }

package/src/components/card/index.tsx

@@ -10,14 +10,14 @@ export interface CardProps extends ViewProps {
 const CardRoot = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn('rounded-xl border border-border bg-card shadow-sm', className)}
+    className={cn('rounded-2xl border border-border bg-card shadow-sm', className)}
     {...props}
   />
 ));
 CardRoot.displayName = 'Card';
 
 const CardHeader = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('gap-1.5 p-4', className)} {...props} />
+  <View ref={ref} className={cn('gap-1.5 p-6', className)} {...props} />
 ));
 CardHeader.displayName = 'Card.Header';
 
@@ -27,7 +27,7 @@ const CardTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
       ref={ref}
       size="lg"
       weight="semibold"
-      className={cn('text-card-foreground', className)}
+      className={cn('leading-none text-card-foreground', className)}
       {...props}
     />
   )
@@ -42,14 +42,14 @@ const CardDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 CardDescription.displayName = 'Card.Description';
 
 const CardContent = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ));
 CardContent.displayName = 'Card.Content';
 
 const CardFooter = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn('flex-row items-center gap-2 p-4 pt-0', className)}
+    className={cn('flex-row items-center gap-2 p-6 pt-0', className)}
     {...props}
   />
 ));