@lattice-php/lattice 0.2.0 → 0.4.0

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 { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Renderer, useRendererContext } from \"@lattice/lattice/core/renderer\";\nimport type { Node, RendererComponent, Schema } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\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 [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n  const { fallback, missingComponent, registry } = useRendererContext();\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const response = await fetch(endpoint, {\n        headers: {\n          Accept: \"application/json\",\n          ...withRefHeader(componentRef),\n        },\n      });\n      const result = (await response.json()) as FragmentResponse;\n\n      setComponents(getComponents(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  return (\n    <div data-lattice-fragment={node.id}>\n      {processing && components.length === 0 ? (\n        <div className=\"h-16 animate-pulse rounded-lt-sm bg-lt-muted\" />\n      ) : (\n        <Renderer\n          fallback={fallback}\n          missingComponent={missingComponent}\n          nodes={components}\n          registry={registry}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;AAUA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;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,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;CACtE,MAAM,EAAE,UAAU,kBAAkB,aAAa,mBAAmB;CAEpE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GASF,cAAc,eAAc,OAFN,MANC,MAAM,UAAU,EACrC,SAAS;IACP,QAAQ;IACR,GAAG,cAAc,YAAY;GAC/B,EACF,CAAC,GAC8B,KAAK,GAED,MAAM,CAAC;GAC1C,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,OACE,oBAAC,OAAD;EAAK,yBAAuB,KAAK;YAC9B,cAAc,WAAW,WAAW,IACnC,oBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,IAE/D,oBAAC,UAAD;GACY;GACQ;GAClB,OAAO;GACG;EACX,CAAA;CAEA,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 { Node, RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\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\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\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(getComponents(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":";;;;;;;AAWA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;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,eAAc,MAFP,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAE3C,MAAM,CAAC;GAC1C,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/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/heading.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 var HeadingComponent = ({ node }) => {
 	const { text } = node.props;
 	const level = Math.min(Math.max(node.props.level, 1), 6);
-	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-4xl leading-tight sm:text-5xl", level === 2 && "text-2xl", level > 2 && "text-lg");
+	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-2xl font-bold leading-tight", level === 2 && "text-xl", level > 2 && "text-base");
 	switch (level) {
 		case 1: return /* @__PURE__ */ jsx("h1", {
 			className,

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

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text } = node.props;\n  const level = Math.min(Math.max(node.props.level, 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-4xl leading-tight sm:text-5xl\",\n    level === 2 && \"text-2xl\",\n    level > 2 && \"text-lg\",\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{text}</h1>;\n    case 2:\n      return <h2 className={className}>{text}</h2>;\n    case 3:\n      return <h3 className={className}>{text}</h3>;\n    case 4:\n      return <h4 className={className}>{text}</h4>;\n    case 5:\n      return <h5 className={className}>{text}</h5>;\n    default:\n      return <h6 className={className}>{text}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;AAGA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,SAAS,KAAK;CACtB,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,sCACf,UAAU,KAAK,YACf,QAAQ,KAAK,SACf;CAEA,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;CAC/C;AACF"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text } = node.props;\n  const level = Math.min(Math.max(node.props.level, 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-2xl font-bold leading-tight\",\n    level === 2 && \"text-xl\",\n    level > 2 && \"text-base\",\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{text}</h1>;\n    case 2:\n      return <h2 className={className}>{text}</h2>;\n    case 3:\n      return <h3 className={className}>{text}</h3>;\n    case 4:\n      return <h4 className={className}>{text}</h4>;\n    case 5:\n      return <h5 className={className}>{text}</h5>;\n    default:\n      return <h6 className={className}>{text}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;AAGA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,SAAS,KAAK;CACtB,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,oCACf,UAAU,KAAK,WACf,QAAQ,KAAK,WACf;CAEA,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;CAC/C;AACF"}

package/dist/core/components/icon.js

@@ -10,6 +10,7 @@ var sizeClass = {
 	xl: "size-lt-icon-xl"
 };
 var colorClass = {
+	default: "text-lt-fg",
 	muted: "text-lt-muted-fg",
 	primary: "text-lt-primary",
 	success: "text-lt-success",

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/lattice/core/types\";\nimport { IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice/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  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,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};\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"}

package/dist/core/components/index.js

@@ -1,13 +1,16 @@
-import { createPlugin, eagerComponent } from "../registry.js";
+import { createPlugin, eagerComponent, lazyComponent } from "../registry.js";
 import ButtonComponent from "./button.js";
+import { ChatBox } from "../../chat/components/chat-box.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
+import FloatingPanelComponent from "./floating-panel.js";
 import FragmentComponent from "./fragment.js";
 import GridComponent from "./grid.js";
 import HeadingComponent from "./heading.js";
 import IconComponent from "./icon.js";
 import LinkComponent from "./link.js";
 import ModalComponent from "./modal.js";
+import RawBlockComponent from "./raw-block.js";
 import SectionComponent from "./section.js";
 import SegmentedControlComponent from "./segmented-control.js";
 import StackComponent from "./stack.js";
@@ -19,12 +22,16 @@ var coreComponents = createPlugin({
 		badge: eagerComponent(BadgeComponent),
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
+		chart: lazyComponent(() => import("./chart.js")),
+		"chat.box": eagerComponent(ChatBox),
+		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),
 		grid: eagerComponent(GridComponent),
 		heading: eagerComponent(HeadingComponent),
 		icon: eagerComponent(IconComponent),
 		link: eagerComponent(LinkComponent),
 		modal: eagerComponent(ModalComponent),
+		"raw-block": eagerComponent(RawBlockComponent),
 		section: eagerComponent(SectionComponent),
 		"segmented-control": eagerComponent(SegmentedControlComponent),
 		stack: eagerComponent(StackComponent),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice/lattice/core/registry\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport ChatBoxComponent from \"../../chat/components/chat-box\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}

package/dist/core/components/info-tooltip.d.ts

@@ -0,0 +1,3 @@
+export declare function InfoTooltip({ content }: {
+    content?: string | null;
+}): import("react").JSX.Element | null;

package/dist/core/components/info-tooltip.js

@@ -0,0 +1,26 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/info-tooltip.tsx
+function InfoTooltip({ content }) {
+	const { t } = useT("lattice");
+	if (!content) return null;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		type: "button",
+		"aria-label": t("a11y.moreInfo", "More information"),
+		className: "ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-sm"
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "start",
+		className: "max-w-xs p-3 text-sm [&_a]:underline",
+		dangerouslySetInnerHTML: { __html: content }
+	})] });
+}
+//#endregion
+export { InfoTooltip };
+
+//# sourceMappingURL=info-tooltip.js.map

