@sehv-oss/basketball-upload-react 1.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright 2026 sehv-oss
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,23 @@
+# Notice
+
+## Design
+
+The basketball file upload implemented here, from the dropzone that doubles as a backboard to the slingshot shot, the aiming dots, the swish of the net and the upload list, is a design by **Jorge Molina**, published on Figma Community.
+
+- GitHub: [jm-fuster](https://github.com/jm-fuster)
+- Figma Community: [@jm_fuster](https://www.figma.com/@jm_fuster)
+- Website: [jorgemolinafuster.com](https://jorgemolinafuster.com)
+
+This project is an independent code implementation of that design, made with admiration for the original work. It is not affiliated with or endorsed by the author.
+
+Changes and additions made in this implementation:
+
+- the Web Component and React APIs, and the upload pipeline behind the list;
+- the physics of the shot, and keyboard (assisted) shots;
+- the dark theme and the theming tokens;
+- built-in and custom file types;
+- form association, accessibility announcements and reduced motion support.
+
+## Code
+
+The code is licensed under the [ISC License](LICENSE).

package/README.md

@@ -0,0 +1,91 @@
+# @sehv-oss/basketball-upload-react
+
+React 19 component for [`<basketball-upload>`](../core): drag and drop, or take the shot.
+
+`<BasketballUpload>` renders the Web Component; it is not a second implementation. Everything about the element — how files get in, uploads, forms, file types and theming — is documented in the [core README](../core/README.md).
+
+**[Live demo](https://sehv-oss.github.io/basketball-upload/)**
+
+Design by **Jorge Molina** ([jm-fuster](https://github.com/jm-fuster), [@jm_fuster](https://www.figma.com/@jm_fuster) on Figma Community). See [NOTICE.md](NOTICE.md).
+
+## Installation
+
+```bash
+# npm
+npm install @sehv-oss/basketball-upload-react
+
+# pnpm
+pnpm add @sehv-oss/basketball-upload-react
+
+# yarn
+yarn add @sehv-oss/basketball-upload-react
+```
+
+`react` 19 or newer is a peer dependency. The element comes along as a dependency.
+
+## Usage
+
+```tsx
+import {
+  BasketballUpload,
+  createXhrUploader,
+  type BasketballUploadElement,
+  type BasketballUploadProps,
+} from '@sehv-oss/basketball-upload-react';
+import * as React from 'react';
+
+// Stable across renders: module scope, useMemo or useCallback.
+const uploader = createXhrUploader({ url: '/api/uploads' });
+
+export function Uploads() {
+  const hoop = React.useRef<BasketballUploadElement>(null);
+
+  const handleOnShot: BasketballUploadProps['onShot'] = ({ file, result }) =>
+    console.log(file.name, result);
+  const handleOnUploadSuccess: BasketballUploadProps['onUploadSuccess'] = ({
+    item,
+  }) => console.log('stored', item.response);
+  const handleOnClick = () => hoop.current?.clear();
+
+  return (
+    <>
+      <BasketballUpload
+        ref={hoop}
+        multiple
+        accept="image/*,.pdf"
+        maxSize={20_000_000}
+        uploader={uploader}
+        onShot={handleOnShot}
+        onUploadSuccess={handleOnUploadSuccess}
+      >
+        <span slot="hint">PDF or images, up to 20 MB</span>
+      </BasketballUpload>
+
+      <button onClick={handleOnClick}>Clear</button>
+    </>
+  );
+}
+```
+
+The component registers the element itself (`tagName` when it was registered under another name). The module starts with `'use client'`, for React Server Components frameworks such as Next.js.
+
+## Props
+
+| Prop                                                                                                           | Element API                            |
+| -------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| `theme`, `accept`, `multiple`, `maxSize`, `maxFiles`, `name`, `required`, `disabled`, `instant`, `concurrency` | attributes, rendered on the server too |
+| `uploader`, `messages`, `fileTypes`                                                                            | properties, applied after mount        |
+| `onFileReject`, `onShot`, `onUploadStart`, `onUploadProgress`, `onUploadSuccess`, `onUploadError`, `onChange`  | events; the callback gets the `detail` |
+| `ref`                                                                                                          | the `<basketball-upload>` element      |
+| `children`                                                                                                     | slotted content (`slot="title"`, …)    |
+| `id`, `className`, `style`, `tagName`                                                                          | the host element                       |
+
+Keep `uploader`, `messages` and `fileTypes` stable (module scope, `useMemo`, `useCallback`): a new value is assigned to the element on every change. Callbacks can change freely.
+
+For forms, render it inside a `<form>` with a `name`, as you would an `<input type="file">`; with React 19 actions, the files arrive in the `FormData`.
+
+The helpers and types needed to use the component are re-exported from the core: `createXhrUploader`, `UploadError`, `registerFileType`, `defaultMessages`, `defaultFileTypes`, and the types of the element, its props and events (`BasketballUploadElement`, `Uploader`, `UploadItem`, `FileType`, `Messages`, …). The ones for building around the element (`resolveFileType`, `matchesAccept`, `formatBytes`, `registerBasketballUpload`) come from [`@sehv-oss/basketball-upload`](../core).
+
+## License
+
+[ISC](LICENSE). Design credit in [NOTICE.md](NOTICE.md).

package/dist/basketball-upload-react.d.ts

@@ -0,0 +1,125 @@
+
+import * as React from "react";
+import { BasketballUploadElement, BasketballUploadElement as BasketballUploadElement$1, BasketballUploadEventMap, BasketballUploadEventMap as BasketballUploadEventMap$1, FileArtwork, FileType, FileType as FileType$1, Messages, Messages as Messages$1, RejectReason, ShotResult, Theme, Theme as Theme$1, UploadContext, UploadError, UploadItem, UploadStatus, Uploader, Uploader as Uploader$1, XhrUploaderOptions, createXhrUploader, defaultFileTypes, defaultMessages, registerFileType } from "@sehv-oss/basketball-upload";
+//#region src/basketball-upload.d.ts
+type Detail<TType extends keyof BasketballUploadEventMap$1> = BasketballUploadEventMap$1[TType]['detail'];
+/**
+ * Props of `<BasketballUpload>`: the attributes and properties of the element,
+ * and its events as callbacks.
+ */
+interface BasketballUploadProps {
+  /**
+   * The `<basketball-upload>` element, for its methods and properties.
+   */
+  ref?: React.Ref<BasketballUploadElement$1> | undefined;
+  /**
+   * Defaults to `system`.
+   */
+  theme?: Theme$1 | undefined;
+  /**
+   * Accepted files, with the syntax of `<input type="file" accept>`.
+   */
+  accept?: string | undefined;
+  /**
+   * Several files at a time. Without it, a new file replaces the previous one.
+   */
+  multiple?: boolean | undefined;
+  /**
+   * Largest accepted file, in bytes.
+   */
+  maxSize?: number | undefined;
+  /**
+   * Most files at once, staged and in the basket.
+   */
+  maxFiles?: number | undefined;
+  /**
+   * Form field the files are submitted under.
+   */
+  name?: string | undefined;
+  /**
+   * The form is invalid while the basket is empty.
+   */
+  required?: boolean | undefined;
+  /**
+   * Ignores files and shots.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * No shooting: every file goes straight into the basket.
+   */
+  instant?: boolean | undefined;
+  /**
+   * Uploads running at the same time. Defaults to 3.
+   */
+  concurrency?: number | undefined;
+  /**
+   * Sends each file. Keep it stable (module scope or `useCallback`).
+   */
+  uploader?: Uploader$1 | null | undefined;
+  /**
+   * Copy overrides. Memoize them: a new object re-renders the copy.
+   */
+  messages?: Partial<Messages$1> | undefined;
+  /**
+   * File types for this element. Memoize them, like `messages`.
+   */
+  fileTypes?: readonly FileType$1[] | undefined;
+  /**
+   * Name the custom element was registered with, when not the default.
+   */
+  tagName?: string | undefined;
+  /**
+   * Set on the element.
+   */
+  id?: string | undefined;
+  /**
+   * Set on the element, as `class`.
+   */
+  className?: string | undefined;
+  /**
+   * Set on the element, custom properties (`--basketball-upload-*`) included.
+   */
+  style?: React.CSSProperties | undefined;
+  /**
+   * Slotted content, such as `<span slot="title">`.
+   */
+  children?: React.ReactNode | undefined;
+  /**
+   * A file did not pass `accept`, `maxSize` or `maxFiles`. Gets the `detail` of the `file-reject` event, not the event.
+   */
+  onFileReject?: ((detail: Detail<'file-reject'>) => void) | undefined;
+  /**
+   * A card went through the net, dunks included, or a shot missed. Gets the `detail` of the `shot` event.
+   */
+  onShot?: ((detail: Detail<'shot'>) => void) | undefined;
+  /**
+   * The uploader was called for an item. Gets the `detail` of the `upload-start` event.
+   */
+  onUploadStart?: ((detail: Detail<'upload-start'>) => void) | undefined;
+  /**
+   * The uploader reported progress. Gets the `detail` of the `upload-progress` event.
+   */
+  onUploadProgress?: ((detail: Detail<'upload-progress'>) => void) | undefined;
+  /**
+   * An upload resolved; `item.response` has its value. Gets the `detail` of the `upload-success` event.
+   */
+  onUploadSuccess?: ((detail: Detail<'upload-success'>) => void) | undefined;
+  /**
+   * An upload rejected; `item.error` has the reason. Gets the `detail` of the `upload-error` event.
+   */
+  onUploadError?: ((detail: Detail<'upload-error'>) => void) | undefined;
+  /**
+   * Files entered or left the basket, or one changed status. Gets the `detail` of the `change` event.
+   */
+  onChange?: ((detail: Detail<'change'>) => void) | undefined;
+}
+/**
+ * `<basketball-upload>` for React 19. Plain values travel as attributes, which
+ * the server renders and the client upgrades; functions and objects
+ * (`uploader`, `messages`, `fileTypes`) and the event callbacks are applied to
+ * the element after it mounts.
+ */
+export declare function BasketballUpload(props: BasketballUploadProps): React.ReactNode;
+//#endregion
+export { type BasketballUploadElement, type BasketballUploadEventMap, type BasketballUploadProps, type FileArtwork, type FileType, type Messages, type RejectReason, type ShotResult, type Theme, type UploadContext, UploadError, type UploadItem, type UploadStatus, type Uploader, type XhrUploaderOptions, createXhrUploader, defaultFileTypes, defaultMessages, registerFileType };
+//# sourceMappingURL=basketball-upload-react.d.ts.map

package/dist/basketball-upload-react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basketball-upload-react.d.ts","names":["BasketballUploadEventMap","BasketballUploadElement","Theme","Uploader","Messages","FileType"],"sources":["../src/basketball-upload.ts"],"mappings":";;;;KAaK,OAAO,oBAAoBA,8BAC9BA,2BAAyB;;;;;UAMV;;;;EAIf,MAAM,MAAM,IAAIC;;;;EAKhB,QAAQC;;;;EAKR;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA,WAAWC;;;;EAKX,WAAW,QAAQC;;;;EAKnB,qBAAqBC;;;;EAKrB;;;;EAKA;;;;EAKA;;;;EAKA,QAAQ,MAAM;;;;EAKd,WAAW,MAAM;;;;EAKjB,iBAAiB,QAAQ;;;;EAKzB,WAAW,QAAQ;;;;EAKnB,kBAAkB,QAAQ;;;;EAK1B,qBAAqB,QAAQ;;;;EAK7B,oBAAoB,QAAQ;;;;EAK5B,kBAAkB,QAAQ;;;;EAK1B,aAAa,QAAQ;;;;;;;;wBA8BP,iBACd,OAAO,wBACN,MAAM"}

package/dist/basketball-upload-react.js

@@ -0,0 +1,75 @@
+'use client';
+import * as React from "react";
+import { DEFAULT_TAG_NAME, UploadError, createXhrUploader, defaultFileTypes, defaultMessages, registerBasketballUpload, registerFileType } from "@sehv-oss/basketball-upload";
+//#region src/basketball-upload.ts
+const EVENTS = {
+	"file-reject": "onFileReject",
+	shot: "onShot",
+	"upload-start": "onUploadStart",
+	"upload-progress": "onUploadProgress",
+	"upload-success": "onUploadSuccess",
+	"upload-error": "onUploadError",
+	change: "onChange"
+};
+/**
+* `<basketball-upload>` for React 19. Plain values travel as attributes, which
+* the server renders and the client upgrades; functions and objects
+* (`uploader`, `messages`, `fileTypes`) and the event callbacks are applied to
+* the element after it mounts.
+*/
+function BasketballUpload(props) {
+	const { ref, theme, accept, multiple, maxSize, maxFiles, name, required, disabled, instant, concurrency, uploader, messages, fileTypes, tagName = DEFAULT_TAG_NAME, children, onFileReject, onShot, onUploadStart, onUploadProgress, onUploadSuccess, onUploadError, onChange, ...rest } = props;
+	registerBasketballUpload({ tagName });
+	const elementRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => elementRef.current, []);
+	const callbacks = React.useRef({});
+	callbacks.current = {
+		onFileReject,
+		onShot,
+		onUploadStart,
+		onUploadProgress,
+		onUploadSuccess,
+		onUploadError,
+		onChange
+	};
+	React.useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		const listeners = new AbortController();
+		for (const [type, callback] of Object.entries(EVENTS)) element.addEventListener(type, (event) => {
+			const handle = callbacks.current[callback];
+			handle?.(event.detail);
+		}, { signal: listeners.signal });
+		return () => listeners.abort();
+	}, []);
+	React.useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (element) element.uploader = uploader ?? null;
+	}, [uploader]);
+	React.useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (element) element.messages = messages;
+	}, [messages]);
+	React.useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (element) element.fileTypes = fileTypes;
+	}, [fileTypes]);
+	return React.createElement(tagName, {
+		...rest,
+		ref: elementRef,
+		theme: theme === "light" || theme === "dark" ? theme : void 0,
+		accept: accept || void 0,
+		multiple: multiple || void 0,
+		"max-size": maxSize,
+		"max-files": maxFiles,
+		name: name || void 0,
+		required: required || void 0,
+		disabled: disabled || void 0,
+		instant: instant || void 0,
+		concurrency
+	}, children);
+}
+//#endregion
+export { BasketballUpload, UploadError, createXhrUploader, defaultFileTypes, defaultMessages, registerFileType };
+
+//# sourceMappingURL=basketball-upload-react.js.map

