@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Progress/Progress.spec.native.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form/index.native.js";
+import { Progress } from "./index.native.js";
+describe("Progress", function () {
+  describe("without form context", function () {
+    it("renders with label", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Progress, {
+        label: "Loading",
+        name: "p",
+        value: 50
+      }));
+      expect(result.findTextElement("Loading")).toBeDefined();
+    });
+    it("renders required label with asterisk", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Progress, {
+        label: "Required",
+        name: "req",
+        value: 0,
+        required: true
+      }));
+      var label = result.container.querySelector("label");
+      expect(label === null || label === void 0 ? void 0 : label.textContent).toContain("*");
+    });
+    it("renders with helper text", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Progress, {
+        label: "Progress",
+        name: "p",
+        value: 75,
+        helperText: "75% complete"
+      }));
+      expect(result.findTextElement("75% complete")).toBeDefined();
+    });
+    it("renders skeleton placeholder", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Progress, {
+        label: "Loading",
+        name: "l",
+        value: 0,
+        skeleton: true
+      }));
+      var progressbar = result.container.querySelector("[role='progressbar']");
+      expect(progressbar).toBeNull();
+    });
+    it("renders progress bar element", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Progress, {
+        label: "Progress",
+        name: "p",
+        value: 40
+      }));
+      var progressbar = result.container.querySelector("[role='progressbar']");
+      expect(progressbar).toBeTruthy();
+    });
+  });
+  describe("with form context", function () {
+    it("renders inside form", function () {
+      var result = renderWithProviders(/* @__PURE__ */_jsx(Form, {
+        formOptions: {
+          defaultValues: {
+            progress: 0
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */_jsx(Progress, {
+          name: "progress",
+          label: "Progress",
+          value: 50
+        })
+      }));
+      expect(result.findTextElement("Progress")).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=Progress.spec.native.js.map

package/dist/esm/fields/Progress/Progress.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","describe","expect","it","renderWithProviders","Form","Progress","result","label","name","value","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","helperText","skeleton","progressbar","toBeNull"],"sources":["../../../../src/fields/Progress/Progress.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAU,QAAQ,mBAAU;AACrC,SAASC,QAAA,EAAAC,MAAA,EAAAC,EAAA,QAA2B;AACpC,SAASC,mBAAY;AACrB,SAASC,IAAA,oCAAgB;AAKgB,SAAAC,QAAA;AAHzCL,QAAA,CAAS,YAAY,YAAM;EACzBA,QAAA,CAAS,wBAAwB,YAAM;IACrCE,EAAA,CAAG,sBAAsB,YAAM;MAC7B,IAAAI,MAAM,GAAAH,mBAAS,gBAAoBJ,IAAA,CAAAM,QAAC;QACpCE,KAAO,WAAO;QACfC,IAAA;QAEEC,KAAA;MACD;MAAeR,MACb,CAAAK,MAAA,CAAAI,eAAC,UAAS,EAAM,CAAAC,WAAW;IAA8B,EAC3D;IACAT,EAAA,uCAA+B,cAAqB;MACpD,IAAAI,MAAO,GAAAH,mBAAoB,gBAAaJ,IAAA,CAAAM,QAAA;QACzCE,KAAA;QAEEC,IAAA;QACDC,KAAM;QACJG,QAAA;MACF;MACA,IAAAL,KAAO,GAAAD,MAAO,CAAAO,SAAA,CAAAC,aAAgB,QAAiB;MAChDb,MAAA,CAAAM,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAAQ,WAAA,EAAAC,SAAA;IAED;IACEd,EAAA,2BAAe,cAAoB;MACnC,IAAAI,MAAM,GAAAH,mBAAqB,gBAAUJ,IAAc,CAAAM,QAAA;QACnDE,KAAO,YAAW;QACnBC,IAAA;QAEEC,KAAA;QACDQ,UAAM;MACN;MACAhB,MAAA,CAAOK,MAAA,CAAAI,eAAa,eAAW,GAAAC,WAAA;IACjC,CAAC;IACFT,EAAA;MAED,IAAAI,MAAS,GAAAH,mBAA2B,gBAAAJ,IAAA,CAAAM,QAAA;QAC/BE,KAAA;QACDC,IAAM;QACJC,KAAA;QAGFS,QAAA;MACA;MACD,IAAAC,WAAA,GAAAb,MAAA,CAAAO,SAAA,CAAAC,aAAA;MACFb,MAAA,CAAAkB,WAAA,EAAAC,QAAA;IACF","ignoreList":[]}

package/dist/esm/fields/Progress/Progress.stories.mjs

@@ -0,0 +1,209 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, Progress as TamaguiProgress, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Progress } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Progress",
+  component: Progress,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    value: {
+      control: {
+        type: "number",
+        min: 0,
+        max: 100
+      },
+      description: "Progress value"
+    },
+    max: {
+      control: "number",
+      description: "Maximum value"
+    }
+  }
+};
+var Progress_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          completion: 70
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(Progress, {
+            label: "Profile completion",
+            name: "completion",
+            helperText: "Read from form state"
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Upload Progress",
+    helperText: "Uploading file...",
+    value: 65
+  },
+  render: args => /* @__PURE__ */jsx(Progress, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Upload progress",
+    helperText: "Current upload status",
+    value: 67,
+    max: 100
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Progress",
+    value: 50,
+    max: 100,
+    helperText: "This progress bar is read-only"
+  }
+};
+const WithError = {
+  args: {
+    label: "Required Progress",
+    error: "Progress must reach 100%",
+    required: true,
+    value: 30,
+    max: 100
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Progress, {
+      label: "Small",
+      size: "$2",
+      value: 40,
+      max: 100
+    }), /* @__PURE__ */jsx(Progress, {
+      label: "Medium (default)",
+      size: "$3",
+      value: 60,
+      max: 100
+    }), /* @__PURE__ */jsx(Progress, {
+      label: "Large",
+      size: "$4",
+      value: 80,
+      max: 100
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState(25);
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(Progress, {
+          label: "Task progress",
+          value,
+          max: 100,
+          helperText: `${value}% complete`
+        }), /* @__PURE__ */jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */jsx(Button, {
+            onPress: () => {
+              const next = Math.max(0, value - 10);
+              setValue(next);
+              action("onProgressChange")(next);
+            },
+            children: "-10"
+          }), /* @__PURE__ */jsx(Button, {
+            onPress: () => {
+              const next = Math.min(100, value + 10);
+              setValue(next);
+              action("onProgressChange")(next);
+            },
+            children: "+10"
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const Comparison = {
+  render: () => /* @__PURE__ */jsxs(XStack, {
+    gap: "$6",
+    alignItems: "flex-start",
+    padding: "$4",
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$3",
+      width: 300,
+      children: [/* @__PURE__ */jsx(Paragraph, {
+        size: "$2",
+        color: "$placeholderColor",
+        children: "Custom Progress"
+      }), /* @__PURE__ */jsx(Progress, {
+        value: 67,
+        max: 100
+      })]
+    }), /* @__PURE__ */jsxs(YStack, {
+      gap: "$3",
+      width: 300,
+      children: [/* @__PURE__ */jsx(Paragraph, {
+        size: "$2",
+        color: "$placeholderColor",
+        children: "Tamagui Progress"
+      }), /* @__PURE__ */jsx(TamaguiProgress, {
+        value: 67,
+        max: 100,
+        children: /* @__PURE__ */jsx(TamaguiProgress.Indicator, {})
+      })]
+    })]
+  })
+};
+export { Basic, Comparison, Disabled, Interactive, Main, Sizes, Standalone, WithError, Progress_stories_default as default };
+//# sourceMappingURL=Progress.stories.mjs.map

package/dist/esm/fields/Progress/Progress.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Paragraph","Progress","TamaguiProgress","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","status","type","argTypes","label","control","description","helperText","error","required","size","options","value","min","max","Progress_stories_default","Main","name","render","FormExample","form","defaultValues","completion","onSubmit","children","gap","Standalone","args","Basic","Disabled","WithError","Sizes","maxWidth","Interactive","InteractiveExample","setValue","onPress","next","Math","Comparison","alignItems","padding","width","color","Indicator"],"sources":["../../../../src/fields/Progress/Progress.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/Progress/Progress.stories.native.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, Progress as TamaguiProgress, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Progress } from "./index.native.js";
+var meta = {
+  title: "Forms/Progress",
+  component: Progress,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    value: {
+      control: {
+        type: "number",
+        min: 0,
+        max: 100
+      },
+      description: "Progress value"
+    },
+    max: {
+      control: "number",
+      description: "Maximum value"
+    }
+  }
+};
+var Progress_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          completion: 70
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Progress, {
+            label: "Profile completion",
+            name: "completion",
+            helperText: "Read from form state"
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Upload Progress",
+    helperText: "Uploading file...",
+    value: 65
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(Progress, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Upload progress",
+    helperText: "Current upload status",
+    value: 67,
+    max: 100
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Progress",
+    value: 50,
+    max: 100,
+    helperText: "This progress bar is read-only"
+  }
+};
+var WithError = {
+  args: {
+    label: "Required Progress",
+    error: "Progress must reach 100%",
+    required: true,
+    value: 30,
+    max: 100
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Progress, {
+        label: "Small",
+        size: "$2",
+        value: 40,
+        max: 100
+      }), /* @__PURE__ */_jsx(Progress, {
+        label: "Medium (default)",
+        size: "$3",
+        value: 60,
+        max: 100
+      }), /* @__PURE__ */_jsx(Progress, {
+        label: "Large",
+        size: "$4",
+        value: 80,
+        max: 100
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render4() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = useState(25);
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(Progress, {
+          label: "Task progress",
+          value,
+          max: 100,
+          helperText: `${value}% complete`
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(Button, {
+            onPress: function onPress() {
+              var next = Math.max(0, value - 10);
+              setValue(next);
+              action("onProgressChange")(next);
+            },
+            children: "-10"
+          }), /* @__PURE__ */_jsx(Button, {
+            onPress: function onPress() {
+              var next = Math.min(100, value + 10);
+              setValue(next);
+              action("onProgressChange")(next);
+            },
+            children: "+10"
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var Comparison = {
+  render: function render5() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$6",
+      alignItems: "flex-start",
+      padding: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        gap: "$3",
+        width: 300,
+        children: [/* @__PURE__ */_jsx(Paragraph, {
+          size: "$2",
+          color: "$placeholderColor",
+          children: "Custom Progress"
+        }), /* @__PURE__ */_jsx(Progress, {
+          value: 67,
+          max: 100
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        gap: "$3",
+        width: 300,
+        children: [/* @__PURE__ */_jsx(Paragraph, {
+          size: "$2",
+          color: "$placeholderColor",
+          children: "Tamagui Progress"
+        }), /* @__PURE__ */_jsx(TamaguiProgress, {
+          value: 67,
+          max: 100,
+          children: /* @__PURE__ */_jsx(TamaguiProgress.Indicator, {})
+        })]
+      })]
+    });
+  }
+};
+export { Basic, Comparison, Disabled, Interactive, Main, Sizes, Standalone, WithError, Progress_stories_default as default };
+//# sourceMappingURL=Progress.stories.native.js.map

package/dist/esm/fields/Progress/Progress.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Paragraph","Progress","TamaguiProgress","XStack","YStack","Button","Form","meta","title","component","parameters","status","type","argTypes","label","control","description","helperText","error","required","size","options","value","min","max","Progress_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","completion","onSubmit","param","children","gap","Standalone","args","render2","Basic","Disabled","WithError","Sizes","render3","maxWidth"],"sources":["../../../../src/fields/Progress/Progress.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,129 @@
+import { Progress as TamaguiProgress, View, XStack, styled } from "tamagui";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { formControlColors } from "../../shared/colorRamps.mjs";
+import { getElevationWrapperProps, getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+const ProgressFrame = styled(TamaguiProgress, {
+  backgroundColor: formControlColors.background,
+  borderWidth: 0,
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    }
+  }
+});
+const ProgressIndicator = styled(TamaguiProgress.Indicator, {
+  backgroundColor: formControlColors.border
+});
+function Progress({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  max = 100,
+  onBlur,
+  progressProps,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    elevation,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  if (skeleton) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 6
+      })
+    });
+  }
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const renderProgress = (progressValue, blurHandler, hasError) => {
+    const progressElement = /* @__PURE__ */jsx(ProgressFrame, {
+      width: "100%",
+      size: knobProps.sizeToken,
+      borderRadius: knobProps.borderRadius.borderRadius,
+      outlined: knobProps.outlined,
+      ...progressProps,
+      id,
+      value: progressValue,
+      max,
+      ...(blurHandler ? {
+        onBlur: blurHandler
+      } : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      children: /* @__PURE__ */jsx(ProgressIndicator, {})
+    });
+    return /* @__PURE__ */jsx(XStack, {
+      height: size || knobProps.sizeToken,
+      alignItems: "center",
+      width: "100%",
+      children: elevationWrapperProps.elevation ? /* @__PURE__ */jsx(View, {
+        ...elevationWrapperProps,
+        borderRadius: knobProps.borderRadius.borderRadius,
+        width: "100%",
+        children: progressElement
+      }) : progressElement
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      children: renderProgress(value ?? defaultValue ?? 0, void 0, !!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: renderProgress(field.state.value ?? 0, mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+export { Progress };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Progress","TamaguiProgress","View","XStack","styled","Field","FieldLayout","Skeleton","formControlColors","getElevationWrapperProps","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","jsx","ProgressFrame","backgroundColor","background","borderWidth","variants","outlined","true","ProgressIndicator","Indicator","border","name","form","formProp","validators","label","labelProps","helperText","error","required","size","id","idProp","value","defaultValue","max","onBlur","progressProps","skeleton","compact","resolvedForm","knobProps","elevation","resolvedValidators","children","variant","width","height","elevationWrapperProps","renderProgress","progressValue","blurHandler","hasError","progressElement","sizeToken","borderRadius","alignItems","field","resolvedError","state"],"sources":["../../../../src/fields/Progress/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}