@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Slider", {
-  enumerable: true,
-  get: function () {
-    return _Slider.Slider;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Slider.default;
-  }
-});
-var _Slider = _interopRequireWildcard(require("./Slider.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Slider",{enumerable:!0,get:function(){return _Slider.Slider}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Slider.default}});var _Slider=_interopRequireWildcard(require("./Slider.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,o,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(i=r?n:t){if(i.has(e))return i.get(e);i.set(e,u)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?i(u,r,o):u[r]=e[r]);return u})(e,r)}

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

@@ -1,266 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useValueDraft = exports.snapValue = exports.parseTyped = exports.clampValue = exports.RollingText = exports.CountingText = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-const clampValue = (value, min, max) => Math.min(Math.max(value, min), max);
-exports.clampValue = clampValue;
-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. */
-exports.snapValue = snapValue;
-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;
-};
-exports.parseTyped = parseTyped;
-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.
- */
-const CountingText = exports.CountingText = /*#__PURE__*/(0, _react.memo)(({
-  value,
-  format,
-  decimals = 2,
-  duration,
-  jumpKey = '',
-  style,
-  testID
-}) => {
-  const [shown, setShown] = (0, _react.useState)(value);
-  const shownRef = (0, _react.useRef)(value);
-  const jumpRef = (0, _react.useRef)(jumpKey);
-  (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.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`.
- */
-const useValueDraft = ({
-  value,
-  min,
-  max,
-  step,
-  format,
-  parse = parseTyped,
-  onChange
-}) => {
-  const [draft, setDraft] = (0, _react.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);
-      }
-    }
-  };
-};
-exports.useValueDraft = useValueDraft;
-const ROLL_TRAVEL_RATIO = 1.2;
-
-/** One character (or word) that rolls to its next value. */
-const RollingSlot = /*#__PURE__*/(0, _react.memo)(({
-  text,
-  direction,
-  duration,
-  style,
-  testID
-}) => {
-  const [leaving, setLeaving] = (0, _react.useState)(null);
-  const shownRef = (0, _react.useRef)(text);
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const fontSize = _reactNative.StyleSheet.flatten(style)?.fontSize ?? 14;
-  const travel = fontSize * ROLL_TRAVEL_RATIO;
-  (0, _react.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 = _reactNative.Animated.timing(progress, {
-      toValue: 1,
-      duration,
-      easing: _reactNative.Easing.out(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: rollStyles.slot,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
-      style: [style, entering],
-      testID: testID,
-      children: text
-    }), leaving !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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.
- */
-const RollingText = exports.RollingText = /*#__PURE__*/(0, _react.memo)(({
-  text,
-  direction = 'up',
-  duration,
-  perCharacter = true,
-  style,
-  testID
-}) => {
-  const prevRef = (0, _react.useRef)(text);
-  const slotCount = perCharacter ? Math.max(text.length, prevRef.current.length) : 1;
-  (0, _react.useEffect)(() => {
-    prevRef.current = text;
-  }, [text]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: rollStyles.row,
-    testID: testID,
-    children: perCharacter ? Array.from({
-      length: slotCount
-    }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(RollingSlot, {
-      text: text,
-      direction: direction,
-      duration: duration,
-      style: style,
-      testID: testID ? `${testID}-char` : undefined
-    })
-  });
-});
-RollingText.displayName = 'RollingText';
-const rollStyles = _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'baseline'
-  },
-  slot: {
-    overflow: 'hidden'
-  },
-  leaving: {
-    position: 'absolute',
-    left: 0,
-    top: 0
-  }
-});
-//# sourceMappingURL=valueText.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useValueDraft=exports.snapValue=exports.sliderToneInk=exports.parseTyped=exports.clampValue=exports.RollingText=exports.CountingText=void 0;var _react=require("react"),_reactNative=require("react-native"),_jsxRuntime=require("react/jsx-runtime");const sliderToneInk=(e,t)=>{switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}};exports.sliderToneInk=sliderToneInk;const clampValue=(e,t,r)=>Math.min(Math.max(e,t),r);exports.clampValue=clampValue;const snapValue=(e,t,r,n)=>{if(n<=0)return clampValue(e,t,r);const a=String(n).split(".")[1]?.length??0,s=Math.round((e-t)/n)*n+t;return clampValue(a>0?Number(s.toFixed(a)):s,t,r)};exports.snapValue=snapValue;const parseTyped=e=>{const t=e.replace(/[^\d.-]/g,"");if(""===t||"."===t||"-"===t)return null;const r=Number.parseFloat(t);return Number.isFinite(r)?r:null};exports.parseTyped=parseTyped;const easeOutCubic=e=>1-(1-e)**3,roundTo=(e,t)=>{const r=10**t;return Math.round(e*r)/r},CountingText=exports.CountingText=(0,_react.memo)(({value:e,format:t,decimals:r=2,duration:n,jumpKey:a="",style:s,testID:o})=>{const[l,u]=(0,_react.useState)(e),i=(0,_react.useRef)(e),c=(0,_react.useRef)(a);return(0,_react.useEffect)(()=>{const t=c.current!==a;c.current=a;const r=i.current;if(t||n<=0||r===e)return i.current=e,void u(e);const s=Date.now();let o=0;const tick=()=>{const t=Math.min(1,(Date.now()-s)/n),a=r+(e-r)*easeOutCubic(t);i.current=a,u(a),t<1&&(o=requestAnimationFrame(tick))};return o=requestAnimationFrame(tick),()=>cancelAnimationFrame(o)},[e,a,n]),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:s,testID:o,children:t(roundTo(l,r))})});CountingText.displayName="CountingText";const useValueDraft=({value:e,min:t,max:r,step:n,format:a,parse:s=parseTyped,onChange:o})=>{const[l,u]=(0,_react.useState)(null);return{text:l??a(e),editing:null!==l,onFocus:()=>u(a(e)),onChangeText:e=>{u(e);const n=s(e);null!==n&&o(clampValue(n,t,r))},onBlur:()=>{if(null===l)return;const a=s(l);u(null);const i=snapValue(a??t,t,r,n);i!==e&&o(i)}}};exports.useValueDraft=useValueDraft;const ROLL_TRAVEL_RATIO=1.2,RollingSlot=(0,_react.memo)(({text:e,direction:t,duration:r,style:n,testID:a})=>{const[s,o]=(0,_react.useState)(null),l=(0,_react.useRef)(e),u=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current,i=1.2*(_reactNative.StyleSheet.flatten(n)?.fontSize??14);(0,_react.useEffect)(()=>{if(l.current===e)return;const t=l.current;if(l.current=e,r<=0)return void o(null);o(t),u.setValue(0);const n=_reactNative.Animated.timing(u,{toValue:1,duration:r,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:!0});return n.start(({finished:e})=>{e&&o(null)}),()=>n.stop()},[e,r,u]);const c="up"===t?-1:1,p=null===s?null:{opacity:u,transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[-c*i,0]})}]},x={opacity:u.interpolate({inputRange:[0,1],outputRange:[1,0]}),transform:[{translateY:u.interpolate({inputRange:[0,1],outputRange:[0,c*i]})}]};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:rollStyles.slot,children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[n,p],testID:a,children:e}),null!==s?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[n,rollStyles.leaving,x],testID:a?`${a}-leaving`:void 0,children:s}):null]})});RollingSlot.displayName="RollingSlot";const RollingText=exports.RollingText=(0,_react.memo)(({text:e,direction:t="up",duration:r,perCharacter:n=!0,style:a,testID:s})=>{const o=(0,_react.useRef)(e),l=n?Math.max(e.length,o.current.length):1;return(0,_react.useEffect)(()=>{o.current=e},[e]),(0,_jsxRuntime.jsx)(_reactNative.View,{style:rollStyles.row,testID:s,children:n?Array.from({length:l},(n,o)=>(0,_jsxRuntime.jsx)(RollingSlot,{text:e[o]??"",direction:t,duration:r,style:a,testID:s?`${s}-char`:void 0},o)):(0,_jsxRuntime.jsx)(RollingSlot,{text:e,direction:t,duration:r,style:a,testID:s?`${s}-char`:void 0})})});RollingText.displayName="RollingText";const rollStyles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"baseline"},slot:{overflow:"hidden"},leaving:{position:"absolute",left:0,top:0}});

package/lib/commonjs/components/SliderField/SliderField.js

@@ -1,360 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SliderField = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../AppIcon/index.js");
-var _FieldBase = require("../FieldBase/FieldBase.js");
-var _index4 = require("../IconButton/index.js");
-var _index5 = require("../Slider/index.js");
-var _valueText = require("../Slider/valueText.js");
-var _index6 = require("../Tooltip/index.js");
-var _jsxRuntime = require("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 = (0, _index2.useTheme)();
-  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, 'sm');
-  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
-    disabled
-  });
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = (0, _react.useRef)(null);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.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__*/(0, _jsxRuntime.jsx)(_index3.AppIcon, {
-      name: "info-circle",
-      size: sizeTokens.iconSize,
-      color: theme.colors.error
-    }) : undefined,
-    style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = exports.SliderField = /*#__PURE__*/(0, _react.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 = (0, _index2.useTheme)();
-  const themedStyles = (0, _react.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] = (0, _index.useControllableState)({
-    value: props.value,
-    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
-    onChange: props.onChange
-  });
-  const [rawLow, rawHigh] = isRange ? value : [value, max];
-  const low = (0, _valueText.clampValue)(Math.min(rawLow, rawHigh), min, max);
-  const high = (0, _valueText.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 = (0, _valueText.useValueDraft)({
-    value: low,
-    min,
-    max,
-    step,
-    format: formatValue,
-    parse: parseInput,
-    onChange: next => setValue(isRange ? [Math.min(next, high), high] : next)
-  });
-  const highBox = (0, _valueText.useValueDraft)({
-    value: high,
-    min,
-    max,
-    step,
-    format: formatValue,
-    parse: parseInput,
-    onChange: next => setValue([low, Math.max(next, low)])
-  });
-  const stepBy = direction => {
-    const next = (0, _valueText.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__*/(0, _jsxRuntime.jsx)(_valueText.CountingText, {
-    value: thumbValue,
-    format: formatValue,
-    decimals: decimals,
-    duration: duration,
-    style: bubbleTextStyle,
-    testID: testID && !isRange ? `${testID}-bubble` : undefined
-  });
-  const boundText = text => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    style: [themedStyles.container, style],
-    testID: testID,
-    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: themedStyles.labelRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldLabel, {
-        required: required,
-        style: labelStyle,
-        children: label
-      }), unit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [themedStyles.unit, {
-          color: theme.colors.text.tertiary
-        }],
-        children: unit
-      }) : null, info ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Tooltip, {
-        content: info,
-        trigger: "press",
-        placement: "top",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          accessibilityRole: "button",
-          accessibilityLabel: `About ${label}`,
-          hitSlop: 8,
-          style: themedStyles.infoButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AppIcon, {
-            name: "info-circle",
-            variant: "bold",
-            size: 16,
-            color: theme.colors.text.tertiary
-          })
-        })
-      }) : null]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [themedStyles.row, showBubble ? themedStyles.rowWithBubble : null],
-      children: [startIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        children: (0, _index3.renderSlotIcon)(startIcon, slotState)
-      }) : null, showStepper && !isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.IconButton, {
-        icon: p => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: themedStyles.sliderWrap,
-        children: isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Slider, {
-          ...sliderProps,
-          range: true,
-          value: [low, high],
-          onChange: setValue
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Slider, {
-          ...sliderProps,
-          value: low,
-          onChange: setValue
-        })
-      }), isRange && showInput ? /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_index4.IconButton, {
-        icon: p => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        children: (0, _index3.renderSlotIcon)(endIcon, slotState)
-      }) : null, !isRange && showInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueBox, {
-        draft: lowBox,
-        error: hasError,
-        disabled: disabled,
-        width: inputWidth,
-        accessibilityLabel: `${label ?? 'Value'} value`,
-        style: inputStyle,
-        testID: testID ? `${testID}-input` : undefined
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldMessage, {
-      text: hasError ? error : helperText,
-      error: hasError
-    })]
-  });
-});
-SliderField.displayName = 'SliderField';
-const styles = _reactNative.StyleSheet.create({
-  boxInput: {
-    flex: 1,
-    padding: 0,
-    margin: 0,
-    includeFontPadding: false
-  }
-});
-const buildStyles = theme => _reactNative.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']
-  }
-});
-var _default = exports.default = SliderField;
-//# sourceMappingURL=SliderField.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SliderField=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../AppIcon/index.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_index4=require("../IconButton/index.js"),_index5=require("../Slider/index.js"),_valueText=require("../Slider/valueText.js"),_index6=require("../Tooltip/index.js"),_jsxRuntime=require("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:i,width:l,accessibilityLabel:s,style:a,testID:n})=>{const r=(0,_index2.useTheme)(),o=(0,_FieldBase.resolveFieldSize)(r,"sm"),d=(0,_FieldBase.resolveFieldTextStyle)(r,{disabled:i}),u=(0,_react.useRef)(null),c=(0,_react.useCallback)(()=>{i||u.current?.focus()},[i]);return(0,_jsxRuntime.jsx)(_FieldBase.FieldBase,{size:"sm",focused:e.editing,disabled:i,error:t,filled:!0,width:l,onPress:c,pressFeedback:!1,paddingHorizontal:r.spacing.sm,gap:r.spacing.xs,trailing:t?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"info-circle",size:o.iconSize,color:r.colors.error}):void 0,style:a,children:(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:u,style:[styles.boxInput,{color:d.color,fontSize:o.fontSize,...d.weightStyle}],value:e.text,onChangeText:e.onChangeText,onFocus:e.onFocus,onBlur:e.onBlur,onSubmitEditing:e.onBlur,editable:!i,keyboardType:"decimal-pad",returnKeyType:"done",textAlign:"center",selectionColor:r.colors.primary,accessibilityLabel:s,accessibilityState:{disabled:i},testID:n})})},SliderField=exports.SliderField=(0,_react.forwardRef)((e,t)=>{const{label:i,unit:l,info:s,required:a=!1,helperText:n,error:r,min:o=0,max:d=100,step:u=1,disabled:c=!1,tone:x="primary",size:m,variant:_,haptic:p,showBubble:b=!0,showBounds:h=!0,showInput:j=!1,showStepper:y=!1,startIcon:v,endIcon:g,startLabel:f,endLabel:S,formatValue:I=defaultFormatValue,parseInput:T,animationDuration:R,inputWidth:w=DEFAULT_INPUT_WIDTH,accessibilityLabel:F,style:B,labelStyle:z,boundStyle:V,sliderStyle:D,inputStyle:L,testID:N}=e,q=(0,_index2.useTheme)(),C=(0,_react.useMemo)(()=>buildStyles(q),[q]),$=R??q.motion.duration.fast,A=!0===e.range,W=Boolean(r),P=stepDecimals(u),[M,k]=(0,_index.useControllableState)({value:e.value,defaultValue:e.defaultValue??(A?[o,d]:o),onChange:e.onChange}),[H,U]=A?M:[M,d],E=(0,_valueText.clampValue)(Math.min(H,U),o,d),K=(0,_valueText.clampValue)(Math.max(H,U),o,d),O=(0,_valueText.useValueDraft)({value:E,min:o,max:d,step:u,format:I,parse:T,onChange:e=>k(A?[Math.min(e,K),K]:e)}),G=(0,_valueText.useValueDraft)({value:K,min:o,max:d,step:u,format:I,parse:T,onChange:e=>k([E,Math.max(e,E)])}),stepBy=e=>{const t=(0,_valueText.snapValue)(E+e*u,o,d,u);t!==E&&k(t)},J={color:c?q.colors.text.disabled:q.colors.text.secondary,size:q.components.field?.md?.iconSize??18,disabled:c},Q=[C.bubbleText,{color:(0,_valueText.sliderToneInk)(q,x),fontWeight:q.typography.fontWeight.semibold}],boundText=e=>(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[C.bound,{color:c?q.colors.text.disabled:q.colors.text.secondary},V],children:e}),X={min:o,max:d,step:u,disabled:c,tone:x,size:m,variant:_,haptic:p,showLabel:!!b&&"always",renderLabel:b?e=>(0,_jsxRuntime.jsx)(_valueText.CountingText,{value:e,format:I,decimals:P,duration:$,style:Q,testID:N&&!A?`${N}-bubble`:void 0}):void 0,accessibilityLabel:F??i,style:D,testID:N?`${N}-slider`:void 0};return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[C.container,B],testID:N,children:[i?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:C.labelRow,children:[(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{required:a,style:z,children:i}),l?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[C.unit,{color:q.colors.text.tertiary}],children:l}):null,s?(0,_jsxRuntime.jsx)(_index6.Tooltip,{content:s,trigger:"press",placement:"top",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:`About ${i}`,hitSlop:8,style:C.infoButton,children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"info-circle",variant:"bold",size:16,color:q.colors.text.tertiary})})}):null]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[C.row,b?C.rowWithBubble:null],children:[v?(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_index3.renderSlotIcon)(v,J)}):null,y&&!A?(0,_jsxRuntime.jsx)(_index4.IconButton,{icon:e=>(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"minus",size:e.size,color:e.color}),onPress:()=>stepBy(-1),accessibilityLabel:"Decrease",variant:"ghost",tone:"neutral",size:"sm",disabled:c||E<=o,haptic:p,testID:N?`${N}-minus`:void 0}):null,A&&j?(0,_jsxRuntime.jsx)(ValueBox,{draft:O,error:W,disabled:c,width:w,accessibilityLabel:`${i??"Value"} low`,style:L,testID:N?`${N}-input-low`:void 0}):h?boundText(f??I(o)):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:C.sliderWrap,children:A?(0,_jsxRuntime.jsx)(_index5.Slider,{...X,range:!0,value:[E,K],onChange:k}):(0,_jsxRuntime.jsx)(_index5.Slider,{...X,value:E,onChange:k})}),A&&j?(0,_jsxRuntime.jsx)(ValueBox,{draft:G,error:W,disabled:c,width:w,accessibilityLabel:`${i??"Value"} high`,style:L,testID:N?`${N}-input-high`:void 0}):h?boundText(S??I(d)):null,y&&!A?(0,_jsxRuntime.jsx)(_index4.IconButton,{icon:e=>(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"add",size:e.size,color:e.color}),onPress:()=>stepBy(1),accessibilityLabel:"Increase",variant:"ghost",tone:"neutral",size:"sm",disabled:c||E>=d,haptic:p,testID:N?`${N}-plus`:void 0}):null,g?(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_index3.renderSlotIcon)(g,J)}):null,!A&&j?(0,_jsxRuntime.jsx)(ValueBox,{draft:O,error:W,disabled:c,width:w,accessibilityLabel:`${i??"Value"} value`,style:L,testID:N?`${N}-input`:void 0}):null]}),(0,_jsxRuntime.jsx)(_FieldBase.FieldMessage,{text:W?r:n,error:W})]})});SliderField.displayName="SliderField";const styles=_reactNative.StyleSheet.create({boxInput:{flex:1,padding:0,margin:0,includeFontPadding:!1}}),buildStyles=e=>_reactNative.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"]}});var _default=exports.default=SliderField;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SliderField", {
-  enumerable: true,
-  get: function () {
-    return _SliderField.SliderField;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _SliderField.default;
-  }
-});
-var _SliderField = _interopRequireWildcard(require("./SliderField.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SliderField",{enumerable:!0,get:function(){return _SliderField.SliderField}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _SliderField.default}});var _SliderField=_interopRequireWildcard(require("./SliderField.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,l,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=r?i:t){if(n.has(e))return n.get(e);n.set(e,o)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((l=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(l.get||l.set)?n(o,r,l):o[r]=e[r]);return o})(e,r)}