@vrobots/storybook 0.1.62 → 0.1.64

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.62",
+    "version": "0.1.64",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/Breadcrumbs.js

@@ -5,7 +5,7 @@ export const Breadcrumbs = React.forwardRef(({ breadcrumbs }, ref) => {
     if (!!breadcrumbs) {
         const crumbs = breadcrumbs.map(({ title, nav, color: itemColor, onClick }, key) => {
             if (!!nav) {
-                return (_jsxs(HStack, { children: [_jsx(Text, { as: 'button', color: itemColor || 'blue.500', whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', truncate: true, onClick: () => onClick?.(nav), children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
+                return (_jsxs(HStack, { children: [_jsx(Text, { as: 'button', color: itemColor || 'blue.500', whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', cursor: 'pointer', truncate: true, onClick: () => onClick?.(nav), children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
             }
             return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: 'gray.500', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
         });

package/dist/src/components/form/FileUploader.d.ts

@@ -7,6 +7,7 @@ export interface IFileUploaderProps extends CardRootProps {
     accept?: string;
     multiple?: boolean;
     onFilesSelected?: (files: File[]) => void;
+    children?: React.ReactNode;
 }
-declare const FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, children, ...props }: IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FileUploader;

package/dist/src/components/form/FileUploader.js

@@ -27,7 +27,7 @@ const filterFilesByAccept = (files, accept) => {
         return files;
     return files.filter((file) => rules.some((rule) => fileMatchesRule(file, rule)));
 };
-const FileUploader = ({ title, description, buttonLabel, helperText, accept, multiple = true, onFilesSelected, ...props }) => {
+const FileUploader = ({ title, description, buttonLabel, helperText, accept, multiple = true, onFilesSelected, children, ...props }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [files, setFiles] = useState([]);
     const fileInputRef = useRef(null);
@@ -54,6 +54,6 @@ const FileUploader = ({ title, description, buttonLabel, helperText, accept, mul
         const droppedFiles = Array.from(event.dataTransfer.files ?? []);
         handleFiles(droppedFiles);
     };
-    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Upload Files" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { mt: 4, p: 6, borderWidth: "2px", borderStyle: "dashed", borderColor: isDragging ? "teal.500" : "border.emphasized", borderRadius: "md", bg: isDragging ? "teal.subtle" : "bg.muted", textAlign: "center", transition: "background 0.2s ease, border-color 0.2s ease", onDragEnter: handleDrag(true), onDragOver: handleDrag(true), onDragLeave: handleDrag(false), onDrop: handleDrop, children: [_jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsx(Text, { fontSize: "sm", color: "fg.muted", mt: 1, children: "or click the button below to browse from your device" }), _jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: handleFileInputChange }), _jsx(Button, { mt: 4, onClick: () => fileInputRef.current?.click(), children: buttonLabel || "Choose Files" }), !!helperText && (_jsx(Text, { fontSize: "xs", color: "fg.muted", mt: 3, children: helperText }))] }), files.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", mb: 2, children: "Selected Files" }), _jsx(List.Root, { gap: "1", children: files.map((file) => (_jsx(List.Item, { children: file.name }, `${file.name}-${file.size}`))) })] }))] }) }));
+    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Upload Files" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { mt: 4, p: 6, borderWidth: "2px", borderStyle: "dashed", borderColor: isDragging ? "teal.500" : "border.emphasized", borderRadius: "md", bg: isDragging ? "teal.subtle" : "bg.muted", textAlign: "center", transition: "background 0.2s ease, border-color 0.2s ease", onDragEnter: handleDrag(true), onDragOver: handleDrag(true), onDragLeave: handleDrag(false), onDrop: handleDrop, children: [_jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsx(Text, { fontSize: "sm", color: "fg.muted", mt: 1, children: "or click the button below to browse from your device" }), _jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: handleFileInputChange }), _jsx(Button, { mt: 4, onClick: () => fileInputRef.current?.click(), children: buttonLabel || "Choose Files" }), !!helperText && (_jsx(Text, { fontSize: "xs", color: "fg.muted", mt: 3, children: helperText }))] }), files.length > 0 && (_jsxs(Box, { mt: 4, mb: 4, children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", mb: 2, children: "Selected Files" }), _jsx(List.Root, { gap: "1", children: files.map((file) => (_jsx(List.Item, { children: file.name }, `${file.name}-${file.size}`))) })] })), children] }) }));
 };
 export default FileUploader;

package/dist/src/components/form/index.d.ts

@@ -5,6 +5,6 @@ declare const Form: {
     (): null;
     Login: ({ title, description, onLogin, ...props }: import("./Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
     SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: import("./SecondFactorAuth").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
-    FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: import("./FileUploader").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+    FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, children, ...props }: import("./FileUploader").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Form;

package/dist/src/stories/FileUploader.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, ...props }: import("../components").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, children, ...props }: import("../components").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.62",
+  "version": "0.1.64",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",