@greatapps/common 1.1.673 → 1.1.675

package/dist/components/ui/data-display/PaymentInfoCard.mjs

@@ -8,7 +8,6 @@ import useIsMobile from "../../../hooks/useIsMobile";
 import { useCards } from "../../../modules/cards/hooks/cards.hook";
 import { useModalManager } from "../../../store/useModalManager";
 import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
-import { useTranslations } from "next-intl";
 function PaymentInfoCard({
   email,
   selectedCardId,
@@ -18,7 +17,6 @@ function PaymentInfoCard({
   hideDelete,
   hideSetDefault
 }) {
-  const translate = useTranslations();
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -62,11 +60,11 @@ function PaymentInfoCard({
   if (!hasCards) {
     return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-200 rounded-lg overflow-hidden", children: [
       email && /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: translate("common.cards.paymentInfo.email") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "E-mail" }),
         /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: email })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: translate("common.cards.paymentInfo.payment") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "Pagamento" }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -75,7 +73,7 @@ function PaymentInfoCard({
             className: "flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit",
             children: [
               /* @__PURE__ */ jsx(IconPlus, { className: "size-[18px]" }),
-              /* @__PURE__ */ jsx("span", { className: "px-1.5", children: translate("common.cards.paymentInfo.addCard") })
+              /* @__PURE__ */ jsx("span", { className: "px-1.5", children: "Adicionar cart\xE3o" })
             ]
           }
         )
@@ -85,7 +83,7 @@ function PaymentInfoCard({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "border border-zinc-200 rounded-lg overflow-hidden", children: [
       email && /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: translate("common.cards.paymentInfo.email") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "E-mail" }),
         /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: email })
       ] }),
       /* @__PURE__ */ jsx(
@@ -94,7 +92,7 @@ function PaymentInfoCard({
           className: "flex items-center px-4 py-4 cursor-pointer gap-3",
           onClick: () => setIsExpanded((prev) => !prev),
           children: !isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: translate("common.cards.paymentInfo.payment") }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "Pagamento" }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 truncate", children: selectedCard?.name }),
               /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950", children: [
@@ -105,7 +103,7 @@ function PaymentInfoCard({
             selectedCard && /* @__PURE__ */ jsx(CardBrandIcon, { brand: selectedCard.brand }),
             /* @__PURE__ */ jsx("div", { className: "size-8 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-[18px] text-zinc-500" }) })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 flex-1", children: translate("common.cards.paymentInfo.selectPaymentMethod") }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 flex-1", children: "Selecione a forma de pagamento" }),
             /* @__PURE__ */ jsx("div", { className: "size-8 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-[18px] text-zinc-500 rotate-180" }) })
           ] })
         }
@@ -133,7 +131,7 @@ function PaymentInfoCard({
                 type: "button",
                 onClick: onManageCards,
                 className: `flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${isDefaultWl ? "text-cyan-600 border border-cyan-200 hover:bg-cyan-50" : "text-zinc-600 border border-zinc-200 hover:bg-zinc-50"}`,
-                children: translate("common.cards.paymentInfo.manageCards")
+                children: "Gerenciar cart\xF5es"
               }
             )
           ]
@@ -148,7 +146,7 @@ function PaymentInfoCard({
         className: "flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit",
         children: [
           /* @__PURE__ */ jsx(IconPlus, { className: "size-[18px]" }),
-          /* @__PURE__ */ jsx("span", { className: "px-1.5", children: isExpanded ? translate("common.cards.paymentInfo.addCard") : translate("common.cards.paymentInfo.newPaymentMethod") })
+          /* @__PURE__ */ jsx("span", { className: "px-1.5", children: isExpanded ? "Adicionar cart\xE3o" : "Nova forma de pagamento" })
         ]
       }
     )

