@muja-ui/native 0.2.0

package/dist/index.js

@@ -0,0 +1,2399 @@
+import { createContext, forwardRef, useState, useContext, useCallback, useMemo, useRef, useEffect } from 'react';
+import { View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Platform, useColorScheme, StyleSheet, useWindowDimensions, Animated, Easing, PanResponder, Modal as Modal$1, ScrollView, RefreshControl, Image } from 'react-native';
+import { darkTheme, lightTheme, getIcon } from '@muja-ui/core';
+export { createTheme, darkTheme, lightTheme, registerIcons } from '@muja-ui/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { warnOnce, clamp } from '@muja-ui/utils';
+import Svg, { Path } from 'react-native-svg';
+import { MinusIcon, CheckIcon, ChevronDownIcon, InfoIcon, AlertCircleIcon, AlertTriangleIcon, XIcon, ChevronRightIcon, ChevronLeftIcon } from '@muja-ui/icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// src/components/Box.tsx
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  theme = lightTheme,
+  darkTheme: darkTheme2 = darkTheme,
+  defaultColorMode = "system",
+  colorMode: colorModeProp,
+  onColorModeChange,
+  children
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = useState(defaultColorMode);
+  const colorMode = colorModeProp ?? uncontrolledMode;
+  const systemScheme = useColorScheme();
+  const resolvedColorMode = colorMode === "system" ? systemScheme === "dark" ? "dark" : "light" : colorMode;
+  const setColorMode = useCallback(
+    (mode) => {
+      if (colorModeProp === void 0) setUncontrolledMode(mode);
+      onColorModeChange?.(mode);
+    },
+    [colorModeProp, onColorModeChange]
+  );
+  const toggleColorMode = useCallback(() => {
+    setColorMode(resolvedColorMode === "dark" ? "light" : "dark");
+  }, [resolvedColorMode, setColorMode]);
+  const value = useMemo(
+    () => ({
+      theme: resolvedColorMode === "dark" ? darkTheme2 : theme,
+      colorMode,
+      resolvedColorMode,
+      setColorMode,
+      toggleColorMode
+    }),
+    [theme, darkTheme2, colorMode, resolvedColorMode, setColorMode, toggleColorMode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useThemeContext(hookName) {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error(`[muja-ui] ${hookName} must be used within a <ThemeProvider>.`);
+  }
+  return context;
+}
+function useTheme() {
+  return useThemeContext("useTheme").theme;
+}
+function useColorMode() {
+  const { colorMode, resolvedColorMode, setColorMode, toggleColorMode } = useThemeContext("useColorMode");
+  return { colorMode, resolvedColorMode, setColorMode, toggleColorMode };
+}
+function useColorModeValue(lightValue, darkValue) {
+  return useThemeContext("useColorModeValue").resolvedColorMode === "dark" ? darkValue : lightValue;
+}
+function shadowStyle(value) {
+  const layer = value.layers[0];
+  if (!layer) return Platform.OS === "android" ? { elevation: 0 } : { shadowOpacity: 0 };
+  const alpha = /rgba?\([^)]*,\s*([\d.]+)\s*\)/.exec(layer.color)?.[1];
+  return {
+    shadowColor: layer.color.replace(/rgba?\(([^)]*?),\s*[\d.]+\s*\)/, "rgb($1)"),
+    shadowOffset: { width: layer.x, height: layer.y },
+    shadowOpacity: alpha ? Number(alpha) : 0.1,
+    shadowRadius: layer.blur / 2,
+    // Android's single-number model: approximate the blur as elevation.
+    elevation: Math.round(layer.blur / 2)
+  };
+}
+var space = (key) => (value, theme) => ({ [key]: theme.space[value] });
+var pair = (a, b) => (value, theme) => ({ [a]: theme.space[value], [b]: theme.space[value] });
+var passthrough = (key) => (value) => ({ [key]: value });
+var resolvers = {
+  m: space("margin"),
+  mt: space("marginTop"),
+  mr: space("marginRight"),
+  mb: space("marginBottom"),
+  ml: space("marginLeft"),
+  mx: pair("marginLeft", "marginRight"),
+  my: pair("marginTop", "marginBottom"),
+  p: space("padding"),
+  pt: space("paddingTop"),
+  pr: space("paddingRight"),
+  pb: space("paddingBottom"),
+  pl: space("paddingLeft"),
+  px: pair("paddingLeft", "paddingRight"),
+  py: pair("paddingTop", "paddingBottom"),
+  bg: ((value, theme) => ({
+    backgroundColor: theme.colors[value]
+  })),
+  borderColor: ((value, theme) => ({
+    borderColor: theme.colors[value]
+  })),
+  borderWidth: ((value, theme) => ({
+    borderWidth: theme.borderWidth[value]
+  })),
+  borderTopWidth: ((value, theme) => ({
+    borderTopWidth: theme.borderWidth[value]
+  })),
+  borderBottomWidth: ((value, theme) => ({
+    borderBottomWidth: theme.borderWidth[value]
+  })),
+  radius: ((value, theme) => ({
+    borderRadius: theme.radius[value]
+  })),
+  shadow: ((value, theme) => shadowStyle(theme.shadow[value])),
+  zIndex: ((value, theme) => ({ zIndex: theme.zIndex[value] })),
+  opacity: passthrough("opacity"),
+  w: passthrough("width"),
+  h: passthrough("height"),
+  minW: passthrough("minWidth"),
+  maxW: passthrough("maxWidth"),
+  minH: passthrough("minHeight"),
+  maxH: passthrough("maxHeight"),
+  flex: passthrough("flex"),
+  alignSelf: passthrough("alignSelf"),
+  position: passthrough("position"),
+  top: passthrough("top"),
+  right: passthrough("right"),
+  bottom: passthrough("bottom"),
+  left: passthrough("left"),
+  overflow: passthrough("overflow")
+};
+function isStyleProp(key) {
+  return key in resolvers;
+}
+function splitStyleProps(props, theme) {
+  const style = {};
+  const rest = {};
+  for (const key of Object.keys(props)) {
+    const value = props[key];
+    if (value !== void 0 && isStyleProp(key)) {
+      Object.assign(style, resolvers[key](value, theme));
+    } else {
+      rest[key] = value;
+    }
+  }
+  return { style, rest };
+}
+var Box = forwardRef(function Box2(props, ref) {
+  const theme = useTheme();
+  const { style: styleProp, ...restProps } = props;
+  const { style, rest } = splitStyleProps(restProps, theme);
+  return /* @__PURE__ */ jsx(View, { ref, ...rest, style: [style, styleProp] });
+});
+var Flex = forwardRef(function Flex2({ direction = "row", align, justify, wrap, gap, rowGap, columnGap, style, ...rest }, ref) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      ...rest,
+      style: [
+        {
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          flexWrap: wrap,
+          gap: gap !== void 0 ? theme.space[gap] : void 0,
+          rowGap: rowGap !== void 0 ? theme.space[rowGap] : void 0,
+          columnGap: columnGap !== void 0 ? theme.space[columnGap] : void 0
+        },
+        style
+      ]
+    }
+  );
+});
+var Stack = forwardRef(function Stack2({ direction = "column", gap = 4, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Flex, { ref, direction, gap, ...rest });
+});
+var HStack = forwardRef(function HStack2(props, ref) {
+  return /* @__PURE__ */ jsx(Stack, { ref, direction: "row", align: "center", ...props });
+});
+function Spacer({ size, axis = "vertical" }) {
+  const theme = useTheme();
+  if (size === void 0) return /* @__PURE__ */ jsx(View, { style: { flex: 1 } });
+  const length = theme.space[size];
+  return /* @__PURE__ */ jsx(View, { style: axis === "vertical" ? { height: length } : { width: length } });
+}
+function Divider({ orientation = "horizontal", color = "border", style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        orientation === "horizontal" ? { height: StyleSheet.hairlineWidth, alignSelf: "stretch" } : { width: StyleSheet.hairlineWidth, alignSelf: "stretch" },
+        { backgroundColor: theme.colors[color] },
+        style
+      ]
+    }
+  );
+}
+var Text = forwardRef(function Text2(props, ref) {
+  const theme = useTheme();
+  const {
+    size = "md",
+    weight,
+    family = "sans",
+    leading,
+    tracking,
+    align,
+    color = "text",
+    truncate,
+    style: styleProp,
+    numberOfLines,
+    ...restProps
+  } = props;
+  const { style: tokenStyle, rest } = splitStyleProps(
+    restProps,
+    theme
+  );
+  const fontSize = theme.typography.fontSize[size];
+  const textStyle = {
+    fontFamily: theme.typography.fontFamily[family],
+    fontSize,
+    color: theme.colors[color],
+    fontWeight: weight ? theme.typography.fontWeight[weight] : void 0,
+    lineHeight: leading ? Math.round(fontSize * theme.typography.lineHeight[leading]) : void 0,
+    letterSpacing: tracking ? theme.typography.letterSpacing[tracking] : void 0,
+    textAlign: align
+  };
+  return /* @__PURE__ */ jsx(
+    Text$1,
+    {
+      ref,
+      numberOfLines: truncate ? 1 : numberOfLines,
+      ellipsizeMode: truncate ? "tail" : void 0,
+      ...rest,
+      style: [textStyle, tokenStyle, styleProp]
+    }
+  );
+});
+var defaultSize = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "sm"
+};
+var Heading = forwardRef(function Heading2({ level = 2, size, weight = "semibold", leading = "tight", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref,
+      accessibilityRole: "header",
+      "aria-level": level,
+      size: size ?? defaultSize[level],
+      weight,
+      leading,
+      ...rest
+    }
+  );
+});
+function Icon({
+  icon,
+  size = 20,
+  color = "text",
+  label,
+  strokeWidth = 2,
+  style
+}) {
+  const theme = useTheme();
+  const definition = typeof icon === "string" ? getIcon(icon) : icon;
+  if (!definition) {
+    warnOnce(
+      `Icon "${String(icon)}" is not registered. Call registerIcons() from @muja-ui/core or pass an IconDefinition directly.`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Svg,
+    {
+      viewBox: definition.viewBox ?? "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      style,
+      accessibilityRole: label ? "image" : void 0,
+      accessibilityLabel: label,
+      accessibilityElementsHidden: label ? void 0 : true,
+      importantForAccessibility: label ? void 0 : "no-hide-descendants",
+      children: definition.paths.map((d, index) => /* @__PURE__ */ jsx(
+        Path,
+        {
+          d,
+          stroke: theme.colors[color],
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/system/variants.ts
+function variantColors(variant, theme) {
+  const { colors, borderWidth } = theme;
+  switch (variant) {
+    case "primary":
+      return {
+        background: colors.primary,
+        backgroundPressed: colors.primaryActive,
+        foreground: "onPrimary"
+      };
+    case "secondary":
+      return {
+        background: colors.secondary,
+        backgroundPressed: colors.secondaryActive,
+        foreground: "onSecondary"
+      };
+    case "accent":
+      return {
+        background: colors.accent,
+        backgroundPressed: colors.accentActive,
+        foreground: "onAccent"
+      };
+    case "danger":
+      return {
+        background: colors.danger,
+        backgroundPressed: colors.dangerActive,
+        foreground: "onDanger"
+      };
+    case "outline":
+      return {
+        background: "transparent",
+        backgroundPressed: colors.surfaceActive,
+        foreground: "text",
+        borderColor: colors.borderStrong,
+        borderWidth: borderWidth.thin
+      };
+    case "ghost":
+      return {
+        background: "transparent",
+        backgroundPressed: colors.surfaceActive,
+        foreground: "text"
+      };
+    case "link":
+      return {
+        background: "transparent",
+        backgroundPressed: "transparent",
+        foreground: "primaryText",
+        underline: true
+      };
+  }
+}
+function sizeMetrics(size, theme) {
+  switch (size) {
+    case "sm":
+      return {
+        height: 36,
+        paddingHorizontal: theme.space[3],
+        fontSize: "sm",
+        gap: theme.space[1.5],
+        iconSize: 16
+      };
+    case "lg":
+      return {
+        height: 52,
+        paddingHorizontal: theme.space[6],
+        fontSize: "lg",
+        gap: theme.space[2.5],
+        iconSize: 22
+      };
+    case "md":
+    default:
+      return {
+        height: 44,
+        paddingHorizontal: theme.space[4],
+        fontSize: "md",
+        gap: theme.space[2],
+        iconSize: 18
+      };
+  }
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  disabled = false,
+  children,
+  style,
+  accessibilityLabel,
+  ...rest
+}, ref) {
+  const theme = useTheme();
+  const colors = variantColors(variant, theme);
+  const metrics = sizeMetrics(size, theme);
+  const isInert = disabled || loading;
+  const isLink = variant === "link";
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isInert, busy: loading },
+      accessibilityLabel,
+      disabled: isInert,
+      style: ({ pressed }) => [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: metrics.gap,
+          height: isLink ? void 0 : metrics.height,
+          paddingHorizontal: isLink ? 0 : metrics.paddingHorizontal,
+          borderRadius: isLink ? 0 : theme.radius.md,
+          backgroundColor: pressed ? colors.backgroundPressed : colors.background,
+          borderColor: colors.borderColor,
+          borderWidth: colors.borderWidth,
+          alignSelf: fullWidth ? "stretch" : "flex-start",
+          opacity: isInert ? theme.opacity.disabled : 1
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.colors[colors.foreground] }) : leftIcon ? /* @__PURE__ */ jsx(View, { children: leftIcon }) : null,
+        children != null && children !== false ? typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: metrics.fontSize,
+            weight: "semibold",
+            color: colors.foreground,
+            style: colors.underline ? { textDecorationLine: "underline" } : void 0,
+            children
+          }
+        ) : children : null,
+        rightIcon && !loading ? /* @__PURE__ */ jsx(View, { children: rightIcon }) : null
+      ]
+    }
+  );
+});
+var boxSize = { sm: 36, md: 44, lg: 52 };
+var IconButton = forwardRef(function IconButton2({
+  icon,
+  variant = "ghost",
+  size = "md",
+  loading = false,
+  round = false,
+  disabled = false,
+  style,
+  ...rest
+}, ref) {
+  const theme = useTheme();
+  const colors = variantColors(variant, theme);
+  const dimension = boxSize[size];
+  const isInert = disabled || loading;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isInert, busy: loading },
+      disabled: isInert,
+      hitSlop: dimension < 44 ? (44 - dimension) / 2 : void 0,
+      style: ({ pressed }) => [
+        {
+          width: dimension,
+          height: dimension,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: round ? theme.radius.full : theme.radius.md,
+          backgroundColor: pressed ? colors.backgroundPressed : colors.background,
+          borderColor: colors.borderColor,
+          borderWidth: colors.borderWidth,
+          opacity: isInert ? theme.opacity.disabled : 1
+        },
+        style
+      ],
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.colors[colors.foreground] }) : icon
+    }
+  );
+});
+var Input = forwardRef(function Input2({
+  size = "md",
+  invalid = false,
+  disabled = false,
+  leftElement,
+  rightElement,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const theme = useTheme();
+  const metrics = sizeMetrics(size, theme);
+  const [focused, setFocused] = useState(false);
+  const borderColor = invalid ? theme.colors.danger : focused ? theme.colors.focusRing : theme.colors.border;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: metrics.gap,
+          height: metrics.height,
+          paddingHorizontal: metrics.paddingHorizontal,
+          borderRadius: theme.radius.md,
+          borderWidth: focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+          borderColor,
+          backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface
+        },
+        style
+      ],
+      children: [
+        leftElement,
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref,
+            editable: !disabled,
+            "aria-invalid": invalid || void 0,
+            "aria-disabled": disabled || void 0,
+            placeholderTextColor: theme.colors.textMuted,
+            selectionColor: theme.colors.primary,
+            onFocus: (event) => {
+              setFocused(true);
+              onFocus?.(event);
+            },
+            onBlur: (event) => {
+              setFocused(false);
+              onBlur?.(event);
+            },
+            style: {
+              flex: 1,
+              // Android adds its own vertical padding; zero it so `height` wins.
+              paddingVertical: 0,
+              fontFamily: theme.typography.fontFamily.sans,
+              fontSize: theme.typography.fontSize[metrics.fontSize],
+              color: disabled ? theme.colors.textDisabled : theme.colors.text
+            },
+            ...rest
+          }
+        ),
+        rightElement
+      ]
+    }
+  );
+});
+var Textarea = forwardRef(function Textarea2({ invalid = false, disabled = false, rows = 4, style, onFocus, onBlur, ...rest }, ref) {
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const lineHeight = Math.round(
+    theme.typography.fontSize.md * theme.typography.lineHeight.normal
+  );
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ref,
+      multiline: true,
+      textAlignVertical: "top",
+      editable: !disabled,
+      "aria-invalid": invalid || void 0,
+      placeholderTextColor: theme.colors.textMuted,
+      selectionColor: theme.colors.primary,
+      onFocus: (event) => {
+        setFocused(true);
+        onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setFocused(false);
+        onBlur?.(event);
+      },
+      style: [
+        {
+          minHeight: rows * lineHeight + theme.space[4],
+          padding: theme.space[3],
+          borderRadius: theme.radius.md,
+          borderWidth: focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+          borderColor: invalid ? theme.colors.danger : focused ? theme.colors.focusRing : theme.colors.border,
+          backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface,
+          fontFamily: theme.typography.fontFamily.sans,
+          fontSize: theme.typography.fontSize.md,
+          lineHeight,
+          color: disabled ? theme.colors.textDisabled : theme.colors.text
+        },
+        style
+      ],
+      ...rest
+    }
+  );
+});
+var Label = forwardRef(function Label2({ required = false, size = "sm", weight = "medium", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(Text, { ref, size, weight, ...rest, children: [
+    children,
+    required ? /* @__PURE__ */ jsx(Text, { size, weight, color: "danger", accessibilityLabel: "required", children: " *" }) : null
+  ] });
+});
+function FormField({
+  label,
+  required = false,
+  help,
+  error,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [{ gap: theme.space[1.5] }, style], children: [
+    label ? /* @__PURE__ */ jsx(Label, { required, color: "textSecondary", children: label }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx(Text, { size: "xs", color: "dangerText", accessibilityLiveRegion: "polite", children: error }) : help ? /* @__PURE__ */ jsx(Text, { size: "xs", color: "textMuted", children: help }) : null
+  ] });
+}
+function useControllableState(controlled, defaultValue, onChange) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = controlled !== void 0 ? controlled : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onChange?.(next);
+    },
+    [controlled, onChange]
+  );
+  return [value, setValue];
+}
+var boxSize2 = { sm: 18, md: 22, lg: 26 };
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  indeterminate = false,
+  size = "md",
+  invalid = false,
+  disabled = false,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const [checked, setChecked] = useControllableState(
+    controlledChecked,
+    defaultChecked,
+    onChange
+  );
+  const dimension = boxSize2[size];
+  const filled = checked || indeterminate;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: indeterminate ? "mixed" : checked,
+        disabled
+      },
+      "aria-invalid": invalid || void 0,
+      disabled,
+      onPress: () => setChecked(!checked),
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[2.5],
+          opacity: disabled ? theme.opacity.disabled : 1
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: dimension,
+              height: dimension,
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: theme.radius.sm,
+              borderWidth: theme.borderWidth.medium,
+              borderColor: invalid ? theme.colors.danger : filled ? theme.colors.primary : theme.colors.borderStrong,
+              backgroundColor: filled ? theme.colors.primary : theme.colors.surface
+            },
+            children: filled ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: indeterminate ? MinusIcon : CheckIcon,
+                size: dimension - 6,
+                color: "onPrimary",
+                strokeWidth: 3
+              }
+            ) : null
+          }
+        ),
+        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: size === "lg" ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
+      ]
+    }
+  );
+}
+var track = {
+  sm: { width: 36, height: 20, thumb: 16 },
+  md: { width: 44, height: 26, thumb: 22 },
+  lg: { width: 52, height: 32, thumb: 28 }
+};
+function Switch({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  size = "md",
+  disabled = false,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const [checked, setChecked] = useControllableState(
+    controlledChecked,
+    defaultChecked,
+    onChange
+  );
+  const metrics = track[size];
+  const inset = (metrics.height - metrics.thumb) / 2;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "switch",
+      accessibilityState: { checked, disabled },
+      disabled,
+      onPress: () => setChecked(!checked),
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: theme.space[3],
+          opacity: disabled ? theme.opacity.disabled : 1
+        },
+        style
+      ],
+      children: [
+        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: "sm", style: { flexShrink: 1 }, children }) : children : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: metrics.width,
+              height: metrics.height,
+              borderRadius: theme.radius.full,
+              padding: inset,
+              justifyContent: "center",
+              backgroundColor: checked ? theme.colors.primary : theme.colors.secondaryActive
+            },
+            children: /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: metrics.thumb,
+                  height: metrics.thumb,
+                  borderRadius: theme.radius.full,
+                  backgroundColor: theme.colors.surface,
+                  transform: [{ translateX: checked ? metrics.width - metrics.thumb - inset * 2 : 0 }]
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var RadioGroupContext = createContext(null);
+function RadioGroup({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  size = "md",
+  disabled = false,
+  orientation = "vertical",
+  children,
+  style,
+  accessibilityLabel
+}) {
+  const theme = useTheme();
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onChange
+  );
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: { value, setValue, size, disabled },
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: "radiogroup",
+          accessibilityLabel,
+          style: [
+            {
+              flexDirection: orientation === "horizontal" ? "row" : "column",
+              flexWrap: orientation === "horizontal" ? "wrap" : "nowrap",
+              gap: theme.space[3]
+            },
+            style
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var boxSize3 = { sm: 18, md: 22, lg: 26 };
+function Radio({ value, disabled = false, children, style }) {
+  const theme = useTheme();
+  const group = useContext(RadioGroupContext);
+  if (!group) {
+    warnOnce("<Radio> must be rendered inside a <RadioGroup>.");
+    return null;
+  }
+  const selected = group.value === value;
+  const isDisabled = disabled || group.disabled;
+  const dimension = boxSize3[group.size];
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "radio",
+      accessibilityState: { checked: selected, disabled: isDisabled },
+      disabled: isDisabled,
+      onPress: () => group.setValue(value),
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[2.5],
+          opacity: isDisabled ? theme.opacity.disabled : 1
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: dimension,
+              height: dimension,
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: theme.radius.full,
+              borderWidth: theme.borderWidth.medium,
+              borderColor: selected ? theme.colors.primary : theme.colors.borderStrong,
+              backgroundColor: theme.colors.surface
+            },
+            children: selected ? /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: dimension / 2,
+                  height: dimension / 2,
+                  borderRadius: theme.radius.full,
+                  backgroundColor: theme.colors.primary
+                }
+              }
+            ) : null
+          }
+        ),
+        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: group.size === "lg" ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
+      ]
+    }
+  );
+}
+var DISMISS_THRESHOLD = 96;
+function BottomSheet({
+  open,
+  onClose,
+  closeOnOverlayPress = true,
+  title,
+  accessibilityLabel,
+  maxHeightRatio = 0.9,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const translateY = useRef(new Animated.Value(height)).current;
+  const dragY = useRef(0);
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: open ? 0 : height,
+      duration: open ? theme.motion.duration.normal : theme.motion.duration.fast,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [open, height, translateY, theme.motion.duration]);
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_event, gesture) => gesture.dy > 4,
+      onPanResponderMove: (_event, gesture) => {
+        if (gesture.dy > 0) {
+          dragY.current = gesture.dy;
+          translateY.setValue(gesture.dy);
+        }
+      },
+      onPanResponderRelease: () => {
+        if (dragY.current > DISMISS_THRESHOLD) {
+          onClose();
+        } else {
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
+        }
+        dragY.current = 0;
+      }
+    })
+  ).current;
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      statusBarTranslucent: true,
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { style: { flex: 1, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityLabel: closeOnOverlayPress ? "Close" : void 0,
+            onPress: closeOnOverlayPress ? onClose : void 0,
+            style: { flex: 1, backgroundColor: theme.colors.overlay }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            accessibilityViewIsModal: true,
+            accessibilityLabel: accessibilityLabel ?? title,
+            style: [
+              {
+                maxHeight: height * maxHeightRatio,
+                paddingBottom: insets.bottom + theme.space[4],
+                borderTopLeftRadius: theme.radius["2xl"],
+                borderTopRightRadius: theme.radius["2xl"],
+                backgroundColor: theme.colors.surface,
+                transform: [{ translateY }]
+              },
+              style
+            ],
+            children: [
+              /* @__PURE__ */ jsxs(View, { ...panResponder.panHandlers, style: { paddingTop: theme.space[3] }, children: [
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: {
+                      alignSelf: "center",
+                      width: 40,
+                      height: 4,
+                      borderRadius: theme.radius.full,
+                      backgroundColor: theme.colors.borderStrong
+                    }
+                  }
+                ),
+                title ? /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    level: 3,
+                    size: "lg",
+                    style: {
+                      paddingHorizontal: theme.space[5],
+                      paddingTop: theme.space[4]
+                    },
+                    children: title
+                  }
+                ) : null
+              ] }),
+              children
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder,
+  title,
+  size = "md",
+  invalid = false,
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const theme = useTheme();
+  const metrics = sizeMetrics(size, theme);
+  const [open, setOpen] = useState(false);
+  const selected = options.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? title ?? placeholder,
+        accessibilityValue: { text: selected?.label },
+        accessibilityState: { disabled, expanded: open },
+        "aria-invalid": invalid || void 0,
+        disabled,
+        onPress: () => setOpen(true),
+        style: [
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: metrics.gap,
+            height: metrics.height,
+            paddingHorizontal: metrics.paddingHorizontal,
+            borderRadius: theme.radius.md,
+            borderWidth: invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+            borderColor: invalid ? theme.colors.danger : theme.colors.border,
+            backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface,
+            opacity: disabled ? theme.opacity.disabled : 1
+          },
+          style
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: metrics.fontSize,
+              color: selected ? "text" : "textMuted",
+              truncate: true,
+              style: { flex: 1 },
+              children: selected?.label ?? placeholder ?? ""
+            }
+          ),
+          /* @__PURE__ */ jsx(Icon, { icon: ChevronDownIcon, size: metrics.iconSize, color: "textSecondary" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BottomSheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: title ?? placeholder,
+        accessibilityLabel,
+        children: /* @__PURE__ */ jsx(ScrollView, { style: { marginTop: theme.space[2] }, children: options.map((option) => {
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "menuitem",
+              accessibilityState: { selected: isSelected, disabled: option.disabled },
+              disabled: option.disabled,
+              onPress: () => {
+                onChange?.(option.value);
+                setOpen(false);
+              },
+              style: ({ pressed }) => ({
+                flexDirection: "row",
+                alignItems: "center",
+                gap: theme.space[3],
+                paddingHorizontal: theme.space[5],
+                paddingVertical: theme.space[3.5],
+                backgroundColor: pressed ? theme.colors.surfaceActive : "transparent",
+                opacity: option.disabled ? theme.opacity.disabled : 1
+              }),
+              children: [
+                /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Text, { size: "md", weight: isSelected ? "semibold" : "regular", children: option.label }),
+                  option.description ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", children: option.description }) : null
+                ] }),
+                isSelected ? /* @__PURE__ */ jsx(Icon, { icon: CheckIcon, color: "primary" }) : null
+              ]
+            },
+            option.value
+          );
+        }) })
+      }
+    )
+  ] });
+}
+function Skeleton({
+  width = "100%",
+  height = 16,
+  radius = "sm",
+  animated = true,
+  style
+}) {
+  const theme = useTheme();
+  const pulse = useRef(new Animated.Value(0.5)).current;
+  useEffect(() => {
+    if (!animated) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: theme.motion.duration.slower,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        }),
+        Animated.timing(pulse, {
+          toValue: 0.5,
+          duration: theme.motion.duration.slower,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [animated, pulse, theme.motion.duration.slower]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        {
+          width,
+          height,
+          borderRadius: theme.radius[radius],
+          backgroundColor: theme.colors.bgMuted,
+          opacity: animated ? pulse : 0.7
+        },
+        style
+      ]
+    }
+  );
+}
+function Spinner({ size = "md", color = "primary", label, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      size: size === "sm" ? "small" : "large",
+      color: theme.colors[color],
+      accessibilityRole: "progressbar",
+      accessibilityLabel: label,
+      style: [size === "md" ? { transform: [{ scale: 0.8 }] } : null, style]
+    }
+  );
+}
+function Progress({
+  value,
+  max = 100,
+  height = 8,
+  color = "primary",
+  trackColor = "bgMuted",
+  label,
+  style
+}) {
+  const theme = useTheme();
+  const ratio = max > 0 ? clamp(value / max, 0, 1) : 0;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "progressbar",
+      accessibilityLabel: label,
+      accessibilityValue: { min: 0, max, now: Math.round(value) },
+      style: [
+        {
+          height,
+          borderRadius: theme.radius.full,
+          backgroundColor: theme.colors[trackColor],
+          overflow: "hidden"
+        },
+        style
+      ],
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: `${ratio * 100}%`,
+            height: "100%",
+            borderRadius: theme.radius.full,
+            backgroundColor: theme.colors[color]
+          }
+        }
+      )
+    }
+  );
+}
+var ToastContext = createContext(null);
+var DEFAULT_DURATION = 4e3;
+var toneIcon = {
+  neutral: InfoIcon,
+  success: CheckIcon,
+  warning: AlertTriangleIcon,
+  danger: AlertCircleIcon,
+  info: InfoIcon
+};
+var toneColor = {
+  neutral: "textSecondary",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  info: "info"
+};
+function ToastProvider({ children, placement = "top", max = 3 }) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const [entries, setEntries] = useState([]);
+  const nextId = useRef(0);
+  const dismiss = useCallback((id) => {
+    setEntries((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+  const toast = useCallback(
+    (options) => {
+      const id = nextId.current++;
+      setEntries((current) => [...current, { ...options, id }].slice(-max));
+    },
+    [max]
+  );
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        pointerEvents: "box-none",
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          [placement]: (placement === "top" ? insets.top : insets.bottom) + theme.space[2],
+          paddingHorizontal: theme.space[4],
+          gap: theme.space[2],
+          zIndex: theme.zIndex.toast
+        },
+        children: entries.map((entry) => /* @__PURE__ */ jsx(ToastCard, { entry, onDismiss: dismiss, placement }, entry.id))
+      }
+    )
+  ] });
+}
+function ToastCard({
+  entry,
+  onDismiss,
+  placement
+}) {
+  const theme = useTheme();
+  const tone = entry.tone ?? "neutral";
+  const enter = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(enter, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [enter, theme.motion.duration.normal]);
+  useEffect(() => {
+    const duration = entry.duration ?? DEFAULT_DURATION;
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onDismiss(entry.id), duration);
+    return () => clearTimeout(timer);
+  }, [entry.duration, entry.id, onDismiss]);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: theme.space[3],
+        padding: theme.space[3.5],
+        borderRadius: theme.radius.lg,
+        borderWidth: theme.borderWidth.thin,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.surface,
+        opacity: enter,
+        transform: [
+          {
+            translateY: enter.interpolate({
+              inputRange: [0, 1],
+              outputRange: [placement === "top" ? -16 : 16, 0]
+            })
+          }
+        ],
+        ...shadowStyle(theme.shadow.lg)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: toneIcon[tone], size: 18, color: toneColor[tone] }),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: theme.space[0.5] }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", children: entry.title }),
+          entry.description ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textSecondary", children: entry.description }) : null
+        ] }),
+        entry.action ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            onPress: () => {
+              entry.action?.onPress();
+              onDismiss(entry.id);
+            },
+            hitSlop: 8,
+            children: /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", color: "primaryText", children: entry.action.label })
+          }
+        ) : /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Dismiss",
+            onPress: () => onDismiss(entry.id),
+            hitSlop: 8,
+            children: /* @__PURE__ */ jsx(Icon, { icon: XIcon, size: 16, color: "textMuted" })
+          }
+        )
+      ]
+    }
+  );
+}
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("[muja-ui] useToast must be used within a <ToastProvider>.");
+  }
+  return context;
+}
+function EmptyState({ title, description, icon, action, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.space[2],
+          paddingVertical: theme.space[10],
+          paddingHorizontal: theme.space[6]
+        },
+        style
+      ],
+      children: [
+        icon ? /* @__PURE__ */ jsx(View, { style: { marginBottom: theme.space[2] }, children: icon }) : null,
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", align: "center", children: title }),
+        description ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", align: "center", leading: "normal", children: description }) : null,
+        action ? /* @__PURE__ */ jsx(View, { style: { marginTop: theme.space[3] }, children: action }) : null
+      ]
+    }
+  );
+}
+var tones = {
+  neutral: {
+    solidBg: "secondaryActive",
+    solidFg: "onSecondary",
+    subtleBg: "bgMuted",
+    subtleFg: "textSecondary"
+  },
+  primary: {
+    solidBg: "primary",
+    solidFg: "onPrimary",
+    subtleBg: "primarySubtle",
+    subtleFg: "primaryText"
+  },
+  accent: { solidBg: "accent", solidFg: "onAccent", subtleBg: "accentSubtle", subtleFg: "accentText" },
+  success: {
+    solidBg: "success",
+    solidFg: "onSuccess",
+    subtleBg: "successSubtle",
+    subtleFg: "successText"
+  },
+  warning: {
+    solidBg: "warning",
+    solidFg: "onWarning",
+    subtleBg: "warningSubtle",
+    subtleFg: "warningText"
+  },
+  danger: { solidBg: "danger", solidFg: "onDanger", subtleBg: "dangerSubtle", subtleFg: "dangerText" },
+  info: { solidBg: "info", solidFg: "onInfo", subtleBg: "infoSubtle", subtleFg: "infoText" }
+};
+function Badge({
+  tone = "neutral",
+  variant = "subtle",
+  children,
+  leftIcon,
+  style
+}) {
+  const theme = useTheme();
+  const palette = tones[tone];
+  const background = variant === "solid" ? theme.colors[palette.solidBg] : variant === "subtle" ? theme.colors[palette.subtleBg] : "transparent";
+  const foreground = variant === "solid" ? palette.solidFg : palette.subtleFg;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          alignSelf: "flex-start",
+          gap: theme.space[1],
+          paddingHorizontal: theme.space[2],
+          paddingVertical: theme.space[0.5],
+          borderRadius: theme.radius.full,
+          backgroundColor: background,
+          borderWidth: variant === "outline" ? theme.borderWidth.thin : 0,
+          borderColor: variant === "outline" ? theme.colors[palette.solidBg] : void 0
+        },
+        style
+      ],
+      children: [
+        leftIcon,
+        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", color: foreground, children }) : children
+      ]
+    }
+  );
+}
+function Chip({
+  children,
+  selected = false,
+  disabled = false,
+  onPress,
+  onRemove,
+  leftIcon,
+  style
+}) {
+  const theme = useTheme();
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon,
+    typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", color: selected ? "onPrimary" : "textSecondary", children }) : children,
+    onRemove ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Remove",
+        hitSlop: 8,
+        onPress: onRemove,
+        children: /* @__PURE__ */ jsx(Icon, { icon: XIcon, size: 14, color: selected ? "onPrimary" : "textSecondary" })
+      }
+    ) : null
+  ] });
+  const shape = (pressed) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space[1.5],
+    height: 32,
+    paddingHorizontal: theme.space[3],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: selected ? theme.colors.primary : theme.colors.border,
+    backgroundColor: selected ? theme.colors.primary : pressed ? theme.colors.surfaceActive : theme.colors.surface,
+    opacity: disabled ? theme.opacity.disabled : 1
+  });
+  if (!onPress) return /* @__PURE__ */ jsx(View, { style: [shape(false), style], children: body });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [shape(pressed), style],
+      children: body
+    }
+  );
+}
+var Card = forwardRef(function Card2({ variant = "outline", onPress, accessibilityLabel, children, style }, ref) {
+  const theme = useTheme();
+  const base = {
+    borderRadius: theme.radius.lg,
+    backgroundColor: variant === "filled" ? theme.colors.bgSubtle : theme.colors.surface,
+    borderWidth: variant === "outline" ? theme.borderWidth.thin : 0,
+    borderColor: theme.colors.border,
+    ...variant === "elevated" ? shadowStyle(theme.shadow.sm) : null
+  };
+  if (!onPress) {
+    return /* @__PURE__ */ jsx(View, { ref, style: [base, style], children });
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      style: ({ pressed }) => [
+        base,
+        pressed ? { backgroundColor: theme.colors.surfaceActive } : null,
+        style
+      ],
+      children
+    }
+  );
+});
+function CardHeader({ children, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: [{ padding: theme.space[4], paddingBottom: theme.space[2], gap: theme.space[1] }, style], children });
+}
+function CardTitle({ children, style }) {
+  return /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", style, children });
+}
+function CardDescription({ children, style }) {
+  return /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", style, children });
+}
+function CardContent({ children, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: [{ padding: theme.space[4], paddingTop: theme.space[2] }, style], children });
+}
+function CardFooter({ children, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[2],
+          padding: theme.space[4],
+          paddingTop: 0
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function Container({ gutter = 4, maxWidth: maxWidth2, children, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          paddingHorizontal: theme.space[gutter],
+          width: "100%",
+          maxWidth: maxWidth2,
+          alignSelf: maxWidth2 ? "center" : void 0
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function Section({ title, description, action, gap = 3, children, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [{ gap: theme.space[gap] }, style], children: [
+    title || action ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: theme.space[3]
+        },
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: theme.space[0.5] }, children: [
+            title ? /* @__PURE__ */ jsx(Heading, { level: 2, size: "lg", children: title }) : null,
+            description ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", children: description }) : null
+          ] }),
+          action
+        ]
+      }
+    ) : null,
+    children
+  ] });
+}
+function Screen({
+  children,
+  bg = "bg",
+  scrollable = false,
+  refreshing,
+  onRefresh,
+  edges = ["top", "bottom"],
+  bottomInset = 0,
+  contentContainerStyle,
+  style
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const padding = {
+    paddingTop: edges.includes("top") ? insets.top : 0,
+    paddingBottom: (edges.includes("bottom") ? insets.bottom : 0) + bottomInset
+  };
+  if (!scrollable) {
+    return /* @__PURE__ */ jsx(View, { style: [{ flex: 1, backgroundColor: theme.colors[bg] }, padding, style], children });
+  }
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      style: [{ flex: 1, backgroundColor: theme.colors[bg] }, style],
+      contentContainerStyle: [padding, contentContainerStyle],
+      keyboardShouldPersistTaps: "handled",
+      refreshControl: onRefresh ? /* @__PURE__ */ jsx(
+        RefreshControl,
+        {
+          refreshing: refreshing ?? false,
+          onRefresh,
+          tintColor: theme.colors.primary,
+          colors: [theme.colors.primary]
+        }
+      ) : void 0,
+      children
+    }
+  );
+}
+function ListRow({
+  title,
+  subtitle,
+  left,
+  right,
+  onPress,
+  disabled = false,
+  hideChevron = false,
+  style
+}) {
+  const theme = useTheme();
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    left,
+    /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: theme.space[0.5] }, children: [
+      /* @__PURE__ */ jsx(Text, { size: "md", numberOfLines: 1, children: title }),
+      subtitle ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", numberOfLines: 2, children: subtitle }) : null
+    ] }),
+    right ?? (onPress && !hideChevron ? /* @__PURE__ */ jsx(Icon, { icon: ChevronRightIcon, size: 18, color: "textMuted" }) : null)
+  ] });
+  const layout = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[3],
+    paddingHorizontal: theme.space[4],
+    paddingVertical: theme.space[3.5],
+    minHeight: 56,
+    opacity: disabled ? theme.opacity.disabled : 1
+  };
+  if (!onPress) return /* @__PURE__ */ jsx(View, { style: [layout, style], children: content });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [
+        layout,
+        pressed ? { backgroundColor: theme.colors.surfaceActive } : null,
+        style
+      ],
+      children: content
+    }
+  );
+}
+var sizeMap = { sm: 32, md: 40, lg: 56 };
+function initials(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+function Avatar({ source, name, size = "md", style }) {
+  const theme = useTheme();
+  const [failed, setFailed] = useState(false);
+  const dimension = typeof size === "number" ? size : sizeMap[size];
+  const showImage = !!source && !failed;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: theme.radius.full,
+          backgroundColor: theme.colors.primarySubtle,
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden"
+        },
+        style
+      ],
+      children: showImage ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          source: { uri: source },
+          accessibilityLabel: name,
+          onError: () => setFailed(true),
+          style: { width: "100%", height: "100%" }
+        }
+      ) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: dimension >= 56 ? "lg" : dimension >= 40 ? "md" : "sm",
+          weight: "semibold",
+          color: "primaryText",
+          accessibilityLabel: name,
+          children: name ? initials(name) : "?"
+        }
+      )
+    }
+  );
+}
+function Tabs({
+  items,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  variant = "underline",
+  scrollable = false,
+  style,
+  accessibilityLabel
+}) {
+  const theme = useTheme();
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue ?? items[0]?.value,
+    onChange
+  );
+  const isSegmented = variant === "segmented";
+  const tabs = items.map((item) => {
+    const selected = item.value === value;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "tab",
+        accessibilityState: { selected },
+        onPress: () => setValue(item.value),
+        style: {
+          flex: scrollable ? void 0 : 1,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.space[1.5],
+          paddingHorizontal: theme.space[3],
+          paddingVertical: isSegmented ? theme.space[2] : theme.space[3],
+          borderRadius: isSegmented ? theme.radius.md : 0,
+          backgroundColor: isSegmented && selected ? theme.colors.surface : "transparent",
+          borderBottomWidth: isSegmented ? 0 : theme.borderWidth.medium,
+          borderBottomColor: selected ? theme.colors.primary : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              weight: selected ? "semibold" : "medium",
+              color: selected ? isSegmented ? "text" : "primaryText" : "textMuted",
+              numberOfLines: 1,
+              children: item.label
+            }
+          ),
+          item.badge !== void 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", color: "textMuted", children: item.badge }) : null
+        ]
+      },
+      item.value
+    );
+  });
+  const container = isSegmented ? {
+    flexDirection: "row",
+    gap: theme.space[1],
+    padding: theme.space[1],
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.colors.bgMuted
+  } : {
+    flexDirection: "row",
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.colors.border
+  };
+  if (scrollable) {
+    return /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        accessibilityRole: "tablist",
+        accessibilityLabel,
+        contentContainerStyle: [container, style],
+        children: tabs
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "tablist", accessibilityLabel, style: [container, style], children: tabs });
+}
+function Accordion({
+  items,
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  single = false,
+  style
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useControllableState(controlledValue, defaultValue, onChange);
+  const toggle = (itemValue) => {
+    const isOpen = open.includes(itemValue);
+    if (single) {
+      setOpen(isOpen ? [] : [itemValue]);
+      return;
+    }
+    setOpen(isOpen ? open.filter((entry) => entry !== itemValue) : [...open, itemValue]);
+  };
+  return /* @__PURE__ */ jsx(View, { style, children: items.map((item, index) => {
+    const isOpen = open.includes(item.value);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          borderTopWidth: index === 0 ? 0 : theme.borderWidth.thin,
+          borderTopColor: theme.colors.border
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { expanded: isOpen },
+              onPress: () => toggle(item.value),
+              style: ({ pressed }) => ({
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: theme.space[3],
+                paddingVertical: theme.space[4],
+                backgroundColor: pressed ? theme.colors.surfaceActive : "transparent"
+              }),
+              children: [
+                /* @__PURE__ */ jsx(Text, { size: "md", weight: "medium", style: { flex: 1 }, children: item.title }),
+                /* @__PURE__ */ jsx(View, { style: { transform: [{ rotate: isOpen ? "180deg" : "0deg" }] }, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDownIcon, size: 18, color: "textSecondary" }) })
+              ]
+            }
+          ),
+          isOpen ? /* @__PURE__ */ jsx(View, { style: { paddingBottom: theme.space[4] }, children: item.content }) : null
+        ]
+      },
+      item.value
+    );
+  }) });
+}
+function Collapse({ title, defaultOpen = false, children, style }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsx(
+    Accordion,
+    {
+      items: [{ value: "only", title, content: children }],
+      value: open ? ["only"] : [],
+      onChange: (next) => setOpen(next.length > 0),
+      style
+    }
+  );
+}
+
+// src/internal/date.ts
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function dayKey(date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+function monthGrid(month, weekStartsOn) {
+  const first = startOfMonth(month);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -offset);
+  return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+function Calendar({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  defaultMonth,
+  minDate,
+  maxDate,
+  weekStartsOn = 1,
+  locale,
+  markedDates,
+  onMonthChange,
+  style
+}) {
+  const theme = useTheme();
+  const [selected, setSelected] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onChange
+  );
+  const [month, setMonth] = useState(() => defaultMonth ?? selected ?? /* @__PURE__ */ new Date());
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const days = useMemo(() => monthGrid(month, weekStartsOn), [month, weekStartsOn]);
+  const monthLabel = useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month),
+    [month, locale]
+  );
+  const weekdayLabels = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    const anchor = new Date(2024, 0, 7);
+    return Array.from(
+      { length: 7 },
+      (_, index) => formatter.format(addDays(anchor, index + weekStartsOn))
+    );
+  }, [locale, weekStartsOn]);
+  const goToMonth = (amount) => {
+    const next = addMonths(month, amount);
+    setMonth(next);
+    onMonthChange?.(next);
+  };
+  const isDisabled = (date) => minDate !== void 0 && date < startOfDay(minDate) || maxDate !== void 0 && date > startOfDay(maxDate);
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingBottom: theme.space[2]
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronLeftIcon, color: "textSecondary" }),
+              accessibilityLabel: "Previous month",
+              size: "sm",
+              onPress: () => goToMonth(-1)
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "md", weight: "semibold", accessibilityLiveRegion: "polite", children: monthLabel }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronRightIcon, color: "textSecondary" }),
+              accessibilityLabel: "Next month",
+              size: "sm",
+              onPress: () => goToMonth(1)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row" }, children: weekdayLabels.map((label) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "xs",
+        weight: "medium",
+        color: "textMuted",
+        align: "center",
+        style: { flex: 1, paddingVertical: theme.space[1.5] },
+        children: label
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap" }, children: days.map((day) => {
+      const outside = day.getMonth() !== month.getMonth();
+      const isSelected = selected !== void 0 && isSameDay(day, selected);
+      const isToday = isSameDay(day, today);
+      const disabled = isDisabled(day);
+      const mark = markedDates?.[dayKey(day)];
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(day),
+          accessibilityState: { selected: isSelected, disabled },
+          disabled,
+          onPress: () => setSelected(day),
+          style: {
+            width: `${100 / 7}%`,
+            aspectRatio: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: 34,
+                  height: 34,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: theme.radius.full,
+                  backgroundColor: isSelected ? theme.colors.primary : "transparent",
+                  borderWidth: !isSelected && isToday ? theme.borderWidth.thin : 0,
+                  borderColor: theme.colors.primary,
+                  opacity: disabled ? theme.opacity.disabled : outside ? 0.4 : 1
+                },
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "sm",
+                    weight: isSelected || isToday ? "semibold" : "regular",
+                    color: isSelected ? "onPrimary" : outside ? "textMuted" : "text",
+                    children: day.getDate()
+                  }
+                )
+              }
+            ),
+            mark && !isSelected ? /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: 4,
+                  height: 4,
+                  borderRadius: theme.radius.full,
+                  backgroundColor: theme.colors[mark]
+                }
+              }
+            ) : /* @__PURE__ */ jsx(View, { style: { height: 4 } })
+          ]
+        },
+        dayKey(day)
+      );
+    }) })
+  ] });
+}
+function Carousel({
+  children,
+  slideWidth,
+  gutter = 16,
+  dots = true,
+  onSlideChange,
+  style,
+  accessibilityLabel
+}) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const itemWidth = slideWidth ?? width - gutter * 2;
+  const [index, setIndex] = useState(0);
+  const lastIndex = useRef(0);
+  const handleScroll = (event) => {
+    const next = Math.round(event.nativeEvent.contentOffset.x / (itemWidth + theme.space[3]));
+    if (next === lastIndex.current) return;
+    lastIndex.current = next;
+    setIndex(next);
+    onSlideChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        decelerationRate: "fast",
+        snapToInterval: itemWidth + theme.space[3],
+        snapToAlignment: "start",
+        onMomentumScrollEnd: handleScroll,
+        accessibilityLabel,
+        contentContainerStyle: { gap: theme.space[3], paddingHorizontal: gutter },
+        children: children.map((child, slideIndex) => /* @__PURE__ */ jsx(View, { style: { width: itemWidth }, children: child }, slideIndex))
+      }
+    ),
+    dots && children.length > 1 ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          flexDirection: "row",
+          alignSelf: "center",
+          gap: theme.space[1.5],
+          paddingTop: theme.space[3]
+        },
+        children: children.map((_, dotIndex) => /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: dotIndex === index ? 18 : 6,
+              height: 6,
+              borderRadius: theme.radius.full,
+              backgroundColor: dotIndex === index ? theme.colors.primary : theme.colors.borderStrong
+            }
+          },
+          dotIndex
+        ))
+      }
+    ) : null
+  ] });
+}
+function Tooltip({ label, placement = "top", children, style }) {
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsxs(View, { style: [{ position: "relative" }, style], children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: label,
+        delayLongPress: 200,
+        onLongPress: () => setVisible(true),
+        onPressOut: () => setVisible(false),
+        children
+      }
+    ),
+    visible ? /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "alert",
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          [placement === "top" ? "bottom" : "top"]: "100%",
+          left: 0,
+          marginVertical: theme.space[1.5],
+          maxWidth: 240,
+          paddingHorizontal: theme.space[2.5],
+          paddingVertical: theme.space[1.5],
+          borderRadius: theme.radius.md,
+          backgroundColor: theme.colors.text,
+          ...shadowStyle(theme.shadow.md)
+        },
+        children: /* @__PURE__ */ jsx(Text, { size: "xs", style: { color: theme.colors.textInverse }, children: label })
+      }
+    ) : null
+  ] });
+}
+var maxWidth = { sm: 340, md: 420, lg: 560 };
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  closeOnOverlayPress = true,
+  accessibilityLabel,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      statusBarTranslucent: true,
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityLabel: closeOnOverlayPress ? "Close" : void 0,
+          onPress: closeOnOverlayPress ? onClose : void 0,
+          style: {
+            flex: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            padding: theme.space[5],
+            backgroundColor: theme.colors.overlay
+          },
+          children: /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "alert",
+              accessibilityViewIsModal: true,
+              accessibilityLabel,
+              onPress: () => {
+              },
+              style: [
+                {
+                  width: Math.min(maxWidth[size], width - theme.space[10]),
+                  maxHeight: "85%",
+                  borderRadius: theme.radius.xl,
+                  backgroundColor: theme.colors.surface,
+                  overflow: "hidden"
+                },
+                style
+              ],
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function ModalHeader({ children, onClose, style }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: theme.space[3],
+          paddingHorizontal: theme.space[5],
+          paddingTop: theme.space[5],
+          paddingBottom: theme.space[3]
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children }),
+        onClose ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(Icon, { icon: XIcon, color: "textSecondary" }),
+            accessibilityLabel: "Close",
+            size: "sm",
+            variant: "ghost",
+            onPress: onClose
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ModalTitle({ children }) {
+  return /* @__PURE__ */ jsx(Heading, { level: 3, size: "lg", children });
+}
+function ModalBody({ children, scrollable = true, style }) {
+  const theme = useTheme();
+  const padding = { paddingHorizontal: theme.space[5], paddingBottom: theme.space[4] };
+  if (!scrollable) return /* @__PURE__ */ jsx(View, { style: [padding, style], children });
+  return /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: [padding, style], keyboardShouldPersistTaps: "handled", children });
+}
+function ModalFooter({
+  children,
+  style
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          gap: theme.space[2],
+          paddingHorizontal: theme.space[5],
+          paddingTop: theme.space[3],
+          paddingBottom: theme.space[5]
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+function Drawer({
+  open,
+  onClose,
+  side = "right",
+  widthRatio = 0.85,
+  title,
+  accessibilityLabel,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const panelWidth = width * widthRatio;
+  const offset = side === "right" ? panelWidth : -panelWidth;
+  const translateX = useRef(new Animated.Value(offset)).current;
+  useEffect(() => {
+    Animated.timing(translateX, {
+      toValue: open ? 0 : offset,
+      duration: open ? theme.motion.duration.normal : theme.motion.duration.fast,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }).start();
+  }, [open, offset, translateX, theme.motion.duration]);
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      statusBarTranslucent: true,
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { style: { flex: 1, flexDirection: side === "right" ? "row" : "row-reverse" }, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityLabel: "Close",
+            onPress: onClose,
+            style: { flex: 1, backgroundColor: theme.colors.overlay }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            accessibilityViewIsModal: true,
+            accessibilityLabel: accessibilityLabel ?? title,
+            style: [
+              {
+                width: panelWidth,
+                paddingTop: insets.top,
+                paddingBottom: insets.bottom,
+                backgroundColor: theme.colors.surface,
+                transform: [{ translateX }]
+              },
+              style
+            ],
+            children: [
+              title ? /* @__PURE__ */ jsxs(
+                View,
+                {
+                  style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: theme.space[3],
+                    padding: theme.space[4],
+                    borderBottomWidth: theme.borderWidth.thin,
+                    borderBottomColor: theme.colors.border
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Heading, { level: 3, size: "lg", style: { flex: 1 }, children: title }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: /* @__PURE__ */ jsx(Icon, { icon: XIcon, color: "textSecondary" }),
+                        accessibilityLabel: "Close",
+                        size: "sm",
+                        onPress: onClose
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              children
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ActionSheet({
+  open,
+  onClose,
+  title,
+  description,
+  actions,
+  cancelLabel = "Cancel",
+  style
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(BottomSheet, { open, onClose, title, style, children: [
+    description ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "sm",
+        color: "textMuted",
+        style: { paddingHorizontal: theme.space[5], paddingTop: theme.space[2] },
+        children: description
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(View, { style: { paddingTop: theme.space[3] }, accessibilityRole: "menu", children: [
+      actions.map((action) => /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "menuitem",
+          accessibilityState: { disabled: action.disabled },
+          disabled: action.disabled,
+          onPress: () => {
+            onClose();
+            action.onPress();
+          },
+          style: ({ pressed }) => ({
+            flexDirection: "row",
+            alignItems: "center",
+            gap: theme.space[3],
+            paddingHorizontal: theme.space[5],
+            paddingVertical: theme.space[4],
+            backgroundColor: pressed ? theme.colors.surfaceActive : "transparent",
+            opacity: action.disabled ? theme.opacity.disabled : 1
+          }),
+          children: [
+            action.icon,
+            /* @__PURE__ */ jsx(Text, { size: "md", weight: "medium", color: action.destructive ? "dangerText" : "text", children: action.label })
+          ]
+        },
+        action.label
+      )),
+      cancelLabel ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          onPress: onClose,
+          style: ({ pressed }) => ({
+            paddingHorizontal: theme.space[5],
+            paddingVertical: theme.space[4],
+            borderTopWidth: theme.borderWidth.thin,
+            borderTopColor: theme.colors.border,
+            backgroundColor: pressed ? theme.colors.surfaceActive : "transparent"
+          }),
+          children: /* @__PURE__ */ jsx(Text, { size: "md", weight: "semibold", color: "textSecondary", children: cancelLabel })
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+export { Accordion, ActionSheet, Avatar, Badge, BottomSheet, Box, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, Chip, Collapse, Container, Divider, Drawer, EmptyState, Flex, FormField, HStack, Heading, Icon, IconButton, Input, Label, ListRow, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Progress, Radio, RadioGroup, Screen, Section, Select, Skeleton, Spacer, Spinner, Stack, Switch, Tabs, Text, Textarea, ThemeProvider, ToastProvider, Tooltip, addDays, addMonths, dayKey, isSameDay, monthGrid, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map