@spark-ui/components 11.4.3 → 11.5.1

package/dist/alert-dialog/index.mjs

@@ -1,10 +1,10 @@
 import {
   Dialog
-} from "../chunk-2BSBKLHG.mjs";
-import "../chunk-XYK6V3JF.mjs";
-import "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
+} from "../chunk-WLI4EPS6.mjs";
+import "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
+import "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/avatar/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
+import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 interface AvatarImageProps$1 extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -45,7 +45,7 @@ declare const AvatarPlaceholder: {
     displayName: string;
 };
 
-interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends react.HTMLAttributes<HTMLDivElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     isOnline?: boolean;
     onlineText?: string;

package/dist/avatar/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
+import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 interface AvatarImageProps$1 extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -45,7 +45,7 @@ declare const AvatarPlaceholder: {
     displayName: string;
 };
 
-interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends react.HTMLAttributes<HTMLDivElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     isOnline?: boolean;
     onlineText?: string;

package/dist/avatar/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
-} from "../chunk-XYK6V3JF.mjs";
+} from "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
   Slot

package/dist/button/index.mjs

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-HEKSVWYW.mjs";
+} from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";

package/dist/carousel/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
-} from "../chunk-XYK6V3JF.mjs";
+} from "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/{chunk-HEKSVWYW.mjs → chunk-2YM6GKWW.mjs}

@@ -795,6 +795,7 @@ var Button = ({
 Button.displayName = "Button";
 
 export {
+  buttonStyles,
   Button
 };
-//# sourceMappingURL=chunk-HEKSVWYW.mjs.map
+//# sourceMappingURL=chunk-2YM6GKWW.mjs.map

package/dist/{chunk-XYK6V3JF.mjs → chunk-DCXWGQVZ.mjs}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-HEKSVWYW.mjs";
+} from "./chunk-2YM6GKWW.mjs";
 
 // src/icon-button/IconButton.styles.tsx
 import { makeVariants } from "@spark-ui/internal-utils";
@@ -50,4 +50,4 @@ IconButton.displayName = "IconButton";
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-XYK6V3JF.mjs.map
+//# sourceMappingURL=chunk-DCXWGQVZ.mjs.map

package/dist/{chunk-D7YBYT5H.mjs → chunk-GPJMLIHC.mjs}

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "./chunk-XYK6V3JF.mjs";
+} from "./chunk-DCXWGQVZ.mjs";
 import {
   Icon
 } from "./chunk-UMUMFMFB.mjs";
@@ -305,4 +305,4 @@ Trigger.displayName = "Popover.Trigger";
 export {
   Popover2 as Popover
 };
-//# sourceMappingURL=chunk-D7YBYT5H.mjs.map
+//# sourceMappingURL=chunk-GPJMLIHC.mjs.map

package/dist/{chunk-2BSBKLHG.mjs → chunk-WLI4EPS6.mjs}

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "./chunk-XYK6V3JF.mjs";
+} from "./chunk-DCXWGQVZ.mjs";
 import {
   Icon
 } from "./chunk-UMUMFMFB.mjs";
@@ -355,4 +355,4 @@ Description.displayName = "Dialog.Description";
 export {
   Dialog2 as Dialog
 };
-//# sourceMappingURL=chunk-2BSBKLHG.mjs.map
+//# sourceMappingURL=chunk-WLI4EPS6.mjs.map

package/dist/combobox/index.mjs

@@ -1,16 +1,16 @@
 import {
   Popover
-} from "../chunk-D7YBYT5H.mjs";
+} from "../chunk-GPJMLIHC.mjs";
 import {
   IconButton
-} from "../chunk-XYK6V3JF.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
+} from "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
 import {
   Spinner
 } from "../chunk-GAK4SC2F.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   VisuallyHidden
 } from "../chunk-KEGAAGJW.mjs";

package/dist/dialog/index.mjs

@@ -1,10 +1,10 @@
 import {
   Dialog
-} from "../chunk-2BSBKLHG.mjs";
-import "../chunk-XYK6V3JF.mjs";
-import "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
+} from "../chunk-WLI4EPS6.mjs";
+import "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
+import "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 export {

package/dist/docgen.json

@@ -30202,13 +30202,6 @@
       }
     }
   },
