@use-stall/ui 0.0.9 → 0.1.1

package/dist/index.d.mts

@@ -24,6 +24,7 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as input_otp from 'input-otp';
+import * as RPNInput from 'react-phone-number-input';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -663,6 +664,13 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
     onSubmit?: (event: React__default.FormEvent) => void;
 }
 
+type PhoneProps = {
+    className?: string;
+    value: string | number;
+    onChange: (value: any) => void;
+} & React__default.ComponentProps<typeof RPNInput.default>;
+declare function PhoneNumberInput({ className, ...props }: PhoneProps): react_jsx_runtime.JSX.Element;
+
 declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface PopoverProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
@@ -774,4 +782,4 @@ declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrim
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, Combobox$1 as ComboboxMulti, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, CopyButton, CountryPicker, Dialog, DialogBackdrop, DialogClose, DialogPopup as DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBackdrop as DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ButtonRoot as FancyButton, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, ButtonIcon as Icon, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MultiSelect, type PasswordInputProps, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, PriceInput, Progress, ButtonRoot as Root, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, type TimelineDotProps, TimelineItem, type TimelineProps, TimelineSeparator, TimelineTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, statusIndicatorVariants, useComboboxFilter, useFormField };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, Combobox$1 as ComboboxMulti, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, CopyButton, CountryPicker, Dialog, DialogBackdrop, DialogClose, DialogPopup as DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBackdrop as DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ButtonRoot as FancyButton, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, ButtonIcon as Icon, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MultiSelect, type PasswordInputProps, PhoneNumberInput, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, PriceInput, Progress, ButtonRoot as Root, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, type TimelineDotProps, TimelineItem, type TimelineProps, TimelineSeparator, TimelineTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, statusIndicatorVariants, useComboboxFilter, useFormField };

package/dist/index.d.ts

@@ -24,6 +24,7 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as input_otp from 'input-otp';
+import * as RPNInput from 'react-phone-number-input';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -663,6 +664,13 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
     onSubmit?: (event: React__default.FormEvent) => void;
 }
 
+type PhoneProps = {
+    className?: string;
+    value: string | number;
+    onChange: (value: any) => void;
+} & React__default.ComponentProps<typeof RPNInput.default>;
+declare function PhoneNumberInput({ className, ...props }: PhoneProps): react_jsx_runtime.JSX.Element;
+
 declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface PopoverProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
@@ -774,4 +782,4 @@ declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrim
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, Combobox$1 as ComboboxMulti, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, CopyButton, CountryPicker, Dialog, DialogBackdrop, DialogClose, DialogPopup as DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBackdrop as DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ButtonRoot as FancyButton, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, ButtonIcon as Icon, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MultiSelect, type PasswordInputProps, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, PriceInput, Progress, ButtonRoot as Root, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, type TimelineDotProps, TimelineItem, type TimelineProps, TimelineSeparator, TimelineTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, statusIndicatorVariants, useComboboxFilter, useFormField };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, Combobox$1 as ComboboxMulti, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, CopyButton, CountryPicker, Dialog, DialogBackdrop, DialogClose, DialogPopup as DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBackdrop as DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ButtonRoot as FancyButton, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, ButtonIcon as Icon, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MultiSelect, type PasswordInputProps, PhoneNumberInput, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, PriceInput, Progress, ButtonRoot as Root, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineDot, type TimelineDotProps, TimelineItem, type TimelineProps, TimelineSeparator, TimelineTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, statusIndicatorVariants, useComboboxFilter, useFormField };

package/dist/index.js

