@greatapps/common 1.1.24 → 1.1.26

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

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

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

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Lock, Eye, EyeOff } from "lucide-react";
+import { Input } from "./Input";
+import { cn } from "../../../infra/utils/clsx";
+const FormField = forwardRef(
+  ({
+    label,
+    optional = false,
+    required = false,
+    leftIcon: LeftIcon,
+    rightIcon: RightIcon,
+    rightIconColor = "var(--color-gray-400)",
+    hintMessage,
+    size = "default",
+    type = "text",
+    error = false,
+    errorMessage,
+    className,
+    classnameContainer,
+    showCharCount = false,
+    showPassword = false,
+    onTogglePassword,
+    ...inputProps
+  }, ref) => {
+    const isPasswordField = type === "password";
+    const inputType = isPasswordField && showPassword ? "text" : type;
+    const containerHeight = size === "large" ? "h-12" : "h-10";
+    const FinalLeftIcon = isPasswordField ? Lock : LeftIcon;
+    const FinalRightIcon = isPasswordField ? !showPassword ? EyeOff : Eye : RightIcon;
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const messageColor = error ? "text-red-600" : "text-gray-600";
+    const currentLength = typeof inputProps.value === "string" ? inputProps.value.length : 0;
+    const shouldShowCharCount = showCharCount && inputProps.maxLength;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold truncate", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: label }),
+        optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "(Opcional)" }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex gap-2 px-4 items-center border rounded-lg transition-color",
+            containerHeight,
+            classnameContainer,
+            error ? "border-red-600 hover:border-red-700" : "border-gray-200 hover:border-gray-400 focus-within:border-gray-950"
+          ),
+          children: [
+            FinalLeftIcon && /* @__PURE__ */ jsx(FinalLeftIcon, { size: 20, className: "text-gray-400" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref,
+                type: inputType,
+                className: cn(
+                  "paragraph-small-medium w-full h-full text-gray-950",
+                  error && "placeholder:text-red-400",
+                  className
+                ),
+                ...inputProps
+              }
+            ),
+            FinalRightIcon && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: isPasswordField ? onTogglePassword : void 0,
+                className: cn(
+                  "flex items-center justify-center",
+                  isPasswordField && "cursor-pointer hover:opacity-70 transition-opacity"
+                ),
+                "aria-label": isPasswordField ? showPassword ? "Ocultar senha" : "Mostrar senha" : void 0,
+                children: /* @__PURE__ */ jsx(
+                  FinalRightIcon,
+                  {
+                    size: 20,
+                    color: isPasswordField ? "var(--color-gray-950)" : rightIconColor
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      finalMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", messageColor), children: finalMessage }),
+      shouldShowCharCount && /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-gray-600", children: [
+        currentLength,
+        "/",
+        inputProps.maxLength
+      ] })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+var FormField_default = FormField;
+export {
+  FormField,
+  FormField_default as default
+};
+//# sourceMappingURL=FormField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/FormField.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react';\r\nimport { Lock, Eye, EyeOff, type LucideIcon } from 'lucide-react';\r\nimport { Input } from './Input';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ntype FormFieldSize = 'default' | 'large';\r\n\r\ninterface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\r\n  label?: string;\r\n  optional?: boolean;\r\n  required?: boolean;\r\n  leftIcon?: LucideIcon;\r\n  rightIcon?: LucideIcon;\r\n  rightIconColor?: string;\r\n  hintMessage?: string;\r\n  classnameContainer?: string;\r\n  size?: FormFieldSize;\r\n  error?: boolean;\r\n  errorMessage?: string;\r\n  showCharCount?: boolean;\r\n  showPassword?: boolean;\r\n  onTogglePassword?: () => void;\r\n}\r\n\r\nexport const FormField = forwardRef<HTMLInputElement, FormFieldProps>(\r\n  (\r\n    {\r\n      label,\r\n      optional = false,\r\n      required = false,\r\n      leftIcon: LeftIcon,\r\n      rightIcon: RightIcon,\r\n      rightIconColor = 'var(--color-gray-400)',\r\n      hintMessage,\r\n      size = 'default',\r\n      type = 'text',\r\n      error = false,\r\n      errorMessage,\r\n      className,\r\n      classnameContainer,\r\n      showCharCount = false,\r\n      showPassword = false,\r\n      onTogglePassword,\r\n      ...inputProps\r\n    },\r\n    ref\r\n  ) => {\r\n    const isPasswordField = type === 'password';\r\n    const inputType = isPasswordField && showPassword ? 'text' : type;\r\n    const containerHeight = size === 'large' ? 'h-12' : 'h-10';\r\n\r\n    const FinalLeftIcon = isPasswordField ? Lock : LeftIcon;\r\n    const FinalRightIcon = isPasswordField ? (!showPassword ? EyeOff : Eye) : RightIcon;\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    const currentLength = typeof inputProps.value === 'string' ? inputProps.value.length : 0;\r\n    const shouldShowCharCount = showCharCount && inputProps.maxLength;\r\n\r\n    return (\r\n      <div className=\"flex flex-col gap-1.5 w-full\">\r\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold truncate\">\r\n          {label && <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        <div\r\n          className={cn(\r\n            'flex gap-2 px-4 items-center border rounded-lg transition-color',\r\n            containerHeight,\r\n            classnameContainer,\r\n            error\r\n              ? 'border-red-600 hover:border-red-700'\r\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'\r\n          )}\r\n        >\r\n          {FinalLeftIcon && <FinalLeftIcon size={20} className=\"text-gray-400\" />}\r\n\r\n          <Input\r\n            ref={ref}\r\n            type={inputType}\r\n            className={cn(\r\n              'paragraph-small-medium w-full h-full text-gray-950',\r\n              error && 'placeholder:text-red-400',\r\n              className\r\n            )}\r\n            {...inputProps}\r\n          />\r\n\r\n          {FinalRightIcon && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={isPasswordField ? onTogglePassword : undefined}\r\n              className={cn(\r\n                'flex items-center justify-center',\r\n                isPasswordField && 'cursor-pointer hover:opacity-70 transition-opacity'\r\n              )}\r\n              aria-label={\r\n                isPasswordField ? (showPassword ? 'Ocultar senha' : 'Mostrar senha') : undefined\r\n              }\r\n            >\r\n              <FinalRightIcon\r\n                size={20}\r\n                color={isPasswordField ? 'var(--color-gray-950)' : rightIconColor}\r\n              />\r\n            </button>\r\n          )}\r\n        </div>\r\n\r\n        {finalMessage && (\r\n          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>\r\n        )}\r\n\r\n        {shouldShowCharCount && (\r\n          <span className=\"paragraph-xsmall-medium text-gray-600\">\r\n            {currentLength}/{inputProps.maxLength}\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nFormField.displayName = 'FormField';\r\n\r\nexport default FormField;\r\n"],"mappings":";AAgEQ,SACY,KADZ;AA9DR,SAAS,kBAAiD;AAC1D,SAAS,MAAM,KAAK,cAA+B;AACnD,SAAS,aAAa;AACtB,SAAS,UAAU;AAqBZ,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,kBAAkB,SAAS;AACjC,UAAM,YAAY,mBAAmB,eAAe,SAAS;AAC7D,UAAM,kBAAkB,SAAS,UAAU,SAAS;AAEpD,UAAM,gBAAgB,kBAAkB,OAAO;AAC/C,UAAM,iBAAiB,kBAAmB,CAAC,eAAe,SAAS,MAAO;AAE1E,UAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,UAAM,eAAe,QAAQ,iBAAiB;AAE9C,UAAM,gBAAgB,OAAO,WAAW,UAAU,WAAW,WAAW,MAAM,SAAS;AACvF,UAAM,sBAAsB,iBAAiB,WAAW;AAExD,WACE,qBAAC,SAAI,WAAU,gCACb;AAAA,2BAAC,SAAI,WAAU,8DACZ;AAAA,iBAAS,oBAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,QAChD,YAAY,oBAAC,UAAK,WAAU,iBAAgB,wBAAU;AAAA,QACtD,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,SAC/C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA,QACI,wCACA;AAAA,UACN;AAAA,UAEC;AAAA,6BAAiB,oBAAC,iBAAc,MAAM,IAAI,WAAU,iBAAgB;AAAA,YAErE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT;AAAA,kBACA,SAAS;AAAA,kBACT;AAAA,gBACF;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,YAEC,kBACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,kBAAkB,mBAAmB;AAAA,gBAC9C,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB;AAAA,gBACrB;AAAA,gBACA,cACE,kBAAmB,eAAe,kBAAkB,kBAAmB;AAAA,gBAGzE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAO,kBAAkB,0BAA0B;AAAA;AAAA,gBACrD;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MAEJ;AAAA,MAEC,gBACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,YAAY,GAAI,wBAAa;AAAA,MAG7E,uBACC,qBAAC,UAAK,WAAU,yCACb;AAAA;AAAA,QAAc;AAAA,QAAE,WAAW;AAAA,SAC9B;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":[]}

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

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Image from "next/image";
+import { Input } from "./Input";
+import { Separator } from "../data-display/Separator";
+import { cn } from "../../../infra/utils/clsx";
+const PhoneInput = forwardRef(
+  ({
+    label,
+    optional = false,
+    required = false,
+    hintMessage,
+    error = false,
+    errorMessage,
+    countryCode = "+55",
+    countryFlagSrc = "/icons/brazil-flag.svg",
+    countryFlagAlt = "Brazil flag",
+    className,
+    classnameContainer,
+    ...props
+  }, ref) => {
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const showMessage = finalMessage && finalMessage.trim() !== "";
+    return /* @__PURE__ */ jsxs("div", { className: cn("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-gray-600", children: label }),
+        optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "(Opcional)" }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex gap-2 items-center border rounded-lg h-10 transition-colors",
+            error ? "border-red-600 hover:border-red-700" : "border-gray-200 hover:border-gray-400 focus-within:border-gray-950",
+            classnameContainer
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
+              /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: countryFlagSrc,
+                  alt: countryFlagAlt,
+                  width: 20,
+                  height: 20,
+                  className: "h-5! w-5! rounded-full"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-950", children: countryCode })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref,
+                type: "tel",
+                className: cn(
+                  "paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
+                  className
+                ),
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      showMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", error ? "text-red-600" : "text-gray-600"), children: finalMessage })
+    ] });
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var PhoneInput_default = PhoneInput;
+export {
+  PhoneInput_default as default
+};
+//# sourceMappingURL=PhoneInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ComponentPropsWithoutRef, forwardRef } from 'react';\r\nimport Image from 'next/image';\r\nimport { Input } from './Input';\r\nimport { Separator } from '../data-display/Separator';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ninterface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {\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  countryCode?: string;\r\n  countryFlagSrc?: string;\r\n  countryFlagAlt?: string;\r\n  classnameContainer?: string;\r\n}\r\n\r\nconst PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(\r\n  (\r\n    {\r\n      label,\r\n      optional = false,\r\n      required = false,\r\n      hintMessage,\r\n      error = false,\r\n      errorMessage,\r\n      countryCode = '+55',\r\n      countryFlagSrc = '/icons/brazil-flag.svg',\r\n      countryFlagAlt = 'Brazil flag',\r\n      className,\r\n      classnameContainer,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const finalMessage = error && errorMessage ? errorMessage : hintMessage;\r\n    const showMessage = finalMessage && finalMessage.trim() !== '';\r\n\r\n    return (\r\n      <div className={cn('flex flex-col gap-1.5')}>\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        <div\r\n          className={cn(\r\n            'flex gap-2 items-center border rounded-lg h-10 transition-colors',\r\n            error\r\n              ? 'border-red-600 hover:border-red-700'\r\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950',\r\n            classnameContainer\r\n          )}\r\n        >\r\n          <div className=\"flex items-center gap-2 px-4\">\r\n            <Image\r\n              src={countryFlagSrc}\r\n              alt={countryFlagAlt}\r\n              width={20}\r\n              height={20}\r\n              className=\"h-5! w-5! rounded-full\"\r\n            />\r\n            <span className=\"paragraph-small-regular text-gray-950\">{countryCode}</span>\r\n          </div>\r\n\r\n          <Separator orientation=\"vertical\" />\r\n\r\n          <Input\r\n            ref={ref}\r\n            type=\"tel\"\r\n            className={cn(\r\n              'paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\r\n              className\r\n            )}\r\n            {...props}\r\n          />\r\n        </div>\r\n\r\n        {showMessage && (\r\n          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>\r\n            {finalMessage}\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nPhoneInput.displayName = 'PhoneInput';\r\n\r\nexport default PhoneInput;\r\n"],"mappings":";AA6CU,SACE,KADF;AA3CV,SAAmC,kBAAkB;AACrD,OAAO,WAAW;AAClB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAenB,MAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,UAAM,cAAc,gBAAgB,aAAa,KAAK,MAAM;AAE5D,WACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,GACvC;AAAA,eACC,qBAAC,SAAI,WAAU,qDACb;AAAA,4BAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,QACtC,YAAY,oBAAC,UAAK,WAAU,iBAAgB,wBAAU;AAAA,QACtD,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,SAC/C;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,QACI,wCACA;AAAA,YACJ;AAAA,UACF;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,gCACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,WAAU;AAAA;AAAA,cACZ;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,eACvE;AAAA,YAEA,oBAAC,aAAU,aAAY,YAAW;AAAA,YAElC;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAK;AAAA,gBACL,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,gBACF;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA;AAAA;AAAA,MACF;AAAA,MAEC,eACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,QAAQ,iBAAiB,eAAe,GACpF,wBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./Select";
+import { cn } from "../../../infra/utils/clsx";
+function SelectField({
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder = "Selecione uma op\xE7\xE3o",
+  options,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName
+}) {
+  const handleValueChange = (selectedValue) => {
+    if (!onChange) return;
+    const selectedOption = options.find((option) => String(option.value) === selectedValue);
+    if (selectedOption) {
+      onChange(selectedOption.value);
+    }
+  };
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const messageColor = error ? "text-red-600" : "text-gray-600";
+  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: "(Opcional)" }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: value !== void 0 ? String(value) : void 0,
+        defaultValue: defaultValue !== void 0 ? String(defaultValue) : void 0,
+        onValueChange: handleValueChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              className: cn(
+                "paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors",
+                error ? "border-red-600 hover:border-red-700 focus:border-red-600" : "border-gray-200 hover:border-gray-400 focus-within:border-gray-950 focus:border-gray-950",
+                disabled && "cursor-not-allowed opacity-50",
+                className
+              ),
+              icon,
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value !== void 0 && (() => {
+                const selectedOption = options.find((opt) => String(opt.value) === String(value));
+                return selectedOption?.displayValue || selectedOption?.label;
+              })() })
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectContent, { sideOffset: 4, children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), children: option.label }, String(option.value))) })
+        ]
+      }
+    ),
+    finalMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", messageColor), children: finalMessage })
+  ] });
+}
+SelectField.displayName = "SelectField";
+var SelectField_default = SelectField;
+export {
+  SelectField,
+  SelectField_default as default
+};
+//# sourceMappingURL=SelectField.mjs.map

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

