feat(docs): demo modal for code examples added

apps/docs/components/code-window/code-block.tsx

@@ -140,7 +140,6 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = hastToHtml(result);
 
   // TODO reset theme
-
   const classes = `language-${language}`;
   const codeClasses = clsx("absolute w-full px-4 pb-6", showWindowIcons ? "top-10" : "top-0");
 

apps/docs/components/code-window/code-window.tsx

@@ -4,7 +4,13 @@ import rangeParser from "parse-numeric-range";
 
 import CodeBlock, {CodeBlockProps} from "./code-block";
 
-export const CodeWindow: React.FC<CodeBlockProps> = ({highlightLines, ...props}) => {
+import {CopyButton} from "@/components";
+
+export interface CodeWindowProps extends CodeBlockProps {
+  showCopy?: boolean;
+}
+
+export const CodeWindow: React.FC<CodeWindowProps> = ({highlightLines, showCopy, ...props}) => {
   const wrapperRef = React.useRef<HTMLPreElement>(null);
 
   React.useEffect(() => {
@@ -80,5 +86,10 @@ export const CodeWindow: React.FC<CodeBlockProps> = ({highlightLines, ...props})
     );
   }, [highlightLines]);
 
-  return <CodeBlock ref={wrapperRef} {...props} />;
+  return (
+    <div className="relative">
+      <CodeBlock ref={wrapperRef} {...props} />
+      {showCopy && <CopyButton value={props.value} />}
+    </div>
+  );
 };

apps/docs/components/code-window/pre.tsx

