@use-stall/ui 0.0.7 → 0.0.9

package/README.md

@@ -2,4 +2,11 @@
 
 ## A collection of UI components based on Shadcnui
 
-A component library for Stall ecosystem based on shadcnui, coss ui, align ui
+A component library for Stall ecosystem based on shadcnui, coss ui, align ui
+
+### Installation
+``` bun install @use-stall/ui ```
+
+Make sure to add the followingline if you are using Tailiwndcss v4
+
+``` @source '../node_modules/@use-stall/ui/dist'; ```

package/dist/index.d.mts

@@ -24,7 +24,6 @@ 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';
@@ -630,7 +629,7 @@ declare const InputOTPSlot: React$1.ForwardRefExoticComponent<Omit<React$1.Detai
 declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
-    removeFocusIndicator?: boolean;
+    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -664,13 +663,6 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
     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> {
@@ -782,4 +774,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, 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 };
+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 };

package/dist/index.d.ts

@@ -24,7 +24,6 @@ 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';
@@ -630,7 +629,7 @@ declare const InputOTPSlot: React$1.ForwardRefExoticComponent<Omit<React$1.Detai
 declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
-    removeFocusIndicator?: boolean;
+    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -664,13 +663,6 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
     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> {
@@ -782,4 +774,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, 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 };
+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 };

package/dist/index.js

@@ -154,7 +154,6 @@ __export(index_exports, {
   InputOTPSlot: () => InputOTPSlot,
   Label: () => Label2,
   MultiSelect: () => MultiSelect,
-  PhoneNumberInput: () => PhoneNumberInput,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
@@ -685,17 +684,17 @@ var React8 = __toESM(require("react"));
 var React6 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Input = React6.forwardRef(
-  ({ className, type, removeFocusIndicator, ...props }, ref) => {
+  ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type,
         className: cn(
-          `flex h-10 w-full rounded-10 border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0
-           file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/30 font-normal
-           focus-visible:outline-hidden focus-visible:border-primary/80 focus-visible:ring-2 focus-visible:ring-ring/30
-           focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50`,
-          removeFocusIndicator && "focus-visible:ring-0 focus:ring-0 focus-visible:ring-offset-0 focus-visible:border-input",
+          `flex h-10 w-full rounded-10 border border-input bg-background px-3 py-2 text-sm
+          font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm
+          file:font-medium placeholder:text-muted-foreground focus-visible:outline-none
+          focus-visible:ring-2 ring-inset focus-visible:ring-ring focus-visible:ring-offset-0
+          focus-visible:border-0 disabled:cursor-not-allowed disabled:opacity-50`,
           className
         ),
         ref,
@@ -1625,8 +1624,8 @@ var ButtonRoot = React12.forwardRef(
             "div",
             {
               className: cn(
-                `size-4 shrink-0 rounded-full border-2 border-background/30
-              border-l-background animate-spin`,
+                `size-4 shrink-0 rounded-full border-2 border-white/30
+               border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2805,42 +2804,13 @@ 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-10 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)(
       Input,
       {
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0! border!",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0! border! bg-main-background",
           className
         ),
         ref,
@@ -2850,50 +2820,6 @@ 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-10 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"));
@@ -3454,7 +3380,7 @@ var Textarea = React31.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-20 w-full rounded-10 border border-input bg-background p-3 text-sm font-normal ring-offset-background placeholder:text-muted-foreground/30 focus-visible:border-primary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-20 w-full rounded-10 border border-input bg-background p-3 text-sm font-normal ring-offset-background placeholder:text-muted-foreground/30 focus-visible:border-primary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
           className
         ),
         ref,
@@ -3747,7 +3673,6 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   InputOTPSlot,
   Label,
   MultiSelect,
-  PhoneNumberInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

package/dist/index.mjs

@@ -462,17 +462,17 @@ import * as React8 from "react";
 import * as React6 from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Input = React6.forwardRef(
-  ({ className, type, removeFocusIndicator, ...props }, ref) => {
+  ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx7(
       "input",
       {
         type,
         className: cn(
-          `flex h-10 w-full rounded-10 border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0
-           file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/30 font-normal
-           focus-visible:outline-hidden focus-visible:border-primary/80 focus-visible:ring-2 focus-visible:ring-ring/30
-           focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50`,
-          removeFocusIndicator && "focus-visible:ring-0 focus:ring-0 focus-visible:ring-offset-0 focus-visible:border-input",
+          `flex h-10 w-full rounded-10 border border-input bg-background px-3 py-2 text-sm
+          font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm
+          file:font-medium placeholder:text-muted-foreground focus-visible:outline-none
+          focus-visible:ring-2 ring-inset focus-visible:ring-ring focus-visible:ring-offset-0
+          focus-visible:border-0 disabled:cursor-not-allowed disabled:opacity-50`,
           className
         ),
         ref,
@@ -1402,8 +1402,8 @@ var ButtonRoot = React12.forwardRef(
             "div",
             {
               className: cn(
-                `size-4 shrink-0 rounded-full border-2 border-background/30
-              border-l-background animate-spin`,
+                `size-4 shrink-0 rounded-full border-2 border-white/30
+               border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2586,42 +2586,13 @@ 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-10 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(
       Input,
       {
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0! border!",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0! border! bg-main-background",
           className
         ),
         ref,
@@ -2631,50 +2602,6 @@ 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-10 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 React25 from "react";
@@ -3235,7 +3162,7 @@ var Textarea = React31.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-20 w-full rounded-10 border border-input bg-background p-3 text-sm font-normal ring-offset-background placeholder:text-muted-foreground/30 focus-visible:border-primary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-20 w-full rounded-10 border border-input bg-background p-3 text-sm font-normal ring-offset-background placeholder:text-muted-foreground/30 focus-visible:border-primary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
           className
         ),
         ref,
@@ -3527,7 +3454,6 @@ export {
   InputOTPSlot,
   Label2 as Label,
   MultiSelect,
-  PhoneNumberInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

package/package.json

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