softable-pixels-web 1.2.28 → 1.2.29

package/dist/{FileInput-CgtLe4M7.js → FileInput-C6N2PiPi.js}

@@ -1,6 +1,8 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
 import { t as Typography } from "./Typography-D1dxTP-6.js";
 import { t as Icon } from "./Icon-lVgQoCFP.js";
+import { t as Label } from "./Label-lzG8Cp8P.js";
+import { t as ErrorMessage } from "./ErrorMessage-kAHOafpg.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -162,14 +164,25 @@ function useFileInput({ files, multiple, maxFileSizeInMB = MAX_FILE_SIZE_IN_MB,
 function createFileInputStyles(props) {
 	return styled({
 		container: {
+			width: "100%",
 			display: "flex",
 			flexDirection: "column",
 			rowGap: 12
 		},
+		wrapper: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
+			rowGap: 8
+		},
 		input: {
+			width: "100%",
+			height: "100%",
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
+			justifyContent: "center",
 			rowGap: 8,
 			paddingTop: 24,
 			paddingBottom: 24,
@@ -241,59 +254,71 @@ const FileInput = (props) => {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			style: styles.input,
-			onClick: handleInputClick,
-			onDrop: handleFileDrop,
-			onDragOver: handleDragOver,
-			onDragEnter: handleDragEnter,
-			onDragLeave: handleDragLeave,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					style: styles.icon,
-					children: /* @__PURE__ */ jsx(Icon, { name: "general-upload" })
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					style: styles.title,
-					children: [/* @__PURE__ */ jsx(Typography, {
-						variant: "b1",
-						color: "var(--px-color-primary)",
-						fontWeight: "bold",
-						children: "Clique para carregar"
-					}), /* @__PURE__ */ jsx(Typography, {
-						variant: "b1",
-						children: "ou arraste um arquivo"
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					style: styles.description,
-					children: /* @__PURE__ */ jsxs(Typography, {
-						variant: "b2",
-						color: "var(--px-text-primary)",
-						children: [
-							renderExtensions(),
-							renderSeparator(),
-							renderMaxAllowedSize()
-						]
-					})
-				}),
-				/* @__PURE__ */ jsx("input", {
-					ref: inputRef,
-					type: "file",
-					hidden: true,
-					accept,
-					multiple,
-					onChange: handleFileChange
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			style: styles.files,
-			children: renderFiles()
-		})]
+		children: [
+			props.label ? /* @__PURE__ */ jsx(Label, {
+				label: props.label,
+				required: props.required,
+				htmlFor: "fileInput"
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.wrapper,
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					style: styles.input,
+					onClick: handleInputClick,
+					onDrop: handleFileDrop,
+					onDragOver: handleDragOver,
+					onDragEnter: handleDragEnter,
+					onDragLeave: handleDragLeave,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: styles.icon,
+							children: /* @__PURE__ */ jsx(Icon, { name: "general-upload" })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: styles.title,
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "b1",
+								color: "var(--px-color-primary)",
+								fontWeight: "bold",
+								children: "Clique para carregar"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "b1",
+								children: "ou arraste um arquivo"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: styles.description,
+							children: /* @__PURE__ */ jsxs(Typography, {
+								variant: "b2",
+								color: "var(--px-text-primary)",
+								children: [
+									renderExtensions(),
+									renderSeparator(),
+									renderMaxAllowedSize()
+								]
+							})
+						}),
+						/* @__PURE__ */ jsx("input", {
+							hidden: true,
+							type: "file",
+							id: "fileInput",
+							ref: inputRef,
+							accept,
+							multiple,
+							onChange: handleFileChange
+						})
+					]
+				}), props.errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { message: props.errorMessage }) : null]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.files,
+				children: renderFiles()
+			})
+		]
 	});
 };
 
 //#endregion
 export { types_exports as n, FileInput as t };
-//# sourceMappingURL=FileInput-CgtLe4M7.js.map
+//# sourceMappingURL=FileInput-C6N2PiPi.js.map