@@ -154,6 +154,7 @@ __export(index_exports, {
   InputOTPSlot: () => InputOTPSlot,
   Label: () => Label2,
   MultiSelect: () => MultiSelect,
+  PhoneNumberInput: () => PhoneNumberInput,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
@@ -1514,7 +1515,7 @@ var fancyButtonVariants = tv({
   slots: {
     root: [
       // base
-      "group relative inline-flex items-center justify-center whitespace-nowrap text-label-sm text-sm outline-none",
+      "group relative inline-flex items-center justify-center whitespace-nowrap text-label-sm text-sm font-medium outline-none",
       "transition duration-200 ease-out cursor-pointer",
       // focus
       "focus:outline-none",
@@ -1624,8 +1625,7 @@ var ButtonRoot = React12.forwardRef(
             "div",
             {
               className: cn(
-                `size-4 shrink-0 rounded-full border-2 border-white/30
-               border-l-white animate-spin`,
+                `size-4 shrink-0 rounded-full border-2 border-white/50 border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2804,6 +2804,35 @@ var RPNInput = __toESM(require("react-phone-number-input"));
 var import_flags = __toESM(require("react-phone-number-input/flags"));
 var import_react_phone_number_input = require("react-phone-number-input");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function PhoneNumberInput({
+  className = "",
+  ...props
+}) {
+  const [error, setError] = (0, import_react5.useState)(null);
+  const handleChange = (newValue) => {
+    if (newValue && !(0, import_react_phone_number_input.isValidPhoneNumber)(newValue)) {
+      setError("Invalid phone number");
+    } else {
+      setError(null);
+    }
+    props.onChange(newValue ?? "");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn(className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    RPNInput.default,
+    {
+      className: cn("flex rounded-md", error && "border border-red-500/70"),
+      international: true,
+      flagComponent: FlagComponent,
+      countrySelectComponent: CountrySelect,
+      inputComponent: PhoneInput,
+      id: "input-46",
+      placeholder: "Enter phone number",
+      ...props,
+      value: props.value,
+      onChange: (e) => handleChange(e ?? "")
+    }
+  ) });
+}
 var PhoneInput = (0, import_react5.forwardRef)(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -2820,6 +2849,53 @@ var PhoneInput = (0, import_react5.forwardRef)(
   }
 );
 PhoneInput.displayName = "PhoneInput";
+var CountrySelect = ({
+  disabled,
+  value,
+  onChange,
+  options: options2
+}) => {
+  const handleSelect = (event) => {
+    onChange(event.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      className: cn(`relative inline-flex items-center self-stretch rounded-s-10 border border-input
+       bg-inherit py-2 pe-2 ps-3 text-muted-foreground transition-shadow focus-within:z-10
+      focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20
+       hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50`),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ChevronDown, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "select",
+          {
+            disabled,
+            value,
+            onChange: handleSelect,
+            className: "absolute inset-0 text-sm opacity-0",
+            "aria-label": "Select country",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "", children: "Select a country" }, "default"),
+              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("option", { value: option.value, children: [
+                option.label,
+                " ",
+                option.value && `+${RPNInput.getCountryCallingCode(option.value)}`
+              ] }, option.value ?? `empty-${i}`))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag = import_flags.default[country];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flag, { title: countryName }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Phone, { size: 16, "aria-hidden": "true" }) });
+};
 
 // src/components/price-input.tsx
 var import_react6 = __toESM(require("react"));
@@ -3673,6 +3749,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   InputOTPSlot,
   Label,
   MultiSelect,
+  PhoneNumberInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

package/dist/index.mjs

@@ -1292,7 +1292,7 @@ var fancyButtonVariants = tv({
   slots: {
     root: [
       // base
-      "group relative inline-flex items-center justify-center whitespace-nowrap text-label-sm text-sm outline-none",
+      "group relative inline-flex items-center justify-center whitespace-nowrap text-label-sm text-sm font-medium outline-none",
       "transition duration-200 ease-out cursor-pointer",
       // focus
       "focus:outline-none",
@@ -1402,8 +1402,7 @@ var ButtonRoot = React12.forwardRef(
             "div",
             {
               className: cn(
-                `size-4 shrink-0 rounded-full border-2 border-white/30
-               border-l-white animate-spin`,
+                `size-4 shrink-0 rounded-full border-2 border-white/50 border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2586,6 +2585,35 @@ import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { isValidPhoneNumber } from "react-phone-number-input";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+function PhoneNumberInput({
+  className = "",
+  ...props
+}) {
+  const [error, setError] = useState3(null);
+  const handleChange = (newValue) => {
+    if (newValue && !isValidPhoneNumber(newValue)) {
+      setError("Invalid phone number");
+    } else {
+      setError(null);
+    }
+    props.onChange(newValue ?? "");
+  };
+  return /* @__PURE__ */ jsx28("div", { className: cn(className), children: /* @__PURE__ */ jsx28(
+    RPNInput.default,
+    {
+      className: cn("flex rounded-md", error && "border border-red-500/70"),
+      international: true,
+      flagComponent: FlagComponent,
+      countrySelectComponent: CountrySelect,
+      inputComponent: PhoneInput,
+      id: "input-46",
+      placeholder: "Enter phone number",
+      ...props,
+      value: props.value,
+      onChange: (e) => handleChange(e ?? "")
+    }
+  ) });
+}
 var PhoneInput = forwardRef16(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx28(
@@ -2602,6 +2630,53 @@ var PhoneInput = forwardRef16(
   }
 );
 PhoneInput.displayName = "PhoneInput";
+var CountrySelect = ({
+  disabled,
+  value,
+  onChange,
+  options: options2
+}) => {
+  const handleSelect = (event) => {
+    onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: cn(`relative inline-flex items-center self-stretch rounded-s-10 border border-input
+       bg-inherit py-2 pe-2 ps-3 text-muted-foreground transition-shadow focus-within:z-10
+      focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20
+       hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50`),
+      children: [
+        /* @__PURE__ */ jsxs18("div", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx28(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground/80", children: /* @__PURE__ */ jsx28(ChevronDown2, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+        ] }),
+        /* @__PURE__ */ jsxs18(
+          "select",
+          {
+            disabled,
+            value,
+            onChange: handleSelect,
+            className: "absolute inset-0 text-sm opacity-0",
+            "aria-label": "Select country",
+            children: [
+              /* @__PURE__ */ jsx28("option", { value: "", children: "Select a country" }, "default"),
+              options2.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs18("option", { value: option.value, children: [
+                option.label,
+                " ",
+                option.value && `+${RPNInput.getCountryCallingCode(option.value)}`
+              ] }, option.value ?? `empty-${i}`))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag = flags[country];
+  return /* @__PURE__ */ jsx28("span", { className: "w-5 overflow-hidden rounded-sm", children: Flag ? /* @__PURE__ */ jsx28(Flag, { title: countryName }) : /* @__PURE__ */ jsx28(Phone, { size: 16, "aria-hidden": "true" }) });
+};
 
 // src/components/price-input.tsx
 import React25 from "react";
@@ -3454,6 +3529,7 @@ export {
   InputOTPSlot,
   Label2 as Label,
   MultiSelect,
+  PhoneNumberInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-stall/ui",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "author": "Stall",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",