@moduix/react 1.1.0

package/dist/components/file-upload/FileUpload.css

@@ -0,0 +1,290 @@
+@layer ui.components {
+  .D32-wW_root {
+    box-sizing: border-box;
+    align-items: flex-start;
+    gap: var(--file-upload-gap, var(--spacing-3));
+    width: var(--file-upload-width, 100%);
+    max-width: var(--file-upload-max-width, 28rem);
+    color: var(--file-upload-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .D32-wW_label {
+    color: var(--file-upload-label-color, var(--file-upload-color, var(--color-foreground)));
+    font-size: var(--file-upload-label-font-size, var(--text-sm));
+    font-weight: var(--file-upload-label-font-weight, var(--weight-medium));
+    line-height: var(--file-upload-label-line-height, var(--line-height-text-sm));
+
+    &[data-disabled] {
+      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .D32-wW_dropzone {
+    box-sizing: border-box;
+    place-items: center;
+    gap: var(--file-upload-dropzone-gap, var(--spacing-3));
+    width: 100%;
+    min-height: var(--file-upload-dropzone-min-height, 8rem);
+    border: var(--file-upload-dropzone-border-width, var(--border-width-sm)) dashed
+      var(--file-upload-dropzone-border-color, var(--color-border));
+    border-radius: var(--file-upload-radius, var(--radius-md));
+    padding: var(--file-upload-dropzone-padding, var(--spacing-5));
+    background-color: var(--file-upload-dropzone-bg, var(--color-background));
+    color: var(--file-upload-dropzone-color, var(--color-muted-foreground));
+    text-align: center;
+    transition: border-color var(--file-upload-transition, var(--transition-default)),
+      background-color var(--file-upload-transition, var(--transition-default)),
+      color var(--file-upload-transition, var(--transition-default)),
+      opacity var(--file-upload-transition, var(--transition-default));
+    display: grid;
+
+    &[data-dragging] {
+      border-color: var(--file-upload-dropzone-border-color-dragging, var(--color-primary));
+      background-color: var(--file-upload-dropzone-bg-dragging, var(--color-accent));
+      color: var(--file-upload-dropzone-color-dragging, var(--color-foreground));
+    }
+
+    &[data-invalid] {
+      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+    }
+
+    &[data-disabled], &[data-readonly] {
+      cursor: default;
+    }
+  }
+
+  .D32-wW_dropzoneIcon {
+    box-sizing: border-box;
+    width: var(--file-upload-dropzone-icon-box-size, 2.5rem);
+    height: var(--file-upload-dropzone-icon-box-size, 2.5rem);
+    border: var(--file-upload-dropzone-icon-border-width, var(--border-width-sm)) solid
+      var(--file-upload-dropzone-icon-border-color, var(--color-border));
+    border-radius: var(--file-upload-dropzone-icon-radius, var(--radius-full));
+    background-color: var(--file-upload-dropzone-icon-bg, var(--color-muted));
+    color: var(--file-upload-dropzone-icon-color, var(--color-foreground));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--file-upload-dropzone-icon-size, 1rem);
+      height: var(--file-upload-dropzone-icon-size, 1rem);
+    }
+  }
+
+  .D32-wW_trigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--file-upload-trigger-gap, var(--button-content-gap, var(--spacing-2)));
+    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-lg)));
+    border: var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
+      solid
+      var(--file-upload-trigger-border-color, var(--button-default-border-color, var(--color-primary)));
+    border-radius: var(--file-upload-trigger-radius, var(--button-radius, var(--radius-md)));
+    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    background-color: var(--file-upload-trigger-bg, var(--button-default-bg, var(--color-primary)));
+    color: var(--file-upload-trigger-color, var(--button-default-color, var(--color-primary-foreground)));
+    appearance: none;
+    font: inherit;
+    font-size: var(--file-upload-trigger-font-size, var(--button-font-size, var(--text-sm)));
+    font-weight: var(--file-upload-trigger-font-weight, var(--button-font-weight, var(--weight-medium)));
+    line-height: var(--file-upload-trigger-line-height, var(--button-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: border-color
+        var(--file-upload-transition, var(--button-transition, var(--transition-default))),
+      background-color
+        var(--file-upload-transition, var(--button-transition, var(--transition-default))),
+      color var(--file-upload-transition, var(--button-transition, var(--transition-default))),
+      opacity var(--file-upload-transition, var(--button-transition, var(--transition-default)));
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [data-disabled], [data-readonly]) {
+        background-color: var(--file-upload-trigger-bg-hover, var(--button-default-bg-hover, var(--color-foreground)));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+        solid var(--file-upload-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
+      outline-offset: calc(var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-invalid] {
+      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+    }
+
+    &:is(:disabled, [data-disabled], [data-readonly]) {
+      pointer-events: none;
+      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .D32-wW_itemGroup {
+    gap: var(--file-upload-item-group-gap, var(--spacing-2));
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .D32-wW_item {
+    box-sizing: border-box;
+    align-items: center;
+    column-gap: var(--file-upload-item-gap, var(--spacing-3));
+    row-gap: var(--file-upload-item-row-gap, var(--spacing-1));
+    min-height: var(--file-upload-item-min-height, 2.5rem);
+    border: var(--file-upload-item-border-width, var(--border-width-sm)) solid
+      var(--file-upload-item-border-color, var(--color-border));
+    border-radius: var(--file-upload-item-radius, var(--radius-md));
+    padding: var(--file-upload-item-padding-y, var(--spacing-2))
+      var(--file-upload-item-padding-x, var(--spacing-3));
+    background-color: var(--file-upload-item-bg, var(--color-background));
+    color: var(--file-upload-item-color, var(--color-foreground));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+
+    &[data-type="rejected"] {
+      border-color: var(--file-upload-invalid-color, var(--color-destructive));
+    }
+
+    &[data-disabled] {
+      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &:has([data-slot="file-upload-item-preview"]) {
+      min-height: var(--file-upload-item-preview-min-height, 3rem);
+      padding-block: var(--file-upload-item-preview-padding-y, var(--spacing-2));
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+  }
+
+  .D32-wW_itemPreview {
+    width: var(--file-upload-item-preview-size, 2rem);
+    height: var(--file-upload-item-preview-size, 2rem);
+    border-radius: var(--file-upload-item-preview-radius, var(--radius-sm));
+    background-color: var(--file-upload-item-preview-bg, var(--color-muted));
+    color: var(--file-upload-item-preview-color, var(--color-muted-foreground));
+    grid-area: 1 / 1 / span 2;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .D32-wW_itemPreviewImage {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .D32-wW_itemName {
+    min-width: 0;
+    color: var(--file-upload-item-name-color, currentColor);
+    font-size: var(--file-upload-item-name-font-size, var(--text-sm));
+    font-weight: var(--file-upload-item-name-font-weight, var(--weight-medium));
+    line-height: var(--file-upload-item-name-line-height, var(--line-height-text-sm));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    grid-column: 1;
+    overflow: hidden;
+  }
+
+  .D32-wW_item:has([data-slot="file-upload-item-preview"]) .D32-wW_itemName {
+    grid-column: 2;
+  }
+
+  .D32-wW_itemSizeText {
+    color: var(--file-upload-item-size-color, var(--color-muted-foreground));
+    font-size: var(--file-upload-item-size-font-size, var(--text-xs));
+    line-height: var(--file-upload-item-size-line-height, var(--line-height-text-xs));
+    grid-column: 1;
+  }
+
+  .D32-wW_item:has([data-slot="file-upload-item-preview"]) .D32-wW_itemSizeText {
+    grid-column: 2;
+  }
+
+  .D32-wW_itemDeleteTrigger, .D32-wW_clearTrigger {
+    box-sizing: border-box;
+    width: var(--file-upload-action-size, 2rem);
+    height: var(--file-upload-action-size, 2rem);
+    border-radius: var(--file-upload-action-radius, var(--radius-sm));
+    background-color: var(--file-upload-action-bg, transparent);
+    color: var(--file-upload-action-color, var(--color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--file-upload-transition, var(--transition-default)),
+      color var(--file-upload-transition, var(--transition-default)),
+      opacity var(--file-upload-transition, var(--transition-default));
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--file-upload-action-icon-size, 1rem);
+      height: var(--file-upload-action-icon-size, 1rem);
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [data-disabled], [data-readonly]) {
+        background-color: var(--file-upload-action-bg-hover, var(--color-muted));
+        color: var(--file-upload-action-color-hover, var(--color-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--file-upload-focus-ring-width, var(--border-width-md)) solid
+        var(--file-upload-focus-ring-color, var(--color-ring));
+      outline-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
+    }
+
+    &:is(:disabled, [data-disabled], [data-readonly]) {
+      pointer-events: none;
+      opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .D32-wW_itemDeleteTrigger {
+    grid-area: 1 / 2;
+    justify-self: end;
+  }
+
+  .D32-wW_item:has([data-slot="file-upload-item-size-text"]) .D32-wW_itemDeleteTrigger, .D32-wW_item:has([data-slot="file-upload-item-preview"]) .D32-wW_itemDeleteTrigger {
+    grid-row: 1 / span 2;
+  }
+
+  .D32-wW_item:has([data-slot="file-upload-item-preview"]) .D32-wW_itemDeleteTrigger {
+    grid-column: 3;
+  }
+
+  .D32-wW_clearTrigger {
+    align-self: flex-start;
+    gap: var(--file-upload-clear-trigger-gap, var(--spacing-2));
+    width: auto;
+    padding-inline: var(--file-upload-clear-trigger-padding-x, var(--spacing-2));
+    color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
+    font: inherit;
+    font-size: var(--file-upload-clear-trigger-font-size, var(--text-sm));
+    line-height: var(--file-upload-clear-trigger-line-height, var(--line-height-text-sm));
+  }
+}

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+import { FileUpload } from "@ark-ui/react/file-upload";
+
+//#region src/components/file-upload/FileUpload.d.ts
+declare function FileUploadDropzoneIcon({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare const FileUpload$1: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<FileUpload.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Dropzone: import("react").ForwardRefExoticComponent<Omit<FileUpload.DropzoneProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  DropzoneIcon: typeof FileUploadDropzoneIcon;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<FileUpload.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  ItemGroup: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  ItemPreview: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+  ItemPreviewImage: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+  ItemName: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemNameProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemSizeText: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { FileUpload$1 as FileUpload };

package/dist/components/file-upload/FileUpload.js

@@ -0,0 +1,149 @@
+import { CloseIcon, TrashIcon, UploadIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import FileUpload_module_default from "./FileUpload.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { FileUpload } from "@ark-ui/react/file-upload";
+//#region src/components/file-upload/FileUpload.tsx
+const FileUploadRoot = forwardRef(function FileUploadRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.Root, {
+		ref,
+		"data-slot": "file-upload-root",
+		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadRootProvider = forwardRef(function FileUploadRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.RootProvider, {
+		ref,
+		"data-slot": "file-upload-root-provider",
+		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadLabel = forwardRef(function FileUploadLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.Label, {
+		ref,
+		"data-slot": "file-upload-label",
+		className: clsx(FileUpload_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadDropzone = forwardRef(function FileUploadDropzone({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.Dropzone, {
+		ref,
+		"data-slot": "file-upload-dropzone",
+		className: clsx(FileUpload_module_default.dropzone, normalizeClassName(className)),
+		...props
+	});
+});
+function FileUploadDropzoneIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "file-upload-dropzone-icon",
+		className: clsx(FileUpload_module_default.dropzoneIcon, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(UploadIcon, {})
+	});
+}
+const FileUploadTrigger = forwardRef(function FileUploadTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.Trigger, {
+		ref,
+		"data-slot": "file-upload-trigger",
+		className: clsx(FileUpload_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadHiddenInput = forwardRef(function FileUploadHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.HiddenInput, {
+		ref,
+		"data-slot": "file-upload-hidden-input",
+		...props
+	});
+});
+const FileUploadItemGroup = forwardRef(function FileUploadItemGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemGroup, {
+		ref,
+		"data-slot": "file-upload-item-group",
+		className: clsx(FileUpload_module_default.itemGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItem = forwardRef(function FileUploadItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.Item, {
+		ref,
+		"data-slot": "file-upload-item",
+		className: clsx(FileUpload_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItemPreview = forwardRef(function FileUploadItemPreview({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemPreview, {
+		ref,
+		"data-slot": "file-upload-item-preview",
+		className: clsx(FileUpload_module_default.itemPreview, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItemPreviewImage = forwardRef(function FileUploadItemPreviewImage({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemPreviewImage, {
+		ref,
+		"data-slot": "file-upload-item-preview-image",
+		className: clsx(FileUpload_module_default.itemPreviewImage, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItemName = forwardRef(function FileUploadItemName({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemName, {
+		ref,
+		"data-slot": "file-upload-item-name",
+		className: clsx(FileUpload_module_default.itemName, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItemSizeText = forwardRef(function FileUploadItemSizeText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemSizeText, {
+		ref,
+		"data-slot": "file-upload-item-size-text",
+		className: clsx(FileUpload_module_default.itemSizeText, normalizeClassName(className)),
+		...props
+	});
+});
+const FileUploadItemDeleteTrigger = forwardRef(function FileUploadItemDeleteTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, {
+		ref,
+		"data-slot": "file-upload-item-delete-trigger",
+		className: clsx(FileUpload_module_default.itemDeleteTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(TrashIcon, {})
+	});
+});
+const FileUploadClearTrigger = forwardRef(function FileUploadClearTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FileUpload.ClearTrigger, {
+		ref,
+		"data-slot": "file-upload-clear-trigger",
+		className: clsx(FileUpload_module_default.clearTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+});
+const FileUpload$1 = Object.assign(FileUploadRoot, {
+	Root: FileUploadRoot,
+	RootProvider: FileUploadRootProvider,
+	Label: FileUploadLabel,
+	Dropzone: FileUploadDropzone,
+	DropzoneIcon: FileUploadDropzoneIcon,
+	Trigger: FileUploadTrigger,
+	HiddenInput: FileUploadHiddenInput,
+	ItemGroup: FileUploadItemGroup,
+	Item: FileUploadItem,
+	ItemPreview: FileUploadItemPreview,
+	ItemPreviewImage: FileUploadItemPreviewImage,
+	ItemName: FileUploadItemName,
+	ItemSizeText: FileUploadItemSizeText,
+	ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+	ClearTrigger: FileUploadClearTrigger
+});
+//#endregion
+export { FileUpload$1 as FileUpload };

package/dist/components/file-upload/FileUpload.module.js

@@ -0,0 +1,19 @@
+import './FileUpload.css';
+//#region src/components/file-upload/FileUpload.module.css
+var FileUpload_module_default = {
+	"clearTrigger": "D32-wW_clearTrigger",
+	"dropzone": "D32-wW_dropzone",
+	"dropzoneIcon": "D32-wW_dropzoneIcon",
+	"item": "D32-wW_item",
+	"itemDeleteTrigger": "D32-wW_itemDeleteTrigger",
+	"itemGroup": "D32-wW_itemGroup",
+	"itemName": "D32-wW_itemName",
+	"itemPreview": "D32-wW_itemPreview",
+	"itemPreviewImage": "D32-wW_itemPreviewImage",
+	"itemSizeText": "D32-wW_itemSizeText",
+	"label": "D32-wW_label",
+	"root": "D32-wW_root",
+	"trigger": "D32-wW_trigger"
+};
+//#endregion
+export { FileUpload_module_default as default };

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+import { FileUpload } from "./FileUpload.js";
+export { FileUpload };