@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-EOQVTGB6.js

@@ -0,0 +1,350 @@
+import { Switch } from './chunk-VFDQAAIW.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { RadioGroup, RadioGroupItem } from './chunk-PK7BN3MI.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { useColorScheme, Platform, Text, View, Pressable } from 'react-native';
+import { buildNativeTheme } from '@btndprojects/loam-tokens';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  group: "Appearance",
+  light: "Light",
+  dark: "Dark",
+  system: "System default",
+  automatic: "Automatic",
+  contrast: "Increase contrast"
+};
+var MODES = ["light", "dark", "system"];
+var ICONS = { light: "sun", dark: "moon", system: "monitor" };
+function Preview({ palette, small }) {
+  const { styles } = useStyles(sheet);
+  const c = palette.color;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.frame,
+        small ? styles.frameSm : null,
+        { backgroundColor: c.bg, borderColor: c.border }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.sidebar, { backgroundColor: c.surface2 }] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+          /* @__PURE__ */ jsx(View, { style: [styles.title, { backgroundColor: c.text3 }] }),
+          /* @__PURE__ */ jsxs(View, { style: [styles.card, { backgroundColor: c.surface, borderColor: c.border }], children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.line, styles.line80, { backgroundColor: c.surface3 }] }),
+            /* @__PURE__ */ jsx(View, { style: [styles.line, styles.line60, { backgroundColor: c.surface3 }] }),
+            /* @__PURE__ */ jsx(View, { style: [styles.button, { backgroundColor: c.accent }] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function AppearancePicker({
+  value: valueProp,
+  defaultValue = "system",
+  onValueChange,
+  systemMode: systemModeProp,
+  platform,
+  variant = "cards",
+  contrast,
+  onContrastChange,
+  size = "md",
+  disabled = false,
+  error = false,
+  surface,
+  placeholder,
+  labels: labelsProp
+}) {
+  const labels = useLabels("appearance-picker", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("appearance-picker");
+  const { styles } = useStyles(sheet);
+  const scheme = useColorScheme();
+  const systemMode = systemModeProp ?? (scheme === "dark" ? "dark" : "light");
+  const os = platform ?? (Platform.OS === "ios" ? "ios" : Platform.OS === "android" ? "android" : theme.platform === "iOS" ? "ios" : "android");
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = valueProp === void 0 ? inner : valueProp;
+  const choose = React.useCallback(
+    (next) => {
+      if (valueProp === void 0) setInner(next);
+      onValueChange?.(next);
+    },
+    [valueProp, onValueChange]
+  );
+  const palettes = React.useMemo(() => {
+    const base = { platform: theme.platform, contrast: theme.contrast, accent: theme.color.accent };
+    return {
+      light: buildNativeTheme({ ...base, mode: "Light" }),
+      dark: buildNativeTheme({ ...base, mode: "Dark" })
+    };
+  }, [theme.platform, theme.contrast, theme.color.accent]);
+  const surfaceStyle = surface ? {
+    backgroundColor: fieldSurfaceFill(theme, surface),
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md
+  } : null;
+  const hint = placeholder && value === null ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      testID: "appearance-placeholder",
+      style: [theme.type.footnote, { color: theme.color.text2 }],
+      children: placeholder
+    }
+  ) : null;
+  const [open, setOpen] = React.useState(false);
+  const contrastRow = onContrastChange ? /* @__PURE__ */ jsxs(View, { style: styles.autoRow, children: [
+    /* @__PURE__ */ jsx(Text, { style: [theme.type.body, styles.rowLabel, { color: theme.color.text }], children: labels.contrast }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        accessibilityLabel: labels.contrast,
+        platform: os,
+        size,
+        value: contrast ?? false,
+        disabled,
+        onValueChange: onContrastChange
+      }
+    )
+  ] }) : null;
+  const errorRow = typeof error === "string" && error ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) : null;
+  if (variant === "segmented") {
+    return /* @__PURE__ */ jsxs(View, { style: [styles.androidRoot, surfaceStyle], children: [
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          accessibilityLabel: labels.group,
+          size,
+          value: value ?? "",
+          onValueChange: (v) => choose(v),
+          items: MODES.map((m) => ({
+            value: m,
+            label: m === "system" ? labels.automatic : labels[m],
+            icon: ICONS[m]
+          }))
+        }
+      ),
+      hint,
+      errorRow,
+      contrastRow
+    ] });
+  }
+  if (variant === "menu") {
+    const current = value ? value === "system" ? labels.system : labels[value] : placeholder;
+    return /* @__PURE__ */ jsxs(View, { style: [styles.androidRoot, surfaceStyle], children: [
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          role: "button",
+          "aria-expanded": open,
+          "aria-label": `${labels.group}: ${current ?? ""}`,
+          "aria-invalid": error ? true : void 0,
+          disabled,
+          onPress: () => setOpen((o) => !o),
+          style: [styles.trigger, disabled && styles.inert, error ? styles.triggerError : null],
+          children: [
+            value ? /* @__PURE__ */ jsx(Icon, { name: ICONS[value], size: theme.space[18], color: theme.color.text }) : null,
+            /* @__PURE__ */ jsx(Text, { style: [theme.type.body, styles.rowLabel, { color: theme.color.text }], children: current }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: open ? "chevron-up" : "chevron-down",
+                size: theme.space[18],
+                color: theme.color.text2
+              }
+            )
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          platform: "android",
+          size,
+          accessibilityLabel: labels.group,
+          value: value ?? "",
+          onValueChange: (v) => {
+            choose(v);
+            setOpen(false);
+          },
+          disabled,
+          error,
+          children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "system", label: labels.system }),
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "light", label: labels.light }),
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "dark", label: labels.dark })
+          ]
+        }
+      ) : null,
+      errorRow,
+      contrastRow
+    ] });
+  }
+  if (os === "android") {
+    return /* @__PURE__ */ jsxs(View, { style: [styles.androidRoot, surfaceStyle], children: [
+      /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          platform: "android",
+          size,
+          accessibilityLabel: labels.group,
+          value: value ?? "",
+          onValueChange: (v) => choose(v),
+          disabled,
+          error,
+          children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "system", label: labels.system }),
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "light", label: labels.light }),
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "dark", label: labels.dark })
+          ]
+        }
+      ),
+      hint,
+      errorRow,
+      contrastRow
+    ] });
+  }
+  const automatic = value === "system";
+  const shown = automatic ? systemMode : value;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, surfaceStyle], children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "radiogroup",
+        "aria-label": labels.group,
+        "aria-disabled": disabled || automatic,
+        "aria-invalid": error ? true : void 0,
+        style: styles.pair,
+        children: ["light", "dark"].map((m) => {
+          const on = shown === m;
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              role: "radio",
+              "aria-checked": on,
+              "aria-label": labels[m],
+              disabled: disabled || automatic,
+              onPress: () => {
+                haptics.selection();
+                choose(m);
+              },
+              style: [styles.option, (disabled || automatic) && !on && styles.inert],
+              children: [
+                /* @__PURE__ */ jsx(Preview, { palette: palettes[m], small: size === "sm" }),
+                /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, theme.type.footnote, { color: theme.color.text }], children: labels[m] }),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    testID: `appearance-check-${m}`,
+                    style: [
+                      styles.check,
+                      size === "sm" ? styles.checkSm : null,
+                      on ? styles.checkOn : styles.checkOff,
+                      !on && error ? styles.checkError : null
+                    ],
+                    children: on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.space[14], color: theme.color.accentInk }) : null
+                  }
+                )
+              ]
+            },
+            m
+          );
+        })
+      }
+    ),
+    hint,
+    errorRow,
+    /* @__PURE__ */ jsxs(View, { style: styles.autoRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: [theme.type.body, styles.rowLabel, { color: theme.color.text }], children: labels.automatic }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          accessibilityLabel: labels.automatic,
+          platform: "ios",
+          size,
+          value: automatic,
+          disabled,
+          onValueChange: (on) => choose(on ? "system" : systemMode)
+        }
+      )
+    ] }),
+    contrastRow
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { gap: theme.space.s4 },
+  androidRoot: { gap: theme.space.s2 },
+  pair: { flexDirection: "row", justifyContent: "center", gap: theme.space[48] },
+  option: { alignItems: "center", gap: theme.space.s2 },
+  inert: { opacity: theme.state.disabledOpacity },
+  optionLabel: { textAlign: "center" },
+  // The preview: 16:10 at 80 wide, iOS's Display & Brightness thumbnail.
+  frame: {
+    width: theme.space[80],
+    aspectRatio: 1.6,
+    flexDirection: "row",
+    gap: theme.space[4],
+    padding: theme.space[6],
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    overflow: "hidden"
+  },
+  frameSm: { width: theme.space[64] },
+  sidebar: { width: "24%", borderRadius: theme.radius.xs },
+  main: { flex: 1, gap: theme.space[4] },
+  title: { width: "55%", height: theme.space[4], borderRadius: theme.radius[3] },
+  card: {
+    flex: 1,
+    gap: theme.space[2],
+    padding: theme.space[4],
+    borderRadius: theme.radius.xs,
+    borderWidth: theme.borderWidth.base
+  },
+  line: { height: theme.space[2], borderRadius: theme.radius[2] },
+  line80: { width: "80%" },
+  line60: { width: "60%" },
+  button: {
+    marginTop: "auto",
+    width: "36%",
+    height: theme.space[6],
+    borderRadius: theme.radius[3]
+  },
+  // The 22 check under each preview: accent-filled when chosen, a ring when not.
+  check: {
+    width: theme.space[22],
+    height: theme.space[22],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkSm: { width: theme.space[18], height: theme.space[18] },
+  checkOn: { backgroundColor: theme.color.accent },
+  checkOff: { borderWidth: theme.borderWidth.strong, borderColor: theme.color.borderStrong },
+  checkError: { borderColor: theme.color.danger },
+  rowLabel: { flex: 1 },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.tapMin,
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  triggerError: { borderColor: theme.color.danger },
+  autoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.tapMin,
+    gap: theme.space.s3
+  }
+}));
+
+export { AppearancePicker };

