Merge branch 'canary' into pr/4565

heroui-inc · Jan 31, 2025 · 7e6408a · 7e6408a
2 parents 63fff5c + 06d6f08
commit 7e6408a
Show file tree

Hide file tree

Showing 184 changed files with 4,233 additions and 3,260 deletions.
diff --git a/.changeset/bright-cameras-visit.md b/.changeset/bright-cameras-visit.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/chilly-dancers-switch.md b/.changeset/chilly-dancers-switch.md
@@ -0,0 +1,10 @@
+---
+"@heroui/date-picker": patch
+"@heroui/date-input": patch
+"@heroui/select": patch
+"@heroui/input": patch
+"@heroui/system": patch
+"@heroui/theme": patch
+---
+
+Adding support for global labelPlacement prop. (ENG-1694)
diff --git a/.changeset/clever-pets-arrive.md b/.changeset/clever-pets-arrive.md
@@ -0,0 +1,6 @@
+---
+"@heroui/spinner": patch
+"@heroui/theme": patch
+---
+
+Adding variants to the Spinner Component.
diff --git a/.changeset/dull-ladybugs-whisper.md b/.changeset/dull-ladybugs-whisper.md
@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+Fix tabs slots "wrapper" rename to "tabWrapper" -- Breaking Change (#4552)
diff --git a/.changeset/flat-ducks-attack.md b/.changeset/flat-ducks-attack.md
@@ -0,0 +1,5 @@
+---
+"@heroui/form": patch
+---
+
+changed form default validation behavior to native
diff --git a/.changeset/light-peaches-reflect.md b/.changeset/light-peaches-reflect.md
@@ -0,0 +1,5 @@
+---
+"@heroui/use-image": patch
+---
+
+fix loading image after props changes (#4518)
diff --git a/.changeset/stale-tips-kneel.md b/.changeset/stale-tips-kneel.md
@@ -0,0 +1,5 @@
+---
+"@heroui/kbd": patch
+---
+
+Add fn win alt keys (#4499)
diff --git a/.changeset/stupid-pants-perform.md b/.changeset/stupid-pants-perform.md
@@ -0,0 +1,84 @@
+---
+"@heroui/use-intersection-observer": patch
+"@heroui/use-data-scroll-overflow": patch
+"@heroui/use-aria-accordion-item": patch
+"@heroui/use-aria-modal-overlay": patch
+"@heroui/use-safe-layout-effect": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/use-infinite-scroll": patch
+"@heroui/use-scroll-position": patch
+"@heroui/react-rsc-utils": patch
+"@heroui/scroll-shadow": patch
+"@heroui/use-aria-accordion": patch
+"@heroui/autocomplete": patch
+"@heroui/use-update-effect": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/use-callback-ref": patch
+"@heroui/framer-utils": patch
+"@heroui/shared-icons": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/use-aria-button": patch
+"@heroui/react-utils": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/use-disclosure": patch
+"@heroui/use-is-mounted": patch
+"@heroui/use-pagination": patch
+"@heroui/use-real-shape": patch
+"@heroui/aria-utils": patch
+"@heroui/test-utils": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/skeleton": patch
+"@heroui/use-aria-link": patch
+"@heroui/use-clipboard": patch
+"@heroui/use-draggable": patch
+"@heroui/use-is-mobile": patch
+"@heroui/use-ref-state": patch
+"@heroui/divider": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/spinner": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/drawer": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/spacer": patch
+"@heroui/switch": patch
+"@heroui/use-measure": patch
+"@heroui/alert": patch
+"@heroui/badge": patch
+"@heroui/image": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/use-resize": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/code": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+"@heroui/system-rsc": patch
+"@heroui/use-image": patch
+"@heroui/use-theme": patch
+"@heroui/kbd": patch
+"@heroui/use-ssr": patch
+"@heroui/system": patch
+"@heroui/react": patch
+"@heroui/theme": patch
+---
+
+Tailwind variants upgraded to the latest version, classnames adjusted, tests fixed
diff --git a/.changeset/tame-donuts-relate.md b/.changeset/tame-donuts-relate.md
@@ -0,0 +1,53 @@
+---
+"@heroui/use-intersection-observer": patch
+"@heroui/use-aria-accordion-item": patch
+"@heroui/use-aria-modal-overlay": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/use-aria-accordion": patch
+"@heroui/autocomplete": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/use-aria-button": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/use-disclosure": patch
+"@heroui/use-pagination": patch
+"@heroui/aria-utils": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/use-aria-link": patch
+"@heroui/use-draggable": patch
+"@heroui/divider": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/navbar": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/switch": patch
+"@heroui/alert": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+"@heroui/system-rsc": patch
+"@heroui/kbd": patch
+"@heroui/system": patch
+"@heroui/react": patch
+---
+
+bump RA versions
diff --git a/apps/docs/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx
@@ -33,7 +33,7 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         />
       </div>
 
-      <ScriptProviders isKapaEnabled={false} />
+      <ScriptProviders />
     </>
   );
 }
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
@@ -40,7 +40,7 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         />
       </div>
 
-      <ScriptProviders isKapaEnabled={false} />
+      <ScriptProviders />
     </>
   );
 }