package/dist/core/components/info-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../../resources/js/core/components/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"a11y.moreInfo\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,iBAAiB,kBAAkB;EACjD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

package/dist/core/components/link.js

@@ -1,4 +1,6 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
+import { actionMenuItemClassName, useActionMenu } from "../../action/components/action-menu-context.js";
 import { Link } from "@inertiajs/react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/link.tsx
@@ -9,12 +11,16 @@ function TextLink({ className = "", children, ...props }) {
 		children
 	});
 }
-var LinkComponent = ({ node }) => /* @__PURE__ */ jsx(TextLink, {
-	href: node.props.href ?? "#",
-	method: node.props.method ?? "get",
-	tabIndex: node.props.tabIndex ?? void 0,
-	children: node.props.label
-});
+var LinkComponent = ({ node }) => {
+	return /* @__PURE__ */ jsx(TextLink, {
+		className: useActionMenu() ? actionMenuItemClassName : void 0,
+		"data-test": nodeIdentity(node),
+		href: node.props.href ?? "#",
+		method: node.props.method ?? "get",
+		tabIndex: node.props.tabIndex ?? void 0,
+		children: node.props.label
+	});
+};
 //#endregion
 export { TextLink, LinkComponent as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link\n      className={cn(\n        \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Link>\n  );\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => (\n  <TextLink\n    href={node.props.href ?? \"#\"}\n    method={node.props.method ?? \"get\"}\n    tabIndex={node.props.tabIndex ?? undefined}\n  >\n    {node.props.label}\n  </TextLink>\n);\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;AAKA,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EACE,WAAW,GACT,4JACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,IAAM,iBAA4C,EAAE,WAClD,oBAAC,UAAD;CACE,MAAM,KAAK,MAAM,QAAQ;CACzB,QAAQ,KAAK,MAAM,UAAU;CAC7B,UAAU,KAAK,MAAM,YAAY,KAAA;WAEhC,KAAK,MAAM;AACJ,CAAA"}
+{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport {\n  actionMenuItemClassName,\n  useActionMenu,\n} from \"@lattice-php/lattice/action/components/action-menu-context\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link\n      className={cn(\n        \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Link>\n  );\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n\n  return (\n    <TextLink\n      className={isMenuItem ? actionMenuItemClassName : undefined}\n      data-test={nodeIdentity(node)}\n      href={node.props.href ?? \"#\"}\n      method={node.props.method ?? \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {node.props.label}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;AAUA,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EACE,WAAW,GACT,4JACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,UAAD;EACE,WAJe,cAIJ,IAAa,0BAA0B,KAAA;EAClD,aAAW,aAAa,IAAI;EAC5B,MAAM,KAAK,MAAM,QAAQ;EACzB,QAAQ,KAAK,MAAM,UAAU;EAC7B,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC,KAAK,MAAM;CACJ,CAAA;AAEd"}

package/dist/core/components/modal.js

@@ -1,9 +1,7 @@
-import { Button } from "./button.js";
-import { Icon } from "../../icons/sprite.js";
 import { LATTICE_EVENT } from "../../events/event-names.js";
+import { Dialog, DialogContent, DialogHeader } from "./dialog.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Dialog from "@radix-ui/react-dialog";
 //#region resources/js/core/components/modal.tsx
 function matchesModal(event, modal) {
 	const target = event.detail?.modal;
@@ -28,41 +26,21 @@ var ModalComponent = ({ children, node }) => {
 			window.removeEventListener(LATTICE_EVENT.closeModal, close);
 		};
 	}, [node.id]);
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
 		onOpenChange: setIsOpen,
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }), /* @__PURE__ */ jsxs(Dialog.Content, {
+		children: /* @__PURE__ */ jsxs(DialogContent, {
 			...description ? {} : { "aria-describedby": void 0 },
-			className: "fixed left-1/2 top-1/2 z-50 max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "grid gap-2",
-					children: [/* @__PURE__ */ jsx(Dialog.Title, {
-						className: "text-lg font-semibold leading-none tracking-tight",
-						children: title
-					}), description && /* @__PURE__ */ jsx(Dialog.Description, {
-						className: "text-sm text-lt-muted-fg",
-						children: description
-					})]
-				}), /* @__PURE__ */ jsx(Dialog.Close, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Button, {
-						"aria-label": closeLabel,
-						size: "icon",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx(Icon, {
-							name: "x",
-							"aria-hidden": "true",
-							className: "size-lt-icon-md"
-						})
-					})
-				})]
+			className: "max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto",
+			children: [/* @__PURE__ */ jsx(DialogHeader, {
+				closeLabel,
+				description,
+				title
 			}), /* @__PURE__ */ jsx("div", {
 				className: "mt-6 space-y-6",
 				children
 			})]
