@use-stall/ui 0.0.1 → 0.0.3

package/dist/index.d.mts

@@ -25,6 +25,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';
@@ -632,10 +633,10 @@ declare const InputOTPSlot: React$1.ForwardRefExoticComponent<Omit<React$1.Detai
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface InputProps$1 extends React$1.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
     removeFocusIndicator?: boolean;
 }
-declare const Input: React$1.ForwardRefExoticComponent<InputProps$1 & React$1.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
@@ -662,11 +663,18 @@ declare const MultiSelect: {
     displayName: string;
 };
 
-interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     showStrength?: boolean;
     onSubmit?: (event: React__default.FormEvent) => void;
 }
 
+type PhoneProps = {
+    className?: string;
+    value: string | number;
+    onChange: (value: string | number) => 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> {
@@ -767,4 +775,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, type InputProps$1 as BaseInputProps, 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 InputProps as PasswordInputProps, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, 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, tv, 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, 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, tv, useComboboxFilter, useFormField };

package/dist/index.d.ts

@@ -25,6 +25,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';
@@ -632,10 +633,10 @@ declare const InputOTPSlot: React$1.ForwardRefExoticComponent<Omit<React$1.Detai
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface InputProps$1 extends React$1.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
     removeFocusIndicator?: boolean;
 }
-declare const Input: React$1.ForwardRefExoticComponent<InputProps$1 & React$1.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
@@ -662,11 +663,18 @@ declare const MultiSelect: {
     displayName: string;
 };
 
-interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     showStrength?: boolean;
     onSubmit?: (event: React__default.FormEvent) => void;
 }
 
+type PhoneProps = {
+    className?: string;
+    value: string | number;
+    onChange: (value: string | number) => 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> {
@@ -767,4 +775,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, type InputProps$1 as BaseInputProps, 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 InputProps as PasswordInputProps, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicComponentPropsWithRef, type PolymorphicRef, Popover, PopoverContent, PopoverTrigger, 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, tv, 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, 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, tv, 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,
@@ -2811,6 +2812,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, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    RPNInput.default,
+    {
+      className: cn("flex rounded-md shadow-xs", 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)(
@@ -2827,6 +2857,50 @@ 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: "relative inline-flex items-center self-stretch rounded-s-md border border-input\n       bg-background py-2 pe-2 ps-3 text-muted-foreground transition-shadow focus-within:z-10\n      focus-within:border-ring focus-within:outline-hidden focus-within:ring-[3px] focus-within:ring-ring/20\n       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"));
@@ -3678,6 +3752,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   InputOTPSlot,
   Label,
   MultiSelect,
+  PhoneNumberInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

package/dist/index.mjs

@@ -2593,6 +2593,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, children: /* @__PURE__ */ jsx28(
+    RPNInput.default,
+    {
+      className: cn("flex rounded-md shadow-xs", 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(
@@ -2609,6 +2638,50 @@ 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: "relative inline-flex items-center self-stretch rounded-s-md border border-input\n       bg-background py-2 pe-2 ps-3 text-muted-foreground transition-shadow focus-within:z-10\n      focus-within:border-ring focus-within:outline-hidden focus-within:ring-[3px] focus-within:ring-ring/20\n       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 React26 from "react";
@@ -3459,6 +3532,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.1",
+  "version": "0.0.3",
   "author": "Stall",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",