@greatapps/common 1.1.429 → 1.1.430

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 { IconLock, IconEye, IconEyeOff } from "@tabler/icons-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 ? IconLock : LeftIcon;
+    const FinalRightIcon = isPasswordField ? !showPassword ? IconEyeOff : IconEye : 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';\n\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { IconLock, IconEye, IconEyeOff } from '@tabler/icons-react';\nimport type { TablerIcon } from '@tabler/icons-react';\nimport { Input } from './Input';\nimport { cn } from '../../../infra/utils/clsx';\n\ntype FormFieldSize = 'default' | 'large';\n\ninterface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  leftIcon?: TablerIcon;\n  rightIcon?: TablerIcon;\n  rightIconColor?: string;\n  hintMessage?: string;\n  classnameContainer?: string;\n  size?: FormFieldSize;\n  error?: boolean;\n  errorMessage?: string;\n  showCharCount?: boolean;\n  showPassword?: boolean;\n  onTogglePassword?: () => void;\n}\n\nexport const FormField = forwardRef<HTMLInputElement, FormFieldProps>(\n  (\n    {\n      label,\n      optional = false,\n      required = false,\n      leftIcon: LeftIcon,\n      rightIcon: RightIcon,\n      rightIconColor = 'var(--color-gray-400)',\n      hintMessage,\n      size = 'default',\n      type = 'text',\n      error = false,\n      errorMessage,\n      className,\n      classnameContainer,\n      showCharCount = false,\n      showPassword = false,\n      onTogglePassword,\n      ...inputProps\n    },\n    ref\n  ) => {\n    const isPasswordField = type === 'password';\n    const inputType = isPasswordField && showPassword ? 'text' : type;\n    const containerHeight = size === 'large' ? 'h-12' : 'h-10';\n\n    const FinalLeftIcon = isPasswordField ? IconLock : LeftIcon;\n    const FinalRightIcon = isPasswordField ? (!showPassword ? IconEyeOff : IconEye) : RightIcon;\n\n    const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n    const messageColor = error ? 'text-red-600' : 'text-gray-600';\n\n    const currentLength = typeof inputProps.value === 'string' ? inputProps.value.length : 0;\n    const shouldShowCharCount = showCharCount && inputProps.maxLength;\n\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold truncate\">\n          {label && <span className=\"text-gray-600\">{label}</span>}\n          {optional && <span className=\"text-gray-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n\n        <div\n          className={cn(\n            'flex gap-2 px-4 items-center border rounded-lg transition-color',\n            containerHeight,\n            classnameContainer,\n            error\n              ? 'border-red-600 hover:border-red-700'\n              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'\n          )}\n        >\n          {FinalLeftIcon && <FinalLeftIcon size={20} className=\"text-gray-400\" />}\n\n          <Input\n            ref={ref}\n            type={inputType}\n            className={cn(\n              'paragraph-small-medium w-full h-full text-gray-950',\n              error && 'placeholder:text-red-400',\n              className\n            )}\n            {...inputProps}\n          />\n\n          {FinalRightIcon && (\n            <button\n              type=\"button\"\n              onClick={isPasswordField ? onTogglePassword : undefined}\n              className={cn(\n                'flex items-center justify-center',\n                isPasswordField && 'cursor-pointer hover:opacity-70 transition-opacity'\n              )}\n              aria-label={\n                isPasswordField ? (showPassword ? 'Ocultar senha' : 'Mostrar senha') : undefined\n              }\n            >\n              <FinalRightIcon\n                size={20}\n                color={isPasswordField ? 'var(--color-gray-950)' : rightIconColor}\n              />\n            </button>\n          )}\n        </div>\n\n        {finalMessage && (\n          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>\n        )}\n\n        {shouldShowCharCount && (\n          <span className=\"paragraph-xsmall-medium text-gray-600\">\n            {currentLength}/{inputProps.maxLength}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nFormField.displayName = 'FormField';\n\nexport default FormField;\n"],"mappings":";AAiEQ,SACY,KADZ;AA/DR,SAAS,kBAAiD;AAC1D,SAAS,UAAU,SAAS,kBAAkB;AAE9C,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,WAAW;AACnD,UAAM,iBAAiB,kBAAmB,CAAC,eAAe,aAAa,UAAW;AAElF,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 disabled:opacity-50 disabled:placeholder:opacity-50",
+        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 disabled:opacity-50 disabled:placeholder:opacity-50\",\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 { IconMinus } from "@tabler/icons-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(IconMinus, {}) });
+}
+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 { IconMinus } from '@tabler/icons-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      <IconMinus />\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,176 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { AsYouType } from "libphonenumber-js";
+import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from "@greatapps/common";
+import { IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { COUNTRIES, flagUrl, parsePhoneValue } from "../../../utils/countries";
+function formatNational(digits, iso) {
+  const raw = digits.replace(/\D/g, "");
+  if (!raw) return "";
+  return new AsYouType(iso).input(raw);
+}
+function PhoneInput({
+  value,
+  onChange,
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder,
+  disabled = false,
+  classnameContainer,
+  className
+}) {
+  const parsed = parsePhoneValue(value ?? "");
+  const [selectedCountry, setSelectedCountry] = useState(parsed.country);
+  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const prevValueRef = useRef(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      const p = parsePhoneValue(value ?? "");
+      setSelectedCountry(p.country);
+      setPhoneNumber(formatNational(p.number, p.country.iso));
+    }
+  }, [value]);
+  const emit = (country, number) => {
+    onChange?.(`${country.dial} ${number}`);
+  };
+  const handleCountrySelect = (country) => {
+    const reformatted = formatNational(phoneNumber, country.iso);
+    setSelectedCountry(country);
+    setPhoneNumber(reformatted);
+    setOpen(false);
+    setSearch("");
+    emit(country, reformatted);
+  };
+  const handleNumberChange = (e) => {
+    const rawInput = e.target.value;
+    const digits = rawInput.replace(/\D/g, "");
+    if (digits.length > 15) return;
+    const cursorPos = e.target.selectionStart ?? rawInput.length;
+    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, "").length;
+    const formatted = formatNational(rawInput, selectedCountry.iso);
+    setPhoneNumber(formatted);
+    emit(selectedCountry, formatted);
+    requestAnimationFrame(() => {
+      if (!inputRef.current) return;
+      let digitCount = 0;
+      let newPos = formatted.length;
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            newPos = i + 1;
+            break;
+          }
+        }
+      }
+      inputRef.current.setSelectionRange(newPos, newPos);
+    });
+  };
+  const filtered = COUNTRIES.filter(
+    (c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.dial.includes(search) || c.iso.toLowerCase().includes(search.toLowerCase())
+  );
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const showMessage = finalMessage && finalMessage.trim() !== "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 paragraph-xsmall-semibold", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600", children: label }),
+      optional && /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "(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-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950",
+          disabled && "cursor-not-allowed",
+          classnameContainer
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none",
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx("img", { src: flagUrl(selectedCountry.iso), alt: selectedCountry.iso, className: "w-5 h-5 rounded-full" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: selectedCountry.dial }),
+                  /* @__PURE__ */ jsx(IconChevronDown, { size: 14, className: cn("text-zinc-500 transition-transform duration-200", open && "rotate-180") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 p-0 z-[1010]", align: "start", side: "top", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 border-b border-zinc-100", children: [
+                /* @__PURE__ */ jsx(IconSearch, { size: 14, className: "text-zinc-400 shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "flex-1 text-sm outline-none placeholder:text-zinc-400",
+                    placeholder: "Buscar pa\xEDs...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto overscroll-contain", onTouchMove: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), children: [
+                filtered.map((country) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors",
+                      selectedCountry.iso === country.iso && "bg-zinc-100"
+                    ),
+                    onClick: () => handleCountrySelect(country),
+                    children: [
+                      /* @__PURE__ */ jsx("img", { src: flagUrl(country.iso), alt: country.iso, className: "w-5 h-5 rounded-full shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950 flex-1 truncate", children: country.name }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500 shrink-0", children: country.dial })
+                    ]
+                  },
+                  country.iso
+                )),
+                filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-500 p-3 text-center", children: "Nenhum pa\xEDs encontrado" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "tel",
+              value: phoneNumber,
+              onChange: handleNumberChange,
+              placeholder,
+              disabled,
+              className: cn(
+                "paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
+                disabled && "cursor-not-allowed",
+                className
+              )
+            }
+          )
+        ]
+      }
+    ),
+    showMessage && /* @__PURE__ */ jsx("span", { className: cn("paragraph-xsmall-medium", error ? "text-red-600" : "text-zinc-600"), children: finalMessage })
+  ] });
+}
+export {
+  PhoneInput 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';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const digits = rawInput.replace(/\\D/g, '');\n    if (digits.length > 15) return;\n\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0 z-[1010]\" align=\"start\" side=\"top\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder=\"Buscar país...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">Nenhum país encontrado</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/form/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 { IconCircle } from "@tabler/icons-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(IconCircle, { 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 { IconCircle } from '@tabler/icons-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        <IconCircle 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,kBAAkB;AAC3B,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,cAAW,WAAU,yCAAwC,GAChE;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 { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-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(
+          IconChevronDown,
+          {
+            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(IconCheck, { 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(IconChevronUp, { 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(IconChevronDown, { className: "size-4" })
+    }
+  );
+}
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};
+//# sourceMappingURL=Select.mjs.map