-		})] })
+		})
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../../resources/js/core/components/modal.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  return (\n    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"fixed inset-0 z-50 bg-black/50\" />\n        <Dialog.Content\n          {...(description ? {} : { \"aria-describedby\": undefined })}\n          className=\"fixed left-1/2 top-1/2 z-50 max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\"\n        >\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"grid gap-2\">\n              <Dialog.Title className=\"text-lg font-semibold leading-none tracking-tight\">\n                {title}\n              </Dialog.Title>\n\n              {description && (\n                <Dialog.Description className=\"text-sm text-lt-muted-fg\">\n                  {description}\n                </Dialog.Description>\n              )}\n            </div>\n\n            <Dialog.Close asChild>\n              <Button aria-label={closeLabel} size=\"icon\" variant=\"ghost\">\n                <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n              </Button>\n            </Dialog.Close>\n          </div>\n\n          <div className=\"mt-6 space-y-6\">{children}</div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;;;AAWA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAE7D,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACxC,UAAU,IAAI;EAElB;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAEZ,OACE,oBAAC,OAAO,MAAR;EAAa,MAAM;EAAQ,cAAc;YACvC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAU,iCAAkC,CAAA,GAC5D,qBAAC,OAAO,SAAR;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAO,OAAR;MAAc,WAAU;gBACrB;KACW,CAAA,GAEb,eACC,oBAAC,OAAO,aAAR;MAAoB,WAAU;gBAC3B;KACiB,CAAA,CAEnB;QAEL,oBAAC,OAAO,OAAR;KAAc,SAAA;eACZ,oBAAC,QAAD;MAAQ,cAAY;MAAY,MAAK;MAAO,SAAQ;gBAClD,oBAAC,MAAD;OAAM,MAAK;OAAI,eAAY;OAAO,WAAU;MAAmB,CAAA;KACzD,CAAA;IACI,CAAA,CACX;OAEL,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CACjC;IACH,EAAA,CAAA;CACJ,CAAA;AAEjB"}
+{"version":3,"file":"modal.js","names":[],"sources":["../../../resources/js/core/components/modal.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/core/components/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAE7D,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACxC,UAAU,IAAI;EAElB;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAEZ,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}

package/dist/core/components/popover.d.ts

@@ -0,0 +1,8 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+export declare const POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
+declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
+declare function PopoverContent({ align, className, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/core/components/popover.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region resources/js/core/components/popover.tsx
+var POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
+function Popover(props) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverClose(props) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Close, {
+		"data-slot": "popover-close",
+		...props
+	});
+}
+function PopoverContent({ align = "start", className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		align,
+		className: cn(POPOVER_SURFACE, className),
+		"data-slot": "popover-content",
+		sideOffset,
+		...props
+	}) });
+}
+//#endregion
+export { POPOVER_SURFACE, Popover, PopoverClose, PopoverContent, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../resources/js/core/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const POPOVER_SURFACE =\n  \"z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverContent({\n  align = \"start\",\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(POPOVER_SURFACE, className)}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverClose, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;AAIA,IAAa,kBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAAC,iBAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;EACS;EACP,WAAW,GAAG,iBAAiB,SAAS;EACxC,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}

package/dist/core/components/raw-block.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../types';
+declare const RawBlockComponent: RendererComponent<"raw-block">;
+export default RawBlockComponent;

package/dist/core/components/raw-block.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/raw-block.tsx
+var RawBlockComponent = ({ node }) => /* @__PURE__ */ jsx("span", {
+	style: { display: "contents" },
+	dangerouslySetInnerHTML: { __html: node.props.html }
+});
+//#endregion
+export { RawBlockComponent as default };
+
+//# sourceMappingURL=raw-block.js.map

package/dist/core/components/raw-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw-block.js","names":[],"sources":["../../../resources/js/core/components/raw-block.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst RawBlockComponent: RendererComponent<\"raw-block\"> = ({ node }) => (\n  <span style={{ display: \"contents\" }} dangerouslySetInnerHTML={{ __html: node.props.html }} />\n);\n\nexport default RawBlockComponent;\n"],"mappings":";;AAEA,IAAM,qBAAqD,EAAE,WAC3D,oBAAC,QAAD;CAAM,OAAO,EAAE,SAAS,WAAW;CAAG,yBAAyB,EAAE,QAAQ,KAAK,MAAM,KAAK;AAAI,CAAA"}

