everkit-ui 0.1.0

package/dist/module/components/SelectionSheet.js

@@ -0,0 +1,239 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
+import { Check, X } from 'lucide-react-native';
+import { Text } from "./Text.js";
+import { AppImage } from "./AppImage.js";
+import { SearchInput } from "./SearchInput.js";
+import { BottomActionSheet } from "./BottomActionSheet.js";
+import { useColors } from "../theme/ThemeProvider.js";
+import { SPACE } from "../theme/scale.js";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const THUMB_SIZE = 44;
+const ROW_MIN_HEIGHT = 64;
+/** Sheet body as a fraction of the window — a tall picker, like a snap point. */
+const SHEET_HEIGHT_RATIO = 0.82;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Theme-agnostic selection sheet — a searchable, single-select picker on top of
+ * the library's {@link BottomActionSheet}. Each row is a leading thumbnail (or a
+ * fallback {@link SelectionSheetItem.icon} disc), a label + optional subtitle,
+ * and a check on the selected row.
+ *
+ * Generic over the item payload `T`: `items` carry the raw entity in `data`,
+ * which is handed straight back through `onSelect`, so the same sheet picks a
+ * tea, a contact, a workspace — anything one-line. Domain-free: no app store,
+ * router, or icon namespace; the caller supplies the (pre-sorted) items.
+ *
+ * Built on {@link BottomActionSheet} (a `Modal`, not `@gorhom/bottom-sheet`) so
+ * it needs no gesture/animation peer, with {@link SearchInput} for the filter
+ * (label + subtitle, case-insensitive) and a `FlatList` body. The query resets
+ * each time the sheet closes. Colour comes INLINE from {@link useColors};
+ * spacing from the {@link SPACE} scale.
+ */
+export function SelectionSheet({
+  visible,
+  onClose,
+  title,
+  items,
+  selectedId,
+  onSelect,
+  searchable = true,
+  searchPlaceholder = 'Search…',
+  emptyState
+}) {
+  const colors = useColors();
+  const {
+    height
+  } = useWindowDimensions();
+  const [query, setQuery] = useState('');
+
+  // Reset the query whenever the sheet closes so the next open starts clean.
+  useEffect(() => {
+    if (!visible) setQuery('');
+  }, [visible]);
+
+  // Case-insensitive filter across label AND subtitle.
+  const filteredItems = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return items;
+    return items.filter(it => {
+      const inLabel = it.label.toLowerCase().includes(needle);
+      const inSubtitle = it.subtitle?.toLowerCase().includes(needle) ?? false;
+      return inLabel || inSubtitle;
+    });
+  }, [items, query]);
+  const handleSelect = useCallback(item => {
+    onSelect(item);
+    onClose();
+  }, [onSelect, onClose]);
+  const keyExtractor = useCallback(item => item.id, []);
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const isSelected = item.id === selectedId;
+    const Icon = item.icon;
+    return /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => handleSelect(item),
+      accessibilityRole: "button",
+      accessibilityLabel: item.label,
+      accessibilityState: {
+        selected: isSelected
+      },
+      style: ({
+        pressed
+      }) => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: SPACE['4'],
+        paddingVertical: SPACE['2.5'],
+        minHeight: ROW_MIN_HEIGHT,
+        backgroundColor: isSelected ? colors.bg.tertiary : pressed ? colors.bg.secondary : 'transparent'
+      }),
+      children: [item.imageUri ? /*#__PURE__*/_jsx(AppImage, {
+        source: {
+          uri: item.imageUri
+        },
+        style: {
+          width: THUMB_SIZE,
+          height: THUMB_SIZE,
+          borderRadius: THUMB_SIZE / 2,
+          backgroundColor: colors.bg.secondary
+        },
+        contentFit: "cover",
+        transition: 120,
+        recyclingKey: item.id
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          width: THUMB_SIZE,
+          height: THUMB_SIZE,
+          borderRadius: THUMB_SIZE / 2,
+          backgroundColor: colors.bg.secondary,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: Icon ? /*#__PURE__*/_jsx(Icon, {
+          size: 20,
+          color: colors.text.tertiary
+        }) : null
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          marginLeft: SPACE['3']
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-lg",
+          numberOfLines: 1,
+          children: item.label
+        }), item.subtitle ? /*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          numberOfLines: 1,
+          style: {
+            color: colors.text.tertiary,
+            marginTop: 2
+          },
+          children: item.subtitle
+        }) : null]
+      }), isSelected ? /*#__PURE__*/_jsx(Check, {
+        size: 20,
+        color: colors.brand.primary
+      }) : null]
+    });
+  }, [colors, handleSelect, selectedId]);
+  const showEmpty = filteredItems.length === 0;
+  const defaultEmpty = /*#__PURE__*/_jsx(View, {
+    style: {
+      paddingTop: SPACE['12'],
+      alignItems: 'center'
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: "body-md",
+      style: {
+        color: colors.text.tertiary
+      },
+      children: "Nothing here"
+    })
+  });
+  return /*#__PURE__*/_jsx(BottomActionSheet, {
+    visible: visible,
+    onClose: onClose,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        height: Math.round(height * SHEET_HEIGHT_RATIO)
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: SPACE['4'],
+          marginBottom: SPACE['3']
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "heading-lg",
+          children: title
+        }), /*#__PURE__*/_jsx(Pressable, {
+          onPress: onClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          hitSlop: 12,
+          style: {
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: colors.bg.secondary
+          },
+          children: /*#__PURE__*/_jsx(X, {
+            size: 18,
+            color: colors.text.secondary
+          })
+        })]
+      }), searchable ? /*#__PURE__*/_jsx(SearchInput, {
+        value: query,
+        onChangeText: setQuery,
+        placeholder: searchPlaceholder,
+        debounceMs: 0,
+        style: {
+          marginHorizontal: SPACE['4'],
+          marginBottom: SPACE['3']
+        }
+      }) : null, showEmpty ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: emptyState ?? defaultEmpty
+      }) : /*#__PURE__*/_jsx(FlatList, {
+        data: filteredItems,
+        keyExtractor: keyExtractor,
+        renderItem: renderItem,
+        style: {
+          flex: 1
+        }
+        // `"always"` lets a row own the first tap while the search field
+        // holds focus (the New-Architecture keyboard-persist contract).
+        ,
+        keyboardShouldPersistTaps: "always",
+        keyboardDismissMode: "on-drag",
+        contentContainerStyle: {
+          paddingBottom: SPACE['2']
+        }
+      })]
+    })
+  });
+}
+//# sourceMappingURL=SelectionSheet.js.map

