lfg

components/docs/forms/text-field/text-field-pending-demo.tsx

@@ -3,5 +3,5 @@
 import { TextField } from "ui"
 
 export default function TextFieldPendingDemo() {
-  return <TextField isPending indicatorPlace="suffix" label="Name" />
+  return <TextField isPending label="Name" />
 }

components/ui/badge.tsx

@@ -6,8 +6,9 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 const badgeIntents = {
   primary:
-    "bg-primary/10 dark:bg-primary/15 text-primary dark:text-primary group-hover:bg-primary/15 dark:group-hover:bg-primary/10",
-  secondary: "bg-secondary dark:bg-secondary text-secondary-fg",
+    "bg-primary/10 dark:bg-primary/15 text-primary dark:text-primary group-hover:bg-primary/15 dark:group-hover:bg-primary/20",
+  secondary:
+    "bg-secondary/90 group-hover:bg-secondary dark:bg-secondary/90 dark:group-hover:bg-secondary text-secondary-fg",
   success:
     "bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20",
   info: "bg-info/15 dark:bg-info/15 text-info group-hover:bg-info/15 dark:group-hover:bg-info/10",

components/ui/color-field.tsx

@@ -43,7 +43,7 @@ const ColorField = ({
       aria-label={props["aria-label"] ?? "Color field"}
       className={ctr(
         className,
-        "[&_[data-slot=color-swatch]]:ml-2 group w-full flex flex-col gap-y-1"
+        "[&_[data-slot=color-swatch]]:-ml-0.5 group w-full flex flex-col gap-y-1"
       )}
     >
       {label && <Label>{label}</Label>}
@@ -67,7 +67,7 @@ const ColorField = ({
             </span>
           )}
 
-          <Input className="px-2.5" placeholder={placeholder} />
+          <Input placeholder={placeholder} />
         </div>
         {suffix ? (
           <span data-slot="suffix" className="atrs ml-auto">

components/ui/combo-box.tsx

@@ -81,7 +81,7 @@ const ComboBoxInput = (props: InputProps) => {
   const context = useSlottedContext(ComboBoxContext)!
   return (
     <FieldGroup className="pl-0 relative">
-      <Input {...props} className="pl-2.5" placeholder={props?.placeholder} />
+      <Input {...props} placeholder={props?.placeholder} />
       <Button size="square-petite" appearance="plain" className={chevronButton()}>
         {!context?.inputValue && <IconChevronLgDown className={chevronIcon()} />}
       </Button>

components/ui/field.tsx

@@ -56,7 +56,7 @@ const fieldStyles = tv({
     label: "w-fit cursor-default font-medium text-secondary-fg text-sm",
     fieldError: "text-sm text-danger forced-colors:text-[Mark]",
     input: [
-      "w-full min-w-0 [&::-ms-reveal]:hidden bg-transparent p-2 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm"
+      "w-full min-w-0 [&::-ms-reveal]:hidden bg-transparent py-2 px-2.5 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm"
     ]
   }
 })
@@ -88,7 +88,7 @@ const FieldError = ({ className, ...props }: FieldErrorProps) => {
 
 const fieldGroupStyles = tv({
   base: [
-    "group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-bg transition forced-colors:bg-[Field]"
+    "group [&>[data-slot=icon]]:shrink-0 flex h-10 items-center overflow-hidden rounded-lg border border-input bg-bg transition forced-colors:bg-[Field]"
   ],
   variants: {
     isDisabled: {

components/ui/search-field.tsx

@@ -17,16 +17,11 @@ const searchFieldStyles = tv({
   slots: {
     base: "group flex min-w-10 flex-col gap-1",
     searchIcon:
-      "ml-2 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg/50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]",
+      "ml-2.5 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]",
     clearButton: [
       "mr-1 size-8 text-muted-fg group-empty:invisible pressed:bg-transparent hover:bg-transparent hover:text-fg pressed:text-fg"
     ],
     input: "[&::-webkit-search-cancel-button]:hidden"
-  },
-  variants: {
-    isPending: {
-      true: ""
-    }
   }
 })
 
@@ -60,7 +55,7 @@ const SearchField = ({
         <IconSearch aria-hidden className={searchIcon()} />
         <Input placeholder={placeholder ?? "Search..."} className={input()} />
         {isPending ? (
-          <Loader variant="spin" className="mr-2" />
+          <Loader variant="spin" className="mr-2.5" />
         ) : (
           <Button size="square-petite" appearance="plain" className={clearButton()}>
             <IconX aria-hidden />

components/ui/text-field.tsx

@@ -21,7 +21,6 @@ interface BaseTextFieldProps extends TextFieldPrimitiveProps, FieldProps {
   prefix?: React.ReactNode
   suffix?: React.ReactNode
   isPending?: boolean
-  indicatorPlace?: "prefix" | "suffix"
   className?: string
 }
 
@@ -45,7 +44,6 @@ const TextField = ({
   prefix,
   suffix,
   isPending,
-  indicatorPlace,
   className,
   isRevealable,
   type,
@@ -68,14 +66,12 @@ const TextField = ({
         data-loading={isPending ? "true" : undefined}
         className={fieldGroupPrefixStyles({ className })}
       >
-        {isPending && indicatorPlace === "prefix" ? (
-          <Loader variant="spin" />
-        ) : prefix ? (
+        {prefix ? (
           <span data-slot="prefix" className="atrs x2e2">
             {prefix}
           </span>
         ) : null}
-        <Input className="px-2.5" placeholder={placeholder} />
+        <Input placeholder={placeholder} />
         {isRevealable ? (
           <ButtonPrimitive
             type="button"
@@ -84,7 +80,7 @@ const TextField = ({
           >
             <>{isPasswordVisible ? <IconEyeClosed /> : <IconEye />}</>
           </ButtonPrimitive>
-        ) : isPending && indicatorPlace === "suffix" ? (
+        ) : isPending ? (
           <Loader variant="spin" data-slot="suffix" />
         ) : suffix ? (
           <span data-slot="suffix" className="atrs x2e2">

resources/content/docs/components/forms/text-field.mdx

@@ -35,7 +35,7 @@ Add a button to the suffix by simply including it in the suffix prop. While you
 <How minW72 toUse="forms/text-field/text-field-suffix-button-demo" />
 
 ## Pending
-Activate the loading state on your TextField with the `isPending` prop. Adjust the `loaderPosition` to position the loader as desired.
+Activate the loading state on your TextField with the `isPending` prop.
 <How minW72 toUse="forms/text-field/text-field-pending-demo" />
 
 ## Revealable