package/dist/core/components/section.js

@@ -1,6 +1,7 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity, prefixedTestId } from "../test-id.js";
 import { Icon } from "../../icons/sprite.js";
-import { Renderer, useRendererContext } from "../renderer.js";
+import { Renderer } from "../renderer.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/section.tsx
@@ -18,8 +19,8 @@ var SectionComponent = ({ children, node }) => {
 	const collapsible = node.props.collapsible === true;
 	const rememberState = node.props.rememberState !== false;
 	const headerActions = getNodes(node.props.headerActions);
-	const { fallback, missingComponent, registry } = useRendererContext();
-	const storageKey = `lattice:section:${node.id ?? "default"}`;
+	const identity = nodeIdentity(node);
+	const storageKey = `lattice:section:${identity ?? "default"}`;
 	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState, node.props.collapsed === true));
 	function toggle() {
 		setCollapsed((value) => {
@@ -31,7 +32,7 @@ var SectionComponent = ({ children, node }) => {
 	const isCollapsed = collapsible && collapsed;
 	const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);
 	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-xs",
+		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-lattice-component": node.id,
 		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between gap-4 px-6",
@@ -40,8 +41,8 @@ var SectionComponent = ({ children, node }) => {
 				children: [collapsible && /* @__PURE__ */ jsx("button", {
 					"aria-expanded": !isCollapsed,
 					"aria-label": isCollapsed ? "Expand section" : "Collapse section",
-					"data-test": `section-toggle-${node.id ?? "default"}`,
-					className: "mt-0.5 inline-flex shrink-0 items-center rounded-md p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
+					"data-test": prefixedTestId("section-toggle", identity) ?? "section-toggle-default",
+					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",
 					onClick: toggle,
 					type: "button",
 					children: /* @__PURE__ */ jsx(Icon, {
@@ -60,12 +61,7 @@ var SectionComponent = ({ children, node }) => {
 				})]
 			}), headerActions.length > 0 && /* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center gap-2",
-				children: /* @__PURE__ */ jsx(Renderer, {
-					fallback,
-					missingComponent,
-					nodes: headerActions,
-					registry
-				})
+				children: /* @__PURE__ */ jsx(Renderer, { nodes: headerActions })
 			})]
 		}), !isCollapsed && children && /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-6 px-6",

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/lattice/icons\";\nimport { Renderer, useRendererContext } from \"@lattice/lattice/core/renderer\";\nimport type { Node, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\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\nfunction getNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = getNodes(node.props.headerActions);\n  const { fallback, missingComponent, registry } = useRendererContext();\n  const storageKey = `lattice:section:${node.id ?? \"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-xs\"\n      data-lattice-component={node.id}\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={`section-toggle-${node.id ?? \"default\"}`}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-md 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 && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer\n                fallback={fallback}\n                missingComponent={missingComponent}\n                nodes={headerActions}\n                registry={registry}\n              />\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":";;;;;;AAMA,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,SAAS,SAAS,OAAwB;CACxC,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,SAAS,KAAK,MAAM,aAAa;CACvD,MAAM,EAAE,UAAU,kBAAkB,aAAa,mBAAmB;CACpE,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,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;CACnC,MAAM,YAAY,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAAW;CAEzF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB,KAAK;YAF/B,CAIG,aACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,kBAAkB,KAAK,MAAM;KACxC,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,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD;KACY;KACQ;KAClB,OAAO;KACG;IACX,CAAA;GACE,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 type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\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\nfunction getNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = getNodes(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={node.id}\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 && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\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":";;;;;;;AAOA,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,SAAS,SAAS,OAAwB;CACxC,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,SAAS,KAAK,MAAM,aAAa;CACvD,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;CACnC,MAAM,YAAY,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAAW;CAEzF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB,KAAK;YAF/B,CAIG,aACC,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,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;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"}

