@dloizides/ui-forms 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 1.3.0
+
+- `ChipSelector` gains a `variant` prop (`'solid' | 'outline'`, default `'solid'`). `solid` is the
+  original filled-pill look (selected = solid brand fill, white ink) — existing consumers
+  (erevna / katalogos / kefi) render **identically**, no change. `outline` is the AML v1 console
+  look: an outlined pill on a muted fill where the **selected** state is a subtle tinted-outline
+  (brand border + brand ink + a low-alpha brand wash), NOT a solid fill; on web, hover lifts the
+  border + ink to the brand colour. Fully theme-driven (brand colour + alpha, border/text from the
+  theme), so it re-themes per tenant. Additive + backward-compatible.
+
+## 1.2.0
+
+- Add `ThemedTextInput` + `useThemedInput` — the shared "readable + lively" text-input treatment,
+  driven entirely by the active theme (re-themes per tenant, no hard-coded hex). At rest: dark
+  readable text on a subtle off-white surface with a soft border. On hover (web): the border
+  strengthens a touch. On focus: the border becomes the brand primary, the background brightens to
+  the plain surface (white), and a soft 3px brand-tinted focus ring fades in. The animation is a
+  pure GPU-cheap CSS transition on `border-color`/`background-color`/`box-shadow` (the ring is a
+  `box-shadow`, so no layout/reflow) — NO `Animated`/`LayoutAnimation`/JS timers. Web-only style
+  keys and the mouse-hover handlers are guarded behind `Platform.OS === 'web'`, so it stays
+  native-safe (native applies the state-driven colours instantly).
+- `FormField` now renders `ThemedTextInput`, so every field gets the treatment for free; its label
+  uses `textSecondary` at 13px/600 for readability. Props/behaviour (label, hint, error, testID,
+  a11y, `onFocus`/`onBlur` pass-through) are backward-compatible.
+
 ## 1.1.0
 
 - Add `FormCheckbox` — a native-safe (`Pressable`-based, RN-web + native) themed checkbox: a rounded

package/dist/index.d.mts

@@ -1,8 +1,12 @@
 import React from 'react';
-import { TextInputProps, ViewStyle } from 'react-native';
+import { TextInputProps, ViewStyle, TextInput, TextStyle } from 'react-native';
 
 /**
  * Reusable form field — labelled text input with optional required mark + error.
+ *
+ * The input itself is the shared `ThemedTextInput` primitive, so every FormField gets the
+ * readable + lively treatment (dark text, subtle off-white rest background, brand focus
+ * animation with a soft ring) for free, driven by the active theme.
  */
 
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
@@ -13,10 +17,66 @@ interface FormFieldProps extends Omit<TextInputProps, 'style'> {
 }
 declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
+/**
+ * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`
+ * wrapper that applies the `useThemedInput` treatment (dark readable text, subtle off-white rest
+ * background, and the brand focus animation: indigo border + white background + soft 3px ring,
+ * eased over .14s via a GPU-cheap CSS transition on web; instant, native-safe off web).
+ *
+ * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
+ * (search / country / year / date fallbacks) use it directly instead of forking the styles.
+ *
+ * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
+ * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
+ */
+
+interface ThemedTextInputProps extends TextInputProps {
+    /** Render with the error border colour (matches `FormField`'s error treatment). */
+    hasError?: boolean;
+}
+declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
+
+/** The exact focus/blur event types of the installed `react-native` `TextInput` (version-safe). */
+type FocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
+type BlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
+interface UseThemedInputOptions {
+    /** Render with the error border colour (the brand focus border is suppressed while errored). */
+    hasError?: boolean;
+    /** Consumer focus handler — composed with the internal focus-state toggle. */
+    onFocus?: (e: FocusEvent) => void;
+    /** Consumer blur handler — composed with the internal focus-state toggle. */
+    onBlur?: (e: BlurEvent) => void;
+}
+interface ThemedInput {
+    /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
+    style: TextStyle;
+    /** A readable mid-grey placeholder colour from the theme. */
+    placeholderTextColor: string;
+    isFocused: boolean;
+    isHovered: boolean;
+    /** Spread/attach onto the `<TextInput>` to drive the focus treatment. */
+    focusBind: {
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: BlurEvent) => void;
+    };
+    /** Web-only mouse-hover handlers, pre-typed for `<TextInput>` (an empty object on native). */
+    hoverBind: TextInputProps;
+}
+declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
+
 /**
  * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
  */
 
