@multiplatform.one/forms 6.0.0

package/dist/cjs/InputParts/index.cjs

@@ -0,0 +1,585 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var InputParts_exports = {};
+__export(InputParts_exports, {
+  FocusContext: () => FocusContext,
+  FocusWiredTextArea: () => FocusWiredTextArea,
+  Input: () => Input,
+  InputContainerFrame: () => InputContainerFrame,
+  InputContext: () => InputContext,
+  InputFieldMeta: () => InputFieldMeta,
+  InputIconFrame: () => InputIconFrame,
+  InputInfo: () => InputInfo,
+  InputLabel: () => InputLabel,
+  defaultInputGroupStyles: () => defaultInputGroupStyles,
+  inputSizeVariant: () => inputSizeVariant,
+  useForwardFocus: () => useForwardFocus
+});
+module.exports = __toCommonJS(InputParts_exports);
+var import_get_font_sized = require("@tamagui/get-font-sized");
+var import_get_token = require("@tamagui/get-token");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_theme = require("@multiplatform.one/theme");
+var import_colorRamps = require("../shared/colorRamps.cjs");
+var import_groupContext = require("../shared/groupContext.cjs");
+var import_tableCellContext = require("../shared/tableCellContext.cjs");
+var import_fieldLayout = require("../fieldLayout.cjs");
+var import_themedPrimitives = require("../themedPrimitives.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const defaultContextValues = {
+  size: "$true",
+  scaleIcon: 1.2,
+  color: void 0
+};
+const InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
+const FocusContext = (0, import_tamagui.createStyledContext)({
+  setFocused: _val => {},
+  focused: false
+});
+const useForwardFocus = target => {
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (focused && target.current) {
+      target.current.focus();
+    }
+  }, [focused, target]);
+  return {
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    focusable: true
+  };
+};
+const defaultInputGroupStyles = {
+  size: "$true",
+  fontFamily: "$body",
+  borderWidth: 1,
+  color: "$color",
+  ...(import_tamagui.isWeb ? {
+    tabIndex: -1
+  } : {
+    focusable: false
+  }),
+  borderColor: import_colorRamps.formInputColors.border.base,
+  backgroundColor: import_colorRamps.formInputColors.background.base,
+  minWidth: 0,
+  outlineStyle: "none",
+  focusStyle: {
+    borderColor: import_colorRamps.formInputColors.border.focus,
+    backgroundColor: import_colorRamps.formInputColors.background.focus,
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    borderColor: import_colorRamps.formInputColors.border.focus,
+    backgroundColor: import_colorRamps.formInputColors.background.focus,
+    outlineStyle: "none"
+  }
+};
+const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
+  justifyContent: "space-between",
+  alignItems: "center",
+  context: InputContext,
+  overflow: "hidden",
+  variants: {
+    unstyled: {
+      false: defaultInputGroupStyles
+    },
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      "...size": (val, {
+        tokens
+      }) => {
+        return {
+          height: val,
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
+  const {
+    children,
+    ...props
+  } = groupProps;
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const {
+    knobProps,
+    control
+  } = (0, import_theme.useResolvedKnobs)();
+  const grouped = (0, import_groupContext.useControlGrouped)();
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (inTableCell) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
+      focused,
+      setFocused,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+        ref: forwardedRef,
+        borderWidth: 0,
+        borderRadius: 0,
+        backgroundColor: "transparent",
+        flex: 1,
+        elevation: void 0,
+        ...props,
+        overflow: "visible",
+        children
+      })
+    });
+  }
+  if (grouped) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      ref: forwardedRef,
+      borderWidth: 0,
+      borderRadius: 0,
+      backgroundColor: "transparent",
+      flex: 1,
+      elevation: void 0,
+      ...props,
+      overflow: "visible",
+      children
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
+    focused,
+    setFocused,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      ref: forwardedRef,
+      ...knobProps.body,
+      size: knobProps.sizeToken,
+      backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
+      elevation: knobProps.elevation,
+      ...knobProps.borderRadius,
+      ...(knobProps.transition ? {
+        transition: knobProps.transition
+      } : void 0),
+      ...(control.hoverKnobProps && {
+        hoverStyle: control.hoverKnobProps
+      }),
+      ...(control.pressKnobProps && {
+        pressStyle: control.pressKnobProps
+      }),
+      ...(control.focusKnobProps && {
+        focusStyle: {
+          borderColor: import_colorRamps.formInputColors.border.focus,
+          backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
+          outlineStyle: "none",
+          ...control.focusKnobProps
+        }
+      }),
+      ...(control.focusVisibleKnobProps && {
+        focusVisibleStyle: {
+          borderColor: import_colorRamps.formInputColors.border.focus,
+          backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
+          outlineStyle: "none",
+          ...control.focusVisibleKnobProps
+        }
+      }),
+      ...props,
+      ...(focused ? {
+        borderColor: import_colorRamps.formInputColors.border.focus,
+        backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.focus,
+        ...control.focusKnobProps
+      } : void 0),
+      overflow: "hidden",
+      children
+    })
+  });
+});
+const inputSizeVariant = (val = "$true", extras) => {
+  const size = val || "$true";
+  const paddingHorizontal = (0, import_get_token.getSpace)(size, {
+    shift: 0,
+    bounds: [2]
+  });
+  const fontStyle = (0, import_get_font_sized.getFontSized)(size, extras);
+  const {
+    lineHeight: _lh,
+    ...safeFontStyle
+  } = !import_tamagui.isWeb && fontStyle ? fontStyle : {
+    lineHeight: void 0,
+    ...fontStyle
+  };
+  return {
+    ...safeFontStyle,
+    paddingHorizontal
+  };
+};
+const InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
+  unstyled: true,
+  context: InputContext,
+  variants: {
+    size: {
+      "...size": inputSizeVariant
+    },
+    scaleIcon: {
+      ":number": {}
+    }
+  }
+});
+const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
+  const {
+    setFocused
+  } = FocusContext.useStyledContext();
+  const {
+    size
+  } = InputContext.useStyledContext();
+  const {
+    secureTextEntry,
+    keyboardType,
+    textContentType,
+    onChangeText,
+    onChange: onChangeProp,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    ...props
+  } = areaProps;
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const theme = (0, import_tamagui.useTheme)();
+  const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flex: 1,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputFrame, {
+      "aria-describedby": fieldDescribedBy,
+      ref,
+      size,
+      color: knobProps.textAccentColor,
+      placeholderTextColor: theme.color7?.val ?? "$color7",
+      ...knobProps.body,
+      type: secureTextEntry ? "password" : props.type,
+      inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
+      autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
+      ...props,
+      onFocus: e => {
+        setFocused(true);
+        onFocusProp?.(e);
+      },
+      onBlur: e => {
+        setFocused(false);
+        onBlurProp?.(e);
+      },
+      onChange: onChangeText || onChangeProp ? e => {
+        const text = e.target?.value ?? e.nativeEvent?.text ?? "";
+        onChangeText?.(text);
+        onChangeProp?.(e);
+      } : void 0
+    })
+  });
+});
+const InputSection = (0, import_tamagui.styled)(import_tamagui.XGroup.Item, {
+  justifyContent: "center",
+  alignItems: "center",
+  context: InputContext,
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    }
+  }
+});
+const InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
+  context: InputContext,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 0,
+  hoverStyle: {
+    backgroundColor: import_colorRamps.formButtonColors.background.hover
+  },
+  pressStyle: {
+    backgroundColor: import_colorRamps.formButtonColors.background.active
+  },
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      "...size": (val = "$true") => {
+        return {
+          paddingHorizontal: 0,
+          height: val,
+          width: val
+        };
+      }
+    }
+  }
+});
+const InputButtonImpl = InputButton.styleable((props, ref) => {
+  const {
+    size
+  } = InputContext.useStyledContext();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
+    ref,
+    size,
+    tabIndex: -1,
+    ...props
+  });
+});
+const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "InputIconFrame",
+  justifyContent: "center",
+  alignItems: "center",
+  context: InputContext,
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
+      "...size": () => ({})
+    },
+    adornment: {
+      leading: {},
+      trailing: {}
+    }
+  }
+});
+const getIconSize = (size, scale) => {
+  return (typeof size === "number" ? size * 0.5 : (0, import_tamagui.getFontSize)(size)) * scale;
+};
+const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
+  const {
+    children,
+    color: colorProp,
+    scaleIcon: scaleIconProp,
+    adornment,
+    ...props
+  } = iconProps;
+  const {
+    size = "$true",
+    color: contextColor,
+    scaleIcon = 1
+  } = InputContext.useStyledContext();
+  const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
+  const theme = (0, import_tamagui.useTheme)();
+  const rawColor = colorProp ?? contextColor;
+  const color = (0, import_tamagui.getVariable)(rawColor ? theme[rawColor]?.get("web") ?? rawColor : theme.borderColor?.get("web"));
+  const iconSize = getIconSize(size, resolvedScaleIcon);
+  const padding = (0, import_get_token.getSpace)(size, {
+    shift: 0,
+    bounds: [2]
+  });
+  const paddingProps = adornment === "leading" ? {
+    paddingLeft: padding,
+    paddingRight: 0
+  } : adornment === "trailing" ? {
+    paddingRight: padding,
+    paddingLeft: 0
+  } : {
+    paddingHorizontal: padding
+  };
+  const getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
+    size: iconSize,
+    color
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIconFrame, {
+    ref,
+    ...paddingProps,
+    ...props,
+    children: getThemedIcon(children)
+  });
+});
+const InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "InputContainerFrame",
+  context: InputContext,
+  flexDirection: "column",
+  variants: {
+    size: {
+      "...size": (val, {
+        tokens
+      }) => ({
+        gap: tokens.space[val]?.val * 0.3
+      })
+    },
+    color: {
+      "...color": () => ({})
+    },
+    scaleIcon: {
+      ":number": {}
+    },
+    gapScale: {
+      ":number": {}
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) => {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputContainerFrame, {
+    ref: forwardedRef,
+    size: knobProps.sizeToken,
+    ...knobProps.body,
+    ...props
+  });
+});
+const InputLabelFrame = (0, import_tamagui.styled)(import_tamagui.Label, {
+  context: InputContext,
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      "...fontSize": import_get_font_sized.getFontSized
+    }
+  }
+});
+const InputLabel = InputLabelFrame.styleable((props, ref) => {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputLabelFrame, {
+    ref,
+    ...knobProps.heading,
+    color: knobProps.textAccentColor,
+    ...props
+  });
+});
+const InputInfoFrame = (0, import_tamagui.styled)(import_tamagui.Text, {
+  context: InputContext,
+  color: import_colorRamps.formCommonColors.text,
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      "...fontSize": (val, {
+        font
+      }) => {
+        if (!font) return;
+        const fontSize = font.size[val]?.val * 0.8;
+        const lineHeight = font.lineHeight?.[val]?.val * 0.8;
+        const fontWeight = font.weight?.$2;
+        const letterSpacing = font.letterSpacing?.[val];
+        const textTransform = font.transform?.[val];
+        const fontStyle = font.style?.[val];
+        return {
+          fontSize,
+          lineHeight,
+          fontWeight,
+          letterSpacing,
+          textTransform,
+          fontStyle
+        };
+      }
+    }
+  }
+});
+const InputInfo = InputInfoFrame.styleable((props, ref) => {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfoFrame, {
+    ref,
+    ...knobProps.body,
+    ...props
+  });
+});
+function InputFieldMeta({
+  helperText,
+  displayError
+}) {
+  const errorMessage = displayError && typeof displayError === "string" && displayError.length > 0 ? displayError : void 0;
+  if (!helperText && !errorMessage) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [helperText ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
+      children: helperText
+    }) : null, errorMessage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputInfo, {
+      color: import_colorRamps.formCommonColors.error,
+      role: "alert",
+      "aria-live": "polite",
+      children: errorMessage
+    }) : null]
+  });
+}
+const InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
+  context: InputContext,
+  variants: {
+    scaleIcon: {
+      ":number": {}
+    },
+    size: {
+      "...size": (val, {
+        tokens
+      }) => {
+        const radiusToken = tokens.radius[val] ?? tokens.radius.$true;
+        return {
+          borderRadius: radiusToken
+        };
+      }
+    }
+  }
+});
+function FocusWiredTextArea(props) {
+  const {
+    setFocused
+  } = FocusContext.useStyledContext();
+  const {
+    innerRef,
+    onFocus,
+    onBlur,
+    ...rest
+  } = props;
+  const fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flex: 1,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_themedPrimitives.ThemedTextArea, {
+      "aria-describedby": fieldDescribedBy,
+      ref: innerRef,
+      width: "100%",
+      onFocus: e => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: e => {
+        setFocused(false);
+        onBlur?.(e);
+      },
+      ...rest
+    })
+  });
+}
+const InputCompound = Object.assign(InputContainerImpl, {
+  Box: InputGroupImpl,
+  Area: InputAreaImpl,
+  TextArea: FocusWiredTextArea,
+  Section: InputSection,
+  Button: InputButtonImpl,
+  Icon: InputIcon,
+  Info: InputInfo,
+  Meta: InputFieldMeta,
+  Label: InputLabel,
+  XGroup: Object.assign(InputXGroup, {
+    Item: import_tamagui.XGroup.Item
+  })
+});
+const Input = InputCompound;