@alpic-ai/ui 1.170.0 → 1.171.0

package/dist/components/alert.d.mts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+  variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 declare function Alert({ className, variant, ...props }: AlertProps): React$1.JSX.Element;

package/dist/components/avatar.d.mts

@@ -3,7 +3,7 @@ import * as React$1 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 //#region src/components/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "sm" | "lg" | "xs" | "md" | "xl" | null | undefined;
+  size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
 type AvatarStatus = "online";

package/dist/components/badge.d.mts

@@ -1,7 +1,7 @@
 import { VariantProps } from "class-variance-authority";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
+  variant?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

package/dist/components/bar-chart.mjs

@@ -89,7 +89,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 		"data-slot": "bar-chart",
 		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "w-full",
+			className: cn("w-full", bare && !loading && !isEmpty && "border-border border-b"),
 			style: { height },
 			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",

package/dist/components/button.d.mts

@@ -2,8 +2,8 @@ import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
-  size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "link" | "tertiary" | "link-muted" | "cta" | null | undefined;
+  size?: "default" | "pill" | "icon" | "icon-rounded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;

package/dist/components/editable.d.mts

@@ -0,0 +1,101 @@
+import * as React$1 from "react";
+//#region src/components/editable.d.ts
+type Direction = "ltr" | "rtl";
+interface DivProps extends React$1.ComponentProps<"div"> {
+  asChild?: boolean;
+}
+interface StoreState {
+  value: string;
+  editing: boolean;
+}
+interface Store {
+  subscribe: (callback: () => void) => () => void;
+  getState: () => StoreState;
+  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+  notify: () => void;
+}
+declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T;
+interface EditableContextValue {
+  rootId: string;
+  inputId: string;
+  labelId: string;
+  defaultValue: string;
+  onCancel: () => void;
+  onEdit: () => void;
+  onSubmit: (value: string) => void;
+  onEnterKeyDown?: (event: KeyboardEvent) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  dir?: Direction;
+  maxLength?: number;
+  placeholder?: string;
+  triggerMode: "click" | "dblclick" | "focus";
+  autosize: boolean;
+  multiline: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+}
+interface EditableProps extends Omit<DivProps, "onSubmit"> {
+  id?: string;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  defaultEditing?: boolean;
+  editing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  onCancel?: () => void;
+  onEdit?: () => void;
+  onSubmit?: (value: string) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onEnterKeyDown?: (event: KeyboardEvent) => void;
+  dir?: Direction;
+  maxLength?: number;
+  name?: string;
+  placeholder?: string;
+  triggerMode?: EditableContextValue["triggerMode"];
+  autosize?: boolean;
+  multiline?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+}
+declare function Editable(props: EditableProps): React$1.JSX.Element;
+interface EditableLabelProps extends React$1.ComponentProps<"label"> {
+  asChild?: boolean;
+}
+declare function EditableLabel(props: EditableLabelProps): React$1.JSX.Element;
+interface EditableAreaProps extends React$1.ComponentProps<"div"> {
+  asChild?: boolean;
+}
+declare function EditableArea(props: EditableAreaProps): React$1.JSX.Element;
+interface EditablePreviewProps extends React$1.ComponentProps<"div"> {
+  asChild?: boolean;
+}
+declare function EditablePreview(props: EditablePreviewProps): React$1.JSX.Element | null;
+interface EditableInputProps extends React$1.ComponentProps<"input"> {
+  asChild?: boolean;
+  maxLength?: number;
+}
+declare function EditableInput(props: EditableInputProps): React$1.JSX.Element | null;
+interface EditableTriggerProps extends React$1.ComponentProps<"button"> {
+  asChild?: boolean;
+  forceMount?: boolean;
+}
+declare function EditableTrigger(props: EditableTriggerProps): React$1.JSX.Element | null;
+interface EditableToolbarProps extends React$1.ComponentProps<"div"> {
+  asChild?: boolean;
+  orientation?: "horizontal" | "vertical";
+}
+declare function EditableToolbar(props: EditableToolbarProps): React$1.JSX.Element;
+interface EditableCancelProps extends React$1.ComponentProps<"button"> {
+  asChild?: boolean;
+}
+declare function EditableCancel(props: EditableCancelProps): React$1.JSX.Element | null;
+interface EditableSubmitProps extends React$1.ComponentProps<"button"> {
+  asChild?: boolean;
+}
+declare function EditableSubmit(props: EditableSubmitProps): React$1.JSX.Element | null;
+//#endregion
+export { Editable, EditableArea, EditableCancel, EditableInput, EditableLabel, EditablePreview, type EditableProps, EditableSubmit, EditableToolbar, EditableTrigger, useStore as useEditable };