@@ -3,16 +3,20 @@ import {clsx} from "@nextui-org/shared-utils";
 
 export interface PreProps {
   className?: string;
+  isScrollable?: boolean;
   children?: React.ReactNode;
 }
 
 export const Pre = forwardRef<HTMLPreElement, PreProps>(
-  ({className = "", children, ...props}, forwardedRef) => {
+  ({className = "", children, isScrollable = true, ...props}, forwardedRef) => {
+    const scrollClass = isScrollable ? "overflow-scroll" : "overflow-hidden";
+
     return (
       <pre
         ref={forwardedRef}
         className={clsx(
-          "relative w-full h-full box-border shadow-md text-white/80 leading-5 whitespace-pre text-sm font-mono bg-code-background rounded-xl overflow-scroll [&>code]:transition-transform",
+          "relative w-full h-full box-border shadow-md text-white/80 leading-5 whitespace-pre text-sm font-mono bg-code-background rounded-xl [&>code]:transition-transform",
+          scrollClass,
           className,
         )}
         {...props}

apps/docs/components/code-window/styles.ts

@@ -1,37 +0,0 @@
-import {tv, VariantProps} from "tailwind-variants";
-
-export const codeWindowStyles = tv({
-  slots: {
-    container: [
-      "relative",
-      "overflow-hidden",
-      "shadow-xl",
-      "flex",
-      "bg-slate-800",
-      "h-[31.625rem]",
-      "max-h-[60vh]",
-      "sm:max-h-[none]",
-      "sm:rounded-xl",
-      "lg:h-[34.6875rem]",
-      "xl:h-[31.625rem]",
-      "dark:bg-slate-900/70",
-      "dark:backdrop-blur",
-      "dark:ring-1",
-      "dark:ring-inset",
-      "dark:ring-white/10",
-    ],
-    code: ["w-full", "flex-auto", "flex", "min-h-0", "overflow-auto"],
-    lineNumbers: [
-      "hidden",
-      "md:block",
-      "text-slate-600",
-      "flex-none",
-      "py-4",
-      "pr-4",
-      "text-right",
-      "select-none",
-    ],
-  },
-});
-
-export type CodeWindowProps = VariantProps<typeof codeWindowStyles>;

apps/docs/components/copy-button.tsx

@@ -0,0 +1,39 @@
+import {FC} from "react";
+import {Button, ButtonProps} from "@nextui-org/react";
+import {useClipboard} from "@nextui-org/use-clipboard";
+
+import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
+
+export interface CopyButtonProps extends ButtonProps {
+  value?: string;
+}
+
+export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+  const {copy, copied} = useClipboard();
+
+  const handleCopy = () => {
+    copy(value);
+  };
+
+  return (
+    <Button
+      isIconOnly
+      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
+      size="sm"
+      variant="bordered"
+      onPress={handleCopy}
+      {...buttonProps}
+    >
+      <CheckLinearIcon
+        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        data-visible={copied}
+        size={16}
+      />
+      <CopyLinearIcon
+        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        data-visible={!copied}
+        size={16}
+      />
+    </Button>
+  );
+};

apps/docs/components/demo-code-modal.tsx

@@ -0,0 +1,79 @@
+import {FC, useState} from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  Link as NextUILink,
+  ModalBody,
+  Skeleton,
+} from "@nextui-org/react";
+import Link from "next/link";
+import {toLower} from "lodash";
+
+import {CodeWindow} from "@/components/code-window";
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export interface DemoCodeModalProps {
+  isOpen: boolean;
+  code: string;
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+}
+
+export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subtitle, onClose}) => {
+  const [isCodeVisible, setIsCodeVisible] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  const lowerTitle = toLower(title);
+  const fileName = `${toLower(lowerTitle)}.tsx`;
+
+  return (
+    <Modal
+      classNames={{
+        backdrop: "z-[100002]", // to appear above the navbar
+        wrapper: "z-[100003]", // to appear above the backdrop
+      }}
+      isOpen={isOpen}
+      motionProps={{
+        onAnimationComplete: () => {
+          setIsCodeVisible(isOpen);
+        },
+      }}
+      radius={isMobile ? "none" : "2xl"}
+      size={isMobile ? "full" : "2xl"}
+      onClose={onClose}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-2">
+          <h3>{title} code</h3>
+          <p className="text-base font-normal">
+            {subtitle || (
+              <>
+                This is an example of how to use the {lowerTitle} component, for more information
+                please visit the&nbsp;
+                <NextUILink as={Link} href={`/docs/${lowerTitle}`}>
+                  {lowerTitle}
+                </NextUILink>
+                &nbsp;docs.
+              </>
+            )}
+          </p>
+        </ModalHeader>
+        <ModalBody>
+          <Skeleton className="h-[320px] md:h-[60vh] rounded-xl" isLoaded={isCodeVisible}>
+            <CodeWindow
+              showCopy
+              showWindowIcons
+              className="min-h-[320px] max-h-[80vh] md:max-h-[60vh] h-screen"
+              language="jsx"
+              title={fileName}
+              value={code}
+            />
+          </Skeleton>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

apps/docs/components/icons/bold/index.ts

@@ -10,3 +10,4 @@ export * from "./next";
 export * from "./previous";
 export * from "./repeat-one";
 export * from "./shuffle";
+export * from "./info";

apps/docs/components/icons/bold/info.tsx

@@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const InfoBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM11.25 8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V13C12.75 13.41 12.41 13.75 12 13.75C11.59 13.75 11.25 13.41 11.25 13V8ZM12.92 16.38C12.87 16.51 12.8 16.61 12.71 16.71C12.61 16.8 12.5 16.87 12.38 16.92C12.26 16.97 12.13 17 12 17C11.87 17 11.74 16.97 11.62 16.92C11.5 16.87 11.39 16.8 11.29 16.71C11.2 16.61 11.13 16.51 11.08 16.38C11.03 16.26 11 16.13 11 16C11 15.87 11.03 15.74 11.08 15.62C11.13 15.5 11.2 15.39 11.29 15.29C11.39 15.2 11.5 15.13 11.62 15.08C11.86 14.98 12.14 14.98 12.38 15.08C12.5 15.13 12.61 15.2 12.71 15.29C12.8 15.39 12.87 15.5 12.92 15.62C12.97 15.74 13 15.87 13 16C13 16.13 12.97 16.26 12.92 16.38Z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/docs/components/icons/linear/check.tsx

@@ -0,0 +1,20 @@
+import {IconSvgProps} from "@/types";
+
+export const CheckLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);

apps/docs/components/icons/linear/copy.tsx

@@ -0,0 +1,29 @@
+import {IconSvgProps} from "@/types";
+
+export const CopyLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

apps/docs/components/icons/linear/index.ts

@@ -8,3 +8,5 @@ export * from "./html-logo";
 export * from "./cubes";
 export * from "./plus";
 export * from "./note";
+export * from "./copy";
+export * from "./check";

apps/docs/components/index.ts

@@ -4,3 +4,5 @@ export * from "./looper-bg";
 export * from "./code-window";
 export * from "./gradient-box";
 export * from "./vercel-callout";
+export * from "./copy-button";
+export * from "./demo-code-modal";

apps/docs/components/marketing/a11y-otb.tsx

@@ -8,6 +8,7 @@ import {
   DropdownTrigger,
   DropdownMenu,
   DropdownItem,
+  Tooltip,
 } from "@nextui-org/react";
 import {useInView} from "framer-motion";
 import {clsx} from "@nextui-org/shared-utils";
@@ -18,11 +19,12 @@ import {
   DeleteDocumentBulkIcon,
 } from "@nextui-org/shared-icons";
 import Link from "next/link";
-import {useRef} from "react";
+import {useRef, useState} from "react";
 
 import {FeaturesGrid} from "./features-grid";
 
-import {GradientBox} from "@/components";
+import landingContent from "@/content/landing";
+import {GradientBox, DemoCodeModal} from "@/components";
 import {
   KeyboardBoldIcon,
   MouseCircleBoldIcon,
@@ -30,6 +32,7 @@ import {
   FatrowsBoldIcon,
   EyeBoldIcon,
   KeyboardOpenBoldIcon,
+  InfoBoldIcon,
 } from "@/components/icons";
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -64,6 +67,8 @@ const a11yItems = [
 const iconClasses = "text-2xl text-neutral-500 pointer-events-none flex-shrink-0";
 
 export const A11yOtb = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const ref = useRef<any>(null);
   const isInView = useInView(ref, {
     margin: "-10px",
@@ -119,10 +124,21 @@ export const A11yOtb = () => {
           </div>
           <GradientBox
             ref={ref}
-            className="h-full min-h-[200px] lg:min-h-[390px] lg:pt-8 items-center lg:items-start justify-center"
+            className="h-full min-h-[200px] lg:min-h-[390px] max-h-[300px] lg:pt-8 items-center lg:items-start justify-center"
             color="green"
             to="right"
           >
+            <Tooltip className="text-xs px-2" content="Show code" placement="top">
+              <Button
+                isIconOnly
+                className="absolute top-1 right-1 text-success-50 data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+                onPress={() => setIsModalOpen(true)}
+              >
+                <InfoBoldIcon className="rotate-180" />
+              </Button>
+            </Tooltip>
             {isInView && ref.current && (
               <Dropdown
                 className="shadow-xl"
@@ -197,6 +213,13 @@ export const A11yOtb = () => {
           src="/gradients/green.svg"
         />
       </div>
+
+      <DemoCodeModal
+        code={landingContent.a11yExampleCode}
+        isOpen={isModalOpen}
+        title="Dropdown"
+        onClose={() => setIsModalOpen(false)}
+      />
     </section>
   );
 };

apps/docs/components/marketing/custom-themes/custom-themes.tsx

@@ -232,6 +232,7 @@ export const CustomThemes = () => {
             showWindowIcons
             className="max-h-[440px] min-h-[390px]"
             highlightLines={get(codeHighlights, selectedTheme)}
+            isScrollable={false}
             language="jsx"
             title="tailwind.config.js"
             value={landingContent.themingCode}

apps/docs/components/marketing/dark-mode.tsx

@@ -1,14 +1,18 @@
 /* eslint-disable react/display-name */
-import {Code, Button, Link} from "@nextui-org/react";
+import {Code, Button, Link, Tooltip} from "@nextui-org/react";
+import {useState} from "react";
 
 import {MusicPlayer} from "@/components/demos";
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
 import {ThemeSwitch} from "@/components/theme-switch";
 import {CodeWindow} from "@/components/code-window";
 import landingContent from "@/content/landing";
-import {GradientBox} from "@/components";
+import {GradientBox, DemoCodeModal} from "@/components";
+import {InfoBoldIcon} from "@/components/icons";
 
 export const DarkMode = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <section className={sectionWrapper({class: "mt-16 lg:mt-44"})}>
       <div className="flex flex-col gap-8">
@@ -27,14 +31,27 @@ export const DarkMode = () => {
         </div>
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <div className="flex flex-col justify-center gap-6">
-            <GradientBox isCentered className="py-12 px-4 lg:px-8" color="orange" to="top-right">
+            <GradientBox isCentered className="py-14 px-4 lg:px-8" color="orange" to="top-right">
               <MusicPlayer />
-              <ThemeSwitch
-                classNames={{
-                  base: "p-1.5 absolute top-2 right-2 bg-transparent rounded-xl",
-                  wrapper: "!text-white/70 dark:!text-black/70",
-                }}
-              />
+              <div className="flex absolute top-2 right-2">
+                <Tooltip className="text-xs px-2" content="Show code" placement="top">
+                  <Button
+                    isIconOnly
+                    className="text-white/70 dark:text-black/70 data-[hover]:bg-foreground/10"
+                    radius="full"
+                    variant="light"
+                    onPress={() => setIsModalOpen(true)}
+                  >
+                    <InfoBoldIcon className="rotate-180" size={22} />
+                  </Button>
+                </Tooltip>
+                <ThemeSwitch
+                  classNames={{
+                    base: "p-1.5 bg-transparent rounded-xl",
+                    wrapper: "!text-white/70 dark:!text-black/70",
+                  }}
+                />
+              </div>
             </GradientBox>
           </div>
           <CodeWindow
@@ -60,6 +77,14 @@ export const DarkMode = () => {
           </Button>
         </div>
       </div>
+
+      <DemoCodeModal
+        code={landingContent.darkModeExampleCode}
+        isOpen={isModalOpen}
+        subtitle="A simple music player component built using components from NextUI."
+        title="MusicPlayer"
+        onClose={() => setIsModalOpen(false)}
+      />
     </section>
   );
 };

apps/docs/components/marketing/hero.tsx

@@ -186,7 +186,7 @@ export const Hero = () => {
         <div className="text-center leading-8 md:leading-10 md:text-left">
           <div className="inline-block">
             <h1 className={title()}>Make&nbsp;</h1>
-            <h1 className={title({color: "violet", size: "md"})}>beautiful&nbsp;</h1>
+            <h1 className={title({color: "violet"})}>beautiful&nbsp;</h1>
           </div>
           <h1 className={title()}>websites regardless of your design experience.</h1>
         </div>

apps/docs/components/marketing/support.tsx

@@ -1,7 +1,6 @@
 import {FC, useMemo, useRef} from "react";
 import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
 import {clamp, get} from "lodash";
-import {useInView} from "framer-motion";
 
 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
 
@@ -93,10 +92,6 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
   const sonarRef = useRef(null);
   const isMobile = useIsMobile();
 
-  const isInView = useInView(sonarRef, {
-    margin: "110px",
-  });
-
   const handleExternalLinkClick = (href: string) => {
     if (!href) return;
     window.open(href, "_blank");
@@ -118,7 +113,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
           <Avatar
             key={`${sponsor.MemberId}-${index}`}
             isBordered
-            className="absolute cursor-pointer"
+            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
             color={getSponsorColor(sponsor) as AvatarProps["color"]}
             name={getSponsorName(sponsor)}
             size={getSponsorSize(sponsor, isMobile)}
@@ -166,37 +161,35 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
             ref={sonarRef}
             className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
           >
-            {isInView && (
-              <SonarPulse
-                circlesCount={SONAR_PULSE_CIRCLES_COUNT}
-                color="#7928CA"
-                icon={
-                  <Tooltip
-                    showArrow
-                    color="secondary"
-                    content={"Become a sponsor"}
-                    offset={10}
-                    radius="xl"
+            <SonarPulse
+              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
+              color="#7928CA"
+              icon={
+                <Tooltip
+                  showArrow
+                  color="secondary"
+                  content={"Become a sponsor"}
+                  offset={10}
+                  radius="xl"
+                >
+                  <Button
+                    isIconOnly
+                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    radius="full"
+                    onPress={() => handleExternalLinkClick(supportAccounts[0].href)}
                   >
-                    <Button
-                      isIconOnly
-                      className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
-                      radius="full"
-                      onPress={() => handleExternalLinkClick(supportAccounts[0].href)}
-                    >
-                      <PlusLinearIcon
-                        className="flex items-center justify-center rounded-full text-white"
-                        size={54}
-                      />
-                    </Button>
-                  </Tooltip>
-                }
-                playState="running"
-                size={SONAR_PULSE_SIZE}
-              >
-                {renderSponsors}
-              </SonarPulse>
-            )}
+                    <PlusLinearIcon
+                      className="flex items-center justify-center rounded-full text-white"
+                      size={54}
+                    />
+                  </Button>
+                </Tooltip>
+              }
+              playState="running"
+              size={SONAR_PULSE_SIZE}
+            >
+              {renderSponsors}
+            </SonarPulse>
           </div>
         </div>
       </div>

apps/docs/components/primitives.ts

@@ -18,7 +18,7 @@ export const title = tv({
     },
     size: {
       sm: "text-3xl lg:text-4xl",
-      md: "text-[32px] lg:text-5xl",
+      md: "text-4xl lg:text-5xl",
       lg: "text-4xl lg:text-6xl",
     },
     fullWidth: {

apps/docs/content/landing/index.tsx

@@ -203,5 +203,213 @@ const CustomButton = () => {
 };
 
 export default CustomButton;
+`,
+  a11yExampleCode: `import {
+  Button,
+  Dropdown,
+  DropdownSection,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/react";
+
+import {
+  AddNoteBulkIcon,
+  CopyDocumentBulkIcon,
+  EditDocumentBulkIcon,
+  DeleteDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+
+const iconClasses = "text-2xl text-neutral-500 pointer-events-none flex-shrink-0";
+
+export const Example = () => {
+  return (
+    <Dropdown className="shadow-xl" placement="bottom">
+      <DropdownTrigger>
+        <Button color="success" variant="flat">
+          Actions
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        closeOnSelect
+        aria-label="Actions"
+        color="neutral"
+        variant="flat"
+      >
+        <DropdownSection title="Actions">
+          <DropdownItem
+            key="new"
+            description="Create a new file"
+            shortcut="⌘N"
+            startContent={<AddNoteBulkIcon className={iconClasses} />}
+          >
+            New file
+          </DropdownItem>
+          <DropdownItem
+            key="copy"
+            description="Copy the file link"
+            shortcut="⌘C"
+            startContent={<CopyDocumentBulkIcon className={iconClasses} />}
+          >
+            Copy link
+          </DropdownItem>
+          <DropdownItem
+            key="edit"
+            description="Allows you to edit the file"
+            shortcut="⌘⇧E"
+            startContent={<EditDocumentBulkIcon className={iconClasses} />}
+          >
+            Edit file
+          </DropdownItem>
+        </DropdownSection>
+        <DropdownSection title="Danger zone">
+          <DropdownItem
+            key="delete"
+            className="text-danger"
+            color="danger"
+            description="Permanently delete the file"
+            shortcut="⌘⇧D"
+            startContent={
+              <DeleteDocumentBulkIcon
+                className={clsx(iconClasses, "!text-danger")}
+              />
+            }
+          >
+            Delete file
+          </DropdownItem>
+        </DropdownSection>
+      </DropdownMenu>
+    </Dropdown>
+  );
+};
+`,
+  darkModeExampleCode: `import {Card, CardBody, Button, Image, Progress, CardProps} from "@nextui-org/react";
+import {useState, FC} from "react";
+import {clsx} from "@nextui-org/shared-utils";
+
+import {
+  PauseCircleBoldIcon,
+  NextBoldIcon,
+  PreviousBoldIcon,
+  RepeatOneBoldIcon,
+  ShuffleBoldIcon,
+  HeartLinearIcon,
+} from "your-icons-package";
+
+export interface MusicPlayerProps extends CardProps {}
+
+export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) => {
+  const [liked, setLiked] = useState(false);
+
+  return (
+    <Card
+      isBlurred
+      className={clsx("border-none dark:bg-background/40 bg-background/40", className)}
+      radius="2xl"
+      shadow="2xl"
+      {...otherProps}
+    >
+      <CardBody>
+        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+          <div className="relative col-span-6 md:col-span-4">
+            <Image
+              alt="Album cover"
+              className="object-cover"
+              classNames={{
+                base: "shadow-black/20",
+              }}
+              height={200}
+              shadow="lg"
+              src="/images/album-cover.png"
+              width="100%"
+            />
+          </div>
+
+          <div className="flex flex-col col-span-6 md:col-span-8">
+            <div className="flex justify-between items-start">
+              <div className="flex flex-col gap-0">
+                <h3 className="font-semibold text-foreground/90">Daily Mix</h3>
+                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <h1 className="text-lg font-medium mt-2">Frontend Radio</h1>
+              </div>
+              <Button
+                isIconOnly
+                className="text-neutral-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                radius="full"
+                variant="light"
+                onPress={() => setLiked((v) => !v)}
+              >
+                <HeartLinearIcon
+                  className={liked ? "[&>path]:stroke-transparent" : ""}
+                  fill={liked ? "currentColor" : "none"}
+                />
+              </Button>
+            </div>
+
+            <div className="flex flex-col mt-3 gap-1">
+              <Progress
+                aria-label="Music progress"
+                classNames={{
+                  filler: "bg-white",
+                  track: "bg-neutral-500/30",
+                }}
+                color="neutral"
+                size="sm"
+                value={33}
+              />
+              <div className="flex justify-between">
+                <p className="text-sm">1:23</p>
+                <p className="text-sm text-foreground/50">4:32</p>
+              </div>
+            </div>
+
+            <div className="flex w-full items-center justify-center">
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <RepeatOneBoldIcon className="text-foreground/80" />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <PreviousBoldIcon />
+              </Button>
+              <Button
+                isIconOnly
+                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <PauseCircleBoldIcon size={54} />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <NextBoldIcon />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <ShuffleBoldIcon className="text-foreground/80" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
 `,
 };

apps/docs/layouts/navbar.tsx

@@ -17,10 +17,13 @@ import {
   DropdownTrigger,
 } from "@nextui-org/react";
 import {ChevronDownIcon} from "@nextui-org/shared-icons";
+import {useRouter} from "next/router";
+import {includes} from "lodash";
 
 import {NextUILogo, ThemeSwitch} from "@/components";
 import {TwitterIcon, GithubIcon, DiscordIcon, HeartFilledIcon} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
+import {isActive} from "@/utils/links";
 
 export const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
@@ -28,6 +31,8 @@ export const Navbar = () => {
   const ref = useRef(null);
   const isMounted = useIsMounted();
 
+  const router = useRouter();
+
   const menuItems = [
     "Profile",
     "Dashboard",
@@ -96,13 +101,36 @@ export const Navbar = () => {
         </NavbarBrand>
       </NavbarContent>
       <NavbarContent className="hidden lg:flex" justify="center">
-        <NavbarItem as={Link} color="foreground" href="#">
+        <NavbarItem
+          as={Link}
+          className="data-[active=true]:text-primary"
+          color="foreground"
+          href="/docs/guide/getting-started"
+          isActive={
+            !!(
+              isActive(router.pathname, "/docs/[[...slug]]") &&
+              !includes(router.asPath, "components")
+            )
+          }
+        >
           Docs
         </NavbarItem>
-        <NavbarItem isActive as={Link} href="#">
+        <NavbarItem
+          as={Link}
+          className="data-[active=true]:text-primary"
+          color="foreground"
+          href="/docs/components/avatar"
+          isActive={includes(router.asPath, "components")}
+        >
           Components
         </NavbarItem>
-        <NavbarItem as={Link} color="foreground" href="#">
+        <NavbarItem
+          as={Link}
+          className="data-[active=true]:text-primary"
+          color="foreground"
+          href="/figma"
+          isActive={router.asPath === "/figma"}
+        >
           Figma
         </NavbarItem>
       </NavbarContent>

apps/docs/package.json

@@ -13,6 +13,7 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
+    "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@react-aria/visually-hidden": "^3.8.0",
     "@vercel/analytics": "^0.1.11",

apps/docs/utils/links.ts

@@ -0,0 +1 @@
+export const isActive = (pathname: string, href: string) => pathname && pathname.startsWith(href);

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230505232443
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-image@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/spinner@0.0.0-dev-v2-20230505232443
+  - @nextui-org/drip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/drip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "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/chip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/divider/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/divider
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
   "keywords": [
     "drip"

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/dropdown
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/popover@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"

packages/components/image/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/image
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-image@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/kbd
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"

packages/components/link/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/link
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/modal
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"

packages/components/modal/src/use-modal.ts

@@ -62,13 +62,13 @@ interface Props extends HTMLNextUIProps<"section"> {
    * @example
    * ```ts
    * <Modal classNames={{
-   *    wrapper: "wrapper-classes", // main wrapper
+   *    wrapper: "wrapper-classes", // main modal wrapper
    *    backdrop: "backdrop-classes",
-   *    base:"base-classes",
-   *    header: "header-classes",
-   *    body: "body-classes",
-   *    footer: "footer-classes",
-   *    closeButton: "close-button-classes",
+   *    base:"base-classes", // modal content wrapper
+   *    header: "header-classes", // modal header
+   *    body: "body-classes", // modal body
+   *    footer: "footer-classes", // modal footer
+   *    closeButton: "close-button-classes", // modal close button
    * }} />
    * ```
    */

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/navbar
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/popover
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/radio
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/skeleton/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @nextui-org/skeleton
+
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443

packages/components/skeleton/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/skeleton
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/skeleton
+# or
+npm i @nextui-org/skeleton
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/skeleton/__tests__/skeleton.test.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Skeleton} from "../src";
+
+describe("Skeleton", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Skeleton />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Skeleton ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});

packages/components/skeleton/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@nextui-org/skeleton",
+  "version": "0.0.0-dev-v2-20230505232443",
+  "description": "Skeleton is used to display the loading state of some component.",
+  "keywords": [
+    "skeleton"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/skeleton"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/dom-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/skeleton/src/index.ts

@@ -0,0 +1,10 @@
+import Skeleton from "./skeleton";
+
+// export types
+export type {SkeletonProps} from "./skeleton";
+
+// export hooks
+export {useSkeleton} from "./use-skeleton";
+
+// export component
+export {Skeleton};

packages/components/skeleton/src/skeleton.tsx

@@ -0,0 +1,19 @@
+import {forwardRef} from "@nextui-org/system";
+
+import {UseSkeletonProps, useSkeleton} from "./use-skeleton";
+
+export interface SkeletonProps extends Omit<UseSkeletonProps, "ref"> {}
+
+const Skeleton = forwardRef<SkeletonProps, "div">((props, ref) => {
+  const {Component, children, getSkeletonProps, getContentProps} = useSkeleton({ref, ...props});
+
+  return (
+    <Component {...getSkeletonProps()}>
+      <div {...getContentProps()}>{children}</div>
+    </Component>
+  );
+});
+
+Skeleton.displayName = "NextUI.Skeleton";
+
+export default Skeleton;

packages/components/skeleton/src/use-skeleton.ts

@@ -0,0 +1,71 @@
+import type {SkeletonVariantProps, SkeletonSlots, SlotsToClasses} from "@nextui-org/theme";
+
+import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {skeleton} from "@nextui-org/theme";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef, clsx, dataAttr} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
+
+export interface UseSkeletonProps extends HTMLNextUIProps<"div", SkeletonVariantProps> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * The skeleton will be visible while isLoading is `false`.
+   * @default false
+   */
+  isLoaded?: boolean;
+  /**
+   * Classname or List of classes to change the classNames of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <Skeleton classNames={{
+   *    base:"base-classes", // skeleton wrapper
+   *    content: "content-classes", // children wrapper
+   * }} />
+   * ```
+   */
+  classNames?: SlotsToClasses<SkeletonSlots>;
+}
+
+export function useSkeleton(originalProps: UseSkeletonProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, skeleton.variantKeys);
+
+  const {ref, as, children, isLoaded = false, className, classNames, ...otherProps} = props;
+
+  const Component = as || "div";
+
+  const domRef = useDOMRef(ref);
+
+  const slots = useMemo(
+    () =>
+      skeleton({
+        ...variantProps,
+      }),
+    [...Object.values(variantProps)],
+  );
+
+  const baseStyles = clsx(className, classNames?.base);
+
+  const getSkeletonProps: PropGetter = (props = {}) => {
+    return {
+      ref: domRef,
+      "data-loaded": dataAttr(isLoaded),
+      className: slots.base({class: clsx(baseStyles, props?.className)}),
+      ...otherProps,
+    };
+  };
+
+  const getContentProps: PropGetter = (props = {}) => {
+    return {
+      className: slots.content({class: clsx(classNames?.content, props?.className)}),
+    };
+  };
+
+  return {Component, domRef, children, slots, classNames, getSkeletonProps, getContentProps};
+}
+
+export type UseSkeletonReturn = ReturnType<typeof useSkeleton>;

packages/components/skeleton/stories/skeleton.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {skeleton} from "@nextui-org/theme";
+
+import {Skeleton, SkeletonProps} from "../src";
+
+export default {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  argTypes: {
+    children: {
+      hidden: true,
+    },
+    isLoaded: {
+      control: {
+        type: "boolean",
+      },
+    },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as ComponentMeta<typeof Skeleton>;
+
+const defaultProps = {
+  ...skeleton.defaultVariants,
+  isLoaded: false,
+  children: <div className="w-[200px] h-[100px]">NextUI</div>,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args: SkeletonProps) => <Skeleton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+  className: "rounded-xl",
+};

packages/components/skeleton/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    }
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/skeleton/tsup.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/snippet
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"
@@ -39,12 +39,13 @@
   "dependencies": {
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
+    "@nextui-org/button": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/dom-utils": "workspace:*",
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/tooltip": "workspace:*",
     "@react-aria/focus": "^3.12.0",
-    "@react-aria/interactions": "^3.15.0",
     "@react-aria/utils": "^3.16.0"
   },
   "devDependencies": {

packages/components/snippet/src/index.ts

@@ -4,9 +4,5 @@ export type {SnippetProps} from "./snippet";
 // export hooks
 export {useSnippet} from "./use-snippet";
 
-// export misc
-export {SnippetCheckIcon} from "./snippet-check-icon";
-export {SnippetCopyIcon} from "./snippet-copy-icon";
-
 // export component
 export {default as Snippet} from "./snippet";

packages/components/snippet/src/snippet-copy-icon.tsx

@@ -1,8 +0,0 @@
-export const SnippetCopyIcon = () => (
-  <svg aria-hidden="true" height="1em" role="presentation" viewBox="0 0 24 24" width="1em">
-    <path
-      d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"
-      fill="currentColor"
-    />
-  </svg>
-);

packages/components/snippet/src/snippet.tsx

@@ -1,10 +1,10 @@
+import {ReactNode, useCallback, useMemo, cloneElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {Tooltip} from "@nextui-org/tooltip";
-import {ReactNode, useCallback, useMemo} from "react";
+import {CopyLinearIcon, CheckLinearIcon} from "@nextui-org/shared-icons";
+import {Button} from "@nextui-org/button";
 
 import {useSnippet, UseSnippetProps} from "./use-snippet";
-import {SnippetCopyIcon} from "./snippet-copy-icon";
-import {SnippetCheckIcon} from "./snippet-check-icon";
 
 export interface SnippetProps extends Omit<UseSnippetProps, "ref"> {}
 
@@ -16,8 +16,8 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
     slots,
     classNames,
     copied,
-    copyIcon = <SnippetCopyIcon />,
-    checkIcon = <SnippetCheckIcon />,
+    copyIcon = <CopyLinearIcon />,
+    checkIcon = <CheckLinearIcon />,
     symbolBefore,
     disableCopy,
     disableTooltip,
@@ -31,7 +31,11 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
   } = useSnippet({ref, ...props});
 
   const TooltipContent = useCallback(
-    ({children}: {children?: ReactNode}) => <Tooltip {...tooltipProps}>{children}</Tooltip>,
+    ({children}: {children?: ReactNode}) => (
+      <Tooltip {...tooltipProps} isDisabled={copied || tooltipProps.isDisabled}>
+        {children}
+      </Tooltip>
+    ),
     [...Object.values(tooltipProps)],
   );
 
@@ -40,7 +44,15 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
       return null;
     }
 
-    const copyButton = <button {...getCopyButtonProps()}>{copied ? checkIcon : copyIcon}</button>;
+    const clonedCheckIcon = checkIcon && cloneElement(checkIcon, {className: slots.checkIcon()});
+    const clonedCopyIcon = copyIcon && cloneElement(copyIcon, {className: slots.copyIcon()});
+
+    const copyButton = (
+      <Button {...getCopyButtonProps()}>
+        {clonedCheckIcon}
+        {clonedCopyIcon}
+      </Button>
+    );
 
     if (disableTooltip) {
       return copyButton;
@@ -49,7 +61,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
     return <TooltipContent>{copyButton}</TooltipContent>;
   }, [
     slots,
-    classNames?.copy,
+    classNames?.copyButton,
     copied,
     checkIcon,
     copyIcon,

packages/components/snippet/src/use-snippet.ts

@@ -6,10 +6,9 @@ import {useDOMRef} from "@nextui-org/dom-utils";
 import {clsx, dataAttr, ReactRef} from "@nextui-org/shared-utils";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useFocusRing} from "@react-aria/focus";
-import {useMemo, useCallback} from "react";
+import {useMemo, useCallback, ReactElement} from "react";
 import {TooltipProps} from "@nextui-org/tooltip";
-import {usePress} from "@react-aria/interactions";
-import {mergeProps} from "@react-aria/utils";
+import {ButtonProps} from "@nextui-org/button";
 export interface UseSnippetProps
   extends Omit<HTMLNextUIProps<"div">, "onCopy">,
     SnippetVariantProps {
@@ -35,11 +34,11 @@ export interface UseSnippetProps
   /*
    * Snippet copy icon.
    */
-  copyIcon?: React.ReactNode;
+  copyIcon?: ReactElement;
   /*
    * Snippet copy icon. This icon will be shown when the text is copied.
    */
-  checkIcon?: React.ReactNode;
+  checkIcon?: ReactElement;
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -49,7 +48,9 @@ export interface UseSnippetProps
    * <Snippet classNames={{
    *    base:"base-classes",
    *    pre: "pre-classes",
-   *    copy: "copy-classes",
+   *    copyButton: "copy-classes", // copy button classes
+   *    copyIcon: "copy-classes", // copy icon classes
+   *    checkIcon: "check-classes", // check icon classes
    * }} />
    * ```
    */
@@ -81,6 +82,7 @@ export interface UseSnippetProps
   hideSymbol?: boolean;
   /**
    * Tooltip props.
+   * @see [Tooltip](https://nextui.org/components/tooltip) for more details.
    * @default {
    *  offset: 15,
    *  delay: 1000,
@@ -91,6 +93,19 @@ export interface UseSnippetProps
    * }
    */
   tooltipProps?: TooltipProps;
+  /**
+   * Copy button props.
+   * @see [Button](https://nextui.org/components/button) for more details.
+   * @default {
+   *   isDisabled: disableCopy,
+   *   onPress: onCopy
+   *   size:"sm",
+   *   radius: "lg",
+   *   variant:"light",
+   *   isIconOnly: true,
+   * }
+   */
+  copyButtonProps?: ButtonProps;
   /**
    * Callback when the text is copied.
    */
@@ -123,6 +138,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
       color: originalProps?.color as TooltipProps["color"],
       isDisabled: disableCopy,
     },
+    copyButtonProps,
     className,
     ...otherProps
   } = props;
@@ -182,29 +198,33 @@ export function useSnippet(originalProps: UseSnippetProps) {
     onCopyProp?.(value);
   }, [copy, disableCopy, onCopyProp, children]);
 
-  const {isPressed: isCopyPressed, pressProps: copyButtonPressProps} = usePress({
+  const defaultCopyButtonProps: ButtonProps = {
+    "aria-label": "Copy to clipboard",
+    size: "sm",
+    variant: "light",
+    radius: "lg",
     isDisabled: disableCopy,
     onPress: onCopy,
-  });
+    isIconOnly: true,
+    ...copyButtonProps,
+  };
 
-  const getCopyButtonProps = useCallback<PropGetter>(
-    (props = {}) => ({
-      ...mergeProps(copyButtonPressProps, focusProps, props),
-      "data-focus": dataAttr(isFocused),
-      "data-focus-visible": dataAttr(isFocusVisible),
-      "data-pressed": dataAttr(isCopyPressed),
-      className: slots.copy({
-        class: clsx(disableCopy && "opacity-50 cursor-not-allowed", classNames?.copy),
-      }),
-    }),
+  const getCopyButtonProps = useCallback(
+    () =>
+      ({
+        ...defaultCopyButtonProps,
+        "data-copied": dataAttr(copied),
+        className: slots.copyButton({
+          class: clsx(classNames?.copyButton),
+        }),
+      } as ButtonProps),
     [
       slots,
-      isCopyPressed,
       isFocusVisible,
       isFocused,
       disableCopy,
-      classNames?.copy,
-      copyButtonPressProps,
+      classNames?.copyButton,
+      defaultCopyButtonProps,
       focusProps,
     ],
   );

packages/components/spacer/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spacer
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/spacer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"

packages/components/spinner/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spinner
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",

packages/components/switch/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/switch
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"

packages/components/table/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/table
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/spacer@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"

packages/components/tabs/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/tabs
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"

packages/components/tooltip/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/tooltip
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230505232443
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"

packages/components/user/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/user
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230505232443
+  - @nextui-org/avatar@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/components/user/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"

packages/core/react/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nextui-org/react
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230505232443
+  - @nextui-org/accordion@0.0.0-dev-v2-20230505232443
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230505232443
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230505232443
+  - @nextui-org/progress@0.0.0-dev-v2-20230505232443
+  - @nextui-org/divider@0.0.0-dev-v2-20230505232443
+  - @nextui-org/popover@0.0.0-dev-v2-20230505232443
+  - @nextui-org/snippet@0.0.0-dev-v2-20230505232443
+  - @nextui-org/spinner@0.0.0-dev-v2-20230505232443
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/avatar@0.0.0-dev-v2-20230505232443
+  - @nextui-org/button@0.0.0-dev-v2-20230505232443
+  - @nextui-org/navbar@0.0.0-dev-v2-20230505232443
+  - @nextui-org/spacer@0.0.0-dev-v2-20230505232443
+  - @nextui-org/switch@0.0.0-dev-v2-20230505232443
+  - @nextui-org/badge@0.0.0-dev-v2-20230505232443
+  - @nextui-org/image@0.0.0-dev-v2-20230505232443
+  - @nextui-org/input@0.0.0-dev-v2-20230505232443
+  - @nextui-org/modal@0.0.0-dev-v2-20230505232443
+  - @nextui-org/radio@0.0.0-dev-v2-20230505232443
+  - @nextui-org/table@0.0.0-dev-v2-20230505232443
+  - @nextui-org/card@0.0.0-dev-v2-20230505232443
+  - @nextui-org/chip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/code@0.0.0-dev-v2-20230505232443
+  - @nextui-org/drip@0.0.0-dev-v2-20230505232443
+  - @nextui-org/link@0.0.0-dev-v2-20230505232443
+  - @nextui-org/tabs@0.0.0-dev-v2-20230505232443
+  - @nextui-org/user@0.0.0-dev-v2-20230505232443
+  - @nextui-org/kbd@0.0.0-dev-v2-20230505232443
+  - @nextui-org/system@0.0.0-dev-v2-20230505232443
+  - @nextui-org/theme@0.0.0-dev-v2-20230505232443
+  - @nextui-org/skeleton@0.0.0-dev-v2-20230505232443
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
@@ -69,7 +69,8 @@
     "@nextui-org/spacer": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/kbd": "workspace:*",
-    "@nextui-org/tabs": "workspace:*"
+    "@nextui-org/tabs": "workspace:*",
+    "@nextui-org/skeleton": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18",

packages/core/react/src/index.ts

@@ -29,3 +29,4 @@ export * from "@nextui-org/spacer";
 export * from "@nextui-org/divider";
 export * from "@nextui-org/kbd";
 export * from "@nextui-org/tabs";
+export * from "@nextui-org/skeleton";

packages/core/system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/system
 
+## 0.0.0-dev-v2-20230505232443
+
+### Patch Changes
+
+- New componente skeleton, snippet improved
+
 ## 0.0.0-dev-v2-20230501173002
 
 ### Patch Changes

packages/core/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230501173002",
+  "version": "0.0.0-dev-v2-20230505232443",
   "description": "NextUI system primitives",
   "keywords": [
     "system"