-  "FileUploadContext": {
-    "tags": {},
-    "description": "",
-    "displayName": "FileUploadContext",
-    "methods": [],
-    "props": {}
-  },
   "FileUpload": {
     "tags": {},
     "description": "",
@@ -30735,6 +30728,13 @@
       }
     }
   },
+  "DropzoneContext": {
+    "tags": {},
+    "description": "",
+    "displayName": "DropzoneContext",
+    "methods": [],
+    "props": {}
+  },
   "FileUpload.ItemDeleteTrigger": {
     "tags": {},
     "description": "",
@@ -31603,7 +31603,9 @@
         }
       },
       "size": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "md"
+        },
         "description": "Size of the button.",
         "name": "size",
         "declarations": [],
@@ -31673,7 +31675,9 @@
         }
       },
       "shape": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "rounded"
+        },
         "description": "Shape of the button.",
         "name": "shape",
         "declarations": [],

package/dist/drawer/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
-} from "../chunk-XYK6V3JF.mjs";
+} from "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/dropdown/index.mjs

@@ -1,12 +1,12 @@
 import {
   Popover
-} from "../chunk-D7YBYT5H.mjs";
-import "../chunk-XYK6V3JF.mjs";
+} from "../chunk-GPJMLIHC.mjs";
+import "../chunk-DCXWGQVZ.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   VisuallyHidden
 } from "../chunk-KEGAAGJW.mjs";

package/dist/file-upload/index.d.mts

