@lattice-php/lattice 0.36.0 → 0.37.0

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

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

package/dist/form/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/index.js';
+export { FormFieldFrame, type FormFieldControlProps } from './components/base/field.js';
 export { FormValuesProvider } from './hooks/values.js';
 export { formComponents } from './plugin.js';
 export type * from './types.js';

package/dist/form/index.js

@@ -1,4 +1,5 @@
 import { FormValuesProvider } from "./hooks/values.js";
+import { FormFieldFrame } from "./components/base/field.js";
 import { BuilderComponent } from "./components/fields/builder.js";
 import { CheckboxComponent } from "./components/fields/checkbox.js";
 import { ChoiceComponent } from "./components/fields/choice.js";
@@ -19,4 +20,4 @@ import { TimeInputComponent } from "./components/fields/time-input.js";
 import { ToggleComponent } from "./components/fields/toggle.js";
 import { WizardComponent, WizardStepComponent } from "./components/wizard.js";
 import { formComponents } from "./plugin.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, ColorPickerFieldComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, FormValuesProvider, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent, WizardComponent, WizardStepComponent, formComponents };
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, ColorPickerFieldComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, FormFieldFrame, FormValuesProvider, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent, WizardComponent, WizardStepComponent, formComponents };

package/dist/form/toolkit.d.ts

@@ -2,7 +2,7 @@
  * Entry point for building custom form fields outside the package. Form
  * modules not re-exported here are internal and may change without notice.
  */
-export { FormFieldFrame } from './components/base/field.js';
+export { FormFieldFrame, type FormFieldControlProps } from './components/base/field.js';
 export { useFormContext } from './hooks/context.js';
 export { FieldScopeProvider, useFieldScope } from './hooks/field-scope.js';
 export { fieldProps, walkFields } from './lib/field-props.js';

package/dist/lattice.css

@@ -97,6 +97,9 @@
   --lt-control-h-md: 2.25rem;
   --lt-control-h-lg: 2.5rem;
 
+  /* >= 1rem, or iOS Safari auto-zooms the page on focus */
+  --lt-input-font-size-mobile: 1rem;
+
   /* Table cell padding — table density lever */
   --lt-table-cell-x: calc(var(--spacing) * 4);
   --lt-table-cell-y: calc(var(--spacing) * 4);
@@ -588,6 +591,19 @@
   }
 }
 