package/dist/FileInput-C6N2PiPi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput-C6N2PiPi.js","names":["RemoveButton: React.FC<RemoveButtonProps>","FileCard: React.FC<FileCardProps>","FileInput: React.FC<FileInputProps>"],"sources":["../src/components/commons/inputs/FileInput/components/FileCard/components/RemoveButton/styles.ts","../src/components/commons/inputs/FileInput/components/FileCard/components/RemoveButton/index.tsx","../src/components/commons/inputs/FileInput/components/FileCard/styles.ts","../src/components/commons/inputs/FileInput/components/FileCard/index.tsx","../src/components/commons/inputs/FileInput/constants.ts","../src/components/commons/inputs/FileInput/hooks/useFileInput/index.tsx","../src/components/commons/inputs/FileInput/styles.ts","../src/components/commons/inputs/FileInput/types.ts","../src/components/commons/inputs/FileInput/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createRemoveButtonStyles() {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      cursor: 'pointer',\n\n      padding: 2,\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n\n      borderColor: 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderRadius: 40,\n      backgroundColor: 'var(--px-bg)',\n\n      transform: 'translateY(-50%) translateX(50%)'\n    }\n  })\n}\n","// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { RemoveButtonProps } from './types'\n\n// Styles\nimport { createRemoveButtonStyles } from './styles'\n\nexport const RemoveButton: React.FC<RemoveButtonProps> = ({ onClick }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createRemoveButtonStyles)\n\n  return (\n    <button type=\"button\" style={styles.container} onClick={onClick}>\n      <Icon name=\"general-close\" size=\"xs\" color=\"var(--color-error)\" />\n    </button>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createFileCardStyles() {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n      rowGap: 4\n    },\n    content: {\n      position: 'relative',\n      width: 80,\n      height: 60,\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n\n      borderColor: 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderRadius: 8\n    }\n  })\n}\n","// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { RemoveButton } from './components/RemoveButton'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { FileCardProps } from './types'\n\n// Styles\nimport { createFileCardStyles } from './styles'\n\nexport const FileCard: React.FC<FileCardProps> = ({ file, onRemoveClick }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createFileCardStyles)\n\n  // Functions\n  function renderName() {\n    if (file.name.length <= 10) return file.name\n    return `${file.name.substring(0, 10)}...`\n  }\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.content}>\n        <RemoveButton onClick={onRemoveClick} />\n\n        <Icon name=\"general-file\" />\n      </div>\n\n      <Typography variant=\"b3\" color=\"var(--px-text-primary)\">\n        {renderName()}\n      </Typography>\n    </div>\n  )\n}\n","export const MAX_FILE_SIZE_IN_MB = 5\nexport const BYTES_IN_MB = 1024 * 1024\n","// External Libraries\nimport { useRef, useState } from 'react'\n\n// Constants\nimport { BYTES_IN_MB, MAX_FILE_SIZE_IN_MB } from '../../constants'\n\n// Types\nimport type { FileInputProps } from '../../types'\n\nexport function useFileInput({\n  files,\n  multiple,\n  maxFileSizeInMB = MAX_FILE_SIZE_IN_MB,\n  acceptedExtensions,\n  onFileChange\n}: FileInputProps) {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // Constants\n  const accept = acceptedExtensions?.map(extension => `.${extension}`).join(',')\n  const maxFileSizeInBytes = maxFileSizeInMB * BYTES_IN_MB\n\n  // States\n  const [isDragging, setIsDragging] = useState(false)\n\n  // Functions\n  function handleInputClick(e: React.MouseEvent) {\n    e.stopPropagation()\n\n    if (inputRef.current) inputRef.current.value = ''\n    inputRef.current?.click()\n  }\n\n  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const selectedFiles = Array.from(e.target.files ?? [])\n\n    if (!selectedFiles.length) return\n\n    const validFiles = selectedFiles.filter(isSizeAllowed)\n\n    if (!validFiles.length) return\n\n    if (multiple) {\n      onFileChange([...(files ?? []), ...validFiles])\n    } else {\n      onFileChange([validFiles[0]])\n    }\n  }\n\n  function handleFileDrop(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(false)\n\n    const droppedFiles = Array.from(e.dataTransfer.files)\n\n    if (!droppedFiles.length) return\n\n    const allowedFiles = droppedFiles.filter(file => isSizeAllowed(file))\n\n    if (multiple) {\n      onFileChange([...files, ...allowedFiles])\n    } else {\n      onFileChange([allowedFiles[0]])\n    }\n  }\n\n  function handleDragEnter(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(true)\n  }\n\n  function handleDragOver(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n  }\n\n  function handleDragLeave(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(false)\n  }\n\n  function handleRemoveClick(file: File) {\n    const filesSet = new Set(files)\n    filesSet.delete(file)\n    const nextFiles = Array.from(filesSet)\n    onFileChange(nextFiles)\n  }\n\n  function isSizeAllowed(file: File) {\n    return file.size <= maxFileSizeInBytes\n  }\n\n  return {\n    accept,\n    inputRef,\n    isDragging,\n    maxFileSizeInMB,\n    handleFileDrop,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleFileChange,\n    handleInputClick,\n    handleRemoveClick\n  }\n}\n","// Types\nimport type { FileInputProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Props extends FileInputProps {\n  isDragging: boolean\n}\n\nexport function createFileInputStyles(props: Props) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      rowGap: 12\n    },\n    wrapper: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      rowGap: 8\n    },\n    input: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      rowGap: 8,\n\n      paddingTop: 24,\n      paddingBottom: 24,\n      paddingLeft: 40,\n      paddingRight: 40,\n\n      borderColor: props.isDragging\n        ? 'var(--px-color-primary)'\n        : 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderStyle: props.isDragging\n        ? 'dashed'\n        : (props.borderVariant ?? 'solid'),\n      borderRadius: 16,\n\n      cursor: props.isDragging ? 'grabbing' : 'pointer',\n\n      __rules: {\n        '&:hover': {\n          borderColor: 'var(--px-color-primary) !important'\n        }\n      }\n    },\n    icon: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: 12,\n      border: '1px solid var(--px-border-primary)',\n      borderRadius: 'var(--px-radius-lg)',\n      boxShadow: 'var(--px-shadow-xs)',\n      pointerEvents: 'none'\n    },\n    title: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: 4,\n      pointerEvents: 'none'\n    },\n    description: {\n      pointerEvents: 'none'\n    },\n    files: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: 16\n    }\n  })\n}\n","import type {\n  LayoutProps,\n  MarginProps,\n  PaddingProps\n} from '@hooks/useThemedStyles/types'\n\nexport interface FileInputProps extends MarginProps, PaddingProps, LayoutProps {\n  files: File[]\n  label?: string\n  multiple?: boolean\n  required?: boolean\n  errorMessage?: string\n  borderVariant?: 'solid' | 'dashed'\n  maxFileSizeInMB?: number\n  acceptedExtensions?: string[]\n  onFileChange: (files: File[]) => void\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { FileCard } from './components/FileCard'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useFileInput } from './hooks/useFileInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { FileInputProps } from './types'\n\n// Styles\nimport { createFileInputStyles } from './styles'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\nexport * as FileInputTypes from './types'\n\nexport const FileInput: React.FC<FileInputProps> = props => {\n  // Constants\n  const { files, multiple, acceptedExtensions } = props\n\n  // Hooks\n  const {\n    accept,\n    inputRef,\n    isDragging,\n    maxFileSizeInMB,\n    handleFileDrop,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleFileChange,\n    handleInputClick,\n    handleRemoveClick\n  } = useFileInput(props)\n  const { styles } = useThemedStyles(\n    { ...props, isDragging },\n    createFileInputStyles,\n    {\n      applyCommonProps: true,\n      pick: p => [p.files, p.isDragging]\n    }\n  )\n\n  // Functions\n  function renderExtensions() {\n    if (!acceptedExtensions) return ''\n\n    const extensions = acceptedExtensions\n      .map(extension => `.${extension}`)\n      .join(', ')\n    return `Formatos aceitos: ${extensions}`\n  }\n\n  function renderSeparator() {\n    return acceptedExtensions && maxFileSizeInMB ? ' - ' : ''\n  }\n\n  function renderMaxAllowedSize() {\n    return `Tamanho máximo ${maxFileSizeInMB} MB`\n  }\n\n  function renderFiles() {\n    return files.map(file => (\n      <FileCard\n        key={file.name}\n        file={file}\n        onRemoveClick={() => handleRemoveClick(file)}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.label ? (\n        <Label\n          label={props.label}\n          required={props.required}\n          htmlFor=\"fileInput\"\n        />\n      ) : null}\n\n      <div style={styles.wrapper}>\n        <button\n          type=\"button\"\n          style={styles.input}\n          onClick={handleInputClick}\n          onDrop={handleFileDrop}\n          onDragOver={handleDragOver}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n        >\n          <div style={styles.icon}>\n            <Icon name=\"general-upload\" />\n          </div>\n\n          <div style={styles.title}>\n            <Typography\n              variant=\"b1\"\n              color=\"var(--px-color-primary)\"\n              fontWeight=\"bold\"\n            >\n              Clique para carregar\n            </Typography>\n\n            <Typography variant=\"b1\">ou arraste um arquivo</Typography>\n          </div>\n\n          <div style={styles.description}>\n            <Typography variant=\"b2\" color=\"var(--px-text-primary)\">\n              {renderExtensions()}\n\n              {renderSeparator()}\n\n              {renderMaxAllowedSize()}\n            </Typography>\n          </div>\n\n          <input\n            hidden\n            type=\"file\"\n            id=\"fileInput\"\n            ref={inputRef}\n            accept={accept}\n            multiple={multiple}\n            onChange={handleFileChange}\n          />\n        </button>\n\n        {props.errorMessage ? (\n          <ErrorMessage message={props.errorMessage} />\n        ) : null}\n      </div>\n\n      <div style={styles.files}>{renderFiles()}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/file-input.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as FileInput } from "./index-BEipaO2C.js";
+import { n as types_d_exports, t as FileInput } from "./index-CHsvpknw.js";
 export { FileInput, types_d_exports as FileInputTypes };

