@lattice-php/lattice 0.9.0 → 0.10.0

package/dist/core/components/fragment.js

@@ -11,7 +11,10 @@ var fragmentSizeHeights = {
 	md: 64,
 	sm: 40,
 	xl: 384,
-	xs: 32
+	xs: 32,
+	"2xl": 448,
+	"3xl": 512,
+	"4xl": 576
 };
 var FragmentComponent = ({ node }) => {
 	const endpoint = node.props.endpoint ?? "";

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

@@ -1 +1 @@
-{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(toNodes(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,SAAQ,MAFD,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAEjD,MAAM,CAAC;GACpC,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}
+{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n  \"2xl\": 448,\n  \"3xl\": 512,\n  \"4xl\": 576,\n} as const;\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(toNodes(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,SAAQ,MAFD,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAEjD,MAAM,CAAC;GACpC,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}

package/dist/core/components/icon.js

@@ -7,7 +7,10 @@ var sizeClass = {
 	sm: "size-lt-icon-sm",
 	md: "size-lt-icon-md",
 	lg: "size-lt-icon-lg",
-	xl: "size-lt-icon-xl"
+	xl: "size-lt-icon-xl",
+	"2xl": "size-lt-icon-2xl",
+	"3xl": "size-lt-icon-3xl",
+	"4xl": "size-lt-icon-4xl"
 };
 var colorClass = {
 	default: "text-lt-fg",

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../resources/js/core/components/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst sizeClass: Record<Size, string> = {\n  xs: \"size-lt-icon-xs\",\n  sm: \"size-lt-icon-sm\",\n  md: \"size-lt-icon-md\",\n  lg: \"size-lt-icon-lg\",\n  xl: \"size-lt-icon-xl\",\n};\n\nconst colorClass: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n\n  return (\n    <IconRenderer\n      icon={name}\n      className={cn(sizeClass[size], color ? colorClass[color] : undefined, className)}\n    />\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;AAKA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CAErD,OACE,oBAAC,cAAD;EACE,MAAM;EACN,WAAW,GAAG,UAAU,OAAO,QAAQ,WAAW,SAAS,KAAA,GAAW,SAAS;CAChF,CAAA;AAEL"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../resources/js/core/components/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst sizeClass: Record<Size, string> = {\n  xs: \"size-lt-icon-xs\",\n  sm: \"size-lt-icon-sm\",\n  md: \"size-lt-icon-md\",\n  lg: \"size-lt-icon-lg\",\n  xl: \"size-lt-icon-xl\",\n  \"2xl\": \"size-lt-icon-2xl\",\n  \"3xl\": \"size-lt-icon-3xl\",\n  \"4xl\": \"size-lt-icon-4xl\",\n};\n\nconst colorClass: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n\n  return (\n    <IconRenderer\n      icon={name}\n      className={cn(sizeClass[size], color ? colorClass[color] : undefined, className)}\n    />\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;AAKA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CAErD,OACE,oBAAC,cAAD;EACE,MAAM;EACN,WAAW,GAAG,UAAU,OAAO,QAAQ,WAAW,SAAS,KAAA,GAAW,SAAS;CAChF,CAAA;AAEL"}

package/dist/core/components/text.js

@@ -19,7 +19,10 @@ var textSizes = {
 	sm: "text-sm leading-6",
 	md: "text-base leading-7",
 	lg: "text-lg leading-8",
-	xl: "text-xl leading-8"
+	xl: "text-xl leading-8",
+	"2xl": "text-2xl leading-9",
+	"3xl": "text-3xl leading-10",
+	"4xl": "text-4xl leading-none"
 };
 var TextComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx("p", {

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../resources/js/core/components/text.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst textColors: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst textSizes: Record<Size, string> = {\n  xs: \"text-xs leading-5\",\n  sm: \"text-sm leading-6\",\n  md: \"text-base leading-7\",\n  lg: \"text-lg leading-8\",\n  xl: \"text-xl leading-8\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n\n  return (\n    <p\n      className={cn(\n        \"m-0\",\n        \"max-w-2xl\",\n        textAlignments[align] ?? textAlignments.left,\n        textColors[node.props.color],\n        textSizes[node.props.size],\n      )}\n    >\n      {node.props.text}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,OACA,aACA,eAPQ,KAAK,MAAM,SAAS,WAOH,eAAe,MACxC,WAAW,KAAK,MAAM,QACtB,UAAU,KAAK,MAAM,KACvB;YAEC,KAAK,MAAM;CACX,CAAA;AAEP"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../resources/js/core/components/text.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst textColors: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst textSizes: Record<Size, string> = {\n  xs: \"text-xs leading-5\",\n  sm: \"text-sm leading-6\",\n  md: \"text-base leading-7\",\n  lg: \"text-lg leading-8\",\n  xl: \"text-xl leading-8\",\n  \"2xl\": \"text-2xl leading-9\",\n  \"3xl\": \"text-3xl leading-10\",\n  \"4xl\": \"text-4xl leading-none\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = node.props.align ?? \"left\";\n\n  return (\n    <p\n      className={cn(\n        \"m-0\",\n        \"max-w-2xl\",\n        textAlignments[align] ?? textAlignments.left,\n        textColors[node.props.color],\n        textSizes[node.props.size],\n      )}\n    >\n      {node.props.text}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;AAIA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,OACA,aACA,eAPQ,KAAK,MAAM,SAAS,WAOH,eAAe,MACxC,WAAW,KAAK,MAAM,QACtB,UAAU,KAAK,MAAM,KACvB;YAEC,KAAK,MAAM;CACX,CAAA;AAEP"}

package/dist/form/components/fields/toggle.d.ts

@@ -0,0 +1,2 @@
+import { RendererComponent } from '../../../core/types';
+export declare const ToggleComponent: RendererComponent<"field.toggle">;

package/dist/form/components/fields/toggle.js

@@ -0,0 +1,65 @@
+import { cn } from "../../../lib/utils.js";
+import { testIdentity } from "../../../core/test-id.js";
+import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValue } from "../values.js";
+import { toBoolean } from "../conditions.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { useFieldCommit } from "../use-field-commit.js";
+import { useSeedDefault } from "../use-seed-default.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/toggle.tsx
+var ToggleComponent = ({ node }) => {
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const props = node.props;
+	const localName = props.name;
+	const scope = useFieldScope();
+	const name = scope ? scope.scopedName(localName) : localName;
+	const errorKey = scope ? scope.errorKey(localName) : localName;
+	const globalValue = useFormValue(localName);
+	const storedValue = scope ? scope.getValue(localName) : globalValue;
+	const defaultChecked = toBoolean(props.value);
+	const checked = storedValue !== void 0 ? toBoolean(storedValue) : defaultChecked;
+	const locked = readOnly || disabled;
+	const { errors } = useFormContext();
+	const { commit } = useFieldCommit();
+	useSeedDefault(localName, defaultChecked);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+		error: errors[errorKey],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name,
+		required,
+		children: [/* @__PURE__ */ jsx("input", {
+			disabled: locked,
+			name,
+			type: "hidden",
+			value: checked ? "1" : "0"
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-checked": checked,
+			"aria-label": props.label ?? localName,
+			autoFocus: props.autoFocus ?? false,
+			className: cn("inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[3px] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-lt-primary"),
+			"data-state": checked ? "checked" : "unchecked",
+			"data-test": testIdentity(localName),
+			disabled: locked,
+			id: name,
+			name,
+			onClick: () => commit(localName, !checked),
+			role: "switch",
+			tabIndex: props.tabIndex ?? void 0,
+			type: "button",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+				"data-state": checked ? "checked" : "unchecked"
+			})
+		})]
+	});
+};
+//#endregion
+export { ToggleComponent };
+
+//# sourceMappingURL=toggle.js.map

package/dist/form/components/fields/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":[],"sources":["../../../../resources/js/form/components/fields/toggle.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { toBoolean } from \"../conditions\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useSeedDefault } from \"../use-seed-default\";\nimport { useFormValue } from \"../values\";\n\nexport const ToggleComponent: RendererComponent<\"field.toggle\"> = ({ node }) => {\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const props = node.props;\n  const localName = props.name;\n  const scope = useFieldScope();\n  const name = scope ? scope.scopedName(localName) : localName;\n  const errorKey = scope ? scope.errorKey(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const defaultChecked = toBoolean(props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n  const locked = readOnly || disabled;\n  const { errors } = useFormContext();\n  const { commit } = useFieldCommit();\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input disabled={locked} name={name} type=\"hidden\" value={checked ? \"1\" : \"0\"} />\n      <button\n        aria-checked={checked}\n        aria-label={props.label ?? localName}\n        autoFocus={props.autoFocus ?? false}\n        className={cn(\n          \"inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[3px] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-lt-primary\",\n        )}\n        data-state={checked ? \"checked\" : \"unchecked\"}\n        data-test={testIdentity(localName)}\n        disabled={locked}\n        id={name}\n        name={name}\n        onClick={() => commit(localName, !checked)}\n        role=\"switch\"\n        tabIndex={props.tabIndex ?? undefined}\n        type=\"button\"\n      >\n        <span\n          className=\"size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n          data-state={checked ? \"checked\" : \"unchecked\"}\n        />\n      </button>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,QAAQ,KAAK;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,MAAM,WAAW,SAAS,IAAI;CACnD,MAAM,WAAW,QAAQ,MAAM,SAAS,SAAS,IAAI;CACrD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,iBAAiB,UAAU,MAAM,KAAK;CAC5C,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CACrE,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,WAAW,eAAe;CAElC,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EAChB;EACI;YANZ,CAQE,oBAAC,SAAD;GAAO,UAAU;GAAc;GAAM,MAAK;GAAS,OAAO,UAAU,MAAM;EAAM,CAAA,GAChF,oBAAC,UAAD;GACE,gBAAc;GACd,cAAY,MAAM,SAAS;GAC3B,WAAW,MAAM,aAAa;GAC9B,WAAW,GACT,uUACF;GACA,cAAY,UAAU,YAAY;GAClC,aAAW,aAAa,SAAS;GACjC,UAAU;GACV,IAAI;GACE;GACN,eAAe,OAAO,WAAW,CAAC,OAAO;GACzC,MAAK;GACL,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;aAEL,oBAAC,QAAD;IACE,WAAU;IACV,cAAY,UAAU,YAAY;GACnC,CAAA;EACK,CAAA,CACM;;AAEpB"}

package/dist/form/components/index.d.ts

@@ -12,3 +12,4 @@ export { RepeaterComponent } from './fields/repeater';
 export { SelectComponent } from './fields/select';
 export { TextareaComponent } from './fields/textarea';
 export { TextInputComponent } from './fields/text-input';
+export { ToggleComponent } from './fields/toggle';

package/dist/form/components/index.js

@@ -12,4 +12,5 @@ import { RepeaterComponent } from "./fields/repeater.js";
 import { SelectComponent } from "./fields/select.js";
 import { TextareaComponent } from "./fields/textarea.js";
 import { TextInputComponent } from "./fields/text-input.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent };
+import { ToggleComponent } from "./fields/toggle.js";
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, ToggleComponent };

package/dist/form/index.js

@@ -26,7 +26,8 @@ var formComponents = createPlugin({
 		}),
 		"field.select": lazyComponent(loadFormComponent("SelectComponent")),
 		"field.textarea": lazyComponent(loadFormComponent("TextareaComponent")),
-		"field.text-input": lazyComponent(loadFormComponent("TextInputComponent"))
+		"field.text-input": lazyComponent(loadFormComponent("TextInputComponent")),
+		"field.toggle": lazyComponent(loadFormComponent("ToggleComponent"))
 	},
 	name: "lattice/form"
 });

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"OtpInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.otp\": lazyComponent(loadFormComponent(\"OtpInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAoBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,aAAa,cAAc,kBAAkB,mBAAmB,CAAC;EACjE,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;CAC3E;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"OtpInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\"\n  | \"ToggleComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.otp\": lazyComponent(loadFormComponent(\"OtpInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n    \"field.toggle\": lazyComponent(loadFormComponent(\"ToggleComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAqBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,aAAa,cAAc,kBAAkB,mBAAmB,CAAC;EACjE,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;CACpE;CACA,MAAM;AACR,CAAC"}

