@ark-ui/solid/dist/chunk/K5F57EOF.jsx

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import {
  useFieldContext
} from "./57XA73T6.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useLocaleContext
} from "./YUC6JE7K.jsx";
import {
  useEnvironmentContext
} from "./E2L62MKC.jsx";
import {
  createContext
} from "./TVCIHLER.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// src/components/editable/editable-area.tsx
import { mergeProps } from "@zag-js/solid";

// src/components/editable/use-editable-context.ts
var [EditableProvider, useEditableContext] = createContext({
  hookName: "useEditableContext",
  providerName: "<EditableProvider />"
});

// src/components/editable/editable-area.tsx
var EditableArea = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps(() => api().getAreaProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/editable/editable-cancel-trigger.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var EditableCancelTrigger = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps2(() => api().getCancelTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/editable/editable-context.tsx
var EditableContext = (props) => props.children(useEditableContext());

// src/components/editable/editable-control.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var EditableControl = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps3(() => api().getControlProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/editable/editable-edit-trigger.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var EditableEditTrigger = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps4(() => api().getEditTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/editable/editable-input.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var EditableInput = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps5(() => api().getInputProps(), props);
  const field = useFieldContext();
  return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
};

// src/components/editable/editable-label.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var EditableLabel = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps6(() => api().getLabelProps(), props);
  return <ark.label {...mergedProps} />;
};

// src/components/editable/editable-preview.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var EditablePreview = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps7(() => api().getPreviewProps(), props);
  return <ark.span {...mergedProps} />;
};

// src/components/editable/editable-root.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";

// src/components/editable/use-editable.ts
import * as editable from "@zag-js/editable";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo, createUniqueId } from "solid-js";
var useEditable = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const field = useFieldContext();
  const machineProps = createMemo(() => ({
    id,
    ids: {
      label: field?.().ids.label,
      input: field?.().ids.control
    },
    dir: locale().dir,
    disabled: field?.().disabled,
    invalid: field?.().invalid,
    readOnly: field?.().readOnly,
    required: field?.().required,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(editable.machine, machineProps);
  return createMemo(() => editable.connect(service, normalizeProps));
};

// src/components/editable/editable-root.tsx
var EditableRoot = (props) => {
  const [useEditableProps, localProps] = createSplitProps()(props, [
    "activationMode",
    "autoResize",
    "defaultEdit",
    "defaultValue",
    "disabled",
    "edit",
    "finalFocusEl",
    "form",
    "id",
    "ids",
    "invalid",
    "maxLength",
    "name",
    "onEditChange",
    "onFocusOutside",
    "onInteractOutside",
    "onPointerDownOutside",
    "onValueChange",
    "onValueCommit",
    "onValueRevert",
    "placeholder",
    "readOnly",
    "required",
    "selectOnFocus",
    "submitMode",
    "translations",
    "value"
  ]);
  const api = useEditable(useEditableProps);
  const mergedProps = mergeProps8(() => api().getRootProps(), localProps);
  return <EditableProvider value={api}>
      <ark.div {...mergedProps} />
    </EditableProvider>;
};

// src/components/editable/editable-root-provider.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var EditableRootProvider = (props) => {
  const [{ value: editable2 }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps9(() => editable2().getRootProps(), localProps);
  return <EditableProvider value={editable2}>
      <ark.div {...mergedProps} />
    </EditableProvider>;
};

// src/components/editable/editable-submit-trigger.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var EditableSubmitTrigger = (props) => {
  const api = useEditableContext();
  const mergedProps = mergeProps10(() => api().getSubmitTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/editable/editable.anatomy.ts
import { anatomy } from "@zag-js/editable";

// src/components/editable/editable.ts
var editable_exports = {};
__export(editable_exports, {
  Area: () => EditableArea,
  CancelTrigger: () => EditableCancelTrigger,
  Context: () => EditableContext,
  Control: () => EditableControl,
  EditTrigger: () => EditableEditTrigger,
  Input: () => EditableInput,
  Label: () => EditableLabel,
  Preview: () => EditablePreview,
  Root: () => EditableRoot,
  RootProvider: () => EditableRootProvider,
  SubmitTrigger: () => EditableSubmitTrigger
});

export {
  useEditableContext,
  EditableArea,
  EditableCancelTrigger,
  EditableContext,
  EditableControl,
  EditableEditTrigger,
  EditableInput,
  EditableLabel,
  EditablePreview,
  useEditable,
  EditableRoot,
  EditableRootProvider,
  EditableSubmitTrigger,
  anatomy,
  editable_exports
};