@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-AI4DWZCD.js

@@ -1,162 +0,0 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Easing, Animated, Text, Pressable, View } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function useForeground(variant, isSelected) {
-  const theme = useLoamTheme();
-  if (isSelected) return theme.color.accentOnSoft;
-  if (variant === "input") return theme.color.onSurface;
-  return theme.color.onSurface2;
-}
-function Chip({
-  children,
-  variant: variantProp,
-  size = "md",
-  selected = false,
-  onSelectedChange,
-  // Deprecated — when set (and no explicit variant is given) it selects the
-  // `filter` toggle, the pre-split meaning of `selectable`.
-  selectable: legacySelectable,
-  onPress,
-  removable = false,
-  onRemove,
-  removeLabel,
-  leadingIcon,
-  disabled = false,
-  motion = "full",
-  accessibilityLabel
-}) {
-  const resolvedMotion = useResolvedMotion(motion);
-  const animateColour = resolvedMotion !== "none";
-  const animatePress = resolvedMotion === "full";
-  const variant = variantProp === "filled" ? "input" : variantProp === "outline" ? "filter" : variantProp ?? (legacySelectable ? "filter" : "input");
-  const isFilter = variant === "filter";
-  const isSelected = isFilter && selected;
-  const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
-  const fg = useForeground(variant, isSelected);
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const bodyPressable = isFilter || variant === "suggestion" || onPress != null;
-  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
-  const restingFill = variant === "input" ? theme.color.surface2 : theme.color.surface;
-  const backgroundColor = useColorTransition(
-    isSelected ? theme.color.accentSoft : restingFill,
-    theme.duration.fast,
-    easing,
-    animateColour
-  );
-  const edgeTarget = isSelected ? theme.color.accent : variant === "input" ? theme.color.border : theme.color.borderStrong;
-  const borderColor = useColorTransition(edgeTarget, theme.duration.fast, easing, animateColour);
-  const borderWidth = variant === "input" ? theme.borderWidth.base : theme.borderWidth.thick;
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => Animated.spring(scale, {
-    toValue: to,
-    useNativeDriver: true,
-    ...theme.spring.press
-  }).start();
-  const handlePress = () => {
-    if (isFilter) {
-      haptics.impact("light");
-      onSelectedChange?.(!selected);
-      return;
-    }
-    onPress?.();
-  };
-  const handleRemove = (event) => {
-    event.stopPropagation();
-    onRemove?.();
-  };
-  const leading = isSelected ? "check" : leadingIcon;
-  const resolvedRemoveLabel = removeLabel ?? (children ? `Remove ${children}` : "Remove");
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) : null,
-    children !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : null
-  ] });
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      testID: "chip-base",
-      style: [styles.base, { backgroundColor, borderColor, borderWidth, transform: [{ scale }] }],
-      children: [
-        bodyPressable ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: accessibilityLabel ?? children,
-            accessibilityState: isFilter ? { selected: isSelected, disabled } : { disabled },
-            disabled,
-            onPress: disabled ? void 0 : handlePress,
-            onPressIn: disabled || !animatePress ? void 0 : () => spring(0.97),
-            onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
-            hitSlop: { top: slopY, bottom: slopY },
-            style: styles.body,
-            children: body
-          }
-        ) : /* @__PURE__ */ jsx(View, { accessibilityLabel: accessibilityLabel ?? children, style: styles.body, children: body }),
-        removable ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: resolvedRemoveLabel,
-            hitSlop: 8,
-            disabled,
-            onPress: disabled ? void 0 : handleRemove,
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: fg })
-          }
-        ) : null
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  // `backgroundColor` / `borderColor` / `borderWidth` are supplied at the use
-  // site as animated values so the pill can travel between states over
-  // `duration.fast`.
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "flex-start",
-    gap: theme.space.s2,
-    borderRadius: theme.radius.full,
-    variants: {
-      // Height + horizontal padding resolve from the control-size ramp; the pill
-      // keeps its `radius.full` corners (it is a pill, not a ramp-radius box).
-      size: {
-        xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
-        sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
-        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  // The tap target: icon + label laid out with the same gap the pill uses, so
-  // splitting the remove affordance out as a sibling leaves spacing unchanged.
-  body: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[12] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[14] }
-      }
-    }
-  }
-}));
-
-export { Chip };

package/dist/chunk-BTTFCMKG.js

@@ -1,166 +0,0 @@
-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 };