lfg

irsyadadl · Oct 26, 2024 · c442d79 · c442d79
1 parent 2b962bd
commit c442d79
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/components/ui/color-field.tsx b/components/ui/color-field.tsx
@@ -51,7 +51,11 @@ const ColorField = ({
         data-loading={isLoading ? "true" : undefined}
         className={fieldGroupPrefixStyles()}
       >
-        {prefix ? <span className="atrs isPfx">{prefix}</span> : null}
+        {prefix ? (
+          <span data-slot="prefix" className="atrs">
+            {prefix}
+          </span>
+        ) : null}
         <div className="flex items-center">
           {value && (
             <span>
@@ -65,7 +69,11 @@ const ColorField = ({
 
           <Input className="px-2.5" placeholder={placeholder} />
         </div>
-        {suffix ? <span className="atrs ml-auto isSfx">{suffix}</span> : null}
+        {suffix ? (
+          <span data-slot="suffix" className="atrs ml-auto">
+            {suffix}
+          </span>
+        ) : null}
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>

diff --git a/components/ui/field.tsx b/components/ui/field.tsx
@@ -22,8 +22,6 @@ import { tv } from "tailwind-variants"
 
 import { cr, ctr } from "./primitive"
 
-// primitive styles
-
 interface FieldProps {
   label?: string
   placeholder?: string
@@ -33,7 +31,6 @@ interface FieldProps {
   "aria-labelledby"?: TextFieldPrimitiveProps["aria-labelledby"]
 }
 
-// primitive styles
 const fieldBorderStyles = tv({
   base: "group-focus-within:border-ring/85 forced-colors:border-[Highlight]",
   variants: {
@@ -46,9 +43,10 @@ const fieldBorderStyles = tv({
 const fieldGroupPrefixStyles = tv({
   base: [
     "flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20",
-    "[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center",
-    "[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm",
-    "[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5"
+    "has-[[data-slot=prefix]]:-mx-0.5 has-[[data-slot=suffix]]:-mx-0.5",
+    "[&_button]:h-8 [&_button]:rounded-md [&_button]:px-2.5 [&_button]:before:rounded-[calc(theme(borderRadius.md)-1px)] [&_button]:after:rounded-[calc(theme(borderRadius.md)-1px)] dark:[&_button]:after:rounded-md",
+    "[&>[data-slot=prefix]]:ml-2.5 [&>[data-slot=prefix]]:text-muted-fg [&>[data-slot=prefix]>button]:ml-[-7px]",
+    "[&>[data-slot=suffix]]:mr-2.5 [&>[data-slot=suffix]]:text-muted-fg [&>[data-slot=suffix]>button]:mr-[-7px]"
   ]
 })
 
@@ -90,14 +88,15 @@ 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 disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]",
-    "focus-within:border-ring/85 focus-within:ring-4 focus-within:ring-ring/20",
-    "focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20",
-    "has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg"
+    "group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-bg transition forced-colors:bg-[Field]"
   ],
   variants: {
+    isDisabled: {
+      true: "opacity-50 bg-secondary"
+    },
     isInvalid: {
-      true: "border-danger"
+      false: "focus-within:border-ring/85 focus-within:ring-4 focus-within:ring-ring/20",
+      true: "border-danger focus-within:border-danger focus-within:ring-4 focus-within:ring-danger/20"
     }
   }
 })

diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
@@ -200,11 +200,12 @@ const Section = ({ className, ...props }: React.ComponentProps<"div">) => {
   )
 }
 
-const linkStyles = tv({
+const navItemStyles = tv({
   base: [
     "relative text-sm px-2 flex items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
+    "hover:text-fg focus:text-fg pressed:text-fg focus-visible:outline-1 focus-visible:outline-primary",
     "disabled:opacity-60 disabled:cursor-default",
-    "current:text-fg hover:text-fg focus:text-fg pressed:text-fg focus-visible:outline-1 focus-visible:outline-primary"
+    "[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0"
   ],
   variants: {
     isCurrent: {
@@ -224,7 +225,7 @@ const Item = ({ className, isCurrent, ...props }: ItemProps) => {
       slot="navbar-item"
       aria-current={isCurrent ? "page" : undefined}
       className={cr(className, (className, ...renderProps) =>
-        linkStyles({ ...renderProps, isCurrent, className })
+        navItemStyles({ ...renderProps, isCurrent, className })
       )}
       {...props}
     >

diff --git a/components/ui/text-field.tsx b/components/ui/text-field.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import type { TextInputDOMProps } from "@react-types/shared"
-import { IconEye, IconEyeClosed, IconLoader } from "justd-icons"
+import { IconEye, IconEyeClosed } from "justd-icons"
 import {
   Button as ButtonPrimitive,
   TextField as TextFieldPrimitive,
@@ -69,29 +69,27 @@ const TextField = ({
         className={fieldGroupPrefixStyles({ className })}
       >
         {isPending && indicatorPlace === "prefix" ? (
-          <IconLoader className="animate-spin isPfx" />
+          <Loader data-slot="prefix" variant="spin" />
         ) : prefix ? (
-          <span className="atrs isPfx x2e2">{prefix}</span>
+          <span data-slot="prefix" className="atrs x2e2">
+            {prefix}
+          </span>
         ) : null}
         <Input className="px-2.5" placeholder={placeholder} />
         {isRevealable ? (
           <ButtonPrimitive
             type="button"
             onPress={handleTogglePasswordVisibility}
-            className="atrs relative isSfx x2e2 [&_[data-slot=icon]]:text-muted-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded"
+            className="atrs relative [&>[data-slot=icon]]:text-muted-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary rounded"
           >
-            <>
-              {isPasswordVisible ? (
-                <IconEyeClosed className="transition animate-in" />
-              ) : (
-                <IconEye className="transition animate-in" />
-              )}
-            </>
+            <>{isPasswordVisible ? <IconEyeClosed /> : <IconEye />}</>
           </ButtonPrimitive>
         ) : isPending && indicatorPlace === "suffix" ? (
-          <Loader variant="spin" className="isSfx" />
+          <Loader variant="spin" data-slot="suffix" />
         ) : suffix ? (
-          <span className="atrs isSfx x2e2">{suffix}</span>
+          <span data-slot="suffix" className="atrs x2e2">
+            {suffix}
+          </span>
         ) : null}
       </FieldGroup>
       {description && <Description>{description}</Description>}