@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/Duration/Duration.stories.native.js

@@ -0,0 +1,296 @@
+"use strict";
+
+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 Duration_stories_exports = {};
+__export(Duration_stories_exports, {
+  Basic: () => Basic,
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  WithSeconds: () => WithSeconds,
+  default: () => Duration_stories_default
+});
+module.exports = __toCommonJS(Duration_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("@phosphor-icons/react");
+var import_react_form = require("@tanstack/react-form");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/Duration",
+  component: import_index.Duration,
+  parameters: {
+    docs: {
+      description: {
+        component: "A duration picker with scrollable hour/minute/second columns and quick-select presets."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    value: {
+      control: "number",
+      description: "Duration in seconds"
+    },
+    showSeconds: {
+      control: "boolean",
+      description: "Show seconds column"
+    },
+    placeholder: {
+      control: "text"
+    }
+  }
+};
+var Duration_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          workTime: 28800,
+          breakTime: 3600
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        maxWidth: 400,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+            label: "Work Duration",
+            name: "workTime",
+            helperText: "How long did you work?",
+            clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+              size: 16
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+            label: "Break Duration",
+            name: "breakTime",
+            helperText: "Total break time",
+            clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+              size: 16
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Log Time"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Duration",
+    helperText: "How long?",
+    value: 5400,
+    showSeconds: false,
+    placeholder: "Select duration"
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+      ...args,
+      clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+        size: 16
+      })
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Duration",
+    helperText: "Select a time duration",
+    value: 5400,
+    onChange: (0, import_storybook.action)("onChange")
+  },
+  render: function render3(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+      ...args,
+      clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+        size: 16
+      })
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Duration",
+    helperText: "This field is disabled",
+    value: 5400,
+    disabled: true,
+    onChange: (0, import_storybook.action)("onChange")
+  },
+  render: function render4(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+      ...args,
+      clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+        size: 16
+      })
+    });
+  }
+};
+var WithError = {
+  args: {
+    label: "Duration",
+    helperText: "Select a time duration",
+    value: 0,
+    required: true,
+    error: "Duration is required",
+    onChange: (0, import_storybook.action)("onChange")
+  },
+  render: function render5(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+      ...args,
+      clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+        size: 16
+      })
+    });
+  }
+};
+var Sizes = {
+  render: function render6() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "bold",
+        children: "Size $2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+        label: "Small",
+        value: 3600,
+        size: "$2",
+        clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+          size: 16
+        }),
+        onChange: (0, import_storybook.action)("onChange")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "bold",
+        children: "Size $3"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+        label: "Medium",
+        value: 3600,
+        size: "$3",
+        clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+          size: 16
+        }),
+        onChange: (0, import_storybook.action)("onChange")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "bold",
+        children: "Size $4"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+        label: "Large",
+        value: 3600,
+        size: "$4",
+        clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+          size: 16
+        }),
+        onChange: (0, import_storybook.action)("onChange")
+      })]
+    });
+  }
+};
+var WithSeconds = {
+  args: {
+    label: "Precise Duration",
+    helperText: "Includes seconds",
+    value: 3661,
+    showSeconds: true,
+    onChange: (0, import_storybook.action)("onChange")
+  },
+  render: function render7(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+      ...args,
+      clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+        size: 16
+      })
+    });
+  }
+};
+var Interactive = {
+  render: function render8() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = (0, import_react2.useState)(5400);
+      var h = Math.floor(value / 3600);
+      var m = Math.floor(value % 3600 / 60);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 300,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+          label: "Session Length",
+          helperText: `${h}h ${m}m selected`,
+          value,
+          onChange: function onChange(v) {
+            setValue(v);
+            (0, import_storybook.action)("onChange")(v);
+          },
+          clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+            size: 16
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Duration, {
+          label: "Disabled",
+          value: 7200,
+          disabled: true,
+          clockIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+            size: 16
+          })
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+//# sourceMappingURL=Duration.stories.native.js.map

