@lattice-php/lattice 0.14.0 → 0.16.0

package/dist/core/components/section.js

@@ -29,10 +29,11 @@ var SectionComponent = ({ children, node }) => {
 	}
 	const isCollapsed = collapsible && collapsed;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm",
+		"data-slot": "section",
+		className: "flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm",
 		"data-lattice-component": identity,
 		children: [Boolean(title || description || headerActions.length > 0 || collapsible) && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-start justify-between gap-4 px-6",
+			className: "flex items-start justify-between gap-4 px-lt-gutter",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-start gap-2",
 				children: [collapsible && /* @__PURE__ */ jsx("button", {
@@ -67,7 +68,7 @@ var SectionComponent = ({ children, node }) => {
 				children: /* @__PURE__ */ jsx(Renderer, { nodes: headerActions })
 			})]
 		}), !isCollapsed && children && /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col gap-6 px-6",
+			className: "flex flex-col gap-6 px-lt-gutter",
 			children
 		})]
 	});

package/dist/core/components/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && (\n                <div className=\"flex items-center\">\n                  <div className=\"font-semibold leading-none\">{title}</div>\n                  <InfoTooltip content={tooltip} />\n                </div>\n              )}\n              {description && (\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-lt-muted-fg\">{description}</div>\n                  {!title && <InfoTooltip content={tooltip} />}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB;YAF1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAOzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA8B;MAAW,CAAA,GACxD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;SAEN,eACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA4B;MAAiB,CAAA,GAC3D,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;OAEJ;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = toNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      data-slot=\"section\"\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={identity}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-lt-gutter\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && (\n                <div className=\"flex items-center\">\n                  <div className=\"font-semibold leading-none\">{title}</div>\n                  <InfoTooltip content={tooltip} />\n                </div>\n              )}\n              {description && (\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-lt-muted-fg\">{description}</div>\n                  {!title && <InfoTooltip content={tooltip} />}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && (\n        <div className=\"flex flex-col gap-6 px-lt-gutter\">{children}</div>\n      )}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;;;AASA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,QAAQ,KAAK,MAAM,aAAa;CACtD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAGnC,OACE,qBAAC,WAAD;EACE,aAAU;EACV,WAAU;EACV,0BAAwB;YAH1B,CAHgB,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAQzE,KACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA8B;MAAW,CAAA,GACxD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;SAEN,eACC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OAAK,WAAU;iBAA4B;MAAiB,CAAA,GAC3D,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;OAEJ;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YACf,oBAAC,OAAD;GAAK,WAAU;GAAoC;EAAc,CAAA,CAE5D;;AAEb"}

package/dist/core/components/stack.js

@@ -54,6 +54,7 @@ var StackComponent = ({ children, node }) => {
 	const float = node.props.float;
 	const isFlex = direction === "row" || justify != null;
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stack",
 		"data-lattice-component": nodeIdentity(node),
 		className: cn(isFlex ? cn("flex", direction === "row" ? "flex-wrap" : "flex-col") : "grid content-start", isFlex ? flexAlignments[align] ?? flexAlignments.stretch : gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full, justify ? justifyClasses[justify] : null, height ? stackHeights[height] : null, float ? floatClasses[float] : null),
 		children

package/dist/core/components/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  auto: \"w-auto\",\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst floatClasses: Record<string, string> = {\n  end: \"ml-auto\",\n  start: \"mr-auto\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const float = node.props.float;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n        float ? floatClasses[float] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,eAAuC;CAC3C,KAAK;CACL,OAAO;AACT;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,MAChC,QAAQ,aAAa,SAAS,IAChC;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  auto: \"w-auto\",\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst floatClasses: Record<string, string> = {\n  end: \"ml-auto\",\n  start: \"mr-auto\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const float = node.props.float;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-slot=\"stack\"\n      data-lattice-component={nodeIdentity(node)}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n        float ? floatClasses[float] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,eAAuC;CAC3C,KAAK;CACL,OAAO;AACT;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,0BAAwB,aAAa,IAAI;EACzC,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,MAChC,QAAQ,aAAa,SAAS,IAChC;EAEC;CACE,CAAA;AAET"}

package/dist/form/components/base/submit-button.js

@@ -20,7 +20,7 @@ function FormSubmitButton({ label, summaryLabel, variant = "default" }) {
 			variant,
 			children: [processing && /* @__PURE__ */ jsx(Spinner, {}), label]
 		}), hasErrors && /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100",
+			className: "pointer-events-none absolute bottom-full left-1/2 z-lt-popover mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100",
 			role: "tooltip",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-1 font-medium text-lt-fg",

package/dist/form/components/base/submit-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}
+{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-lt-popover mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}

package/dist/form/components/fields/date-picker-control.js

@@ -3,6 +3,8 @@ import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
 import { Button } from "../../../core/components/button.js";
 import { Input } from "../base/input.js";