package/dist/module/components/SelectionSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useState","FlatList","Pressable","View","useWindowDimensions","Check","X","Text","AppImage","SearchInput","BottomActionSheet","useColors","SPACE","jsx","_jsx","jsxs","_jsxs","THUMB_SIZE","ROW_MIN_HEIGHT","SHEET_HEIGHT_RATIO","SelectionSheet","visible","onClose","title","items","selectedId","onSelect","searchable","searchPlaceholder","emptyState","colors","height","query","setQuery","filteredItems","needle","trim","toLowerCase","filter","it","inLabel","label","includes","inSubtitle","subtitle","handleSelect","item","keyExtractor","id","renderItem","isSelected","Icon","icon","onPress","accessibilityRole","accessibilityLabel","accessibilityState","selected","style","pressed","flexDirection","alignItems","paddingHorizontal","paddingVertical","minHeight","backgroundColor","bg","tertiary","secondary","children","imageUri","source","uri","width","borderRadius","contentFit","transition","recyclingKey","justifyContent","size","color","text","flex","marginLeft","variant","numberOfLines","marginTop","brand","primary","showEmpty","length","defaultEmpty","paddingTop","Math","round","marginBottom","hitSlop","value","onChangeText","placeholder","debounceMs","marginHorizontal","data","keyboardShouldPersistTaps","keyboardDismissMode","contentContainerStyle","paddingBottom"],"sourceRoot":"../../../src","sources":["components/SelectionSheet.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/SettingsRow.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import { Pressable, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { Text } from "./Text.js";
+import { ToggleRow } from "./ToggleRow.js";
+import { useColors } from "../theme/ThemeProvider.js";
+import { SPACE, RADIUS } from "../theme/scale.js";
+
+// ---------------------------------------------------------------------------
+// Types — a discriminated union on `type`
+// ---------------------------------------------------------------------------
+
+/** Tappable navigation / action row — shows an optional value + chevron. */
+
+/** Toggle row — delegates layout to {@link ToggleRow}. */
+
+/** Static info row — a label + read-only value (string or a custom cell). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Theme-agnostic settings row in three shapes, discriminated on `type`:
+ *   - `'pressable'` — a tappable navigation/action row (trailing value + chevron),
+ *   - `'toggle'`    — a label + `Switch` (delegates to {@link ToggleRow}),
+ *   - `'info'`      — a static label + read-only value.
+ *
+ * Color comes INLINE from {@link useColors}: the leading icon disc fills with
+ * `bg.secondary`, the label defaults to `text.primary` (via {@link Text}, or
+ * `semantic.error` when a pressable row is `destructive`), and the description +
+ * trailing value + chevron use the tertiary tokens. `className` is intentionally
+ * not exposed — rows are designed to sit flush inside a {@link SettingsSection}
+ * card, so their padding/alignment is fixed for consistency.
+ */
+export function SettingsRow(props) {
+  const colors = useColors();
+  const {
+    icon,
+    label,
+    description
+  } = props;
+
+  // Toggle rows delegate to <ToggleRow> — that component owns the row layout,
+  // icon disc, and Switch. Forwarding the pre-rendered icon element keeps the
+  // `icon: React.ReactNode` contract for SettingsRow callers.
+  if (props.type === 'toggle') {
+    return /*#__PURE__*/_jsx(ToggleRow, {
+      label: label,
+      helperText: description,
+      value: props.value,
+      onValueChange: props.onValueChange,
+      icon: icon
+    });
+  }
+  const labelColor = props.type === 'pressable' && props.destructive ? {
+    color: colors.semantic.error
+  } : undefined;
+  const inner = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SPACE['3'],
+      paddingVertical: 4
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 36,
+        height: 36,
+        borderRadius: RADIUS.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.bg.secondary
+      },
+      children: icon
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-md",
+        style: labelColor,
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        style: {
+          marginTop: SPACE['0.5'],
+          color: colors.text.tertiary
+        },
+        children: description
+      }) : null]
+    }), props.type === 'pressable' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [props.value ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        style: {
+          color: colors.text.tertiary
+        },
+        children: props.value
+      }) : null, props.showChevron !== false && /*#__PURE__*/_jsx(ChevronRight, {
+        size: 16,
+        color: colors.text.tertiary
+      })]
+    }), props.type === 'info' && (typeof props.value === 'string' ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-sm",
+      style: {
+        color: colors.text.tertiary
+      },
+      children: props.value
+    }) : props.value)]
+  });
+  if (props.type === 'pressable') {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: props.onPress,
+      hitSlop: 4,
+      children: inner
+    });
+  }
+  return inner;
+}
+//# sourceMappingURL=SettingsRow.js.map