@@ -0,0 +1 @@
+{"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',\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,YAAY;AAAA,gBACZ;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":[]}

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "./Switch";
+function SwitchOptionFieldWithIcon({
+  icon: Icon,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  hideBorderBottom = false,
+  id
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: `flex justify-between items-center gap-3 p-5 ${!hideBorderBottom ? "border-b border-gray-200" : ""} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg bg-gray-50 flex items-center justify-center text-gray-950", children: /* @__PURE__ */ jsx(Icon, { size: 20 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id,
+            checked: disabled ? true : checked,
+            onCheckedChange,
+            disabled,
+            className: disabled ? "opacity-20!" : ""
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SwitchOptionFieldWithIcon as default
+};
+//# sourceMappingURL=SwitchOptionFieldWithIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/SwitchOptionFieldWithIcon.tsx"],"sourcesContent":["import { LucideIcon } from 'lucide-react';\r\nimport { Switch } from './Switch';\r\n\r\ntype SwitchOptionFieldWithIconProps = {\r\n  icon: LucideIcon;\r\n  label: string;\r\n  description: string;\r\n  checked: boolean;\r\n  onCheckedChange: (checked: boolean) => void;\r\n  disabled?: boolean;\r\n  hideBorderBottom?: boolean;\r\n  id?: string;\r\n};\r\n\r\nexport default function SwitchOptionFieldWithIcon({\r\n  icon: Icon,\r\n  label,\r\n  description,\r\n  checked,\r\n  onCheckedChange,\r\n  disabled = false,\r\n  hideBorderBottom = false,\r\n  id,\r\n}: SwitchOptionFieldWithIconProps) {\r\n  return (\r\n    <label\r\n      className={`flex justify-between items-center gap-3 p-5 ${\r\n        !hideBorderBottom ? 'border-b border-gray-200' : ''\r\n      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}\r\n    >\r\n      <div className=\"size-10 rounded-lg bg-gray-50 flex items-center justify-center text-gray-950\">\r\n        <Icon size={20} />\r\n      </div>\r\n      <div className=\"flex flex-col gap-2 flex-1\">\r\n        <span className=\"paragraph-small-semibold text-gray-950\">{label}</span>\r\n        <span className=\"paragraph-small-regular text-gray-600\">{description}</span>\r\n      </div>\r\n      <Switch\r\n        id={id}\r\n        checked={disabled ? true : checked}\r\n        onCheckedChange={onCheckedChange}\r\n        disabled={disabled}\r\n        className={disabled ? 'opacity-20!' : ''}\r\n      />\r\n    </label>\r\n  );\r\n}\r\n"],"mappings":"AA+BQ,cAEF,YAFE;AA9BR,SAAS,cAAc;AAaR,SAAR,0BAA2C;AAAA,EAChD,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AACF,GAAmC;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,+CACT,CAAC,mBAAmB,6BAA6B,EACnD,IAAI,WAAW,kCAAkC,gBAAgB;AAAA,MAEjE;AAAA,4BAAC,SAAI,WAAU,gFACb,8BAAC,QAAK,MAAM,IAAI,GAClB;AAAA,QACA,qBAAC,SAAI,WAAU,8BACb;AAAA,8BAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,UAChE,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,WACvE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,WAAW,OAAO;AAAA,YAC3B;AAAA,YACA;AAAA,YACA,WAAW,WAAW,gBAAgB;AAAA;AAAA,QACxC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Textarea } from "./Textarea";
+import { cn } from "../../../infra/utils/clsx";
+const TextAreaField = forwardRef(
+  ({
+    label,
+    optional = false,
+    required = false,
+    hintMessage,
+    error = false,
+    errorMessage,
+    className,
+    ...textareaProps
+  }, ref) => {
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const messageColor = error ? "text-red-600" : "text-gray-600";
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: label }),
+        optional && /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "(Opcional)" }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex px-4 py-3 border rounded-lg transition-colors overflow-hidden",
+            error ? "border-red-600 hover:border-red-700" : "border-gray-200 hover:border-gray-400 focus-within:border-gray-950"
+          ),
+          children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref,
+              className: cn(
+                "paragraph-small-medium w-full text-gray-950 border-none shadow-none focus-visible:ring-0 p-0 resize-none overflow-y-auto field-sizing-fixed! min-h-0! break-words",
+                error && "placeholder:text-red-400",
+                className
+              ),
+              ...textareaProps
+            }
+          )
+        }
+      ),
+      finalMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", messageColor), children: finalMessage })
+    ] });
+  }
+);
+TextAreaField.displayName = "TextAreaField";
+var TextAreaField_default = TextAreaField;
+export {
+  TextAreaField,
+  TextAreaField_default as default
+};
+//# sourceMappingURL=TextAreaField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/TextAreaField.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react';\r\nimport { Textarea } from './Textarea';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\ninterface TextAreaFieldProps extends ComponentPropsWithoutRef<'textarea'> {\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}\r\n\r\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\r\n  (\r\n    {\r\n      label,\r\n      optional = false,\r\n      required = false,\r\n      hintMessage,\r\n      error = false,\r\n      errorMessage,\r\n      className,\r\n      ...textareaProps\r\n    },\r\n    ref\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=\"flex flex-col gap-1.5\">\r\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\r\n          {label && <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        <div\r\n          className={cn(\r\n            'flex px-4 py-3 border rounded-lg transition-colors overflow-hidden',\r\n            error\r\n              ? 'border-red-600 hover:border-red-700'\r\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'\r\n          )}\r\n        >\r\n          <Textarea\r\n            ref={ref}\r\n            className={cn(\r\n              'paragraph-small-medium w-full text-gray-950 border-none shadow-none focus-visible:ring-0 p-0 resize-none overflow-y-auto field-sizing-fixed! min-h-0! break-words',\r\n              error && 'placeholder:text-red-400',\r\n              className\r\n            )}\r\n            {...textareaProps}\r\n          />\r\n        </div>\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\n\r\nTextAreaField.displayName = 'TextAreaField';\r\n\r\nexport default TextAreaField;\r\n"],"mappings":";AAkCQ,SACY,KADZ;AAhCR,SAAS,kBAAiD;AAC1D,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAWZ,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,UAAM,eAAe,QAAQ,iBAAiB;AAE9C,WACE,qBAAC,SAAI,WAAU,yBACb;AAAA,2BAAC,SAAI,WAAU,qDACZ;AAAA,iBAAS,oBAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,QAChD,YAAY,oBAAC,UAAK,WAAU,iBAAgB,wBAAU;AAAA,QACtD,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,SAC/C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,QACI,wCACA;AAAA,UACN;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA,SAAS;AAAA,gBACT;AAAA,cACF;AAAA,cACC,GAAG;AAAA;AAAA,UACN;AAAA;AAAA,MACF;AAAA,MAEC,gBACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,YAAY,GAAI,wBAAa;AAAA,OAEhF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAE5B,IAAO,wBAAQ;","names":[]}

