@qodo/design-system 0.20.1 → 0.20.2

package/dist/index.esm.js

@@ -3839,11 +3839,11 @@ const jv = [
 );
 mt.displayName = "Button";
 const Pv = Dt(
-  "qodo qodo-input file:text-foreground placeholder:text-purple-muted-400 selection:bg-primary selection:text-primary-foreground border-input-neutral-idle flex h-9 w-full min-w-0 rounded-md border bg-purple-muted-900 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-none focus-visible:ring-none aria-invalid:border-red-600 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:bg-purple-muted-700 disabled:border-purple-muted-500 disabled:text-purple-muted-400 read-only:bg-purple-muted-700 read-only:border-purple-muted-400 read-only:cursor-default read-only:text-[--var(text-input-neutral-idle)] md:text-sm dark:border-input-neutral-idle dark:bg-purple-muted-900 dark:text-foreground dark:placeholder:text-[var(--color-purple-muted-400)] [:not(:placeholder-shown)]:bg-purple-muted-700",
+  "qodo qodo-input file:text-foreground placeholder:text-purple-muted-400 selection:bg-primary selection:text-primary-foreground border-input-neutral-idle flex h-9 w-full min-w-0 rounded-md border bg-purple-muted-900 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-none focus-visible:ring-none aria-invalid:border-red-600 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:bg-[var(--fill-input-neutral-idle)] disabled:border-purple-muted-500 disabled:text-purple-muted-400 read-only:cursor-default md:text-sm dark:border-input-neutral-idle dark:bg-purple-muted-900 dark:text-foreground dark:placeholder:text-[var(--color-purple-muted-400)] [:not(:placeholder-shown)]:bg-purple-muted-700 [&[readonly]]:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:border-0 [&[readonly]]:text-[var(--text-input-neutral-idle)] [&[readonly]]:hover:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:hover:border-[var(--border-input-neutral-idle)] [&[readonly]]:focus:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:focus:border-[var(--border-input-neutral-idle)] [&[readonly]]:focus-visible:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:focus-visible:border-[var(--border-input-neutral-idle)] [&[readonly][disabled]]:opacity-100 [&[readonly][disabled]]:cursor-default [&[readonly][disabled]]:bg-[var(--fill-input-neutral-idle)] [&[readonly][disabled]]:border-0 [&[readonly][disabled]]:text-[var(--text-input-neutral-idle)] [&[readonly][disabled]]:hover:bg-[var(--fill-input-neutral-idle)] [&[readonly][disabled]]:hover:border-0 [&[readonly][disabled]]:focus:bg-[var(--fill-input-neutral-idle)] [&[readonly][disabled]]:focus:border-0 [&[readonly][disabled]]:focus-visible:bg-[var(--fill-input-neutral-idle)] [&[readonly][disabled]]:focus-visible:border-0",
   {
     variants: {
       variant: {
-        default: "dark:focus-visible:bg-fill-input-neutral-idle dark:hover:bg-purple-muted-700 border-purple-muted-600 hover:bg-fill-input-neutral-hover focus:bg-purple-muted-700 focus:border-purple-muted-600 focus-visible:ring-none focus-visible:ring-none",
+        default: "dark:focus-visible:bg-fill-input-neutral-idle dark:hover:bg-purple-muted-700 border-purple-muted-600 hover:bg-fill-input-neutral-hover focus:bg-purple-muted-700 focus:border-purple-muted-600 focus-visible:ring-none focus-visible:ring-none [&[readonly]]:hover:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:hover:border-0 [&[readonly]]:focus:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:focus:border-0 [&[readonly]]:focus-visible:bg-[var(--fill-input-neutral-idle)] [&[readonly]]:focus-visible:border-0",
         secondary: "bg-secondary border-secondary text-secondary-foreground placeholder:text-color-purple-muted-400 dark:bg-secondary dark:border-secondary dark:text-secondary-foreground dark:placeholder:text-purple-muted-400",
         accent: "bg-accent border-accent text-accent-foreground placeholder:text-color-purple-muted-400 dark:bg-accent dark:border-accent dark:text-accent-foreground dark:placeholder:text-purple-muted-400",
         success: "bg-success border-success text-success-foreground placeholder:text-success-foreground/70 dark:bg-success dark:border-success dark:text-success-foreground dark:placeholder:text-success-foreground/70",
@@ -11013,7 +11013,7 @@ function hC({
     {
       "data-slot": "form-label",
       className: k(
-        "data-[error=true]:text-destructive font-normal text-sm",
+        "data-[error=true]:text-destructive font-[400] uppercase font-mono text-xs leading-[1.4] text-[var(--text-bg-neutral-mid)] [&_span]:text-[var(--text-bg-neutral-mid)]",
         e
       ),
       htmlFor: r,
@@ -11912,8 +11912,9 @@ function u1({ className: e, rows: t, ...r }) {
       rows: t,
       className: k(
         "qodo qodo-textarea border-input px-3 py-2 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20",
-        "dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-transparent",
-        "placeholder:text-purple-muted-400 text-purple-muted-300 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-purple-muted-700 disabled:border-purple-muted-500 disabled:text-purple-muted-400 read-only:bg-purple-muted-700 read-only:border-purple-muted-400 read-only:cursor-default read-only:text-purple-muted-200 md:text-sm",
+        "dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-[var(--fill-input-neutral-idle)] flex min-h-16 w-full rounded-md border bg-transparent",
+        "border-[var(--border-interactive-neutral-idle)] shadow-none",
+        "placeholder:text-purple-muted-400 text-purple-muted-300 outline-none focus-visible:ring-0 selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-purple-muted-700 disabled:border-purple-muted-500 disabled:text-purple-muted-400 read-only:bg-purple-muted-700 read-only:border-purple-muted-400 read-only:cursor-default read-only:text-purple-muted-200 md:text-sm",
         { "field-sizing-content": !t },
         e
       ),
@@ -11931,7 +11932,7 @@ const f1 = L.forwardRef(
         ref: n,
         className: k(
           {
-            "font-plex-mono text-sm leading-relaxed rounded dark:bg-fill-input-neutral-idle px-3 py-2 border-0": e === "code"
+            "font-plex-mono text-sm leading-[1.4] rounded dark:bg-fill-input-neutral-idle px-3 py-2 [&[readonly]]:text-[var(--text-input-neutral-placeholder)] [&[readonly]]:border [&[readonly]]:border-[var(--border-input-neutral-idle)] [&[readonly]]:bg-[var(--fill-input-neutral-idle)]": e === "code"
           },
           t
         )
@@ -12845,7 +12846,7 @@ function rE({
           variant: m,
           size: "md",
           className: k(
-            "text-[var(--text-bg-neutral-mid)]",
+            "text-[var(--text-input-neutral-idle)]",
             {
               "text-[var(--text-input-neutral-disabled)]": n
             },