package/dist/module/components/SettingsRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","View","ChevronRight","Text","ToggleRow","useColors","SPACE","RADIUS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SettingsRow","props","colors","icon","label","description","type","helperText","value","onValueChange","labelColor","destructive","color","semantic","error","undefined","inner","style","flexDirection","alignItems","gap","paddingVertical","children","width","height","borderRadius","full","justifyContent","backgroundColor","bg","secondary","flex","variant","marginTop","text","tertiary","showChevron","size","onPress","hitSlop"],"sourceRoot":"../../../src","sources":["components/SettingsRow.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/SettingsSection.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import { View } from 'react-native';
+import { Text } from "./Text.js";
+import { Card } from "./Card.js";
+import { SPACE } from "../theme/scale.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Theme-agnostic settings section: a horizontally-inset heading followed by a
+ * {@link Card}-wrapped body. Groups related rows on a settings screen
+ * (Appearance, Notifications, Privacy, About).
+ *
+ * It carries NO color of its own — the heading uses {@link Text}'s default
+ * `text.primary` and the surface is the library's themed {@link Card}. Layout
+ * (the standard horizontal inset + bottom gap so stacked sections space evenly)
+ * is applied INLINE from the library-owned {@link SPACE} scale, so the section
+ * renders with no NativeWind setup in the consumer; `style` is an inline
+ * override merged last.
+ */
+export function SettingsSection({
+  heading,
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      paddingHorizontal: SPACE['5'],
+      marginBottom: SPACE['6']
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "heading-lg",
+      style: {
+        marginBottom: SPACE['3']
+      },
+      children: heading
+    }), /*#__PURE__*/_jsx(Card, {
+      children: children
+    })]
+  });
+}
+//# sourceMappingURL=SettingsSection.js.map

