@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Slider/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Slider } from "./Slider.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,Slider}from"./Slider.js";

package/lib/module/components/Slider/valueText.js

@@ -1,258 +1 @@
-"use strict";
-
-import { memo, useEffect, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
-
-/**
- * Shared between AmountSlider and SliderField: the number that counts to its
- * new value, and the edit-in-a-box logic that keeps a half-typed entry from
- * being snapped or overwritten.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const clampValue = (value, min, max) => Math.min(Math.max(value, min), max);
-export const snapValue = (value, min, max, step) => {
-  if (step <= 0) {
-    return clampValue(value, min, max);
-  }
-  const decimals = String(step).split('.')[1]?.length ?? 0;
-  const stepped = Math.round((value - min) / step) * step + min;
-  return clampValue(decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped, min, max);
-};
-
-/** Digits, one decimal point and a leading minus out of whatever was typed. */
-export const parseTyped = text => {
-  const cleaned = text.replace(/[^\d.-]/g, '');
-  if (cleaned === '' || cleaned === '.' || cleaned === '-') {
-    return null;
-  }
-  const n = Number.parseFloat(cleaned);
-  return Number.isFinite(n) ? n : null;
-};
-const easeOutCubic = t => 1 - (1 - t) ** 3;
-const roundTo = (value, decimals) => {
-  const factor = 10 ** decimals;
-  return Math.round(value * factor) / factor;
-};
-
-/**
- * A number that counts from its last shown value to the new one. It lives in
- * its own component so each frame re-renders one Text, not its parent.
- */
-export const CountingText = /*#__PURE__*/memo(({
-  value,
-  format,
-  decimals = 2,
-  duration,
-  jumpKey = '',
-  style,
-  testID
-}) => {
-  const [shown, setShown] = useState(value);
-  const shownRef = useRef(value);
-  const jumpRef = useRef(jumpKey);
-  useEffect(() => {
-    const jumped = jumpRef.current !== jumpKey;
-    jumpRef.current = jumpKey;
-    const from = shownRef.current;
-    if (jumped || duration <= 0 || from === value) {
-      shownRef.current = value;
-      setShown(value);
-      return;
-    }
-    const start = Date.now();
-    let frame = 0;
-    const tick = () => {
-      const t = Math.min(1, (Date.now() - start) / duration);
-      const next = from + (value - from) * easeOutCubic(t);
-      shownRef.current = next;
-      setShown(next);
-      if (t < 1) {
-        frame = requestAnimationFrame(tick);
-      }
-    };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
-  }, [value, jumpKey, duration]);
-  return /*#__PURE__*/_jsx(Text, {
-    style: style,
-    testID: testID,
-    children: format(roundTo(shown, decimals))
-  });
-});
-CountingText.displayName = 'CountingText';
-/**
- * Edit-in-a-box for a slider value. While the box has focus it shows what was
- * typed, so a drag does not overwrite a half-typed entry. Each keystroke moves
- * the value live, clamped only: snapping every keystroke would turn a
- * half-typed 5,25,000 into 5,50,000 before the user finished. Blur snaps to
- * the step, and an emptied box resolves to `min`.
- */
-export const useValueDraft = ({
-  value,
-  min,
-  max,
-  step,
-  format,
-  parse = parseTyped,
-  onChange
-}) => {
-  const [draft, setDraft] = useState(null);
-  return {
-    text: draft ?? format(value),
-    editing: draft !== null,
-    onFocus: () => setDraft(format(value)),
-    onChangeText: text => {
-      setDraft(text);
-      const typed = parse(text);
-      if (typed !== null) {
-        onChange(clampValue(typed, min, max));
-      }
-    },
-    onBlur: () => {
-      if (draft === null) {
-        return;
-      }
-      const typed = parse(draft);
-      setDraft(null);
-      const next = snapValue(typed ?? min, min, max, step);
-      if (next !== value) {
-        onChange(next);
-      }
-    }
-  };
-};
-const ROLL_TRAVEL_RATIO = 1.2;
-
-/** One character (or word) that rolls to its next value. */
-const RollingSlot = /*#__PURE__*/memo(({
-  text,
-  direction,
-  duration,
-  style,
-  testID
-}) => {
-  const [leaving, setLeaving] = useState(null);
-  const shownRef = useRef(text);
-  const progress = useRef(new Animated.Value(1)).current;
-  const fontSize = StyleSheet.flatten(style)?.fontSize ?? 14;
-  const travel = fontSize * ROLL_TRAVEL_RATIO;
-  useEffect(() => {
-    if (shownRef.current === text) {
-      return;
-    }
-    const from = shownRef.current;
-    shownRef.current = text;
-    if (duration <= 0) {
-      setLeaving(null);
-      return;
-    }
-    setLeaving(from);
-    progress.setValue(0);
-    const anim = Animated.timing(progress, {
-      toValue: 1,
-      duration,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true
-    });
-    anim.start(({
-      finished
-    }) => {
-      if (finished) {
-        setLeaving(null);
-      }
-    });
-    return () => anim.stop();
-  }, [text, duration, progress]);
-  const sign = direction === 'up' ? -1 : 1;
-  const entering = leaving === null ? null : {
-    opacity: progress,
-    transform: [{
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [-sign * travel, 0]
-      })
-    }]
-  };
-  const exiting = {
-    opacity: progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [1, 0]
-    }),
-    transform: [{
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, sign * travel]
-      })
-    }]
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: rollStyles.slot,
-    children: [/*#__PURE__*/_jsx(Animated.Text, {
-      style: [style, entering],
-      testID: testID,
-      children: text
-    }), leaving !== null ? /*#__PURE__*/_jsx(Animated.Text, {
-      style: [style, rollStyles.leaving, exiting],
-      testID: testID ? `${testID}-leaving` : undefined,
-      children: leaving
-    }) : null]
-  });
-});
-RollingSlot.displayName = 'RollingSlot';
-
-/**
- * Text whose characters roll vertically to their new values, the way a
- * counter's digits do. The slot count is the longer of the current and the
- * previous text, so a digit that disappears rolls out instead of vanishing.
- */
-export const RollingText = /*#__PURE__*/memo(({
-  text,
-  direction = 'up',
-  duration,
-  perCharacter = true,
-  style,
-  testID
-}) => {
-  const prevRef = useRef(text);
-  const slotCount = perCharacter ? Math.max(text.length, prevRef.current.length) : 1;
-  useEffect(() => {
-    prevRef.current = text;
-  }, [text]);
-  return /*#__PURE__*/_jsx(View, {
-    style: rollStyles.row,
-    testID: testID,
-    children: perCharacter ? Array.from({
-      length: slotCount
-    }, (_, i) => /*#__PURE__*/_jsx(RollingSlot
-    // The slot is the position; its character changes in place.
-    , {
-      text: text[i] ?? '',
-      direction: direction,
-      duration: duration,
-      style: style,
-      testID: testID ? `${testID}-char` : undefined
-    }, i)) : /*#__PURE__*/_jsx(RollingSlot, {
-      text: text,
-      direction: direction,
-      duration: duration,
-      style: style,
-      testID: testID ? `${testID}-char` : undefined
-    })
-  });
-});
-RollingText.displayName = 'RollingText';
-const rollStyles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'baseline'
-  },
-  slot: {
-    overflow: 'hidden'
-  },
-  leaving: {
-    position: 'absolute',
-    left: 0,
-    top: 0
-  }
-});
-//# sourceMappingURL=valueText.js.map
+"use strict";import{memo,useEffect,useRef,useState}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const sliderToneInk=(t,e)=>{switch(e){case"success":return t.colors.onSuccess;case"warning":return t.colors.onWarning;case"error":return t.colors.onError;default:return t.colors.onPrimary}};export const clampValue=(t,e,n)=>Math.min(Math.max(t,e),n);export const snapValue=(t,e,n,r)=>{if(r<=0)return clampValue(t,e,n);const o=String(r).split(".")[1]?.length??0,s=Math.round((t-e)/r)*r+e;return clampValue(o>0?Number(s.toFixed(o)):s,e,n)};export const parseTyped=t=>{const e=t.replace(/[^\d.-]/g,"");if(""===e||"."===e||"-"===e)return null;const n=Number.parseFloat(e);return Number.isFinite(n)?n:null};const easeOutCubic=t=>1-(1-t)**3,roundTo=(t,e)=>{const n=10**e;return Math.round(t*n)/n};export const CountingText=memo(({value:t,format:e,decimals:n=2,duration:r,jumpKey:o="",style:s,testID:l})=>{const[a,u]=useState(t),i=useRef(t),c=useRef(o);return useEffect(()=>{const e=c.current!==o;c.current=o;const n=i.current;if(e||r<=0||n===t)return i.current=t,void u(t);const s=Date.now();let l=0;const tick=()=>{const e=Math.min(1,(Date.now()-s)/r),o=n+(t-n)*easeOutCubic(e);i.current=o,u(o),e<1&&(l=requestAnimationFrame(tick))};return l=requestAnimationFrame(tick),()=>cancelAnimationFrame(l)},[t,o,r]),_jsx(Text,{style:s,testID:l,children:e(roundTo(a,n))})});CountingText.displayName="CountingText";export const useValueDraft=({value:t,min:e,max:n,step:r,format:o,parse:s=parseTyped,onChange:l})=>{const[a,u]=useState(null);return{text:a??o(t),editing:null!==a,onFocus:()=>u(o(t)),onChangeText:t=>{u(t);const r=s(t);null!==r&&l(clampValue(r,e,n))},onBlur:()=>{if(null===a)return;const o=s(a);u(null);const i=snapValue(o??e,e,n,r);i!==t&&l(i)}}};const ROLL_TRAVEL_RATIO=1.2,RollingSlot=memo(({text:t,direction:e,duration:n,style:r,testID:o})=>{const[s,l]=useState(null),a=useRef(t),u=useRef(new Animated.Value(1)).current,i=1.2*(StyleSheet.flatten(r)?.fontSize??14);useEffect(()=>{if(a.current===t)return;const e=a.current;if(a.current=t,n<=0)return void l(null);l(e),u.setValue(0);const r=Animated.timing(u,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return r.start(({finished:t})=>{t&&l(null)}),()=>r.stop()},[t,n,u]);const c="up"===e?-1:1,m=null===s?null:{opacity:u,transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[-c*i,0]})}]},p={opacity:u.interpolate({inputRange:[0,1],outputRange:[1,0]}),transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[0,c*i]})}]};return _jsxs(View,{style:rollStyles.slot,children:[_jsx(Animated.Text,{style:[r,m],testID:o,children:t}),null!==s?_jsx(Animated.Text,{style:[r,rollStyles.leaving,p],testID:o?`${o}-leaving`:void 0,children:s}):null]})});RollingSlot.displayName="RollingSlot";export const RollingText=memo(({text:t,direction:e="up",duration:n,perCharacter:r=!0,style:o,testID:s})=>{const l=useRef(t),a=r?Math.max(t.length,l.current.length):1;return useEffect(()=>{l.current=t},[t]),_jsx(View,{style:rollStyles.row,testID:s,children:r?Array.from({length:a},(r,l)=>_jsx(RollingSlot,{text:t[l]??"",direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0},l)):_jsx(RollingSlot,{text:t,direction:e,duration:n,style:o,testID:s?`${s}-char`:void 0})})});RollingText.displayName="RollingText";const rollStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"baseline"},slot:{overflow:"hidden"},leaving:{position:"absolute",left:0,top:0}});