+/** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
+type ChipVariant = 'solid' | 'outline';
 interface ChipOption<T> {
     value: T;
     label: string;
@@ -28,9 +88,11 @@ interface ChipSelectorProps<T> {
     onChange: (value: T) => void;
     multiple?: boolean;
     disabled?: boolean;
+    /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
+    variant?: ChipVariant;
     containerStyle?: ViewStyle;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -73,4 +135,4 @@ interface FormCheckboxProps {
 }
 declare const FormCheckbox: ({ label, value, onValueChange, onChange, hint, description, disabled, containerStyle, testID, accessibilityLabel, accessibilityHint, }: FormCheckboxProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps };
+export { type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
-import { TextInputProps, ViewStyle } from 'react-native';
+import { TextInputProps, ViewStyle, TextInput, TextStyle } from 'react-native';
 
 /**
  * Reusable form field — labelled text input with optional required mark + error.
+ *
+ * The input itself is the shared `ThemedTextInput` primitive, so every FormField gets the
+ * readable + lively treatment (dark text, subtle off-white rest background, brand focus
+ * animation with a soft ring) for free, driven by the active theme.
  */
 
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
@@ -13,10 +17,66 @@ interface FormFieldProps extends Omit<TextInputProps, 'style'> {
 }
 declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
+/**
+ * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`
+ * wrapper that applies the `useThemedInput` treatment (dark readable text, subtle off-white rest
+ * background, and the brand focus animation: indigo border + white background + soft 3px ring,
+ * eased over .14s via a GPU-cheap CSS transition on web; instant, native-safe off web).
+ *
+ * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
+ * (search / country / year / date fallbacks) use it directly instead of forking the styles.
+ *
+ * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
+ * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
+ */
+
+interface ThemedTextInputProps extends TextInputProps {
+    /** Render with the error border colour (matches `FormField`'s error treatment). */
+    hasError?: boolean;
+}
+declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
+
+/** The exact focus/blur event types of the installed `react-native` `TextInput` (version-safe). */
+type FocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
+type BlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
+interface UseThemedInputOptions {
+    /** Render with the error border colour (the brand focus border is suppressed while errored). */
+    hasError?: boolean;
+    /** Consumer focus handler — composed with the internal focus-state toggle. */
+    onFocus?: (e: FocusEvent) => void;
+    /** Consumer blur handler — composed with the internal focus-state toggle. */
+    onBlur?: (e: BlurEvent) => void;
+}
+interface ThemedInput {
+    /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
+    style: TextStyle;
+    /** A readable mid-grey placeholder colour from the theme. */
+    placeholderTextColor: string;
+    isFocused: boolean;
+    isHovered: boolean;
+    /** Spread/attach onto the `<TextInput>` to drive the focus treatment. */
+    focusBind: {
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: BlurEvent) => void;
+    };
+    /** Web-only mouse-hover handlers, pre-typed for `<TextInput>` (an empty object on native). */
+    hoverBind: TextInputProps;
+}
+declare function useThemedInput(options?: UseThemedInputOptions): ThemedInput;
+
 /**
  * Chip/pill selector for selecting one or multiple options.
+ *
+ * Two visual variants (both fully theme-driven):
+ *  - `solid` (default) — the original filled-pill look: selected = solid primary fill with
+ *    white ink. Unchanged, so existing consumers (erevna / katalogos / kefi) render identically.
+ *  - `outline` — the AML v1 console look: an outlined pill on a muted fill; selected = a subtle
+ *    tinted-outline (primary border + primary ink + a low-alpha primary wash), NOT a solid fill.
+ *    Hover (web) lifts the border/ink to the primary colour.
  */
 
