@jamsrui/file-upload 0.0.2

package/README.md

@@ -0,0 +1,40 @@
+# 🚀 **JamsrUI**
+
+**A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**
+
+
+## 📖 **Overview**
+
+[JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.
+
+## 🚀 Getting Started 
+
+Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).
+
+## ✨ Features
+
+- 🚀 **Production-Ready**: Optimized for modern React projects.
+- 🎨 **Customizable**: Easily override styles and themes.
+- 🛠️ **Reusable Components**: Save time with prebuilt, efficient UI elements.
+- ⚡ **Developer-Friendly**: Simple API and well-documented usage.
+- 📦 **Lightweight**: Minimal dependencies for fast performance.
+- 🖥️ **Modern Design**: Clean, responsive, and user-friendly components.
+
+## 🌱 Community
+
+We’re thrilled to see the community actively engage with **JamsrUI**! Whether you're sharing feedback, reporting bugs, requesting features, or showcasing projects built with JamsrUI, your involvement helps us grow and improve.
+
+### How to Engage
+
+- 💬 **Report Bugs**: [GitHub Issues](https://github.com/jamsrworld/jamsr-ui/issues)
+- 🚀 **Request Features**: Share ideas for new components.
+- 🤝 **Showcase Projects**: Let us know how you use JamsrUI.
+
+## Contributing
+
+We welcome contributions from developers of all skill levels!
+
+## ⭐ Support the Project
+
+If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
+

package/dist/chunk-6IBQMG7P.mjs

@@ -0,0 +1 @@
+import{a as l}from"./chunk-VU6NRBJY.mjs";import{cn as c}from"@jamsrui/utils";import{useState as g}from"react";import{jsx as o,jsxs as i}from"react/jsx-runtime";var v=u=>{let[d,a]=g([]),{getInputProps:t,isDragging:n,files:p,removeFile:m}=l({onFilesAdded(e){a(r=>[...r,...e.map(s=>({fileId:s.id,progress:0,completed:!1}))])}});return i("div",{children:[o("input",{className:c("w-full h-24 border",n&&"border-dashed border-primary"),multiple:!0,...t({})}),p.length>0&&o("ul",{className:"flex gap-4 py-4",children:p.map(e=>{let r=d.find(s=>s.fileId===e.id);return i("li",{className:"flex flex-col gap-4",children:[o("img",{className:"size-20",src:e.preview,alt:e.file.name}),o("p",{children:e.file.name}),o("button",{onClick:()=>m(e.id),children:"Remove"}),r&&o("div",{})]},e.id)})})]})};export{v as a};

package/dist/chunk-VU6NRBJY.mjs

@@ -0,0 +1 @@
+import{useCallback as n,useMemo as O,useRef as z,useState as y}from"react";import{cn as C,mergeProps as N}from"@jamsrui/utils";var j=x=>{let{accept:H,maxFiles:d=Number.POSITIVE_INFINITY,maxSize:m=Number.POSITIVE_INFINITY,multiple:a,onFilesAdded:F,onFilesChange:s}=x,[v,u]=y(!1),[r,o]=y([]),l=z(null),h=n(e=>e instanceof File?e.type.startsWith("image/")?URL.createObjectURL(e):void 0:e.url,[]),P=n(e=>e instanceof File?`${e.name}-${Date.now()}-${Math.random().toString(36).substring(2,9)}`:e.id,[]),c=n(()=>{o(e=>{for(let t of e)t.preview&&t.file instanceof File&&URL.revokeObjectURL(t.preview);return[]}),s?.([])},[s]),p=n(e=>{if(e.length===0||(a||c(),a&&r.length+e.length>d))return;let t=[],f=Array.from(e);for(let i of f)a&&r.some(b=>b.file.name===i.name&&b.file.size===i.size)||i.size>m||t.push({file:i,id:P(i),preview:h(i)});t.length<1||(F?.(t),o(i=>{let g=a?[...i,...t]:t.slice(0,1);return s?.(g),g}),l.current&&(l.current.value=""))},[c,h,r,P,d,m,a,F,s]),D=n(e=>{if((e.target.files?.length??0)>0){let t=e.target.files;t&&p(t)}},[p]),I=n(e=>{let t=r.find(i=>i.id===e);t&&t.file instanceof File&&t.preview&&URL.revokeObjectURL(t.preview);let f=r.filter(i=>i.id!==e);s?.(f),o(f)},[r,s]),E=n(e=>{e.preventDefault(),e.stopPropagation(),u(!0)},[]),L=n(e=>{e.preventDefault(),e.stopPropagation(),!e.currentTarget.contains(e.relatedTarget)&&u(!1)},[]),R=n(e=>{e.preventDefault(),e.stopPropagation()},[]),w=n(e=>{e.preventDefault(),e.stopPropagation();let t=e.dataTransfer.files;t&&p(t),u(!1)},[p]),T=n(e=>({type:"file",multiple:a,ref:l,className:C(e.className,"sr-only"),...N(e,{onChange:D})}),[D,a]),U=n(e=>({...N(e,{onDragEnter:E,onDragLeave:L,onDrop:w,onDragOver:R})}),[E,L,w,R]),M=n(()=>{l.current&&l.current.click()},[]);return O(()=>({isDragging:v,getInputProps:T,files:r,setFiles:o,removeFile:I,getRootProps:U,openFileDialog:M,clearFiles:c}),[v,T,r,o,I,U,M,c])};export{j as a};

package/dist/chunk-XDA6AU4J.mjs

@@ -0,0 +1 @@
+var e=(t,o=2)=>{if(t===0)return"0 Bytes";let r=1024,B=o<0?0:o,n=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],s=Math.floor(Math.log(t)/Math.log(r));return Number.parseFloat((t/r**s).toFixed(B))+" "+n[s]};export{e as a};

