@lattice-php/lattice 0.17.2 → 0.18.0

package/dist/{core/components → ui}/icon.js

@@ -1,7 +1,7 @@
-import { cn } from "../../lib/utils.js";
-import { IconRenderer } from "../../icons/icon-renderer.js";
+import { cn } from "../lib/utils.js";
+import { IconRenderer } from "../icons/icon-renderer.js";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/icon.tsx
+//#region resources/js/ui/icon.tsx
 var sizeClass = {
 	xs: "size-lt-icon-xs",
 	sm: "size-lt-icon-sm",

package/dist/ui/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../resources/js/ui/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/ui/index.d.ts

@@ -0,0 +1,27 @@
+export { AffixGroup } from './affix-group.js';
+export { ActionMenuProvider, actionMenuItemClassName, useActionMenu } from './action-menu-context.js';
+export { Badge, badgeVariants } from './badge.js';
+export { Button, buttonVariants } from './button.js';
+export type { ButtonVariant } from './button.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
+export { Checkbox } from './checkbox.js';
+export { Combobox } from './combobox.js';
+export { ConfirmDialog } from './confirm-dialog.js';
+export { ActionTrigger, ActionTriggerProvider, useActionTrigger, useClickBehavior, } from './click-behavior.js';
+export type { ActionTriggerRenderer, ClickBehavior, TriggerState } from './click-behavior.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
+export { CopyableText, copyToClipboard } from './copyable-text.js';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+export { InfoTooltip } from './info-tooltip.js';
+export { Input } from './input.js';
+export { default as InputError } from './input-error.js';
+export { InputOTP } from './input-otp.js';
+export { Label } from './label.js';
+export { TextLink } from './link.js';
+export { default as PasswordInput } from './password-input.js';
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './popover.js';
+export { SegmentedPills } from './segmented-pills.js';
+export { Skeleton } from './skeleton.js';
+export { Spinner } from './spinner.js';
+export { Textarea } from './textarea.js';
+export { uiComponents } from './plugin.js';

package/dist/ui/index.js

@@ -0,0 +1,26 @@
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "./popover.js";
+import { ActionTrigger, ActionTriggerProvider, useActionTrigger, useClickBehavior } from "./click-behavior.js";
+import { Button, buttonVariants } from "./button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
+import { Spinner } from "./spinner.js";
+import { ConfirmDialog } from "./confirm-dialog.js";
+import { Skeleton } from "./skeleton.js";
+import { ActionMenuProvider, actionMenuItemClassName, useActionMenu } from "./action-menu-context.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Badge, badgeVariants } from "./badge.js";
+import { InfoTooltip } from "./info-tooltip.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { TextLink } from "./link.js";
+import { SegmentedPills } from "./segmented-pills.js";
+import { CopyableText, copyToClipboard } from "./copyable-text.js";
+import { uiComponents } from "./plugin.js";
+import InputError from "./input-error.js";
+import { Label } from "./label.js";
+import { Checkbox } from "./checkbox.js";
+import { AffixGroup } from "./affix-group.js";
+import { Input } from "./input.js";
+import { InputOTP } from "./input-otp.js";
+import PasswordInput from "./password-input.js";
+import { Combobox } from "./combobox.js";
+import { Textarea } from "./textarea.js";
+export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };

package/dist/{core/components → ui}/info-tooltip.js