package/dist/core/components/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../resources/js/core/components/segmented-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"./segmented-pills\";\n\nconst SegmentedControlComponent: RendererComponent<\"segmented-control\"> = ({ node }) => {\n  const { options, name, emits } = node.props;\n  const [value, setValue] = useState(node.props.value || options[0]?.value || \"\");\n\n  if (options.length === 0) {\n    return null;\n  }\n\n  function select(next: string): void {\n    setValue(next);\n\n    if (emits) {\n      window.dispatchEvent(new CustomEvent(emits, { detail: { name, value: next } }));\n    }\n  }\n\n  return (\n    <SegmentedPills\n      ariaLabel={node.props.label ?? undefined}\n      name={name}\n      onSelect={select}\n      options={options}\n      value={value}\n    />\n  );\n};\n\nexport default SegmentedControlComponent;\n"],"mappings":";;;;AAIA,IAAM,6BAAqE,EAAE,WAAW;CACtF,MAAM,EAAE,SAAS,MAAM,UAAU,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK,MAAM,SAAS,QAAQ,IAAI,SAAS,EAAE;CAE9E,IAAI,QAAQ,WAAW,GACrB,OAAO;CAGT,SAAS,OAAO,MAAoB;EAClC,SAAS,IAAI;EAEb,IAAI,OACF,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ;GAAE;GAAM,OAAO;EAAK,EAAE,CAAC,CAAC;CAElF;CAEA,OACE,oBAAC,gBAAD;EACE,WAAW,KAAK,MAAM,SAAS,KAAA;EACzB;EACN,UAAU;EACD;EACF;CACR,CAAA;AAEL"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../resources/js/core/components/segmented-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { SegmentedPills } from \"./segmented-pills\";\n\nconst SegmentedControlComponent: RendererComponent<\"segmented-control\"> = ({ node }) => {\n  const { options, name, emits } = node.props;\n  const [value, setValue] = useState(node.props.value || options[0]?.value || \"\");\n\n  if (options.length === 0) {\n    return null;\n  }\n\n  function select(next: string): void {\n    setValue(next);\n\n    if (emits) {\n      window.dispatchEvent(new CustomEvent(emits, { detail: { name, value: next } }));\n    }\n  }\n\n  return (\n    <SegmentedPills\n      ariaLabel={node.props.label ?? undefined}\n      name={name}\n      onSelect={select}\n      options={options}\n      value={value}\n    />\n  );\n};\n\nexport default SegmentedControlComponent;\n"],"mappings":";;;;AAIA,IAAM,6BAAqE,EAAE,WAAW;CACtF,MAAM,EAAE,SAAS,MAAM,UAAU,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK,MAAM,SAAS,QAAQ,IAAI,SAAS,EAAE;CAE9E,IAAI,QAAQ,WAAW,GACrB,OAAO;CAGT,SAAS,OAAO,MAAoB;EAClC,SAAS,IAAI;EAEb,IAAI,OACF,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ;GAAE;GAAM,OAAO;EAAK,EAAE,CAAC,CAAC;CAElF;CAEA,OACE,oBAAC,gBAAD;EACE,WAAW,KAAK,MAAM,SAAS,KAAA;EACzB;EACN,UAAU;EACD;EACF;CACR,CAAA;AAEL"}