package/dist/chunk-XVMAP2VZ.mjs

@@ -0,0 +1 @@
+import{createConfigContext as o}from"@jamsrui/utils";var[i,p]=o({displayName:"FileUploadConfig"});export{i as a,p as b};

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

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GlobalConfigProps } from '@jamsrui/core';
+import { FileUpload } from './file-upload.mjs';
+import '@jamsrui/utils';
+
+declare const useFileUploadConfig: () => Record<string, any>;
+declare const FileUploadConfig: (props: Omit<Partial<Record<string, any>>, "children"> & {
+    merge?: boolean;
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare namespace FileUploadConfig {
+    interface Props extends FileUpload.Props, GlobalConfigProps<FileUpload.Props> {
+    }
+}
+
+export { FileUploadConfig, useFileUploadConfig };

package/dist/file-upload-config.mjs

@@ -0,0 +1 @@
+"use client";import{a,b}from"./chunk-XVMAP2VZ.mjs";export{a as FileUploadConfig,b as useFileUploadConfig};

package/dist/file-upload.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIProps } from '@jamsrui/utils';
+
+declare const FileUpload: (props: FileUpload.Props) => react_jsx_runtime.JSX.Element;
+declare namespace FileUpload {
+    interface Props extends UIProps<"div"> {
+    }
+}
+
+export { FileUpload };

package/dist/file-upload.mjs

@@ -0,0 +1 @@
+"use client";import{a}from"./chunk-6IBQMG7P.mjs";import"./chunk-VU6NRBJY.mjs";export{a as FileUpload};

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+export { FileUpload } from './file-upload.mjs';
+export { FileUploadConfig, useFileUploadConfig } from './file-upload-config.mjs';
+export { useFileUpload } from './use-file-upload.mjs';
+export { formatBytes } from './utils.mjs';
+import 'react/jsx-runtime';
+import '@jamsrui/utils';
+import '@jamsrui/core';
+import 'react';

package/dist/index.mjs

@@ -0,0 +1 @@
+import{a as o,b as e}from"./chunk-XVMAP2VZ.mjs";import{a as l}from"./chunk-6IBQMG7P.mjs";import{a as r}from"./chunk-VU6NRBJY.mjs";import{a as p}from"./chunk-XDA6AU4J.mjs";export{l as FileUpload,o as FileUploadConfig,p as formatBytes,r as useFileUpload,e as useFileUploadConfig};

package/dist/styles.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

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

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { PropGetter, UIProps } from '@jamsrui/utils';
+
+type FileMetadata = {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    id: string;
+};
+type FileWithPreview = {
+    file: File | FileMetadata;
+    id: string;
+    preview?: string;
+};
+declare const useFileUpload: (props: useFileUpload.Props) => {
+    isDragging: boolean;
+    getInputProps: PropGetter<UIProps<"input">>;
+    files: FileWithPreview[];
+    setFiles: react.Dispatch<react.SetStateAction<FileWithPreview[]>>;
+    removeFile: (id: string) => void;
+    getRootProps: PropGetter<UIProps<"div">>;
+    openFileDialog: () => void;
+    clearFiles: () => void;
+};
+declare namespace useFileUpload {
+    interface Props {
+        maxSize?: number;
+        maxFiles?: number;
+        accept?: string;
+        multiple?: boolean;
+        onFilesChange?: (files: FileWithPreview[]) => void;
+        onFilesAdded?: (files: FileWithPreview[]) => void;
+    }
+}
+
+export { type FileMetadata, type FileWithPreview, useFileUpload };

package/dist/use-file-upload.mjs

@@ -0,0 +1 @@
+"use client";import{a}from"./chunk-VU6NRBJY.mjs";export{a as useFileUpload};

package/dist/use-file.d.mts

@@ -0,0 +1,47 @@
+import { DragEvent, ChangeEvent, InputHTMLAttributes } from 'react';
+
+type FileMetadata = {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    id: string;
+};
+type FileWithPreview = {
+    file: File | FileMetadata;
+    id: string;
+    preview?: string;
+};
+type FileUploadOptions = {
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: string;
+    multiple?: boolean;
+    initialFiles?: FileMetadata[];
+    onFilesChange?: (files: FileWithPreview[]) => void;
+    onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
+};
+type FileUploadState = {
+    files: FileWithPreview[];
+    isDragging: boolean;
+    errors: string[];
+};
+type FileUploadActions = {
+    addFiles: (files: FileList | File[]) => void;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+    clearErrors: () => void;
+    handleDragEnter: (e: DragEvent<HTMLElement>) => void;
+    handleDragLeave: (e: DragEvent<HTMLElement>) => void;
+    handleDragOver: (e: DragEvent<HTMLElement>) => void;
+    handleDrop: (e: DragEvent<HTMLElement>) => void;
+    handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    openFileDialog: () => void;
+    getInputProps: (props?: InputHTMLAttributes<HTMLInputElement>) => InputHTMLAttributes<HTMLInputElement> & {
+        ref: any;
+    };
+};
+declare const useFileUpload: (options?: FileUploadOptions) => [FileUploadState, FileUploadActions];
+declare const formatBytes: (bytes: number, decimals?: number) => string;
+
+export { type FileMetadata, type FileUploadActions, type FileUploadOptions, type FileUploadState, type FileWithPreview, formatBytes, useFileUpload };

package/dist/use-file.mjs

@@ -0,0 +1 @@
+"use client";import{useCallback as r,useRef as A,useState as B}from"react";var N=(m={})=>{let{maxFiles:f=Number.POSITIVE_INFINITY,maxSize:a=Number.POSITIVE_INFINITY,accept:p="*",multiple:l=!1,initialFiles:F=[],onFilesChange:d,onFilesAdded:D}=m,[v,o]=B({errors:[],files:F.map(e=>({file:e,id:e.id,preview:e.url})),isDragging:!1}),u=A(null),L=r(e=>{if(e instanceof File){if(e.size>a)return`File "${e.name}" exceeds the maximum size of ${h(a)}.`}else if(e.size>a)return`File "${e.name}" exceeds the maximum size of ${h(a)}.`;if(p!=="*"){let i=p.split(",").map(s=>s.trim()),n=e instanceof File?e.type||"":e.type,c=`.${e instanceof File,e.name.split(".").pop()}`;if(!i.some(s=>{if(s.startsWith("."))return c.toLowerCase()===s.toLowerCase();if(s.endsWith("/*")){let x=s.split("/")[0];return n.startsWith(`${x}/`)}return n===s}))return`File "${e instanceof File,e.name}" is not an accepted file type.`}return null},[p,a]),M=r(e=>e instanceof File?URL.createObjectURL(e):e.url,[]),I=r(e=>e instanceof File?`${e.name}-${Date.now()}-${Math.random().toString(36).substring(2,9)}`:e.id,[]),E=r(()=>{o(e=>{for(let n of e.files??[])n.preview&&n.file instanceof File&&n.file.type.startsWith("image/")&&URL.revokeObjectURL(n.preview);u.current&&(u.current.value="");let i={...e,errors:[],files:[]};return d?.(i.files),i})},[d]),g=r(e=>{if(!e||e.length===0)return;let i=Array.from(e),n=[];if(o(t=>({...t,errors:[]})),l||E(),l&&f!==Number.POSITIVE_INFINITY&&v.files.length+i.length>f){n.push(`You can only upload a maximum of ${f} files.`),o(t=>({...t,errors:n}));return}let c=[];for(let t of i){if(l&&v.files.some(b=>b.file.name===t.name&&b.file.size===t.size))continue;if(t.size>a){n.push(l?`Some files exceed the maximum size of ${h(a)}.`:`File exceeds the maximum size of ${h(a)}.`);continue}let s=L(t);if(s){n.push(s);continue}c.push({file:t,id:I(t),preview:M(t)})}c.length>0?(D?.(c),o(t=>{let s=l?[...t.files,...c]:c;return d?.(s),{...t,errors:n,files:s}})):n.length>0&&o(t=>({...t,errors:n})),u.current&&(u.current.value="")},[v.files,f,l,a,L,M,I,E,d,D]),w=r(e=>{o(i=>{let n=i.files.find(t=>t.id===e);n?.preview&&n.file instanceof File&&n.file.type.startsWith("image/")&&URL.revokeObjectURL(n.preview);let c=i.files.filter(t=>t.id!==e);return d?.(c),{...i,errors:[],files:c}})},[d]),y=r(()=>{o(e=>({...e,errors:[]}))},[]),H=r(e=>{e.preventDefault(),e.stopPropagation(),o(i=>({...i,isDragging:!0}))},[]),P=r(e=>{e.preventDefault(),e.stopPropagation(),!e.currentTarget.contains(e.relatedTarget)&&o(i=>({...i,isDragging:!1}))},[]),U=r(e=>{e.preventDefault(),e.stopPropagation()},[]),z=r(e=>{if(e.preventDefault(),e.stopPropagation(),o(i=>({...i,isDragging:!1})),!u.current?.disabled&&e.dataTransfer.files&&e.dataTransfer.files.length>0)if(l)g(e.dataTransfer.files);else{let i=e.dataTransfer.files[0];i&&g([i])}},[g,l]),T=r(e=>{e.target.files&&e.target.files.length>0&&g(e.target.files)},[g]),S=r(()=>{u.current&&u.current.click()},[]),$=r((e={})=>({...e,accept:e.accept||p,multiple:e.multiple!==void 0?e.multiple:l,onChange:T,ref:u,type:"file"}),[p,l,T]);return[v,{addFiles:g,clearErrors:y,clearFiles:E,getInputProps:$,handleDragEnter:H,handleDragLeave:P,handleDragOver:U,handleDrop:z,handleFileChange:T,openFileDialog:S,removeFile:w}]},h=(m,f=2)=>{if(m===0)return"0 Bytes";let a=1024,p=f<0?0:f,l=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],F=Math.floor(Math.log(m)/Math.log(a));return Number.parseFloat((m/a**F).toFixed(p))+l[F]};export{h as formatBytes,N as useFileUpload};

package/dist/utils.d.mts

@@ -0,0 +1,3 @@
+declare const formatBytes: (bytes: number, decimals?: number) => string;
+
+export { formatBytes };

package/dist/utils.mjs

@@ -0,0 +1 @@
+import{a}from"./chunk-XDA6AU4J.mjs";export{a as formatBytes};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jamsrui/file-upload",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "dependencies": {
+    "@jamsrui/hooks": "^0.0.13",
+    "@jamsrui/utils": "^0.0.13",
+    "@jamsrui/core": "^0.0.11"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "description": "A modern and beautiful Next.js UI components library.",
+  "keywords": [
+    "react",
+    "ui",
+    "UI components",
+    "Next.js",
+    "React",
+    "JamsrUI",
+    "jamsr-ui",
+    "TypeScript"
+  ],
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "@jamsrworld",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jamsrworld/jamsr-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/jamsrworld/jamsr-ui/issues"
+  },
+  "homepage": "https://jamsr-ui.jamsrworld.com",
+  "files": [
+    "dist",
+    "README",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ]
+}