package/dist/basketball-upload-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basketball-upload-react.js","names":[],"sources":["../src/basketball-upload.ts"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DEFAULT_TAG_NAME,\n  registerBasketballUpload,\n  type BasketballUploadElement,\n  type BasketballUploadEventMap,\n  type FileType,\n  type Messages,\n  type Theme,\n  type Uploader,\n} from '@sehv-oss/basketball-upload';\n\ntype Detail<TType extends keyof BasketballUploadEventMap> =\n  BasketballUploadEventMap[TType]['detail'];\n\n/**\n * Props of `<BasketballUpload>`: the attributes and properties of the element,\n * and its events as callbacks.\n */\nexport interface BasketballUploadProps {\n  /**\n   * The `<basketball-upload>` element, for its methods and properties.\n   */\n  ref?: React.Ref<BasketballUploadElement> | undefined;\n\n  /**\n   * Defaults to `system`.\n   */\n  theme?: Theme | undefined;\n\n  /**\n   * Accepted files, with the syntax of `<input type=\"file\" accept>`.\n   */\n  accept?: string | undefined;\n\n  /**\n   * Several files at a time. Without it, a new file replaces the previous one.\n   */\n  multiple?: boolean | undefined;\n\n  /**\n   * Largest accepted file, in bytes.\n   */\n  maxSize?: number | undefined;\n\n  /**\n   * Most files at once, staged and in the basket.\n   */\n  maxFiles?: number | undefined;\n\n  /**\n   * Form field the files are submitted under.\n   */\n  name?: string | undefined;\n\n  /**\n   * The form is invalid while the basket is empty.\n   */\n  required?: boolean | undefined;\n\n  /**\n   * Ignores files and shots.\n   */\n  disabled?: boolean | undefined;\n\n  /**\n   * No shooting: every file goes straight into the basket.\n   */\n  instant?: boolean | undefined;\n\n  /**\n   * Uploads running at the same time. Defaults to 3.\n   */\n  concurrency?: number | undefined;\n\n  /**\n   * Sends each file. Keep it stable (module scope or `useCallback`).\n   */\n  uploader?: Uploader | null | undefined;\n\n  /**\n   * Copy overrides. Memoize them: a new object re-renders the copy.\n   */\n  messages?: Partial<Messages> | undefined;\n\n  /**\n   * File types for this element. Memoize them, like `messages`.\n   */\n  fileTypes?: readonly FileType[] | undefined;\n\n  /**\n   * Name the custom element was registered with, when not the default.\n   */\n  tagName?: string | undefined;\n\n  /**\n   * Set on the element.\n   */\n  id?: string | undefined;\n\n  /**\n   * Set on the element, as `class`.\n   */\n  className?: string | undefined;\n\n  /**\n   * Set on the element, custom properties (`--basketball-upload-*`) included.\n   */\n  style?: React.CSSProperties | undefined;\n\n  /**\n   * Slotted content, such as `<span slot=\"title\">`.\n   */\n  children?: React.ReactNode | undefined;\n\n  /**\n   * A file did not pass `accept`, `maxSize` or `maxFiles`. Gets the `detail` of the `file-reject` event, not the event.\n   */\n  onFileReject?: ((detail: Detail<'file-reject'>) => void) | undefined;\n\n  /**\n   * A card went through the net, dunks included, or a shot missed. Gets the `detail` of the `shot` event.\n   */\n  onShot?: ((detail: Detail<'shot'>) => void) | undefined;\n\n  /**\n   * The uploader was called for an item. Gets the `detail` of the `upload-start` event.\n   */\n  onUploadStart?: ((detail: Detail<'upload-start'>) => void) | undefined;\n\n  /**\n   * The uploader reported progress. Gets the `detail` of the `upload-progress` event.\n   */\n  onUploadProgress?: ((detail: Detail<'upload-progress'>) => void) | undefined;\n\n  /**\n   * An upload resolved; `item.response` has its value. Gets the `detail` of the `upload-success` event.\n   */\n  onUploadSuccess?: ((detail: Detail<'upload-success'>) => void) | undefined;\n\n  /**\n   * An upload rejected; `item.error` has the reason. Gets the `detail` of the `upload-error` event.\n   */\n  onUploadError?: ((detail: Detail<'upload-error'>) => void) | undefined;\n\n  /**\n   * Files entered or left the basket, or one changed status. Gets the `detail` of the `change` event.\n   */\n  onChange?: ((detail: Detail<'change'>) => void) | undefined;\n}\n\ntype Callbacks = Pick<\n  BasketballUploadProps,\n  | 'onFileReject'\n  | 'onShot'\n  | 'onUploadStart'\n  | 'onUploadProgress'\n  | 'onUploadSuccess'\n  | 'onUploadError'\n  | 'onChange'\n>;\n\nconst EVENTS: { [TType in keyof BasketballUploadEventMap]: keyof Callbacks } = {\n  'file-reject': 'onFileReject',\n  shot: 'onShot',\n  'upload-start': 'onUploadStart',\n  'upload-progress': 'onUploadProgress',\n  'upload-success': 'onUploadSuccess',\n  'upload-error': 'onUploadError',\n  change: 'onChange',\n};\n\n/**\n * `<basketball-upload>` for React 19. Plain values travel as attributes, which\n * the server renders and the client upgrades; functions and objects\n * (`uploader`, `messages`, `fileTypes`) and the event callbacks are applied to\n * the element after it mounts.\n */\nexport function BasketballUpload(\n  props: BasketballUploadProps\n): React.ReactNode {\n  const {\n    ref,\n    theme,\n    accept,\n    multiple,\n    maxSize,\n    maxFiles,\n    name,\n    required,\n    disabled,\n    instant,\n    concurrency,\n    uploader,\n    messages,\n    fileTypes,\n    tagName = DEFAULT_TAG_NAME,\n    children,\n\n    onFileReject,\n    onShot,\n    onUploadStart,\n    onUploadProgress,\n    onUploadSuccess,\n    onUploadError,\n    onChange,\n\n    ...rest\n  } = props;\n\n  registerBasketballUpload({ tagName });\n\n  const elementRef = React.useRef<BasketballUploadElement>(null);\n  React.useImperativeHandle(\n    ref,\n    () => elementRef.current as BasketballUploadElement,\n    []\n  );\n\n  const callbacks = React.useRef<Callbacks>({});\n  callbacks.current = {\n    onFileReject,\n    onShot,\n    onUploadStart,\n    onUploadProgress,\n    onUploadSuccess,\n    onUploadError,\n    onChange,\n  };\n\n  React.useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    const listeners = new AbortController();\n    for (const [type, callback] of Object.entries(EVENTS)) {\n      element.addEventListener(\n        type,\n        (event) => {\n          const handle = callbacks.current[callback] as\n            ((detail: unknown) => void) | undefined;\n          handle?.((event as CustomEvent).detail);\n        },\n        { signal: listeners.signal }\n      );\n    }\n\n    return () => listeners.abort();\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element) element.uploader = uploader ?? null;\n  }, [uploader]);\n\n  React.useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element) element.messages = messages;\n  }, [messages]);\n\n  React.useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element) element.fileTypes = fileTypes;\n  }, [fileTypes]);\n\n  return React.createElement(\n    tagName,\n    {\n      ...rest,\n      ref: elementRef,\n      theme: theme === 'light' || theme === 'dark' ? theme : undefined,\n      accept: accept || undefined,\n      multiple: multiple || undefined,\n      'max-size': maxSize,\n      'max-files': maxFiles,\n      name: name || undefined,\n      required: required || undefined,\n      disabled: disabled || undefined,\n      instant: instant || undefined,\n      concurrency,\n    },\n    children\n  );\n}\n"],"mappings":";;;;AAmKA,MAAM,SAAyE;CAC7E,eAAe;CACf,MAAM;CACN,gBAAgB;CAChB,mBAAmB;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,QAAQ;AACV;;;;;;;AAQA,SAAgB,iBACd,OACiB;CACjB,MAAM,EACJ,KACA,OACA,QACA,UACA,SACA,UACA,MACA,UACA,UACA,SACA,aACA,UACA,UACA,WACA,UAAU,kBACV,UAEA,cACA,QACA,eACA,kBACA,iBACA,eACA,UAEA,GAAG,SACD;CAEJ,yBAAyB,EAAE,QAAQ,CAAC;CAEpC,MAAM,aAAa,MAAM,OAAgC,IAAI;CAC7D,MAAM,oBACJ,WACM,WAAW,SACjB,CAAC,CACH;CAEA,MAAM,YAAY,MAAM,OAAkB,CAAC,CAAC;CAC5C,UAAU,UAAU;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,gBAAgB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,MAAM,YAAY,IAAI,gBAAgB;EACtC,KAAK,MAAM,CAAC,MAAM,aAAa,OAAO,QAAQ,MAAM,GAClD,QAAQ,iBACN,OACC,UAAU;GACT,MAAM,SAAS,UAAU,QAAQ;GAEjC,SAAU,MAAsB,MAAM;EACxC,GACA,EAAE,QAAQ,UAAU,OAAO,CAC7B;EAGF,aAAa,UAAU,MAAM;CAC/B,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB;EAC1B,MAAM,UAAU,WAAW;EAC3B,IAAI,SAAS,QAAQ,WAAW,YAAY;CAC9C,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,sBAAsB;EAC1B,MAAM,UAAU,WAAW;EAC3B,IAAI,SAAS,QAAQ,WAAW;CAClC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,sBAAsB;EAC1B,MAAM,UAAU,WAAW;EAC3B,IAAI,SAAS,QAAQ,YAAY;CACnC,GAAG,CAAC,SAAS,CAAC;CAEd,OAAO,MAAM,cACX,SACA;EACE,GAAG;EACH,KAAK;EACL,OAAO,UAAU,WAAW,UAAU,SAAS,QAAQ,KAAA;EACvD,QAAQ,UAAU,KAAA;EAClB,UAAU,YAAY,KAAA;EACtB,YAAY;EACZ,aAAa;EACb,MAAM,QAAQ,KAAA;EACd,UAAU,YAAY,KAAA;EACtB,UAAU,YAAY,KAAA;EACtB,SAAS,WAAW,KAAA;EACpB;CACF,GACA,QACF;AACF"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@sehv-oss/basketball-upload-react",
+  "version": "1.0.0",
+  "description": "React component for <basketball-upload>, the basketball-themed drag and drop file upload.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/basketball-upload-react.d.ts",
+      "default": "./dist/basketball-upload-react.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "./dist",
+    "NOTICE.md"
+  ],
+  "keywords": [
+    "react",
+    "file-upload",
+    "upload",
+    "dropzone",
+    "drag-and-drop",
+    "dnd",
+    "basketball",
+    "web-component"
+  ],
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sehv-oss/basketball-upload.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://sehv-oss.github.io/basketball-upload/",
+  "bugs": {
+    "url": "https://github.com/sehv-oss/basketball-upload/issues"
+  },
+  "engines": {
+    "node": ">=24 <27"
+  },
+  "dependencies": {
+    "@sehv-oss/basketball-upload": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=19",
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@sehv-oss/typescript-config": "0.0.1",
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/browser-playwright": "5.0.3",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "0.23.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.3",
+    "vitest-browser-react": "2.3.0"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json && tsc --project tsconfig.tests.json && tsdown"
+  }
+}