+/* iOS Safari auto-zooms when a focused control computes below 16px; unlayered
+   so it beats the text-size utilities on the components. */
+@media (width < theme(--breakpoint-md)) {
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="native-select"],
+  [data-slot="combobox-search"],
+  [data-slot="prompt-input"],
+  .lattice-prose[contenteditable="true"] {
+    font-size: var(--lt-input-font-size-mobile);
+  }
+}
+
 .lt-badge {
   display: inline-flex;
   align-items: center;

package/dist/table/components/column-visibility-menu.js

@@ -1,7 +1,7 @@
 import { useT } from "../../i18n/instance.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
-import { Checkbox } from "../../ui/checkbox.js";
 import { IconButton } from "../../ui/icon-button.js";
+import { Checkbox } from "../../ui/checkbox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/column-visibility-menu.tsx
 function ColumnVisibilityMenu({ columns, hasHidden, isVisible, onReset, onToggle, processing, visibleColumnCount }) {

package/dist/table/components/filter-controls.js

@@ -8,8 +8,8 @@ import { ResolvedNodesProvider } from "../../form/hooks/resolved-nodes.js";
 import { FormValuesProvider, useFormValues, useSetFormValue } from "../../form/hooks/values.js";
 import { FieldCommitOverrideProvider } from "../../form/hooks/use-field-commit.js";
 import { TableCellProvider } from "../../form/hooks/row-layout-context.js";
-import { Checkbox } from "../../ui/checkbox.js";
 import { IconButton } from "../../ui/icon-button.js";
+import { Checkbox } from "../../ui/checkbox.js";
 import { filterValue, isActiveFilterValue } from "../lib/filter-values.js";
 import { isTruthy } from "../../lib/is-truthy.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/table/components/filter-value-input.js

@@ -1,8 +1,8 @@
 import { useT } from "../../i18n/instance.js";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
-import { Input } from "../../ui/input.js";
 import { IconButton } from "../../ui/icon-button.js";
+import { Input } from "../../ui/input.js";
 import { NativeSelect } from "../../ui/native-select.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/table/components/table-search.js

@@ -2,8 +2,8 @@ import { useT } from "../../i18n/instance.js";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useDebouncedCallback } from "../../lib/use-debounced-callback.js";
-import { Input } from "../../ui/input.js";
 import { IconButton } from "../../ui/icon-button.js";
+import { Input } from "../../ui/input.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table-search.tsx

package/dist/types/generated.d.ts

@@ -322,6 +322,13 @@ export type Choice = {
 export type CloseModal = {
     readonly modal: string | null;
 };
+export type CodeBlock = {
+    code: string;
+    copyable: boolean;
+    language: CodeBlockLanguage;
+    wrap: boolean;
+};
+export type CodeBlockLanguage = "text" | "json" | "javascript" | "shell" | "php";
 export type Collapsible = {
     collapsed: boolean;
     rememberState: boolean;
@@ -409,6 +416,7 @@ export type ComponentPropsMap = {
     "chat.box": ChatBox;
     "chat.part.text": TextPart;
     "chat.part.tool-call": ToolCallPart;
+    "code-block": CodeBlock;
     collapsible: Collapsible;
     dropdown: Dropdown;
     "field.builder": Builder;
@@ -841,7 +849,7 @@ 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" | "wizard" | "wizard-step";
+export type NodeType = "action" | "action.bulk" | "action.group" | "avatar" | "badge" | "breadcrumbs" | "button" | "callouts" | "card" | "chart" | "chat.box" | "chat.part.text" | "chat.part.tool-call" | "code-block" | "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: Translatable | string | null;
@@ -1390,7 +1398,7 @@ export type Translatable = {
     payload: Record<string, string>;
     replacements: Record<string, string | number | boolean>;
 };
-export type UiNodeType = "avatar" | "badge" | "button" | "card" | "chart" | "collapsible" | "floating-panel" | "grid" | "heading" | "icon" | "image" | "link" | "modal" | "progress" | "raw-block" | "section" | "segmented-control" | "separator" | "stack" | "tab" | "tabs" | "text" | "tooltip";
+export type UiNodeType = "avatar" | "badge" | "button" | "card" | "chart" | "code-block" | "collapsible" | "floating-panel" | "grid" | "heading" | "icon" | "image" | "link" | "modal" | "progress" | "raw-block" | "section" | "segmented-control" | "separator" | "stack" | "tab" | "tabs" | "text" | "tooltip";
 export type UnreadCount = {
     readonly unreadCount: number;
 };

package/dist/ui/code-block-view.d.ts

@@ -0,0 +1,3 @@
+import { CodeBlockViewProps } from './code-block.js';
+declare function CodeBlockView({ children, copyable, language, wrap }: CodeBlockViewProps): import("react").JSX.Element;
+export default CodeBlockView;

package/dist/ui/code-block-view.js

@@ -0,0 +1,115 @@
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { php } from "@codemirror/lang-php";
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+//#region resources/js/ui/code-block-view.tsx
+var languages = {
+	text: [],
+	json: json(),
+	javascript: javascript(),
+	shell: StreamLanguage.define(shell),
+	php: php()
+};
+var highlightStyle = HighlightStyle.define([
+	{
+		tag: tags.comment,
+		color: "var(--lt-muted-fg)",
+		fontStyle: "italic"
+	},
+	{
+		tag: [
+			tags.keyword,
+			tags.operatorKeyword,
+			tags.controlKeyword
+		],
+		color: "var(--lt-primary)"
+	},
+	{
+		tag: [tags.string, tags.special(tags.string)],
+		color: "var(--lt-success)"
+	},
+	{
+		tag: [
+			tags.number,
+			tags.bool,
+			tags.null
+		],
+		color: "var(--lt-info)"
+	},
+	{
+		tag: [tags.function(tags.variableName), tags.labelName],
+		color: "var(--lt-accent-fg)"
+	},
+	{
+		tag: [tags.typeName, tags.className],
+		color: "var(--lt-danger)"
+	},
+	{
+		tag: tags.meta,
+		color: "var(--lt-muted-fg)"
+	}
+]);
+var codeBlockTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "transparent",
+		color: "var(--lt-fg)",
+		fontSize: "0.75rem"
+	},
+	".cm-scroller": {
+		fontFamily: "var(--lt-font-mono)",
+		lineHeight: "1.5",
+		overflow: "auto"
+	},
+	".cm-content": { padding: "0.75rem" },
+	".cm-line": { padding: "0" }
+});
+var copyableTheme = EditorView.theme({ ".cm-content": { padding: "2.75rem 0.75rem 0.75rem" } });
+function CodeBlockView({ children, copyable, language, wrap }) {
+	const container = useRef(null);
+	useEffect(() => {
+		if (!container.current) return;
+		const languageCompartment = new Compartment();
+		const customLanguage = typeof language === "function" ? language : null;
+		const initialLanguage = typeof language === "function" ? [] : languages[language];
+		const view = new EditorView({
+			doc: children,
+			parent: container.current,
+			extensions: [
+				EditorState.readOnly.of(true),
+				EditorView.editable.of(false),
+				EditorView.contentAttributes.of({ role: "code" }),
+				languageCompartment.of(initialLanguage),
+				syntaxHighlighting(highlightStyle),
+				codeBlockTheme,
+				copyable ? copyableTheme : [],
+				wrap ? EditorView.lineWrapping : []
+			]
+		});
+		let active = true;
+		if (customLanguage) customLanguage().then((extension) => {
+			if (active) view.dispatch({ effects: languageCompartment.reconfigure(extension) });
+		}).catch((error) => {
+			if (active) console.warn("[lattice] CodeBlock language failed to load.", error);
+		});
+		return () => {
+			active = false;
+			view.destroy();
+		};
+	}, [
+		children,
+		copyable,
+		language,
+		wrap
+	]);
+	return /* @__PURE__ */ jsx("div", { ref: container });
+}
+//#endregion
+export { CodeBlockView as default };
+
+//# sourceMappingURL=code-block-view.js.map

package/dist/ui/code-block-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-view.js","names":[],"sources":["../../resources/js/ui/code-block-view.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { javascript } from \"@codemirror/lang-javascript\";\nimport { json } from \"@codemirror/lang-json\";\nimport { php } from \"@codemirror/lang-php\";\nimport { HighlightStyle, StreamLanguage, syntaxHighlighting } from \"@codemirror/language\";\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\";\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { tags } from \"@lezer/highlight\";\nimport type { CodeBlockLanguage, CodeBlockViewProps } from \"./code-block\";\n\nconst languages: Record<CodeBlockLanguage, Extension> = {\n  text: [],\n  json: json(),\n  javascript: javascript(),\n  shell: StreamLanguage.define(shell),\n  php: php(),\n};\n\nconst highlightStyle = HighlightStyle.define([\n  { tag: tags.comment, color: \"var(--lt-muted-fg)\", fontStyle: \"italic\" },\n  { tag: [tags.keyword, tags.operatorKeyword, tags.controlKeyword], color: \"var(--lt-primary)\" },\n  { tag: [tags.string, tags.special(tags.string)], color: \"var(--lt-success)\" },\n  { tag: [tags.number, tags.bool, tags.null], color: \"var(--lt-info)\" },\n  { tag: [tags.function(tags.variableName), tags.labelName], color: \"var(--lt-accent-fg)\" },\n  { tag: [tags.typeName, tags.className], color: \"var(--lt-danger)\" },\n  { tag: tags.meta, color: \"var(--lt-muted-fg)\" },\n]);\n\nconst codeBlockTheme = EditorView.theme({\n  \"&\": {\n    backgroundColor: \"transparent\",\n    color: \"var(--lt-fg)\",\n    fontSize: \"0.75rem\",\n  },\n  \".cm-scroller\": {\n    fontFamily: \"var(--lt-font-mono)\",\n    lineHeight: \"1.5\",\n    overflow: \"auto\",\n  },\n  \".cm-content\": { padding: \"0.75rem\" },\n  \".cm-line\": { padding: \"0\" },\n});\n\nconst copyableTheme = EditorView.theme({\n  \".cm-content\": { padding: \"2.75rem 0.75rem 0.75rem\" },\n});\n\nfunction CodeBlockView({ children, copyable, language, wrap }: CodeBlockViewProps) {\n  const container = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!container.current) {\n      return;\n    }\n\n    const languageCompartment = new Compartment();\n    const customLanguage = typeof language === \"function\" ? language : null;\n    const initialLanguage = typeof language === \"function\" ? [] : languages[language];\n    const view = new EditorView({\n      doc: children,\n      parent: container.current,\n      extensions: [\n        EditorState.readOnly.of(true),\n        EditorView.editable.of(false),\n        EditorView.contentAttributes.of({ role: \"code\" }),\n        languageCompartment.of(initialLanguage),\n        syntaxHighlighting(highlightStyle),\n        codeBlockTheme,\n        copyable ? copyableTheme : [],\n        wrap ? EditorView.lineWrapping : [],\n      ],\n    });\n    let active = true;\n\n    if (customLanguage) {\n      void customLanguage()\n        .then((extension) => {\n          if (active) {\n            view.dispatch({ effects: languageCompartment.reconfigure(extension) });\n          }\n        })\n        .catch((error: unknown) => {\n          if (active) {\n            console.warn(\"[lattice] CodeBlock language failed to load.\", error);\n          }\n        });\n    }\n\n    return () => {\n      active = false;\n      view.destroy();\n    };\n  }, [children, copyable, language, wrap]);\n\n  return <div ref={container} />;\n}\n\nexport default CodeBlockView;\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,YAAkD;CACtD,MAAM,CAAC;CACP,MAAM,KAAK;CACX,YAAY,WAAW;CACvB,OAAO,eAAe,OAAO,KAAK;CAClC,KAAK,IAAI;AACX;AAEA,IAAM,iBAAiB,eAAe,OAAO;CAC3C;EAAE,KAAK,KAAK;EAAS,OAAO;EAAsB,WAAW;CAAS;CACtE;EAAE,KAAK;GAAC,KAAK;GAAS,KAAK;GAAiB,KAAK;EAAc;EAAG,OAAO;CAAoB;CAC7F;EAAE,KAAK,CAAC,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,CAAC;EAAG,OAAO;CAAoB;CAC5E;EAAE,KAAK;GAAC,KAAK;GAAQ,KAAK;GAAM,KAAK;EAAI;EAAG,OAAO;CAAiB;CACpE;EAAE,KAAK,CAAC,KAAK,SAAS,KAAK,YAAY,GAAG,KAAK,SAAS;EAAG,OAAO;CAAsB;CACxF;EAAE,KAAK,CAAC,KAAK,UAAU,KAAK,SAAS;EAAG,OAAO;CAAmB;CAClE;EAAE,KAAK,KAAK;EAAM,OAAO;CAAqB;AAChD,CAAC;AAED,IAAM,iBAAiB,WAAW,MAAM;CACtC,KAAK;EACH,iBAAiB;EACjB,OAAO;EACP,UAAU;CACZ;CACA,gBAAgB;EACd,YAAY;EACZ,YAAY;EACZ,UAAU;CACZ;CACA,eAAe,EAAE,SAAS,UAAU;CACpC,YAAY,EAAE,SAAS,IAAI;AAC7B,CAAC;AAED,IAAM,gBAAgB,WAAW,MAAM,EACrC,eAAe,EAAE,SAAS,0BAA0B,EACtD,CAAC;AAED,SAAS,cAAc,EAAE,UAAU,UAAU,UAAU,QAA4B;CACjF,MAAM,YAAY,OAAuB,IAAI;CAE7C,gBAAgB;EACd,IAAI,CAAC,UAAU,SACb;EAGF,MAAM,sBAAsB,IAAI,YAAY;EAC5C,MAAM,iBAAiB,OAAO,aAAa,aAAa,WAAW;EACnE,MAAM,kBAAkB,OAAO,aAAa,aAAa,CAAC,IAAI,UAAU;EACxE,MAAM,OAAO,IAAI,WAAW;GAC1B,KAAK;GACL,QAAQ,UAAU;GAClB,YAAY;IACV,YAAY,SAAS,GAAG,IAAI;IAC5B,WAAW,SAAS,GAAG,KAAK;IAC5B,WAAW,kBAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;IAChD,oBAAoB,GAAG,eAAe;IACtC,mBAAmB,cAAc;IACjC;IACA,WAAW,gBAAgB,CAAC;IAC5B,OAAO,WAAW,eAAe,CAAC;GACpC;EACF,CAAC;EACD,IAAI,SAAS;EAEb,IAAI,gBACF,eAAoB,CAAC,CAClB,MAAM,cAAc;GACnB,IAAI,QACF,KAAK,SAAS,EAAE,SAAS,oBAAoB,YAAY,SAAS,EAAE,CAAC;EAEzE,CAAC,CAAC,CACD,OAAO,UAAmB;GACzB,IAAI,QACF,QAAQ,KAAK,gDAAgD,KAAK;EAEtE,CAAC;EAGL,aAAa;GACX,SAAS;GACT,KAAK,QAAQ;EACf;CACF,GAAG;EAAC;EAAU;EAAU;EAAU;CAAI,CAAC;CAEvC,OAAO,oBAAC,OAAD,EAAK,KAAK,UAAY,CAAA;AAC/B"}