+import { parseTimeString } from "./time-picker-columns.js";
+import { TimePicker } from "./time-picker.js";
 import { formatDateDisplayValue, formatDateTimeDisplayValue, formatDateTimeValue, formatDateValue, formatTimeInputValue, parseDateDisplayValue, parseDateTimeDisplayValue, parseDateTimeValue, parseDateValue } from "./date-picker-value.js";
 import { createElement, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -48,7 +50,7 @@ function DatePickerControl({ mode, label, name, testId, value, min, max, step, d
 	const submittedValue = mode === "date" ? formatDateValue(selected[0]) : formatDateTimeValue(selected[0], timezone);
 	return /* @__PURE__ */ jsxs("div", {
 		...api.getRootProps(),
-		className: cn("relative", api.open && "z-[var(--lt-z-popover)]"),
+		className: cn("relative", api.open && "z-lt-popover"),
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				type: "hidden",
@@ -96,7 +98,7 @@ function DatePickerControl({ mode, label, name, testId, value, min, max, step, d
 			}),
 			api.open ? /* @__PURE__ */ jsx("div", {
 				...api.getPositionerProps(),
-				className: "absolute z-[var(--lt-z-popover)] mt-2 rounded-lt-sm border border-lt-border bg-lt-popover p-3 text-lt-popover-fg shadow-lt-md",
+				className: "absolute z-lt-popover mt-2 rounded-lt-sm border border-lt-border bg-lt-popover p-3 text-lt-popover-fg shadow-lt-md",
 				children: /* @__PURE__ */ jsxs("div", {
 					...api.getContentProps(),
 					className: "grid gap-3",
@@ -166,21 +168,17 @@ function DatePickerControl({ mode, label, name, testId, value, min, max, step, d
 								})))
 							})]
 						}),
-						mode === "date-time" ? /* @__PURE__ */ jsx(Input, {
-							"aria-label": `${label || name} time`,
+						mode === "date-time" ? /* @__PURE__ */ jsx(TimePicker, {
+							value: parseTimeString(formatTimeInputValue(selected[0], timezone)),
+							onChange: (next) => api.setTime({
+								hour: next.hour,
+								minute: next.minute,
+								second: next.second
+							}),
+							step,
 							disabled,
-							onChange: (event) => {
-								const [hour = "0", minute = "0", second = "0"] = event.target.value.split(":");
-								api.setTime({
-									hour: Number(hour),
-									minute: Number(minute),
-									second: Number(second)
-								});
-							},
 							readOnly,
-							step: step ?? void 0,
-							type: "time",
-							value: formatTimeInputValue(selected[0], timezone)
+							testId: `${testId}-time`
 						}) : null
 					]
 				})

package/dist/form/components/fields/date-picker-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker-control.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-picker-control.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport * as datePicker from \"@zag-js/date-picker\";\nimport { normalizeProps, useMachine } from \"@zag-js/react\";\nimport { useId, useMemo } from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Input } from \"../base/input\";\nimport {\n  formatDateDisplayValue,\n  formatDateTimeDisplayValue,\n  formatDateTimeValue,\n  formatDateValue,\n  formatTimeInputValue,\n  parseDateDisplayValue,\n  parseDateTimeDisplayValue,\n  parseDateTimeValue,\n  parseDateValue,\n} from \"./date-picker-value\";\n\nexport type DatePickerControlProps = {\n  mode: \"date\" | \"date-time\";\n  label: string;\n  name: string;\n  testId: string;\n  value: unknown;\n  min?: string | null;\n  max?: string | null;\n  step?: number | null;\n  disabled: boolean;\n  readOnly: boolean;\n  autoFocus?: boolean;\n  tabIndex?: number | null;\n  timezone?: string;\n  onChange: (value: string) => void;\n  onBlur?: () => void;\n};\n\nexport function DatePickerControl({\n  mode,\n  label,\n  name,\n  testId,\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  readOnly,\n  autoFocus = false,\n  tabIndex,\n  timezone = \"UTC\",\n  onChange,\n  onBlur,\n}: DatePickerControlProps) {\n  const id = useId();\n  const { locale } = useLocale();\n  const selected = useMemo(\n    () =>\n      [mode === \"date\" ? parseDateValue(value) : parseDateTimeValue(value, timezone)].filter(\n        Boolean,\n      ) as DateValue[],\n    [mode, timezone, value],\n  );\n  const service = useMachine(datePicker.machine, {\n    id,\n    name,\n    value: selected.length > 0 ? selected : undefined,\n    min: min ? parseDateValue(min) : undefined,\n    max: max ? parseDateValue(max) : undefined,\n    disabled,\n    readOnly,\n    locale,\n    selectionMode: \"single\",\n    timeZone: timezone,\n    closeOnSelect: mode === \"date\",\n    format(date) {\n      return mode === \"date\"\n        ? formatDateDisplayValue(date, locale)\n        : formatDateTimeDisplayValue(date, locale, timezone);\n    },\n    parse(text) {\n      return mode === \"date\"\n        ? parseDateDisplayValue(text, locale)\n        : parseDateTimeDisplayValue(text, locale, timezone);\n    },\n    onValueChange(details) {\n      const next = details.value[0];\n\n      onChange(mode === \"date\" ? formatDateValue(next) : formatDateTimeValue(next, timezone));\n    },\n    onOpenChange(details) {\n      if (!details.open) {\n        onBlur?.();\n      }\n    },\n  });\n  const api = datePicker.connect(service, normalizeProps);\n  const { name: _inputName, onInput, ...inputProps } = api.getInputProps();\n  const submittedValue =\n    mode === \"date\" ? formatDateValue(selected[0]) : formatDateTimeValue(selected[0], timezone);\n\n  return (\n    <div {...api.getRootProps()} className={cn(\"relative\", api.open && \"z-[var(--lt-z-popover)]\")}>\n      <input type=\"hidden\" name={name} value={submittedValue} data-test={`${testId}-value`} />\n      <div {...api.getControlProps()} className=\"flex gap-2\">\n        <Input\n          {...inputProps}\n          aria-label={label}\n          autoFocus={autoFocus}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          onInput={(event) => {\n            onInput?.(event);\n\n            if (mode !== \"date\") {\n              return;\n            }\n\n            const normalized = normalizeDateInputValue(event.currentTarget.value);\n\n            if (!normalized) {\n              return;\n            }\n\n            const next = parseDateValue(normalized);\n\n            if (!next) {\n              return;\n            }\n\n            event.currentTarget.value = normalized;\n            api.setValue([next]);\n            event.currentTarget.value = formatDateDisplayValue(next, locale);\n            onChange(formatDateValue(next));\n          }}\n          readOnly={readOnly}\n          tabIndex={tabIndex ?? undefined}\n        />\n        <Button\n          {...api.getTriggerProps()}\n          aria-label={`Open ${label || name} calendar`}\n          disabled={disabled || readOnly}\n          size=\"icon\"\n          type=\"button\"\n          variant=\"secondary\"\n        >\n          <Icon name=\"calendar\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n      {api.open ? (\n        <div\n          {...api.getPositionerProps()}\n          className=\"absolute z-[var(--lt-z-popover)] mt-2 rounded-lt-sm border border-lt-border bg-lt-popover p-3 text-lt-popover-fg shadow-lt-md\"\n        >\n          <div {...api.getContentProps()} className=\"grid gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <Button {...api.getPrevTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-left\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n              <div {...api.getRangeTextProps()} className=\"text-sm font-medium text-lt-fg\" />\n              <Button {...api.getNextTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-right\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n            <table {...api.getTableProps()} className=\"w-full border-collapse text-sm\">\n              <thead {...api.getTableHeadProps()}>\n                <tr {...api.getTableRowProps()}>\n                  {api.weekDays.map((day) => (\n                    <th\n                      {...api.getTableHeaderProps()}\n                      aria-label={day.long}\n                      key={day.value.toString()}\n                      className=\"size-8 text-center text-xs font-medium text-lt-muted-fg\"\n                    >\n                      {day.narrow}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody {...api.getTableBodyProps()}>\n                {api.weeks.map((week, weekIndex) => (\n                  <tr {...api.getTableRowProps()} key={weekIndex}>\n                    {week.map((day) => {\n                      const state = api.getDayTableCellState({ value: day });\n\n                      return (\n                        <td\n                          {...api.getDayTableCellProps({ value: day })}\n                          key={day.toString()}\n                          className=\"p-0 text-center\"\n                        >\n                          <button\n                            {...api.getDayTableCellTriggerProps({ value: day })}\n                            type=\"button\"\n                            className={cn(\n                              \"size-8 rounded-lt-sm text-sm text-lt-fg hover:bg-lt-muted\",\n                              state.selected && \"bg-lt-primary text-lt-primary-fg\",\n                              state.outsideRange && \"text-lt-muted-fg\",\n                              state.disabled && \"cursor-not-allowed opacity-40\",\n                            )}\n                          >\n                            {day.day}\n                          </button>\n                        </td>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n            {mode === \"date-time\" ? (\n              <Input\n                aria-label={`${label || name} time`}\n                disabled={disabled}\n                onChange={(event) => {\n                  const [hour = \"0\", minute = \"0\", second = \"0\"] = event.target.value.split(\":\");\n\n                  api.setTime({\n                    hour: Number(hour),\n                    minute: Number(minute),\n                    second: Number(second),\n                  });\n                }}\n                readOnly={readOnly}\n                step={step ?? undefined}\n                type=\"time\"\n                value={formatTimeInputValue(selected[0], timezone)}\n              />\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction normalizeDateInputValue(value: string): string | undefined {\n  const compact = value.replace(/\\D/g, \"\");\n\n  if (compact.length !== 8) {\n    return undefined;\n  }\n\n  return `${compact.slice(0, 4)}-${compact.slice(4, 6)}-${compact.slice(6, 8)}`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"date-picker-control.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-picker-control.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport * as datePicker from \"@zag-js/date-picker\";\nimport { normalizeProps, useMachine } from \"@zag-js/react\";\nimport { useId, useMemo } from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Input } from \"../base/input\";\nimport {\n  formatDateDisplayValue,\n  formatDateTimeDisplayValue,\n  formatDateTimeValue,\n  formatDateValue,\n  formatTimeInputValue,\n  parseDateDisplayValue,\n  parseDateTimeDisplayValue,\n  parseDateTimeValue,\n  parseDateValue,\n} from \"./date-picker-value\";\nimport { TimePicker } from \"./time-picker\";\nimport { parseTimeString } from \"./time-picker-columns\";\n\nexport type DatePickerControlProps = {\n  mode: \"date\" | \"date-time\";\n  label: string;\n  name: string;\n  testId: string;\n  value: unknown;\n  min?: string | null;\n  max?: string | null;\n  step?: number | null;\n  disabled: boolean;\n  readOnly: boolean;\n  autoFocus?: boolean;\n  tabIndex?: number | null;\n  timezone?: string;\n  onChange: (value: string) => void;\n  onBlur?: () => void;\n};\n\nexport function DatePickerControl({\n  mode,\n  label,\n  name,\n  testId,\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  readOnly,\n  autoFocus = false,\n  tabIndex,\n  timezone = \"UTC\",\n  onChange,\n  onBlur,\n}: DatePickerControlProps) {\n  const id = useId();\n  const { locale } = useLocale();\n  const selected = useMemo(\n    () =>\n      [mode === \"date\" ? parseDateValue(value) : parseDateTimeValue(value, timezone)].filter(\n        Boolean,\n      ) as DateValue[],\n    [mode, timezone, value],\n  );\n  const service = useMachine(datePicker.machine, {\n    id,\n    name,\n    value: selected.length > 0 ? selected : undefined,\n    min: min ? parseDateValue(min) : undefined,\n    max: max ? parseDateValue(max) : undefined,\n    disabled,\n    readOnly,\n    locale,\n    selectionMode: \"single\",\n    timeZone: timezone,\n    closeOnSelect: mode === \"date\",\n    format(date) {\n      return mode === \"date\"\n        ? formatDateDisplayValue(date, locale)\n        : formatDateTimeDisplayValue(date, locale, timezone);\n    },\n    parse(text) {\n      return mode === \"date\"\n        ? parseDateDisplayValue(text, locale)\n        : parseDateTimeDisplayValue(text, locale, timezone);\n    },\n    onValueChange(details) {\n      const next = details.value[0];\n\n      onChange(mode === \"date\" ? formatDateValue(next) : formatDateTimeValue(next, timezone));\n    },\n    onOpenChange(details) {\n      if (!details.open) {\n        onBlur?.();\n      }\n    },\n  });\n  const api = datePicker.connect(service, normalizeProps);\n  const { name: _inputName, onInput, ...inputProps } = api.getInputProps();\n  const submittedValue =\n    mode === \"date\" ? formatDateValue(selected[0]) : formatDateTimeValue(selected[0], timezone);\n\n  return (\n    <div {...api.getRootProps()} className={cn(\"relative\", api.open && \"z-lt-popover\")}>\n      <input type=\"hidden\" name={name} value={submittedValue} data-test={`${testId}-value`} />\n      <div {...api.getControlProps()} className=\"flex gap-2\">\n        <Input\n          {...inputProps}\n          aria-label={label}\n          autoFocus={autoFocus}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          onInput={(event) => {\n            onInput?.(event);\n\n            if (mode !== \"date\") {\n              return;\n            }\n\n            const normalized = normalizeDateInputValue(event.currentTarget.value);\n\n            if (!normalized) {\n              return;\n            }\n\n            const next = parseDateValue(normalized);\n\n            if (!next) {\n              return;\n            }\n\n            event.currentTarget.value = normalized;\n            api.setValue([next]);\n            event.currentTarget.value = formatDateDisplayValue(next, locale);\n            onChange(formatDateValue(next));\n          }}\n          readOnly={readOnly}\n          tabIndex={tabIndex ?? undefined}\n        />\n        <Button\n          {...api.getTriggerProps()}\n          aria-label={`Open ${label || name} calendar`}\n          disabled={disabled || readOnly}\n          size=\"icon\"\n          type=\"button\"\n          variant=\"secondary\"\n        >\n          <Icon name=\"calendar\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n      {api.open ? (\n        <div\n          {...api.getPositionerProps()}\n          className=\"absolute z-lt-popover mt-2 rounded-lt-sm border border-lt-border bg-lt-popover p-3 text-lt-popover-fg shadow-lt-md\"\n        >\n          <div {...api.getContentProps()} className=\"grid gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <Button {...api.getPrevTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-left\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n              <div {...api.getRangeTextProps()} className=\"text-sm font-medium text-lt-fg\" />\n              <Button {...api.getNextTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-right\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n            <table {...api.getTableProps()} className=\"w-full border-collapse text-sm\">\n              <thead {...api.getTableHeadProps()}>\n                <tr {...api.getTableRowProps()}>\n                  {api.weekDays.map((day) => (\n                    <th\n                      {...api.getTableHeaderProps()}\n                      aria-label={day.long}\n                      key={day.value.toString()}\n                      className=\"size-8 text-center text-xs font-medium text-lt-muted-fg\"\n                    >\n                      {day.narrow}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody {...api.getTableBodyProps()}>\n                {api.weeks.map((week, weekIndex) => (\n                  <tr {...api.getTableRowProps()} key={weekIndex}>\n                    {week.map((day) => {\n                      const state = api.getDayTableCellState({ value: day });\n\n                      return (\n                        <td\n                          {...api.getDayTableCellProps({ value: day })}\n                          key={day.toString()}\n                          className=\"p-0 text-center\"\n                        >\n                          <button\n                            {...api.getDayTableCellTriggerProps({ value: day })}\n                            type=\"button\"\n                            className={cn(\n                              \"size-8 rounded-lt-sm text-sm text-lt-fg hover:bg-lt-muted\",\n                              state.selected && \"bg-lt-primary text-lt-primary-fg\",\n                              state.outsideRange && \"text-lt-muted-fg\",\n                              state.disabled && \"cursor-not-allowed opacity-40\",\n                            )}\n                          >\n                            {day.day}\n                          </button>\n                        </td>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n            {mode === \"date-time\" ? (\n              <TimePicker\n                value={parseTimeString(formatTimeInputValue(selected[0], timezone))}\n                onChange={(next) =>\n                  api.setTime({ hour: next.hour, minute: next.minute, second: next.second })\n                }\n                step={step}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-time`}\n              />\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction normalizeDateInputValue(value: string): string | undefined {\n  const compact = value.replace(/\\D/g, \"\");\n\n  if (compact.length !== 8) {\n    return undefined;\n  }\n\n  return `${compact.slice(0, 4)}-${compact.slice(4, 6)}-${compact.slice(6, 8)}`;\n}\n"],"mappings":"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"}

