@multiplatform.one/forms 6.0.0

package/dist/esm/fields/ToggleGroup/index.mjs

@@ -0,0 +1,329 @@
+import { SizableText, ToggleGroup as TamaguiToggleGroup, View, XStack, styled } from "tamagui";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { formButtonColors } from "../../shared/colorRamps.mjs";
+import { getElevationWrapperProps, getFieldError, mergeFieldHandler, stripRadiusFromStateProps, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
+  cursor: "pointer",
+  userSelect: "none",
+  backgroundColor: formButtonColors.background.base,
+  borderColor: formButtonColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    backgroundColor: formButtonColors.background.hover
+  },
+  pressStyle: {
+    backgroundColor: formButtonColors.background.active
+  },
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+        hoverStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.hover
+        },
+        pressStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.active
+        }
+      }
+    },
+    active: {
+      true: {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active,
+        hoverStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active
+        },
+        pressStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active
+        }
+      }
+    }
+  }
+});
+function getGroupedBorderRadius(index, count, orientation, radius) {
+  const zero = 0;
+  if (count <= 1 || radius === 0 || radius === "$0") {
+    return {
+      borderRadius: radius
+    };
+  }
+  const isFirst = index === 0;
+  const isLast = index === count - 1;
+  if (isFirst && isLast) return {
+    borderRadius: radius
+  };
+  if (orientation === "horizontal") {
+    return isFirst ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      borderTopRightRadius: zero,
+      borderBottomRightRadius: zero
+    } : isLast ? {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius,
+      borderTopLeftRadius: zero,
+      borderBottomLeftRadius: zero
+    } : {
+      borderRadius: zero,
+      borderTopLeftRadius: zero,
+      borderTopRightRadius: zero,
+      borderBottomLeftRadius: zero,
+      borderBottomRightRadius: zero
+    };
+  }
+  return isFirst ? {
+    borderTopLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomLeftRadius: zero,
+    borderBottomRightRadius: zero
+  } : isLast ? {
+    borderBottomLeftRadius: radius,
+    borderBottomRightRadius: radius,
+    borderTopLeftRadius: zero,
+    borderTopRightRadius: zero
+  } : {
+    borderRadius: zero,
+    borderTopLeftRadius: zero,
+    borderTopRightRadius: zero,
+    borderBottomLeftRadius: zero,
+    borderBottomRightRadius: zero
+  };
+}
+function ToggleItemWithElevation({
+  elevationWrapperProps,
+  groupedRadius,
+  ...props
+}) {
+  if (elevationWrapperProps.elevation) {
+    return /* @__PURE__ */jsx(View, {
+      ...elevationWrapperProps,
+      ...groupedRadius,
+      children: /* @__PURE__ */jsx(ToggleItemFrame, {
+        ...props,
+        ...groupedRadius
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(ToggleItemFrame, {
+    ...props,
+    ...groupedRadius
+  });
+}
+function ToggleGroup({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  options,
+  orientation = "horizontal",
+  children,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    control,
+    text,
+    elevation,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  if (skeleton) {
+    const optionCount = options?.length ?? 3;
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsx(XStack, {
+        gap: 0,
+        alignSelf: "flex-start",
+        children: Array.from({
+          length: optionCount
+        }, (_, i) => /* @__PURE__ */jsx(Skeleton, {
+          variant: "rounded",
+          width: 60,
+          height: knobProps.sizeToken
+        }, i))
+      })
+    });
+  }
+  const renderContent = resolvedValue => {
+    if (children) return children;
+    if (!options) return null;
+    const radius = knobProps.borderRadius.borderRadius;
+    const count = options.length;
+    const isSelected = val => type === "multiple" ? Array.isArray(resolvedValue) && resolvedValue.includes(val) : resolvedValue === val;
+    return options.map((option, index) => {
+      const groupedRadius = getGroupedBorderRadius(index, count, orientation, radius);
+      const selected = isSelected(option.value);
+      const activeColors = {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active
+      };
+      return /* @__PURE__ */jsxs(ToggleItemWithElevation, {
+        elevationWrapperProps,
+        groupedRadius,
+        value: option.value,
+        size: knobProps.sizeToken,
+        width: "auto",
+        height: "auto",
+        minHeight: knobProps.sizeToken,
+        flexShrink: 0,
+        flexGrow: orientation === "horizontal" ? 1 : 0,
+        paddingHorizontal: "$2",
+        borderWidth: knobProps.borderRadius.borderWidth,
+        outlined: knobProps.outlined,
+        animation: knobProps.transition,
+        disabled,
+        ...(selected ? activeColors : void 0),
+        ...(selected ? {
+          active: true,
+          activeStyle: activeColors
+        } : void 0),
+        ...(readOnly ? {
+          pointerEvents: "none"
+        } : void 0),
+        hoverStyle: {
+          ...stripRadiusFromStateProps(control.hoverKnobProps),
+          ...(selected ? activeColors : knobProps.outlined ? {
+            backgroundColor: "transparent",
+            borderColor: formButtonColors.border.hover
+          } : {
+            backgroundColor: formButtonColors.background.hover,
+            borderColor: formButtonColors.border.base
+          })
+        },
+        pressStyle: {
+          ...stripRadiusFromStateProps(control.pressKnobProps),
+          ...(selected ? activeColors : knobProps.outlined ? {
+            backgroundColor: "transparent",
+            borderColor: formButtonColors.border.active
+          } : {
+            backgroundColor: formButtonColors.background.active,
+            borderColor: formButtonColors.border.base
+          })
+        },
+        ...(stripRadiusFromStateProps(control.focusKnobProps) && {
+          focusStyle: {
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusKnobProps)
+          }
+        }),
+        ...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
+          focusVisibleStyle: {
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusVisibleKnobProps)
+          }
+        }),
+        children: [option.icon, /* @__PURE__ */jsx(SizableText, {
+          size: knobProps.sizeToken,
+          userSelect: "none",
+          ...knobProps.body,
+          hoverStyle: text.hoverKnobProps,
+          pressStyle: text.pressKnobProps,
+          focusStyle: text.focusKnobProps,
+          focusVisibleStyle: text.focusVisibleKnobProps,
+          children: option.label
+        })]
+      }, option.value);
+    });
+  };
+  const renderToggleGroup = (resolvedValue, isControlled, handleChange, handleBlur, hasError) => {
+    const emptyValue = type === "multiple" ? [] : "";
+    const toggleProps = {
+      type,
+      ...(type === "single" ? {
+        disableDeactivation: true
+      } : {}),
+      ...(isControlled ? {
+        value: resolvedValue ?? emptyValue
+      } : {
+        defaultValue: resolvedValue ?? emptyValue
+      }),
+      onValueChange: val => {
+        if (disabled || readOnly) return;
+        handleChange?.(val);
+        onValueChange?.(val);
+      },
+      id,
+      disabled,
+      orientation,
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      size: knobProps.sizeToken,
+      gap: 0,
+      alignSelf: "flex-start",
+      ...(handleBlur ? {
+        onBlur: handleBlur
+      } : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-readonly": readOnly || void 0
+    };
+    return /* @__PURE__ */jsx(TamaguiToggleGroup, {
+      ...toggleProps,
+      children: renderContent(resolvedValue ?? emptyValue)
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      children: renderToggleGroup(value ?? defaultValue, value !== void 0, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        children: renderToggleGroup(value !== void 0 ? value : field.state.value, true, val => field.handleChange(val), mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+ToggleGroup.Item = TamaguiToggleGroup.Item;
+export { ToggleGroup };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/fields/ToggleGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["SizableText","ToggleGroup","TamaguiToggleGroup","View","XStack","styled","Skeleton","Field","FieldLayout","formButtonColors","getElevationWrapperProps","getFieldError","mergeFieldHandler","stripRadiusFromStateProps","useFormField","useResolvedValidators","jsx","jsxs","ToggleItemFrame","Item","cursor","userSelect","backgroundColor","background","base","borderColor","border","borderWidth","hoverStyle","hover","pressStyle","active","variants","outlined","true","getGroupedBorderRadius","index","count","orientation","radius","zero","borderRadius","isFirst","isLast","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","ToggleItemWithElevation","elevationWrapperProps","groupedRadius","props","elevation","children","name","form","formProp","validators","label","labelProps","helperText","error","required","disabled","readOnly","size","id","idProp","type","value","defaultValue","onValueChange","onBlur","options","skeleton","compact","resolvedForm","knobProps","control","text","resolvedValidators","optionCount","length","gap","alignSelf","Array","from","_","i","variant","width","height","sizeToken","renderContent","resolvedValue","isSelected","val","isArray","includes","map","option","selected","activeColors","minHeight","flexShrink","flexGrow","paddingHorizontal","animation","transition","activeStyle","pointerEvents","hoverKnobProps","pressKnobProps","focusKnobProps","focusStyle","focusVisibleKnobProps","focusVisibleStyle","icon","body","renderToggleGroup","isControlled","handleChange","handleBlur","hasError","emptyValue","toggleProps","disableDeactivation","flexDirection","field","resolvedError","state"],"sources":["../../../../src/fields/ToggleGroup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/ToggleGroup/index.native.js

@@ -0,0 +1,338 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SizableText, ToggleGroup as TamaguiToggleGroup, View, XStack, styled } from "tamagui";
+import { Skeleton } from "../../Skeleton/index.native.js";
+import { Field, FieldLayout } from "../../fieldLayout.native.js";
+import { formButtonColors } from "../../shared/colorRamps.native.js";
+import { getElevationWrapperProps, getFieldError, mergeFieldHandler, stripRadiusFromStateProps, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
+var ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
+  cursor: "pointer",
+  userSelect: "none",
+  backgroundColor: formButtonColors.background.base,
+  borderColor: formButtonColors.border.base,
+  borderWidth: 1,
+  hoverStyle: {
+    backgroundColor: formButtonColors.background.hover
+  },
+  pressStyle: {
+    backgroundColor: formButtonColors.background.active
+  },
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+        hoverStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.hover
+        },
+        pressStyle: {
+          backgroundColor: "transparent",
+          borderColor: formButtonColors.border.active
+        }
+      }
+    },
+    active: {
+      true: {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active,
+        hoverStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active
+        },
+        pressStyle: {
+          backgroundColor: formButtonColors.border.active,
+          borderColor: formButtonColors.border.active
+        }
+      }
+    }
+  }
+});
+function getGroupedBorderRadius(index, count, orientation, radius) {
+  var zero = 0;
+  if (count <= 1 || radius === 0 || radius === "$0") {
+    return {
+      borderRadius: radius
+    };
+  }
+  var isFirst = index === 0;
+  var isLast = index === count - 1;
+  if (isFirst && isLast) return {
+    borderRadius: radius
+  };
+  if (orientation === "horizontal") {
+    return isFirst ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      borderTopRightRadius: zero,
+      borderBottomRightRadius: zero
+    } : isLast ? {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius,
+      borderTopLeftRadius: zero,
+      borderBottomLeftRadius: zero
+    } : {
+      borderRadius: zero,
+      borderTopLeftRadius: zero,
+      borderTopRightRadius: zero,
+      borderBottomLeftRadius: zero,
+      borderBottomRightRadius: zero
+    };
+  }
+  return isFirst ? {
+    borderTopLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomLeftRadius: zero,
+    borderBottomRightRadius: zero
+  } : isLast ? {
+    borderBottomLeftRadius: radius,
+    borderBottomRightRadius: radius,
+    borderTopLeftRadius: zero,
+    borderTopRightRadius: zero
+  } : {
+    borderRadius: zero,
+    borderTopLeftRadius: zero,
+    borderTopRightRadius: zero,
+    borderBottomLeftRadius: zero,
+    borderBottomRightRadius: zero
+  };
+}
+function ToggleItemWithElevation(param) {
+  var {
+    elevationWrapperProps,
+    groupedRadius,
+    ...props
+  } = param;
+  if (elevationWrapperProps.elevation) {
+    return /* @__PURE__ */_jsx(View, {
+      ...elevationWrapperProps,
+      ...groupedRadius,
+      children: /* @__PURE__ */_jsx(ToggleItemFrame, {
+        ...props,
+        ...groupedRadius
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(ToggleItemFrame, {
+    ...props,
+    ...groupedRadius
+  });
+}
+function ToggleGroup(param) {
+  var {
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    disabled,
+    readOnly,
+    size,
+    id: idProp,
+    type = "single",
+    value,
+    defaultValue,
+    onValueChange,
+    onBlur,
+    options,
+    orientation = "horizontal",
+    children,
+    skeleton,
+    compact
+  } = param;
+  var {
+    resolvedForm,
+    knobProps,
+    control,
+    text,
+    elevation,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = useResolvedValidators(required, validators, label, name);
+  var elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  if (skeleton) {
+    var _ref;
+    var optionCount = (_ref = options === null || options === void 0 ? void 0 : options.length) !== null && _ref !== void 0 ? _ref : 3;
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */_jsx(XStack, {
+        gap: 0,
+        alignSelf: "flex-start",
+        children: Array.from({
+          length: optionCount
+        }, function (_, i) {
+          return /* @__PURE__ */_jsx(Skeleton, {
+            variant: "rounded",
+            width: 60,
+            height: knobProps.sizeToken
+          }, i);
+        })
+      })
+    });
+  }
+  var renderContent = function renderContent2(resolvedValue) {
+    if (children) return children;
+    if (!options) return null;
+    var radius = knobProps.borderRadius.borderRadius;
+    var count = options.length;
+    var isSelected = function isSelected2(val) {
+      return type === "multiple" ? Array.isArray(resolvedValue) && resolvedValue.includes(val) : resolvedValue === val;
+    };
+    return options.map(function (option, index) {
+      var groupedRadius = getGroupedBorderRadius(index, count, orientation, radius);
+      var selected = isSelected(option.value);
+      var activeColors = {
+        backgroundColor: formButtonColors.border.active,
+        borderColor: formButtonColors.border.active
+      };
+      return /* @__PURE__ */_jsxs(ToggleItemWithElevation, {
+        elevationWrapperProps,
+        groupedRadius,
+        value: option.value,
+        size: knobProps.sizeToken,
+        width: "auto",
+        height: "auto",
+        minHeight: knobProps.sizeToken,
+        flexShrink: 0,
+        flexGrow: orientation === "horizontal" ? 1 : 0,
+        paddingHorizontal: "$2",
+        borderWidth: knobProps.borderRadius.borderWidth,
+        outlined: knobProps.outlined,
+        animation: knobProps.transition,
+        disabled,
+        ...(selected ? activeColors : void 0),
+        ...(selected ? {
+          active: true,
+          activeStyle: activeColors
+        } : void 0),
+        ...(readOnly ? {
+          pointerEvents: "none"
+        } : void 0),
+        hoverStyle: {
+          ...stripRadiusFromStateProps(control.hoverKnobProps),
+          ...(selected ? activeColors : knobProps.outlined ? {
+            backgroundColor: "transparent",
+            borderColor: formButtonColors.border.hover
+          } : {
+            backgroundColor: formButtonColors.background.hover,
+            borderColor: formButtonColors.border.base
+          })
+        },
+        pressStyle: {
+          ...stripRadiusFromStateProps(control.pressKnobProps),
+          ...(selected ? activeColors : knobProps.outlined ? {
+            backgroundColor: "transparent",
+            borderColor: formButtonColors.border.active
+          } : {
+            backgroundColor: formButtonColors.background.active,
+            borderColor: formButtonColors.border.base
+          })
+        },
+        ...(stripRadiusFromStateProps(control.focusKnobProps) && {
+          focusStyle: {
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusKnobProps)
+          }
+        }),
+        ...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
+          focusVisibleStyle: {
+            borderColor: formButtonColors.border.active,
+            ...stripRadiusFromStateProps(control.focusVisibleKnobProps)
+          }
+        }),
+        children: [option.icon, /* @__PURE__ */_jsx(SizableText, {
+          size: knobProps.sizeToken,
+          userSelect: "none",
+          ...knobProps.body,
+          hoverStyle: text.hoverKnobProps,
+          pressStyle: text.pressKnobProps,
+          focusStyle: text.focusKnobProps,
+          focusVisibleStyle: text.focusVisibleKnobProps,
+          children: option.label
+        })]
+      }, option.value);
+    });
+  };
+  var renderToggleGroup = function renderToggleGroup2(resolvedValue, isControlled, handleChange, handleBlur, hasError) {
+    var emptyValue = type === "multiple" ? [] : "";
+    var toggleProps = {
+      type,
+      ...(type === "single" ? {
+        disableDeactivation: true
+      } : {}),
+      ...(isControlled ? {
+        value: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : emptyValue
+      } : {
+        defaultValue: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : emptyValue
+      }),
+      onValueChange: function onValueChange1(val) {
+        if (disabled || readOnly) return;
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(val);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
+      },
+      id,
+      disabled,
+      orientation,
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      size: knobProps.sizeToken,
+      gap: 0,
+      alignSelf: "flex-start",
+      ...(handleBlur ? {
+        onBlur: handleBlur
+      } : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-readonly": readOnly || void 0
+    };
+    return /* @__PURE__ */_jsx(TamaguiToggleGroup, {
+      ...toggleProps,
+      children: renderContent(resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : emptyValue)
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      children: renderToggleGroup(value !== null && value !== void 0 ? value : defaultValue, value !== void 0, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */_jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children2(field) {
+      var resolvedError = getFieldError(field, error);
+      return /* @__PURE__ */_jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        children: renderToggleGroup(value !== void 0 ? value : field.state.value, true, function (val) {
+          return field.handleChange(val);
+        }, mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+ToggleGroup.Item = TamaguiToggleGroup.Item;
+export { ToggleGroup };
+//# sourceMappingURL=index.native.js.map