package/dist/ui/code-block.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+import { Extension } from '@codemirror/state';
+import { RendererComponent } from '../core/types.js';
+type CodeBlockLanguage = "text" | "json" | "javascript" | "shell" | "php";
+type CodeBlockLanguageLoader = () => Promise<Extension>;
+interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+    children: string;
+    copyable?: boolean;
+    language?: CodeBlockLanguage | CodeBlockLanguageLoader;
+    wrap?: boolean;
+}
+interface CodeBlockViewProps {
+    children: string;
+    copyable: boolean;
+    language: CodeBlockLanguage | CodeBlockLanguageLoader;
+    wrap: boolean;
+}
+declare function CodeBlock({ "aria-label": ariaLabel, children, className, copyable, language, role, wrap, ...props }: CodeBlockProps): import("react").JSX.Element;
+declare const CodeBlockComponent: RendererComponent<"code-block">;
+export default CodeBlockComponent;
+export { CodeBlock };
+export type { CodeBlockLanguage, CodeBlockLanguageLoader, CodeBlockProps, CodeBlockViewProps };

package/dist/ui/code-block.js

@@ -0,0 +1,43 @@
+import { cn } from "../lib/utils.js";
+import { CopyButton } from "./copyable-text.js";
+import { Suspense, lazy } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/ui/code-block.tsx
+var CodeBlockView = lazy(() => import("./code-block-view.js"));
+function CodeBlock({ "aria-label": ariaLabel, children, className, copyable = false, language = "text", role = ariaLabel ? "region" : void 0, wrap = false, ...props }) {
+	const fallback = /* @__PURE__ */ jsx("pre", {
+		className: cn("max-w-full overflow-x-auto p-3 font-lt-mono text-xs", wrap && "whitespace-pre-wrap wrap-anywhere", copyable && "pt-11"),
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-block",
+		"aria-label": ariaLabel,
+		role,
+		...props,
+		className: cn("relative max-w-full overflow-hidden rounded-lt-sm bg-lt-muted text-lt-fg", className),
+		children: [copyable ? /* @__PURE__ */ jsx(CopyButton, {
+			value: children,
+			label: ariaLabel ?? "code",
+			iconOnly: true,
+			className: "absolute top-2 right-2 z-10 bg-lt-bg/80 hover:bg-lt-bg"
+		}) : null, /* @__PURE__ */ jsx(Suspense, {
+			fallback,
+			children: /* @__PURE__ */ jsx(CodeBlockView, {
+				copyable,
+				language,
+				wrap,
+				children
+			})
+		})]
+	});
+}
+var CodeBlockComponent = ({ node }) => /* @__PURE__ */ jsx(CodeBlock, {
+	copyable: node.props.copyable,
+	language: node.props.language,
+	wrap: node.props.wrap,
+	children: node.props.code
+});
+//#endregion
+export { CodeBlock, CodeBlockComponent as default };
+
+//# sourceMappingURL=code-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","names":[],"sources":["../../resources/js/ui/code-block.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport type { Extension } from \"@codemirror/state\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { CopyButton } from \"./copyable-text\";\n\nconst CodeBlockView = lazy(() => import(\"./code-block-view\"));\n\ntype CodeBlockLanguage = \"text\" | \"json\" | \"javascript\" | \"shell\" | \"php\";\ntype CodeBlockLanguageLoader = () => Promise<Extension>;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  children: string;\n  copyable?: boolean;\n  language?: CodeBlockLanguage | CodeBlockLanguageLoader;\n  wrap?: boolean;\n}\n\ninterface CodeBlockViewProps {\n  children: string;\n  copyable: boolean;\n  language: CodeBlockLanguage | CodeBlockLanguageLoader;\n  wrap: boolean;\n}\n\nfunction CodeBlock({\n  \"aria-label\": ariaLabel,\n  children,\n  className,\n  copyable = false,\n  language = \"text\",\n  role = ariaLabel ? \"region\" : undefined,\n  wrap = false,\n  ...props\n}: CodeBlockProps) {\n  const fallback = (\n    <pre\n      className={cn(\n        \"max-w-full overflow-x-auto p-3 font-lt-mono text-xs\",\n        wrap && \"whitespace-pre-wrap wrap-anywhere\",\n        copyable && \"pt-11\",\n      )}\n    >\n      {children}\n    </pre>\n  );\n\n  return (\n    <div\n      data-slot=\"code-block\"\n      aria-label={ariaLabel}\n      role={role}\n      {...props}\n      className={cn(\n        \"relative max-w-full overflow-hidden rounded-lt-sm bg-lt-muted text-lt-fg\",\n        className,\n      )}\n    >\n      {copyable ? (\n        <CopyButton\n          value={children}\n          label={ariaLabel ?? \"code\"}\n          iconOnly\n          className=\"absolute top-2 right-2 z-10 bg-lt-bg/80 hover:bg-lt-bg\"\n        />\n      ) : null}\n      <Suspense fallback={fallback}>\n        <CodeBlockView copyable={copyable} language={language} wrap={wrap}>\n          {children}\n        </CodeBlockView>\n      </Suspense>\n    </div>\n  );\n}\n\nconst CodeBlockComponent: RendererComponent<\"code-block\"> = ({ node }) => (\n  <CodeBlock copyable={node.props.copyable} language={node.props.language} wrap={node.props.wrap}>\n    {node.props.code}\n  </CodeBlock>\n);\n\nexport default CodeBlockComponent;\nexport { CodeBlock };\nexport type { CodeBlockLanguage, CodeBlockLanguageLoader, CodeBlockProps, CodeBlockViewProps };\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,WAAW,OAAO,uBAAoB;AAmB5D,SAAS,UAAU,EACjB,cAAc,WACd,UACA,WACA,WAAW,OACX,WAAW,QACX,OAAO,YAAY,WAAW,KAAA,GAC9B,OAAO,OACP,GAAG,SACc;CACjB,MAAM,WACJ,oBAAC,OAAD;EACE,WAAW,GACT,uDACA,QAAQ,qCACR,YAAY,OACd;EAEC;CACE,CAAA;CAGP,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACN;EACN,GAAI;EACJ,WAAW,GACT,4EACA,SACF;EARF,UAAA,CAUG,WACC,oBAAC,YAAD;GACE,OAAO;GACP,OAAO,aAAa;GACpB,UAAA;GACA,WAAU;EACX,CAAA,IACC,MACJ,oBAAC,UAAD;GAAoB;GAClB,UAAA,oBAAC,eAAD;IAAyB;IAAoB;IAAgB;IAC1D;GACY,CAAA;EACP,CAAA,CACP;;AAET;AAEA,IAAM,sBAAuD,EAAE,WAC7D,oBAAC,WAAD;CAAW,UAAU,KAAK,MAAM;CAAU,UAAU,KAAK,MAAM;CAAU,MAAM,KAAK,MAAM;CACvF,UAAA,KAAK,MAAM;AACH,CAAA"}

