Merge branch 'canary' into refactor/eng-1894

.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)

.changeset/light-peaches-reflect.md

@@ -0,0 +1,5 @@
+---
+"@heroui/use-image": patch
+---
+
+fix loading image after props changes (#4518)

.changeset/stale-tips-kneel.md

@@ -0,0 +1,5 @@
+---
+"@heroui/kbd": patch
+---
+
+Add fn win alt keys (#4499)

.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

.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

apps/docs/app/blog/layout.tsx

@@ -33,7 +33,7 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         />
       </div>
 
-      <ScriptProviders isKapaEnabled={false} />
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/docs/layout.tsx

@@ -40,7 +40,7 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         />
       </div>
 
-      <ScriptProviders isKapaEnabled={false} />
+      <ScriptProviders />
     </>
   );
 }

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}

apps/docs/components/marketing/heroui-pro-section.tsx

@@ -25,12 +25,12 @@ export const HeroUIProSection = () => {
 
   if (isDarkMode) {
     imgSrc = isMobile
-      ? "/images/nextuipro[email protected]"
-      : "/images/nextuipro-section-background.webp";
+      ? "/images/herouipro[email protected]"
+      : "/images/herouipro-section-background.webp";
   } else {
     imgSrc = isMobile
-      ? "/images/nextuipro[email protected]"
-      : "/images/nextuipro-section-background-light.webp";
+      ? "/images/herouipro[email protected]"
+      : "/images/herouipro-section-background-light.webp";
   }
 
   const mobileClassName: string = isDarkMode

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 (

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,

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 (

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">

apps/docs/content/docs/api-references/heroui-provider.mdx

@@ -142,6 +142,15 @@ interface AppProviderProps {
 
 <Spacer y={2}/>
 
+`labelPlacement`
+
+- **Description**: Determines the position where label should appear, such as inside, outside or outside-left of the component.
+- **Type**: `string` | `undefined`
+- **Possible Values**: `inside` | `outside` | `outside-left` | `undefined`
+- **Default**: `undefined`
+
+<Spacer y={2}/>
+
 `disableAnimation`
 
 - **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.

apps/docs/content/docs/components/kbd.mdx

@@ -112,5 +112,8 @@ type KbdKey =
   | "home"
   | "end"
   | "help"
-  | "space";
+  | "space"
+  | "fn"
+  | "win"
+  | "alt";
 ```