package/dist/{chunk-BEDBFJND.js → chunk-ESGUHNB2.js}

@@ -1,7 +1,10 @@
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Platform, UIManager, LayoutAnimation, View, Animated, Easing, Pressable, Text } from 'react-native';
+import { Platform, UIManager, LayoutAnimation, View, Animated, Pressable, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -31,13 +34,17 @@ function Accordion({
   value,
   defaultValue,
   onValueChange,
-  anchored = false,
   motion = "full",
+  platform,
+  disabled = false,
+  density = "comfortable",
+  size = "md",
+  variant = "bordered",
   items,
   children
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("accordion");
   const effectiveMotion = motion === "none" ? "none" : theme.reduceMotion ? "reduced" : motion;
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(() => toArray(defaultValue));
@@ -54,15 +61,23 @@ function Accordion({
       });
       return;
     }
+    const ds = theme.spring.ds;
+    const fade = theme.spring.fe.duration;
     LayoutAnimation.configureNext({
-      duration,
-      update: { type: type2 },
-      ...anchored ? {
-        create: { type: type2, property: LayoutAnimation.Properties.opacity, duration },
-        delete: { type: type2, property: LayoutAnimation.Properties.opacity, duration }
-      } : {}
+      duration: ds.duration,
+      update: { type: LayoutAnimation.Types.spring, springDamping: ds.dampingRatio },
+      create: {
+        type: LayoutAnimation.Types.easeOut,
+        property: LayoutAnimation.Properties.opacity,
+        duration: fade
+      },
+      delete: {
+        type: LayoutAnimation.Types.easeOut,
+        property: LayoutAnimation.Properties.opacity,
+        duration: fade
+      }
     });
-  }, [anchored, effectiveMotion, theme.motion.expand.duration]);
+  }, [effectiveMotion, theme.motion.expand.duration, theme.spring.ds, theme.spring.fe.duration]);
   const commit = React.useCallback(
     (next) => {
       if (!isControlled) setInternal(next);
@@ -88,59 +103,114 @@ function Accordion({
     [animateNext, collapsible, commit, openValues, type]
   );
   const ctx = React.useMemo(
-    () => ({ isOpen, toggle, motion: effectiveMotion }),
-    [isOpen, toggle, effectiveMotion]
+    () => ({
+      isOpen,
+      toggle,
+      motion: effectiveMotion,
+      android: isAndroidIdiom(theme, platform),
+      disabled,
+      density,
+      size
+    }),
+    [isOpen, toggle, effectiveMotion, theme, platform, disabled, density, size]
   );
-  const rows = items ? items.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.value, _first: i === 0, children: [
-    /* @__PURE__ */ jsx(AccordionTrigger, { children: item.title }),
-    /* @__PURE__ */ jsx(AccordionContent, { children: item.content })
-  ] }, item.value)) : React.Children.map(
+  const rows = items ? items.map((item, i) => /* @__PURE__ */ jsxs(
+    AccordionItem,
+    {
+      value: item.value,
+      disabled: item.disabled,
+      _first: i === 0,
+      children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { children: item.title }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: item.content })
+      ]
+    },
+    item.value
+  )) : React.Children.map(
     children,
     (child, i) => React.isValidElement(child) ? React.cloneElement(child, { _first: i === 0 }) : child
   );
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { style: styles.root, children: rows }) });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { style: [styles.root, variant === "flush" && styles.flush], children: rows }) });
 }
 function AccordionItem({
   value,
+  disabled,
   children,
   _first = false
 }) {
   const { styles } = useStyles(sheet);
-  const ctx = React.useMemo(() => ({ value }), [value]);
-  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { style: [styles.item, !_first && styles.itemDivider], children }) });
+  const { android, disabled: allDisabled } = useAccordionContext();
+  const isDisabled = allDisabled || disabled;
+  const ctx = React.useMemo(
+    () => ({ value, disabled: isDisabled }),
+    [value, isDisabled]
+  );
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: [styles.item, !_first && android && styles.itemDivider], children: [
+    !_first && !android ? /* @__PURE__ */ jsx(View, { style: styles.insetDivider }) : null,
+    children
+  ] }) });
 }
 function AccordionTrigger({ children }) {
-  const { isOpen, toggle, motion } = useAccordionContext();
-  const { value } = useAccordionItemContext();
+  const { isOpen, toggle, motion, android, density, size } = useAccordionContext();
+  const { value, disabled } = useAccordionItemContext();
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("accordion");
   const expanded = isOpen(value);
+  const focusRing = useFocusRing(0, true);
   const rotate = React.useRef(new Animated.Value(expanded ? 1 : 0)).current;
   React.useEffect(() => {
     if (motion !== "full") {
       rotate.setValue(expanded ? 1 : 0);
       return;
     }
-    const spec = expanded ? theme.motion.expand : theme.motion.collapse;
-    Animated.timing(rotate, {
+    Animated.spring(rotate, {
+      ...springConfig(theme, "ds"),
       toValue: expanded ? 1 : 0,
-      duration: spec.duration,
-      easing: Easing.bezier(...spec.easing),
       useNativeDriver: true
     }).start();
-  }, [expanded, motion, rotate, theme.motion.expand, theme.motion.collapse]);
+  }, [expanded, motion, rotate, theme]);
   const rotation = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityState: { expanded },
+      accessibilityState: { expanded, disabled: !!disabled },
       ...expandedProps(expanded),
+      disabled,
       onPress: () => toggle(value),
-      style: styles.trigger,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      android_ripple: android ? { color: theme.state.pressed } : void 0,
+      style: ({ pressed }) => [
+        styles.trigger,
+        // iOS: header on the 44 row tier; Android: the 56 list row.
+        {
+          minHeight: density === "compact" ? android ? theme.space[48] : theme.ctl.md : android ? theme.space[56] : theme.ctl.lg
+        },
+        pressed && !android ? { backgroundColor: theme.state.pressed } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        focusRing.style
+      ],
       children: [
-        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.title, children }) : children,
-        /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 18, color: theme.color.text3 }) })
+        typeof children === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.title,
+              android ? {
+                fontSize: size === "sm" ? theme.fontSize[14] : theme.fontSize[16],
+                lineHeight: size === "sm" ? theme.space[20] : theme.space[24],
+                fontWeight: theme.fontWeight.medium
+              } : {
+                fontSize: size === "sm" ? theme.fontSize[15] : theme.fontSize[17],
+                lineHeight: size === "sm" ? theme.space[20] : theme.space[22],
+                fontWeight: theme.fontWeight.semibold
+              }
+            ],
+            children
+          }
+        ) : children,
+        /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text3 }) })
       ]
     }
   );
