@greatapps/common 1.1.138 → 1.1.140

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/Input.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../infra/utils/clsx";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=Input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";AAOI;AAJJ,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,MAAM,GAAkC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import { cn } from "../../../infra/utils/clsx";
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      "data-slot": "input-otp",
+      containerClassName: cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn("flex items-center", className),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(
+        "relative flex h-9 w-9 items-center justify-center border text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+        "border-gray-200 hover:border-gray-400 data-[active=true]:border-gray-950",
+        "data-[active=true]:z-10",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) });
+}
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};
+//# sourceMappingURL=InputOtp.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/InputOtp.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md\",\n        \"border-gray-200 hover:border-gray-400 data-[active=true]:border-gray-950\",\n        \"data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"mappings":";AAiBI,cAiCA,YAjCA;AAbJ,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAEnB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,kBAAkB,MAAM,WAAW,eAAe;AACxD,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI,iBAAiB,MAAM,KAAK,KAAK,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,oBAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,4DAA2D,GAC5E;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,kBAAkB,EAAE,GAAG,MAAM,GAAgC;AACpE,SACE,oBAAC,SAAI,aAAU,uBAAsB,MAAK,aAAa,GAAG,OACxD,8BAAC,aAAU,GACb;AAEJ;","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/RadioGroup.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../../../infra/utils/clsx";
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-gray-300 text-gray-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export {
+  RadioGroup,
+  RadioGroupItem
+};
+//# sourceMappingURL=RadioGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/RadioGroup.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-gray-300 text-gray-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"mappings":";AAcI;AAVJ,YAAY,WAAW;AACvB,YAAY,yBAAyB;AACrC,SAAS,cAAc;AACvB,SAAS,UAAU;AAEnB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,WAAW,cAAc,oBAAoB,KAAK;AAElD,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,oCACvC,8BAAC,UAAO,WAAU,yCAAwC,GAC5D;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,eAAe,cAAc,oBAAoB,KAAK;","names":[]}

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../../../infra/utils/clsx";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "group/data-select border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: icon ?? /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: "\n            size-4 opacity-50 transition-all duration-200\n            group-data-[state=open]/data-select:rotate-180\n            group-data-[state=open]/data-select:opacity-100\n            group-data-[state=open]/data-select:text-gray-950!\n          "
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[1001] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { className: "cursor-pointer", children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};
+//# sourceMappingURL=Select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  icon,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\";\n  icon?: React.ReactNode;\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"group/data-select border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n\n      <SelectPrimitive.Icon asChild>\n        {icon ?? (\n          <ChevronDownIcon\n            className=\"\n            size-4 opacity-50 transition-all duration-200\n            group-data-[state=open]/data-select:rotate-180\n            group-data-[state=open]/data-select:opacity-100\n            group-data-[state=open]/data-select:text-gray-950!\n          \"\n          />\n        )}\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[1001] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText className=\"cursor-pointer\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":"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","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