@use-stall/ui 0.0.8 → 0.1.0

package/dist/index.d.mts

@@ -630,7 +630,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>>;
 
@@ -667,7 +667,7 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
 type PhoneProps = {
     className?: string;
     value: string | number;
-    onChange: (value: string | number) => void;
+    onChange: (value: any) => void;
 } & React__default.ComponentProps<typeof RPNInput.default>;
 declare function PhoneNumberInput({ className, ...props }: PhoneProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -630,7 +630,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>>;
 
@@ -667,7 +667,7 @@ interface PasswordInputProps extends React__default.InputHTMLAttributes<HTMLInpu
 type PhoneProps = {
     className?: string;
     value: string | number;
-    onChange: (value: string | number) => void;
+    onChange: (value: any) => void;
 } & React__default.ComponentProps<typeof RPNInput.default>;
 declare function PhoneNumberInput({ className, ...props }: PhoneProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -685,17 +685,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,
@@ -1626,7 +1626,7 @@ var ButtonRoot = React12.forwardRef(
             {
               className: cn(
                 `size-4 shrink-0 rounded-full border-2 border-white/30
-              border-l-white animate-spin`,
+               border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2818,10 +2818,10 @@ function PhoneNumberInput({
     }
     props.onChange(newValue ?? "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn(className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     RPNInput.default,
     {
-      className: cn("flex rounded-10 shadow-xs", error && "border border-red-500/70"),
+      className: cn("flex rounded-md", error && "border border-red-500/70"),
       international: true,
       flagComponent: FlagComponent,
       countrySelectComponent: CountrySelect,
@@ -2840,7 +2840,7 @@ var PhoneInput = (0, import_react5.forwardRef)(
       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,
@@ -2862,7 +2862,10 @@ var CountrySelect = ({
   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",
+      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" }),
@@ -3454,7 +3457,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,

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,
@@ -1403,7 +1403,7 @@ var ButtonRoot = React12.forwardRef(
             {
               className: cn(
                 `size-4 shrink-0 rounded-full border-2 border-white/30
-              border-l-white animate-spin`,
+               border-l-white animate-spin`,
                 {
                   "border-primary/30 border-l-primary": ![
                     "primary",
@@ -2599,10 +2599,10 @@ function PhoneNumberInput({
     }
     props.onChange(newValue ?? "");
   };
-  return /* @__PURE__ */ jsx28("div", { className, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx28("div", { className: cn(className), children: /* @__PURE__ */ jsx28(
     RPNInput.default,
     {
-      className: cn("flex rounded-10 shadow-xs", error && "border border-red-500/70"),
+      className: cn("flex rounded-md", error && "border border-red-500/70"),
       international: true,
       flagComponent: FlagComponent,
       countrySelectComponent: CountrySelect,
@@ -2621,7 +2621,7 @@ var PhoneInput = forwardRef16(
       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,
@@ -2643,7 +2643,10 @@ var CountrySelect = ({
   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",
+      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" }),
@@ -3235,7 +3238,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,

package/package.json

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