@@ -160,6 +230,11 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     overflow: "hidden"
   },
+  flush: {
+    borderWidth: 0,
+    borderRadius: 0,
+    backgroundColor: "transparent"
+  },
   item: {
     backgroundColor: theme.color.surface
   },
@@ -167,29 +242,30 @@ var sheet = createStyleSheet((theme) => ({
     borderTopWidth: theme.borderWidth.thin,
     borderTopColor: theme.color.border
   },
+  insetDivider: {
+    height: theme.borderWidth.thin,
+    marginStart: theme.space.s4,
+    backgroundColor: theme.color.border
+  },
   trigger: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     // Reference (accordion): `gap:12px` — s3 = 12px ✓.
     gap: theme.space.s3,
-    // Reference: `padding:16px 18px` — vertical 16 = s4 ✓, horizontal 18 = a step of the spacing ramp.
-    paddingVertical: theme.space.s4,
-    paddingHorizontal: theme.space[18]
+    // Padding x 16 on both OSes; the row floor is set per idiom (44 / 56) and a
+    // wrapped title grows it.
+    paddingVertical: theme.space.s3,
+    paddingHorizontal: theme.space.s4
   },
   title: {
     flex: 1,
     fontFamily: theme.font.sans,
-    // Reference (accordion): `font-weight:700`.
-    fontWeight: theme.fontWeight.bold,
-    // Reference: `font-size:15px` — 15px, read from the ramp rather than hardcoded.
-    fontSize: theme.fontSize[15],
     color: theme.color.text
   },
   content: {
-    // Reference (accordion) inner: `padding:0 18px 16px` — 18px is a step of the spacing ramp.
-    paddingHorizontal: theme.space[18],
-    paddingBottom: theme.space.s4
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
   },
   contentText: {
     fontFamily: theme.font.sans,