package/dist/form/components/fields/rich-editor.js

@@ -238,7 +238,7 @@ function EmojiPicker({ editor }) {
 			type: "button",
 			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
+			className: "absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
 			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
 				className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent",
 				onClick: () => {

package/dist/form/components/fields/rich-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/time-input.js

@@ -1,26 +1,65 @@
+import { Icon } from "../../../icons/sprite.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../core/components/popover.js";
+import { Button } from "../../../core/components/button.js";
 import { SimpleField } from "./simple-field.js";
 import { Input } from "../base/input.js";
-import { jsx } from "react/jsx-runtime";
+import { formatTimeValue, parseTimeString, secondsEnabled } from "./time-picker-columns.js";
+import { TimePicker } from "./time-picker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/time-input.tsx
 var TimeInputComponent = ({ node }) => {
 	const props = node.props;
+	const withSeconds = secondsEnabled(props.step);
+	const triggerLabel = props.label ?? props.name;
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
-			autoFocus: props.autoFocus ?? false,
-			"data-test": testId,
-			disabled,
-			id: name,
-			max: props.max || void 0,
-			min: props.min || void 0,
-			name,
-			onChange: (event) => commit(event.target.value),
-			readOnly,
-			step: props.step ?? void 0,
-			tabIndex: props.tabIndex ?? void 0,
-			type: "time",
-			value
+		children: ({ name, testId, value, readOnly, disabled, commit, blur }) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Input, {
+				"aria-label": triggerLabel,
+				autoFocus: props.autoFocus ?? false,
+				"data-test": testId,
+				disabled,
+				id: name,
+				name,
+				onBlur: () => {
+					const parsed = parseTimeString(value);
+					if (parsed) commit(formatTimeValue(parsed, withSeconds));
+					blur();
+				},
+				onChange: (event) => commit(event.target.value),
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				type: "text",
+				value
+			}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": `Open ${triggerLabel} time picker`,
+					disabled: disabled || readOnly,
+					size: "icon",
+					type: "button",
+					variant: "secondary",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "clock",
+						className: "size-lt-icon-md",
+						"aria-hidden": "true"
+					})
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "p-2",
+				children: /* @__PURE__ */ jsx(TimePicker, {
+					value: parseTimeString(value),
+					onChange: (next) => commit(formatTimeValue(next, withSeconds)),
+					step: props.step,
+					min: props.min,
+					max: props.max,
+					disabled,
+					readOnly,
+					testId: `${testId}-picker`
+				})
+			})] })]
 		})
 	});
 };