package/dist/lattice.css

@@ -51,6 +51,9 @@
   --lt-icon-md: 1rem;
   --lt-icon-lg: 1.25rem;
   --lt-icon-xl: 1.5rem;
+  --lt-icon-2xl: 2rem;
+  --lt-icon-3xl: 2.5rem;
+  --lt-icon-4xl: 3rem;
   --lt-icon-stroke: 1.5;
 
   /* Control heights — density lever */
@@ -192,6 +195,9 @@
   --spacing-lt-icon-md: var(--lt-icon-md);
   --spacing-lt-icon-lg: var(--lt-icon-lg);
   --spacing-lt-icon-xl: var(--lt-icon-xl);
+  --spacing-lt-icon-2xl: var(--lt-icon-2xl);
+  --spacing-lt-icon-3xl: var(--lt-icon-3xl);
+  --spacing-lt-icon-4xl: var(--lt-icon-4xl);
   --spacing-lt-control-sm: var(--lt-control-h-sm);
   --spacing-lt-control-md: var(--lt-control-h-md);
   --spacing-lt-control-lg: var(--lt-control-h-lg);

package/dist/lib/utils.js

@@ -1,6 +1,16 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 //#region resources/js/lib/utils.ts
+var twMerge = extendTailwindMerge({ extend: { classGroups: { "lt-icon-size": [{ size: [{ lt: [{ icon: [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"4xl"
+] }] }] }] } } });
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../resources/js/lib/utils.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAIA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../resources/js/lib/utils.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// The sprite renderer always applies `size-lt-icon-md` as a baseline, and these\n// custom utilities are invisible to tailwind-merge's stock config, so an explicit\n// `size-lt-icon-*` would otherwise be left to fight the baseline on source order.\n// Registering them as one conflicting group lets the explicit size always win.\nconst twMerge = extendTailwindMerge<\"lt-icon-size\">({\n  extend: {\n    classGroups: {\n      \"lt-icon-size\": [\n        { size: [{ lt: [{ icon: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\", \"4xl\"] }] }] },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAQA,IAAM,UAAU,oBAAoC,EAClD,QAAQ,EACN,aAAa,EACX,gBAAgB,CACd,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAO;CAAO;AAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CACpF,EACF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/types/generated.d.ts