package/dist/core/components/segmented-pills.js

@@ -23,7 +23,7 @@ function SegmentedPills({ ariaLabel, autoFocus = false, disabled = false, name,
 			return /* @__PURE__ */ jsx("button", {
 				"aria-checked": isSelected,
 				"data-test": `${name ?? "segment"}-${option.value}`,
-				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
+				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
 				disabled,
 				onClick: () => onSelect(option.value),
 				role: "radio",

package/dist/core/components/segmented-pills.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../../resources/js/core/components/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GACT,qFACA,aACI,kCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../../resources/js/core/components/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GACT,qFACA,aACI,qCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/core/components/skeleton.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Skeleton };

package/dist/core/components/skeleton.js

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: cn("animate-pulse rounded-lt-sm bg-lt-muted", className),
+		"data-slot": "skeleton",
+		...props
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../resources/js/core/components/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"animate-pulse rounded-lt-sm bg-lt-muted\", className)}\n      data-slot=\"skeleton\"\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n"],"mappings":";;;;AAGA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,2CAA2C,SAAS;EAClE,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../resources/js/core/components/spinner.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <Icon\n      name=\"loader-2\"\n      role=\"status\"\n      aria-label={t(\"a11y.loading\", \"Loading\")}\n      aria-hidden={false}\n      className={cn(\"animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;AAIA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,MAAD;EACE,MAAK;EACL,MAAK;EACL,cAAY,EAAE,gBAAgB,SAAS;EACvC,eAAa;EACb,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../resources/js/core/components/spinner.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <Icon\n      name=\"loader-2\"\n      role=\"status\"\n      aria-label={t(\"a11y.loading\", \"Loading\")}\n      aria-hidden={false}\n      className={cn(\"animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;AAIA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,MAAD;EACE,MAAK;EACL,MAAK;EACL,cAAY,EAAE,gBAAgB,SAAS;EACvC,eAAa;EACb,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;CACL,CAAA;AAEL"}

package/dist/core/components/stack.js

@@ -7,11 +7,12 @@ var gridAlignments = {
 	stretch: "justify-items-stretch"
 };
 var flexAlignments = {
-	center: "items-center justify-center text-center",
-	start: "items-center justify-start text-left",
+	center: "items-center text-center",
+	start: "items-center text-left",
 	stretch: "items-stretch justify-stretch"
 };
 var stackGaps = {
+	none: "gap-0",
 	xs: "gap-1",
 	lg: "gap-6",
 	md: "gap-4",
@@ -19,25 +20,41 @@ var stackGaps = {
 	xl: "gap-8"
 };
 var stackWidths = {
+	auto: "w-auto",
 	fill: "min-w-0 flex-1",
 	full: "w-full",
 	lg: "mx-auto w-full max-w-4xl",
 	md: "mx-auto w-full max-w-2xl",
 	sm: "mx-auto w-full max-w-md"
 };
+var justifyClasses = {
+	around: "justify-around",
+	between: "justify-between",
+	center: "justify-center",
+	end: "justify-end",
+	evenly: "justify-evenly",
+	start: "justify-start"
+};
+var stackHeights = {
+	full: "h-full",
+	screen: "min-h-screen"
+};
+var floatClasses = {
+	end: "ml-auto",
+	start: "mr-auto"
+};
 var StackComponent = ({ children, node }) => {
 	const align = node.props.align ?? "stretch";
 	const direction = node.props.direction ?? "column";
 	const gap = node.props.gap ?? "md";
 	const width = node.props.width ?? "full";
-	if (direction === "row") return /* @__PURE__ */ jsx("div", {
-		"data-lattice-component": node.id,
-		className: cn("flex flex-wrap", flexAlignments[align] ?? flexAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full),
-		children
-	});
+	const justify = node.props.justify;
+	const height = node.props.height;
+	const float = node.props.float;
+	const isFlex = direction === "row" || justify != null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-lattice-component": node.id,
-		className: cn("grid", gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full),
+		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
 	});
 };