package/dist/enums/AccountSectionType.mjs

@@ -0,0 +1,11 @@
+var AccountSectionType = /* @__PURE__ */ ((AccountSectionType2) => {
+  AccountSectionType2["MY_PROFILE"] = "my-profile";
+  AccountSectionType2["SECURITY"] = "security";
+  AccountSectionType2["PREFERENCES"] = "preferences";
+  AccountSectionType2["CHANGE_PASSWORD"] = "change-password";
+  return AccountSectionType2;
+})(AccountSectionType || {});
+export {
+  AccountSectionType
+};
+//# sourceMappingURL=AccountSectionType.mjs.map

package/dist/enums/AccountSectionType.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/enums/AccountSectionType.ts"],"sourcesContent":["export enum AccountSectionType {\r\n  MY_PROFILE = 'my-profile',\r\n  SECURITY = 'security',\r\n  PREFERENCES = 'preferences',\r\n  CHANGE_PASSWORD = 'change-password',\r\n}\r\n"],"mappings":"AAAO,IAAK,qBAAL,kBAAKA,wBAAL;AACL,EAAAA,oBAAA,gBAAa;AACb,EAAAA,oBAAA,cAAW;AACX,EAAAA,oBAAA,iBAAc;AACd,EAAAA,oBAAA,qBAAkB;AAJR,SAAAA;AAAA,GAAA;","names":["AccountSectionType"]}