package/dist/ui/copyable-text.d.ts

@@ -5,8 +5,10 @@ interface CopyButtonProps {
     label: string;
     testId?: string;
     className?: string;
+    iconOnly?: boolean;
+    children?: ReactNode;
 }
-export declare function CopyButton({ value, label, testId, className }: CopyButtonProps): ReactNode;
+export declare function CopyButton({ value, label, testId, className, iconOnly, children, }: CopyButtonProps): ReactNode;
 interface CopyableTextProps {
     value: string;
     label: string;

package/dist/ui/copyable-text.js

@@ -1,6 +1,6 @@
 import { useT } from "../i18n/instance.js";
-import { cn } from "../lib/utils.js";
-import { Icon } from "../icons/sprite.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/copyable-text.tsx
@@ -13,7 +13,7 @@ async function copyToClipboard(text) {
 		return false;
 	}
 }
-function CopyButton({ value, label, testId, className }) {
+function CopyButton({ value, label, testId, className, iconOnly = false, children }) {
 	const { t } = useT("lattice");
 	const [copied, setCopied] = useState(false);
 	useEffect(() => {
@@ -21,21 +21,27 @@ function CopyButton({ value, label, testId, className }) {
 		const timeout = window.setTimeout(() => setCopied(false), 1500);
 		return () => window.clearTimeout(timeout);
 	}, [copied]);
-	function handleCopy() {
-		copyToClipboard(value);
-		setCopied(true);
+	async function handleCopy() {
+		if (await copyToClipboard(value)) setCopied(true);
 	}
 	const ariaLabel = copied ? t("common.copied-value", "Copied {{label}}", { label }) : t("common.copy-value", "Copy {{label}}", { label });
-	return /* @__PURE__ */ jsxs("button", {
+	if (iconOnly) return /* @__PURE__ */ jsx(IconButton, {
+		icon: copied ? "check" : "copy",
+		label: ariaLabel,
+		"data-test": testId,
+		className,
+		onClick: () => void handleCopy()
+	});
+	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
+		size: "sm",
+		emphasis: "outline",
+		icon: copied ? "check" : "copy",
 		"data-test": testId,
-		className: cn("inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs", className),
+		className,
 		"aria-label": ariaLabel,
-		onClick: handleCopy,
-		children: [/* @__PURE__ */ jsx(Icon, {
-			name: copied ? "check" : "copy",
-			className: "size-lt-icon-xs"
-		}), copied ? t("common.copied", "Copied") : t("common.copy", "Copy")]
+		onClick: () => void handleCopy(),
+		children: copied ? t("common.copied", "Copied") : children ?? t("common.copy", "Copy")
 	});
 }
 function CopyableText({ value, label, testId, children }) {

package/dist/ui/copyable-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyable-text.js","names":[],"sources":["../../resources/js/ui/copyable-text.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { type ReactNode, useEffect, useState } from \"react\";\n\nexport async function copyToClipboard(text: string): Promise<boolean> {\n  if (!navigator?.clipboard) {\n    return false;\n  }\n\n  try {\n    await navigator.clipboard.writeText(text);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface CopyButtonProps {\n  value: string;\n  label: string;\n  testId?: string;\n  className?: string;\n}\n\nexport function CopyButton({ value, label, testId, className }: CopyButtonProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(value);\n    setCopied(true);\n  }\n\n  const ariaLabel = copied\n    ? t(\"common.copied-value\", \"Copied {{label}}\", { label })\n    : t(\"common.copy-value\", \"Copy {{label}}\", { label });\n\n  return (\n    <button\n      type=\"button\"\n      data-test={testId}\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs\",\n        className,\n      )}\n      aria-label={ariaLabel}\n      onClick={handleCopy}\n    >\n      <Icon name={copied ? \"check\" : \"copy\"} className=\"size-lt-icon-xs\" />\n      {copied ? t(\"common.copied\", \"Copied\") : t(\"common.copy\", \"Copy\")}\n    </button>\n  );\n}\n\ninterface CopyableTextProps {\n  value: string;\n  label: string;\n  testId?: string;\n  children?: ReactNode;\n}\n\nexport function CopyableText({ value, label, testId, children }: CopyableTextProps): ReactNode {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      {children ?? value}\n      <CopyButton value={value} label={label} testId={testId} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,eAAsB,gBAAgB,MAAgC;CACpE,IAAI,CAAC,WAAW,WACd,OAAO;CAGT,IAAI;EACF,MAAM,UAAU,UAAU,UAAU,IAAI;EAExC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AASA,SAAgB,WAAW,EAAE,OAAO,OAAO,QAAQ,aAAyC;CAC1F,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,KAAK;EAC1B,UAAU,IAAI;CAChB;CAEA,MAAM,YAAY,SACd,EAAE,uBAAuB,oBAAoB,EAAE,MAAM,CAAC,IACtD,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;CAEtD,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAW,GACT,0FACA,SACF;EACA,cAAY;EACZ,SAAS;EARX,UAAA,CAUE,oBAAC,MAAD;GAAM,MAAM,SAAS,UAAU;GAAQ,WAAU;EAAmB,CAAA,GACnE,SAAS,EAAE,iBAAiB,QAAQ,IAAI,EAAE,eAAe,MAAM,CAC1D;;AAEZ;AASA,SAAgB,aAAa,EAAE,OAAO,OAAO,QAAQ,YAA0C;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,YAAY,OACb,oBAAC,YAAD;GAAmB;GAAc;GAAe;EAAS,CAAA,CACtD;;AAET"}
+{"version":3,"file":"copyable-text.js","names":[],"sources":["../../resources/js/ui/copyable-text.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./icon-button\";\n\nexport async function copyToClipboard(text: string): Promise<boolean> {\n  if (!navigator?.clipboard) {\n    return false;\n  }\n\n  try {\n    await navigator.clipboard.writeText(text);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface CopyButtonProps {\n  value: string;\n  label: string;\n  testId?: string;\n  className?: string;\n  iconOnly?: boolean;\n  children?: ReactNode;\n}\n\nexport function CopyButton({\n  value,\n  label,\n  testId,\n  className,\n  iconOnly = false,\n  children,\n}: CopyButtonProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  async function handleCopy(): Promise<void> {\n    if (await copyToClipboard(value)) {\n      setCopied(true);\n    }\n  }\n\n  const ariaLabel = copied\n    ? t(\"common.copied-value\", \"Copied {{label}}\", { label })\n    : t(\"common.copy-value\", \"Copy {{label}}\", { label });\n\n  if (iconOnly) {\n    return (\n      <IconButton\n        icon={copied ? \"check\" : \"copy\"}\n        label={ariaLabel}\n        data-test={testId}\n        className={className}\n        onClick={() => void handleCopy()}\n      />\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      size=\"sm\"\n      emphasis=\"outline\"\n      icon={copied ? \"check\" : \"copy\"}\n      data-test={testId}\n      className={className}\n      aria-label={ariaLabel}\n      onClick={() => void handleCopy()}\n    >\n      {copied ? t(\"common.copied\", \"Copied\") : (children ?? t(\"common.copy\", \"Copy\"))}\n    </Button>\n  );\n}\n\ninterface CopyableTextProps {\n  value: string;\n  label: string;\n  testId?: string;\n  children?: ReactNode;\n}\n\nexport function CopyableText({ value, label, testId, children }: CopyableTextProps): ReactNode {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      {children ?? value}\n      <CopyButton value={value} label={label} testId={testId} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,eAAsB,gBAAgB,MAAgC;CACpE,IAAI,CAAC,WAAW,WACd,OAAO;CAGT,IAAI;EACF,MAAM,UAAU,UAAU,UAAU,IAAI;EAExC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AAWA,SAAgB,WAAW,EACzB,OACA,OACA,QACA,WACA,WAAW,OACX,YAC6B;CAC7B,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,eAAe,aAA4B;EACzC,IAAI,MAAM,gBAAgB,KAAK,GAC7B,UAAU,IAAI;CAElB;CAEA,MAAM,YAAY,SACd,EAAE,uBAAuB,oBAAoB,EAAE,MAAM,CAAC,IACtD,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;CAEtD,IAAI,UACF,OACE,oBAAC,YAAD;EACE,MAAM,SAAS,UAAU;EACzB,OAAO;EACP,aAAW;EACA;EACX,eAAe,KAAK,WAAW;CAChC,CAAA;CAIL,OACE,oBAAC,QAAD;EACE,MAAK;EACL,MAAK;EACL,UAAS;EACT,MAAM,SAAS,UAAU;EACzB,aAAW;EACA;EACX,cAAY;EACZ,eAAe,KAAK,WAAW;EAE9B,UAAA,SAAS,EAAE,iBAAiB,QAAQ,IAAK,YAAY,EAAE,eAAe,MAAM;CACvE,CAAA;AAEZ;AASA,SAAgB,aAAa,EAAE,OAAO,OAAO,QAAQ,YAA0C;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,YAAY,OACb,oBAAC,YAAD;GAAmB;GAAc;GAAe;EAAS,CAAA,CACtD;;AAET"}

package/dist/ui/index.d.ts

@@ -5,6 +5,8 @@ export { Button, buttonVariants } from './button.js';
 export type { Emphasis, Variant } from './button.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
 export { Checkbox } from './checkbox.js';
+export { CodeBlock } from './code-block.js';
+export type { CodeBlockLanguage, CodeBlockLanguageLoader, CodeBlockProps } from './code-block.js';
 export { Combobox } from './combobox.js';
 export { ConfirmDialog } from './confirm-dialog.js';
 export { ActionTrigger, ActionTriggerProvider, useActionTrigger, useClickBehavior, } from './click-behavior.js';
@@ -18,6 +20,7 @@ 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 { NativeSelect } from './native-select.js';
 export { TextLink } from './link.js';
 export { default as PasswordInput } from './password-input.js';
 export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './popover.js';

package/dist/ui/index.js

@@ -11,6 +11,7 @@ import { Badge } from "./badge.js";
 import { InfoTooltip } from "./info-tooltip.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
 import { CopyButton, CopyableText, copyToClipboard } from "./copyable-text.js";
+import { CodeBlock } from "./code-block.js";
 import { PreviewableImage } from "./image-preview.js";
 import { TextLink } from "./link.js";
 import { SegmentedPills } from "./segmented-pills.js";
@@ -24,4 +25,5 @@ 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, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };
+import { NativeSelect } from "./native-select.js";
+export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Combobox, ConfirmDialog, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, NativeSelect, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };

package/dist/ui/plugin.js

@@ -4,6 +4,7 @@ import AvatarComponent from "./avatar.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
 import ChartComponent from "./chart.js";
+import CodeBlockComponent from "./code-block.js";
 import CollapsibleComponent from "./collapsible.js";
 import FloatingPanelComponent from "./floating-panel.js";
 import FragmentComponent from "./fragment.js";
@@ -30,6 +31,7 @@ var uiComponents = createPlugin({
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
 		chart: eagerComponent(ChartComponent),
+		"code-block": eagerComponent(CodeBlockComponent),
 		collapsible: eagerComponent(CollapsibleComponent),
 		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),

package/dist/ui/plugin.js.map

@@ -1 +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 { FragmentNodeType, UiNodeType } from \"@lattice-php/lattice/types/generated\";\nimport AvatarComponent from \"./avatar\";\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 ImageComponent from \"./image\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport ProgressComponent from \"./progress\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport SeparatorComponent from \"./separator\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\ntype UiComponentType = UiNodeType | FragmentNodeType;\n\nexport const uiComponents = createPlugin({\n  components: {\n    avatar: eagerComponent(AvatarComponent),\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    image: eagerComponent(ImageComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    progress: eagerComponent(ProgressComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    separator: eagerComponent(SeparatorComponent),\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,QAAQ,eAAe,eAAe;EACtC,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,OAAO,eAAe,cAAc;EACpC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,UAAU,eAAe,iBAAiB;EAC1C,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,WAAW,eAAe,kBAAkB;EAC5C,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;CAC1C;CACA,MAAM;AACR,CAAC"}
+{"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 { FragmentNodeType, UiNodeType } from \"@lattice-php/lattice/types/generated\";\nimport AvatarComponent from \"./avatar\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport ChartComponent from \"./chart\";\nimport CodeBlockComponent from \"./code-block\";\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 ImageComponent from \"./image\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport ProgressComponent from \"./progress\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport SeparatorComponent from \"./separator\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\nimport TooltipComponent from \"./tooltip\";\n\ntype UiComponentType = UiNodeType | FragmentNodeType;\n\nexport const uiComponents = createPlugin({\n  components: {\n    avatar: eagerComponent(AvatarComponent),\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: eagerComponent(ChartComponent),\n    \"code-block\": eagerComponent(CodeBlockComponent),\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    image: eagerComponent(ImageComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    progress: eagerComponent(ProgressComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    separator: eagerComponent(SeparatorComponent),\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,eAAe,aAAa;CACvC,YAAY;EACV,QAAQ,eAAe,eAAe;EACtC,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,cAAc,eAAe,kBAAkB;EAC/C,aAAa,eAAe,oBAAoB;EAChD,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,UAAU,eAAe,iBAAiB;EAC1C,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,WAAW,eAAe,kBAAkB;EAC5C,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/ui/segmented-pills.d.ts

@@ -1,9 +1,10 @@
+import { ComponentProps } from 'react';
 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).
  */
-export declare function SegmentedPills({ ariaLabel, autoFocus, disabled, name, onSelect, options, tabIndex, value, }: {
+export declare function SegmentedPills({ ariaLabel, autoFocus, className, disabled, name, onSelect, options, tabIndex, value, ...props }: Omit<ComponentProps<"div">, "children" | "onSelect" | "ref"> & {
     ariaLabel?: string;
     autoFocus?: boolean;
     disabled?: boolean;

package/dist/ui/segmented-pills.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 * Presentational segmented pill group. Used by the form choice field (bound to a
 * form value) and the core segmented control (standalone, emits an event).
 */
-function SegmentedPills({ ariaLabel, autoFocus = false, disabled = false, name, onSelect, options, tabIndex, value }) {
+function SegmentedPills({ ariaLabel, autoFocus = false, className, disabled = false, name, onSelect, options, tabIndex, value, ...props }) {
 	const groupRef = useRef(null);
 	useEffect(() => {
 		if (!autoFocus) return;
@@ -15,8 +15,9 @@ function SegmentedPills({ ariaLabel, autoFocus = false, disabled = false, name,
 		(group?.querySelector("button[aria-checked=\"true\"]") ?? group?.querySelector("button"))?.focus();
 	}, [autoFocus]);
 	return /* @__PURE__ */ jsx("div", {
+		...props,
 		"aria-label": ariaLabel,
-		className: "inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1",
+		className: cn("inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1", className),
 		ref: groupRef,
 		role: "radiogroup",
 		children: options.map((option) => {

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

@@ -1 +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\";\nimport { pillClassName } from \"./pill\";\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}-${option.value}`}\n            className={cn(pillClassName(isSelected), disabled && \"cursor-not-allowed opacity-60\")}\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":";;;;;;;;;AASA,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,EAAA,EAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;EAEJ,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,KAAK,GAAG,OAAO;IAC7B,WAAW,GAAG,cAAc,UAAU,GAAG,YAAY,+BAA+B;IAC1E;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;IAEJ,UAAA,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../resources/js/ui/segmented-pills.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { pillClassName } from \"./pill\";\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  className,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"onSelect\" | \"ref\"> & {\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      {...props}\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\",\n        className,\n      )}\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}-${option.value}`}\n            className={cn(pillClassName(isSelected), disabled && \"cursor-not-allowed opacity-60\")}\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":";;;;;;;;;AASA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WACA,WAAW,OACX,MACA,UACA,SACA,UACA,OACA,GAAG,SAUF;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,EAAA,EAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,cAAY;EACZ,WAAW,GACT,iFACA,SACF;EACA,KAAK;EACL,MAAK;EAEJ,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,KAAK,GAAG,OAAO;IAC7B,WAAW,GAAG,cAAc,UAAU,GAAG,YAAY,+BAA+B;IAC1E;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;IAEJ,UAAA,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}