package/dist/form/components/fields/time-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TimeInputComponent: RendererComponent<\"field.time-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Input\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          readOnly={readOnly}\n          step={props.step ?? undefined}\n          tabIndex={props.tabIndex ?? undefined}\n          type=\"time\"\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,OAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACJ,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GACZ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GACpC;GACV,MAAM,MAAM,QAAQ,KAAA;GACpB,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GACE;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\nimport { TimePicker } from \"./time-picker\";\nimport { formatTimeValue, parseTimeString, secondsEnabled } from \"./time-picker-columns\";\n\nexport const TimeInputComponent: RendererComponent<\"field.time-input\"> = ({ node }) => {\n  const props = node.props;\n  const withSeconds = secondsEnabled(props.step);\n  const triggerLabel = props.label ?? props.name;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit, blur }) => (\n        <div className=\"flex gap-2\">\n          <Input\n            aria-label={triggerLabel}\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            id={name}\n            name={name}\n            onBlur={() => {\n              const parsed = parseTimeString(value);\n\n              if (parsed) {\n                commit(formatTimeValue(parsed, withSeconds));\n              }\n\n              blur();\n            }}\n            onChange={(event) => commit(event.target.value)}\n            readOnly={readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"text\"\n            value={value}\n          />\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                aria-label={`Open ${triggerLabel} time picker`}\n                disabled={disabled || readOnly}\n                size=\"icon\"\n                type=\"button\"\n                variant=\"secondary\"\n              >\n                <Icon name=\"clock\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-2\">\n              <TimePicker\n                value={parseTimeString(value)}\n                onChange={(next) => commit(formatTimeValue(next, withSeconds))}\n                step={props.step}\n                min={props.min}\n                max={props.max}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-picker`}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,eAAe,MAAM,IAAI;CAC7C,MAAM,eAAe,MAAM,SAAS,MAAM;CAE1C,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,cAAY;IACZ,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACV,IAAI;IACE;IACN,cAAc;KACZ,MAAM,SAAS,gBAAgB,KAAK;KAEpC,IAAI,QACF,OAAO,gBAAgB,QAAQ,WAAW,CAAC;KAG7C,KAAK;IACP;IACA,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IACpC;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA,GACD,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;cACd,oBAAC,QAAD;KACE,cAAY,QAAQ,aAAa;KACjC,UAAU,YAAY;KACtB,MAAK;KACL,MAAK;KACL,SAAQ;eAER,oBAAC,MAAD;MAAM,MAAK;MAAQ,WAAU;MAAkB,eAAY;KAAQ,CAAA;IAC7D,CAAA;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;cACxB,oBAAC,YAAD;KACE,OAAO,gBAAgB,KAAK;KAC5B,WAAW,SAAS,OAAO,gBAAgB,MAAM,WAAW,CAAC;KAC7D,MAAM,MAAM;KACZ,KAAK,MAAM;KACX,KAAK,MAAM;KACD;KACA;KACV,QAAQ,GAAG,OAAO;IACnB,CAAA;GACa,CAAA,CACT,EAAA,CAAA,CACN;;CAEI,CAAA;AAEjB"}

