@lattice-php/lattice 0.24.0 → 0.26.0

package/dist/types/generated.d.ts

@@ -103,6 +103,7 @@ export type EffectOf<TType extends string> = string extends TType ? Effect : {
 };
 export type Action = {
     confirmation: Confirmation | null;
+    emphasis: Emphasis | null;
     endpoint: string | null;
     form: Node<"form"> | null;
     icon: string | null;
@@ -112,7 +113,7 @@ export type Action = {
     modalSide: Side | null;
     modalWidth: ModalWidth | null;
     ref: string | null;
-    variant: ButtonVariant | null;
+    variant: Variant | null;
 };
 export type ActionGroup = {
     label: string | null;
@@ -135,6 +136,7 @@ export type Avatar = {
     src: string | null;
 };
 export type Badge = {
+    color: Color | null;
     label: string;
 };
 export type BadgeColumn = {
@@ -196,6 +198,7 @@ export type Builder = {
 };
 export type BulkAction = {
     confirmation: Confirmation | null;
+    emphasis: Emphasis | null;
     endpoint: string | null;
     form: Node<"form"> | null;
     icon: string | null;
@@ -205,25 +208,25 @@ export type BulkAction = {
     modalSide: Side | null;
     modalWidth: ModalWidth | null;
     ref: string | null;
-    variant: ButtonVariant | null;
+    variant: Variant | null;
 };
 export type Button = {
     action: Node<"action"> | Node<"action.bulk"> | null;
     buttonType: ButtonType;
     effects: Effect[];
+    emphasis: Emphasis | null;
     href: string | null;
     icon: string | null;
     label: string | null;
     method: HttpMethod | null;
-    variant: ButtonVariant | null;
+    variant: Variant | null;
 };
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "destructive" | "ghost" | "info" | "link" | "outline" | "secondary" | "success";
 export type Callout = {
     action: Node | null;
     dismissible: boolean;
-    message: string;
-    title: string | null;
+    message: Translatable | string;
+    title: Translatable | string | null;
     variant: Variant;
 };
 export type Callouts = Record<string, never>;
@@ -450,6 +453,8 @@ export type ComponentPropsMap = {
     text: Text;
     tooltip: Tooltip;
     topbar: Topbar;
+    wizard: Wizard;
+    "wizard-step": WizardStep;
 };
 export type Condition = {
     readonly field: string;
@@ -600,6 +605,7 @@ export type EffectPropsMap = {
     toast: Toast;
     "toggle-sidebar": ToggleSidebar;
 };
+export type Emphasis = "solid" | "outline" | "ghost" | "link";
 export type FieldConditions = {
     readonly disabled: Condition[];
     readonly readOnly: Condition[];
@@ -677,14 +683,15 @@ export type Form = {
     status: string | null;
     submitButton: boolean;
     submitButtons: Node<"button">[] | null;
+    submitEmphasis: Emphasis | null;
     submitJustify: Justify | null;
     submitLabel: string | null;
-    submitVariant: ButtonVariant | null;
+    submitVariant: Variant | null;
     validationSummaryLabel: string;
     validationTimeout: number | null;
 };
-export type FormFieldNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle";
-export type FormNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "form";
+export type FormFieldNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "wizard" | "wizard-step";
+export type FormNodeType = "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "form" | "wizard" | "wizard-step";
 export type Fragment = {
     endpoint: string | null;
     lazy: boolean;
@@ -830,16 +837,16 @@ export type MoneyColumn = {
     toggleable: boolean;
     width: ColumnWidth;
 };
-export type NodeType = "action" | "action.bulk" | "action.group" | "avatar" | "badge" | "breadcrumbs" | "button" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "collapsible" | "dropdown" | "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "floating-panel" | "form" | "fragment" | "grid" | "heading" | "icon" | "image" | "link" | "menu" | "menu-item" | "modal" | "notifications" | "outlet" | "progress" | "raw-block" | "remote.data-list" | "section" | "segmented-control" | "separator" | "sidebar" | "stack" | "tab" | "table" | "tabs" | "text" | "tooltip" | "topbar";
+export type NodeType = "action" | "action.bulk" | "action.group" | "avatar" | "badge" | "breadcrumbs" | "button" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "collapsible" | "dropdown" | "field.builder" | "field.checkbox" | "field.choice" | "field.color-picker" | "field.date-input" | "field.date-time-input" | "field.file-upload" | "field.hidden-input" | "field.number-input" | "field.otp" | "field.password-input" | "field.repeater" | "field.rich-editor" | "field.select" | "field.text-input" | "field.textarea" | "field.time-input" | "field.toggle" | "floating-panel" | "form" | "fragment" | "grid" | "heading" | "icon" | "image" | "link" | "menu" | "menu-item" | "modal" | "notifications" | "outlet" | "progress" | "raw-block" | "remote.data-list" | "section" | "segmented-control" | "separator" | "sidebar" | "stack" | "tab" | "table" | "tabs" | "text" | "tooltip" | "topbar" | "wizard" | "wizard-step";
 export type NotificationItem = {
     readonly actions: Node[];
-    readonly body: string | null;
+    readonly body: Translatable | string | null;
     readonly createdAt: string | null;
     readonly href: string | null;
     readonly icon: string | null;
     readonly id: string;
     readonly isRead: boolean;
-    readonly title: string | null;
+    readonly title: Translatable | string | null;
     readonly variant: Variant | null;
 };
 export type NotificationList = {
@@ -982,12 +989,12 @@ export type Placement = "top" | "bottom" | "right";
 export type Progress = {
     color: Color | null;
     max: number;
+    shape: ProgressShape;
     showValue: boolean;
     size: Size;
     value: number;
-    variant: ProgressVariant;
 };
-export type ProgressVariant = "bar" | "circle";
+export type ProgressShape = "bar" | "circle";
 export type RawBlock = {
     html: string;
 };
@@ -1063,7 +1070,7 @@ export type RichEditor = {
     value: unknown;
 };
 export type RowAction = {
-    destructive: boolean;
+    danger: boolean;
     icon: string | null;
     key: string;
     label: string | null;
@@ -1376,6 +1383,14 @@ export type UiNodeType = "avatar" | "badge" | "button" | "card" | "chart" | "col
 export type UnreadCount = {
     readonly unreadCount: number;
 };
-export type Variant = "success" | "info" | "warning" | "error";
+export type Variant = "primary" | "secondary" | "success" | "info" | "warning" | "danger";
 export type Width = "full" | "auto" | "sm" | "md" | "lg" | "fill";
+export type Wizard = {
+    orientation: Orientation;
+};
+export type WizardStep = {
+    description: string | null;
+    label: string;
+    name: string;
+};
 export {};

package/dist/ui/action-menu-context.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare const actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
+export declare const actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:text-lt-disabled-fg [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
 export declare function ActionMenuProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/ui/action-menu-context.js

@@ -2,7 +2,7 @@ import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/action-menu-context.tsx
 var ActionMenuContext = createContext(false);
-var actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
+var actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:text-lt-disabled-fg [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
 function ActionMenuProvider({ children }) {
 	return /* @__PURE__ */ jsx(ActionMenuContext.Provider, {
 		value: true,

package/dist/ui/action-menu-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu-context.js","names":[],"sources":["../../resources/js/ui/action-menu-context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nconst ActionMenuContext = createContext(false);\n\nexport const actionMenuItemClassName =\n  \"flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg\";\n\nexport function ActionMenuProvider({ children }: { children: ReactNode }) {\n  return <ActionMenuContext.Provider value={true}>{children}</ActionMenuContext.Provider>;\n}\n\nexport function useActionMenu(): boolean {\n  return useContext(ActionMenuContext);\n}\n"],"mappings":";;;AAEA,IAAM,oBAAoB,cAAc,KAAK;AAE7C,IAAa,0BACX;AAEF,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAO;CAAqC,CAAA;AACxF;AAEA,SAAgB,gBAAyB;CACvC,OAAO,WAAW,iBAAiB;AACrC"}
+{"version":3,"file":"action-menu-context.js","names":[],"sources":["../../resources/js/ui/action-menu-context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nconst ActionMenuContext = createContext(false);\n\nexport const actionMenuItemClassName =\n  \"flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:text-lt-disabled-fg [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg\";\n\nexport function ActionMenuProvider({ children }: { children: ReactNode }) {\n  return <ActionMenuContext.Provider value={true}>{children}</ActionMenuContext.Provider>;\n}\n\nexport function useActionMenu(): boolean {\n  return useContext(ActionMenuContext);\n}\n"],"mappings":";;;AAEA,IAAM,oBAAoB,cAAc,KAAK;AAE7C,IAAa,0BACX;AAEF,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAO;CAAqC,CAAA;AACxF;AAEA,SAAgB,gBAAyB;CACvC,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/ui/affix-group.js

@@ -25,7 +25,7 @@ function AffixSegment({ affix, side, squared = false }) {
 function AffixGroup({ prefix, suffix, end, children }) {
 	if (!prefix && !suffix && !end) return children("");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-lt-ring/50",
+		className: "group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[length:var(--lt-ring-width)] has-[:focus-visible]:ring-lt-ring/50",
 		"data-slot": "affix-group",
 		children: [
 			prefix ? /* @__PURE__ */ jsx(AffixSegment, {

package/dist/ui/affix-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"affix-group.js","names":[],"sources":["../../resources/js/ui/affix-group.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction AffixSegment({\n  affix,\n  side,\n  squared = false,\n}: {\n  affix: Affix;\n  side: \"start\" | \"end\";\n  squared?: boolean;\n}) {\n  return (\n    <span\n      data-slot={`affix-${side}`}\n      className={cn(\n        \"inline-flex h-lt-control-md shrink-0 items-center border border-lt-input bg-lt-muted px-3 text-base whitespace-nowrap text-lt-muted-fg\",\n        \"group-has-[:focus-visible]:border-lt-ring\",\n        side === \"start\" ? \"rounded-l-lt-sm border-r-0\" : \"rounded-r-lt-sm border-l-0\",\n        squared && \"rounded-r-none border-r-0\",\n      )}\n    >\n      {affix.icon ? <IconRenderer className=\"size-lt-icon-md\" icon={affix.icon} /> : affix.text}\n    </span>\n  );\n}\n\n/**\n * Wraps a single-line control in a prefix/suffix input group. The control is a\n * render prop receiving the class names that square the corners adjacent to an\n * affix; with no affixes the control renders untouched.\n *\n * The focus ring lives on the group, not the bare input, so it surrounds the\n * whole control — affixes included — instead of being clipped by the opaque\n * affix segments. The control itself stays the focus target; only its own ring\n * is suppressed.\n */\nexport function AffixGroup({\n  prefix,\n  suffix,\n  end,\n  children,\n}: {\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n  end?: ReactNode;\n  children: (controlClassName: string) => ReactNode;\n}) {\n  if (!prefix && !suffix && !end) {\n    return children(\"\");\n  }\n\n  return (\n    <div\n      className=\"group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-lt-ring/50\"\n      data-slot=\"affix-group\"\n    >\n      {prefix ? <AffixSegment affix={prefix} side=\"start\" /> : null}\n      <div className=\"min-w-0 flex-1\">\n        {children(\n          cn(\n            \"focus-visible:ring-0\",\n            prefix && \"rounded-l-none\",\n            (suffix || end) && \"rounded-r-none\",\n          ),\n        )}\n      </div>\n      {suffix ? <AffixSegment affix={suffix} side=\"end\" squared={Boolean(end)} /> : null}\n      {end}\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,aAAa,EACpB,OACA,MACA,UAAU,SAKT;CACD,OACE,oBAAC,QAAD;EACE,aAAW,SAAS;EACpB,WAAW,GACT,0IACA,6CACA,SAAS,UAAU,+BAA+B,8BAClD,WAAW,2BACb;YAEC,MAAM,OAAO,oBAAC,cAAD;GAAc,WAAU;GAAkB,MAAM,MAAM;EAAO,CAAA,IAAI,MAAM;CACjF,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,QACA,QACA,KACA,YAMC;CACD,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KACzB,OAAO,SAAS,EAAE;CAGpB,OACE,qBAAC,OAAD;EACE,WAAU;EACV,aAAU;YAFZ;GAIG,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;GAAS,CAAA,IAAI;GACzD,oBAAC,OAAD;IAAK,WAAU;cACZ,SACC,GACE,wBACA,UAAU,mBACT,UAAU,QAAQ,gBACrB,CACF;GACG,CAAA;GACJ,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;IAAM,SAAS,QAAQ,GAAG;GAAI,CAAA,IAAI;GAC7E;EACE;;AAET"}
+{"version":3,"file":"affix-group.js","names":[],"sources":["../../resources/js/ui/affix-group.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction AffixSegment({\n  affix,\n  side,\n  squared = false,\n}: {\n  affix: Affix;\n  side: \"start\" | \"end\";\n  squared?: boolean;\n}) {\n  return (\n    <span\n      data-slot={`affix-${side}`}\n      className={cn(\n        \"inline-flex h-lt-control-md shrink-0 items-center border border-lt-input bg-lt-muted px-3 text-base whitespace-nowrap text-lt-muted-fg\",\n        \"group-has-[:focus-visible]:border-lt-ring\",\n        side === \"start\" ? \"rounded-l-lt-sm border-r-0\" : \"rounded-r-lt-sm border-l-0\",\n        squared && \"rounded-r-none border-r-0\",\n      )}\n    >\n      {affix.icon ? <IconRenderer className=\"size-lt-icon-md\" icon={affix.icon} /> : affix.text}\n    </span>\n  );\n}\n\n/**\n * Wraps a single-line control in a prefix/suffix input group. The control is a\n * render prop receiving the class names that square the corners adjacent to an\n * affix; with no affixes the control renders untouched.\n *\n * The focus ring lives on the group, not the bare input, so it surrounds the\n * whole control — affixes included — instead of being clipped by the opaque\n * affix segments. The control itself stays the focus target; only its own ring\n * is suppressed.\n */\nexport function AffixGroup({\n  prefix,\n  suffix,\n  end,\n  children,\n}: {\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n  end?: ReactNode;\n  children: (controlClassName: string) => ReactNode;\n}) {\n  if (!prefix && !suffix && !end) {\n    return children(\"\");\n  }\n\n  return (\n    <div\n      className=\"group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[length:var(--lt-ring-width)] has-[:focus-visible]:ring-lt-ring/50\"\n      data-slot=\"affix-group\"\n    >\n      {prefix ? <AffixSegment affix={prefix} side=\"start\" /> : null}\n      <div className=\"min-w-0 flex-1\">\n        {children(\n          cn(\n            \"focus-visible:ring-0\",\n            prefix && \"rounded-l-none\",\n            (suffix || end) && \"rounded-r-none\",\n          ),\n        )}\n      </div>\n      {suffix ? <AffixSegment affix={suffix} side=\"end\" squared={Boolean(end)} /> : null}\n      {end}\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,aAAa,EACpB,OACA,MACA,UAAU,SAKT;CACD,OACE,oBAAC,QAAD;EACE,aAAW,SAAS;EACpB,WAAW,GACT,0IACA,6CACA,SAAS,UAAU,+BAA+B,8BAClD,WAAW,2BACb;YAEC,MAAM,OAAO,oBAAC,cAAD;GAAc,WAAU;GAAkB,MAAM,MAAM;EAAO,CAAA,IAAI,MAAM;CACjF,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,QACA,QACA,KACA,YAMC;CACD,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KACzB,OAAO,SAAS,EAAE;CAGpB,OACE,qBAAC,OAAD;EACE,WAAU;EACV,aAAU;YAFZ;GAIG,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;GAAS,CAAA,IAAI;GACzD,oBAAC,OAAD;IAAK,WAAU;cACZ,SACC,GACE,wBACA,UAAU,mBACT,UAAU,QAAQ,gBACrB,CACF;GACG,CAAA;GACJ,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;IAAM,SAAS,QAAQ,GAAG;GAAI,CAAA,IAAI;GAC7E;EACE;;AAET"}

package/dist/ui/badge.d.ts

@@ -1,12 +1,9 @@
-import { VariantProps } from 'class-variance-authority';
+import { Color } from '../types/generated.js';
 import { RendererComponent } from '../core/types.js';
 import * as React from "react";
-declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
-    asChild?: boolean;
+declare function Badge({ color, className, style, ...props }: Omit<React.ComponentProps<"span">, "color"> & {
+    color?: Color | string | null;
 }): React.JSX.Element;
 declare const BadgeComponent: RendererComponent<"badge">;
 export default BadgeComponent;
-export { Badge, badgeVariants };
+export { Badge };

package/dist/ui/badge.js

@@ -1,31 +1,25 @@
 import { cn } from "../lib/utils.js";
+import { coerceColor, namedColor, toneProps } from "../lib/color.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
 //#region resources/js/ui/badge.tsx
-var badgeVariants = cva("inline-flex items-center justify-center rounded-lt-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-lt-icon-xs gap-1 [&>svg]:pointer-events-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger transition-[color,box-shadow] overflow-hidden", {
-	variants: { variant: {
-		default: "border-transparent bg-lt-primary text-lt-primary-fg [a&]:hover:bg-lt-primary-hover",
-		secondary: "border-transparent bg-lt-secondary text-lt-secondary-fg [a&]:hover:bg-lt-secondary-hover",
-		destructive: "border-transparent bg-lt-danger text-lt-danger-fg [a&]:hover:bg-lt-danger-hover focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 dark:bg-lt-danger/60",
-		outline: "border-lt-border text-lt-fg [a&]:hover:bg-lt-accent [a&]:hover:text-lt-accent-fg"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Badge({ className, variant, asChild = false, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+function Badge({ color, className, style, ...props }) {
+	const tone = toneProps(coerceColor(color ?? void 0) ?? namedColor("gray"));
+	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "badge",
-		className: cn(badgeVariants({ variant }), className),
+		className: cn("lt-badge", tone.className, className),
+		style: {
+			...tone.style,
+			...style
+		},
 		...props
 	});
 }
 var BadgeComponent = ({ node }) => /* @__PURE__ */ jsx(Badge, {
-	variant: "secondary",
-	className: "w-fit px-3 py-1",
+	color: node.props.color,
 	children: node.props.label
 });
 //#endregion
-export { Badge, badgeVariants, BadgeComponent as default };
+export { Badge, BadgeComponent as default };
 
 //# sourceMappingURL=badge.js.map

package/dist/ui/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../resources/js/ui/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-lt-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-lt-icon-xs gap-1 [&>svg]:pointer-events-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-lt-primary text-lt-primary-fg [a&]:hover:bg-lt-primary-hover\",\n        secondary:\n          \"border-transparent bg-lt-secondary text-lt-secondary-fg [a&]:hover:bg-lt-secondary-hover\",\n        destructive:\n          \"border-transparent bg-lt-danger text-lt-danger-fg [a&]:hover:bg-lt-danger-hover focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 dark:bg-lt-danger/60\",\n        outline: \"border-lt-border text-lt-fg [a&]:hover:bg-lt-accent [a&]:hover:text-lt-accent-fg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nconst BadgeComponent: RendererComponent<\"badge\"> = ({ node }) => (\n  <Badge variant=\"secondary\" className=\"w-fit px-3 py-1\">\n    {node.props.label}\n  </Badge>\n);\n\nexport default BadgeComponent;\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IACpB,8ZACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,aACE;EACF,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,UAAU,OACV,GAAG,SACyF;CAG5F,OACE,oBAHW,UAAU,OAAO,QAG5B;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F;AAEA,IAAM,kBAA8C,EAAE,WACpD,oBAAC,OAAD;CAAO,SAAQ;CAAY,WAAU;WAClC,KAAK,MAAM;AACP,CAAA"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../resources/js/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport type { Color } from \"@lattice-php/lattice/types/generated\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nfunction Badge({\n  color,\n  className,\n  style,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"color\"> & { color?: Color | string | null }) {\n  const tone = toneProps(coerceColor(color ?? undefined) ?? namedColor(\"gray\"));\n\n  return (\n    <span\n      data-slot=\"badge\"\n      className={cn(\"lt-badge\", tone.className, className)}\n      style={{ ...tone.style, ...style }}\n      {...props}\n    />\n  );\n}\n\nconst BadgeComponent: RendererComponent<\"badge\"> = ({ node }) => (\n  <Badge color={node.props.color}>{node.props.label}</Badge>\n);\n\nexport default BadgeComponent;\nexport { Badge };\n"],"mappings":";;;;;AAMA,SAAS,MAAM,EACb,OACA,WACA,OACA,GAAG,SAC+E;CAClF,MAAM,OAAO,UAAU,YAAY,SAAS,KAAA,CAAS,KAAK,WAAW,MAAM,CAAC;CAE5E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,YAAY,KAAK,WAAW,SAAS;EACnD,OAAO;GAAE,GAAG,KAAK;GAAO,GAAG;EAAM;EACjC,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,kBAA8C,EAAE,WACpD,oBAAC,OAAD;CAAO,OAAO,KAAK,MAAM;WAAQ,KAAK,MAAM;AAAa,CAAA"}

package/dist/ui/button.d.ts

@@ -1,13 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import { RendererComponent } from '../core/types.js';
-import { ButtonVariant } from '../types/generated.js';
+import { Emphasis, Variant } from '../types/generated.js';
 import * as React from "react";
-export type { ButtonVariant };
+export type { Emphasis, Variant };
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "ghost" | "info" | "outline" | "secondary" | "success" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
+    emphasis?: "link" | "solid" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, icon, children, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, emphasis, size, asChild, icon, children, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
     /** Leading icon glyph. Ignored with `asChild` (Slot needs a single child). */
     icon?: string;

package/dist/ui/button.js

@@ -9,31 +9,165 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 //#region resources/js/ui/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", {
 	variants: {
-		variant: {
-			default: "bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
-			destructive: "bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
-			success: "bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
-			info: "bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
+		emphasis: {
+			solid: "shadow-lt-xs disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
 			outline: "border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none",
-			secondary: "bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none",
 			ghost: "hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg",
-			link: "text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline"
+			link: "underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline"
+		},
+		variant: {
+			primary: "",
+			secondary: "",
+			success: "",
+			info: "",
+			warning: "",
+			danger: ""
 		},
 		size: {
-			default: "h-lt-control-md px-4 py-2 has-[>svg]:px-3",
+			md: "h-lt-control-md px-4 py-2 has-[>svg]:px-3",
 			sm: "h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5",
 			lg: "h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4",
 			icon: "size-lt-control-md"
 		}
 	},
+	compoundVariants: [
+		{
+			emphasis: "solid",
+			variant: "primary",
+			class: "bg-lt-primary text-lt-primary-fg hover:bg-lt-primary-hover active:bg-lt-primary-active"
+		},
+		{
+			emphasis: "solid",
+			variant: "secondary",
+			class: "bg-lt-secondary text-lt-secondary-fg hover:bg-lt-secondary-hover active:bg-lt-secondary-active"
+		},
+		{
+			emphasis: "solid",
+			variant: "success",
+			class: "bg-lt-success text-lt-success-fg hover:bg-lt-success-hover active:bg-lt-success-active"
+		},
+		{
+			emphasis: "solid",
+			variant: "info",
+			class: "bg-lt-info text-lt-info-fg hover:bg-lt-info-hover active:bg-lt-info-active"
+		},
+		{
+			emphasis: "solid",
+			variant: "warning",
+			class: "bg-lt-warning text-lt-warning-fg hover:bg-lt-warning-hover active:bg-lt-warning-active"
+		},
+		{
+			emphasis: "solid",
+			variant: "danger",
+			class: "bg-lt-danger text-lt-danger-fg hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40"
+		},
+		{
+			emphasis: "outline",
+			variant: "primary",
+			class: "border-lt-primary/40 text-lt-primary hover:bg-lt-primary/10 hover:text-lt-primary"
+		},
+		{
+			emphasis: "outline",
+			variant: "secondary",
+			class: "border-lt-secondary text-lt-secondary-fg hover:bg-lt-secondary hover:text-lt-secondary-fg"
+		},
+		{
+			emphasis: "outline",
+			variant: "success",
+			class: "border-lt-success/40 text-lt-success hover:bg-lt-success/10 hover:text-lt-success"
+		},
+		{
+			emphasis: "outline",
+			variant: "info",
+			class: "border-lt-info/40 text-lt-info hover:bg-lt-info/10 hover:text-lt-info"
+		},
+		{
+			emphasis: "outline",
+			variant: "warning",
+			class: "border-lt-warning/40 text-lt-warning hover:bg-lt-warning/10 hover:text-lt-warning"
+		},
+		{
+			emphasis: "outline",
+			variant: "danger",
+			class: "border-lt-danger/40 text-lt-danger hover:bg-lt-danger/10 hover:text-lt-danger"
+		},
+		{
+			emphasis: "ghost",
+			variant: "primary",
+			class: "text-lt-primary hover:bg-lt-primary/10 hover:text-lt-primary"
+		},
+		{
+			emphasis: "ghost",
+			variant: "secondary",
+			class: "text-lt-secondary-fg hover:bg-lt-secondary hover:text-lt-secondary-fg"
+		},
+		{
+			emphasis: "ghost",
+			variant: "success",
+			class: "text-lt-success hover:bg-lt-success/10 hover:text-lt-success"
+		},
+		{
+			emphasis: "ghost",
+			variant: "info",
+			class: "text-lt-info hover:bg-lt-info/10 hover:text-lt-info"
+		},
+		{
+			emphasis: "ghost",
+			variant: "warning",
+			class: "text-lt-warning hover:bg-lt-warning/10 hover:text-lt-warning"
+		},
+		{
+			emphasis: "ghost",
+			variant: "danger",
+			class: "text-lt-danger hover:bg-lt-danger/10 hover:text-lt-danger"
+		},
+		{
+			emphasis: "link",
+			variant: "primary",
+			class: "text-lt-primary"
+		},
+		{
+			emphasis: "link",
+			variant: "secondary",
+			class: "text-lt-secondary-fg"
+		},
+		{
+			emphasis: "link",
+			variant: "success",
+			class: "text-lt-success"
+		},
+		{
+			emphasis: "link",
+			variant: "info",
+			class: "text-lt-info"
+		},
+		{
+			emphasis: "link",
+			variant: "warning",
+			class: "text-lt-warning"
+		},
+		{
+			emphasis: "link",
+			variant: "danger",
+			class: "text-lt-danger"
+		}
+	],
 	defaultVariants: {
-		variant: "default",
-		size: "default"
+		emphasis: "solid",
+		size: "md"
 	}
 });
-function Button({ className, variant, size, asChild = false, icon, children, ...props }) {
+/**
+* Solid and link buttons read as primary when no variant is given; outline and
+* ghost stay neutral so chrome buttons do not turn teal by default.
+*/
+function resolveButtonVariant(emphasis, variant) {
+	if (variant) return variant;
+	return (emphasis ?? "solid") === "solid" || emphasis === "link" ? "primary" : void 0;
+}
+function Button({ className, variant, emphasis, size, asChild = false, icon, children, ...props }) {
 	const Comp = asChild ? Slot : "button";
 	const content = icon && !asChild ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
 		name: icon,
@@ -42,7 +176,8 @@ function Button({ className, variant, size, asChild = false, icon, children, ...
 	return /* @__PURE__ */ jsx(Comp, {
 		"data-slot": "button",
 		className: cn(buttonVariants({
-			variant,
+			emphasis,
+			variant: resolveButtonVariant(emphasis, variant),
 			size,
 			className
 		})),
@@ -52,10 +187,11 @@ function Button({ className, variant, size, asChild = false, icon, children, ...
 }
 var ButtonComponent = ({ node }) => {
 	const { label, icon } = node.props;
-	const variant = node.props.variant ?? "default";
+	const variant = node.props.variant ?? null;
+	const emphasis = node.props.emphasis ?? "solid";
 	const testId = nodeIdentity(node);
 	const behavior = useClickBehavior(node.props);
-	const size = icon ? "icon" : "default";
+	const size = icon ? "icon" : "md";
 	const content = icon ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconRenderer, {
 		className: "size-lt-icon-md",
 		icon
@@ -66,6 +202,7 @@ var ButtonComponent = ({ node }) => {
 	const triggerButton = ({ onClick, processing }) => /* @__PURE__ */ jsx(Button, {
 		"data-test": testId,
 		disabled: processing,
+		emphasis,
 		onClick,
 		size,
 		variant,
@@ -74,6 +211,7 @@ var ButtonComponent = ({ node }) => {
 	if (behavior.kind === "navigate") return /* @__PURE__ */ jsx(Button, {
 		asChild: true,
 		"data-test": testId,
+		emphasis,
 		variant,
 		size,
 		children: /* @__PURE__ */ jsx(Link, {
@@ -92,6 +230,7 @@ var ButtonComponent = ({ node }) => {
 	});
 	return /* @__PURE__ */ jsx(Button, {
 		"data-test": testId,
+		emphasis,
 		size,
 		type: node.props.buttonType,
 		variant,

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../resources/js/ui/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Icon, IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { ActionTrigger, type TriggerState, useClickBehavior } from \"./click-behavior\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { ButtonVariant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        success:\n          \"bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        info: \"bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        secondary:\n          \"bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      size: {\n        default: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  icon,\n  children,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** Leading icon glyph. Ignored with `asChild` (Slot needs a single child). */\n    icon?: string;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n  const content =\n    icon && !asChild ? (\n      <>\n        <Icon name={icon} aria-hidden=\"true\" />\n        {children}\n      </>\n    ) : (\n      children\n    );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {content}\n    </Comp>\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { label, icon } = node.props;\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n  const behavior = useClickBehavior(node.props);\n  const size = icon ? \"icon\" : \"default\";\n  const content = icon ? (\n    <>\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </>\n  ) : (\n    label\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <Button\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      size={size}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n\n  if (behavior.kind === \"navigate\") {\n    return (\n      <Button asChild data-test={testId} variant={variant} size={size}>\n        <Link href={behavior.href} method={behavior.method}>\n          {content}\n        </Link>\n      </Button>\n    );\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    <Button data-test={testId} size={size} type={node.props.buttonType} variant={variant}>\n      {content}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,MACA,UACA,GAAG,SAMA;CACH,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,UACJ,QAAQ,CAAC,UACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,MAAM;EAAM,eAAY;CAAQ,CAAA,GACrC,QACD,EAAA,CAAA,IAEF;CAGJ,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;YAEH;CACG,CAAA;AAEV;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,OAAO,SAAS,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,UAAU,OACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EAAc,WAAU;EAAwB;CAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAGF,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,QAAD;EACE,aAAW;EACX,UAAU;EACD;EACH;EACG;YAER;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,YACpB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAe;YACzD,oBAAC,MAAD;GAAM,MAAM,SAAS;GAAM,QAAQ,SAAS;aACzC;EACG,CAAA;CACA,CAAA;CAIZ,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,QAAD;EAAQ,aAAW;EAAc;EAAM,MAAM,KAAK,MAAM;EAAqB;YAC1E;CACK,CAAA;AAEZ"}
+{"version":3,"file":"button.js","names":[],"sources":["../../resources/js/ui/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Icon, IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { ActionTrigger, type TriggerState, useClickBehavior } from \"./click-behavior\";\nimport type { Emphasis, Variant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { Emphasis, Variant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      emphasis: {\n        solid:\n          \"shadow-lt-xs disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      variant: {\n        primary: \"\",\n        secondary: \"\",\n        success: \"\",\n        info: \"\",\n        warning: \"\",\n        danger: \"\",\n      },\n      size: {\n        md: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    compoundVariants: [\n      {\n        emphasis: \"solid\",\n        variant: \"primary\",\n        class:\n          \"bg-lt-primary text-lt-primary-fg hover:bg-lt-primary-hover active:bg-lt-primary-active\",\n      },\n      {\n        emphasis: \"solid\",\n        variant: \"secondary\",\n        class:\n          \"bg-lt-secondary text-lt-secondary-fg hover:bg-lt-secondary-hover active:bg-lt-secondary-active\",\n      },\n      {\n        emphasis: \"solid\",\n        variant: \"success\",\n        class:\n          \"bg-lt-success text-lt-success-fg hover:bg-lt-success-hover active:bg-lt-success-active\",\n      },\n      {\n        emphasis: \"solid\",\n        variant: \"info\",\n        class: \"bg-lt-info text-lt-info-fg hover:bg-lt-info-hover active:bg-lt-info-active\",\n      },\n      {\n        emphasis: \"solid\",\n        variant: \"warning\",\n        class:\n          \"bg-lt-warning text-lt-warning-fg hover:bg-lt-warning-hover active:bg-lt-warning-active\",\n      },\n      {\n        emphasis: \"solid\",\n        variant: \"danger\",\n        class:\n          \"bg-lt-danger text-lt-danger-fg hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"primary\",\n        class: \"border-lt-primary/40 text-lt-primary hover:bg-lt-primary/10 hover:text-lt-primary\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"secondary\",\n        class:\n          \"border-lt-secondary text-lt-secondary-fg hover:bg-lt-secondary hover:text-lt-secondary-fg\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"success\",\n        class: \"border-lt-success/40 text-lt-success hover:bg-lt-success/10 hover:text-lt-success\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"info\",\n        class: \"border-lt-info/40 text-lt-info hover:bg-lt-info/10 hover:text-lt-info\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"warning\",\n        class: \"border-lt-warning/40 text-lt-warning hover:bg-lt-warning/10 hover:text-lt-warning\",\n      },\n      {\n        emphasis: \"outline\",\n        variant: \"danger\",\n        class: \"border-lt-danger/40 text-lt-danger hover:bg-lt-danger/10 hover:text-lt-danger\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"primary\",\n        class: \"text-lt-primary hover:bg-lt-primary/10 hover:text-lt-primary\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"secondary\",\n        class: \"text-lt-secondary-fg hover:bg-lt-secondary hover:text-lt-secondary-fg\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"success\",\n        class: \"text-lt-success hover:bg-lt-success/10 hover:text-lt-success\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"info\",\n        class: \"text-lt-info hover:bg-lt-info/10 hover:text-lt-info\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"warning\",\n        class: \"text-lt-warning hover:bg-lt-warning/10 hover:text-lt-warning\",\n      },\n      {\n        emphasis: \"ghost\",\n        variant: \"danger\",\n        class: \"text-lt-danger hover:bg-lt-danger/10 hover:text-lt-danger\",\n      },\n      { emphasis: \"link\", variant: \"primary\", class: \"text-lt-primary\" },\n      { emphasis: \"link\", variant: \"secondary\", class: \"text-lt-secondary-fg\" },\n      { emphasis: \"link\", variant: \"success\", class: \"text-lt-success\" },\n      { emphasis: \"link\", variant: \"info\", class: \"text-lt-info\" },\n      { emphasis: \"link\", variant: \"warning\", class: \"text-lt-warning\" },\n      { emphasis: \"link\", variant: \"danger\", class: \"text-lt-danger\" },\n    ],\n    defaultVariants: {\n      emphasis: \"solid\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Solid and link buttons read as primary when no variant is given; outline and\n * ghost stay neutral so chrome buttons do not turn teal by default.\n */\nfunction resolveButtonVariant(\n  emphasis: Emphasis | null | undefined,\n  variant: Variant | null | undefined,\n): Variant | undefined {\n  if (variant) {\n    return variant;\n  }\n\n  return (emphasis ?? \"solid\") === \"solid\" || emphasis === \"link\" ? \"primary\" : undefined;\n}\n\nfunction Button({\n  className,\n  variant,\n  emphasis,\n  size,\n  asChild = false,\n  icon,\n  children,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** Leading icon glyph. Ignored with `asChild` (Slot needs a single child). */\n    icon?: string;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n  const content =\n    icon && !asChild ? (\n      <>\n        <Icon name={icon} aria-hidden=\"true\" />\n        {children}\n      </>\n    ) : (\n      children\n    );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(\n        buttonVariants({\n          emphasis,\n          variant: resolveButtonVariant(emphasis, variant),\n          size,\n          className,\n        }),\n      )}\n      {...props}\n    >\n      {content}\n    </Comp>\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { label, icon } = node.props;\n  const variant = node.props.variant ?? null;\n  const emphasis = node.props.emphasis ?? \"solid\";\n  const testId = nodeIdentity(node);\n  const behavior = useClickBehavior(node.props);\n  const size = icon ? \"icon\" : \"md\";\n  const content = icon ? (\n    <>\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </>\n  ) : (\n    label\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <Button\n      data-test={testId}\n      disabled={processing}\n      emphasis={emphasis}\n      onClick={onClick}\n      size={size}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n\n  if (behavior.kind === \"navigate\") {\n    return (\n      <Button asChild data-test={testId} emphasis={emphasis} variant={variant} size={size}>\n        <Link href={behavior.href} method={behavior.method}>\n          {content}\n        </Link>\n      </Button>\n    );\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    <Button\n      data-test={testId}\n      emphasis={emphasis}\n      size={size}\n      type={node.props.buttonType}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,iBAAiB,IACrB,udACA;CACE,UAAU;EACR,UAAU;GACR,OACE;GACF,SACE;GACF,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;EACV;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,kBAAkB;EAChB;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OACE;EACJ;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GACE,UAAU;GACV,SAAS;GACT,OAAO;EACT;EACA;GAAE,UAAU;GAAQ,SAAS;GAAW,OAAO;EAAkB;EACjE;GAAE,UAAU;GAAQ,SAAS;GAAa,OAAO;EAAuB;EACxE;GAAE,UAAU;GAAQ,SAAS;GAAW,OAAO;EAAkB;EACjE;GAAE,UAAU;GAAQ,SAAS;GAAQ,OAAO;EAAe;EAC3D;GAAE,UAAU;GAAQ,SAAS;GAAW,OAAO;EAAkB;EACjE;GAAE,UAAU;GAAQ,SAAS;GAAU,OAAO;EAAiB;CACjE;CACA,iBAAiB;EACf,UAAU;EACV,MAAM;CACR;AACF,CACF;;;;;AAMA,SAAS,qBACP,UACA,SACqB;CACrB,IAAI,SACF,OAAO;CAGT,QAAQ,YAAY,aAAa,WAAW,aAAa,SAAS,YAAY,KAAA;AAChF;AAEA,SAAS,OAAO,EACd,WACA,SACA,UACA,MACA,UAAU,OACV,MACA,UACA,GAAG,SAMA;CACH,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,UACJ,QAAQ,CAAC,UACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,MAAM;EAAM,eAAY;CAAQ,CAAA,GACrC,QACD,EAAA,CAAA,IAEF;CAGJ,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,eAAe;GACb;GACA,SAAS,qBAAqB,UAAU,OAAO;GAC/C;GACA;EACF,CAAC,CACH;EACA,GAAI;YAEH;CACG,CAAA;AAEV;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,OAAO,SAAS,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,UAAU,OACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EAAc,WAAU;EAAwB;CAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAGF,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,QAAD;EACE,aAAW;EACX,UAAU;EACA;EACD;EACH;EACG;YAER;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,YACpB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAkB;EAAmB;EAAe;YAC7E,oBAAC,MAAD;GAAM,MAAM,SAAS;GAAM,QAAQ,SAAS;aACzC;EACG,CAAA;CACA,CAAA;CAIZ,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,QAAD;EACE,aAAW;EACD;EACJ;EACN,MAAM,KAAK,MAAM;EACR;YAER;CACK,CAAA;AAEZ"}

package/dist/ui/chart-view.js

@@ -38,15 +38,17 @@ var tooltipProps = {
 	labelStyle: { color: "var(--lt-muted-fg)" }
 };
 var palette = [
-	"var(--lt-primary)",
-	"var(--lt-success)",
-	"var(--lt-info)",
-	"var(--lt-warning)",
-	"var(--lt-danger)",
-	"var(--lt-muted-fg)"
+	"var(--lt-chart-1)",
+	"var(--lt-chart-2)",
+	"var(--lt-chart-3)",
+	"var(--lt-chart-4)",
+	"var(--lt-chart-5)",
+	"var(--lt-chart-6)",
+	"var(--lt-chart-7)",
+	"var(--lt-chart-8)"
 ];
 function colorAt(index) {
-	return palette[index % palette.length] ?? "var(--lt-primary)";
+	return palette[index % palette.length] ?? "var(--lt-chart-1)";
 }
 function datumColor(datum, series, index) {
 	if (isRecord(datum)) {