Merge branch 'main' of github.com:heroui-inc/heroui into canary

heroui-inc · Feb 18, 2025 · 57b1181 · 57b1181
2 parents f29cf8c + 7a43925
commit 57b1181
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 97 deletions.
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
@@ -39,13 +39,11 @@ export const Hero = () => {
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/introducing-heroui"
+            href="/blog/v2.7.0"
             variant="flat"
-            onClick={() =>
-              handlePressAnnouncement("Introducing HeroUI", "/blog/introducing-heroui")
-            }
+            onClick={() => handlePressAnnouncement("HeroUI v2.7.0", "/blog/v2.7.0")}
           >
-            Introducing HeroUI&nbsp;
+            HeroUI v2.7.0&nbsp;
             <span aria-label="emoji" role="img">
               🔥
             </span>

diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
@@ -220,11 +220,11 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/introducing-heroui"
+            href="/blog/v2.7.0"
             variant="flat"
-            onClick={() => handlePressNavbarItem("Introducing HeroUI", "/blog/introducing-heroui")}
+            onClick={() => handlePressNavbarItem("HeroUI v2.7.0", "/blog/v2.7.0")}
           >
-            Introducing HeroUI&nbsp;
+            HeroUI v2.7.0&nbsp;
             <span aria-label="emoji" role="img">
               🔥
             </span>

diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
@@ -177,9 +177,9 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "^10.4.14",
-      postcss: "^8.4.21",
-      tailwindcss: "^3.2.7",
+      autoprefixer: "10.4.20",
+      postcss: "8.4.49",
+      tailwindcss: "3.4.17",
     },
   };
 

diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -8,15 +8,15 @@ export default function App() {
         <h3>Min date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
-          label="Date and time"
+          label="Date"
           minValue={today(getLocalTimeZone())}
         />
       </div>
       <div className="w-full flex flex-col gap-1">
         <h3>Max date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).add({days: 1})}
-          label="Date and time"
+          label="Date"
           maxValue={today(getLocalTimeZone())}
         />
       </div>

diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx
@@ -1,10 +1,10 @@
+import {useState} from "react";
 import {
   Modal,
   ModalContent,
   ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalProps,
   Button,
   useDisclosure,
   RadioGroup,
@@ -13,22 +13,27 @@ import {
 
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [scrollBehavior, setScrollBehavior] =
-    React.useState < ModalProps["scrollBehavior"] > "inside";
+  const [modalPlacement, setModalPlacement] = useState("auto");
 
   return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen}>Open Modal</Button>
+    <div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
+      <Button className="max-w-fit" onPress={onOpen}>
+        Open Modal
+      </Button>
       <RadioGroup
-        label="Select scroll behavior"
+        label="Select modal placement"
         orientation="horizontal"
-        value={scrollBehavior}
-        onValueChange={setScrollBehavior}
+        value={modalPlacement}
+        onValueChange={setModalPlacement}
       >
-        <Radio value="inside">inside</Radio>
-        <Radio value="outside">outside</Radio>
+        <Radio value="auto">auto</Radio>
+        <Radio value="top">top</Radio>
+        <Radio value="bottom">bottom</Radio>
+        <Radio value="center">center</Radio>
+        <Radio value="top-center">top-center</Radio>
+        <Radio value="bottom-center">bottom-center</Radio>
       </RadioGroup>
-      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+      <Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
@@ -44,58 +49,6 @@ export default function App() {
                   risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                   quam.
                 </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
-                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
-                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
-                  et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
               </ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>

diff --git a/apps/docs/content/docs/components/drawer.mdx b/apps/docs/content/docs/components/drawer.mdx
@@ -84,8 +84,8 @@ You can disable this behavior by setting the following properties:
 ### Drawer placement
 
 The drawer can be placed on any edge of the screen using the `placement` prop:
-- `left` (default)
-- `right`
+- `left`
+- `right` (default)
 - `top`
 - `bottom`
 

diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -204,24 +204,6 @@ Install `@heroui/use-theme` in your project.
   }}
 /> 
 
-### Add the current theme to the main element
-
-```jsx
-// App.tsx or App.jsx
-import React from "react";
-import {useTheme} from "@heroui/use-theme";
-
-export default function App() {
-  const {theme} = useTheme();
-
-  return (
-    <main className={`${theme} text-foreground bg-background`}>
-      <App />
-    </main>
-  )
-}
-```
-
 ### Add the theme switcher
 
 Add the theme switcher to your app.

diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
@@ -52,7 +52,18 @@ export function useStackblitz(props: UseSandpackProps) {
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
+    ${Object.entries(
+      omit(dependencies as any, [
+        "react",
+        "react-dom",
+        "react-dom/client",
+        "@vitejs/plugin-react",
+        "vite",
+        "autoprefixer",
+        "postcss",
+        "tailwindcss",
+      ]),
+    )
       .map(([key, value]) => `"${key}": "${value}"`)
       .join(",\n    ")}
   },