package/dist/module/components/SettingsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","Card","SPACE","jsx","_jsx","jsxs","_jsxs","SettingsSection","heading","children","style","paddingHorizontal","marginBottom","variant"],"sourceRoot":"../../../src","sources":["components/SettingsSection.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAwC,cAAc;AACnE,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,KAAK,QAAQ,mBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAA4B,CAAC,EAAE;EAClF,oBACEJ,KAAA,CAACP,IAAI;IAACW,KAAK,EAAE,CAAC;MAAEC,iBAAiB,EAAET,KAAK,CAAC,GAAG,CAAC;MAAEU,YAAY,EAAEV,KAAK,CAAC,GAAG;IAAE,CAAC,EAAEQ,KAAK,CAAE;IAAAD,QAAA,gBAChFL,IAAA,CAACJ,IAAI;MAACa,OAAO,EAAC,YAAY;MAACH,KAAK,EAAE;QAAEE,YAAY,EAAEV,KAAK,CAAC,GAAG;MAAE,CAAE;MAAAO,QAAA,EAC5DD;IAAO,CACJ,CAAC,eACPJ,IAAA,CAACH,IAAI;MAAAQ,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CACnB,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/Skeleton.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { InteractionManager, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Animated, { makeMutable, useSharedValue, useAnimatedStyle, withRepeat, withTiming, Easing, interpolate, useReducedMotion, cancelAnimation } from 'react-native-reanimated';
+import { useColors } from "../theme/ThemeProvider.js";
+import { hexToRgba } from "../internal/hexToRgba.js";
+import { createRefCounter } from "../internal/refCounter.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SHIMMER_DURATION_MS = 1400;
+// `rgba(…,0)` endpoints (alpha 0, NOT plain 'transparent') avoid iOS's black
+// fringe in gradients.
+const SHIMMER_OFF = 'rgba(255,255,255,0)';
+const AnimatedGradient = Animated.createAnimatedComponent(LinearGradient);
+
+// ONE module-level loop drives every sweep on screen, refcounted so it runs only
+// while at least one sweep is mounted. A per-instance `withRepeat` would start
+// one UI-thread loop per block (a screen full of skeletons spun up dozens and
+// froze the tab transition in the pilot consumer).
+const shimmerProgress = makeMutable(0);
+const shimmerLoop = createRefCounter(() => {
+  shimmerProgress.value = 0;
+  shimmerProgress.value = withRepeat(withTiming(1, {
+    duration: SHIMMER_DURATION_MS,
+    easing: Easing.linear
+  }), -1, false);
+}, () => cancelAnimation(shimmerProgress));
+
+/**
+ * False on the first frames, true once pending interactions (the navigation
+ * transition that mounted the skeleton) have settled — so a screen full of
+ * placeholder blocks paints instantly as plain Views and mounts the animated
+ * sweep afterward.
+ */
+function useAfterInteractions() {
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    const task = InteractionManager.runAfterInteractions(() => setDone(true));
+    return () => task.cancel();
+  }, []);
+  return done;
+}
+
+/**
+ * The animated highlight band. Self-measures its width into a shared value (no
+ * setState, no worklet rebuild, no re-render) and reads the module-level loop —
+ * mounting N sweeps adds N mappers but zero extra animations or renders.
+ */
+function ShimmerSweep({
+  highlight
+}) {
+  const bandWidth = useSharedValue(0);
+  useEffect(() => {
+    shimmerLoop.retain();
+    return () => shimmerLoop.release();
+  }, []);
+  const sweepStyle = useAnimatedStyle(() => ({
+    opacity: bandWidth.value === 0 ? 0 : 1,
+    transform: [{
+      translateX: interpolate(shimmerProgress.value, [0, 1], [-bandWidth.value, bandWidth.value])
+    }]
+  }));
+  return /*#__PURE__*/_jsx(AnimatedGradient, {
+    onLayout: e => {
+      bandWidth.value = Math.round(e.nativeEvent.layout.width);
+    },
+    colors: [SHIMMER_OFF, highlight, SHIMMER_OFF],
+    start: {
+      x: 0,
+      y: 0.3
+    },
+    end: {
+      x: 1,
+      y: 0.7
+    },
+    style: [{
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }, sweepStyle]
+  });
+}
+/**
+ * Theme-agnostic shimmer placeholder — the generic loading-block primitive.
+ * Compose several to build a screen's skeleton (the domain skeletons —
+ * inventory / detail / chat layouts — stay per app).
+ *
+ * Colour comes INLINE from {@link useColors}: the base fills with `bg.tertiary`
+ * and the moving highlight is a translucent wash DERIVED from `bg.card` via
+ * {@link hexToRgba} (overridable via `highlightColor`) — no hardcoded brand
+ * colour. The pilot consumer keyed the highlight off `useTheme().isDark`, which
+ * is not part of everkit's theme contract, so the brightest-surface wash is used
+ * instead. Honors Reduce-Motion (renders a static block) and defers the animated
+ * sweep until navigation interactions settle.
+ */
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = 8,
+  highlightColor,
+  style
+}) {
+  const colors = useColors();
+  const reducedMotion = useReducedMotion();
+  // The first frame is a plain View — all Reanimated machinery mounts only after
+  // the navigation transition settles, so a screen full of skeletons paints
+  // immediately.
+  const interactionsDone = useAfterInteractions();
+  const highlight = highlightColor ?? hexToRgba(colors.bg.card, 0.6);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: width,
+      height,
+      borderRadius,
+      backgroundColor: colors.bg.tertiary,
+      overflow: 'hidden'
+    }, style],
+    children: !reducedMotion && interactionsDone && /*#__PURE__*/_jsx(ShimmerSweep, {
+      highlight: highlight
+    })
+  });
+}
+//# sourceMappingURL=Skeleton.js.map

