@pallasoft/ps-input-components 1.0.0 → 1.1.0

package/dist/components/ps-file-picker.d.ts

@@ -0,0 +1,12 @@
+export interface PsFilePickerProps {
+    accept: string[];
+    acceptLabel: string;
+    className?: string;
+    disabled?: boolean;
+    dropLabel: string;
+    maxSizeBytes?: number;
+    maxSizeLabel?: string;
+    onError?: (message: string) => void;
+    onFileLoad: (file: File) => void;
+}
+export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }: PsFilePickerProps) => import("react").JSX.Element;

package/dist/components/ps-file-picker.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFilePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
+    const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
+    const onFileChange = (event) => {
+        const newFile = event.target.files?.[0];
+        if (!newFile || disabled)
+            return;
+        if (!accept.includes(newFile.type)) {
+            onError?.('Invalid file type. Please select a supported file.');
+            event.target.value = '';
+            return;
+        }
+        if (maxSizeBytes && newFile.size > maxSizeBytes) {
+            onError?.(maxSizeLabel ? `File is too large. ${maxSizeLabel}.` : 'File is too large.');
+            event.target.value = '';
+            return;
+        }
+        onFileLoad(newFile);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-3 text-center', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: 'upload', className: 'h-8 w-8 text-primary' }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: dropLabel }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: "or click to browse your files" }), maxSizeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, (0, jsx_runtime_1.jsxs)("p", { className: 'text-body-3 text-ink/60', children: ["Accepted formats: ", acceptLabel] })] })] }), (0, jsx_runtime_1.jsx)("input", { type: 'file', accept: acceptAttr, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', "aria-label": 'File upload', onChange: onFileChange, disabled: disabled, "aria-disabled": disabled })] }));
+};
+exports.PsFilePicker = PsFilePicker;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
+export * from './components/ps-file-picker';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
+__exportStar(require("./components/ps-file-picker"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -29,8 +29,9 @@
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
-		"@pallasoft/ps-core-components": "^1.0.0",
-		"@pallasoft/ps-design-system": "^1.0.0",
+		"@pallasoft/ps-core-components": "^1.4.0",
+		"@pallasoft/ps-design-system": "^1.1.0",
+		"@pallasoft/ps-icons": "^1.1.0",
 		"react-aria-components": "^1.19.0"
 	},
 	"peerDependencies": {