v2.8.1

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -467,7 +467,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/app/examples/table/use-case/page.tsx

@@ -459,7 +459,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/components/cmdk.tsx

@@ -63,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "rounded-none",
       "bg-transparent",
       "text-default-700",

apps/docs/components/docs/sidebar.tsx

@@ -196,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
+        "flex flex-col outline-hidden w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,

apps/docs/components/featurebase/fb-roadmap-link.tsx

@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
       <div className={clsx("relative", innerClassName)}>
         Roadmap
         <Icon
-          className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
           icon={arrowRightUpIcon}
           width={10}
         />

apps/docs/components/heroui-chat-banner.tsx

@@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
             HeroUI Chat
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/components/marketing/custom-themes/styles.ts

@@ -59,7 +59,7 @@ export const shopCartStyles = tv({
       "text-sm",
       "rounded-full",
       // focus ring
-      "group-data-[focus-visible=true]:outline-solid outline-transparent",
+      "group-data-[focus-visible=true]:outline-hidden",
       "group-data-[focus-visible=true]:ring-2",
       "group-data-[focus-visible=true]:ring-focus",
       "group-data-[focus-visible=true]:ring-offset-2",

apps/docs/components/marketing/hero/hero.tsx

@@ -67,7 +67,7 @@ export const Hero = () => {
             color="primary"
             endContent={
               <ArrowRightIcon
-                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                 strokeWidth={2}
               />
             }

apps/docs/components/marketing/install-banner.tsx

@@ -66,7 +66,7 @@ export const InstallBanner = () => {
               color="secondary"
               endContent={
                 <ArrowRightIcon
-                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                   strokeWidth={2}
                 />
               }

apps/docs/components/mdx-components.tsx

@@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
                     {/* Mobile popover */}
                     <Components.Popover placement="top">
                       <Components.PopoverTrigger>
-                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
+                        <button className="flex items-center gap-1 sm:hidden outline-hidden">
                           <InfoCircle className="text-default-400" size={16} />
                         </button>
                       </Components.PopoverTrigger>

apps/docs/components/navbar.tsx

@@ -227,7 +227,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
         <NavbarItem className="flex h-full items-center">
           <button
             className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
               // focus ring
               ...dataFocusVisibleClasses,
             )}

apps/docs/components/ph-banner.tsx

@@ -97,7 +97,7 @@ export const PhBanner = () => {
             Get 30% off
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/components/pro-banner.tsx

@@ -105,7 +105,7 @@ export const ProBanner = () => {
             HeroUI Pro
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx

@@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },

apps/docs/content/components/checkbox/custom-implementation.raw.jsx

@@ -40,7 +40,7 @@ export default function App() {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },

apps/docs/content/components/dropdown/custom-items-styles.raw.jsx

@@ -99,7 +99,7 @@ export default function App() {
             className="cursor-default"
             endContent={
               <select
-                className="z-10 outline-solid outline-transparent w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
+                className="z-10 outline-hidden w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
                 id="theme"
                 name="theme"
               >

apps/docs/content/components/input/password.raw.jsx

@@ -71,7 +71,7 @@ export default function App() {
       endContent={
         <button
           aria-label="toggle password visibility"
-          className="focus:outline-solid outline-transparent"
+          className="focus:outline-hidden"
           type="button"
           onClick={toggleVisibility}
         >

apps/docs/content/components/input/start-end-content.raw.jsx

@@ -110,7 +110,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 id="currency"
                 name="currency"
               >

apps/docs/content/components/number-input/start-end-content.raw.jsx

@@ -21,7 +21,7 @@ export default function App() {
               </label>
               <select
                 aria-label="Select currency"
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 defaultValue="USD"
                 id="currency"
                 name="currency"

apps/docs/content/components/slider/render-value.raw.jsx

@@ -31,7 +31,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e) => {

apps/docs/content/components/slider/render-value.raw.tsx

@@ -34,7 +34,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

apps/docs/content/components/table/custom-styles.raw.jsx

@@ -554,7 +554,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/content/components/table/custom-styles.raw.tsx

@@ -566,7 +566,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/content/components/table/use-case.raw.jsx

@@ -550,7 +550,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/content/components/table/use-case.raw.tsx

@@ -563,7 +563,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @heroui/autocomplete
 
+## 2.3.25
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/button@2.2.23
+  - @heroui/form@2.1.23
+  - @heroui/input@2.4.24
+  - @heroui/listbox@2.3.22
+  - @heroui/popover@2.3.23
+  - @heroui/scroll-shadow@2.3.16
+
 ## 2.3.24
 
 ### Patch Changes

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.24",
+  "version": "2.3.25",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @heroui/checkbox
 
+## 2.3.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.3.22
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/checkbox",
-  "version": "2.3.22",
+  "version": "2.3.23",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/date-input/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @heroui/date-input
 
+## 2.3.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.3.22
 
 ### Patch Changes

packages/components/date-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/date-input",
-  "version": "2.3.22",
+  "version": "2.3.23",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"

packages/components/date-picker/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @heroui/date-picker
 
+## 2.3.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/button@2.2.23
+  - @heroui/calendar@2.2.23
+  - @heroui/date-input@2.3.23
+  - @heroui/form@2.1.23
+  - @heroui/popover@2.3.23
+
 ## 2.3.23
 
 ### Patch Changes

packages/components/date-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/date-picker",
-  "version": "2.3.23",
+  "version": "2.3.24",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"

packages/components/form/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @heroui/form
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies [[`8ddc6e7`](https://github.com/heroui-inc/heroui/commit/8ddc6e795e56b7ecaac94bb0bbf99a7147dc027b)]:
+  - @heroui/theme@2.4.19
+
 ## 2.1.22
 
 ### Patch Changes

packages/components/form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/form",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
   "keywords": [
     "form"

packages/components/input-otp/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @heroui/input-otp
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.1.22
 
 ### Patch Changes

packages/components/input-otp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/input-otp",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "",
   "keywords": [
     "input-otp"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @heroui/input
 
+## 2.4.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @heroui/form@2.1.23
+
 ## 2.4.23
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/input",
-  "version": "2.4.23",
+  "version": "2.4.24",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"

packages/components/input/stories/input.stories.tsx

@@ -300,7 +300,7 @@ const StartAndEndContentTemplate = (args) => (
             Currency
           </label>
           <select
-            className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
+            className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
             id="currency"
             name="currency"
           >