@@ -98,7 +98,7 @@ interface FileChangeDetails {
     rejectedFiles: RejectedFile$1[];
 }
 declare const FileUpload$1: {
-    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled: disabledProp, readOnly: readOnlyProp, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -233,7 +233,7 @@ interface FileUploadTriggerProps extends Omit<ButtonProps, 'children' | 'disable
     unstyled?: boolean;
 }
 declare const Trigger: {
-    ({ className, children, asChild, unstyled, design, intent, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ className, children, asChild, unstyled, design, intent, size, shape, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

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

@@ -98,7 +98,7 @@ interface FileChangeDetails {
     rejectedFiles: RejectedFile$1[];
 }
 declare const FileUpload$1: {
-    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled: disabledProp, readOnly: readOnlyProp, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -233,7 +233,7 @@ interface FileUploadTriggerProps extends Omit<ButtonProps, 'children' | 'disable
     unstyled?: boolean;
 }
 declare const Trigger: {
-    ({ className, children, asChild, unstyled, design, intent, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ className, children, asChild, unstyled, design, intent, size, shape, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/file-upload/index.js

@@ -25,6 +25,7 @@ __export(file_upload_exports, {
 module.exports = __toCommonJS(file_upload_exports);
 
 // src/file-upload/FileUpload.tsx
+var import_form_field = require("@spark-ui/components/form-field");
 var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
 var import_react2 = require("react");
 
@@ -130,6 +131,7 @@ function getFileIcon(file) {
 // src/file-upload/FileUpload.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FileUploadContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":file-upload";
 var FileUpload = ({
   asChild: _asChild = false,
   children,
@@ -143,15 +145,31 @@ var FileUpload = ({
   maxFiles,
   maxFileSize,
   minFileSize,
-  disabled = false,
-  readOnly = false,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
   locale
 }) => {
+  const field = (0, import_form_field.useFormFieldControl)();
+  const {
+    id: fieldId,
+    name: fieldName,
+    isInvalid,
+    isRequired,
+    description,
+    disabled: fieldDisabled,
+    readOnly: fieldReadOnly,
+    labelId
+  } = field;
   const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
+  const internalId = (0, import_react2.useId)();
+  const inputId = fieldId || `${ID_PREFIX}-${internalId}`;
+  const inputName = fieldName;
   const inputRef = (0, import_react2.useRef)(null);
   const triggerRef = (0, import_react2.useRef)(null);
   const dropzoneRef = (0, import_react2.useRef)(null);
   const deleteButtonRefs = (0, import_react2.useRef)([]);
+  const disabled = fieldDisabled ?? disabledProp;
+  const readOnly = fieldReadOnly ?? readOnlyProp;
   const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
@@ -337,7 +355,10 @@ var FileUpload = ({
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale
+        locale: defaultLocale,
+        description,
+        isInvalid,
+        isRequired
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
         children,
@@ -347,12 +368,16 @@ var FileUpload = ({
             ref: inputRef,
             type: "file",
             tabIndex: -1,
-            id: "image_uploads",
+            id: inputId,
             multiple,
-            name: "image_uploads",
+            name: inputName,
             accept,
             disabled,
             readOnly: readOnly && !disabled,
+            required: isRequired,
+            "aria-invalid": isInvalid,
+            "aria-describedby": description,
+            "aria-label": !labelId ? "Upload files test" : void 0,
             className: "sr-only",
             onChange: (e) => {
               if (e.target.files && !disabled && !readOnly) {
@@ -508,7 +533,7 @@ var progressBarStyles = (0, import_class_variance_authority2.cva)(
 // src/progress/ProgressContext.tsx
 var import_react5 = require("react");
 var ProgressContext = (0, import_react5.createContext)(null);
-var ID_PREFIX = ":progress";
+var ID_PREFIX2 = ":progress";
 var useProgress = () => {
   const context = (0, import_react5.useContext)(ProgressContext);
   if (!context) {
@@ -644,7 +669,7 @@ var ProgressLabel = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const internalID = `${ID_PREFIX}-label-${(0, import_react7.useId)()}`;
+  const internalID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
   const id = idProp || internalID;
   const { onLabelId } = useProgress();
   const rootRef = (0, import_react7.useCallback)(
@@ -1709,6 +1734,8 @@ Context.displayName = "FileUpload.Context";
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_react10 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var DropzoneContext = (0, import_react10.createContext)(false);
+var useDropzoneContext = () => (0, import_react10.useContext)(DropzoneContext);
 function Dropzone({
   children,
   className,
@@ -1747,7 +1774,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropzoneContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref: (node) => {
@@ -1759,6 +1786,9 @@ function Dropzone({
       role: "button",
       tabIndex: isDisabled ? -1 : 0,
       "aria-disabled": ctx.disabled ? true : void 0,
+      "aria-describedby": ctx.description,
+      "aria-invalid": ctx.isInvalid,
+      "aria-required": ctx.isRequired,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onDrop: handleDrop,
@@ -1788,7 +1818,7 @@ function Dropzone({
       },
       children
     }
-  );
+  ) });
 }
 Dropzone.displayName = "FileUploadDropzone";
 
@@ -1952,10 +1982,13 @@ var Trigger = ({
   unstyled = false,
   design = "filled",
   intent = "basic",
+  size = "md",
+  shape = "rounded",
   ref,
   ...props
 }) => {
-  const { inputRef, triggerRef, disabled, readOnly } = useFileUploadContext();
+  const { inputRef, triggerRef, disabled, readOnly, description, isInvalid, isRequired } = useFileUploadContext();
+  const isInsideDropzone = useDropzoneContext();
   const handleClick = (e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -1963,34 +1996,58 @@ var Trigger = ({
       inputRef.current?.click();
     }
   };
-  const buttonComponent = unstyled ? "button" : Button;
-  const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Comp,
-    {
+  const handleRef = (node) => {
+    if (triggerRef) {
+      triggerRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  let Component;
+  let componentProps;
+  if (isInsideDropzone) {
+    Component = "span";
+    const spanStyles = unstyled ? className : buttonStyles({
+      design,
+      intent,
+      size,
+      shape,
+      disabled: disabled || readOnly,
+      className
+    });
+    componentProps = {
+      ref: handleRef,
+      "data-spark-component": "file-upload-trigger",
+      className: spanStyles
+      // No onClick, no role, no tabIndex - Dropzone handles interaction
+      // No aria attributes here - they're on the Dropzone
+    };
+  } else {
+    const buttonComponent = unstyled ? "button" : Button;
+    Component = asChild ? Slot : buttonComponent;
+    componentProps = {
+      ref: handleRef,
       type: "button",
-      ref: (node) => {
-        if (triggerRef) {
-          triggerRef.current = node;
-        }
-        if (ref) {
-          if (typeof ref === "function") {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-        }
-      },
       design,
       intent,
+      size,
+      shape,
       "data-spark-component": "file-upload-trigger",
       className: (0, import_class_variance_authority15.cx)(className),
       disabled: disabled || readOnly,
       onClick: handleClick,
-      ...props,
-      children
-    }
-  );
+      "aria-describedby": description,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      ...props
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Component, { ...componentProps, children });
 };
 Trigger.displayName = "FileUpload.Trigger";