@aspprev/versi-ds 0.4.2 → 0.4.4

package/README.md

@@ -90,10 +90,15 @@ import {
 
 - `OtpCodeInput` suporta `onComplete`, colagem de código, máscara, erro e controle por `value`/`values`.
 - `QRCode` suporta `description`, `ariaLabel`, `loading`, `error`, `size` e nível de correção.
+- `PageHeading` e `PageTabsHeader` mantêm o bloco do título flexível em tablet/desktop, truncam títulos longos com reticências e preservam o texto completo no atributo `title` quando o título é texto simples. O retorno (`back`) e as ações continuam disponíveis.
+- `Input` e `InputStandalone` aceitam `formatter={(value) => string}` para máscaras definidas pelo consumidor, sem props de domínio; as máscaras nomeadas existentes permanecem compatíveis.
+- `validateFiles` retorna `code`, nome, extensão, tamanho e limite da rejeição e aceita mensagens por código; `FileViewer` também aceita `Promise<FileViewerSource>` como source.
 - Upload e `FileViewer` são controlados pelo consumidor; transporte, autenticação, persistência e download não fazem parte do pacote.
 - `DatePicker` aceita `selectionMode="year"` e mantém `selectionMode="day"` como padrão.
 - `DomainStatusBadge` aceita `statusMap` para vocabulário específico do produto.
 - `Table` preserva os modos `fit`, `adaptive` e `scroll`; filtros e paginação respondem ao espaço do container.
+- `InputPhone`/`PhoneInput` e `SelectCountry` aceitam `showFlags`; o padrão é `true` e `showFlags={false}` remove a bandeira sem reservar espaço.
+- Os controles de formulário ocupam a largura disponível do container; `className="w-full"` pode ser usado em grids, flex containers e colunas responsivas.
 
 Consulte [`docs/API-NOVOS-COMPONENTES.md`](docs/API-NOVOS-COMPONENTES.md) e o Storybook para exemplos completos, estados de erro/carregamento e contratos de acessibilidade.
 
@@ -223,3 +228,10 @@ Ao criar ou alterar um componente:
 6. execute `npm run prepack` antes de gerar o pacote.
 
 Detalhes de contratos, governança e segurança ficam na pasta `docs/`. A documentação de uso visual deve permanecer principalmente no Storybook.
+### Contratos adicionados no lote seguinte
+
+- `Input` e `InputStandalone` preservam a posição do cursor ao aplicar um `formatter` genérico; máscaras de domínio continuam sendo definidas pelo consumidor.
+- `InputSlider` usa `suffix` como prop canônica e mantém `sufix` apenas como alias de migração. `Avatar` aceita `xl` além dos tamanhos existentes.
+- `validateFiles` também rejeita arquivos vazios ou inválidos, com mensagens customizáveis; `FileViewer` aceita um slot `actions`.
+- `TimeSeriesChart` e `InteractiveDonutChart` expõem estados genéricos de carregamento, erro e ausência de dados.
+- `BoletoBarCode` aceita `width`, `height`, `quietZone` e estado de erro; o payload de boleto continua sendo responsabilidade do consumidor.

package/dist/charts.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import { Props as Props$1 } from 'react-apexcharts';
 
 type Props = Props$1;
@@ -8,6 +9,10 @@ type InteractiveDonutOptions = NonNullable<Props["options"]>;
 type InteractiveDonutProps = Omit<Props, "options" | "series" | "type"> & {
     options?: InteractiveDonutOptions;
     series: number[];
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    error?: ReactNode;
+    emptyMessage?: ReactNode;
     colors?: string[];
     mutedColors?: string[];
     valueFormatter?: (value: number) => string;
@@ -17,18 +22,22 @@ type InteractiveDonutProps = Omit<Props, "options" | "series" | "type"> & {
     responsiveHeight?: boolean;
     highContrastOverride?: boolean;
 };
-declare function InteractiveDonutChart({ options, series, colors, mutedColors, valueFormatter, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...rest }: InteractiveDonutProps): React.JSX.Element;
+declare function InteractiveDonutChart({ options, series, loading, loadingMessage, error, emptyMessage, colors, mutedColors, valueFormatter, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...rest }: InteractiveDonutProps): React.JSX.Element;
 
 type TimeSeriesChartOptions = NonNullable<Props["options"]>;
 type TimeSeriesChartProps = Omit<Props, "options"> & {
     options: TimeSeriesChartOptions;
     ariaLabel: string;
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    error?: ReactNode;
+    emptyMessage?: ReactNode;
     className?: string;
     chartClassName?: string;
     responsiveHeight?: boolean;
     highContrastOverride?: boolean;
 };
-declare function TimeSeriesChart({ options, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...chartProps }: TimeSeriesChartProps): React.JSX.Element;
+declare function TimeSeriesChart({ options, ariaLabel, loading, loadingMessage, error, emptyMessage, className, chartClassName, responsiveHeight, highContrastOverride, ...chartProps }: TimeSeriesChartProps): React.JSX.Element;
 
 type TimeRangeSelectorProps<T extends string | number> = {
     options: readonly T[];

package/dist/charts.js

@@ -12,7 +12,7 @@ import {
   normalizeTimeSeriesTooltipColor,
   resolveInteractiveDonutColors,
   resolveRelativeDonutSelection
-} from "./chunk-5MRS4PDD.js";
+} from "./chunk-HKCVDOGK.js";
 export {
   InteractiveDonutChart,
   LazyApexChart,

package/dist/{chunk-6NVJWI5B.js → chunk-CLXCB6LY.js}

@@ -88,6 +88,23 @@ var FieldFrame_default = FieldFrame;
 
 // src/components/input/Input.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getFormattedCaretPosition(rawValue, formattedValue, selectionStart, formatter, sanitize) {
+  if (selectionStart === null) return null;
+  if (selectionStart >= rawValue.length) return formattedValue.length;
+  const formattedSuffix = sanitize(formatter(rawValue.slice(selectionStart)));
+  return Math.max(
+    0,
+    Math.min(formattedValue.length, formattedValue.length - formattedSuffix.length)
+  );
+}
+function restoreCaretPosition(inputRef, position) {
+  if (position === null || typeof window === "undefined") return;
+  window.requestAnimationFrame(() => {
+    const input = inputRef.current;
+    if (!input || document.activeElement !== input) return;
+    input.setSelectionRange(position, position);
+  });
+}
 var BaseInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(
   "input",
   {
@@ -150,6 +167,7 @@ var Input = ({
   prefix,
   suffix,
   mask,
+  formatter,
   disabled,
   error,
   disallowSpaces,
@@ -248,6 +266,44 @@ var Input = ({
   };
   const renderMaskedInput = (inputType) => {
     const autoCompleteValue = rest.autoComplete;
+    if (formatter) {
+      const currentValue = String(safeValue(field.value));
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ...rest,
+          ...accessibilityProps,
+          name,
+          ref: inputRef,
+          type: inputType === "date" ? "text" : inputType,
+          value: currentValue,
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            const formattedValue = sanitizeValue(formatter(rawValue));
+            const caretPosition = getFormattedCaretPosition(
+              rawValue,
+              formattedValue,
+              event.target.selectionStart,
+              formatter,
+              sanitizeValue
+            );
+            helpers.setValue(formattedValue);
+            restoreCaretPosition(inputRef, caretPosition);
+            rest.onChange?.({
+              ...event,
+              target: { ...event.target, value: formattedValue },
+              currentTarget: { ...event.currentTarget, value: formattedValue }
+            });
+          },
+          onBlur: field.onBlur,
+          onPaste: handlePasteFormik,
+          placeholder,
+          className: classNames2(FIELD_INPUT_CLASS, className),
+          autoComplete: autoCompleteValue,
+          disabled
+        }
+      );
+    }
     if (mask === "currency") {
       const rawCurrencyValue = typeof field.value === "string" || typeof field.value === "number" ? field.value : "";
       return /* @__PURE__ */ jsx2(
@@ -531,6 +587,7 @@ var InputStandalone = (props) => {
     prefix,
     suffix,
     mask,
+    formatter,
     disabled,
     error,
     errorText,
@@ -615,6 +672,41 @@ var InputStandalone = (props) => {
   };
   const renderMaskedInput = (inputType) => {
     const autoCompleteValue = rest.autoComplete;
+    if (formatter) {
+      const currentValue = String(safeValue(rest.value));
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ...rest,
+          ...accessibilityProps,
+          ref: inputRef,
+          type: inputType === "date" ? "text" : inputType,
+          value: currentValue,
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            const formattedValue = sanitizeValue(formatter(rawValue));
+            const caretPosition = getFormattedCaretPosition(
+              rawValue,
+              formattedValue,
+              event.target.selectionStart,
+              formatter,
+              sanitizeValue
+            );
+            restoreCaretPosition(inputRef, caretPosition);
+            rest.onChange?.({
+              ...event,
+              target: { ...event.target, value: formattedValue },
+              currentTarget: { ...event.currentTarget, value: formattedValue }
+            });
+          },
+          onPaste: handlePasteStandalone,
+          placeholder: rest.placeholder,
+          className: classNames2(FIELD_INPUT_CLASS, className),
+          autoComplete: autoCompleteValue,
+          disabled
+        }
+      );
+    }
     if (mask === "currency") {
       const rawCurrencyValue = typeof rest.value === "string" || typeof rest.value === "number" ? rest.value : "";
       return /* @__PURE__ */ jsx2(
@@ -1780,7 +1872,8 @@ function buildPhonePayload(phoneValue) {
 function parsePhonePayload(rawValue, countries = PHONE_COUNTRY_OPTIONS) {
   return parseStoredPhoneValue(rawValue, countries);
 }
-function renderFlag(option) {
+function renderFlag(option, showFlags) {
+  if (!showFlags) return null;
   return /* @__PURE__ */ jsx6(
     CountryFlag,
     {
@@ -1798,7 +1891,8 @@ function InputPhone({
   countries,
   countryList,
   disabled,
-  className
+  className,
+  showFlags = true
 }) {
   const availableCountries = useMemo(
     () => filterCountryOptions(
@@ -1950,14 +2044,14 @@ function InputPhone({
         "div",
         {
           ref: wrapperRef,
-          className: "field-control-slot relative mt-4xs mb-[4px]",
+          className: "field-control-slot relative mt-4xs mb-[4px] flex w-full min-w-0",
           children: [
             /* @__PURE__ */ jsxs5(
               "div",
               {
                 "data-has-value": phoneDigits.length > 0,
                 className: classNames5(
-                  "field-keyboard-focus-ring flex min-h-control-md items-center overflow-hidden rounded-sm border border-field-border-default bg-field-surface text-field-icon transition-colors focus-within:border-field-border-active focus-within:text-field-content data-[has-value=true]:text-field-content",
+                  "field-keyboard-focus-ring flex w-full min-w-0 min-h-control-md items-center overflow-hidden rounded-sm border border-field-border-default bg-field-surface text-field-icon transition-colors focus-within:border-field-border-active focus-within:text-field-content data-[has-value=true]:text-field-content",
                   {
                     [FIELD_ERROR_CLASS]: hasError,
                     [FIELD_DISABLED_CLASS]: disabled
@@ -1991,7 +2085,7 @@ function InputPhone({
                         }
                       ),
                       children: [
-                        renderFlag(selectedCountry),
+                        renderFlag(selectedCountry, showFlags),
                         /* @__PURE__ */ jsx6("span", { className: "text-sm", children: selectedCountry?.idd.display || `+${value.ddi}` }),
                         open ? /* @__PURE__ */ jsx6(
                           MdOutlineKeyboardArrowUp2,
@@ -2128,7 +2222,7 @@ function InputPhone({
                         },
                         className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-focus-ring",
                         children: [
-                          renderFlag(country),
+                          renderFlag(country, showFlags),
                           /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-field-content", children: country.label }),
                           /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-content-muted", children: country.idd.display })
                         ]
@@ -2927,7 +3021,15 @@ import {
 import { MdClose, MdKeyboardArrowDown } from "react-icons/md";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SelectMultiView(props) {
-  const { options, error, label, checkedList = [], onClear, disabled } = props;
+  const {
+    options,
+    error,
+    label,
+    checkedList = [],
+    onClear,
+    disabled,
+    className
+  } = props;
   const [isOpened, setIsOpened] = useState6(false);
   const containerRef = useRef6(null);
   const triggerRef = useRef6(null);
@@ -3007,7 +3109,7 @@ function SelectMultiView(props) {
     FieldFrame_default,
     {
       ref: containerRef,
-      className: "multi-select-container",
+      className: cs("multi-select-container", className),
       label,
       labelFor: triggerId,
       labelId: label ? labelId : void 0,
@@ -3018,7 +3120,7 @@ function SelectMultiView(props) {
         "div",
         {
           "aria-invalid": Boolean(error) || void 0,
-          className: "relative mb-[4px] mt-4xs",
+          className: "relative mb-[4px] mt-4xs w-full min-w-0",
           children: [
             /* @__PURE__ */ jsxs7(
               "button",
@@ -3173,7 +3275,8 @@ var SelectMulti_default = SelectMulti;
 
 // src/components/selectCountry/SelectCountry.tsx
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-function renderFlag2(option) {
+function renderFlag2(option, showFlags) {
+  if (!showFlags) return null;
   return /* @__PURE__ */ jsx10(
     "span",
     {
@@ -3190,12 +3293,12 @@ function renderFlag2(option) {
     }
   );
 }
-function renderCountryContent(option, placeholder) {
+function renderCountryContent(option, placeholder, showFlags = true) {
   if (!option) {
     return /* @__PURE__ */ jsx10("span", { className: "block w-full truncate overflow-hidden text-content-muted", children: placeholder });
   }
   return /* @__PURE__ */ jsxs8("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
-    renderFlag2(option),
+    renderFlag2(option, showFlags),
     /* @__PURE__ */ jsx10("span", { className: "block truncate overflow-hidden", children: option.label })
   ] });
 }
@@ -3208,6 +3311,7 @@ function SelectCountry({
   defaultValue,
   onChange,
   className,
+  showFlags = true,
   ...props
 }) {
   const availableOptions = filterCountryOptions(
@@ -3225,8 +3329,12 @@ function SelectCountry({
       searchable,
       searchPlaceholder,
       noOptionsText,
-      renderOption: (option) => renderCountryContent(option),
-      renderValue: (option, placeholder) => renderCountryContent(option, placeholder)
+      renderOption: (option) => renderCountryContent(option, void 0, showFlags),
+      renderValue: (option, placeholder) => renderCountryContent(
+        option,
+        placeholder,
+        showFlags
+      )
     }
   );
 }
@@ -3568,7 +3676,7 @@ var OtpCodeInput = forwardRef2(
             "aria-labelledby": label ? `${groupId}-label` : void 0,
             "aria-describedby": describedBy,
             "aria-invalid": hasError || void 0,
-            className: "mt-1 flex flex-wrap gap-2",
+            className: "mt-1 flex w-full min-w-0 flex-wrap gap-2",
             children: Array.from({ length: safeLength }, (_, index) => /* @__PURE__ */ createElement(
               "input",
               {
@@ -3637,4 +3745,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-6NVJWI5B.js.map
+//# sourceMappingURL=chunk-CLXCB6LY.js.map