@aspprev/versi-ds 0.4.1 → 0.4.3

package/README.md

@@ -94,6 +94,8 @@ import {
 - `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.
 

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

@@ -1780,7 +1780,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 +1799,8 @@ function InputPhone({
   countries,
   countryList,
   disabled,
-  className
+  className,
+  showFlags = true
 }) {
   const availableCountries = useMemo(
     () => filterCountryOptions(
@@ -1950,14 +1952,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 +1993,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 +2130,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 +2929,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 +3017,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 +3028,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 +3183,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 +3201,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 +3219,7 @@ function SelectCountry({
   defaultValue,
   onChange,
   className,
+  showFlags = true,
   ...props
 }) {
   const availableOptions = filterCountryOptions(
@@ -3225,8 +3237,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 +3584,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 +3653,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-6NVJWI5B.js.map
+//# sourceMappingURL=chunk-MC4MSOCM.js.map