@@ -424,7 +424,7 @@ export type Effect = ({
 } & ToastEffect) | ({
     type: "toggleSidebar";
 } & ToggleSidebarEffect);
-export type FieldType = "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.textarea" | "field.text-input";
+export type FieldType = "field.builder" | "field.checkbox" | "field.choice" | "field.date-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.textarea" | "field.text-input" | "field.toggle";
 export type FileUpload = {
     accept: string | null;
     columnWidth: ColumnWidth;
@@ -552,6 +552,10 @@ export type FormFieldNode = {
     type: "field.textarea";
     key?: string;
     props: Textarea;
+} | {
+    type: "field.toggle";
+    key?: string;
+    props: Toggle;
 };
 export type FormNode = FormFieldNode | {
     type: "form";
@@ -971,7 +975,7 @@ export type Sidebar = {
     collapsible: boolean;
     rememberState: boolean;
 };
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 export type SortDirection = "asc" | "desc";
 export type Stack = {
     align: Align | null;
@@ -1133,6 +1137,31 @@ export type ToastMessage = {
     variant: Variant;
     message: Translatable | string;
 };
+export type Toggle = {
+    autoFocus: boolean;
+    columnWidth: ColumnWidth;
+    conditions: {
+        visible?: Condition[];
+        required?: Condition[];
+        readOnly?: Condition[];
+        disabled?: Condition[];
+    } | null;
+    dependsOnAny: boolean;
+    dependsOnKeys: string[] | null;
+    disabled: boolean;
+    editablePrefill: boolean;
+    helperText: string | null;
+    hidden: boolean;
+    label: string | null;
+    name: string;
+    prefillRefreshOn: string[] | null;
+    prefillResetOn: string[] | null;
+    readOnly: boolean;
+    required: boolean;
+    tabIndex: number | null;
+    tooltip: string | null;
+    value: unknown;
+};
 export type ToggleSidebarEffect = {
     readonly target: string | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-php/lattice",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Server-driven React components for Laravel and Inertia.",
   "license": "MIT",
   "author": "Manuel Christlieb <manuel@christlieb.eu>",
@@ -195,6 +195,7 @@
     "build:lib:watch": "vite build --mode lib --watch",
     "prepack": "npm run build:lib",
     "test": "vitest run",
+    "test:browser": "vitest run --project browser",
     "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
     "type-coverage": "type-coverage --project tsconfig.json --at-least 99.5",
@@ -266,6 +267,7 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.8",
     "@vitest/coverage-v8": "^4.1.8",
     "astro": "7.0.0-beta.3",
     "astro-og-canvas": "^0.11.1",
@@ -289,6 +291,7 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "vitest-browser-react": "^2.2.0"
   }
 }