package/dist/module/components/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","InteractionManager","View","LinearGradient","Animated","makeMutable","useSharedValue","useAnimatedStyle","withRepeat","withTiming","Easing","interpolate","useReducedMotion","cancelAnimation","useColors","hexToRgba","createRefCounter","jsx","_jsx","SHIMMER_DURATION_MS","SHIMMER_OFF","AnimatedGradient","createAnimatedComponent","shimmerProgress","shimmerLoop","value","duration","easing","linear","useAfterInteractions","done","setDone","task","runAfterInteractions","cancel","ShimmerSweep","highlight","bandWidth","retain","release","sweepStyle","opacity","transform","translateX","onLayout","e","Math","round","nativeEvent","layout","width","colors","start","x","y","end","style","position","top","bottom","left","right","Skeleton","height","borderRadius","highlightColor","reducedMotion","interactionsDone","bg","card","backgroundColor","tertiary","overflow","children"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/Spinner.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { ActivityIndicator } from 'react-native';
+import { useColors } from "../theme/ThemeProvider.js";
+import { resolveSpinnerProps } from "../internal/spinnerProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Theme-agnostic inline loading spinner — for spinners inside buttons, list
+ * footers, small badges, content-area placeholders, and overlay cards.
+ *
+ * Color comes INLINE from {@link useColors}: it defaults to `brand.primary` so
+ * callers can usually omit it (pass `color` to override — e.g. anything on a
+ * brand background uses `text.inverse`). The size → `ActivityIndicator`
+ * size/transform mapping is kept pure in the lifted {@link resolveSpinnerProps}
+ * helper. There is no `className` — a spinner carries no layout of its own.
+ */
+export function Spinner({
+  size = 'md',
+  color,
+  style
+}) {
+  const colors = useColors();
+  const resolved = resolveSpinnerProps(size);
+
+  // Compose `transform` (if any) with the caller's `style` so callers can still
+  // pass margins / padding without clobbering the `md` upscale.
+  const composedStyle = resolved.transform ? {
+    ...(style ?? {}),
+    transform: resolved.transform
+  } : style;
+  return /*#__PURE__*/_jsx(ActivityIndicator, {
+    size: resolved.size,
+    color: color ?? colors.brand.primary,
+    style: composedStyle
+  });
+}
+//# sourceMappingURL=Spinner.js.map

package/dist/module/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActivityIndicator","useColors","resolveSpinnerProps","jsx","_jsx","Spinner","size","color","style","colors","resolved","composedStyle","transform","brand","primary"],"sourceRoot":"../../../src","sources":["components/Spinner.tsx"],"mappings":";;AAAA,SAASA,iBAAiB,QAAwB,cAAc;AAChE,SAASC,SAAS,QAAQ,2BAAwB;AAClD,SAASC,mBAAmB,QAA0B,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAahF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAOA,CAAC;EAAEC,IAAI,GAAG,IAAI;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EACnE,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,QAAQ,GAAGR,mBAAmB,CAACI,IAAI,CAAC;;EAE1C;EACA;EACA,MAAMK,aAAoC,GAAGD,QAAQ,CAACE,SAAS,GAC3D;IAAE,IAAIJ,KAAK,IAAI,CAAC,CAAC,CAAC;IAAEI,SAAS,EAAEF,QAAQ,CAACE;EAAU,CAAC,GACnDJ,KAAK;EAET,oBACEJ,IAAA,CAACJ,iBAAiB;IAChBM,IAAI,EAAEI,QAAQ,CAACJ,IAAK;IACpBC,KAAK,EAAEA,KAAK,IAAIE,MAAM,CAACI,KAAK,CAACC,OAAQ;IACrCN,KAAK,EAAEG;EAAc,CACtB,CAAC;AAEN","ignoreList":[]}