@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Slider } from "./Slider.js";
-//# sourceMappingURL=index.js.map
+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
+import{memo as t,useEffect as e,useRef as n,useState as r}from"react";import{Animated as o,Easing as a,StyleSheet as l,Text as s,View as i}from"react-native";import{jsx as u,jsxs as c}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,a=Math.round((t-e)/r)*r+e;return clampValue(o>0?Number(a.toFixed(o)):a,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 roundTo=(t,e)=>{const n=10**e;return Math.round(t*n)/n};export const CountingText=t(({value:t,format:o,decimals:a=2,duration:l,jumpKey:i="",style:c,testID:p})=>{const[m,d]=r(t),g=n(t),x=n(i);return e(()=>{const e=x.current!==i;x.current=i;const n=g.current;if(e||l<=0||n===t)return g.current=t,void d(t);const r=Date.now();let o=0;const tick=()=>{const e=Math.min(1,(Date.now()-r)/l),a=n+(t-n)*(t=>1-(1-t)**3)(e);g.current=a,d(a),e<1&&(o=requestAnimationFrame(tick))};return o=requestAnimationFrame(tick),()=>cancelAnimationFrame(o)},[t,i,l]),u(s,{style:c,testID:p,children:o(roundTo(m,a))})});CountingText.displayName="CountingText";export const useValueDraft=({value:t,min:e,max:n,step:o,format:a,parse:l=parseTyped,onChange:s})=>{const[i,u]=r(null);return{text:i??a(t),editing:null!==i,onFocus:()=>u(a(t)),onChangeText:t=>{u(t);const r=l(t);null!==r&&s(clampValue(r,e,n))},onBlur:()=>{if(null===i)return;const r=l(i);u(null);const a=snapValue(r??e,e,n,o);a!==t&&s(a)}}};const p=t(({text:t,direction:s,duration:p,style:d,testID:g})=>{const[x,h]=r(null),f=n(t),y=n(new o.Value(1)).current,v=1.2*(l.flatten(d)?.fontSize??14);e(()=>{if(f.current===t)return;const e=f.current;if(f.current=t,p<=0)return void h(null);h(e),y.setValue(0);const n=o.timing(y,{toValue:1,duration:p,easing:a.out(a.cubic),useNativeDriver:!0});return n.start(({finished:t})=>{t&&h(null)}),()=>n.stop()},[t,p,y]);const D="up"===s?-1:1,T=null===x?null:{opacity:y,transform:[{translateY:y.interpolate({inputRange:[0,1],outputRange:[-D*v,0]})}]},I={opacity:y.interpolate({inputRange:[0,1],outputRange:[1,0]}),transform:[{translateY:y.interpolate({inputRange:[0,1],outputRange:[0,D*v]})}]};return c(i,{style:m.slot,children:[u(o.Text,{style:[d,T],testID:g,children:t}),null!==x?u(o.Text,{style:[d,m.leaving,I],testID:g?`${g}-leaving`:void 0,children:x}):null]})});p.displayName="RollingSlot";export const RollingText=t(({text:t,direction:r="up",duration:o,perCharacter:a=!0,style:l,testID:s})=>{const c=n(t),d=a?Math.max(t.length,c.current.length):1;return e(()=>{c.current=t},[t]),u(i,{style:m.row,testID:s,children:a?Array.from({length:d},(e,n)=>u(p,{text:t[n]??"",direction:r,duration:o,style:l,testID:s?`${s}-char`:void 0},n)):u(p,{text:t,direction:r,duration:o,style:l,testID:s?`${s}-char`:void 0})})});RollingText.displayName="RollingText";const m=l.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
+import{forwardRef as e,useCallback as t,useMemo as i,useRef as o}from"react";import{Pressable as l,StyleSheet as n,Text as r,TextInput as a,View as s}from"react-native";import{useControllableState as d}from"../../hooks/index.js";import{useTheme as c}from"../../theme/index.js";import{AppIcon as u,renderSlotIcon as p}from"../AppIcon/index.js";import{FieldBase as b,FieldLabel as m,FieldMessage as h,resolveFieldSize as y,resolveFieldTextStyle as f}from"../FieldBase/FieldBase.js";import{IconButton as g}from"../IconButton/index.js";import{Slider as x}from"../Slider/index.js";import{CountingText as v,clampValue as z,sliderToneInk as S,snapValue as w,useValueDraft as I}from"../Slider/valueText.js";import{Tooltip as D}from"../Tooltip/index.js";import{jsx as L,jsxs as B}from"react/jsx-runtime";const j=72,defaultFormatValue=e=>String(e),ValueBox=({draft:e,error:i,disabled:l,width:n,accessibilityLabel:r,style:s,testID:d})=>{const p=c(),m=y(p,"sm"),h=f(p,{disabled:l}),g=o(null),x=t(()=>{l||g.current?.focus()},[l]);return L(b,{size:"sm",focused:e.editing,disabled:l,error:i,filled:!0,width:n,onPress:x,pressFeedback:!1,paddingHorizontal:p.spacing.sm,gap:p.spacing.xs,trailing:i?L(u,{name:"info-circle",size:m.iconSize,color:p.colors.error}):void 0,style:s,children:L(a,{ref:g,style:[T.boxInput,{color:h.color,fontSize:m.fontSize,...h.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:p.colors.primary,accessibilityLabel:r,accessibilityState:{disabled:l},testID:d})})},$=e((e,t)=>{const{label:o,unit:n,info:a,required:b=!1,helperText:y,error:f,min:$=0,max:T=100,step:C=1,disabled:V=!1,tone:F="primary",size:W,variant:M,haptic:P,showBubble:k=!0,showBounds:A=!0,showInput:R=!1,showStepper:q=!1,startIcon:H,endIcon:E,startLabel:K,endLabel:N,formatValue:G=defaultFormatValue,parseInput:J,animationDuration:O,inputWidth:Q=j,accessibilityLabel:U,style:X,labelStyle:Y,boundStyle:Z,sliderStyle:_,inputStyle:ee,testID:te}=e,ie=c(),oe=i(()=>buildStyles(ie),[ie]),le=O??ie.motion.duration.fast,ne=!0===e.range,re=Boolean(f),ae=(e=>String(e).split(".")[1]?.length??0)(C),[se,de]=d({value:e.value,defaultValue:e.defaultValue??(ne?[$,T]:$),onChange:e.onChange}),[ce,ue]=ne?se:[se,T],pe=z(Math.min(ce,ue),$,T),be=z(Math.max(ce,ue),$,T),me=I({value:pe,min:$,max:T,step:C,format:G,parse:J,onChange:e=>de(ne?[Math.min(e,be),be]:e)}),he=I({value:be,min:$,max:T,step:C,format:G,parse:J,onChange:e=>de([pe,Math.max(e,pe)])}),stepBy=e=>{const t=w(pe+e*C,$,T,C);t!==pe&&de(t)},ye={color:V?ie.colors.text.disabled:ie.colors.text.secondary,size:ie.components.field?.md?.iconSize??18,disabled:V},fe=[oe.bubbleText,{color:S(ie,F),fontWeight:ie.typography.fontWeight.semibold}],boundText=e=>L(r,{style:[oe.bound,{color:V?ie.colors.text.disabled:ie.colors.text.secondary},Z],children:e}),ge={min:$,max:T,step:C,disabled:V,tone:F,size:W,variant:M,haptic:P,showLabel:!!k&&"always",renderLabel:k?e=>L(v,{value:e,format:G,decimals:ae,duration:le,style:fe,testID:te&&!ne?`${te}-bubble`:void 0}):void 0,accessibilityLabel:U??o,style:_,testID:te?`${te}-slider`:void 0};return B(s,{ref:t,style:[oe.container,X],testID:te,children:[o?B(s,{style:oe.labelRow,children:[L(m,{required:b,style:Y,children:o}),n?L(r,{style:[oe.unit,{color:ie.colors.text.tertiary}],children:n}):null,a?L(D,{content:a,trigger:"press",placement:"top",children:L(l,{accessibilityRole:"button",accessibilityLabel:`About ${o}`,hitSlop:8,style:oe.infoButton,children:L(u,{name:"info-circle",variant:"bold",size:16,color:ie.colors.text.tertiary})})}):null]}):null,B(s,{style:[oe.row,k?oe.rowWithBubble:null],children:[H?L(s,{children:p(H,ye)}):null,q&&!ne?L(g,{icon:e=>L(u,{name:"minus",size:e.size,color:e.color}),onPress:()=>stepBy(-1),accessibilityLabel:"Decrease",variant:"ghost",tone:"neutral",size:"sm",disabled:V||pe<=$,haptic:P,testID:te?`${te}-minus`:void 0}):null,ne&&R?L(ValueBox,{draft:me,error:re,disabled:V,width:Q,accessibilityLabel:`${o??"Value"} low`,style:ee,testID:te?`${te}-input-low`:void 0}):A?boundText(K??G($)):null,L(s,{style:oe.sliderWrap,children:L(x,ne?{...ge,range:!0,value:[pe,be],onChange:de}:{...ge,value:pe,onChange:de})}),ne&&R?L(ValueBox,{draft:he,error:re,disabled:V,width:Q,accessibilityLabel:`${o??"Value"} high`,style:ee,testID:te?`${te}-input-high`:void 0}):A?boundText(N??G(T)):null,q&&!ne?L(g,{icon:e=>L(u,{name:"add",size:e.size,color:e.color}),onPress:()=>stepBy(1),accessibilityLabel:"Increase",variant:"ghost",tone:"neutral",size:"sm",disabled:V||pe>=T,haptic:P,testID:te?`${te}-plus`:void 0}):null,E?L(s,{children:p(E,ye)}):null,!ne&&R?L(ValueBox,{draft:me,error:re,disabled:V,width:Q,accessibilityLabel:`${o??"Value"} value`,style:ee,testID:te?`${te}-input`:void 0}):null]}),L(h,{text:re?f:y,error:re})]})});$.displayName="SliderField";const T=n.create({boxInput:{flex:1,padding:0,margin:0,includeFontPadding:!1}}),buildStyles=e=>n.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{$ as SliderField};export default $;

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

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