package/dist/form/components/fields/time-picker-columns.d.ts

@@ -0,0 +1,23 @@
+export type TimeValue = {
+    hour: number;
+    minute: number;
+    second: number;
+};
+export type TimeColumnOption = {
+    value: number;
+    label: string;
+    disabled: boolean;
+};
+export type TimeColumns = {
+    hours: TimeColumnOption[];
+    minutes: TimeColumnOption[];
+    seconds: TimeColumnOption[] | null;
+};
+export declare function parseTimeString(value: string | null | undefined): TimeValue | null;
+export declare function formatTimeValue(value: TimeValue, withSeconds: boolean): string;
+export declare function secondsEnabled(step: number | null | undefined): boolean;
+export declare function buildTimeColumns(step: number | null | undefined, options?: {
+    min?: string | null;
+    max?: string | null;
+    current?: TimeValue | null;
+}): TimeColumns;

package/dist/form/components/fields/time-picker-columns.js

@@ -0,0 +1,76 @@
+//#region resources/js/form/components/fields/time-picker-columns.ts
+var timePattern = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+function parseTimeString(value) {
+	if (typeof value !== "string") return null;
+	const match = timePattern.exec(value.trim());
+	if (!match) return null;
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	const second = match[3] ? Number(match[3]) : 0;
+	if (hour > 23 || minute > 59 || second > 59) return null;
+	return {
+		hour,
+		minute,
+		second
+	};
+}
+function formatTimeValue(value, withSeconds) {
+	const parts = [pad(value.hour), pad(value.minute)];
+	if (withSeconds) parts.push(pad(value.second));
+	return parts.join(":");
+}
+function secondsEnabled(step) {
+	return step != null && step < 60;
+}
+function buildTimeColumns(step, options = {}) {
+	const { min, max, current } = options;
+	const minBound = toBound(min);
+	const maxBound = toBound(max);
+	const minuteStep = step == null || step < 60 ? 1 : step % 60 === 0 ? step / 60 : 1;
+	return {
+		hours: range(0, 23, 1).map((value) => ({
+			value,
+			label: pad(value),
+			disabled: minBound != null && value < minBound.hour || maxBound != null && value > maxBound.hour
+		})),
+		minutes: withValue(range(0, 59, minuteStep), current?.minute).map((value) => ({
+			value,
+			label: pad(value),
+			disabled: minuteDisabled(value, current, minBound, maxBound)
+		})),
+		seconds: secondsEnabled(step) ? range(0, 59, 1).map((value) => ({
+			value,
+			label: pad(value),
+			disabled: false
+		})) : null
+	};
+}
+function minuteDisabled(minute, current, minBound, maxBound) {
+	if (!current) return false;
+	if (minBound != null && current.hour === minBound.hour && minute < minBound.minute) return true;
+	if (maxBound != null && current.hour === maxBound.hour && minute > maxBound.minute) return true;
+	return false;
+}
+function toBound(value) {
+	const parsed = parseTimeString(value);
+	return parsed ? {
+		hour: parsed.hour,
+		minute: parsed.minute
+	} : null;
+}
+function withValue(values, extra) {
+	if (extra == null || values.includes(extra)) return values;
+	return [...values, extra].sort((left, right) => left - right);
+}
+function range(start, end, step) {
+	const values = [];
+	for (let value = start; value <= end; value += step) values.push(value);
+	return values;
+}
+function pad(value) {
+	return String(value).padStart(2, "0");
+}
+//#endregion
+export { buildTimeColumns, formatTimeValue, parseTimeString, secondsEnabled };
+
+//# sourceMappingURL=time-picker-columns.js.map