package/dist/jsx/fields/Duration/Duration.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Duration_stories_exports","Basic","Disabled","Interactive","Main","Sizes","Standalone","WithError","WithSeconds","default","Duration_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react","import_react_form","import_react2","import_tamagui","import_Button","import_Form","import_index","meta","title","component","Duration","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","showSeconds","placeholder","render","FormExample","FormExample2","form","useForm","defaultValues","workTime","breakTime","onSubmit","param","action","jsx","Form","maxWidth","children","jsxs","YStack","gap","clockIcon","ClockIcon","Button","args","render2","onChange","render3","render4"],"sources":["../../../../src/fields/Duration/Duration.stories.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AAET,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAiB;AAC1B,IAAAC,gBAAS,GAAAF,MAAe,CAAAG,wBAAA;AACxB,IAAAC,iBAAS,GAAAJ,MAAgB,CAAAK,mBAAA;AACzB,IAAAC,YAAe,GAAAN,MAAA,CAAAO,SAAc,CAAAC,cAAA;AAC7B,IAAAC,QAAS,GAAAA,CAAAC,MAAA,EAAcC,GAAA;EACvB,SAASC,IAAA,IAAAD,GAAY,EACrBZ,SAAS,CAAAW,MAAA,EAAAE,IAAgB;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AA6Cf;AA3CV,IAAAC,WAAoC,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EAClC,IAAAF,IAAO,WAAAA,IAAA,wBAAAA,IAAA;IACP,SAAWG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GACX,KAAAX,YAAY,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACVnB,SAAM,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAAA;EACS,OACXE,EAAA;AACE;AACJ,IACFM,YAAA,GAAAC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAAA,IACFE,wBAAA;AAAAhB,QACA,CAAAgB,wBAAU;EAAAC,KACR,EAAAA,CAAA,KAASA,KAAA;EAAgBC,QACzB,EAAAA,CAAA,KAAcA,QAAA;EAAgBC,WACrB,EAAAA,CAAA,KAAAA,WAAgB;EAAAC,IACzB,EAAAA,CAAA,KAAUA,IAAE;EAAmBC,KAC/B,EAAAA,CAAA,KAAUA,KAAE;EAAmBC,UACvB,EAAAA,CAAA,KAAAA,UAAS;EAAsCC,SAChD,EAAEA,CAAA,KAAAA,SAAS;EAA6CC,WAC/D,EAAAA,CAAA,KAAeA,WAAS;EAA8CC,OACtE,EAAAA,CAAA,KAAaC;AAAkB,EACjC;AACFC,MAAA,CAAAC,OAAA,GAAAf,YAAA,CAAAG,wBAAA;AAEA,IAAOa,kBAAA,GAAAC,OAAQ;AAGR,IAAAC,gBAAoB,GAAAD,OAAA;AAAA,IACzBE,YAAM,GAAAF,OAAA;AAAA,IACNG,iBAAc,GAAAH,OAAA;AACZ,IAAAI,aAAM,GAAAJ,OAAc,QAAM;AACxB,IAAAK,cAAM,GAAOL,OAAQ;AAAA,IAAAM,aACnB,GAAAN,OAAe;AAAA,IAAAO,WACb,GAAAP,OAAU;AAAA,IAAAQ,YACV,GAAAR,OAAW;AAAA,IAAAS,IACb;EAAAC,KAAA,EACA,gBAAiB;EACfC,SAAA,EAAAH,YAAO,CAAAI,QAAiB;EAAAC,UAC1B;IAAAC,IACD;MAEDC,WACE;QAEIJ,SAAA;MAAA;IAAC;EAAA;EACOK,QAAA,EACN;IAAKC,KAAA;MACMC,OACX;IAAgC;IAAAC,UAClC;MAAAD,OACA;IAAA;IAACE,KAAA;MAAAF,OACC;IAAM;IACDG,QACL;MAAWH,OACX;IAAgC;IAAAI,QAClC;MAAAJ,OACA;IAAgC;IAIxCK,IAAA;MACAL,OAAO;MACTM,OAAA,GACF,MAEa,MACL;IAEJ;IACAvC,KAAA,EAAO;MACPiC,OAAA,UAAa;MACbH,WAAa;IACf;IACAU,WAAS;MACXP,OAAA;MAEaH,WAAe;IAC1B;IACEW,WAAO;MACPR,OAAA;IACA;EAAO;AACoB;AAC7B,IACAtB,wBAAkB,GAAAa,IAAA;AACpB,IAAAnB,IAAA;EAEOjB,IAAM;EACXsD,MAAM,WAAAA,OAAA;IACJ,IAAAC,WAAO,YAAAC,aAAA;MACP,IAAAC,IAAA,GAAY,IAAA3B,iBAAA,CAAA4B,OAAA;QACZC,aAAO;UACPC,QAAU;UACVC,SAAU,EAAO;QACnB;QACAC,QAAS,iBAASA,QAACA,CAAAC,KAAA;UACrB;YAAAnD;UAAA,IAAAmD,KAAA;UAEa,IAAAnC,gBAAmB,CAAAoC,MAAA,cAAApD,KAAA;QACxB;MACJ;MACA,sBAAY,IAAAc,kBAAA,CAAAuC,GAAA,EAAA/B,WAAA,CAAAgC,IAAA;QACZT,IAAO;QACPU,QAAU;QACVC,QAAO,qBAAA1C,kBAAA,CAAA2C,IAAA,EAAArC,cAAA,CAAAsC,MAAA;UACPC,GAAA,EAAU;UACZH,QAAA,GACS,eAAS,IAAA1C,kBAAC,CAAAuC,GAAU,EAAG9B,YAAM,CAAAI,QAAW;YACnDK,KAAA;YAE4B5C,IAAA;YAClB8C,UACN,0BAAQ;YACN0B,SAAA,EAAC,eAAK,IAAW9C,kBAAO,CAAAuC,GAAA,EAAApC,YAAO,CAAA4C,SAAA;cAC/BvB,IAAA;YAAC;UAAA,IACC,eAAM,IAAAxB,kBAAA,CAAAuC,GAAA,EAAA9B,YAAA,CAAAI,QAAA;YACNK,KAAO;YACF5C,IAAA;YACL8C,UAAW,oBAAC;YACZ0B,SAAU,EAAO,eAAU,IAAA9C,kBAAA,CAAAuC,GAAA,EAAApC,YAAA,CAAA4C,SAAA;cAAAvB,IAAA;YAC7B;UACA,IACA,mBAAAxB,kBAAA,CAAAuC,GAAA,EAAAhC,aAAA,CAAAyC,MAAA;YAACV,MAAA;YAAAI,QAAA;UACC;QAEA;MAAK,EACL;IAAgC;IACL,0BAAA1C,kBAAA,CAAAuC,GAAA,EAAAV,WAAA;EAAA;AAC7B;AAC+B,IAC/BpC,UAAA;EAAAwD,IAAC;IAAA/B,KAAA;IAAAE,UACC,EAAM;IAAAlC,KACN,MAAO;IAAAwC,WACF;IAAAC,WACL;EAAgC;EACLC,MAAA,WAAAsB,QAAAD,IAAA;IAC7B,0BAAAjD,kBAAA,CAAAuC,GAAA,EAAA9B,YAAA,CAAAI,QAAA;MACF,GAAAoC,IAAA;MAEJH,SAAA,qBAAA9C,kBAAA,CAAAuC,GAAA,EAAApC,YAAA,CAAA4C,SAAA;QAEavB,IAAA;MACX;IACE;EAAO;AACK;AACL,IACPpC,KAAA;EAAa6D,IACb;IACF/B,KAAA;IACAE,UAAS,0BAAU;IACrBlC,KAAA;IAEOiE,QAAM,MAAAjD,gBAAqB,CAAAoC,MAAA;EAChC;EACEV,MAAA,EAAM,SAAAwB,QAAAH,IAAqB;IACzB,sBAAc,CAAQ,GAAAjD,kBAAiB,CAAAuC,GAAA,EAAA9B,YAAA,CAAAI,QAAA;MACvC,GAAAoC,IAAM;MACNH,SAAM,EAAI,eAAY,EAAQ,EAAA9C,kBAAU,CAAAuC,GAAA,EAAApC,YAAA,CAAA4C,SAAA;QACxCvB,IAAA,EACE;MACE;IAAA;EAAC;AAAA;AACO,IAAAnC,QACN;EAAsB4D,IAAA;IACtB/B,KAAA,YACA;IACEE,UAAA,0BAAU;IACVlC,KAAA;IAAoBqC,QACtB;IAAA4B,QACA,MAAAjD,gBAAW,CAAAoC,MAAA,EAAC;EAAoB;EAAAV,MAClC,WAAAyB,QAAAJ,IAAA;IAAA,OACA,gBAAC,GAAAjD,kBAAe,CAAAuC,GAAA,EAAA9B,YAAkB,CAAAI,QAAM;MAA6C,GACvFoC,IAAA;MAEJH,SAAA,qBAAA9C,kBAAA,CAAAuC,GAAA,EAAApC,YAAA,CAAA4C,SAAA;QACAvB,IAAO;MACT;IACF","ignoreList":[]}

