chore(root): merge feat/v2

nextui-org · Jul 29, 2023 · aedda9d · aedda9d · vercel · Jul 29, 2023
2 parents 38afbba + cd941e6
commit aedda9d
Show file tree

Hide file tree

Showing 187 changed files with 576 additions and 514 deletions.
diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
@@ -253,9 +253,7 @@ export default function NextUIPerf() {
 
       <Button>Click Me!</Button>
 
-      <MyButton2 disableRipple color="foreground">
-        Press Me!
-      </MyButton2>
+      <MyButton2 color="foreground">Press Me!</MyButton2>
     </div>
   );
 }
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
@@ -54,7 +54,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
   const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLElement>(null);
   const isMounted = useIsMounted();
 
   const pathname = usePathname();

diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -231,4 +231,51 @@ import customVariantsSlots from "@/content/customization/custom-variants/slots-c
   All NextUI components have the `Styles source` link on top of the page. This link will take you to
   the styles source code of the component. You can use this as a reference when creating your own
   custom component.
-</Blockquote>
+</Blockquote>
+
+
+### Types
+
+### Main Function
+
+```jsx
+const Component = extendVariants(BaseComponent, options, config)
+
+/**
+ * BaseComponent -> NextUI component to extend
+ * options -> the variants to add/modify
+ * config -> config to extend the component
+ */
+
+```
+
+### Options
+
+```ts
+type ExtendVariantsOptions = {
+  variants?: Record<string, Record<string, ClassValue>>,
+  defaultVariants?: Record<string, ClassValue>,
+  compoundVariants?: Array<Record<string, string> & ClassProp>
+}
+
+```
+
+### Config
+
+```ts
+  /**
+   * Whether to merge the class names with `tailwind-merge` library.
+   * It's avoid to have duplicate tailwind classes. (Recommended)
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
+   * @default true
+   */
+  twMerge?: boolean;
+  /**
+   * The config object for `tailwind-merge` library.
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
+   */
+  twMergeConfig?: TWMergeConfig;
+ ``` 
+
+> **Note**: See the [Tailwind Merge Config](https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md) to learn more about it.
+
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230729132654",
+  "version": "0.0.0-dev-v2-20230729152229",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
@@ -1,14 +1,14 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {AnimatePresence, motion, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
-export interface AccordionItemProps extends Omit<UseAccordionItemProps, "ref"> {}
+export interface AccordionItemProps extends UseAccordionItemProps {}
 
-const AccordionItem = forwardRef<HTMLButtonElement, AccordionItemProps>((props, ref) => {
+const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
     classNames,
@@ -30,7 +30,7 @@ const AccordionItem = forwardRef<HTMLButtonElement, AccordionItemProps>((props,
     getSubtitleProps,
     getContentProps,
     getIndicatorProps,
-  } = useAccordionItem({ref, ...props});
+  } = useAccordionItem({...props, ref});
 
   const willChange = useWillChange();
 

diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx
@@ -1,14 +1,14 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {LayoutGroup} from "framer-motion";
 import {Divider} from "@nextui-org/divider";
 import {Fragment, Key, useCallback, useMemo} from "react";
 
 import {UseAccordionProps, useAccordion} from "./use-accordion";
 import AccordionItem from "./accordion-item";
 
-export interface AccordionProps extends Omit<UseAccordionProps, "ref"> {}
+export interface AccordionProps extends UseAccordionProps {}
 
-const AccordionGroup = forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
+const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
   const {
     Component,
     values,
@@ -20,8 +20,8 @@ const AccordionGroup = forwardRef<HTMLDivElement, AccordionProps>((props, ref) =
     handleFocusChanged: handleFocusChangedProps,
     itemClasses,
   } = useAccordion({
-    ref,
     ...props,
+    ref,
   });
   const handleFocusChanged = useCallback(
     (isFocused: boolean, key: Key) => handleFocusChangedProps(isFocused, key),

diff --git a/packages/components/accordion/stories/accordion.stories.tsx b/packages/components/accordion/stories/accordion.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {accordionItem} from "@nextui-org/theme";
 import {
   AnchorIcon,
@@ -52,7 +52,7 @@ const defaultProps = {
 const defaultContent =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
 
-const Template: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const Template = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
       {defaultContent}
@@ -66,7 +66,7 @@ const Template: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
   </Accordion>
 );
 
-const TemplateWithSubtitle: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const TemplateWithSubtitle = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
       {defaultContent}
@@ -89,7 +89,7 @@ const TemplateWithSubtitle: ComponentStory<typeof Accordion> = (args: AccordionP
   </Accordion>
 );
 
-const TemplateWithStartContent: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const TemplateWithStartContent = (args: AccordionProps) => (
   <Accordion {...args} variant="shadow">
     <AccordionItem
       key="1"
@@ -146,7 +146,7 @@ const TemplateWithStartContent: ComponentStory<typeof Accordion> = (args: Accord
   </Accordion>
 );
 
-const VariantsTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const VariantsTemplate = (args: AccordionProps) => (
   <div className="flex flex-col gap-8 mb-24">
     <div className="flex flex-col gap-4">
       <h3>Default</h3>
@@ -207,7 +207,7 @@ const VariantsTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps
   </div>
 );
 
-const CustomInidicatorTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const CustomInidicatorTemplate = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
       {defaultContent}
@@ -221,7 +221,7 @@ const CustomInidicatorTemplate: ComponentStory<typeof Accordion> = (args: Accord
   </Accordion>
 );
 
-const ControlledTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
+const ControlledTemplate = (args: AccordionProps) => {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
 
   // eslint-disable-next-line no-console
@@ -242,7 +242,7 @@ const ControlledTemplate: ComponentStory<typeof Accordion> = (args: AccordionPro
   );
 };
 
-const CustomWithClassNamesTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
+const CustomWithClassNamesTemplate = (args: AccordionProps) => {
   const itemClasses: AccordionItemProps["classNames"] = {
     base: "py-0 w-full",
     title: "font-normal text-base",

diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230729132654",
+  "version": "0.0.0-dev-v2-20230729152229",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

diff --git a/packages/components/avatar/src/avatar-group.tsx b/packages/components/avatar/src/avatar-group.tsx
@@ -1,12 +1,12 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {AvatarGroupProvider} from "./avatar-group-context";
 import {useAvatarGroup, UseAvatarGroupProps} from "./use-avatar-group";
 import Avatar from "./avatar";
 
-export interface AvatarGroupProps extends Omit<UseAvatarGroupProps, "ref"> {}
+export interface AvatarGroupProps extends UseAvatarGroupProps {}
 
-const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
+const AvatarGroup = forwardRef<"div", AvatarGroupProps>((props, ref) => {
   const {
     Component,
     clones,
@@ -15,8 +15,8 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) =>
     renderCount = (count) => <Avatar className="hover:-translate-x-0" name={`+${count}`} />,
     getAvatarGroupProps,
   } = useAvatarGroup({
-    ref,
     ...props,
+    ref,
   });
 
   return (

diff --git a/packages/components/avatar/src/avatar.tsx b/packages/components/avatar/src/avatar.tsx
@@ -1,11 +1,12 @@
-import {useMemo, forwardRef} from "react";
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {AvatarIcon} from "./avatar-icon";
 import {useAvatar, UseAvatarProps} from "./use-avatar";
 
-export interface AvatarProps extends Omit<UseAvatarProps, "ref"> {}
+export interface AvatarProps extends UseAvatarProps {}
 
-const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
+const Avatar = forwardRef<"span", AvatarProps>((props, ref) => {
   const {
     Component,
     ImgComponent,
@@ -21,8 +22,8 @@ const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
     getAvatarProps,
     getImageProps,
   } = useAvatar({
-    ref,
     ...props,
+    ref,
   });
 
   const fallback = useMemo(() => {

diff --git a/packages/components/avatar/src/use-avatar.ts b/packages/components/avatar/src/use-avatar.ts
@@ -1,4 +1,4 @@
-import type {AvatarVariantProps, AvatarSlots, SlotsToClasses} from "@nextui-org/theme";
+import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {avatar} from "@nextui-org/theme";
 import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
@@ -13,11 +13,7 @@ import {useHover} from "@react-aria/interactions";
 
 import {useAvatarGroupContext} from "./avatar-group-context";
 
-export interface UseAvatarProps
-  extends Omit<
-    HTMLNextUIProps<"span", AvatarVariantProps>,
-    "children" | "isInGroup" | "isInGridGroup"
-  > {
+interface Props extends HTMLNextUIProps<"span"> {
   /**
    * Ref to the DOM node.
    */
@@ -97,6 +93,9 @@ export interface UseAvatarProps
   classNames?: SlotsToClasses<AvatarSlots>;
 }
 
+export type UseAvatarProps = Props &
+  Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
+
 export function useAvatar(props: UseAvatarProps = {}) {
   const groupContext = useAvatarGroupContext();
   const isInGroup = !!groupContext;

diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 
 import {Avatar, AvatarGroup, AvatarGroupProps} from "../src";
 
@@ -34,7 +34,7 @@ export default {
   },
 } as ComponentMeta<typeof AvatarGroup>;
 
-const Template: ComponentStory<typeof AvatarGroup> = (args: AvatarGroupProps) => (
+const Template = (args: AvatarGroupProps) => (
   <AvatarGroup {...args}>
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026705d" />
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026706d" />

diff --git a/packages/components/avatar/stories/avatar.stories.tsx b/packages/components/avatar/stories/avatar.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {Activity, Camera} from "@nextui-org/shared-icons";
 import {avatar} from "@nextui-org/theme";
 
@@ -30,7 +30,7 @@ export default {
   },
 } as ComponentMeta<typeof Avatar>;
 
-const Template: ComponentStory<typeof Avatar> = (args: AvatarProps) => <Avatar {...args} />;
+const Template = (args: AvatarProps) => <Avatar {...args} />;
 
 const defaultProps = {
   ...avatar.defaultVariants,

diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230729132654",
+  "version": "0.0.0-dev-v2-20230729152229",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

diff --git a/packages/components/badge/src/badge.tsx b/packages/components/badge/src/badge.tsx
@@ -1,17 +1,17 @@
 import type {ReactNode} from "react";
 
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseBadgeProps, useBadge} from "./use-badge";
 
-export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {
+export interface BadgeProps extends UseBadgeProps {
   children: ReactNode;
 }
 
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+const Badge = forwardRef<"span", BadgeProps>((props, ref) => {
   const {Component, children, content, slots, classNames, getBadgeProps} = useBadge({
-    ref,
     ...props,
+    ref,
   });
 
   return (

diff --git a/packages/components/badge/src/use-badge.ts b/packages/components/badge/src/use-badge.ts
@@ -8,7 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
 
-export interface Props extends Omit<HTMLNextUIProps<"span">, "content"> {
+interface Props extends HTMLNextUIProps<"span", "content"> {
   /**
    * Ref to the DOM node.
    */