package/dist/hooks/useCountdownTimer.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect, useState, useCallback } from "react";
+function useCountdownTimer({
+  initialSeconds = 59,
+  onExpire
+} = {}) {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isExpired, setIsExpired] = useState(false);
+  useEffect(() => {
+    if (seconds > 0) {
+      const interval = setInterval(() => {
+        setSeconds((prev) => prev - 1);
+      }, 1e3);
+      return () => clearInterval(interval);
+    } else {
+      setIsExpired(true);
+      onExpire?.();
+    }
+  }, [seconds, onExpire]);
+  const reset = useCallback(() => {
+    setSeconds(initialSeconds);
+    setIsExpired(false);
+  }, [initialSeconds]);
+  return { seconds, isExpired, reset };
+}
+export {
+  useCountdownTimer as default
+};
+//# sourceMappingURL=useCountdownTimer.mjs.map

package/dist/hooks/useCountdownTimer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useCountdownTimer.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useEffect, useState, useCallback } from 'react';\r\n\r\ninterface UseCountdownTimerOptions {\r\n  initialSeconds?: number;\r\n  onExpire?: () => void;\r\n}\r\n\r\ninterface UseCountdownTimerReturn {\r\n  seconds: number;\r\n  isExpired: boolean;\r\n  reset: () => void;\r\n}\r\n\r\nexport default function useCountdownTimer({\r\n  initialSeconds = 59,\r\n  onExpire,\r\n}: UseCountdownTimerOptions = {}): UseCountdownTimerReturn {\r\n  const [seconds, setSeconds] = useState(initialSeconds);\r\n  const [isExpired, setIsExpired] = useState(false);\r\n\r\n  useEffect(() => {\r\n    if (seconds > 0) {\r\n      const interval = setInterval(() => {\r\n        setSeconds((prev) => prev - 1);\r\n      }, 1000);\r\n      return () => clearInterval(interval);\r\n    } else {\r\n      setIsExpired(true);\r\n      onExpire?.();\r\n    }\r\n  }, [seconds, onExpire]);\r\n\r\n  const reset = useCallback(() => {\r\n    setSeconds(initialSeconds);\r\n    setIsExpired(false);\r\n  }, [initialSeconds]);\r\n\r\n  return { seconds, isExpired, reset };\r\n}\r\n"],"mappings":";AAEA,SAAS,WAAW,UAAU,mBAAmB;AAalC,SAAR,kBAAmC;AAAA,EACxC,iBAAiB;AAAA,EACjB;AACF,IAA8B,CAAC,GAA4B;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,cAAc;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACd,QAAI,UAAU,GAAG;AACf,YAAM,WAAW,YAAY,MAAM;AACjC,mBAAW,CAAC,SAAS,OAAO,CAAC;AAAA,MAC/B,GAAG,GAAI;AACP,aAAO,MAAM,cAAc,QAAQ;AAAA,IACrC,OAAO;AACL,mBAAa,IAAI;AACjB,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAM,QAAQ,YAAY,MAAM;AAC9B,eAAW,cAAc;AACzB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO,EAAE,SAAS,WAAW,MAAM;AACrC;","names":[]}