+/** Visual variant. `solid` = filled selected pill (default); `outline` = v1 tinted-outline. */
+type ChipVariant = 'solid' | 'outline';
 interface ChipOption<T> {
     value: T;
     label: string;
@@ -28,9 +88,11 @@ interface ChipSelectorProps<T> {
     onChange: (value: T) => void;
     multiple?: boolean;
     disabled?: boolean;
+    /** Visual variant. `solid` (default) = filled selected pill; `outline` = v1 tinted-outline. */
+    variant?: ChipVariant;
     containerStyle?: ViewStyle;
 }
-declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
+declare const ChipSelector: <T extends string | number>({ label, options, value, onChange, multiple, disabled, variant, containerStyle, }: ChipSelectorProps<T>) => React.ReactElement;
 
 /**
  * Reusable form switch/toggle with an optional description.
@@ -73,4 +135,4 @@ interface FormCheckboxProps {
 }
 declare const FormCheckbox: ({ label, value, onValueChange, onChange, hint, description, disabled, containerStyle, testID, accessibilityLabel, accessibilityHint, }: FormCheckboxProps) => React.ReactElement;
 
-export { type ChipOption, ChipSelector, type ChipSelectorProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps };
+export { type ChipOption, ChipSelector, type ChipSelectorProps, type ChipVariant, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormSwitch, type FormSwitchProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, type UseThemedInputOptions, useThemedInput };

package/dist/index.js

@@ -1,29 +1,142 @@
 'use strict';
 
-var React = require('react');
+var React3 = require('react');
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/FormField/FormField.tsx
+var IS_WEB = reactNative.Platform.OS === "web";
+var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
+var TRANSITION_DURATION = "0.14s";
+var TRANSITION_TIMING = "ease";
+var FOCUS_RING_WIDTH = 3;
+var FOCUS_RING_ALPHA = 0.16;
+var HOVER_BORDER_ALPHA = 0.22;
+var HEX_RADIX = 16;
+var HEX_SHORT_LENGTH = 4;
+var HEX_FULL_LENGTH = 7;
+var RED_START = 1;
+var GREEN_START = 3;
+var BLUE_START = 5;
+var CHANNEL_END_OFFSET = 2;
+function withAlpha(color, alpha) {
+  const hex = color.trim();
+  const isHex = hex.charAt(0) === "#" && (hex.length === HEX_FULL_LENGTH || hex.length === HEX_SHORT_LENGTH);
+  if (!isHex) return color;
+  const full = hex.length === HEX_SHORT_LENGTH ? `#${hex.charAt(1)}${hex.charAt(1)}${hex.charAt(2)}${hex.charAt(2)}${hex.charAt(3)}${hex.charAt(3)}` : hex;
+  const r = parseInt(full.slice(RED_START, RED_START + CHANNEL_END_OFFSET), HEX_RADIX);
+  const g = parseInt(full.slice(GREEN_START, GREEN_START + CHANNEL_END_OFFSET), HEX_RADIX);
+  const b = parseInt(full.slice(BLUE_START, BLUE_START + CHANNEL_END_OFFSET), HEX_RADIX);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function useThemedInput(options = {}) {
+  const { hasError = false, onFocus, onBlur } = options;
+  const { theme } = uiFeedback.useUi();
+  const { colors, palette, semantic } = theme;
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const [isHovered, setIsHovered] = React3.useState(false);
+  const handleFocus = React3.useCallback(
+    (e) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    },
+    [onFocus]
+  );
+  const handleBlur = React3.useCallback(
+    (e) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    },
+    [onBlur]
+  );
+  const handleHoverIn = React3.useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = React3.useCallback(() => setIsHovered(false), []);
+  const primary = palette.primary["500"];
+  const errorColor = semantic.error["500"];
+  const style = React3.useMemo(() => {
+    const restBorder = hasError ? errorColor : colors.border;
+    const focusBorder = hasError ? errorColor : primary;
+    const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
+    const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
+    const base = { color: colors.text, borderColor, backgroundColor };
+    if (!IS_WEB) return base;
+    const ring = isFocused && !hasError ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(primary, FOCUS_RING_ALPHA)}` : "none";
+    const webStyle = {
+      transitionProperty: TRANSITION_PROPERTY,
+      transitionDuration: TRANSITION_DURATION,
+      transitionTimingFunction: TRANSITION_TIMING,
+      boxShadow: ring,
+      outlineStyle: "none"
+    };
+    return { ...base, ...webStyle };
+  }, [
+    isFocused,
+    isHovered,
+    hasError,
+    colors.text,
+    colors.border,
+    colors.surface,
+    colors.surfaceElevated,
+    primary,
+    errorColor
+  ]);
+  const focusBind = React3.useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
+  const hoverBind = React3.useMemo(
+    () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
+    [handleHoverIn, handleHoverOut]
+  );
+  return {
+    style,
+    placeholderTextColor: colors.textSecondary,
+    isFocused,
+    isHovered,
+    focusBind,
+    hoverBind
+  };
+}
+var ThemedTextInput = React3__default.default.forwardRef(function ThemedTextInput2({ hasError = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+  const {
+    style: themedStyle,
+    placeholderTextColor: themedPlaceholder,
+    focusBind,
+    hoverBind
+  } = useThemedInput({ hasError, onFocus, onBlur });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.TextInput,
+    {
+      ref,
+      placeholderTextColor: placeholderTextColor ?? themedPlaceholder,
+      ...rest,
+      ...hoverBind,
+      onFocus: focusBind.onFocus,
+      onBlur: focusBind.onBlur,
+      style: [style, themedStyle]
+    }
+  );
+});
 var CONTAINER_MARGIN_BOTTOM = 16;
-var INPUT_PADDING = 12;
+var INPUT_PADDING_V = 10;
+var INPUT_PADDING_H = 12;
 var INPUT_BORDER_RADIUS = 8;
 var ERROR_FONT_SIZE = 12;
+var LABEL_FONT_SIZE = 13;
 var styles = reactNative.StyleSheet.create({
   container: {
     marginBottom: CONTAINER_MARGIN_BOTTOM
   },
   label: {
     marginBottom: 4,
+    fontSize: LABEL_FONT_SIZE,
     fontWeight: "600"
   },
   input: {
-    padding: INPUT_PADDING,
+    paddingVertical: INPUT_PADDING_V,
+    paddingHorizontal: INPUT_PADDING_H,
     borderRadius: INPUT_BORDER_RADIUS,
     borderWidth: 1
   },
@@ -43,22 +156,14 @@ var FormField = ({
   const { colors, semantic } = theme;
   const errorColor = semantic.error["500"];
   const hasError = typeof error === "string" && error !== "";
-  const themeStyles = React__default.default.useMemo(() => {
-    const labelStyle = { color: colors.text };
-    const requiredMarkStyle = { color: errorColor };
-    const inputStyle = {
-      backgroundColor: colors.surface,
-      color: colors.text,
-      borderColor: hasError ? errorColor : colors.border
-    };
-    const errorTextStyle = { color: errorColor };
-    return {
-      label: labelStyle,
-      requiredMark: requiredMarkStyle,
-      input: inputStyle,
-      errorText: errorTextStyle
-    };
-  }, [colors.border, colors.surface, colors.text, errorColor, hasError]);
+  const themeStyles = React3__default.default.useMemo(
+    () => ({
+      label: { color: colors.textSecondary },
+      requiredMark: { color: errorColor },
+      errorText: { color: errorColor }
+    }),
+    [colors.textSecondary, errorColor]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, containerStyle], children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: [styles.label, themeStyles.label], children: [
       label,
@@ -66,12 +171,12 @@ var FormField = ({
       required ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: themeStyles.requiredMark, children: "*" }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.TextInput,
+      ThemedTextInput,
       {
         accessibilityHint: `Enter ${label}`,
         accessibilityLabel: label,
-        placeholderTextColor: colors.textSecondary,
-        style: [styles.input, themeStyles.input],
+        hasError,
+        style: styles.input,
         testID: "form-field-input",
         ...textInputProps
       }
@@ -81,6 +186,28 @@ var FormField = ({
 };
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
+var SOLID_RADIUS = 20;
+var OUTLINE_RADIUS = 999;
+var OUTLINE_PAD_H = 12;
+var OUTLINE_PAD_V = 5;
+var OUTLINE_FONT_SIZE = 13;
+var OUTLINE_TINT_ALPHA = 0.1;
+var HEX_SHORT_LENGTH2 = 3;
+var HEX_RADIX2 = 16;
+var RGB_R_START = 0;
+var RGB_R_END = 2;
+var RGB_G_END = 4;
+var RGB_B_END = 6;
+function withAlpha2(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const isShort = normalized.length === HEX_SHORT_LENGTH2;
+  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
+  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
+  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
+  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
+  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
+  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
+}
 var styles2 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 8,
@@ -97,12 +224,72 @@ var styles2 = reactNative.StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 20,
+    borderRadius: SOLID_RADIUS,
     backgroundColor: TRANSPARENT_COLOR,
     borderWidth: 1
   },
-  chipText: {}
+  chipOutline: {
+    paddingHorizontal: OUTLINE_PAD_H,
+    paddingVertical: OUTLINE_PAD_V,
+    borderRadius: OUTLINE_RADIUS,
+    borderWidth: 1
+  },
+  chipText: {},
+  chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
+function OutlineChip({
+  option,
+  selected,
+  disabled,
+  colors,
+  onPress
+}) {
+  const [hovered, setHovered] = React3__default.default.useState(false);
+  const active = selected || hovered;
+  const borderColor = active ? colors.primary : colors.border;
+  const backgroundColor = selected ? colors.tint : colors.muted;
+  const textColor = active ? colors.primary : colors.textMuted;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint: `Selects ${option.label}`,
+      accessibilityLabel: option.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected },
+      disabled,
+      style: styles2.chipWrapper,
+      testID: `chip-selector-chip-${String(option.value)}`,
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      onPress,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, styles2.chipTextOutline, { color: textColor }], children: option.label }) })
+    }
+  );
+}
+function SolidChip({
+  option,
+  selected,
+  disabled,
+  colors,
+  onPress
+}) {
+  const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
+  const textColor = selected ? WHITE_COLOR : colors.textStrong;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.TouchableOpacity,
+    {
+      accessibilityHint: `Selects ${option.label}`,
+      accessibilityLabel: option.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected },
+      disabled,
+      style: styles2.chipWrapper,
+      testID: `chip-selector-chip-${String(option.value)}`,
+      onPress,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, { color: textColor }], children: option.label }) })
+    }
+  );
+}
 var ChipSelector = ({
   label,
   options,
@@ -110,57 +297,52 @@ var ChipSelector = ({
   onChange,
   multiple = false,
   disabled = false,
+  variant = "solid",
   containerStyle
 }) => {
   const { theme } = uiFeedback.useUi();
   const { colors, palette } = theme;
-  const primaryColor = palette.primary["500"];
   const hasLabel = typeof label === "string" && label !== "";
-  const themeStyles = React__default.default.useMemo(() => {
-    const labelStyle = { color: colors.text };
-    const chipStyle = { borderColor: colors.border };
-    const chipSelectedStyle = { backgroundColor: primaryColor };
-    const chipTextStyle = { color: colors.text };
-    const chipTextSelectedStyle = { color: WHITE_COLOR };
+  const chipColors = React3__default.default.useMemo(() => {
+    const primary = palette.primary["500"];
     return {
-      label: labelStyle,
-      chip: chipStyle,
-      chipSelected: chipSelectedStyle,
-      chipText: chipTextStyle,
-      chipTextSelected: chipTextSelectedStyle
+      border: colors.border,
+      textStrong: colors.text,
+      textMuted: colors.textSecondary,
+      primary,
+      muted: colors.background,
+      tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
     };
-  }, [colors.border, colors.text, primaryColor]);
+  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette.primary]);
+  const labelStyle = React3__default.default.useMemo(() => ({ color: colors.text }), [colors.text]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [
-    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, themeStyles.label], children: label }) : null,
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, labelStyle], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.chipContainer, children: options.map((option) => {
       const selected = isSelected(option.value);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TouchableOpacity,
+      const onPress = () => onChange(option.value);
+      return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(
+        OutlineChip,
+        {
+          colors: chipColors,
+          disabled,
+          option,
+          selected,
+          onPress
+        },
+        String(option.value)
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        SolidChip,
         {
-          accessibilityHint: `Selects ${option.label}`,
-          accessibilityLabel: option.label,
-          accessibilityRole: "button",
-          accessibilityState: { selected },
+          colors: chipColors,
           disabled,
-          style: styles2.chipWrapper,
-          testID: `chip-selector-chip-${String(option.value)}`,
-          onPress: () => onChange(option.value),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.View,
-            {
-              style: [
-                styles2.chip,
-                themeStyles.chip,
-                selected ? themeStyles.chipSelected : null
-              ],
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.chipText, themeStyles.chipText, selected ? themeStyles.chipTextSelected : null], children: option.label })
-            }
-          )
+          option,
+          selected,
+          onPress
         },
         String(option.value)
       );
@@ -199,7 +381,7 @@ var FormSwitch = ({
   const { theme } = uiFeedback.useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React3__default.default.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -289,7 +471,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React__default.default.useMemo(() => {
+  const themeStyles = React3__default.default.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };
@@ -329,5 +511,7 @@ exports.ChipSelector = ChipSelector;
 exports.FormCheckbox = FormCheckbox;
 exports.FormField = FormField;
 exports.FormSwitch = FormSwitch;
+exports.ThemedTextInput = ThemedTextInput;
+exports.useThemedInput = useThemedInput;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map