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

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

import { useFieldContext } from './GBGTOFYC.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './5QLLQM7E.js';
import { useLocaleContext } from './RVOPDSQY.js';
import { runIfFn } from './DT73WLR4.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { createSignal, createEffect, onCleanup, Show, createMemo, createUniqueId } from 'solid-js';
import * as fileUpload from '@zag-js/file-upload';

// src/components/file-upload/use-file-upload-context.ts
var [FileUploadProvider, useFileUploadContext] = createContext({
  hookName: "useFileUploadContext",
  providerName: "<FileUploadProvider />"
});

// src/components/file-upload/file-upload-clear-trigger.tsx
var FileUploadClearTrigger = (props) => {
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getClearTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/file-upload/file-upload-context.tsx
var FileUploadContext = (props) => props.children(useFileUploadContext());
var FileUploadDropzone = (props) => {
  const [dropzoneProps, localProps] = createSplitProps()(props, ["disableClick"]);
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getDropzoneProps(dropzoneProps), localProps);
  return createComponent(ark.div, mergedProps);
};
var FileUploadHiddenInput = (props) => {
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getHiddenInputProps(), props);
  const field = useFieldContext();
  return createComponent(ark.input, mergeProps$1({
    get ["aria-describedby"]() {
      return field?.().ariaDescribedby;
    }
  }, mergedProps));
};

// src/components/file-upload/use-file-upload-item-group-props-context.ts
var [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext({
  hookName: "useFileUploadItemGroupPropsContext",
  providerName: "<FileUploadItemGroupPropsProvider />"
});

// src/components/file-upload/use-file-upload-item-props-context.ts
var [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
  hookName: "useFileUploadItemPropsContext",
  providerName: "<FileUploadItemPropsProvider />"
});

// src/components/file-upload/file-upload-item.tsx
var FileUploadItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["file"]);
  const fileUpload2 = useFileUploadContext();
  const itemGroupProps = useFileUploadItemGroupPropsContext();
  const itemPropsWithType = createMemo(() => ({
    ...itemProps,
    type: itemGroupProps.type
  }));
  const mergedProps = mergeProps(() => fileUpload2().getItemProps(itemPropsWithType()), localProps);
  return createComponent(FileUploadItemPropsProvider, {
    value: itemPropsWithType,
    get children() {
      return createComponent(ark.li, mergedProps);
    }
  });
};
var FileUploadItemDeleteTrigger = (props) => {
  const fileUpload2 = useFileUploadContext();
  const itemProps = useFileUploadItemPropsContext();
  const mergedProps = mergeProps(() => fileUpload2().getItemDeleteTriggerProps(itemProps()), props);
  return createComponent(ark.button, mergedProps);
};
var FileUploadItemGroup = (props) => {
  const [itemGroupProps, localProps] = createSplitProps()(props, ["type"]);
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getItemGroupProps(itemGroupProps), localProps);
  return createComponent(FileUploadItemGroupPropsProvider, {
    value: itemGroupProps,
    get children() {
      return createComponent(ark.ul, mergedProps);
    }
  });
};
var FileUploadItemName = (props) => {
  const fileUpload2 = useFileUploadContext();
  const itemProps = useFileUploadItemPropsContext();
  const mergedProps = mergeProps(() => fileUpload2().getItemNameProps(itemProps()), props);
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return props.children || itemProps().file.name;
    }
  }));
};
var FileUploadItemPreview = (props) => {
  const fileUpload2 = useFileUploadContext();
  const itemProps = useFileUploadItemPropsContext();
  const mergedProps = mergeProps(() => fileUpload2().getItemPreviewProps(itemProps()), props);
  if (!itemProps().file.type.match(props.type ?? ".*")) return null;
  return createComponent(ark.div, mergedProps);
};
var FileUploadItemPreviewImage = (props) => {
  const fileUpload2 = useFileUploadContext();
  const itemProps = useFileUploadItemPropsContext();
  const [url, setUrl] = createSignal("");
  createEffect(() => {
    const cleanup = fileUpload2().createFileUrl(itemProps().file, (url2) => setUrl(url2));
    onCleanup(cleanup);
  });
  const mergedProps = mergeProps(() => fileUpload2().getItemPreviewImageProps({
    ...itemProps(),
    url: url()
  }), props);
  return createComponent(Show, {
    get when() {
      return url();
    },
    get children() {
      return createComponent(ark.img, mergedProps);
    }
  });
};
var FileUploadItemSizeText = (props) => {
  const fileUpload2 = useFileUploadContext();
  const itemProps = useFileUploadItemPropsContext();
  const mergedProps = mergeProps(() => fileUpload2().getItemSizeTextProps(itemProps()), props);
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return props.children || fileUpload2().getFileSize(itemProps().file);
    }
  }));
};
var FileUploadLabel = (props) => {
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
var useFileUpload = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const field = useFieldContext();
  const machineProps = createMemo(() => ({
    id,
    ids: {
      label: field?.().ids.label,
      hiddenInput: field?.().ids.control
    },
    dir: locale().dir,
    disabled: field?.().disabled,
    locale: locale().locale,
    required: field?.().required,
    invalid: field?.().invalid,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(fileUpload.machine, machineProps);
  return createMemo(() => fileUpload.connect(service, normalizeProps));
};

// src/components/file-upload/file-upload-root.tsx
var FileUploadRoot = (props) => {
  const [fileUploadProps, localProps] = createSplitProps()(props, ["accept", "acceptedFiles", "allowDrop", "capture", "defaultAcceptedFiles", "directory", "disabled", "id", "ids", "invalid", "locale", "maxFiles", "maxFileSize", "minFileSize", "name", "onFileAccept", "onFileChange", "onFileReject", "preventDocumentDrop", "required", "translations", "transformFiles", "validate"]);
  const fileUpload2 = useFileUpload(fileUploadProps);
  const mergedProps = mergeProps(() => fileUpload2().getRootProps(), localProps);
  return createComponent(FileUploadProvider, {
    value: fileUpload2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var FileUploadRootProvider = (props) => {
  const [{
    value: fileUpload2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => fileUpload2().getRootProps(), localProps);
  return createComponent(FileUploadProvider, {
    value: fileUpload2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var FileUploadTrigger = (props) => {
  const fileUpload2 = useFileUploadContext();
  const mergedProps = mergeProps(() => fileUpload2().getTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/file-upload/file-upload.ts
var file_upload_exports = {};
__export(file_upload_exports, {
  ClearTrigger: () => FileUploadClearTrigger,
  Context: () => FileUploadContext,
  Dropzone: () => FileUploadDropzone,
  HiddenInput: () => FileUploadHiddenInput,
  Item: () => FileUploadItem,
  ItemDeleteTrigger: () => FileUploadItemDeleteTrigger,
  ItemGroup: () => FileUploadItemGroup,
  ItemName: () => FileUploadItemName,
  ItemPreview: () => FileUploadItemPreview,
  ItemPreviewImage: () => FileUploadItemPreviewImage,
  ItemSizeText: () => FileUploadItemSizeText,
  Label: () => FileUploadLabel,
  Root: () => FileUploadRoot,
  RootProvider: () => FileUploadRootProvider,
  Trigger: () => FileUploadTrigger
});

export { FileUploadClearTrigger, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadRootProvider, FileUploadTrigger, file_upload_exports, useFileUpload, useFileUploadContext };