@@ -1,8 +1,8 @@
-import { Icon } from "../../icons/sprite.js";
-import { useT } from "../../i18n/instance.js";
+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
+//#region resources/js/ui/info-tooltip.tsx
 function InfoTooltip({ content }) {
 	const { t } = useT("lattice");
 	if (!content) return null;

package/dist/ui/info-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/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(\"common.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,mBAAmB,kBAAkB;EACnD,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/{form/components/base → ui}/input-error.js

@@ -1,6 +1,6 @@
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/form/components/base/input-error.tsx
+//#region resources/js/ui/input-error.tsx
 function InputError({ message, className = "", ...props }) {
 	return message ? /* @__PURE__ */ jsx("p", {
 		...props,

package/dist/ui/input-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-error.js","names":[],"sources":["../../resources/js/ui/input-error.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport default function InputError({\n  message,\n  className = \"\",\n  ...props\n}: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {\n  return message ? (\n    <p {...props} className={cn(\"text-sm text-lt-danger\", className)}>\n      {message}\n    </p>\n  ) : null;\n}\n"],"mappings":";;;AAGA,SAAwB,WAAW,EACjC,SACA,YAAY,IACZ,GAAG,SAC2D;CAC9D,OAAO,UACL,oBAAC,KAAD;EAAG,GAAI;EAAO,WAAW,GAAG,0BAA0B,SAAS;YAC5D;CACA,CAAA,IACD;AACN"}

package/dist/{form/components/base → ui}/input-otp.js

@@ -1,7 +1,7 @@
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
-//#region resources/js/form/components/base/input-otp.tsx
+//#region resources/js/ui/input-otp.tsx
 function Slot({ char, hasFakeCaret, isActive }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm", isActive && "z-10 border-lt-ring ring-lt-ring/50 ring-[3px]"),

package/dist/ui/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../resources/js/ui/input-otp.tsx"],"sourcesContent":["import { OTPInput, REGEXP_ONLY_DIGITS, type SlotProps } from \"input-otp\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Slot({ char, hasFakeCaret, isActive }: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm\",\n        isActive && \"z-10 border-lt-ring ring-lt-ring/50 ring-[3px]\",\n      )}\n    >\n      {char}\n      {hasFakeCaret ? (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"bg-lt-fg h-5 w-px animate-pulse\" />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, \"children\" | \"maxLength\" | \"render\"> & {\n  length: number;\n};\n\nexport function InputOTP({\n  length,\n  containerClassName,\n  pattern = REGEXP_ONLY_DIGITS,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      maxLength={length}\n      pattern={pattern}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      render={({ slots }) => (\n        <div className=\"flex items-center\">\n          {slots.map((slot, index) => (\n            <Slot key={index} {...slot} />\n          ))}\n        </div>\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,MAAM,cAAc,YAAuB;CACzD,OACE,qBAAC,OAAD;EACE,WAAW,GACT,oMACA,YAAY,gDACd;YAJF,CAMG,MACA,eACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA;EAC/C,CAAA,IACH,IACD;;AAET;AAMA,SAAgB,SAAS,EACvB,QACA,oBACA,UAAU,oBACV,GAAG,SACa;CAChB,OACE,oBAAC,UAAD;EACE,WAAW;EACF;EACT,oBAAoB,GAClB,sDACA,kBACF;EACA,SAAS,EAAE,YACT,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD,EAAkB,GAAI,KAAO,GAAlB,KAAkB,CAC9B;EACE,CAAA;EAEP,GAAI;CACL,CAAA;AAEL"}

package/dist/{form/components/base → ui}/input.js

@@ -1,8 +1,8 @@
-import { cn } from "../../../lib/utils.js";
-import { controlSurface } from "../../../core/components/control.js";
+import { cn } from "../lib/utils.js";
+import { controlSurface } from "./control.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/form/components/base/input.tsx
+//#region resources/js/ui/input.tsx
 function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
 		type,

package/dist/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../resources/js/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        controlSurface(),\n        \"file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,eAAe,GACf,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/{form/components/base → ui}/label.js

@@ -1,8 +1,8 @@
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
-//#region resources/js/form/components/base/label.tsx
+//#region resources/js/ui/label.tsx
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 		"data-slot": "label",

package/dist/ui/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../resources/js/ui/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,iMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/{core/components → ui}/link.d.ts

@@ -1,6 +1,6 @@
 import { Link } from '@inertiajs/react';
 import { ComponentProps } from 'react';
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare function TextLink({ className, children, ...props }: ComponentProps<typeof Link>): import("react").JSX.Element;
 declare const LinkComponent: RendererComponent<"link">;
 export default LinkComponent;

package/dist/{core/components → ui}/link.js

@@ -1,11 +1,11 @@
-import { cn } from "../../lib/utils.js";
-import { IconRenderer } from "../../icons/icon-renderer.js";
-import { nodeIdentity } from "../test-id.js";
-import { ActionTrigger, useClickBehavior } from "../use-click-behavior.js";
-import { actionMenuItemClassName, useActionMenu } from "../../action/components/action-menu-context.js";
+import { cn } from "../lib/utils.js";
+import { IconRenderer } from "../icons/icon-renderer.js";
+import { nodeIdentity } from "../core/test-id.js";
+import { ActionTrigger, useClickBehavior } from "./click-behavior.js";
+import { actionMenuItemClassName, useActionMenu } from "./action-menu-context.js";
 import { Link } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/core/components/link.tsx
+//#region resources/js/ui/link.tsx
 var textLinkClassName = "text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border";
 function TextLink({ className = "", children, ...props }) {
 	return /* @__PURE__ */ jsx(Link, {
@@ -57,7 +57,8 @@ function labelWithTextAffixes(label, prefix, suffix) {
 }
 var LinkComponent = ({ node }) => {
 	const isMenuItem = useActionMenu();
-	const { icon, label, prefix, suffix } = node.props;
+	const { icon, label: rawLabel, prefix, suffix } = node.props;
+	const label = rawLabel ?? "";
 	const behavior = useClickBehavior(node.props);
 	const className = isMenuItem ? actionMenuItemClassName : void 0;
 	const testId = nodeIdentity(node);

package/dist/ui/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../resources/js/ui/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 { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport { actionMenuItemClassName, useActionMenu } from \"./action-menu-context\";\nimport { ActionTrigger, type TriggerState, useClickBehavior } from \"./click-behavior\";\n\nconst textLinkClassName =\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\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link className={cn(textLinkClassName, className)} {...props}>\n      {children}\n    </Link>\n  );\n}\n\nfunction LinkAffix({ affix, className }: { affix: Affix; className?: string }) {\n  if (affix.icon) {\n    return <IconRenderer className={cn(\"size-lt-icon-md shrink-0\", className)} icon={affix.icon} />;\n  }\n\n  return <span className={cn(\"shrink-0 text-sm text-lt-muted-fg\", className)}>{affix.text}</span>;\n}\n\nfunction LinkContent({\n  icon,\n  isMenuItem,\n  label,\n  prefix,\n  suffix,\n}: {\n  icon?: string | null;\n  isMenuItem: boolean;\n  label: string;\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n}) {\n  if (icon) {\n    return <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />;\n  }\n\n  if (isMenuItem) {\n    return (\n      <>\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} className=\"ml-auto\" /> : null}\n      </>\n    );\n  }\n\n  if (prefix || suffix) {\n    return (\n      <span className=\"inline-flex items-center gap-1.5 align-baseline\">\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} /> : null}\n      </span>\n    );\n  }\n\n  return label;\n}\n\nfunction labelWithTextAffixes(label: string, prefix?: Affix | null, suffix?: Affix | null) {\n  if (!prefix?.text && !suffix?.text) {\n    return undefined;\n  }\n\n  return [prefix?.text, label, suffix?.text]\n    .filter((part): part is string => Boolean(part))\n    .join(\" \");\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n  const { icon, label: rawLabel, prefix, suffix } = node.props;\n  const label = rawLabel ?? \"\";\n  const behavior = useClickBehavior(node.props);\n  const className = isMenuItem ? actionMenuItemClassName : undefined;\n  const testId = nodeIdentity(node);\n  const content = (\n    <LinkContent\n      icon={icon}\n      isMenuItem={isMenuItem}\n      label={label}\n      prefix={prefix}\n      suffix={suffix}\n    />\n  );\n  const ariaLabel = icon ? label : labelWithTextAffixes(label, prefix, suffix);\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <button\n      aria-label={ariaLabel}\n      className={cn(textLinkClassName, className)}\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {content}\n    </button>\n  );\n\n  if (behavior.kind === \"action\") {\n    return <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>;\n  }\n\n  if (behavior.kind === \"effects\") {\n    return triggerButton({ onClick: behavior.onClick, processing: false });\n  }\n\n  return (\n    <TextLink\n      aria-label={ariaLabel}\n      className={className}\n      data-test={testId}\n      href={behavior.kind === \"navigate\" ? behavior.href : \"#\"}\n      method={behavior.kind === \"navigate\" ? behavior.method : \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {content}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;;;AAUA,IAAM,oBACJ;AAEF,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;EACpD;CACG,CAAA;AAEV;AAEA,SAAS,UAAU,EAAE,OAAO,aAAmD;CAC7E,IAAI,MAAM,MACR,OAAO,oBAAC,cAAD;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,MAAM,MAAM;CAAO,CAAA;CAGhG,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,qCAAqC,SAAS;YAAI,MAAM;CAAW,CAAA;AAChG;AAEA,SAAS,YAAY,EACnB,MACA,YACA,OACA,QACA,UAOC;CACD,IAAI,MACF,OAAO,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA;CAGzE,IAAI,YACF,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAClB,SAAS,oBAAC,WAAD;GAAW,OAAO;GAAQ,WAAU;EAAW,CAAA,IAAI;CAC7D,EAAA,CAAA;CAIN,IAAI,UAAU,QACZ,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB;GACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;GACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAClB,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACrC;;CAIV,OAAO;AACT;AAEA,SAAS,qBAAqB,OAAe,QAAuB,QAAuB;CACzF,IAAI,CAAC,QAAQ,QAAQ,CAAC,QAAQ,MAC5B;CAGF,OAAO;EAAC,QAAQ;EAAM;EAAO,QAAQ;CAAI,EACtC,QAAQ,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,GAAG;AACb;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,MAAM,OAAO,UAAU,QAAQ,WAAW,KAAK;CACvD,MAAM,QAAQ,YAAY;CAC1B,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,YAAY,aAAa,0BAA0B,KAAA;CACzD,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,UACJ,oBAAC,aAAD;EACQ;EACM;EACL;EACC;EACA;CACT,CAAA;CAEH,MAAM,YAAY,OAAO,QAAQ,qBAAqB,OAAO,QAAQ,MAAM;CAE3E,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAC1C,aAAW;EACX,UAAU;EACD;EACT,MAAK;YAEJ;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,UACpB,OAAO,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA;CAG/E,IAAI,SAAS,SAAS,WACpB,OAAO,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC;CAGvE,OACE,oBAAC,UAAD;EACE,cAAY;EACD;EACX,aAAW;EACX,MAAM,SAAS,SAAS,aAAa,SAAS,OAAO;EACrD,QAAQ,SAAS,SAAS,aAAa,SAAS,SAAS;EACzD,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC;CACO,CAAA;AAEd"}

package/dist/{core/components → ui}/modal.d.ts

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare const ModalComponent: RendererComponent<"modal">;
 export default ModalComponent;

package/dist/{core/components → ui}/modal.js

@@ -1,8 +1,8 @@
-import { LATTICE_EVENT } from "../../events/event-names.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";
-//#region resources/js/core/components/modal.tsx
+//#region resources/js/ui/modal.tsx
 function matchesModal(event, modal) {
 	const target = event.detail?.modal;
 	return target == null || target === modal;

package/dist/ui/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/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  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\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;CAK7D,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,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/{form/components/base → ui}/password-input.js

@@ -1,9 +1,9 @@
-import { cn } from "../../../lib/utils.js";
-import { Icon } from "../../../icons/sprite.js";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
 import { Input } from "./input.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/form/components/base/password-input.tsx
+//#region resources/js/ui/password-input.tsx
 function PasswordInput({ className, ref, ...props }) {
 	const [showPassword, setShowPassword] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {

package/dist/ui/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","names":[],"sources":["../../resources/js/ui/password-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ComponentProps, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\ntype PasswordInputProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  passwordrules?: string;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        className={cn(\"pr-10\", className)}\n        ref={ref}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        data-test={\n          typeof props.name === \"string\" ? `${props.name}-visibility` : \"password-visibility\"\n        }\n        onClick={() => setShowPassword((prev) => !prev)}\n        className=\"absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none\"\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n      >\n        {showPassword ? (\n          <Icon name=\"eye-off\" className=\"size-lt-icon-md\" />\n        ) : (\n          <Icon name=\"eye\" className=\"size-lt-icon-md\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAwB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CACtF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAM,eAAe,SAAS;GAC9B,WAAW,GAAG,SAAS,SAAS;GAC3B;GACL,GAAI;EACL,CAAA,GACD,oBAAC,UAAD;GACE,MAAK;GACL,aACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,KAAK,eAAe;GAEhE,eAAe,iBAAiB,SAAS,CAAC,IAAI;GAC9C,WAAU;GACV,cAAY,eAAe,kBAAkB;GAC7C,UAAU;aAET,eACC,oBAAC,MAAD;IAAM,MAAK;IAAU,WAAU;GAAmB,CAAA,IAElD,oBAAC,MAAD;IAAM,MAAK;IAAM,WAAU;GAAmB,CAAA;EAE1C,CAAA,CACL;;AAET"}

package/dist/ui/plugin.d.ts

@@ -0,0 +1 @@
+export declare const uiComponents: import('../core/registry.js').Plugin;

package/dist/{core/components/index.js → ui/plugin.js}

@@ -1,4 +1,4 @@
-import { createPlugin, eagerComponent } from "../registry.js";
+import { createPlugin, eagerComponent } from "../core/registry.js";
 import ButtonComponent from "./button.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
@@ -18,8 +18,8 @@ import StackComponent from "./stack.js";
 import TabComponent, { TabsComponent } from "./tabs.js";
 import TextComponent from "./text.js";
 import TooltipComponent from "./tooltip.js";
-//#region resources/js/core/components/index.ts
-var coreComponents = createPlugin({
+//#region resources/js/ui/plugin.ts
+var uiComponents = createPlugin({
 	components: {
 		badge: eagerComponent(BadgeComponent),
 		button: eagerComponent(ButtonComponent),
@@ -42,9 +42,9 @@ var coreComponents = createPlugin({
 		text: eagerComponent(TextComponent),
 		tooltip: eagerComponent(TooltipComponent)
 	},
-	name: "lattice/core"
+	name: "lattice/ui"
 });
 //#endregion
-export { coreComponents };
+export { uiComponents };
 
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=plugin.js.map

package/dist/ui/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/ui/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { ActionNodeType, FormNodeType, NodeType } from \"@lattice-php/lattice/types/generated\";\nimport type { ChatComponentType } from \"@lattice-php/lattice/chat/plugin\";\nimport type { LayoutComponentType } from \"@lattice-php/lattice/layout/plugin\";\nimport type { NotificationsComponentType } from \"@lattice-php/lattice/notifications/plugin\";\nimport type { RemoteComponentType } from \"@lattice-php/lattice/remote/plugin\";\nimport type { TableComponentType } from \"@lattice-php/lattice/table/plugin\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CollapsibleComponent from \"./collapsible\";\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\";\nimport TooltipComponent from \"./tooltip\";\n\ntype NonUiComponentType =\n  | ActionNodeType\n  | ChatComponentType\n  | FormNodeType\n  | LayoutComponentType\n  | NotificationsComponentType\n  | RemoteComponentType\n  | TableComponentType;\n\ntype UiComponentType = Exclude<NodeType, NonUiComponentType>;\n\nexport const uiComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    collapsible: eagerComponent(CollapsibleComponent),\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    tooltip: eagerComponent(TooltipComponent),\n  } satisfies ComponentRegistryFor<UiComponentType>,\n  name: \"lattice/ui\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,oBAAoB;EAChD,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;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}

package/dist/{core/components → ui}/popover.js

@@ -1,8 +1,8 @@
-import { cn } from "../../lib/utils.js";
+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
+//#region resources/js/ui/popover.tsx
 var POPOVER_SURFACE = "z-lt-popover 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, {

package/dist/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../resources/js/ui/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-lt-popover 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 → ui}/raw-block.d.ts

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

package/dist/{core/components → ui}/raw-block.js

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

package/dist/ui/raw-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw-block.js","names":[],"sources":["../../resources/js/ui/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 → ui}/section.d.ts

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare const SectionComponent: RendererComponent<"section">;
 export default SectionComponent;

package/dist/{core/components → ui}/section.js

@@ -1,12 +1,12 @@
-import { cn } from "../../lib/utils.js";
-import { Icon } from "../../icons/sprite.js";
-import { Renderer } from "../renderer.js";
-import { nodeIdentity, prefixedTestId } from "../test-id.js";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import { Renderer } from "../core/renderer.js";
+import { nodeIdentity, prefixedTestId } from "../core/test-id.js";
 import { InfoTooltip } from "./info-tooltip.js";
-import { toNodes } from "../nodes.js";
+import { toNodes } from "../core/nodes.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/core/components/section.tsx
+//#region resources/js/ui/section.tsx
 function readStored(key, remember, fallback) {
 	if (!remember || typeof window === "undefined") return fallback;
 	const stored = window.localStorage.getItem(key);

package/dist/ui/section.js.map

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

package/dist/{core/components → ui}/segmented-control.d.ts

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare const SegmentedControlComponent: RendererComponent<"segmented-control">;
 export default SegmentedControlComponent;

package/dist/{core/components → ui}/segmented-control.js

@@ -1,7 +1,7 @@
 import { SegmentedPills } from "./segmented-pills.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/segmented-control.tsx
+//#region resources/js/ui/segmented-control.tsx
 var SegmentedControlComponent = ({ node }) => {
 	const { options, name, emits } = node.props;
 	const [value, setValue] = useState(node.props.value || options[0]?.value || "");

package/dist/ui/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../resources/js/ui/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 → ui}/segmented-pills.d.ts

@@ -1,4 +1,4 @@
-import { Option } from '../types';
+import { Option } from '../core/types.js';
 /**
  * Presentational segmented pill group. Used by the form choice field (bound to a
  * form value) and the core segmented control (standalone, emits an event).

package/dist/{core/components → ui}/segmented-pills.js

@@ -1,7 +1,7 @@
-import { cn } from "../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/segmented-pills.tsx
+//#region resources/js/ui/segmented-pills.tsx
 /**
 * Presentational segmented pill group. Used by the form choice field (bound to a
 * form value) and the core segmented control (standalone, emits an event).

package/dist/ui/segmented-pills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../resources/js/ui/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 → ui}/skeleton.js

@@ -1,7 +1,7 @@
-import { cn } from "../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/skeleton.tsx
+//#region resources/js/ui/skeleton.tsx
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",

package/dist/ui/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../resources/js/ui/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 → ui}/spinner.js

@@ -1,8 +1,8 @@
-import { cn } from "../../lib/utils.js";
-import { Icon } from "../../icons/sprite.js";
-import { useT } from "../../i18n/instance.js";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import { useT } from "../i18n/instance.js";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/spinner.tsx
+//#region resources/js/ui/spinner.tsx
 function Spinner({ className, ...props }) {
 	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsx(Icon, {

package/dist/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../resources/js/ui/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(\"common.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,kBAAkB,SAAS;EACzC,eAAa;EACb,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;CACL,CAAA;AAEL"}

package/dist/{core/components → ui}/stack.d.ts

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare const StackComponent: RendererComponent<"stack">;
 export default StackComponent;

package/dist/{core/components → ui}/stack.js

@@ -1,7 +1,7 @@
-import { cn } from "../../lib/utils.js";
-import { nodeIdentity } from "../test-id.js";
+import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.js";
 import { jsx } from "react/jsx-runtime";
-//#region resources/js/core/components/stack.tsx
+//#region resources/js/ui/stack.tsx
 var gridAlignments = {
 	center: "justify-items-center text-center",
 	start: "justify-items-start text-left",

package/dist/ui/stack.js.map

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

package/dist/{core/components → ui}/tabs.d.ts

@@ -1,4 +1,4 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 export declare const TabsComponent: RendererComponent<"tabs">;
 declare const TabComponent: RendererComponent<"tab">;
 export default TabComponent;

package/dist/{core/components → ui}/tabs.js

@@ -1,9 +1,9 @@
-import { cn } from "../../lib/utils.js";
-import { useT } from "../../i18n/instance.js";
+import { cn } from "../lib/utils.js";
+import { useT } from "../i18n/instance.js";
 import { router } from "@inertiajs/react";
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/core/components/tabs.tsx
+//#region resources/js/ui/tabs.tsx
 var TabsContext = createContext(null);
 function useTabsContext() {
 	const context = useContext(TabsContext);

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../resources/js/ui/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const alignment = node.props.alignment;\n  const isStretched = !isVertical && alignment === \"stretch\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div\n        className={cn(\n          \"gap-6\",\n          isVertical ? cn(\"flex\", alignment === \"end\" && \"flex-row-reverse\") : \"grid\",\n        )}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"common.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical && \"flex flex-col\",\n            isStretched && \"flex w-full\",\n            !isVertical &&\n              !isStretched &&\n              cn(\"inline-flex w-fit max-w-full overflow-x-auto\", {\n                \"justify-self-center\": alignment === \"center\",\n                \"justify-self-end\": alignment === \"end\",\n              }),\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\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                  isVertical && \"text-left\",\n                  isStretched && \"flex-1\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}

package/dist/{core/components → ui}/text.d.ts

@@ -1,3 +1,3 @@
-import { RendererComponent } from '../types';
+import { RendererComponent } from '../core/types.js';
 declare const TextComponent: RendererComponent<"text">;
 export default TextComponent;