@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-BEDBFJND.js

@@ -0,0 +1,202 @@
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Platform, UIManager, LayoutAnimation, View, Animated, Easing, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var AccordionContext = React.createContext(null);
+function useAccordionContext() {
+  const ctx = React.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion.* must be used within an <Accordion>.");
+  return ctx;
+}
+var AccordionItemContext = React.createContext(null);
+function useAccordionItemContext() {
+  const ctx = React.useContext(AccordionItemContext);
+  if (!ctx)
+    throw new Error("AccordionTrigger/AccordionContent must be used within an <AccordionItem>.");
+  return ctx;
+}
+function toArray(value) {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function Accordion({
+  type = "single",
+  collapsible = true,
+  value,
+  defaultValue,
+  onValueChange,
+  anchored = false,
+  motion = "full",
+  items,
+  children
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const effectiveMotion = motion === "none" ? "none" : theme.reduceMotion ? "reduced" : motion;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(() => toArray(defaultValue));
+  const openValues = isControlled ? toArray(value) : internal;
+  const animateNext = React.useCallback(() => {
+    if (effectiveMotion === "none") return;
+    const duration = theme.motion.expand.duration;
+    const type2 = LayoutAnimation.Types.easeInEaseOut;
+    if (effectiveMotion === "reduced") {
+      LayoutAnimation.configureNext({
+        duration,
+        create: { type: type2, property: LayoutAnimation.Properties.opacity, duration },
+        delete: { type: type2, property: LayoutAnimation.Properties.opacity, duration }
+      });
+      return;
+    }
+    LayoutAnimation.configureNext({
+      duration,
+      update: { type: type2 },
+      ...anchored ? {
+        create: { type: type2, property: LayoutAnimation.Properties.opacity, duration },
+        delete: { type: type2, property: LayoutAnimation.Properties.opacity, duration }
+      } : {}
+    });
+  }, [anchored, effectiveMotion, theme.motion.expand.duration]);
+  const commit = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(type === "single" ? next[0] ?? "" : next);
+    },
+    [isControlled, onValueChange, type]
+  );
+  const isOpen = React.useCallback((v) => openValues.includes(v), [openValues]);
+  const toggle = React.useCallback(
+    (v) => {
+      animateNext();
+      const currentlyOpen = openValues.includes(v);
+      if (type === "single") {
+        if (currentlyOpen) {
+          if (collapsible) commit([]);
+        } else {
+          commit([v]);
+        }
+      } else {
+        commit(currentlyOpen ? openValues.filter((x) => x !== v) : [...openValues, v]);
+      }
+    },
+    [animateNext, collapsible, commit, openValues, type]
+  );
+  const ctx = React.useMemo(
+    () => ({ isOpen, toggle, motion: effectiveMotion }),
+    [isOpen, toggle, effectiveMotion]
+  );
+  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(
+    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 }) });
+}
+function AccordionItem({
+  value,
+  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 }) });
+}
+function AccordionTrigger({ children }) {
+  const { isOpen, toggle, motion } = useAccordionContext();
+  const { value } = useAccordionItemContext();
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const expanded = isOpen(value);
+  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, {
+      toValue: expanded ? 1 : 0,
+      duration: spec.duration,
+      easing: Easing.bezier(...spec.easing),
+      useNativeDriver: true
+    }).start();
+  }, [expanded, motion, rotate, theme.motion.expand, theme.motion.collapse]);
+  const rotation = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { expanded },
+      ...expandedProps(expanded),
+      onPress: () => toggle(value),
+      style: styles.trigger,
+      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 }) })
+      ]
+    }
+  );
+}
+function AccordionContent({ children }) {
+  const { isOpen } = useAccordionContext();
+  const { value } = useAccordionItemContext();
+  const { styles } = useStyles(sheet);
+  if (!isOpen(value)) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.content, children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.contentText, children }) : children });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  item: {
+    backgroundColor: theme.color.surface
+  },
+  itemDivider: {
+    borderTopWidth: theme.borderWidth.thin,
+    borderTopColor: 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]
+  },
+  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
+  },
+  contentText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.5,
+    color: theme.color.text2
+  }
+}));
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/chunk-BTTFCMKG.js