package/dist/components/editable.mjs

@@ -0,0 +1,509 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.mjs";
+import { useAsRef } from "../hooks/use-as-ref.mjs";
+import { useLazyRef } from "../hooks/use-lazy-ref.mjs";
+import { useComposedRefs } from "../lib/compose-refs.mjs";
+import { VisuallyHiddenInput } from "./visually-hidden-input.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/editable.tsx
+const ROOT_NAME = "Editable";
+const LABEL_NAME = "EditableLabel";
+const AREA_NAME = "EditableArea";
+const PREVIEW_NAME = "EditablePreview";
+const INPUT_NAME = "EditableInput";
+const TRIGGER_NAME = "EditableTrigger";
+const TOOLBAR_NAME = "EditableToolbar";
+const CANCEL_NAME = "EditableCancel";
+const SUBMIT_NAME = "EditableSubmit";
+const StoreContext = React$1.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React$1.useContext(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector, ogStore) {
+	const contextStore = React$1.useContext(StoreContext);
+	const store = ogStore ?? contextStore;
+	if (!store) throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+	const getSnapshot = React$1.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$1.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const EditableContext = React$1.createContext(null);
+function useEditableContext(consumerName) {
+	const context = React$1.useContext(EditableContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function Editable(props) {
+	const { value: valueProp, defaultValue = "", defaultEditing, editing: editingProp, onValueChange, onEditingChange, onCancel: onCancelProp, onEdit: onEditProp, onSubmit: onSubmitProp, onEscapeKeyDown, onEnterKeyDown, dir: dirProp, maxLength, name, placeholder, triggerMode = "click", asChild, autosize = false, multiline = false, disabled, required, readOnly, invalid, className, id, ref, ...rootProps } = props;
+	const instanceId = React$1.useId();
+	const rootId = id ?? instanceId;
+	const inputId = React$1.useId();
+	const labelId = React$1.useId();
+	const dir = dirProp ?? "ltr";
+	const previousValueRef = React$1.useRef(defaultValue);
+	const [formTrigger, setFormTrigger] = React$1.useState(null);
+	const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+	const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+	const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+	const stateRef = useLazyRef(() => ({
+		value: valueProp ?? defaultValue,
+		editing: editingProp ?? defaultEditing ?? false
+	}));
+	const propsRef = useAsRef({
+		onValueChange,
+		onEditingChange,
+		onCancel: onCancelProp,
+		onEdit: onEditProp,
+		onSubmit: onSubmitProp,
+		onEscapeKeyDown,
+		onEnterKeyDown
+	});
+	const store = React$1.useMemo(() => {
+		return {
+			subscribe: (cb) => {
+				listenersRef.current.add(cb);
+				return () => listenersRef.current.delete(cb);
+			},
+			getState: () => stateRef.current,
+			setState: (key, value) => {
+				if (Object.is(stateRef.current[key], value)) return;
+				if (key === "value" && typeof value === "string") {
+					stateRef.current.value = value;
+					propsRef.current.onValueChange?.(value);
+				} else if (key === "editing" && typeof value === "boolean") {
+					stateRef.current.editing = value;
+					propsRef.current.onEditingChange?.(value);
+				} else stateRef.current[key] = value;
+				store.notify();
+			},
+			notify: () => {
+				for (const cb of listenersRef.current) cb();
+			}
+		};
+	}, [
+		listenersRef,
+		stateRef,
+		propsRef
+	]);
+	const value = useStore((state) => state.value, store);
+	useIsomorphicLayoutEffect(() => {
+		if (valueProp !== void 0) store.setState("value", valueProp);
+	}, [valueProp]);
+	useIsomorphicLayoutEffect(() => {
+		if (editingProp !== void 0) store.setState("editing", editingProp);
+	}, [editingProp]);
+	const onCancel = React$1.useCallback(() => {
+		const prevValue = previousValueRef.current;
+		store.setState("value", prevValue);
+		store.setState("editing", false);
+		propsRef.current.onCancel?.();
+	}, [store, propsRef]);
+	const onEdit = React$1.useCallback(() => {
+		const currentValue = store.getState().value;
+		previousValueRef.current = currentValue;
+		store.setState("editing", true);
+		propsRef.current.onEdit?.();
+	}, [store, propsRef]);
+	const onSubmit = React$1.useCallback((newValue) => {
+		store.setState("value", newValue);
+		store.setState("editing", false);
+		propsRef.current.onSubmit?.(newValue);
+	}, [store, propsRef]);
+	const contextValue = React$1.useMemo(() => ({
+		rootId,
+		inputId,
+		labelId,
+		defaultValue,
+		onSubmit,
+		onEdit,
+		onCancel,
+		onEscapeKeyDown,
+		onEnterKeyDown,
+		dir,
+		maxLength,
+		placeholder,
+		triggerMode,
+		autosize,
+		multiline,
+		disabled,
+		readOnly,
+		required,
+		invalid
+	}), [
+		rootId,
+		inputId,
+		labelId,
+		defaultValue,
+		onSubmit,
+		onCancel,
+		onEdit,
+		onEscapeKeyDown,
+		onEnterKeyDown,
+		dir,
+		maxLength,
+		placeholder,
+		triggerMode,
+		autosize,
+		multiline,
+		disabled,
+		required,
+		readOnly,
+		invalid
+	]);
+	const RootPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsxs(EditableContext.Provider, {
+			value: contextValue,
+			children: [/* @__PURE__ */ jsx(RootPrimitive, {
+				"data-slot": "editable",
+				...rootProps,
+				id,
+				ref: composedRef,
+				className: cn("flex min-w-0 flex-col gap-2", className)
+			}), isFormControl && /* @__PURE__ */ jsx(VisuallyHiddenInput, {
+				type: "hidden",
+				control: formTrigger,
+				name,
+				value,
+				disabled,
+				readOnly,
+				required
+			})]
+		})
+	});
+}
+function EditableLabel(props) {
+	const { asChild, className, children, ref, ...labelProps } = props;
+	const context = useEditableContext(LABEL_NAME);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "label", {
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-invalid": context.invalid ? "" : void 0,
+		"data-required": context.required ? "" : void 0,
+		"data-slot": "editable-label",
+		...labelProps,
+		ref,
+		id: context.labelId,
+		htmlFor: context.inputId,
+		className: cn("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-required:after:ml-0.5 data-required:after:text-destructive data-required:after:content-['*']", className),
+		children
+	});
+}
+function EditableArea(props) {
+	const { asChild, className, ref, ...areaProps } = props;
+	const context = useEditableContext(AREA_NAME);
+	const editing = useStore((state) => state.editing);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "group",
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-editing": editing ? "" : void 0,
+		"data-slot": "editable-area",
+		dir: context.dir,
+		...areaProps,
+		ref,
+		className: cn("relative inline-block min-w-0 data-disabled:cursor-not-allowed data-disabled:opacity-50", className)
+	});
+}
+function EditablePreview(props) {
+	const { onClick: onClickProp, onDoubleClick: onDoubleClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, asChild, className, ref, ...previewProps } = props;
+	const context = useEditableContext(PREVIEW_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({
+		onClick: onClickProp,
+		onDoubleClick: onDoubleClickProp,
+		onFocus: onFocusProp,
+		onKeyDown: onKeyDownProp
+	});
+	const onTrigger = React$1.useCallback(() => {
+		if (context.disabled || context.readOnly) return;
+		context.onEdit();
+	}, [
+		context.onEdit,
+		context.disabled,
+		context.readOnly
+	]);
+	const onClick = React$1.useCallback((event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "click") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onDoubleClick = React$1.useCallback((event) => {
+		propsRef.current.onDoubleClick?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "dblclick") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onFocus = React$1.useCallback((event) => {
+		propsRef.current.onFocus?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "focus") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		propsRef.current.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter") {
+			const nativeEvent = event.nativeEvent;
+			if (context.onEnterKeyDown) {
+				context.onEnterKeyDown(nativeEvent);
+				if (nativeEvent.defaultPrevented) return;
+			}
+			onTrigger();
+		}
+	}, [
+		propsRef,
+		onTrigger,
+		context.onEnterKeyDown
+	]);
+	const PreviewPrimitive = asChild ? Slot : "div";
+	if (editing || context.readOnly) return null;
+	return /* @__PURE__ */ jsx(PreviewPrimitive, {
+		role: "button",
+		"aria-disabled": context.disabled || context.readOnly,
+		"data-empty": !value ? "" : void 0,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-readonly": context.readOnly ? "" : void 0,
+		"data-slot": "editable-preview",
+		tabIndex: context.disabled || context.readOnly ? void 0 : 0,
+		...previewProps,
+		ref,
+		onClick,
+		onDoubleClick,
+		onFocus,
+		onKeyDown,
+		className: cn("cursor-text whitespace-pre-wrap rounded-sm border border-transparent px-1.5 py-1 transition-colors hover:bg-muted focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 data-empty:text-muted-foreground/60 data-empty:italic data-readonly:cursor-default data-readonly:hover:bg-transparent", className),
+		children: value || context.placeholder
+	});
+}
+function EditableInput(props) {
+	const { onBlur: onBlurProp, onChange: onChangeProp, onKeyDown: onKeyDownProp, asChild, className, disabled, readOnly, required, maxLength, ref, ...inputProps } = props;
+	const context = useEditableContext(INPUT_NAME);
+	const store = useStoreContext(INPUT_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const inputRef = React$1.useRef(null);
+	const composedRef = useComposedRefs(ref, inputRef);
+	const propsRef = useAsRef({
+		onBlur: onBlurProp,
+		onChange: onChangeProp,
+		onKeyDown: onKeyDownProp
+	});
+	const isDisabled = disabled || context.disabled;
+	const isReadOnly = readOnly || context.readOnly;
+	const isRequired = required || context.required;
+	const onAutosize = React$1.useCallback((target) => {
+		if (!context.autosize) return;
+		const { borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth } = getComputedStyle(target);
+		if (target instanceof HTMLTextAreaElement) {
+			target.style.height = "0";
+			target.style.height = `${target.scrollHeight + Number.parseFloat(borderTopWidth) + Number.parseFloat(borderBottomWidth)}px`;
+		} else {
+			target.style.width = "0";
+			target.style.width = `${target.scrollWidth + Number.parseFloat(borderLeftWidth) + Number.parseFloat(borderRightWidth)}px`;
+		}
+	}, [context.autosize]);
+	const onBlur = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onBlur?.(event);
+		if (event.defaultPrevented) return;
+		const relatedTarget = event.relatedTarget;
+		if (!(relatedTarget instanceof HTMLElement && (relatedTarget.closest(`[data-slot="editable-trigger"]`) || relatedTarget.closest(`[data-slot="editable-cancel"]`)))) context.onSubmit(value);
+	}, [
+		value,
+		context.onSubmit,
+		propsRef,
+		isDisabled,
+		isReadOnly
+	]);
+	const onChange = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onChange?.(event);
+		if (event.defaultPrevented) return;
+		store.setState("value", event.target.value);
+		onAutosize(event.target);
+	}, [
+		store,
+		propsRef,
+		onAutosize,
+		isDisabled,
+		isReadOnly
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			const nativeEvent = event.nativeEvent;
+			if (context.onEscapeKeyDown) {
+				context.onEscapeKeyDown(nativeEvent);
+				if (nativeEvent.defaultPrevented) return;
+			}
+			context.onCancel();
+		} else if (event.key === "Enter" && !context.multiline) {
+			event.preventDefault();
+			context.onSubmit(value);
+		}
+	}, [
+		value,
+		context.onSubmit,
+		context.onCancel,
+		context.onEscapeKeyDown,
+		context.multiline,
+		propsRef,
+		isDisabled,
+		isReadOnly
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (!editing || isDisabled || isReadOnly || !inputRef.current) return;
+		const frameId = window.requestAnimationFrame(() => {
+			if (!inputRef.current) return;
+			inputRef.current.focus();
+			inputRef.current.select();
+			onAutosize(inputRef.current);
+		});
+		return () => {
+			window.cancelAnimationFrame(frameId);
+		};
+	}, [
+		editing,
+		onAutosize,
+		isDisabled,
+		isReadOnly
+	]);
+	const InputPrimitive = asChild ? Slot : "input";
+	if (!editing && !isReadOnly) return null;
+	return /* @__PURE__ */ jsx(InputPrimitive, {
+		"aria-required": isRequired,
+		"aria-invalid": context.invalid,
+		"data-slot": "editable-input",
+		dir: context.dir,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		required: isRequired,
+		...inputProps,
+		id: context.inputId,
+		"aria-labelledby": context.labelId,
+		ref: composedRef,
+		maxLength: maxLength ?? context.maxLength,
+		placeholder: context.placeholder,
+		value,
+		onBlur,
+		onChange,
+		onKeyDown,
+		className: cn("flex rounded-sm border border-input bg-transparent px-1.5 py-1 shadow-xs transition-colors placeholder:text-muted-foreground/60 placeholder:italic focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", context.autosize && !context.multiline ? "w-auto" : "w-full", className)
+	});
+}
+function EditableTrigger(props) {
+	const { asChild, forceMount = false, ref, ...triggerProps } = props;
+	const context = useEditableContext(TRIGGER_NAME);
+	const editing = useStore((state) => state.editing);
+	const onTrigger = React$1.useCallback(() => {
+		if (context.disabled || context.readOnly) return;
+		context.onEdit();
+	}, [
+		context.disabled,
+		context.readOnly,
+		context.onEdit
+	]);
+	const TriggerPrimitive = asChild ? Slot : "button";
+	if (!forceMount && (editing || context.readOnly)) return null;
+	return /* @__PURE__ */ jsx(TriggerPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"aria-disabled": context.disabled || context.readOnly,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-readonly": context.readOnly ? "" : void 0,
+		"data-slot": "editable-trigger",
+		...triggerProps,
+		ref,
+		onClick: context.triggerMode === "click" ? onTrigger : void 0,
+		onDoubleClick: context.triggerMode === "dblclick" ? onTrigger : void 0
+	});
+}
+function EditableToolbar(props) {
+	const { asChild, className, orientation = "horizontal", ref, ...toolbarProps } = props;
+	const context = useEditableContext(TOOLBAR_NAME);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "toolbar",
+		"aria-controls": context.rootId,
+		"aria-orientation": orientation,
+		"data-slot": "editable-toolbar",
+		dir: context.dir,
+		...toolbarProps,
+		ref,
+		className: cn("flex items-center gap-2", orientation === "vertical" && "flex-col", className)
+	});
+}
+function EditableCancel(props) {
+	const { onClick: onClickProp, asChild, ref, ...cancelProps } = props;
+	const context = useEditableContext(CANCEL_NAME);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const onClick = React$1.useCallback((event) => {
+		if (context.disabled || context.readOnly) return;
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		context.onCancel();
+	}, [
+		propsRef,
+		context.onCancel,
+		context.disabled,
+		context.readOnly
+	]);
+	const CancelPrimitive = asChild ? Slot : "button";
+	if (!editing && !context.readOnly) return null;
+	return /* @__PURE__ */ jsx(CancelPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"data-slot": "editable-cancel",
+		...cancelProps,
+		onClick,
+		ref
+	});
+}
+function EditableSubmit(props) {
+	const { onClick: onClickProp, asChild, ref, ...submitProps } = props;
+	const context = useEditableContext(SUBMIT_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const onClick = React$1.useCallback((event) => {
+		if (context.disabled || context.readOnly) return;
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		context.onSubmit(value);
+	}, [
+		propsRef,
+		context.onSubmit,
+		value,
+		context.disabled,
+		context.readOnly
+	]);
+	const SubmitPrimitive = asChild ? Slot : "button";
+	if (!editing && !context.readOnly) return null;
+	return /* @__PURE__ */ jsx(SubmitPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"data-slot": "editable-submit",
+		...submitProps,
+		ref,
+		onClick
+	});
+}
+//#endregion
+export { Editable, EditableArea, EditableCancel, EditableInput, EditableLabel, EditablePreview, EditableSubmit, EditableToolbar, EditableTrigger, useStore as useEditable };