@ark-ui/solid 4.1.0 → 4.2.1

package/dist/chunk/35W72PCD.jsx

@@ -0,0 +1,215 @@
+import {
+  useFieldContext
+} from "./YJ7NNN57.jsx";
+import {
+  createSplitProps
+} from "./6WEDGJKQ.jsx";
+import {
+  ark
+} from "./UFYZ7HLU.jsx";
+import {
+  useLocaleContext
+} from "./3QQZKR3F.jsx";
+import {
+  useEnvironmentContext
+} from "./5O4RWSWO.jsx";
+import {
+  createContext
+} from "./NMGUCD2L.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 locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const id = createUniqueId();
+  const field = useFieldContext();
+  const context = 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,
+    edit: props.defaultEdit,
+    value: props.defaultValue,
+    "edit.controlled": props.edit !== void 0,
+    ...props
+  }));
+  const [state, send] = useMachine(editable.machine(context()), { context });
+  return createMemo(() => editable.connect(state, send, 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
+};

package/dist/chunk/3CKNAJLS.jsx

@@ -0,0 +1,147 @@
+import {
+  createSplitProps
+} from "./6WEDGJKQ.jsx";
+import {
+  ark
+} from "./UFYZ7HLU.jsx";
+import {
+  useEnvironmentContext
+} from "./5O4RWSWO.jsx";
+import {
+  createContext
+} from "./NMGUCD2L.jsx";
+import {
+  __export
+} from "./7IUG3E2V.jsx";
+
+// src/components/timer/timer-action-trigger.tsx
+import { mergeProps } from "@zag-js/solid";
+
+// src/components/timer/use-timer-context.ts
+var [TimerProvider, useTimerContext] = createContext({
+  hookName: "useTimerContext",
+  providerName: "<TimerProvider />"
+});
+
+// src/components/timer/timer-action-trigger.tsx
+var TimerActionTrigger = (props) => {
+  const timer2 = useTimerContext();
+  const mergedProps = mergeProps(() => timer2().getActionTriggerProps(props), props);
+  return <ark.button {...mergedProps} />;
+};
+
+// src/components/timer/timer-context.tsx
+var TimerContext = (props) => props.children(useTimerContext());
+
+// src/components/timer/timer-item.tsx
+import { mergeProps as mergeProps2 } from "@zag-js/solid";
+var TimerItem = (props) => {
+  const [itemProps, localProps] = createSplitProps()(props, ["type"]);
+  const timer2 = useTimerContext();
+  const mergedProps = mergeProps2(() => timer2().getItemProps(itemProps), localProps);
+  return <ark.div {...mergedProps}>{timer2().formattedTime[itemProps.type]}</ark.div>;
+};
+
+// src/components/timer/timer-area.tsx
+import { mergeProps as mergeProps3 } from "@zag-js/solid";
+var TimerArea = (props) => {
+  const timer2 = useTimerContext();
+  const mergedProps = mergeProps3(() => timer2().getAreaProps(), props);
+  return <ark.div {...mergedProps} />;
+};
+
+// src/components/timer/timer-control.tsx
+import { mergeProps as mergeProps4 } from "@zag-js/solid";
+var TimerControl = (props) => {
+  const timer2 = useTimerContext();
+  const mergedProps = mergeProps4(() => timer2().getControlProps(), props);
+  return <ark.div {...mergedProps} />;
+};
+
+// src/components/timer/timer-root.tsx
+import { mergeProps as mergeProps5 } from "@zag-js/solid";
+
+// src/components/timer/use-timer.ts
+import { normalizeProps, useMachine } from "@zag-js/solid";
+import * as timer from "@zag-js/timer";
+import { createMemo, createUniqueId } from "solid-js";
+var useTimer = (props) => {
+  const env = useEnvironmentContext();
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
+    getRootNode: env().getRootNode,
+    ...props
+  }));
+  const [state, send] = useMachine(timer.machine(context()), { context });
+  return createMemo(() => timer.connect(state, send, normalizeProps));
+};
+
+// src/components/timer/timer-root.tsx
+var TimerRoot = (props) => {
+  const [useTimerProps, localProps] = createSplitProps()(props, [
+    "id",
+    "ids",
+    "autoStart",
+    "interval",
+    "countdown",
+    "startMs",
+    "targetMs",
+    "onComplete",
+    "onTick"
+  ]);
+  const timer2 = useTimer(useTimerProps);
+  const mergedProps = mergeProps5(() => timer2().getRootProps(), localProps);
+  return <TimerProvider value={timer2}>
+      <ark.div {...mergedProps} />
+    </TimerProvider>;
+};
+
+// src/components/timer/timer-root-provider.tsx
+import { mergeProps as mergeProps6 } from "@zag-js/solid";
+var TimerRootProvider = (props) => {
+  const [{ value: timer2 }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps6(() => timer2().getRootProps(), localProps);
+  return <TimerProvider value={timer2}>
+      <ark.div {...mergedProps} />
+    </TimerProvider>;
+};
+
+// src/components/timer/timer-separator.tsx
+import { mergeProps as mergeProps7 } from "@zag-js/solid";
+var TimerSeparator = (props) => {
+  const timer2 = useTimerContext();
+  const mergedProps = mergeProps7(() => timer2().getSeparatorProps(), props);
+  return <ark.div {...mergedProps} />;
+};
+
+// src/components/timer/timer.anatomy.ts
+import { anatomy } from "@zag-js/timer";
+
+// src/components/timer/timer.ts
+var timer_exports = {};
+__export(timer_exports, {
+  ActionTrigger: () => TimerActionTrigger,
+  Area: () => TimerArea,
+  Context: () => TimerContext,
+  Control: () => TimerControl,
+  Item: () => TimerItem,
+  Root: () => TimerRoot,
+  RootProvider: () => TimerRootProvider,
+  Separator: () => TimerSeparator
+});
+
+export {
+  useTimerContext,
+  TimerActionTrigger,
+  TimerContext,
+  TimerItem,
+  TimerArea,
+  TimerControl,
+  useTimer,
+  TimerRoot,
+  TimerRootProvider,
+  TimerSeparator,
+  anatomy,
+  timer_exports
+};

package/dist/chunk/3DRWVGGU.jsx

@@ -0,0 +1,141 @@
+import {
+  splitRenderStrategyProps
+} from "./5ONYCKM3.jsx";
+import {
+  createSplitProps
+} from "./6WEDGJKQ.jsx";
+import {
+  ark
+} from "./UFYZ7HLU.jsx";
+import {
+  useLocaleContext
+} from "./3QQZKR3F.jsx";
+import {
+  useEnvironmentContext
+} from "./5O4RWSWO.jsx";
+import {
+  createContext
+} from "./NMGUCD2L.jsx";
+import {
+  __export
+} from "./7IUG3E2V.jsx";
+
+// src/components/collapsible/collapsible-content.tsx
+import { mergeProps } from "@zag-js/solid";
+import { Show } from "solid-js";
+
+// src/components/collapsible/use-collapsible-context.ts
+var [CollapsibleProvider, useCollapsibleContext] = createContext({
+  hookName: "useCollapsibleContext",
+  providerName: "<CollapsibleProvider />"
+});
+
+// src/components/collapsible/collapsible-content.tsx
+var CollapsibleContent = (props) => {
+  const api = useCollapsibleContext();
+  const mergedProps = mergeProps(() => api().getContentProps(), props);
+  return <Show when={!api().unmounted}>
+      <ark.div {...mergedProps} />
+    </Show>;
+};
+
+// src/components/collapsible/collapsible-context.tsx
+var CollapsibleContext = (props) => props.children(useCollapsibleContext());
+
+// src/components/collapsible/collapsible-root.tsx
+import { mergeProps as mergeProps2 } from "@zag-js/solid";
+
+// src/components/collapsible/use-collapsible.ts
+import * as collapsible from "@zag-js/collapsible";
+import { normalizeProps, useMachine } from "@zag-js/solid";
+import { createEffect, createMemo, createSignal, createUniqueId } from "solid-js";
+var useCollapsible = (props) => {
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+  const id = createUniqueId();
+  const context = createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    open: props.defaultOpen,
+    "open.controlled": props.open !== void 0,
+    ...collapsibleProps
+  }));
+  const [state, send] = useMachine(collapsible.machine(context()), { context });
+  const [wasVisible, setWasVisible] = createSignal(false);
+  createEffect(() => {
+    const isPresent = api().visible;
+    if (isPresent) setWasVisible(true);
+  });
+  const api = createMemo(() => collapsible.connect(state, send, normalizeProps));
+  return createMemo(() => ({
+    ...api(),
+    unmounted: !api().visible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().visible && wasVisible()
+  }));
+};
+
+// src/components/collapsible/collapsible-root.tsx
+var CollapsibleRoot = (props) => {
+  const [useCollapsibleProps, localProps] = createSplitProps()(props, [
+    "defaultOpen",
+    "disabled",
+    "id",
+    "ids",
+    "lazyMount",
+    "onExitComplete",
+    "onOpenChange",
+    "open",
+    "unmountOnExit"
+  ]);
+  const api = useCollapsible(useCollapsibleProps);
+  const mergedProps = mergeProps2(() => api().getRootProps(), localProps);
+  return <CollapsibleProvider value={api}>
+      <ark.div {...mergedProps} />
+    </CollapsibleProvider>;
+};
+
+// src/components/collapsible/collapsible-root-provider.tsx
+import { mergeProps as mergeProps3 } from "@zag-js/solid";
+var CollapsibleRootProvider = (props) => {
+  const [{ value: collapsible2 }, localProps] = createSplitProps()(props, [
+    "value"
+  ]);
+  const mergedProps = mergeProps3(() => collapsible2().getRootProps(), localProps);
+  return <CollapsibleProvider value={collapsible2}>
+      <ark.div {...mergedProps} />
+    </CollapsibleProvider>;
+};
+
+// src/components/collapsible/collapsible-trigger.tsx
+import { mergeProps as mergeProps4 } from "@zag-js/solid";
+var CollapsibleTrigger = (props) => {
+  const api = useCollapsibleContext();
+  const mergedProps = mergeProps4(() => api().getTriggerProps(), props);
+  return <ark.button {...mergedProps} />;
+};
+
+// src/components/collapsible/collapsible.anatomy.ts
+import { anatomy } from "@zag-js/collapsible";
+
+// src/components/collapsible/collapsible.ts
+var collapsible_exports = {};
+__export(collapsible_exports, {
+  Content: () => CollapsibleContent,
+  Context: () => CollapsibleContext,
+  Root: () => CollapsibleRoot,
+  RootProvider: () => CollapsibleRootProvider,
+  Trigger: () => CollapsibleTrigger
+});
+
+export {
+  useCollapsibleContext,
+  CollapsibleContent,
+  CollapsibleContext,
+  useCollapsible,
+  CollapsibleRoot,
+  CollapsibleRootProvider,
+  CollapsibleTrigger,
+  anatomy,
+  collapsible_exports
+};