package/lib/module/components/SliderField/SliderField.js

@@ -1,357 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useMemo, useRef } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { useTheme } from "../../theme/index.js";
-import { AppIcon, renderSlotIcon } from "../AppIcon/index.js";
-import { FieldBase, FieldLabel, FieldMessage, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
-import { IconButton } from "../IconButton/index.js";
-import { Slider } from "../Slider/index.js";
-import { CountingText, clampValue, snapValue, useValueDraft } from "../Slider/valueText.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_INPUT_WIDTH = 72;
-const defaultFormatValue = value => String(value);
-const stepDecimals = step => String(step).split('.')[1]?.length ?? 0;
-
-/** The editable box: a `sm` field shell around one centred TextInput. */
-const ValueBox = ({
-  draft,
-  error,
-  disabled,
-  width,
-  accessibilityLabel,
-  style,
-  testID
-}) => {
-  const theme = useTheme();
-  const sizeTokens = resolveFieldSize(theme, 'sm');
-  const fieldText = resolveFieldTextStyle(theme, {
-    disabled
-  });
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = useRef(null);
-  const focusInput = useCallback(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  return /*#__PURE__*/_jsx(FieldBase, {
-    size: "sm",
-    focused: draft.editing,
-    disabled: disabled,
-    error: error,
-    filled: true,
-    width: width,
-    onPress: focusInput,
-    pressFeedback: false,
-    paddingHorizontal: theme.spacing.sm,
-    gap: theme.spacing.xs,
-    trailing: error ? /*#__PURE__*/_jsx(AppIcon, {
-      name: "info-circle",
-      size: sizeTokens.iconSize,
-      color: theme.colors.error
-    }) : undefined,
-    style: style,
-    children: /*#__PURE__*/_jsx(TextInput, {
-      ref: inputRef,
-      style: [styles.boxInput, {
-        color: fieldText.color,
-        fontSize: sizeTokens.fontSize,
-        ...fieldText.weightStyle
-      }],
-      value: draft.text,
-      onChangeText: draft.onChangeText,
-      onFocus: draft.onFocus,
-      onBlur: draft.onBlur,
-      onSubmitEditing: draft.onBlur,
-      editable: !disabled,
-      keyboardType: "decimal-pad",
-      returnKeyType: "done",
-      textAlign: "center",
-      selectionColor: theme.colors.primary,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityState: {
-        disabled
-      },
-      testID: testID
-    })
-  });
-};
-const SliderField = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    label,
-    unit,
-    info,
-    required = false,
-    helperText,
-    error,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    tone = 'primary',
-    size,
-    variant,
-    haptic,
-    showBubble = true,
-    showBounds = true,
-    showInput = false,
-    showStepper = false,
-    startIcon,
-    endIcon,
-    startLabel,
-    endLabel,
-    formatValue = defaultFormatValue,
-    parseInput,
-    animationDuration,
-    inputWidth = DEFAULT_INPUT_WIDTH,
-    accessibilityLabel,
-    style,
-    labelStyle,
-    boundStyle,
-    sliderStyle,
-    inputStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const themedStyles = useMemo(() => buildStyles(theme), [theme]);
-  const duration = animationDuration ?? theme.motion.duration.fast;
-  const isRange = props.range === true;
-  const hasError = Boolean(error);
-  const decimals = stepDecimals(step);
-  const [value, setValue] = useControllableState({
-    value: props.value,
-    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
-    onChange: props.onChange
-  });
-  const [rawLow, rawHigh] = isRange ? value : [value, max];
-  const low = clampValue(Math.min(rawLow, rawHigh), min, max);
-  const high = clampValue(Math.max(rawLow, rawHigh), min, max);
-
-  // One box per thumb. In single mode only the low one is shown; the high
-  // draft is still created so the hook count never changes with `range`.
-  const lowBox = useValueDraft({
-    value: low,
-    min,
-    max,
-    step,
-    format: formatValue,
-    parse: parseInput,
-    onChange: next => setValue(isRange ? [Math.min(next, high), high] : next)
-  });
-  const highBox = useValueDraft({
-    value: high,
-    min,
-    max,
-    step,
-    format: formatValue,
-    parse: parseInput,
-    onChange: next => setValue([low, Math.max(next, low)])
-  });
-  const stepBy = direction => {
-    const next = snapValue(low + direction * step, min, max, step);
-    if (next !== low) {
-      setValue(next);
-    }
-  };
-  const slotState = {
-    color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary,
-    size: theme.components.field?.md?.iconSize ?? 18,
-    disabled
-  };
-  const bubbleTextStyle = [themedStyles.bubbleText, {
-    color: theme.colors.text.inverse,
-    fontWeight: theme.typography.fontWeight.semibold
-  }];
-  const renderBubble = thumbValue => /*#__PURE__*/_jsx(CountingText, {
-    value: thumbValue,
-    format: formatValue,
-    decimals: decimals,
-    duration: duration,
-    style: bubbleTextStyle,
-    testID: testID && !isRange ? `${testID}-bubble` : undefined
-  });
-  const boundText = text => /*#__PURE__*/_jsx(Text, {
-    style: [themedStyles.bound, {
-      color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
-    }, boundStyle],
-    children: text
-  });
-  const sliderProps = {
-    min,
-    max,
-    step,
-    disabled,
-    tone,
-    size,
-    variant,
-    haptic,
-    showLabel: showBubble ? 'always' : false,
-    renderLabel: showBubble ? renderBubble : undefined,
-    accessibilityLabel: accessibilityLabel ?? label,
-    style: sliderStyle,
-    testID: testID ? `${testID}-slider` : undefined
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [themedStyles.container, style],
-    testID: testID,
-    children: [label ? /*#__PURE__*/_jsxs(View, {
-      style: themedStyles.labelRow,
-      children: [/*#__PURE__*/_jsx(FieldLabel, {
-        required: required,
-        style: labelStyle,
-        children: label
-      }), unit ? /*#__PURE__*/_jsx(Text, {
-        style: [themedStyles.unit, {
-          color: theme.colors.text.tertiary
-        }],
-        children: unit
-      }) : null, info ? /*#__PURE__*/_jsx(Tooltip, {
-        content: info,
-        trigger: "press",
-        placement: "top",
-        children: /*#__PURE__*/_jsx(Pressable, {
-          accessibilityRole: "button",
-          accessibilityLabel: `About ${label}`,
-          hitSlop: 8,
-          style: themedStyles.infoButton,
-          children: /*#__PURE__*/_jsx(AppIcon, {
-            name: "info-circle",
-            variant: "bold",
-            size: 16,
-            color: theme.colors.text.tertiary
-          })
-        })
-      }) : null]
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: [themedStyles.row, showBubble ? themedStyles.rowWithBubble : null],
-      children: [startIcon ? /*#__PURE__*/_jsx(View, {
-        children: renderSlotIcon(startIcon, slotState)
-      }) : null, showStepper && !isRange ? /*#__PURE__*/_jsx(IconButton, {
-        icon: p => /*#__PURE__*/_jsx(AppIcon, {
-          name: "minus",
-          size: p.size,
-          color: p.color
-        }),
-        onPress: () => stepBy(-1),
-        accessibilityLabel: "Decrease",
-        variant: "ghost",
-        tone: "neutral",
-        size: "sm",
-        disabled: disabled || low <= min,
-        haptic: haptic,
-        testID: testID ? `${testID}-minus` : undefined
-      }) : null, isRange && showInput ? /*#__PURE__*/_jsx(ValueBox, {
-        draft: lowBox,
-        error: hasError,
-        disabled: disabled,
-        width: inputWidth,
-        accessibilityLabel: `${label ?? 'Value'} low`,
-        style: inputStyle,
-        testID: testID ? `${testID}-input-low` : undefined
-      }) : showBounds ? boundText(startLabel ?? formatValue(min)) : null, /*#__PURE__*/_jsx(View, {
-        style: themedStyles.sliderWrap,
-        children: isRange ? /*#__PURE__*/_jsx(Slider, {
-          ...sliderProps,
-          range: true,
-          value: [low, high],
-          onChange: setValue
-        }) : /*#__PURE__*/_jsx(Slider, {
-          ...sliderProps,
-          value: low,
-          onChange: setValue
-        })
-      }), isRange && showInput ? /*#__PURE__*/_jsx(ValueBox, {
-        draft: highBox,
-        error: hasError,
-        disabled: disabled,
-        width: inputWidth,
-        accessibilityLabel: `${label ?? 'Value'} high`,
-        style: inputStyle,
-        testID: testID ? `${testID}-input-high` : undefined
-      }) : showBounds ? boundText(endLabel ?? formatValue(max)) : null, showStepper && !isRange ? /*#__PURE__*/_jsx(IconButton, {
-        icon: p => /*#__PURE__*/_jsx(AppIcon, {
-          name: "add",
-          size: p.size,
-          color: p.color
-        }),
-        onPress: () => stepBy(1),
-        accessibilityLabel: "Increase",
-        variant: "ghost",
-        tone: "neutral",
-        size: "sm",
-        disabled: disabled || low >= max,
-        haptic: haptic,
-        testID: testID ? `${testID}-plus` : undefined
-      }) : null, endIcon ? /*#__PURE__*/_jsx(View, {
-        children: renderSlotIcon(endIcon, slotState)
-      }) : null, !isRange && showInput ? /*#__PURE__*/_jsx(ValueBox, {
-        draft: lowBox,
-        error: hasError,
-        disabled: disabled,
-        width: inputWidth,
-        accessibilityLabel: `${label ?? 'Value'} value`,
-        style: inputStyle,
-        testID: testID ? `${testID}-input` : undefined
-      }) : null]
-    }), /*#__PURE__*/_jsx(FieldMessage, {
-      text: hasError ? error : helperText,
-      error: hasError
-    })]
-  });
-});
-SliderField.displayName = 'SliderField';
-const styles = StyleSheet.create({
-  boxInput: {
-    flex: 1,
-    padding: 0,
-    margin: 0,
-    includeFontPadding: false
-  }
-});
-const buildStyles = theme => StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  labelRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing.xs
-  },
-  unit: {
-    fontSize: theme.typography.fontSize.xs
-  },
-  infoButton: {
-    marginLeft: theme.spacing.xxs
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing.sm
-  },
-  // Room for the bubble, which rises past the slider's own top padding.
-  rowWithBubble: {
-    marginTop: theme.spacing.lg
-  },
-  // The thumb overhangs the track's ends by its radius; this keeps it off
-  // the bound text and the boxes beside it.
-  sliderWrap: {
-    flex: 1,
-    paddingHorizontal: 10
-  },
-  bound: {
-    fontSize: theme.typography.fontSize.sm,
-    fontVariant: ['tabular-nums']
-  },
-  bubbleText: {
-    fontSize: theme.typography.fontSize.xs,
-    fontVariant: ['tabular-nums']
-  }
-});
-export { SliderField };
-export default SliderField;
-//# sourceMappingURL=SliderField.js.map
+"use strict";import{forwardRef,useCallback,useMemo,useRef}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{AppIcon,renderSlotIcon}from"../AppIcon/index.js";import{FieldBase,FieldLabel,FieldMessage,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{IconButton}from"../IconButton/index.js";import{Slider}from"../Slider/index.js";import{CountingText,clampValue,sliderToneInk,snapValue,useValueDraft}from"../Slider/valueText.js";import{Tooltip}from"../Tooltip/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_INPUT_WIDTH=72,defaultFormatValue=e=>String(e),stepDecimals=e=>String(e).split(".")[1]?.length??0,ValueBox=({draft:e,error:t,disabled:l,width:i,accessibilityLabel:s,style:o,testID:a})=>{const n=useTheme(),r=resolveFieldSize(n,"sm"),d=resolveFieldTextStyle(n,{disabled:l}),c=useRef(null),u=useCallback(()=>{l||c.current?.focus()},[l]);return _jsx(FieldBase,{size:"sm",focused:e.editing,disabled:l,error:t,filled:!0,width:i,onPress:u,pressFeedback:!1,paddingHorizontal:n.spacing.sm,gap:n.spacing.xs,trailing:t?_jsx(AppIcon,{name:"info-circle",size:r.iconSize,color:n.colors.error}):void 0,style:o,children:_jsx(TextInput,{ref:c,style:[styles.boxInput,{color:d.color,fontSize:r.fontSize,...d.weightStyle}],value:e.text,onChangeText:e.onChangeText,onFocus:e.onFocus,onBlur:e.onBlur,onSubmitEditing:e.onBlur,editable:!l,keyboardType:"decimal-pad",returnKeyType:"done",textAlign:"center",selectionColor:n.colors.primary,accessibilityLabel:s,accessibilityState:{disabled:l},testID:a})})},SliderField=forwardRef((e,t)=>{const{label:l,unit:i,info:s,required:o=!1,helperText:a,error:n,min:r=0,max:d=100,step:c=1,disabled:u=!1,tone:p="primary",size:b,variant:m,haptic:x,showBubble:h=!0,showBounds:y=!0,showInput:f=!1,showStepper:g=!1,startIcon:S,endIcon:I,startLabel:j,endLabel:w,formatValue:T=defaultFormatValue,parseInput:_,animationDuration:v,inputWidth:V=DEFAULT_INPUT_WIDTH,accessibilityLabel:z,style:F,labelStyle:D,boundStyle:B,sliderStyle:L,inputStyle:C,testID:$}=e,A=useTheme(),W=useMemo(()=>buildStyles(A),[A]),M=v??A.motion.duration.fast,P=!0===e.range,k=Boolean(n),R=stepDecimals(c),[H,U]=useControllableState({value:e.value,defaultValue:e.defaultValue??(P?[r,d]:r),onChange:e.onChange}),[E,N]=P?H:[H,d],q=clampValue(Math.min(E,N),r,d),K=clampValue(Math.max(E,N),r,d),G=useValueDraft({value:q,min:r,max:d,step:c,format:T,parse:_,onChange:e=>U(P?[Math.min(e,K),K]:e)}),J=useValueDraft({value:K,min:r,max:d,step:c,format:T,parse:_,onChange:e=>U([q,Math.max(e,q)])}),stepBy=e=>{const t=snapValue(q+e*c,r,d,c);t!==q&&U(t)},O={color:u?A.colors.text.disabled:A.colors.text.secondary,size:A.components.field?.md?.iconSize??18,disabled:u},Q=[W.bubbleText,{color:sliderToneInk(A,p),fontWeight:A.typography.fontWeight.semibold}],boundText=e=>_jsx(Text,{style:[W.bound,{color:u?A.colors.text.disabled:A.colors.text.secondary},B],children:e}),X={min:r,max:d,step:c,disabled:u,tone:p,size:b,variant:m,haptic:x,showLabel:!!h&&"always",renderLabel:h?e=>_jsx(CountingText,{value:e,format:T,decimals:R,duration:M,style:Q,testID:$&&!P?`${$}-bubble`:void 0}):void 0,accessibilityLabel:z??l,style:L,testID:$?`${$}-slider`:void 0};return _jsxs(View,{ref:t,style:[W.container,F],testID:$,children:[l?_jsxs(View,{style:W.labelRow,children:[_jsx(FieldLabel,{required:o,style:D,children:l}),i?_jsx(Text,{style:[W.unit,{color:A.colors.text.tertiary}],children:i}):null,s?_jsx(Tooltip,{content:s,trigger:"press",placement:"top",children:_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:`About ${l}`,hitSlop:8,style:W.infoButton,children:_jsx(AppIcon,{name:"info-circle",variant:"bold",size:16,color:A.colors.text.tertiary})})}):null]}):null,_jsxs(View,{style:[W.row,h?W.rowWithBubble:null],children:[S?_jsx(View,{children:renderSlotIcon(S,O)}):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"minus",size:e.size,color:e.color}),onPress:()=>stepBy(-1),accessibilityLabel:"Decrease",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q<=r,haptic:x,testID:$?`${$}-minus`:void 0}):null,P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} low`,style:C,testID:$?`${$}-input-low`:void 0}):y?boundText(j??T(r)):null,_jsx(View,{style:W.sliderWrap,children:_jsx(Slider,P?{...X,range:!0,value:[q,K],onChange:U}:{...X,value:q,onChange:U})}),P&&f?_jsx(ValueBox,{draft:J,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} high`,style:C,testID:$?`${$}-input-high`:void 0}):y?boundText(w??T(d)):null,g&&!P?_jsx(IconButton,{icon:e=>_jsx(AppIcon,{name:"add",size:e.size,color:e.color}),onPress:()=>stepBy(1),accessibilityLabel:"Increase",variant:"ghost",tone:"neutral",size:"sm",disabled:u||q>=d,haptic:x,testID:$?`${$}-plus`:void 0}):null,I?_jsx(View,{children:renderSlotIcon(I,O)}):null,!P&&f?_jsx(ValueBox,{draft:G,error:k,disabled:u,width:V,accessibilityLabel:`${l??"Value"} value`,style:C,testID:$?`${$}-input`:void 0}):null]}),_jsx(FieldMessage,{text:k?n:a,error:k})]})});SliderField.displayName="SliderField";const styles=StyleSheet.create({boxInput:{flex:1,padding:0,margin:0,includeFontPadding:!1}}),buildStyles=e=>StyleSheet.create({container:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xs},unit:{fontSize:e.typography.fontSize.xs},infoButton:{marginLeft:e.spacing.xxs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm},rowWithBubble:{marginTop:e.spacing.lg},sliderWrap:{flex:1,paddingHorizontal:10},bound:{fontSize:e.typography.fontSize.sm,fontVariant:["tabular-nums"]},bubbleText:{fontSize:e.typography.fontSize.xs,fontVariant:["tabular-nums"]}});export{SliderField};export default SliderField;

package/lib/module/components/SliderField/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, SliderField } from "./SliderField.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,SliderField}from"./SliderField.js";