package/dist/file-input.js

@@ -1,6 +1,8 @@
 import "./useThemedStyles-Dco_54KA.js";
 import "./Typography-D1dxTP-6.js";
 import "./Icon-lVgQoCFP.js";
-import { n as types_exports, t as FileInput } from "./FileInput-CgtLe4M7.js";
+import "./Label-lzG8Cp8P.js";
+import "./ErrorMessage-kAHOafpg.js";
+import { n as types_exports, t as FileInput } from "./FileInput-C6N2PiPi.js";
 
 export { FileInput, types_exports as FileInputTypes };

package/dist/{index-BQRzf4rc.d.ts → index-BBmC9Lfb.d.ts}

@@ -1,7 +1,7 @@
 import { t as CommonStyleProps } from "./styleProps-Bq2PkDym.js";
 import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -47,7 +47,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/commons/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { types_d_exports as n, TabSwitch as t };
-//# sourceMappingURL=index-BQRzf4rc.d.ts.map
+//# sourceMappingURL=index-BBmC9Lfb.d.ts.map

package/dist/{index-DFfPk9_X.d.ts → index-C31Z2a2S.d.ts}

@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
     padding: string;
     opacity: number;
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -103,4 +103,4 @@ interface InputMethods {
 declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-DFfPk9_X.d.ts.map
+//# sourceMappingURL=index-C31Z2a2S.d.ts.map

package/dist/{index-BEipaO2C.d.ts → index-CHsvpknw.d.ts}

@@ -7,7 +7,10 @@ declare namespace types_d_exports {
 }
 interface FileInputProps extends MarginProps, PaddingProps, LayoutProps {
   files: File[];
+  label?: string;
   multiple?: boolean;
+  required?: boolean;
+  errorMessage?: string;
   borderVariant?: 'solid' | 'dashed';
   maxFileSizeInMB?: number;
   acceptedExtensions?: string[];
@@ -18,4 +21,4 @@ interface FileInputProps extends MarginProps, PaddingProps, LayoutProps {
 declare const FileInput: React.FC<FileInputProps>;
 //#endregion
 export { types_d_exports as n, FileInput as t };
-//# sourceMappingURL=index-BEipaO2C.d.ts.map
+//# sourceMappingURL=index-CHsvpknw.d.ts.map

package/dist/{index-DAAEXO7G.d.ts → index-DlVdtSCT.d.ts}

@@ -27,7 +27,7 @@ declare function createSelectStyles(props: SelectProps): {
     opacity: number;
     cursor: "not-allowed" | "pointer" | "progress";
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -102,4 +102,4 @@ interface SelectOption {
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { types_d_exports as n, Select as t };
-//# sourceMappingURL=index-DAAEXO7G.d.ts.map
+//# sourceMappingURL=index-DlVdtSCT.d.ts.map

package/dist/{index-BxDK_Go8.d.ts → index-Q90gI7Q2.d.ts}

@@ -1,6 +1,6 @@
 import { a as TextProps } from "./styleProps-Bq2PkDym.js";
 import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/TextArea/styles.d.ts
 declare function createTextAreaStyles(props: TextAreaProps): {
@@ -27,7 +27,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
     fontWeight: "400";
     fontSize: string;
     color: "var(--px-text-primary)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     outlineOffset: string;
     cursor: "default" | undefined;
     __rules: {
@@ -67,7 +67,7 @@ interface TextAreaProps {
 }
 //#endregion
 //#region src/components/commons/inputs/TextArea/index.d.ts
-declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
+declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-BxDK_Go8.d.ts.map
+//# sourceMappingURL=index-Q90gI7Q2.d.ts.map

package/dist/index.d.ts

@@ -4,13 +4,13 @@ import { t as IconButton } from "./index-2zCiMZnT.js";
 import { n as types_d_exports$1, t as ColorPicker } from "./index-CLDq1eQr.js";
 import { n as types_d_exports$5 } from "./types-vfa_y8KH.js";
 import { n as types_d_exports$3, t as DatePicker } from "./index-UoeT_1nR.js";
-import { n as types_d_exports$4, t as FileInput } from "./index-BEipaO2C.js";
+import { n as types_d_exports$4, t as FileInput } from "./index-CHsvpknw.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-CSRzYxDc.js";
-import { t as Input } from "./index-DFfPk9_X.js";
+import { t as Input } from "./index-C31Z2a2S.js";
 import { t as SearchInput } from "./index-MyZ_XVsH.js";
-import { n as types_d_exports$6, t as Select } from "./index-DAAEXO7G.js";
+import { n as types_d_exports$6, t as Select } from "./index-DlVdtSCT.js";
 import { t as index_d_exports } from "./index-CriBmhqv.js";
-import { t as TextArea } from "./index-BxDK_Go8.js";
+import { t as TextArea } from "./index-Q90gI7Q2.js";
 import { t as Popover } from "./index-tivXt3ba.js";
 import { t as BasePopover } from "./index-BKsKKh1p.js";
 import { t as Breadcrumb } from "./index-CBHEtmuG.js";
@@ -25,7 +25,7 @@ import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.j
 import { t as Pagination } from "./index-D5kC89SC.js";
 import { ScrollPaginationContainer } from "./scroll-pagination-container.js";
 import { t as Switch } from "./index-B0g1F3X4.js";
-import { n as types_d_exports$7, t as TabSwitch } from "./index-BQRzf4rc.js";
+import { n as types_d_exports$7, t as TabSwitch } from "./index-BBmC9Lfb.js";
 import { Typography } from "./typography.js";
 import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-DPmfBsga.js";
 import { useDismiss } from "./use-dismiss.js";

package/dist/index.js

@@ -29,7 +29,7 @@ import { t as TextArea } from "./TextArea-NeN7ynND.js";
 import { t as SearchInput } from "./SearchInput-WHXwVu4s.js";
 import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-v5ULLhFP.js";
 import { t as Skeleton } from "./Skeleton-pvWAx_gn.js";
-import { n as types_exports$4, t as FileInput } from "./FileInput-CgtLe4M7.js";
+import { n as types_exports$4, t as FileInput } from "./FileInput-C6N2PiPi.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";
 import { t as Breadcrumb } from "./Breadcrumb-CBCBNcIC.js";
 

package/dist/input.d.ts

@@ -1,2 +1,2 @@
-import { t as Input } from "./index-DFfPk9_X.js";
+import { t as Input } from "./index-C31Z2a2S.js";
 export { Input };

package/dist/select.d.ts

@@ -1,4 +1,4 @@
 import "./types-vfa_y8KH.js";
-import { n as types_d_exports, t as Select } from "./index-DAAEXO7G.js";
+import { n as types_d_exports, t as Select } from "./index-DlVdtSCT.js";
 import "./index-CriBmhqv.js";
 export { Select, types_d_exports as SelectTypes };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as TabSwitch } from "./index-BQRzf4rc.js";
+import { n as types_d_exports, t as TabSwitch } from "./index-BBmC9Lfb.js";
 export { TabSwitch, types_d_exports as TabSwitchTypes };

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-BxDK_Go8.js";
+import { t as TextArea } from "./index-Q90gI7Q2.js";
 export { TextArea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.28",
+  "version": "1.2.29",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/FileInput-CgtLe4M7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileInput-CgtLe4M7.js","names":["RemoveButton: React.FC<RemoveButtonProps>","FileCard: React.FC<FileCardProps>","FileInput: React.FC<FileInputProps>"],"sources":["../src/components/commons/inputs/FileInput/components/FileCard/components/RemoveButton/styles.ts","../src/components/commons/inputs/FileInput/components/FileCard/components/RemoveButton/index.tsx","../src/components/commons/inputs/FileInput/components/FileCard/styles.ts","../src/components/commons/inputs/FileInput/components/FileCard/index.tsx","../src/components/commons/inputs/FileInput/constants.ts","../src/components/commons/inputs/FileInput/hooks/useFileInput/index.tsx","../src/components/commons/inputs/FileInput/styles.ts","../src/components/commons/inputs/FileInput/types.ts","../src/components/commons/inputs/FileInput/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createRemoveButtonStyles() {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      cursor: 'pointer',\n\n      padding: 2,\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n\n      borderColor: 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderRadius: 40,\n      backgroundColor: 'var(--px-bg)',\n\n      transform: 'translateY(-50%) translateX(50%)'\n    }\n  })\n}\n","// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { RemoveButtonProps } from './types'\n\n// Styles\nimport { createRemoveButtonStyles } from './styles'\n\nexport const RemoveButton: React.FC<RemoveButtonProps> = ({ onClick }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createRemoveButtonStyles)\n\n  return (\n    <button type=\"button\" style={styles.container} onClick={onClick}>\n      <Icon name=\"general-close\" size=\"xs\" color=\"var(--color-error)\" />\n    </button>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createFileCardStyles() {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n      rowGap: 4\n    },\n    content: {\n      position: 'relative',\n      width: 80,\n      height: 60,\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n\n      borderColor: 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderRadius: 8\n    }\n  })\n}\n","// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { RemoveButton } from './components/RemoveButton'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { FileCardProps } from './types'\n\n// Styles\nimport { createFileCardStyles } from './styles'\n\nexport const FileCard: React.FC<FileCardProps> = ({ file, onRemoveClick }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createFileCardStyles)\n\n  // Functions\n  function renderName() {\n    if (file.name.length <= 10) return file.name\n    return `${file.name.substring(0, 10)}...`\n  }\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.content}>\n        <RemoveButton onClick={onRemoveClick} />\n\n        <Icon name=\"general-file\" />\n      </div>\n\n      <Typography variant=\"b3\" color=\"var(--px-text-primary)\">\n        {renderName()}\n      </Typography>\n    </div>\n  )\n}\n","export const MAX_FILE_SIZE_IN_MB = 5\nexport const BYTES_IN_MB = 1024 * 1024\n","// External Libraries\nimport { useRef, useState } from 'react'\n\n// Constants\nimport { BYTES_IN_MB, MAX_FILE_SIZE_IN_MB } from '../../constants'\n\n// Types\nimport type { FileInputProps } from '../../types'\n\nexport function useFileInput({\n  files,\n  multiple,\n  maxFileSizeInMB = MAX_FILE_SIZE_IN_MB,\n  acceptedExtensions,\n  onFileChange\n}: FileInputProps) {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // Constants\n  const accept = acceptedExtensions?.map(extension => `.${extension}`).join(',')\n  const maxFileSizeInBytes = maxFileSizeInMB * BYTES_IN_MB\n\n  // States\n  const [isDragging, setIsDragging] = useState(false)\n\n  // Functions\n  function handleInputClick(e: React.MouseEvent) {\n    e.stopPropagation()\n\n    if (inputRef.current) inputRef.current.value = ''\n    inputRef.current?.click()\n  }\n\n  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const selectedFiles = Array.from(e.target.files ?? [])\n\n    if (!selectedFiles.length) return\n\n    const validFiles = selectedFiles.filter(isSizeAllowed)\n\n    if (!validFiles.length) return\n\n    if (multiple) {\n      onFileChange([...(files ?? []), ...validFiles])\n    } else {\n      onFileChange([validFiles[0]])\n    }\n  }\n\n  function handleFileDrop(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(false)\n\n    const droppedFiles = Array.from(e.dataTransfer.files)\n\n    if (!droppedFiles.length) return\n\n    const allowedFiles = droppedFiles.filter(file => isSizeAllowed(file))\n\n    if (multiple) {\n      onFileChange([...files, ...allowedFiles])\n    } else {\n      onFileChange([allowedFiles[0]])\n    }\n  }\n\n  function handleDragEnter(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(true)\n  }\n\n  function handleDragOver(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n  }\n\n  function handleDragLeave(e: React.DragEvent<HTMLButtonElement>) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsDragging(false)\n  }\n\n  function handleRemoveClick(file: File) {\n    const filesSet = new Set(files)\n    filesSet.delete(file)\n    const nextFiles = Array.from(filesSet)\n    onFileChange(nextFiles)\n  }\n\n  function isSizeAllowed(file: File) {\n    return file.size <= maxFileSizeInBytes\n  }\n\n  return {\n    accept,\n    inputRef,\n    isDragging,\n    maxFileSizeInMB,\n    handleFileDrop,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleFileChange,\n    handleInputClick,\n    handleRemoveClick\n  }\n}\n","// Types\nimport type { FileInputProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Props extends FileInputProps {\n  isDragging: boolean\n}\n\nexport function createFileInputStyles(props: Props) {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'column',\n      rowGap: 12\n    },\n    input: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      rowGap: 8,\n\n      paddingTop: 24,\n      paddingBottom: 24,\n      paddingLeft: 40,\n      paddingRight: 40,\n\n      borderColor: props.isDragging\n        ? 'var(--px-color-primary)'\n        : 'var(--px-border-primary)',\n      borderWidth: 1,\n      borderStyle: props.isDragging\n        ? 'dashed'\n        : (props.borderVariant ?? 'solid'),\n      borderRadius: 16,\n\n      cursor: props.isDragging ? 'grabbing' : 'pointer',\n\n      __rules: {\n        '&:hover': {\n          borderColor: 'var(--px-color-primary) !important'\n        }\n      }\n    },\n    icon: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: 12,\n      border: '1px solid var(--px-border-primary)',\n      borderRadius: 'var(--px-radius-lg)',\n      boxShadow: 'var(--px-shadow-xs)',\n      pointerEvents: 'none'\n    },\n    title: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: 4,\n      pointerEvents: 'none'\n    },\n    description: {\n      pointerEvents: 'none'\n    },\n    files: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: 16\n    }\n  })\n}\n","import type {\n  LayoutProps,\n  MarginProps,\n  PaddingProps\n} from '@hooks/useThemedStyles/types'\n\nexport interface FileInputProps extends MarginProps, PaddingProps, LayoutProps {\n  files: File[]\n  multiple?: boolean\n  borderVariant?: 'solid' | 'dashed'\n  maxFileSizeInMB?: number\n  acceptedExtensions?: string[]\n  onFileChange: (files: File[]) => void\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { FileCard } from './components/FileCard'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useFileInput } from './hooks/useFileInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { FileInputProps } from './types'\n\n// Styles\nimport { createFileInputStyles } from './styles'\n\nexport * as FileInputTypes from './types'\n\nexport const FileInput: React.FC<FileInputProps> = props => {\n  // Constants\n  const { files, multiple, acceptedExtensions } = props\n\n  // Hooks\n  const {\n    accept,\n    inputRef,\n    isDragging,\n    maxFileSizeInMB,\n    handleFileDrop,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleFileChange,\n    handleInputClick,\n    handleRemoveClick\n  } = useFileInput(props)\n  const { styles } = useThemedStyles(\n    { ...props, isDragging },\n    createFileInputStyles,\n    {\n      applyCommonProps: true,\n      pick: p => [p.files, p.isDragging]\n    }\n  )\n\n  // Functions\n  function renderExtensions() {\n    if (!acceptedExtensions) return ''\n\n    const extensions = acceptedExtensions\n      .map(extension => `.${extension}`)\n      .join(', ')\n    return `Formatos aceitos: ${extensions}`\n  }\n\n  function renderSeparator() {\n    return acceptedExtensions && maxFileSizeInMB ? ' - ' : ''\n  }\n\n  function renderMaxAllowedSize() {\n    return `Tamanho máximo ${maxFileSizeInMB} MB`\n  }\n\n  function renderFiles() {\n    return files.map(file => (\n      <FileCard\n        key={file.name}\n        file={file}\n        onRemoveClick={() => handleRemoveClick(file)}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      <button\n        type=\"button\"\n        style={styles.input}\n        onClick={handleInputClick}\n        onDrop={handleFileDrop}\n        onDragOver={handleDragOver}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n      >\n        <div style={styles.icon}>\n          <Icon name=\"general-upload\" />\n        </div>\n\n        <div style={styles.title}>\n          <Typography\n            variant=\"b1\"\n            color=\"var(--px-color-primary)\"\n            fontWeight=\"bold\"\n          >\n            Clique para carregar\n          </Typography>\n\n          <Typography variant=\"b1\">ou arraste um arquivo</Typography>\n        </div>\n\n        <div style={styles.description}>\n          <Typography variant=\"b2\" color=\"var(--px-text-primary)\">\n            {renderExtensions()}\n\n            {renderSeparator()}\n\n            {renderMaxAllowedSize()}\n          </Typography>\n        </div>\n\n        <input\n          ref={inputRef}\n          type=\"file\"\n          hidden\n          accept={accept}\n          multiple={multiple}\n          onChange={handleFileChange}\n        />\n      </button>\n\n      <div style={styles.files}>{renderFiles()}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}