package/dist/chunk/3LRXHWW2.js

@@ -0,0 +1,111 @@
+import { ark } from './EPLBB4QN.js';
+import { createContext } from './I5UG2QUO.js';
+import { __export } from './ESLJRKWD.js';
+import { normalizeProps, mergeProps, useMachine, useActor } from '@zag-js/solid';
+import * as toast from '@zag-js/toast';
+export { anatomy } from '@zag-js/toast';
+import { createComponent, spread, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
+import { splitProps, createMemo, For } from 'solid-js';
+
+var createToaster = (props) => {
+  const machine = toast.group.machine({
+    id: "1",
+    ...props
+  });
+  const api = toast.group.connect(machine, machine.send, normalizeProps);
+  return {
+    ...api,
+    machine
+  };
+};
+
+// src/components/toast/use-toast-context.ts
+var [ToastProvider, useToastContext] = createContext({
+  hookName: "useToastContext",
+  providerName: "<ToastProvider />"
+});
+
+// src/components/toast/toast-action-trigger.tsx
+var ToastActionTrigger = (props) => {
+  const toast3 = useToastContext();
+  const mergedProps = mergeProps(() => toast3().getActionTriggerProps(), props);
+  return createComponent(ark.button, mergedProps);
+};
+var ToastCloseTrigger = (props) => {
+  const toast3 = useToastContext();
+  const mergedProps = mergeProps(() => toast3().getCloseTriggerProps(), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+// src/components/toast/toast-context.tsx
+var ToastContext = (props) => props.children(useToastContext());
+var ToastDescription = (props) => {
+  const toast3 = useToastContext();
+  const mergedProps = mergeProps(() => toast3().getDescriptionProps(), props);
+  return createComponent(ark.div, mergedProps);
+};
+var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div>`);
+var ToastRoot = (props) => {
+  const toast3 = useToastContext();
+  const mergedProps = mergeProps(() => toast3().getRootProps(), props);
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergedProps, false, true);
+    spread(_el$2, mergeProps$1(() => toast3().getGhostBeforeProps()), false, false);
+    insert(_el$, () => props.children, _el$3);
+    spread(_el$3, mergeProps$1(() => toast3().getGhostAfterProps()), false, false);
+    return _el$;
+  })();
+};
+var ToastTitle = (props) => {
+  const toast3 = useToastContext();
+  const mergedProps = mergeProps(() => toast3().getTitleProps(), props);
+  return createComponent(ark.div, mergedProps);
+};
+var Toaster = (props) => {
+  const [toasterProps, localProps] = splitProps(props, ["toaster", "children"]);
+  const [state, send] = useMachine(toasterProps.toaster.machine);
+  const placement = state.context.placement;
+  const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+  const toasts = createMemo(() => api().getToastsByPlacement(placement));
+  const mergedProps = mergeProps(api().getGroupProps({
+    placement
+  }), localProps);
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return toasts();
+        },
+        children: (toast3) => createComponent(ToastActor, {
+          value: toast3,
+          children: (ctx) => toasterProps.children(ctx)
+        })
+      });
+    }
+  }));
+};
+var ToastActor = (props) => {
+  const [state, send] = useActor(props.value);
+  const api = createMemo(() => toast.connect(state, send, normalizeProps));
+  const ctx = createMemo(() => state.context);
+  return createComponent(ToastProvider, {
+    value: api,
+    get children() {
+      return props.children(ctx);
+    }
+  });
+};
+
+// src/components/toast/toast.ts
+var toast_exports = {};
+__export(toast_exports, {
+  ActionTrigger: () => ToastActionTrigger,
+  CloseTrigger: () => ToastCloseTrigger,
+  Context: () => ToastContext,
+  Description: () => ToastDescription,
+  Root: () => ToastRoot,
+  Title: () => ToastTitle
+});
+
+export { ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, createToaster, toast_exports, useToastContext };

package/dist/chunk/3QQZKR3F.jsx

@@ -0,0 +1,31 @@
+import {
+  createContext
+} from "./NMGUCD2L.jsx";
+
+// src/providers/locale/locale-provider.tsx
+import { isRTL } from "@zag-js/i18n-utils";
+import { createMemo } from "solid-js";
+
+// src/providers/locale/use-locale-context.ts
+var [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: "useEnvironmentContext",
+  providerName: "<EnvironmentProvider />",
+  strict: false,
+  defaultValue: () => ({ dir: "ltr", locale: "en-US" })
+});
+
+// src/providers/locale/locale-provider.tsx
+var LocaleProvider = (props) => {
+  const context = createMemo(
+    () => ({
+      locale: props.locale,
+      dir: isRTL(props.locale) ? "rtl" : "ltr"
+    })
+  );
+  return <LocaleContextProvider value={context}>{props.children}</LocaleContextProvider>;
+};
+
+export {
+  useLocaleContext,
+  LocaleProvider
+};