v2.8.2

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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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-hidden",
+      "outline-solid outline-transparent",
       "rounded-none",
       "bg-transparent",
       "text-default-700",

apps/docs/components/docs/components/code-demo/parse-dependencies.ts

@@ -53,5 +53,5 @@ export const parseDependencies = (content: string) => {
 
 const fixedVersions = {
   "@internationalized/date": "3.8.2",
-  "@react-aria/i18n": "3.12.10",
+  "@react-aria/i18n": "3.12.11",
 };

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-hidden w-full tap-highlight-transparent",
+        "flex flex-col outline-solid outline-transparent 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-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-solid outline-transparent 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent 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-hidden",
+      "group-data-[focus-visible=true]:outline-solid outline-transparent",
       "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-hidden transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent 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-hidden transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent 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-hidden">
+                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
                           <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-hidden",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
               // 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

apps/docs/config/github-info.json

@@ -1,6 +1,6 @@
 {
-  "stars": { "raw": 24825, "formatted": "24.8K" },
-  "forks": 1838,
-  "subscribers": 89,
-  "openIssues": 246
+  "stars": { "raw": 24951, "formatted": "25K" },
+  "forks": 1852,
+  "subscribers": 90,
+  "openIssues": 242
 }

apps/docs/config/routes.json

@@ -34,7 +34,8 @@
           "key": "routing",
           "title": "Routing",
           "keywords": "client side routing, routing, browser routing, heroui, next.js router, react router, remix router",
-          "path": "/docs/guide/routing.mdx"
+          "path": "/docs/guide/routing.mdx",
+          "updated": true
         },
         {
           "key": "forms",