package/dist/form/components/fields/time-picker-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-columns.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-picker-columns.ts"],"sourcesContent":["export type TimeValue = { hour: number; minute: number; second: number };\n\nexport type TimeColumnOption = { value: number; label: string; disabled: boolean };\n\nexport type TimeColumns = {\n  hours: TimeColumnOption[];\n  minutes: TimeColumnOption[];\n  seconds: TimeColumnOption[] | null;\n};\n\ntype Bound = { hour: number; minute: number };\n\nconst timePattern = /^(\\d{1,2}):(\\d{2})(?::(\\d{2}))?$/;\n\nexport function parseTimeString(value: string | null | undefined): TimeValue | null {\n  if (typeof value !== \"string\") {\n    return null;\n  }\n\n  const match = timePattern.exec(value.trim());\n\n  if (!match) {\n    return null;\n  }\n\n  const hour = Number(match[1]);\n  const minute = Number(match[2]);\n  const second = match[3] ? Number(match[3]) : 0;\n\n  if (hour > 23 || minute > 59 || second > 59) {\n    return null;\n  }\n\n  return { hour, minute, second };\n}\n\nexport function formatTimeValue(value: TimeValue, withSeconds: boolean): string {\n  const parts = [pad(value.hour), pad(value.minute)];\n\n  if (withSeconds) {\n    parts.push(pad(value.second));\n  }\n\n  return parts.join(\":\");\n}\n\nexport function secondsEnabled(step: number | null | undefined): boolean {\n  return step != null && step < 60;\n}\n\nexport function buildTimeColumns(\n  step: number | null | undefined,\n  options: { min?: string | null; max?: string | null; current?: TimeValue | null } = {},\n): TimeColumns {\n  const { min, max, current } = options;\n  const minBound = toBound(min);\n  const maxBound = toBound(max);\n  const minuteStep = step == null || step < 60 ? 1 : step % 60 === 0 ? step / 60 : 1;\n\n  const hours = range(0, 23, 1).map((value) => ({\n    value,\n    label: pad(value),\n    disabled:\n      (minBound != null && value < minBound.hour) || (maxBound != null && value > maxBound.hour),\n  }));\n\n  const minuteValues = withValue(range(0, 59, minuteStep), current?.minute);\n  const minutes = minuteValues.map((value) => ({\n    value,\n    label: pad(value),\n    disabled: minuteDisabled(value, current, minBound, maxBound),\n  }));\n\n  const seconds = secondsEnabled(step)\n    ? range(0, 59, 1).map((value) => ({ value, label: pad(value), disabled: false }))\n    : null;\n\n  return { hours, minutes, seconds };\n}\n\nfunction minuteDisabled(\n  minute: number,\n  current: TimeValue | null | undefined,\n  minBound: Bound | null,\n  maxBound: Bound | null,\n): boolean {\n  if (!current) {\n    return false;\n  }\n\n  if (minBound != null && current.hour === minBound.hour && minute < minBound.minute) {\n    return true;\n  }\n\n  if (maxBound != null && current.hour === maxBound.hour && minute > maxBound.minute) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction toBound(value: string | null | undefined): Bound | null {\n  const parsed = parseTimeString(value);\n\n  return parsed ? { hour: parsed.hour, minute: parsed.minute } : null;\n}\n\nfunction withValue(values: number[], extra: number | undefined): number[] {\n  if (extra == null || values.includes(extra)) {\n    return values;\n  }\n\n  return [...values, extra].sort((left, right) => left - right);\n}\n\nfunction range(start: number, end: number, step: number): number[] {\n  const values: number[] = [];\n\n  for (let value = start; value <= end; value += step) {\n    values.push(value);\n  }\n\n  return values;\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n"],"mappings":";AAYA,IAAM,cAAc;AAEpB,SAAgB,gBAAgB,OAAoD;CAClF,IAAI,OAAO,UAAU,UACnB,OAAO;CAGT,MAAM,QAAQ,YAAY,KAAK,MAAM,KAAK,CAAC;CAE3C,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,OAAO,OAAO,MAAM,EAAE;CAC5B,MAAM,SAAS,OAAO,MAAM,EAAE;CAC9B,MAAM,SAAS,MAAM,KAAK,OAAO,MAAM,EAAE,IAAI;CAE7C,IAAI,OAAO,MAAM,SAAS,MAAM,SAAS,IACvC,OAAO;CAGT,OAAO;EAAE;EAAM;EAAQ;CAAO;AAChC;AAEA,SAAgB,gBAAgB,OAAkB,aAA8B;CAC9E,MAAM,QAAQ,CAAC,IAAI,MAAM,IAAI,GAAG,IAAI,MAAM,MAAM,CAAC;CAEjD,IAAI,aACF,MAAM,KAAK,IAAI,MAAM,MAAM,CAAC;CAG9B,OAAO,MAAM,KAAK,GAAG;AACvB;AAEA,SAAgB,eAAe,MAA0C;CACvE,OAAO,QAAQ,QAAQ,OAAO;AAChC;AAEA,SAAgB,iBACd,MACA,UAAoF,CAAC,GACxE;CACb,MAAM,EAAE,KAAK,KAAK,YAAY;CAC9B,MAAM,WAAW,QAAQ,GAAG;CAC5B,MAAM,WAAW,QAAQ,GAAG;CAC5B,MAAM,aAAa,QAAQ,QAAQ,OAAO,KAAK,IAAI,OAAO,OAAO,IAAI,OAAO,KAAK;CAoBjF,OAAO;EAAE,OAlBK,MAAM,GAAG,IAAI,CAAC,EAAE,KAAK,WAAW;GAC5C;GACA,OAAO,IAAI,KAAK;GAChB,UACG,YAAY,QAAQ,QAAQ,SAAS,QAAU,YAAY,QAAQ,QAAQ,SAAS;EACzF,EAaS;EAAO,SAXK,UAAU,MAAM,GAAG,IAAI,UAAU,GAAG,SAAS,MAClD,EAAa,KAAK,WAAW;GAC3C;GACA,OAAO,IAAI,KAAK;GAChB,UAAU,eAAe,OAAO,SAAS,UAAU,QAAQ;EAC7D,EAMgB;EAAS,SAJT,eAAe,IAAI,IAC/B,MAAM,GAAG,IAAI,CAAC,EAAE,KAAK,WAAW;GAAE;GAAO,OAAO,IAAI,KAAK;GAAG,UAAU;EAAM,EAAE,IAC9E;CAE6B;AACnC;AAEA,SAAS,eACP,QACA,SACA,UACA,UACS;CACT,IAAI,CAAC,SACH,OAAO;CAGT,IAAI,YAAY,QAAQ,QAAQ,SAAS,SAAS,QAAQ,SAAS,SAAS,QAC1E,OAAO;CAGT,IAAI,YAAY,QAAQ,QAAQ,SAAS,SAAS,QAAQ,SAAS,SAAS,QAC1E,OAAO;CAGT,OAAO;AACT;AAEA,SAAS,QAAQ,OAAgD;CAC/D,MAAM,SAAS,gBAAgB,KAAK;CAEpC,OAAO,SAAS;EAAE,MAAM,OAAO;EAAM,QAAQ,OAAO;CAAO,IAAI;AACjE;AAEA,SAAS,UAAU,QAAkB,OAAqC;CACxE,IAAI,SAAS,QAAQ,OAAO,SAAS,KAAK,GACxC,OAAO;CAGT,OAAO,CAAC,GAAG,QAAQ,KAAK,EAAE,MAAM,MAAM,UAAU,OAAO,KAAK;AAC9D;AAEA,SAAS,MAAM,OAAe,KAAa,MAAwB;CACjE,MAAM,SAAmB,CAAC;CAE1B,KAAK,IAAI,QAAQ,OAAO,SAAS,KAAK,SAAS,MAC7C,OAAO,KAAK,KAAK;CAGnB,OAAO;AACT;AAEA,SAAS,IAAI,OAAuB;CAClC,OAAO,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AACtC"}

package/dist/form/components/fields/time-picker.d.ts

@@ -0,0 +1,17 @@
+import { TimeValue } from './time-picker-columns';
+export type TimePickerProps = {
+    value: TimeValue | null;
+    onChange: (next: TimeValue) => void;
+    step?: number | null;
+    min?: string | null;
+    max?: string | null;
+    disabled?: boolean;
+    readOnly?: boolean;
+    labels?: {
+        hour?: string;
+        minute?: string;
+        second?: string;
+    };
+    testId?: string;
+};
+export declare function TimePicker({ value, onChange, step, min, max, disabled, readOnly, labels, testId, }: TimePickerProps): import("react").JSX.Element;