diff --git a/apps/docs/app/examples/perf/client-page.tsx b/apps/docs/app/examples/perf/client-page.tsx
@@ -430,7 +430,7 @@ export default function HeroUIPerf() {
         autoCorrect="off"
         className="z-10 sticky top-1"
         placeholder="Search..."
-        spellCheck={false}
+        spellCheck="false"
         startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
         type="text"
         onValueChange={setInputValue}

diff --git a/apps/docs/components/marketing/heroui-pro-section.tsx b/apps/docs/components/marketing/heroui-pro-section.tsx
@@ -25,12 +25,12 @@ export const HeroUIProSection = () => {
 
   if (isDarkMode) {
     imgSrc = isMobile
-      ? "/images/nextuipro-section-background@mobile.webp"
-      : "/images/nextuipro-section-background.webp";
+      ? "/images/herouipro-section-background@mobile.webp"
+      : "/images/herouipro-section-background.webp";
   } else {
     imgSrc = isMobile
-      ? "/images/nextuipro-section-background-light@mobile.webp"
-      : "/images/nextuipro-section-background-light.webp";
+      ? "/images/herouipro-section-background-light@mobile.webp"
+      : "/images/herouipro-section-background-light.webp";
   }
 
   const mobileClassName: string = isDarkMode

diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import Script from "next/script";
 
 
-export function ScriptProviders({isKapaEnabled}: {isKapaEnabled?: boolean}) {
+export function ScriptProviders({isKapaEnabled = true}: {isKapaEnabled?: boolean}) {
   if (!isKapaEnabled) return null;
 
   return (

diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
@@ -1,26 +1,26 @@
 import {useCheckbox, CheckboxGroup, Chip, VisuallyHidden, tv} from "@heroui/react";
 
-const checkbox = tv({
-  slots: {
-    base: "border-default hover:bg-default-200",
-    content: "text-default-500",
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
-        content: "text-primary-foreground pl-1",
-      },
+export const CustomCheckbox = (props) => {
+  const checkbox = tv({
+    slots: {
+      base: "border-default hover:bg-default-200",
+      content: "text-default-500",
     },
-    isFocusVisible: {
-      true: {
-        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+    variants: {
+      isSelected: {
+        true: {
+          base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
+          content: "text-primary-foreground pl-1",
+        },
+      },
+      isFocusVisible: {
+        true: {
+          base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+        },
       },
     },
-  },
-});
+  });
 
-export const CustomCheckbox = (props) => {
   const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
     useCheckbox({
       ...props,

diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
@@ -20,32 +20,32 @@ export const CheckIcon = (props) => {
   );
 };
 
-const checkbox = tv({
-  slots: {
-    base: "border-default hover:bg-default-200",
-    content: "text-default-500",
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
-        content: "text-primary-foreground pl-1",
-      },
-    },
-    isFocusVisible: {
-      true: {
-        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
-      },
-    },
-  },
-});
-
 export default function App() {
   const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
     useCheckbox({
       defaultSelected: true,
     });
 
+  const checkbox = tv({
+    slots: {
+      base: "border-default hover:bg-default-200",
+      content: "text-default-500",
+    },
+    variants: {
+      isSelected: {
+        true: {
+          base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
+          content: "text-primary-foreground pl-1",
+        },
+      },
+      isFocusVisible: {
+        true: {
+          base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+        },
+      },
+    },
+  });
+
   const styles = checkbox({isSelected, isFocusVisible});
 
   return (

diff --git a/apps/docs/content/components/drawer/custom-styles.raw.jsx b/apps/docs/content/components/drawer/custom-styles.raw.jsx
@@ -160,7 +160,7 @@ export default function App() {
                     alt="Event image"
                     className="aspect-square w-full hover:scale-110"
                     height={300}
-                    src="https://herouipro.nyc3.cdn.digitaloceanspaces.com/components-images/places/san-francisco.png"
+                    src="https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/places/san-francisco.png"
                   />
                 </div>
                 <div className="flex flex-col gap-2 py-4">

diff --git a/apps/docs/content/components/form/controlled.raw.jsx b/apps/docs/content/components/form/controlled.raw.jsx
@@ -13,7 +13,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage="Please enter a valid email"

diff --git a/apps/docs/content/components/form/custom-error-messages.raw.jsx b/apps/docs/content/components/form/custom-error-messages.raw.jsx
@@ -6,7 +6,7 @@ export default function App() {
   };
 
   return (
-    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
       <Input
         isRequired
         errorMessage={({validationDetails}) => {

diff --git a/apps/docs/content/components/form/custom-validation-aria.raw.jsx b/apps/docs/content/components/form/custom-validation-aria.raw.jsx
@@ -0,0 +1,30 @@
+import {Form, Input, Button} from "@heroui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="aria" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up @@
             />
           </div>
-          <ScriptProviders isKapaEnabled={false} />
+          <ScriptProviders />
         </>
       );
     }