package/dist/hooks/useIsMobile.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { useEffect, useState } from "react";
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  return isMobile;
+}
+export {
+  useIsMobile as default
+};
+//# sourceMappingURL=useIsMobile.mjs.map

package/dist/hooks/useIsMobile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useIsMobile.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useEffect, useState } from 'react';\r\n\r\nexport default function useIsMobile() {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => {\r\n      setIsMobile(window.innerWidth < 1024);\r\n    };\r\n\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  return isMobile;\r\n}\r\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAErB,SAAR,cAA+B;AACpC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,kBAAY,OAAO,aAAa,IAAI;AAAA,IACtC;AAEA,gBAAY;AACZ,WAAO,iBAAiB,UAAU,WAAW;AAC7C,WAAO,MAAM,OAAO,oBAAoB,UAAU,WAAW;AAAA,EAC/D,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/hooks/usePasswordVisibility.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { useState, useCallback } from "react";
+function usePasswordVisibility() {
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePassword = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+  return { showPassword, togglePassword };
+}
+export {
+  usePasswordVisibility as default
+};
+//# sourceMappingURL=usePasswordVisibility.mjs.map

package/dist/hooks/usePasswordVisibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePasswordVisibility.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\n\r\nexport default function usePasswordVisibility() {\r\n  const [showPassword, setShowPassword] = useState(false);\r\n\r\n  const togglePassword = useCallback(() => {\r\n    setShowPassword((prev) => !prev);\r\n  }, []);\r\n\r\n  return { showPassword, togglePassword };\r\n}\r\n"],"mappings":";AAEA,SAAS,UAAU,mBAAmB;AAEvB,SAAR,wBAAyC;AAC9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,cAAc,eAAe;AACxC;","names":[]}