@ark-ui/solid/dist/chunk/BOR6VUN5.js

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

import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import * as avatar from '@zag-js/avatar';
export { anatomy } from '@zag-js/avatar';
import { createUniqueId, createMemo } from 'solid-js';

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

// src/components/avatar/avatar-context.tsx
var AvatarContext = (props) => props.children(useAvatarContext());
var AvatarFallback = (props) => {
  const context = useAvatarContext();
  const mergedProps = mergeProps(() => context().getFallbackProps(), props);
  return createComponent(ark.span, mergedProps);
};
var AvatarImage = (props) => {
  const context = useAvatarContext();
  const mergedProps = mergeProps(() => context().getImageProps(), props);
  return createComponent(ark.img, mergedProps);
};
var useAvatar = (props) => {
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const id = createUniqueId();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(avatar.machine, machineProps);
  return createMemo(() => avatar.connect(service, normalizeProps));
};

// src/components/avatar/avatar-root.tsx
var AvatarRoot = (props) => {
  const [useAvatarProps, localProps] = createSplitProps()(props, ["id", "ids", "onStatusChange"]);
  const context = useAvatar(useAvatarProps);
  const mergedProps = mergeProps(() => context().getRootProps(), localProps);
  return createComponent(AvatarProvider, {
    value: context,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var AvatarRootProvider = (props) => {
  const [{
    value: avatar2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => avatar2().getRootProps(), localProps);
  return createComponent(AvatarProvider, {
    value: avatar2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};

// src/components/avatar/avatar.ts
var avatar_exports = {};
__export(avatar_exports, {
  Context: () => AvatarContext,
  Fallback: () => AvatarFallback,
  Image: () => AvatarImage,
  Root: () => AvatarRoot,
  RootProvider: () => AvatarRootProvider
});

export { AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, AvatarRootProvider, avatar_exports, useAvatar, useAvatarContext };