@@ -0,0 +1,166 @@
+import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import * as React from 'react';
+import { Easing, Animated, TextInput, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ROW_HEIGHT = 22;
+function Textarea({
+  error = false,
+  rows = 3,
+  autoGrow = false,
+  minRows = 3,
+  maxRows = 10,
+  editable = true,
+  onFocus,
+  onBlur,
+  onContentSizeChange,
+  style,
+  containerStyle,
+  ...rest
+}) {
+  const [focused, setFocused] = React.useState(false);
+  const disabled = editable === false;
+  const { styles } = useStyles(sheet, { disabled });
+  const theme = useLoamTheme();
+  const padV = 2 * theme.space.s3;
+  const minHeight = (autoGrow ? minRows : rows) * ROW_HEIGHT + padV;
+  const maxHeight = maxRows * ROW_HEIGHT + padV;
+  const [grownHeight, setGrownHeight] = React.useState(null);
+  const handleContentSizeChange = (e) => {
+    if (autoGrow) {
+      const next = Math.min(Math.max(e.nativeEvent.contentSize.height + padV, minHeight), maxHeight);
+      setGrownHeight(next);
+    }
+    onContentSizeChange?.(e);
+  };
+  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : error ? { border: theme.color.danger, fill: theme.color.dangerSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(tone.border, theme.duration.base, easing);
+  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "textarea-container",
+      style: [
+        styles.container,
+        containerStyle,
+        { minHeight, borderColor, backgroundColor },
+        // `autoGrow`: cap the container and drive its height from the content.
+        // Until the first measurement lands it rests at the `minRows` floor.
+        autoGrow && { maxHeight, height: grownHeight ?? minHeight }
+      ],
+      accessibilityState: { disabled },
+      children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ...rest,
+          multiline: true,
+          textAlignVertical: "top",
+          editable,
+          placeholderTextColor: theme.color.text3,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onContentSizeChange: handleContentSizeChange,
+          style: [styles.input, NO_UA_FOCUS_RING, style]
+        }
+      )
+    }
+  );
+}
+function TextareaField({
+  label,
+  hint,
+  error,
+  containerStyle,
+  ...textareaProps
+}) {
+  const { styles } = useStyles(fieldSheet);
+  const labelId = React.useId();
+  return (
+    // Sizing lands here, not on the inner `Textarea`: a label and helper line that
+    // did not follow the field's width would read as a different control.
+    /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
+      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.label, children: label }) : null,
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ...textareaProps,
+          "aria-labelledby": label ? labelId : textareaProps["aria-labelledby"],
+          error: Boolean(error)
+        }
+      ),
+      error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+    ] })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values, so the field can travel between states over `duration.base`.
+  container: {
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderRadius: theme.radius.md,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s3,
+    variants: {
+      // Matches Input: no blanket `opacity` (which dimmed the value text on a
+      // `readonly` field — not WCAG-exempt — to ~2.2:1). The locked look reads
+      // from the `surface3` fill, plain `border` edge and `text2` value colour.
+      disabled: {
+        true: {},
+        false: {}
+      }
+    }
+  },
+  input: {
+    flex: 1,
+    // Same as `Input`: the `<textarea>` react-native-web renders carries a
+    // `min-width: auto` intrinsic floor, which would push the field out of a
+    // container narrower than that measure. Yoga already defaults to 0.
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    variants: {
+      // Solid value colour for the locked field — the locked look reads from the
+      // `surface3` fill and plain edge, not a dimmed ink. `text2` measures only
+      // 4.4:1 on `surface3` (WCAG fail), so the value keeps primary `text`.
+      disabled: {
+        true: { color: theme.color.text },
+        false: {}
+      }
+    }
+  }
+}));
+var fieldSheet = createStyleSheet((theme) => ({
+  field: { gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.danger
+  }
+}));
+
+export { Textarea, TextareaField };