@nextui-org/theme 0.0.0-dev-v2-20230415023901 → 0.0.0-dev-v2-20230415210725

package/dist/chunk-2QIDY5NZ.mjs

@@ -0,0 +1,22 @@
+// src/components/user.ts
+import { tv } from "tailwind-variants";
+var user = tv({
+  slots: {
+    base: [
+      "inline-flex items-center justify-center gap-2 rounded-sm",
+      "data-[focus-visible=true]:outline-none",
+      "data-[focus-visible=true]:ring-2",
+      "data-[focus-visible=true]:ring-primary",
+      "data-[focus-visible=true]:ring-offset-2",
+      "data-[focus-visible=true]:ring-offset-background",
+      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+    ],
+    wrapper: "inline-flex flex-col items-start",
+    name: "text-sm text-foreground dark:text-foreground-dark",
+    description: "text-xs text-neutral-500"
+  }
+});
+
+export {
+  user
+};

package/dist/{chunk-TEP7IDHT.mjs → chunk-7GYSEREC.mjs}

@@ -2,7 +2,6 @@ import {
   colorVariants
 } from "./chunk-LGGZKBOO.mjs";
 import {
-  ringClasses,
   translateCenterClasses
 } from "./chunk-INZK6TTL.mjs";
 
@@ -19,7 +18,13 @@ var avatar = tv({
       "overflow-hidden",
       "align-middle",
       "text-white",
-      "z-10"
+      "z-10",
+      "data-[focus-visible=true]:outline-none",
+      "data-[focus-visible=true]:ring-2",
+      "data-[focus-visible=true]:ring-primary",
+      "data-[focus-visible=true]:ring-offset-2",
+      "data-[focus-visible=true]:ring-offset-background",
+      "data-[focus-visible=true]:dark:ring-offset-background-dark"
     ],
     img: [
       "flex",
@@ -120,19 +125,17 @@ var avatar = tv({
         base: "opacity-50"
       }
     },
-    isFocusVisible: {
-      true: {
-        base: [...ringClasses]
-      }
-    },
     isInGroup: {
       true: {
-        base: "-ml-2 hover:-translate-x-3 transition-transform"
+        base: [
+          "-ml-2 data-[hover=true]:-translate-x-3 transition-transform",
+          "data-[focus-visible=true]:-translate-x-3"
+        ]
       }
     },
     isInGridGroup: {
       true: {
-        base: "m-0 hover:translate-x-0"
+        base: "m-0 data-[hover=true]:translate-x-0"
       }
     }
   },
@@ -190,13 +193,6 @@ var avatar = tv({
       class: {
         base: "ring"
       }
-    },
-    {
-      isInGroup: true,
-      isFocusVisible: true,
-      class: {
-        base: "-translate-x-3"
-      }
     }
   ]
 });

package/dist/{chunk-K6HUFGJV.mjs → chunk-ANRX4UF2.mjs}

@@ -1,9 +1,6 @@
 import {
   colorVariants
 } from "./chunk-LGGZKBOO.mjs";
-import {
-  ringClasses
-} from "./chunk-INZK6TTL.mjs";
 
 // src/components/snippet.ts
 import { tv } from "tailwind-variants";