package/dist/jsx/fields/Duration/index.mjs

@@ -0,0 +1,259 @@
+import { useCallback, useMemo, useState } from "react";
+import { XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { FloatingPanel } from "../../FloatingPanel/index.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
+import { formCommonColors } from "../../shared/colorRamps.mjs";
+import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn.mjs";
+import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function secondsToHms(totalSeconds) {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  return {
+    hours,
+    minutes,
+    seconds
+  };
+}
+function hmsToSeconds(hours, minutes, seconds) {
+  return hours * 3600 + minutes * 60 + seconds;
+}
+function formatDuration(totalSeconds, showSeconds) {
+  const {
+    hours,
+    minutes,
+    seconds
+  } = secondsToHms(totalSeconds);
+  if (showSeconds) {
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+  }
+  return `${String(hours).padStart(2, "0")}h ${String(minutes).padStart(2, "0")}m`;
+}
+const hourValues = generateRange(0, 23);
+const minuteValues = generateRange(0, 59);
+const secondValues = generateRange(0, 59);
+const defaultPresets = [{
+  label: "15m",
+  seconds: 900
+}, {
+  label: "30m",
+  seconds: 1800
+}, {
+  label: "1h",
+  seconds: 3600
+}, {
+  label: "2h",
+  seconds: 7200
+}, {
+  label: "4h",
+  seconds: 14400
+}, {
+  label: "8h",
+  seconds: 28800
+}];
+function DurationPopoverContent({
+  value,
+  onChange,
+  knobProps,
+  showSeconds,
+  presets
+}) {
+  const {
+    hours,
+    minutes,
+    seconds
+  } = secondsToHms(value);
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    children: [/* @__PURE__ */jsxs(XStack, {
+      gap: "$2",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      children: [/* @__PURE__ */jsx(TimeColumn, {
+        label: "Hours",
+        values: hourValues,
+        selected: hours,
+        onChange: newHours => onChange(hmsToSeconds(newHours, minutes, seconds)),
+        knobProps
+      }), /* @__PURE__ */jsx(TimeColumnSeparator, {
+        knobProps
+      }), /* @__PURE__ */jsx(TimeColumn, {
+        label: "Min",
+        values: minuteValues,
+        selected: minutes,
+        onChange: newMinutes => onChange(hmsToSeconds(hours, newMinutes, seconds)),
+        knobProps
+      }), showSeconds && /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(TimeColumnSeparator, {
+          knobProps
+        }), /* @__PURE__ */jsx(TimeColumn, {
+          label: "Sec",
+          values: secondValues,
+          selected: seconds,
+          onChange: newSeconds => onChange(hmsToSeconds(hours, minutes, newSeconds)),
+          knobProps
+        })]
+      })]
+    }), presets.length > 0 && /* @__PURE__ */jsx(XStack, {
+      gap: "$1",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      children: presets.map(preset => /* @__PURE__ */jsx(Button, {
+        size: "$2",
+        onPress: () => onChange(preset.seconds),
+        theme: value === preset.seconds ? "active" : void 0,
+        children: preset.label
+      }, preset.seconds))
+    })]
+  });
+}
+function Duration({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value = 0,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  showSeconds = false,
+  presets = defaultPresets,
+  placeholder = "Select duration",
+  clockIcon,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [open, setOpen] = useState(false);
+  const displayValue = useMemo(() => {
+    if (!value && value !== 0) return "";
+    return formatDuration(value, showSeconds);
+  }, [value, showSeconds]);
+  const handleChange = useCallback((seconds, fieldChange) => {
+    fieldChange?.(seconds);
+    onChange?.(seconds);
+  }, [onChange]);
+  const renderTrigger = (triggerValue, hasError) => /* @__PURE__ */jsx(InputParts, {
+    size: size || knobProps.sizeToken,
+    children: /* @__PURE__ */jsxs(InputParts.Box, {
+      theme: hasError ? "red" : void 0,
+      ...(disabled ? {
+        opacity: 0.5,
+        pointerEvents: "none"
+      } : void 0),
+      children: [clockIcon && /* @__PURE__ */jsx(InputParts.Section, {
+        children: /* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "leading",
+          children: clockIcon
+        })
+      }), /* @__PURE__ */jsx(InputParts.Area, {
+        readOnly: true,
+        value: triggerValue,
+        placeholder,
+        disabled,
+        color: formCommonColors.text,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0
+      })]
+    })
+  });
+  const panelContent = (currentValue, onValueChange) => /* @__PURE__ */jsx(DurationPopoverContent, {
+    value: currentValue,
+    onChange: onValueChange,
+    knobProps,
+    showSeconds,
+    presets
+  });
+  if (skeleton) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: knobProps.sizeToken
+      })
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: readOnly ? renderTrigger(displayValue, !!error) : /* @__PURE__ */jsx(FloatingPanel, {
+        open,
+        onOpenChange: setOpen,
+        disabled,
+        scrollable: true,
+        sizing: "fill",
+        fitContent: true,
+        trigger: renderTrigger(displayValue, !!error),
+        children: panelContent(value, s => handleChange(s))
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      const fieldValue = field.state.value ?? 0;
+      const fieldDisplay = formatDuration(fieldValue, showSeconds);
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
+        children: readOnly ? renderTrigger(fieldDisplay, !!resolvedError) : /* @__PURE__ */jsx(FloatingPanel, {
+          open,
+          onOpenChange: setOpen,
+          disabled,
+          scrollable: true,
+          sizing: "fill",
+          fitContent: true,
+          trigger: renderTrigger(fieldDisplay, !!resolvedError),
+          children: panelContent(fieldValue, s => handleChange(s, v => field.handleChange(v)))
+        })
+      });
+    }
+  });
+}
+export { Duration };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/fields/Duration/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useState","XStack","YStack","Button","Skeleton","Field","FieldLayout","FloatingPanel","Input","InputParts","formCommonColors","TimeColumn","TimeColumnSeparator","generateRange","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","Fragment","jsx","jsxs","secondsToHms","totalSeconds","hours","Math","floor","minutes","seconds","hmsToSeconds","formatDuration","showSeconds","String","padStart","hourValues","minuteValues","secondValues","defaultPresets","label","DurationPopoverContent","value","onChange","knobProps","presets","gap","children","alignItems","justifyContent","values","selected","newHours","newMinutes","newSeconds","length","flexWrap","map","preset","size","onPress","theme","Duration","name","form","formProp","validators","labelProps","helperText","error","required","id","idProp","defaultValue","onBlur","disabled","readOnly","placeholder","clockIcon","skeleton","compact","resolvedForm","resolvedValidators","open","setOpen","displayValue","handleChange","fieldChange","renderTrigger","triggerValue","hasError","sizeToken","Box","opacity","pointerEvents","Section","Icon","adornment","Area","color","text","panelContent","currentValue","onValueChange","variant","width","height","onOpenChange","scrollable","sizing","fitContent","trigger","s","field","resolvedError","fieldValue","state","fieldDisplay","v"],"sources":["../../../../src/fields/Duration/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}