package/dist/components/ui/data-display/PaymentInfoCard.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport type { Card } from '../../../modules/cards/types';\nimport { useTranslations } from 'next-intl';\n\ntype PaymentInfoCardProps = {\n  email?: string;\n  selectedCardId: string;\n  onCardSelect: (cardId: string) => void;\n  onManageCards?: () => void;\n  onOpenAddCard?: () => void;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n};\n\nexport function PaymentInfoCard({\n  email,\n  selectedCardId,\n  onCardSelect,\n  onManageCards,\n  onOpenAddCard,\n  hideDelete,\n  hideSetDefault,\n}: PaymentInfoCardProps) {\n  const translate = useTranslations();\n  const isMobile = useIsMobile();\n  const { openModal } = useModalManager();\n  const isDefaultWl = useIsDefaultWhitelabel();\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const cards = cardsData?.data ?? [];\n\n  const selectedCard = cards.find(\n    (card) => card.id.toString() === selectedCardId.toString(),\n  );\n\n  const hasCards = cards.length > 0;\n\n  const hasMoreThan3Cards = cards.length > 3;\n  const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n  const handleOpenAddCardModal = useCallback(() => {\n    if (onOpenAddCard) {\n      onOpenAddCard();\n      return;\n    }\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => onCardSelect(cardId),\n    });\n  }, [openModal, onOpenAddCard, onCardSelect]);\n\n  const handleSelectCard = useCallback(\n    (cardId: string) => {\n      onCardSelect(cardId);\n      setIsExpanded(false);\n    },\n    [onCardSelect],\n  );\n\n  const handleAfterDelete = useCallback(\n    (card: Card) => {\n      if (card.id.toString() === selectedCardId.toString()) {\n        const remaining = cards.filter((c) => c.id !== card.id);\n        if (remaining.length > 0) {\n          onCardSelect(remaining[0].id.toString());\n        }\n      }\n    },\n    [cards, selectedCardId, onCardSelect],\n  );\n\n  if (!hasCards) {\n    return (\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">{translate('common.cards.paymentInfo.email')}</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n        <div className=\"flex items-center h-[60px] px-4 gap-3\">\n          <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">{translate('common.cards.paymentInfo.payment')}</span>\n          <button\n            type=\"button\"\n            onClick={handleOpenAddCardModal}\n            className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n          >\n            <IconPlus className=\"size-[18px]\" />\n            <span className=\"px-1.5\">{translate('common.cards.paymentInfo.addCard')}</span>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">{translate('common.cards.paymentInfo.email')}</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n\n        <div\n          className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n        >\n          {!isExpanded ? (\n            <>\n              <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">{translate('common.cards.paymentInfo.payment')}</span>\n              <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n                <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n                  {selectedCard?.name}\n                </span>\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n                </span>\n              </div>\n              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n              </div>\n            </>\n          ) : (\n            <>\n              <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n                {translate('common.cards.paymentInfo.selectPaymentMethod')}\n              </span>\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n              </div>\n            </>\n          )}\n        </div>\n\n        <div\n          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n          }`}\n        >\n          {displayedCards.map((card) => (\n            <CardItem\n              key={card.id}\n              card={card}\n              isSelected={card.id.toString() === selectedCardId.toString()}\n              onSelect={() => handleSelectCard(card.id.toString())}\n              hideDelete={hideDelete}\n              hideSetDefault={hideSetDefault}\n              onAfterDelete={handleAfterDelete}\n            />\n          ))}\n          {shouldShowManageButton && onManageCards && (\n            <button\n              type=\"button\"\n              onClick={onManageCards}\n              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${\n                isDefaultWl\n                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'\n                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'\n              }`}\n            >\n              {translate('common.cards.paymentInfo.manageCards')}\n            </button>\n          )}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleOpenAddCardModal}\n        className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n      >\n        <IconPlus className=\"size-[18px]\" />\n        <span className=\"px-1.5\">\n          {isExpanded ? translate('common.cards.paymentInfo.addCard') : translate('common.cards.paymentInfo.newPaymentMethod')}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n  email?: string;\n  selectedCardId: string;\n  onCardSelect: (cardId: string) => void;\n  onManageCards?: () => void;\n  onOpenAddCard?: () => void;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n};\n\nexport function PaymentInfoCard({\n  email,\n  selectedCardId,\n  onCardSelect,\n  onManageCards,\n  onOpenAddCard,\n  hideDelete,\n  hideSetDefault,\n}: PaymentInfoCardProps) {\n  const isMobile = useIsMobile();\n  const { openModal } = useModalManager();\n  const isDefaultWl = useIsDefaultWhitelabel();\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const cards = cardsData?.data ?? [];\n\n  const selectedCard = cards.find(\n    (card) => card.id.toString() === selectedCardId.toString(),\n  );\n\n  const hasCards = cards.length > 0;\n\n  const hasMoreThan3Cards = cards.length > 3;\n  const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n  const handleOpenAddCardModal = useCallback(() => {\n    if (onOpenAddCard) {\n      onOpenAddCard();\n      return;\n    }\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => onCardSelect(cardId),\n    });\n  }, [openModal, onOpenAddCard, onCardSelect]);\n\n  const handleSelectCard = useCallback(\n    (cardId: string) => {\n      onCardSelect(cardId);\n      setIsExpanded(false);\n    },\n    [onCardSelect],\n  );\n\n  const handleAfterDelete = useCallback(\n    (card: Card) => {\n      if (card.id.toString() === selectedCardId.toString()) {\n        const remaining = cards.filter((c) => c.id !== card.id);\n        if (remaining.length > 0) {\n          onCardSelect(remaining[0].id.toString());\n        }\n      }\n    },\n    [cards, selectedCardId, onCardSelect],\n  );\n\n  if (!hasCards) {\n    return (\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n        <div className=\"flex items-center h-[60px] px-4 gap-3\">\n          <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n          <button\n            type=\"button\"\n            onClick={handleOpenAddCardModal}\n            className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n          >\n            <IconPlus className=\"size-[18px]\" />\n            <span className=\"px-1.5\">Adicionar cartão</span>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n\n        <div\n          className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n        >\n          {!isExpanded ? (\n            <>\n              <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n              <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n                <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n                  {selectedCard?.name}\n                </span>\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n                </span>\n              </div>\n              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n              </div>\n            </>\n          ) : (\n            <>\n              <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n                Selecione a forma de pagamento\n              </span>\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n              </div>\n            </>\n          )}\n        </div>\n\n        <div\n          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n          }`}\n        >\n          {displayedCards.map((card) => (\n            <CardItem\n              key={card.id}\n              card={card}\n              isSelected={card.id.toString() === selectedCardId.toString()}\n              onSelect={() => handleSelectCard(card.id.toString())}\n              hideDelete={hideDelete}\n              hideSetDefault={hideSetDefault}\n              onAfterDelete={handleAfterDelete}\n            />\n          ))}\n          {shouldShowManageButton && onManageCards && (\n            <button\n              type=\"button\"\n              onClick={onManageCards}\n              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${\n                isDefaultWl\n                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'\n                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'\n              }`}\n            >\n              Gerenciar cartões\n            </button>\n          )}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleOpenAddCardModal}\n        className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n      >\n        <IconPlus className=\"size-[18px]\" />\n        <span className=\"px-1.5\">\n          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AAoFU,SAmCE,UAlCA,KADF;AAlFV,SAAS,aAAa,gBAAgB;AACtC,SAAS,iBAAiB,gBAAgB;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAahC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,UAAU,IAAI,gBAAgB;AACtC,QAAM,cAAc,uBAAuB;AAE3C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,EAAE,MAAM,UAAU,IAAI,SAAS;AACrC,QAAM,QAAQ,WAAW,QAAQ,CAAC;AAElC,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,SAAS,KAAK,GAAG,SAAS,MAAM,eAAe,SAAS;AAAA,EAC3D;AAEA,QAAM,WAAW,MAAM,SAAS;AAEhC,QAAM,oBAAoB,MAAM,SAAS;AACzC,QAAM,yBAAyB,YAAY;AAC3C,QAAM,iBAAiB,yBAAyB,MAAM,MAAM,GAAG,CAAC,IAAI;AAEpE,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI,eAAe;AACjB,oBAAc;AACd;AAAA,IACF;AACA,cAAU,gBAAgB;AAAA,MACxB,aAAa,CAAC,WAAmB,aAAa,MAAM;AAAA,IACtD,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,eAAe,YAAY,CAAC;AAE3C,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAmB;AAClB,mBAAa,MAAM;AACnB,oBAAc,KAAK;AAAA,IACrB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAe;AACd,UAAI,KAAK,GAAG,SAAS,MAAM,eAAe,SAAS,GAAG;AACpD,cAAM,YAAY,MAAM,OAAO,CAAC,MAAM,EAAE,OAAO,KAAK,EAAE;AACtD,YAAI,UAAU,SAAS,GAAG;AACxB,uBAAa,UAAU,CAAC,EAAE,GAAG,SAAS,CAAC;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,OAAO,gBAAgB,YAAY;AAAA,EACtC;AAEA,MAAI,CAAC,UAAU;AACb,WACE,qBAAC,SAAI,WAAU,qDACZ;AAAA,eACC,qBAAC,SAAI,WAAU,kEACb;AAAA,4BAAC,UAAK,WAAU,kDAAiD,oBAAM;AAAA,QACvE,oBAAC,UAAK,WAAU,+CAA+C,iBAAM;AAAA,SACvE;AAAA,MAEF,qBAAC,SAAI,WAAU,yCACb;AAAA,4BAAC,UAAK,WAAU,kDAAiD,uBAAS;AAAA,QAC1E;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS,WAAU,eAAc;AAAA,cAClC,oBAAC,UAAK,WAAU,UAAS,iCAAgB;AAAA;AAAA;AAAA,QAC3C;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,qDACZ;AAAA,eACC,qBAAC,SAAI,WAAU,kEACb;AAAA,4BAAC,UAAK,WAAU,kDAAiD,oBAAM;AAAA,QACvE,oBAAC,UAAK,WAAU,+CAA+C,iBAAM;AAAA,SACvE;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,CAAC,SAAS,CAAC,IAAI;AAAA,UAE3C,WAAC,aACA,iCACE;AAAA,gCAAC,UAAK,WAAU,kDAAiD,uBAAS;AAAA,YAC1E,qBAAC,SAAI,WAAU,wCACb;AAAA,kCAAC,UAAK,WAAU,mDACb,wBAAc,MACjB;AAAA,cACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,gBAC/C,cAAc,QAAQ,WAAW,OAAO,EAAE,GAAG,MAAM,EAAE;AAAA,iBAC7D;AAAA,eACF;AAAA,YACC,gBAAgB,oBAAC,iBAAc,OAAO,aAAa,OAAO;AAAA,YAC3D,oBAAC,SAAI,WAAU,sDACb,8BAAC,mBAAgB,WAAU,6BAA4B,GACzD;AAAA,aACF,IAEA,iCACE;AAAA,gCAAC,UAAK,WAAU,iDAAgD,4CAEhE;AAAA,YACA,oBAAC,SAAI,WAAU,sDACb,8BAAC,mBAAgB,WAAU,wCAAuC,GACpE;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,oFACT,aAAa,mCAAmC,wBAClD;AAAA,UAEC;AAAA,2BAAe,IAAI,CAAC,SACnB;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA,YAAY,KAAK,GAAG,SAAS,MAAM,eAAe,SAAS;AAAA,gBAC3D,UAAU,MAAM,iBAAiB,KAAK,GAAG,SAAS,CAAC;AAAA,gBACnD;AAAA,gBACA;AAAA,gBACA,eAAe;AAAA;AAAA,cANV,KAAK;AAAA,YAOZ,CACD;AAAA,YACA,0BAA0B,iBACzB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAW,wHACT,cACI,0DACA,uDACN;AAAA,gBACD;AAAA;AAAA,YAED;AAAA;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAEV;AAAA,8BAAC,YAAS,WAAU,eAAc;AAAA,UAClC,oBAAC,UAAK,WAAU,UACb,uBAAa,wBAAqB,2BACrC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/ui/feedback/DefaultCircularProgress.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslations } from "next-intl";
 import {
   calculateRadius,
   calculateCircumference,
@@ -14,7 +13,6 @@ function DefaultCircularProgress({
   size = 62,
   strokeWidth = 3
 }) {
-  const translate = useTranslations();
   const isDefaultWl = useIsDefaultWhitelabel();
   const radius = calculateRadius(size, strokeWidth);
   const circumference = calculateCircumference(radius);
@@ -29,7 +27,7 @@ function DefaultCircularProgress({
       "aria-valuenow": current,
       "aria-valuemin": 0,
       "aria-valuemax": total,
-      "aria-label": translate("common.forms.circularProgress.ariaLabel"),
+      "aria-label": "Progresso de exporta\xE7\xE3o",
       children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "absolute", children: [
         /* @__PURE__ */ jsx(
           "circle",

package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/feedback/DefaultCircularProgress.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport {\n  calculateRadius,\n  calculateCircumference,\n  calculatePercentage,\n  calculateCircularProgressOffset,\n} from \"../../../infra/utils/percentage\";\nimport { useIsDefaultWhitelabel } from \"../../../providers/whitelabel.provider\";\n\ninterface CircularProgressProps {\n  current: number;\n  total: number;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport default function DefaultCircularProgress({\n  current,\n  total,\n  size = 62,\n  strokeWidth = 3,\n}: CircularProgressProps) {\n  const translate = useTranslations();\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const radius = calculateRadius(size, strokeWidth);\n  const circumference = calculateCircumference(radius);\n  const percentage = calculatePercentage(current, total);\n  const offset = calculateCircularProgressOffset(percentage, circumference);\n\n  return (\n    <div\n      className=\"relative flex items-center justify-center\"\n      style={{ width: size, height: size }}\n      role=\"progressbar\"\n      aria-valuenow={current}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-label={translate('common.forms.circularProgress.ariaLabel')}\n    >\n      <svg width={size} height={size} className=\"absolute\">\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          stroke=\"var(--color-zinc-200)\"\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          stroke={isDefaultWl ? \"var(--color-cyan-300)\" : \"var(--color-zinc-300)\"}\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap=\"round\"\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n          className=\"transition-all duration-300 ease-in-out\"\n        />\n      </svg>\n    </div>\n  );\n}\n"],"mappings":";AAyCM,SACE,KADF;AAvCN,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AASxB,SAAR,wBAAyC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAChB,GAA0B;AACxB,QAAM,YAAY,gBAAgB;AAClC,QAAM,cAAc,uBAAuB;AAC3C,QAAM,SAAS,gBAAgB,MAAM,WAAW;AAChD,QAAM,gBAAgB,uBAAuB,MAAM;AACnD,QAAM,aAAa,oBAAoB,SAAS,KAAK;AACrD,QAAM,SAAS,gCAAgC,YAAY,aAAa;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,MACnC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAY,UAAU,yCAAyC;AAAA,MAE/D,+BAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,YACxC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,IAAI,OAAO;AAAA,YACX,GAAG;AAAA,YACH,QAAO;AAAA,YACP;AAAA,YACA,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,IAAI,OAAO;AAAA,YACX,GAAG;AAAA,YACH,QAAQ,cAAc,0BAA0B;AAAA,YAChD;AAAA,YACA,MAAK;AAAA,YACL,iBAAiB;AAAA,YACjB,kBAAkB;AAAA,YAClB,eAAc;AAAA,YACd,WAAW,cAAc,OAAO,CAAC,IAAI,OAAO,CAAC;AAAA,YAC7C,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/feedback/DefaultCircularProgress.tsx"],"sourcesContent":["'use client';\n\nimport {\n  calculateRadius,\n  calculateCircumference,\n  calculatePercentage,\n  calculateCircularProgressOffset,\n} from \"../../../infra/utils/percentage\";\nimport { useIsDefaultWhitelabel } from \"../../../providers/whitelabel.provider\";\n\ninterface CircularProgressProps {\n  current: number;\n  total: number;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport default function DefaultCircularProgress({\n  current,\n  total,\n  size = 62,\n  strokeWidth = 3,\n}: CircularProgressProps) {\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const radius = calculateRadius(size, strokeWidth);\n  const circumference = calculateCircumference(radius);\n  const percentage = calculatePercentage(current, total);\n  const offset = calculateCircularProgressOffset(percentage, circumference);\n\n  return (\n    <div\n      className=\"relative flex items-center justify-center\"\n      style={{ width: size, height: size }}\n      role=\"progressbar\"\n      aria-valuenow={current}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-label=\"Progresso de exportação\"\n    >\n      <svg width={size} height={size} className=\"absolute\">\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          stroke=\"var(--color-zinc-200)\"\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          stroke={isDefaultWl ? \"var(--color-cyan-300)\" : \"var(--color-zinc-300)\"}\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap=\"round\"\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n          className=\"transition-all duration-300 ease-in-out\"\n        />\n      </svg>\n    </div>\n  );\n}\n"],"mappings":";AAuCM,SACE,KADF;AArCN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AASxB,SAAR,wBAAyC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAChB,GAA0B;AACxB,QAAM,cAAc,uBAAuB;AAC3C,QAAM,SAAS,gBAAgB,MAAM,WAAW;AAChD,QAAM,gBAAgB,uBAAuB,MAAM;AACnD,QAAM,aAAa,oBAAoB,SAAS,KAAK;AACrD,QAAM,SAAS,gCAAgC,YAAY,aAAa;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,MACnC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MAEX,+BAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,YACxC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,IAAI,OAAO;AAAA,YACX,GAAG;AAAA,YACH,QAAO;AAAA,YACP;AAAA,YACA,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,IAAI,OAAO;AAAA,YACX,GAAG;AAAA,YACH,QAAQ,cAAc,0BAA0B;AAAA,YAChD;AAAA,YACA,MAAK;AAAA,YACL,iBAAiB;AAAA,YACjB,kBAAkB;AAAA,YAClB,eAAc;AAAA,YACd,WAAW,cAAc,OAAO,CAAC,IAAI,OAAO,CAAC;AAAA,YAC7C,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/form/ComboboxField.mjs

@@ -1,16 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import { useTranslations } from "next-intl";
 import { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
 import { cn } from "../../../infra/utils/clsx";
 function ComboboxField({
   options,
   label,
-  placeholder,
-  searchPlaceholder,
-  emptyMessage,
+  placeholder = "Selecione uma op\xE7\xE3o",
+  searchPlaceholder = "Buscar...",
+  emptyMessage = "Nenhuma op\xE7\xE3o encontrada.",
   value,
   onChange,
   disabled = false,
@@ -18,10 +17,6 @@ function ComboboxField({
   className,
   containerClassName
 }) {
-  const translate = useTranslations();
-  const resolvedPlaceholder = placeholder ?? translate("common.forms.combobox.placeholder");
-  const resolvedSearchPlaceholder = searchPlaceholder ?? translate("common.forms.combobox.searchPlaceholder");
-  const resolvedEmptyMessage = emptyMessage ?? translate("common.forms.combobox.emptyMessage");
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const selectedOption = useMemo(
@@ -64,7 +59,7 @@ function ComboboxField({
                 className
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !selectedOption && "text-gray-400"), children: selectedOption ? selectedOption.displayValue ?? selectedOption.label : resolvedPlaceholder }),
+                /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !selectedOption && "text-gray-400"), children: selectedOption ? selectedOption.displayValue ?? selectedOption.label : placeholder }),
                 icon ?? /* @__PURE__ */ jsx(
                   IconChevronDown,
                   {
@@ -92,14 +87,14 @@ function ComboboxField({
                     "input",
                     {
                       autoFocus: true,
-                      placeholder: resolvedSearchPlaceholder,
+                      placeholder: searchPlaceholder,
                       value: search,
                       onChange: (e) => setSearch(e.target.value),
                       className: "flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-[280px] p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center paragraph-small-medium text-gray-500", children: resolvedEmptyMessage }) : filteredOptions.map((option) => {
+                /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-[280px] p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center paragraph-small-medium text-gray-500", children: emptyMessage }) : filteredOptions.map((option) => {
                   const isSelected = value === option.value;
                   return /* @__PURE__ */ jsxs(
                     "div",

package/dist/components/ui/form/ComboboxField.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/ComboboxField.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useMemo } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { cn } from '../../../infra/utils/clsx';\n\nexport type ComboboxOption = {\n  value: string;\n  label: string;\n  displayValue?: string;\n};\n\ninterface ComboboxFieldProps {\n  options: ComboboxOption[];\n  label?: string;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  className?: string;\n  containerClassName?: string;\n}\n\nexport function ComboboxField({\n  options,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyMessage,\n  value,\n  onChange,\n  disabled = false,\n  icon,\n  className,\n  containerClassName,\n}: ComboboxFieldProps) {\n  const translate = useTranslations();\n  const resolvedPlaceholder = placeholder ?? translate('common.forms.combobox.placeholder');\n  const resolvedSearchPlaceholder = searchPlaceholder ?? translate('common.forms.combobox.searchPlaceholder');\n  const resolvedEmptyMessage = emptyMessage ?? translate('common.forms.combobox.emptyMessage');\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value]\n  );\n\n  const filteredOptions = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter((o) => o.label.toLowerCase().includes(q));\n  }, [options, search]);\n\n  const handleSelect = (optionValue: string) => {\n    onChange?.(optionValue);\n    setOpen(false);\n    setSearch('');\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', containerClassName)}>\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-gray-600\">{label}</span>\n        </div>\n      )}\n\n      <Popover\n        open={open}\n        onOpenChange={(v) => {\n          if (!disabled) {\n            setOpen(v);\n            if (!v) setSearch('');\n          }\n        }}\n      >\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            disabled={disabled}\n            className={cn(\n              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',\n              'flex items-center justify-between gap-2 rounded-md border bg-transparent',\n              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',\n              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              className\n            )}\n          >\n            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>\n              {selectedOption\n                ? (selectedOption.displayValue ?? selectedOption.label)\n                : resolvedPlaceholder}\n            </span>\n            {icon ?? (\n              <IconChevronDown\n                className={cn(\n                  'size-4 opacity-50 shrink-0 transition-all duration-200',\n                  open && 'rotate-180 opacity-100 text-gray-950'\n                )}\n              />\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent\n          className=\"p-0 overflow-hidden rounded-md border shadow-md\"\n          align=\"start\"\n          sideOffset={4}\n          style={{ width: 'var(--radix-popover-trigger-width)' }}\n          onWheel={(e) => e.stopPropagation()}\n        >\n          <div className=\"flex items-center gap-2 border-b border-gray-100 px-3 h-9\">\n            <IconSearch className=\"size-4 shrink-0 opacity-50 text-gray-500\" />\n            <input\n              autoFocus\n              placeholder={resolvedSearchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950\"\n            />\n          </div>\n\n          <div className=\"overflow-y-auto max-h-[280px] p-1\">\n            {filteredOptions.length === 0 ? (\n              <p className=\"py-6 text-center paragraph-small-medium text-gray-500\">{resolvedEmptyMessage}</p>\n            ) : (\n              filteredOptions.map((option) => {\n                const isSelected = value === option.value;\n                return (\n                  <div\n                    key={option.value}\n                    className={cn(\n                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',\n                      'paragraph-small-medium text-gray-950',\n                      'hover:bg-gray-100',\n                      isSelected && 'bg-gray-50'\n                    )}\n                    onClick={() => handleSelect(option.value)}\n                  >\n                    <span className=\"flex-1 truncate\">{option.label}</span>\n                    {isSelected && <IconCheck className=\"size-4 shrink-0 text-pages-600\" />}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nexport default ComboboxField;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/ComboboxField.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useMemo } from 'react';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { cn } from '../../../infra/utils/clsx';\n\nexport type ComboboxOption = {\n  value: string;\n  label: string;\n  displayValue?: string;\n};\n\ninterface ComboboxFieldProps {\n  options: ComboboxOption[];\n  label?: string;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  className?: string;\n  containerClassName?: string;\n}\n\nexport function ComboboxField({\n  options,\n  label,\n  placeholder = 'Selecione uma opção',\n  searchPlaceholder = 'Buscar...',\n  emptyMessage = 'Nenhuma opção encontrada.',\n  value,\n  onChange,\n  disabled = false,\n  icon,\n  className,\n  containerClassName,\n}: ComboboxFieldProps) {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value]\n  );\n\n  const filteredOptions = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter((o) => o.label.toLowerCase().includes(q));\n  }, [options, search]);\n\n  const handleSelect = (optionValue: string) => {\n    onChange?.(optionValue);\n    setOpen(false);\n    setSearch('');\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', containerClassName)}>\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-gray-600\">{label}</span>\n        </div>\n      )}\n\n      <Popover\n        open={open}\n        onOpenChange={(v) => {\n          if (!disabled) {\n            setOpen(v);\n            if (!v) setSearch('');\n          }\n        }}\n      >\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            disabled={disabled}\n            className={cn(\n              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',\n              'flex items-center justify-between gap-2 rounded-md border bg-transparent',\n              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',\n              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              className\n            )}\n          >\n            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>\n              {selectedOption\n                ? (selectedOption.displayValue ?? selectedOption.label)\n                : placeholder}\n            </span>\n            {icon ?? (\n              <IconChevronDown\n                className={cn(\n                  'size-4 opacity-50 shrink-0 transition-all duration-200',\n                  open && 'rotate-180 opacity-100 text-gray-950'\n                )}\n              />\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent\n          className=\"p-0 overflow-hidden rounded-md border shadow-md\"\n          align=\"start\"\n          sideOffset={4}\n          style={{ width: 'var(--radix-popover-trigger-width)' }}\n          onWheel={(e) => e.stopPropagation()}\n        >\n          <div className=\"flex items-center gap-2 border-b border-gray-100 px-3 h-9\">\n            <IconSearch className=\"size-4 shrink-0 opacity-50 text-gray-500\" />\n            <input\n              autoFocus\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950\"\n            />\n          </div>\n\n          <div className=\"overflow-y-auto max-h-[280px] p-1\">\n            {filteredOptions.length === 0 ? (\n              <p className=\"py-6 text-center paragraph-small-medium text-gray-500\">{emptyMessage}</p>\n            ) : (\n              filteredOptions.map((option) => {\n                const isSelected = value === option.value;\n                return (\n                  <div\n                    key={option.value}\n                    className={cn(\n                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',\n                      'paragraph-small-medium text-gray-950',\n                      'hover:bg-gray-100',\n                      isSelected && 'bg-gray-50'\n                    )}\n                    onClick={() => handleSelect(option.value)}\n                  >\n                    <span className=\"flex-1 truncate\">{option.label}</span>\n                    {isSelected && <IconCheck className=\"size-4 shrink-0 text-pages-600\" />}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nexport default ComboboxField;\n"],"mappings":"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","names":[]}

package/dist/components/ui/form/DatePicker.mjs

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, forwardRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { Calendar } from "./Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
@@ -11,9 +10,7 @@ const isoParaDataLocal = (iso) => {
   return new Date(ano, mes - 1, dia);
 };
 const DatePicker = forwardRef(
-  ({ value, onChange, placeholder, className, disabled }, ref) => {
-    const translate = useTranslations();
-    const resolvedPlaceholder = placeholder ?? translate("common.forms.datePicker.placeholder");
+  ({ value, onChange, placeholder = "Selecione a data", className, disabled }, ref) => {
     const [open, setOpen] = useState(false);
     const [date, setDate] = useState(() => {
       return value ? isoParaDataLocal(value) : void 0;
@@ -34,7 +31,7 @@ const DatePicker = forwardRef(
         onChange?.(void 0);
       }
     };
-    const displayText = date ? format(date, "dd/MM/yyyy") : resolvedPlaceholder;
+    const displayText = date ? format(date, "dd/MM/yyyy") : placeholder;
     return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
         "button",

package/dist/components/ui/form/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, forwardRef, useEffect } from \"react\";\nimport { useTranslations } from \"next-intl\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"./Calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/Popover\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\n// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local\n// Evita bug de timezone onde new Date(\"2025-08-02\") interpreta como UTC\nconst isoParaDataLocal = (iso: string): Date => {\n  const [ano, mes, dia] = iso.split(\"-\").map(Number);\n  return new Date(ano, mes - 1, dia);\n};\n\ninterface DatePickerProps {\n  value?: string;\n  onChange?: (date: string | undefined) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(\n  (\n    { value, onChange, placeholder, className, disabled },\n    ref,\n  ) => {\n    const translate = useTranslations();\n    const resolvedPlaceholder = placeholder ?? translate('common.forms.datePicker.placeholder');\n    const [open, setOpen] = useState(false);\n    const [date, setDate] = useState<Date | undefined>(() => {\n      return value ? isoParaDataLocal(value) : undefined;\n    });\n\n    // Sincroniza estado interno quando value mudar externamente\n    useEffect(() => {\n      if (value) {\n        setDate(isoParaDataLocal(value));\n      } else {\n        setDate(undefined);\n      }\n    }, [value]);\n\n    const handleDateSelect = (selectedDate: Date | undefined) => {\n      setDate(selectedDate);\n\n      if (selectedDate) {\n        onChange?.(format(selectedDate, \"yyyy-MM-dd\"));\n        setOpen(false); // Fecha o popover após seleção\n      } else {\n        onChange?.(undefined);\n      }\n    };\n\n    const displayText = date ? format(date, \"dd/MM/yyyy\") : resolvedPlaceholder;\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            disabled={disabled}\n            className={cn(\n              \"flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start\",\n              \"border-gray-200 hover:border-gray-400 focus-within:border-gray-950\",\n              \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              className,\n            )}\n          >\n            <span\n              className={cn(\n                \"paragraph-small-medium\",\n                date ? \"text-gray-950\" : \"text-gray-500\",\n              )}\n            >\n              {displayText}\n            </span>\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n          align=\"start\"\n          sideOffset={8}\n        >\n          <div className=\"p-3\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={handleDateSelect}\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";AA2DM,SAYM,KAZN;AAzDN,SAAS,UAAU,YAAY,iBAAiB;AAChD,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAInB,MAAM,mBAAmB,CAAC,QAAsB;AAC9C,QAAM,CAAC,KAAK,KAAK,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM;AACjD,SAAO,IAAI,KAAK,KAAK,MAAM,GAAG,GAAG;AACnC;AAUO,MAAM,aAAa;AAAA,EACxB,CACE,EAAE,OAAO,UAAU,aAAa,WAAW,SAAS,GACpD,QACG;AACH,UAAM,YAAY,gBAAgB;AAClC,UAAM,sBAAsB,eAAe,UAAU,qCAAqC;AAC1F,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,UAAM,CAAC,MAAM,OAAO,IAAI,SAA2B,MAAM;AACvD,aAAO,QAAQ,iBAAiB,KAAK,IAAI;AAAA,IAC3C,CAAC;AAGD,cAAU,MAAM;AACd,UAAI,OAAO;AACT,gBAAQ,iBAAiB,KAAK,CAAC;AAAA,MACjC,OAAO;AACL,gBAAQ,MAAS;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,mBAAmB,CAAC,iBAAmC;AAC3D,cAAQ,YAAY;AAEpB,UAAI,cAAc;AAChB,mBAAW,OAAO,cAAc,YAAY,CAAC;AAC7C,gBAAQ,KAAK;AAAA,MACf,OAAO;AACL,mBAAW,MAAS;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,cAAc,OAAO,OAAO,MAAM,YAAY,IAAI;AAExD,WACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,0BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,kBAAkB;AAAA,cAC3B;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAM;AAAA,UACN,YAAY;AAAA,UAEZ,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA;AAAA,UACZ,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, forwardRef, useEffect } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"./Calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/Popover\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\n// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local\n// Evita bug de timezone onde new Date(\"2025-08-02\") interpreta como UTC\nconst isoParaDataLocal = (iso: string): Date => {\n  const [ano, mes, dia] = iso.split(\"-\").map(Number);\n  return new Date(ano, mes - 1, dia);\n};\n\ninterface DatePickerProps {\n  value?: string;\n  onChange?: (date: string | undefined) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(\n  (\n    { value, onChange, placeholder = \"Selecione a data\", className, disabled },\n    ref,\n  ) => {\n    const [open, setOpen] = useState(false);\n    const [date, setDate] = useState<Date | undefined>(() => {\n      return value ? isoParaDataLocal(value) : undefined;\n    });\n\n    // Sincroniza estado interno quando value mudar externamente\n    useEffect(() => {\n      if (value) {\n        setDate(isoParaDataLocal(value));\n      } else {\n        setDate(undefined);\n      }\n    }, [value]);\n\n    const handleDateSelect = (selectedDate: Date | undefined) => {\n      setDate(selectedDate);\n\n      if (selectedDate) {\n        onChange?.(format(selectedDate, \"yyyy-MM-dd\"));\n        setOpen(false); // Fecha o popover após seleção\n      } else {\n        onChange?.(undefined);\n      }\n    };\n\n    const displayText = date ? format(date, \"dd/MM/yyyy\") : placeholder;\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            disabled={disabled}\n            className={cn(\n              \"flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start\",\n              \"border-gray-200 hover:border-gray-400 focus-within:border-gray-950\",\n              \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              className,\n            )}\n          >\n            <span\n              className={cn(\n                \"paragraph-small-medium\",\n                date ? \"text-gray-950\" : \"text-gray-500\",\n              )}\n            >\n              {displayText}\n            </span>\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n          align=\"start\"\n          sideOffset={8}\n        >\n          <div className=\"p-3\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={handleDateSelect}\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";AAwDM,SAYM,KAZN;AAtDN,SAAS,UAAU,YAAY,iBAAiB;AAChD,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAInB,MAAM,mBAAmB,CAAC,QAAsB;AAC9C,QAAM,CAAC,KAAK,KAAK,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM;AACjD,SAAO,IAAI,KAAK,KAAK,MAAM,GAAG,GAAG;AACnC;AAUO,MAAM,aAAa;AAAA,EACxB,CACE,EAAE,OAAO,UAAU,cAAc,oBAAoB,WAAW,SAAS,GACzE,QACG;AACH,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,UAAM,CAAC,MAAM,OAAO,IAAI,SAA2B,MAAM;AACvD,aAAO,QAAQ,iBAAiB,KAAK,IAAI;AAAA,IAC3C,CAAC;AAGD,cAAU,MAAM;AACd,UAAI,OAAO;AACT,gBAAQ,iBAAiB,KAAK,CAAC;AAAA,MACjC,OAAO;AACL,gBAAQ,MAAS;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,mBAAmB,CAAC,iBAAmC;AAC3D,cAAQ,YAAY;AAEpB,UAAI,cAAc;AAChB,mBAAW,OAAO,cAAc,YAAY,CAAC;AAC7C,gBAAQ,KAAK;AAAA,MACf,OAAO;AACL,mBAAW,MAAS;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,cAAc,OAAO,OAAO,MAAM,YAAY,IAAI;AAExD,WACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,0BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,kBAAkB;AAAA,cAC3B;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAM;AAAA,UACN,YAAY;AAAA,UAEZ,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA;AAAA,UACZ,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":[]}

package/dist/components/ui/form/DateRangePicker.mjs

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, forwardRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
 import { format } from "date-fns";
 import { IconCalendar } from "@tabler/icons-react";
 import { Calendar } from "./Calendar";
@@ -12,9 +11,7 @@ const isoParaDataLocal = (iso) => {
   return new Date(ano, mes - 1, dia);
 };
 const DateRangePicker = forwardRef(
-  ({ value, onChange, placeholder, className, disabled }, ref) => {
-    const translate = useTranslations();
-    const resolvedPlaceholder = placeholder ?? translate("common.forms.dateRangePicker.placeholder");
+  ({ value, onChange, placeholder = "Selecione o per\xEDodo", className, disabled }, ref) => {
     const [open, setOpen] = useState(false);
     const [range, setRange] = useState(() => {
       if (value?.from && value?.to) {
@@ -46,7 +43,7 @@ const DateRangePicker = forwardRef(
         onChange?.(void 0);
       }
     };
-    const displayText = range?.from && range?.to ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}` : resolvedPlaceholder;
+    const displayText = range?.from && range?.to ? `${format(range.from, "dd/MM/yyyy")} - ${format(range.to, "dd/MM/yyyy")}` : placeholder;
     return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",

package/dist/components/ui/form/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, forwardRef, useEffect } from \"react\";\nimport { useTranslations } from \"next-intl\";\nimport { format } from \"date-fns\";\nimport { IconCalendar } from '@tabler/icons-react';\nimport { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"./Calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/Popover\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\n// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local\n// Evita bug de timezone onde new Date(\"2025-08-02\") interpreta como UTC\nconst isoParaDataLocal = (iso: string): Date => {\n  const [ano, mes, dia] = iso.split(\"-\").map(Number);\n  return new Date(ano, mes - 1, dia);\n};\n\ninterface DateRangePickerProps {\n  value?: { from: string; to: string };\n  onChange?: (range: { from: string; to: string } | undefined) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(\n  ({ value, onChange, placeholder, className, disabled }, ref) => {\n    const translate = useTranslations();\n    const resolvedPlaceholder = placeholder ?? translate('common.forms.dateRangePicker.placeholder');\n    const [open, setOpen] = useState(false);\n    const [range, setRange] = useState<DateRange | undefined>(() => {\n      if (value?.from && value?.to) {\n        return {\n          from: isoParaDataLocal(value.from),\n          to: isoParaDataLocal(value.to)\n        };\n      }\n      return undefined;\n    });\n\n    useEffect(() => {\n      if (value?.from && value?.to) {\n        setRange({\n          from: isoParaDataLocal(value.from),\n          to: isoParaDataLocal(value.to)\n        });\n      } else {\n        setRange(undefined);\n      }\n    }, [value]);\n\n    const handleRangeSelect = (newRange: DateRange | undefined) => {\n      setRange(newRange);\n\n      if (newRange?.from && newRange?.to) {\n        onChange?.({\n          from: format(newRange.from, \"yyyy-MM-dd\"),\n          to: format(newRange.to, \"yyyy-MM-dd\")\n        });\n      } else {\n        onChange?.(undefined);\n      }\n    };\n\n    const displayText = range?.from && range?.to\n      ? `${format(range.from, \"dd/MM/yyyy\")} - ${format(range.to, \"dd/MM/yyyy\")}`\n      : resolvedPlaceholder;\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            disabled={disabled}\n            className={cn(\n              \"flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start\",\n              \"border-gray-200 hover:border-gray-400 focus-within:border-gray-950\",\n              \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              className\n            )}\n          >\n            <IconCalendar size={20} className=\"text-gray-400\" />\n            <span className={cn(\n              \"paragraph-small-medium\",\n              range?.from && range?.to ? \"text-gray-950\" : \"text-gray-500\"\n            )}>\n              {displayText}\n            </span>\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n          align=\"start\"\n          sideOffset={8}\n        >\n          <div className=\"p-3\">\n            <Calendar\n              mode=\"range\"\n              selected={range}\n              onSelect={handleRangeSelect}\n              numberOfMonths={1}\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"mappings":";AAwEU,SAUE,KAVF;AAtEV,SAAS,UAAU,YAAY,iBAAiB;AAChD,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AACzB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAInB,MAAM,mBAAmB,CAAC,QAAsB;AAC9C,QAAM,CAAC,KAAK,KAAK,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM;AACjD,SAAO,IAAI,KAAK,KAAK,MAAM,GAAG,GAAG;AACnC;AAUO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,OAAO,UAAU,aAAa,WAAW,SAAS,GAAG,QAAQ;AAC9D,UAAM,YAAY,gBAAgB;AAClC,UAAM,sBAAsB,eAAe,UAAU,0CAA0C;AAC/F,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAgC,MAAM;AAC9D,UAAI,OAAO,QAAQ,OAAO,IAAI;AAC5B,eAAO;AAAA,UACL,MAAM,iBAAiB,MAAM,IAAI;AAAA,UACjC,IAAI,iBAAiB,MAAM,EAAE;AAAA,QAC/B;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAED,cAAU,MAAM;AACd,UAAI,OAAO,QAAQ,OAAO,IAAI;AAC5B,iBAAS;AAAA,UACP,MAAM,iBAAiB,MAAM,IAAI;AAAA,UACjC,IAAI,iBAAiB,MAAM,EAAE;AAAA,QAC/B,CAAC;AAAA,MACH,OAAO;AACL,iBAAS,MAAS;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,oBAAoB,CAAC,aAAoC;AAC7D,eAAS,QAAQ;AAEjB,UAAI,UAAU,QAAQ,UAAU,IAAI;AAClC,mBAAW;AAAA,UACT,MAAM,OAAO,SAAS,MAAM,YAAY;AAAA,UACxC,IAAI,OAAO,SAAS,IAAI,YAAY;AAAA,QACtC,CAAC;AAAA,MACH,OAAO;AACL,mBAAW,MAAS;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,cAAc,OAAO,QAAQ,OAAO,KACtC,GAAG,OAAO,MAAM,MAAM,YAAY,CAAC,MAAM,OAAO,MAAM,IAAI,YAAY,CAAC,KACvE;AAEJ,WACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,0BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,gCAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAClD,oBAAC,UAAK,WAAW;AAAA,cACf;AAAA,cACA,OAAO,QAAQ,OAAO,KAAK,kBAAkB;AAAA,YAC/C,GACG,uBACH;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAM;AAAA,UACN,YAAY;AAAA,UAEZ,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,gBAAgB;AAAA;AAAA,UAClB,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, forwardRef, useEffect } from \"react\";\nimport { format } from \"date-fns\";\nimport { IconCalendar } from '@tabler/icons-react';\nimport { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"./Calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../overlay/Popover\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\n// Converte string ISO (yyyy-MM-dd) para Date no fuso horário local\n// Evita bug de timezone onde new Date(\"2025-08-02\") interpreta como UTC\nconst isoParaDataLocal = (iso: string): Date => {\n  const [ano, mes, dia] = iso.split(\"-\").map(Number);\n  return new Date(ano, mes - 1, dia);\n};\n\ninterface DateRangePickerProps {\n  value?: { from: string; to: string };\n  onChange?: (range: { from: string; to: string } | undefined) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProps>(\n  ({ value, onChange, placeholder = \"Selecione o período\", className, disabled }, ref) => {\n    const [open, setOpen] = useState(false);\n    const [range, setRange] = useState<DateRange | undefined>(() => {\n      if (value?.from && value?.to) {\n        return {\n          from: isoParaDataLocal(value.from),\n          to: isoParaDataLocal(value.to)\n        };\n      }\n      return undefined;\n    });\n\n    useEffect(() => {\n      if (value?.from && value?.to) {\n        setRange({\n          from: isoParaDataLocal(value.from),\n          to: isoParaDataLocal(value.to)\n        });\n      } else {\n        setRange(undefined);\n      }\n    }, [value]);\n\n    const handleRangeSelect = (newRange: DateRange | undefined) => {\n      setRange(newRange);\n\n      if (newRange?.from && newRange?.to) {\n        onChange?.({\n          from: format(newRange.from, \"yyyy-MM-dd\"),\n          to: format(newRange.to, \"yyyy-MM-dd\")\n        });\n      } else {\n        onChange?.(undefined);\n      }\n    };\n\n    const displayText = range?.from && range?.to\n      ? `${format(range.from, \"dd/MM/yyyy\")} - ${format(range.to, \"dd/MM/yyyy\")}`\n      : placeholder;\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            ref={ref}\n            disabled={disabled}\n            className={cn(\n              \"flex items-center gap-2 px-4 h-10 border rounded-lg transition-colors w-full justify-start\",\n              \"border-gray-200 hover:border-gray-400 focus-within:border-gray-950\",\n              \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              className\n            )}\n          >\n            <IconCalendar size={20} className=\"text-gray-400\" />\n            <span className={cn(\n              \"paragraph-small-medium\",\n              range?.from && range?.to ? \"text-gray-950\" : \"text-gray-500\"\n            )}>\n              {displayText}\n            </span>\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-auto p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n          align=\"start\"\n          sideOffset={8}\n        >\n          <div className=\"p-3\">\n            <Calendar\n              mode=\"range\"\n              selected={range}\n              onSelect={handleRangeSelect}\n              numberOfMonths={1}\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"mappings":";AAqEU,SAUE,KAVF;AAnEV,SAAS,UAAU,YAAY,iBAAiB;AAChD,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AACzB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAInB,MAAM,mBAAmB,CAAC,QAAsB;AAC9C,QAAM,CAAC,KAAK,KAAK,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM;AACjD,SAAO,IAAI,KAAK,KAAK,MAAM,GAAG,GAAG;AACnC;AAUO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,OAAO,UAAU,cAAc,0BAAuB,WAAW,SAAS,GAAG,QAAQ;AACtF,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAgC,MAAM;AAC9D,UAAI,OAAO,QAAQ,OAAO,IAAI;AAC5B,eAAO;AAAA,UACL,MAAM,iBAAiB,MAAM,IAAI;AAAA,UACjC,IAAI,iBAAiB,MAAM,EAAE;AAAA,QAC/B;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAED,cAAU,MAAM;AACd,UAAI,OAAO,QAAQ,OAAO,IAAI;AAC5B,iBAAS;AAAA,UACP,MAAM,iBAAiB,MAAM,IAAI;AAAA,UACjC,IAAI,iBAAiB,MAAM,EAAE;AAAA,QAC/B,CAAC;AAAA,MACH,OAAO;AACL,iBAAS,MAAS;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,oBAAoB,CAAC,aAAoC;AAC7D,eAAS,QAAQ;AAEjB,UAAI,UAAU,QAAQ,UAAU,IAAI;AAClC,mBAAW;AAAA,UACT,MAAM,OAAO,SAAS,MAAM,YAAY;AAAA,UACxC,IAAI,OAAO,SAAS,IAAI,YAAY;AAAA,QACtC,CAAC;AAAA,MACH,OAAO;AACL,mBAAW,MAAS;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,cAAc,OAAO,QAAQ,OAAO,KACtC,GAAG,OAAO,MAAM,MAAM,YAAY,CAAC,MAAM,OAAO,MAAM,IAAI,YAAY,CAAC,KACvE;AAEJ,WACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,0BAAC,kBAAe,SAAO,MACrB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,gCAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAClD,oBAAC,UAAK,WAAW;AAAA,cACf;AAAA,cACA,OAAO,QAAQ,OAAO,KAAK,kBAAkB;AAAA,YAC/C,GACG,uBACH;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAM;AAAA,UACN,YAAY;AAAA,UAEZ,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,gBAAgB;AAAA;AAAA,UAClB,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/components/ui/form/PhoneInput.mjs

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import { useTranslations } from "next-intl";
 import { AsYouType } from "libphonenumber-js";
 import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from "@greatapps/common";
 import { IconChevronDown, IconSearch } from "@tabler/icons-react";
@@ -25,7 +24,6 @@ function PhoneInput({
   classnameContainer,
   className
 }) {
-  const translate = useTranslations();
   const parsed = parsePhoneValue(value ?? "");
   const [selectedCountry, setSelectedCountry] = useState(parsed.country);
   const [phoneNumber, setPhoneNumber] = useState(parsed.number);
@@ -85,7 +83,7 @@ function PhoneInput({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
     label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
       /* @__PURE__ */ jsx("span", { className: "text-zinc-600", children: label }),
-      optional && /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: translate("common.forms.phoneInput.optional") }),
+      optional && /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "(Opcional)" }),
       required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -120,7 +118,7 @@ function PhoneInput({
                   {
                     type: "text",
                     className: "flex-1 text-sm outline-none placeholder:text-zinc-400",
-                    placeholder: translate("common.forms.phoneInput.searchPlaceholder"),
+                    placeholder: "Buscar pa\xEDs...",
                     value: search,
                     onChange: (e) => setSearch(e.target.value),
                     autoFocus: true
@@ -145,7 +143,7 @@ function PhoneInput({
                   },
                   country.iso
                 )),
-                filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-500 p-3 text-center", children: translate("common.forms.phoneInput.emptyMessage") })
+                filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-500 p-3 text-center", children: "Nenhum pa\xEDs encontrado" })
               ] })
             ] })
           ] }),

package/dist/components/ui/form/PhoneInput.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const translate = useTranslations();\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const digits = rawInput.replace(/\\D/g, '');\n    if (digits.length > 15) return;\n\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">{translate('common.forms.phoneInput.optional')}</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0 z-[1010]\" align=\"start\" side=\"top\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder={translate('common.forms.phoneInput.searchPlaceholder')}\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">{translate('common.forms.phoneInput.emptyMessage')}</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const digits = rawInput.replace(/\\D/g, '');\n    if (digits.length > 15) return;\n\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0 z-[1010]\" align=\"start\" side=\"top\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder=\"Buscar país...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">Nenhum país encontrado</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/form/SelectField.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslations } from "next-intl";
 import {
   Select,
   SelectContent,
@@ -16,7 +15,7 @@ function SelectField({
   hintMessage,
   error = false,
   errorMessage,
-  placeholder,
+  placeholder = "Selecione uma op\xE7\xE3o",
   options,
   value,
   defaultValue,
@@ -26,8 +25,6 @@ function SelectField({
   className,
   containerClassName
 }) {
-  const translate = useTranslations();
-  const resolvedPlaceholder = placeholder ?? translate("common.forms.select.placeholder");
   const handleValueChange = (selectedValue) => {
     if (!onChange) return;
     const selectedOption = options.find((option) => String(option.value) === selectedValue);
@@ -40,7 +37,7 @@ function SelectField({
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
     label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
       /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: label }),
-      optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: translate("common.forms.select.optional") }),
+      optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "(Opcional)" }),
       required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -61,7 +58,7 @@ function SelectField({
                 className
               ),
               icon,
-              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: resolvedPlaceholder, children: value !== void 0 && (() => {
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value !== void 0 && (() => {
                 const selectedOption = options.find((opt) => String(opt.value) === String(value));
                 return selectedOption?.displayValue || selectedOption?.label;
               })() })

package/dist/components/ui/form/SelectField.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/SelectField.tsx"],"sourcesContent":["'use client';\r\n\r\nimport React from 'react';\r\nimport { useTranslations } from 'next-intl';\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from './Select';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ntype SelectOption = {\r\n  value: string | number | boolean;\r\n  label: React.ReactNode;\r\n  displayValue?: string;\r\n};\r\n\r\ninterface SelectFieldProps {\r\n  options: SelectOption[];\r\n  label?: string;\r\n  optional?: boolean;\r\n  required?: boolean;\r\n  hintMessage?: string;\r\n  error?: boolean;\r\n  errorMessage?: string;\r\n  placeholder?: string;\r\n  value?: string | number | boolean;\r\n  defaultValue?: string | number | boolean;\r\n  onChange?: (value: string | number | boolean) => void;\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  className?: string;\r\n  containerClassName?: string;\r\n}\r\n\r\nexport function SelectField({\r\n  label,\r\n  optional = false,\r\n  required = false,\r\n  hintMessage,\r\n  error = false,\r\n  errorMessage,\r\n  placeholder,\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  disabled = false,\r\n  icon,\r\n  className,\r\n  containerClassName,\r\n}: SelectFieldProps) {\r\n  const translate = useTranslations();\r\n  const resolvedPlaceholder = placeholder ?? translate('common.forms.select.placeholder');\r\n  const handleValueChange = (selectedValue: string) => {\r\n    if (!onChange) return;\r\n    const selectedOption = options.find((option) => String(option.value) === selectedValue);\r\n    if (selectedOption) {\r\n      onChange(selectedOption.value);\r\n    }\r\n  };\r\n\r\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\r\n  const messageColor = error ? 'text-red-600' : 'text-gray-600';\r\n\r\n  return (\r\n    <div className={cn('flex flex-col gap-1.5', containerClassName)}>\r\n      {label && (\r\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\r\n          <span className=\"text-gray-600\">{label}</span>\r\n          {optional && <span className=\"text-gray-500\">{translate('common.forms.select.optional')}</span>}\r\n          {required && <span className=\"text-red-600\">*</span>}\r\n        </div>\r\n      )}\r\n\r\n      <Select\r\n        value={value !== undefined ? String(value) : undefined}\r\n        defaultValue={defaultValue !== undefined ? String(defaultValue) : undefined}\r\n        onValueChange={handleValueChange}\r\n        disabled={disabled}\r\n      >\r\n        <SelectTrigger\r\n          className={cn(\r\n            'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',\r\n            error\r\n              ? 'border-red-600 hover:border-red-700 focus:border-red-600'\r\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950 focus:border-gray-950',\r\n            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\r\n            className\r\n          )}\r\n          icon={icon}\r\n        >\r\n          <SelectValue placeholder={resolvedPlaceholder}>\r\n            {value !== undefined &&\r\n              (() => {\r\n                const selectedOption = options.find((opt) => String(opt.value) === String(value));\r\n                return selectedOption?.displayValue || selectedOption?.label;\r\n              })()}\r\n          </SelectValue>\r\n        </SelectTrigger>\r\n        <SelectContent sideOffset={4}>\r\n          {options.map((option) => (\r\n            <SelectItem key={String(option.value)} value={String(option.value)}>\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </Select>\r\n\r\n      {finalMessage && (\r\n        <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelectField.displayName = 'SelectField';\r\n\r\nexport default SelectField;\r\n"],"mappings":";AAsEQ,SACE,KADF;AAnER,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AA0BZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAY,gBAAgB;AAClC,QAAM,sBAAsB,eAAe,UAAU,iCAAiC;AACtF,QAAM,oBAAoB,CAAC,kBAA0B;AACnD,QAAI,CAAC,SAAU;AACf,UAAM,iBAAiB,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,KAAK,MAAM,aAAa;AACtF,QAAI,gBAAgB;AAClB,eAAS,eAAe,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,QAAM,eAAe,QAAQ,iBAAiB;AAE9C,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,kBAAkB,GAC3D;AAAA,aACC,qBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,MACtC,YAAY,oBAAC,UAAK,WAAU,iBAAiB,oBAAU,8BAA8B,GAAE;AAAA,MACvF,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,OAC/C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,UAAU,SAAY,OAAO,KAAK,IAAI;AAAA,QAC7C,cAAc,iBAAiB,SAAY,OAAO,YAAY,IAAI;AAAA,QAClE,eAAe;AAAA,QACf;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,QACI,6DACA;AAAA,gBACJ,WAAW,kCAAkC;AAAA,gBAC7C;AAAA,cACF;AAAA,cACA;AAAA,cAEA,8BAAC,eAAY,aAAa,qBACvB,oBAAU,WACR,MAAM;AACL,sBAAM,iBAAiB,QAAQ,KAAK,CAAC,QAAQ,OAAO,IAAI,KAAK,MAAM,OAAO,KAAK,CAAC;AAChF,uBAAO,gBAAgB,gBAAgB,gBAAgB;AAAA,cACzD,GAAG,GACP;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,iBAAc,YAAY,GACxB,kBAAQ,IAAI,CAAC,WACZ,oBAAC,cAAsC,OAAO,OAAO,OAAO,KAAK,GAC9D,iBAAO,SADO,OAAO,OAAO,KAAK,CAEpC,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,gBACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,YAAY,GAAI,wBAAa;AAAA,KAEhF;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/SelectField.tsx"],"sourcesContent":["'use client';\r\n\r\nimport React from 'react';\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from './Select';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ntype SelectOption = {\r\n  value: string | number | boolean;\r\n  label: React.ReactNode;\r\n  displayValue?: string;\r\n};\r\n\r\ninterface SelectFieldProps {\r\n  options: SelectOption[];\r\n  label?: string;\r\n  optional?: boolean;\r\n  required?: boolean;\r\n  hintMessage?: string;\r\n  error?: boolean;\r\n  errorMessage?: string;\r\n  placeholder?: string;\r\n  value?: string | number | boolean;\r\n  defaultValue?: string | number | boolean;\r\n  onChange?: (value: string | number | boolean) => void;\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  className?: string;\r\n  containerClassName?: string;\r\n}\r\n\r\nexport function SelectField({\r\n  label,\r\n  optional = false,\r\n  required = false,\r\n  hintMessage,\r\n  error = false,\r\n  errorMessage,\r\n  placeholder = 'Selecione uma opção',\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  disabled = false,\r\n  icon,\r\n  className,\r\n  containerClassName,\r\n}: SelectFieldProps) {\r\n  const handleValueChange = (selectedValue: string) => {\r\n    if (!onChange) return;\r\n    const selectedOption = options.find((option) => String(option.value) === selectedValue);\r\n    if (selectedOption) {\r\n      onChange(selectedOption.value);\r\n    }\r\n  };\r\n\r\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\r\n  const messageColor = error ? 'text-red-600' : 'text-gray-600';\r\n\r\n  return (\r\n    <div className={cn('flex flex-col gap-1.5', containerClassName)}>\r\n      {label && (\r\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\r\n          <span className=\"text-gray-600\">{label}</span>\r\n          {optional && <span className=\"text-gray-500\">(Opcional)</span>}\r\n          {required && <span className=\"text-red-600\">*</span>}\r\n        </div>\r\n      )}\r\n\r\n      <Select\r\n        value={value !== undefined ? String(value) : undefined}\r\n        defaultValue={defaultValue !== undefined ? String(defaultValue) : undefined}\r\n        onValueChange={handleValueChange}\r\n        disabled={disabled}\r\n      >\r\n        <SelectTrigger\r\n          className={cn(\r\n            'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',\r\n            error\r\n              ? 'border-red-600 hover:border-red-700 focus:border-red-600'\r\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950 focus:border-gray-950',\r\n            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\r\n            className\r\n          )}\r\n          icon={icon}\r\n        >\r\n          <SelectValue placeholder={placeholder}>\r\n            {value !== undefined &&\r\n              (() => {\r\n                const selectedOption = options.find((opt) => String(opt.value) === String(value));\r\n                return selectedOption?.displayValue || selectedOption?.label;\r\n              })()}\r\n          </SelectValue>\r\n        </SelectTrigger>\r\n        <SelectContent sideOffset={4}>\r\n          {options.map((option) => (\r\n            <SelectItem key={String(option.value)} value={String(option.value)}>\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </Select>\r\n\r\n      {finalMessage && (\r\n        <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelectField.displayName = 'SelectField';\r\n\r\nexport default SelectField;\r\n"],"mappings":";AAmEQ,SACE,KADF;AAhER;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AA0BZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,oBAAoB,CAAC,kBAA0B;AACnD,QAAI,CAAC,SAAU;AACf,UAAM,iBAAiB,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,KAAK,MAAM,aAAa;AACtF,QAAI,gBAAgB;AAClB,eAAS,eAAe,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,QAAM,eAAe,QAAQ,iBAAiB;AAE9C,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,kBAAkB,GAC3D;AAAA,aACC,qBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,MACtC,YAAY,oBAAC,UAAK,WAAU,iBAAgB,wBAAU;AAAA,MACtD,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,OAC/C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,UAAU,SAAY,OAAO,KAAK,IAAI;AAAA,QAC7C,cAAc,iBAAiB,SAAY,OAAO,YAAY,IAAI;AAAA,QAClE,eAAe;AAAA,QACf;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,QACI,6DACA;AAAA,gBACJ,WAAW,kCAAkC;AAAA,gBAC7C;AAAA,cACF;AAAA,cACA;AAAA,cAEA,8BAAC,eAAY,aACV,oBAAU,WACR,MAAM;AACL,sBAAM,iBAAiB,QAAQ,KAAK,CAAC,QAAQ,OAAO,IAAI,KAAK,MAAM,OAAO,KAAK,CAAC;AAChF,uBAAO,gBAAgB,gBAAgB,gBAAgB;AAAA,cACzD,GAAG,GACP;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,iBAAc,YAAY,GACxB,kBAAQ,IAAI,CAAC,WACZ,oBAAC,cAAsC,OAAO,OAAO,OAAO,KAAK,GAC9D,iBAAO,SADO,OAAO,OAAO,KAAK,CAEpC,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,gBACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,YAAY,GAAI,wBAAa;AAAA,KAEhF;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;","names":[]}