@@ -11,7 +8,15 @@ var snippet = tv({
   slots: {
     base: "inline-flex items-center justify-between space-x-3 rounded-md",
     pre: "bg-transparent text-inherit font-mono whitespace-pre-wrap",
-    copy: "z-10 appearance-none outline-none"
+    copy: [
+      "z-10 appearance-none outline-none rounded-sm",
+      "data-[focus-visible=true]:outline-none",
+      "data-[focus-visible=true]:ring-1",
+      "data-[focus-visible=true]:ring-primary",
+      "data-[focus-visible=true]:ring-offset-2",
+      "data-[focus-visible=true]:ring-offset-transparent",
+      "data-[focus-visible=true]:dark:ring-offset-transparent"
+    ]
   },
   variants: {
     variant: {
@@ -84,17 +89,6 @@ var snippet = tv({
       true: {
         base: "w-full"
       }
-    },
-    isFocusVisible: {
-      true: {
-        copy: [
-          ...ringClasses,
-          "ring-1",
-          "rounded-sm",
-          "ring-offset-transparent",
-          "dark:ring-offset-transparent"
-        ]
-      }
     }
   },
   defaultVariants: {
@@ -102,8 +96,7 @@ var snippet = tv({
     variant: "flat",
     size: "md",
     radius: "lg",
-    fullWidth: false,
-    isFocusVisible: false
+    fullWidth: false
   },
   compoundVariants: [
     {

package/dist/{chunk-PC5X557I.mjs → chunk-DBYBIR6S.mjs}

@@ -1,12 +1,8 @@
-import {
-  ringClasses
-} from "./chunk-INZK6TTL.mjs";
-
 // src/components/input.ts
 import { tv } from "tailwind-variants";
 var input = tv({
   slots: {
-    base: "flex flex-col gap-2",
+    base: "group flex flex-col gap-2",
     label: "block text-sm font-medium text-neutral-600",
     inputWrapper: "relative w-full inline-flex flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex h-full items-center w-full gap-1.5 box-border",
@@ -23,7 +19,13 @@ var input = tv({
       "hover:!opacity-100",
       "cursor-pointer",
       "active:!opacity-70",
-      "rounded-full"
+      "rounded-full",
+      "data-[focus-visible]:outline-none",
+      "data-[focus-visible]:ring-2",
+      "data-[focus-visible]:!ring-primary",
+      "data-[focus-visible]:ring-offset-2",
+      "data-[focus-visible]:ring-offset-background",
+      "data-[focus-visible]:dark:ring-offset-background-dark"
     ],
     description: "text-xs text-neutral-500",
     errorMessage: "text-xs text-danger"
@@ -31,21 +33,25 @@ var input = tv({
   variants: {
     variant: {
       flat: {
-        inputWrapper: ["bg-neutral-100", "hover:bg-neutral-200", "focus-within:!bg-neutral-100"]
+        inputWrapper: [
+          "bg-neutral-100",
+          "data-[hover=true]:bg-neutral-200",
+          "focus-within:!bg-neutral-100"
+        ]
       },
       faded: {
         inputWrapper: [
           "bg-neutral-100",
           "border",
           "border-neutral-200",
-          "hover:border-neutral-400"
+          "data-[hover=true]:border-neutral-400"
         ]
       },
       bordered: {
         inputWrapper: [
           "border-2",
           "border-neutral-200",
-          "hover:border-neutral-400",
+          "data-[hover=true]:border-neutral-400",
           "focus-within:!border-foreground"
         ]
       },
@@ -179,14 +185,6 @@ var input = tv({
         base: "opacity-50 pointer-events-none"
       }
     },
-    isFocusVisible: {
-      true: {}
-    },
-    isClearButtonFocusVisible: {
-      true: {
-        clearButton: [...ringClasses]
-      }
-    },
     isInvalid: {
       true: {
         label: "!text-danger",
@@ -240,7 +238,7 @@ var input = tv({
       class: {
         inputWrapper: [
           "bg-primary-50",
-          "hover:bg-primary-100",
+          "data-[hover=true]:bg-primary-100",
           "text-primary",
           "focus-within:!bg-primary-50",
           "placeholder:text-primary"
@@ -254,7 +252,7 @@ var input = tv({
       class: {
         inputWrapper: [
           "bg-secondary-50",
-          "hover:bg-secondary-100",
+          "data-[hover=true]:bg-secondary-100",
           "text-secondary",
           "focus-within:!bg-secondary-50",
           "placeholder:text-secondary"
@@ -268,7 +266,7 @@ var input = tv({
       class: {
         inputWrapper: [
           "bg-success-50",
-          "hover:bg-success-100",
+          "data-[hover=true]:bg-success-100",
           "text-success",
           "focus-within:!bg-success-50",
           "placeholder:text-success"
@@ -282,7 +280,7 @@ var input = tv({
       class: {
         inputWrapper: [
           "bg-warning-50",
-          "hover:bg-warning-100",
+          "data-[hover=true]:bg-warning-100",
           "text-warning",
           "focus-within:!bg-warning-50",
           "placeholder:text-warning"
@@ -296,7 +294,7 @@ var input = tv({
       class: {
         inputWrapper: [
           "bg-danger-50",
-          "hover:bg-danger-100",
+          "data-[hover=true]:bg-danger-100",
           "text-danger",
           "focus-within:!bg-danger-50",
           "placeholder:text-danger"
@@ -309,7 +307,7 @@ var input = tv({
       color: "primary",
       class: {
         label: "text-primary",
-        inputWrapper: "hover:border-primary focus-within:border-primary"
+        inputWrapper: "data-[hover=true]:border-primary focus-within:border-primary"
       }
     },
     {
@@ -317,7 +315,7 @@ var input = tv({
       color: "secondary",
       class: {
         label: "text-secondary",
-        inputWrapper: "hover:border-secondary focus-within:border-secondary"
+        inputWrapper: "data-[hover=true]:border-secondary focus-within:border-secondary"
       }
     },
     {
@@ -325,7 +323,7 @@ var input = tv({
       color: "success",
       class: {
         label: "text-success",
-        inputWrapper: "hover:border-success focus-within:border-success"
+        inputWrapper: "data-[hover=true]:border-success focus-within:border-success"
       }
     },
     {
@@ -333,7 +331,7 @@ var input = tv({
       color: "warning",
       class: {
         label: "text-warning",
-        inputWrapper: "hover:border-warning focus-within:border-warning"
+        inputWrapper: "data-[hover=true]:border-warning focus-within:border-warning"
       }
     },
     {
@@ -341,7 +339,7 @@ var input = tv({
       color: "danger",
       class: {
         label: "text-danger",
-        inputWrapper: "hover:border-danger focus-within:border-danger"
+        inputWrapper: "data-[hover=true]:border-danger focus-within:border-danger"
       }
     },
     {
@@ -457,17 +455,27 @@ var input = tv({
       }
     },
     {
-      isFocusVisible: true,
       variant: ["flat", "faded"],
       class: {
-        inputWrapper: [...ringClasses]
+        inputWrapper: [
+          "group-data-[focus-visible]:outline-none",
+          "group-data-[focus-visible]:ring-2",
+          "group-data-[focus-visible]:!ring-primary",
+          "group-data-[focus-visible]:ring-offset-2",
+          "group-data-[focus-visible]:ring-offset-background",
+          "group-data-[focus-visible]:dark:ring-offset-background-dark"
+        ]
       }
     },
     {
       isInvalid: true,
       variant: "flat",
       class: {
-        inputWrapper: ["bg-danger-50", "hover:bg-danger-100", "focus-within:!bg-danger-50"]
+        inputWrapper: [
+          "bg-danger-50",
+          "data-[hover=true]:bg-danger-100",
+          "focus-within:!bg-danger-50"
+        ]
       }
     },
     {

package/dist/{chunk-TSETU4MR.mjs → chunk-FZQRP6V7.mjs}

@@ -1,16 +1,13 @@
 import {
   colorVariants
 } from "./chunk-LGGZKBOO.mjs";
-import {
-  ringClasses
-} from "./chunk-INZK6TTL.mjs";
 
 // src/components/pagination.ts
 import { tv } from "tailwind-variants";
 var pagination = tv({
   slots: {
     base: "flex flex-wrap relative items-center gap-1 max-w-fit",
-    item: "",
+    item: [],
     prev: "",
     next: "",
     cursor: [
@@ -26,7 +23,12 @@ var pagination = tv({
   variants: {
     variant: {
       bordered: {
-        item: ["border-1.5", "border-neutral", "bg-transparent", "hover:bg-neutral-100"]
+        item: [
+          "border-1.5",
+          "border-neutral",
+          "bg-transparent",
+          "data-[hover=true]:bg-neutral-100"
+        ]
       },
       light: {
         item: "bg-transparent"
@@ -89,11 +91,6 @@ var pagination = tv({
         base: "opacity-50 pointer-events-none"
       }
     },
-    isFocusVisible: {
-      true: {
-        wrapper: [...ringClasses]
-      }
-    },
     showShadow: {
       true: {}
     },
@@ -300,23 +297,31 @@ var pagination = tv({
         "outline-none",
         "items-center",
         "justify-center",
-        "text-neutral-contrastText"
+        "text-neutral-contrastText",
+        "data-[focus-visible=true]:outline-none",
+        "data-[focus-visible=true]:ring-2",
+        "data-[focus-visible=true]:ring-primary",
+        "data-[focus-visible=true]:ring-offset-2",
+        "data-[focus-visible=true]:ring-offset-background",
+        "data-[focus-visible=true]:dark:ring-offset-background-dark",
+        "data-[disabled=true]:opacity-50",
+        "data-[disabled=true]:pointer-events-none"
       ]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "flat",
-      class: ["bg-neutral-100", "hover:bg-neutral-200", "active:bg-neutral-300"]
+      class: ["bg-neutral-100", "data-[hover=true]:bg-neutral-200", "active:bg-neutral-300"]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "faded",
-      class: ["bg-neutral-100", "hover:bg-neutral-200", "active:bg-neutral-300"]
+      class: ["bg-neutral-100", "data-[hover=true]:bg-neutral-200", "active:bg-neutral-300"]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "light",
-      class: ["hover:bg-neutral-100", "active:bg-neutral-200"]
+      class: ["data-[hover=true]:bg-neutral-100", "active:bg-neutral-200"]
     },
     {
       slots: ["item", "cursor", "prev", "next"],