archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

Fix/props suggestions (#1225)

Browse Source 
* refactor(core): new forwardRef types created, stories modified, important changes implemented

* feat(docs): custom variants api added, components ref fixed

* fix(components): omit ref removed
This commit is contained in:
Junior Garcia 2023-07-28 18:00:18 -03:00 committed by GitHub
parent eec0ab7584
commit cd941e64c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
187 changed files with 576 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/docs/app/examples/perf/page.tsx
View File

@ -235,9 +235,7 @@ export default function NextUIPerf() {
<Button>Click Me!</Button>
<MyButton2 disableRipple color="foreground">
Press Me!
</MyButton2>
<MyButton2 color="foreground">Press Me!</MyButton2>
</div>
);
}

2
apps/docs/components/navbar.tsx
View File

@ -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();

49
apps/docs/content/docs/customization/custom-variants.mdx
View File

@ -213,4 +213,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.

2
packages/components/accordion/package.json
View File

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

8
packages/components/accordion/src/accordion-item.tsx
View File

@ -1,4 +1,4 @@
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";
@ -6,9 +6,9 @@ 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();

8
packages/components/accordion/src/accordion.tsx
View File

@ -1,4 +1,4 @@
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";
@ -6,9 +6,9 @@ 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),

16
packages/components/accordion/stories/accordion.stories.tsx
View File

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

2
packages/components/avatar/package.json
View File

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

8
packages/components/avatar/src/avatar-group.tsx
View File

@ -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 (

9
packages/components/avatar/src/avatar.tsx
View File

@ -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(() => {

11
packages/components/avatar/src/use-avatar.ts
View File

@ -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;

4
packages/components/avatar/stories/avatar-group.stories.tsx
View File

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

4
packages/components/avatar/stories/avatar.stories.tsx
View File

@ -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,

2
packages/components/badge/package.json
View File

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

8
packages/components/badge/src/badge.tsx
View File

@ -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 (

2
packages/components/badge/src/use-badge.ts
View File

@ -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.
*/

8
packages/components/badge/stories/badge.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {badge} from "@nextui-org/theme";
import {Avatar} from "@nextui-org/avatar";
import {CheckIcon} from "@nextui-org/shared-icons";
@ -65,7 +65,7 @@ const defaultProps = {
content: 5,
};
const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
const Template = (args: BadgeProps) => (
<Badge {...args}>
<Avatar
isBordered={args.classNames?.badge?.includes("bottom")}
@ -75,7 +75,7 @@ const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
</Badge>
);
const ShapesTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => (
const ShapesTemplate = (args: BadgeProps) => (
<div className="flex gap-4 items-center">
<Badge {...args} shape="rectangle">
<Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
@ -86,7 +86,7 @@ const ShapesTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => (
</div>
);
const InvisibleTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => {
const InvisibleTemplate = (args: BadgeProps) => {
const [isInvisible, setIsInvisible] = React.useState(false);
return (

2
packages/components/button/package.json
View File

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

8
packages/components/button/src/button-group.tsx
View File

@ -1,14 +1,14 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {ButtonGroupProvider} from "./button-group-context";
import {UseButtonGroupProps, useButtonGroup} from "./use-button-group";
export interface ButtonGroupProps extends Omit<UseButtonGroupProps, "ref"> {}
export interface ButtonGroupProps extends UseButtonGroupProps {}
const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
const ButtonGroup = forwardRef<"div", ButtonGroupProps>((props, ref) => {
const {Component, domRef, context, children, classNames, getButtonGroupProps} = useButtonGroup({
ref,
...props,
ref,
});
return (

8
packages/components/button/src/button.tsx
View File

@ -1,12 +1,12 @@
import {Spinner} from "@nextui-org/spinner";
import {Ripple} from "@nextui-org/ripple";
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseButtonProps, useButton} from "./use-button";
export interface ButtonProps extends Omit<UseButtonProps, "ref"> {}
export interface ButtonProps extends UseButtonProps {}
const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const Button = forwardRef<"button", ButtonProps>((props, ref) => {
const {
Component,
domRef,
@ -22,8 +22,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
disableRipple,
getButtonProps,
} = useButton({
ref,
...props,
ref,
});
return (

2
packages/components/button/src/use-button-group.ts
View File

@ -6,7 +6,7 @@ import {buttonGroup} from "@nextui-org/theme";
import {HTMLNextUIProps, PropGetter, mapPropsVariants} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/react-utils";
import {useMemo, useCallback} from "react";
interface Props extends HTMLNextUIProps<"div">, ButtonGroupVariantProps {
interface Props extends HTMLNextUIProps, ButtonGroupVariantProps {
/**
* Ref to the DOM node.
*/

4
packages/components/button/stories/button-group.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {button, buttonGroup} from "@nextui-org/theme";
import {Button, ButtonGroup, ButtonGroupProps} from "../src";
@ -55,7 +55,7 @@ const defaultProps = {
...buttonGroup.defaultVariants,
};
const Template: ComponentStory<typeof ButtonGroup> = (args: ButtonGroupProps) => (
const Template = (args: ButtonGroupProps) => (
<ButtonGroup {...args}>
<Button>One</Button>
<Button>Two</Button>

6
packages/components/button/stories/button.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {button} from "@nextui-org/theme";
import {Camera, HeadphonesIcon, Notification} from "@nextui-org/shared-icons";
@ -68,9 +68,9 @@ const defaultProps = {
...button.defaultVariants,
};
const Template: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
const Template = (args: ButtonProps) => <Button {...args} />;
const StateTemplate: ComponentStory<typeof Button> = (args: ButtonProps) => {
const StateTemplate = (args: ButtonProps) => {
const [isOpen, setIsOpen] = React.useState(false);
const handleClick = () => {

2
packages/components/card/package.json
View File

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

2
packages/components/card/src/card-body.tsx
View File

@ -4,7 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
import {useCardContext} from "./card-context";
const CardBody = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
const CardBody = forwardRef<"div", HTMLNextUIProps<"div">>((props, ref) => {
const {as, className, children, ...otherProps} = props;
const Component = as || "div";

2
packages/components/card/src/card-footer.tsx
View File

@ -6,7 +6,7 @@ import {useCardContext} from "./card-context";
export interface CardFooterProps extends HTMLNextUIProps<"div"> {}
const CardFooter = forwardRef<CardFooterProps, "div">((props, ref) => {
const CardFooter = forwardRef<"div", CardFooterProps>((props, ref) => {
const {as, className, children, ...otherProps} = props;
const Component = as || "div";

2
packages/components/card/src/card-header.tsx
View File

@ -4,7 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
import {useCardContext} from "./card-context";
const CardHeader = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
const CardHeader = forwardRef<"div", HTMLNextUIProps<"div">>((props, ref) => {
const {as, className, children, ...otherProps} = props;
const Component = as || "div";

8
packages/components/card/src/card.tsx
View File

@ -1,12 +1,12 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {Ripple} from "@nextui-org/ripple";
import {CardProvider} from "./card-context";
import {useCard, UseCardProps} from "./use-card";
export interface CardProps extends Omit<UseCardProps, "ref"> {}
export interface CardProps extends UseCardProps {}
const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
const Card = forwardRef<"div", CardProps>((props, ref) => {
const {
children,
context,
@ -17,8 +17,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
disableRipple,
getCardProps,
} = useCard({
ref,
...props,
ref,
});
return (

20
packages/components/card/stories/card.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {card} from "@nextui-org/theme";
import {Link} from "@nextui-org/link";
import {Button} from "@nextui-org/button";
@ -74,7 +74,7 @@ const defaultProps = {
disableRipple: false,
};
const Template: ComponentStory<typeof Card> = (args: CardProps) => (
const Template = (args: CardProps) => (
<Card {...args} className="max-w-md">
<CardBody>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed</p>
@ -82,7 +82,7 @@ const Template: ComponentStory<typeof Card> = (args: CardProps) => (
</Card>
);
const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const WithDividerTemplate = (args: CardProps) => (
<Card {...args} className="max-w-md">
<CardHeader className="border-b border-divider dark:border-divider-dark">
<strong>Description</strong>
@ -99,7 +99,7 @@ const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
</Card>
);
const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const WithFooterTemplate = (args: CardProps) => (
<Card {...args} className="p-4 max-w-md">
<CardHeader className="flex gap-3">
<Image
@ -125,7 +125,7 @@ const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
</Card>
);
const WithAbsImageHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const WithAbsImageHeaderTemplate = (args: CardProps) => (
<Card {...args} className="max-w-[330px]">
<CardHeader className="absolute top-2 z-20">
<div className="flex flex-col">
@ -143,7 +143,7 @@ const WithAbsImageHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps
</Card>
);
const WithAbsImgHeaderFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const WithAbsImgHeaderFooterTemplate = (args: CardProps) => (
<Card className="w-[330px] bg-zinc-100 dark:bg-zinc-100" {...args}>
<CardHeader className="absolute top-2 z-10">
<div className="flex flex-col gap-2">
@ -174,7 +174,7 @@ const WithAbsImgHeaderFooterTemplate: ComponentStory<typeof Card> = (args: CardP
</Card>
);
const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const CoverImgTemplate = (args: CardProps) => (
<div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
<Card {...args} className="col-span-12 sm:col-span-4">
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
@ -257,7 +257,7 @@ const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
</div>
);
const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
const CenterImgTemplate = (args: CardProps) => (
<Card {...args} className="max-w-fit py-4 px-0">
<CardHeader className="pb-0 pt-2 px-4 flex-col !items-start">
<p className="text-xs uppercase font-bold">Daily Mix</p>
@ -275,7 +275,7 @@ const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
</Card>
);
const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) => {
const PrimaryActionTemplate = (args: CardProps) => {
const list = [
{
title: "Orange",
@ -348,7 +348,7 @@ const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
);
};
const CenterImgWithHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps) => {
const CenterImgWithHeaderTemplate = (args: CardProps) => {
const list = [
{
title: "Mac",

2
packages/components/checkbox/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/checkbox",
"version": "0.0.0-dev-v2-20230728014036",
"version": "0.0.0-dev-v2-20230728201112",
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"keywords": [
"checkbox"

8
packages/components/checkbox/src/checkbox-group.tsx
View File

@ -1,11 +1,11 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {CheckboxGroupProvider} from "./checkbox-group-context";
import {UseCheckboxGroupProps, useCheckboxGroup} from "./use-checkbox-group";
export interface CheckboxGroupProps extends Omit<UseCheckboxGroupProps, "ref"> {}
export interface CheckboxGroupProps extends UseCheckboxGroupProps {}
const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
const CheckboxGroup = forwardRef<"div", CheckboxGroupProps>((props, ref) => {
const {
children,
context,
@ -17,7 +17,7 @@ const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref
getWrapperProps,
getDescriptionProps,
getErrorMessageProps,
} = useCheckboxGroup({ref, ...props});
} = useCheckboxGroup({...props, ref});
return (
<div {...getGroupProps()}>

8
packages/components/checkbox/src/checkbox.tsx
View File

@ -1,13 +1,13 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {cloneElement, ReactElement} from "react";
import {UseCheckboxProps, useCheckbox} from "./use-checkbox";
import {CheckboxIcon} from "./checkbox-icon";
export interface CheckboxProps extends Omit<UseCheckboxProps, "ref"> {}
export interface CheckboxProps extends UseCheckboxProps {}
const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
const Checkbox = forwardRef<"label", CheckboxProps>((props, ref) => {
const {
Component,
children,
@ -18,8 +18,8 @@ const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
getIconProps,
getLabelProps,
} = useCheckbox({
ref,
...props,
ref,
});
const clonedIcon =

3
packages/components/checkbox/src/use-checkbox-group.ts
View File

@ -14,7 +14,7 @@ import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
import {CheckboxProps} from "./index";
interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
interface Props extends HTMLNextUIProps<"div"> {
/**
* Ref to the DOM node.
*/
@ -47,6 +47,7 @@ interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
}
export type UseCheckboxGroupProps = Props &
AriaCheckboxGroupProps &
Partial<
Pick<
CheckboxProps,

4
packages/components/checkbox/stories/checkbox-group.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {checkbox} from "@nextui-org/theme";
import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";
@ -48,7 +48,7 @@ const defaultProps = {
...checkbox.defaultVariants,
};
const Template: ComponentStory<typeof CheckboxGroup> = (args: CheckboxGroupProps) => (
const Template = (args: CheckboxGroupProps) => (
<CheckboxGroup {...args}>
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
<Checkbox value="sydney">Sydney</Checkbox>

6
packages/components/checkbox/stories/checkbox.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {checkbox, colors} from "@nextui-org/theme";
import {CheckIcon, CloseIcon} from "@nextui-org/shared-icons";
import {User} from "@nextui-org/user";
@ -56,9 +56,9 @@ const defaultProps: CheckboxProps = {
children: "Option",
};
const Template: ComponentStory<typeof Checkbox> = (args: CheckboxProps) => <Checkbox {...args} />;
const Template = (args: CheckboxProps) => <Checkbox {...args} />;
const ControlledTemplate: ComponentStory<typeof Checkbox> = (args: CheckboxProps) => {
const ControlledTemplate = (args: CheckboxProps) => {
const [selected, setSelected] = React.useState<boolean>(true);
React.useEffect(() => {

2
packages/components/chip/package.json
View File

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

10
packages/components/chip/src/chip.tsx
View File

@ -1,12 +1,12 @@
import {CloseFilledIcon} from "@nextui-org/shared-icons";
import {useMemo, forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {useMemo} from "react";
import {UseChipProps, useChip} from "./use-chip";
export interface ChipProps
extends Omit<UseChipProps, "ref" | "isOneChar" | "isCloseButtonFocusVisible"> {}
export interface ChipProps extends Omit<UseChipProps, "isOneChar" | "isCloseButtonFocusVisible"> {}
const Chip = forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
const Chip = forwardRef<"div", ChipProps>((props, ref) => {
const {
Component,
children,
@ -19,8 +19,8 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
getCloseButtonProps,
getChipProps,
} = useChip({
ref,
...props,
ref,
});
const start = useMemo(() => {

2
packages/components/chip/src/use-chip.ts
View File

@ -12,7 +12,7 @@ import {ReactRef} from "@nextui-org/react-utils";
import {useMemo, isValidElement, cloneElement} from "react";
import {PressEvent} from "@react-types/shared";
export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
export interface UseChipProps extends HTMLNextUIProps, ChipVariantProps {
/**
* Ref to the DOM node.
*/

4
packages/components/chip/stories/chip.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {chip} from "@nextui-org/theme";
import {Avatar} from "@nextui-org/avatar";
import {CheckIcon} from "@nextui-org/shared-icons";
@ -47,7 +47,7 @@ const defaultProps = {
children: "Chip",
};
const Template: ComponentStory<typeof Chip> = (args: ChipProps) => <Chip {...args} />;
const Template = (args: ChipProps) => <Chip {...args} />;
export const Default = Template.bind({});
Default.args = {

2
packages/components/code/package.json
View File

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

8
packages/components/code/src/code.tsx
View File

@ -1,11 +1,11 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {useCode, UseCodeProps} from "./use-code";
export interface CodeProps extends Omit<UseCodeProps, "ref"> {}
export interface CodeProps extends UseCodeProps {}
const Code = forwardRef<HTMLElement, CodeProps>((props, ref) => {
const {Component, children, getCodeProps} = useCode({ref, ...props});
const Code = forwardRef<"div", CodeProps>((props, ref) => {
const {Component, children, getCodeProps} = useCode({...props, ref});
return <Component {...getCodeProps()}>{children}</Component>;
});

4
packages/components/code/stories/code.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {code} from "@nextui-org/theme";
import {Code, CodeProps} from "../src";
@ -34,7 +34,7 @@ const defaultProps = {
...code.defaultVariants,
};
const Template: ComponentStory<typeof Code> = (args: CodeProps) => <Code {...args} />;
const Template = (args: CodeProps) => <Code {...args} />;
export const Default = Template.bind({});
Default.args = {

2
packages/components/divider/package.json
View File

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

4
packages/components/divider/src/divider.tsx
View File

@ -1,10 +1,10 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseDividerProps, useDivider} from "./use-divider";
export interface DividerProps extends Omit<UseDividerProps, "children"> {}
const Divider = forwardRef<HTMLElement, DividerProps>((props, ref) => {
const Divider = forwardRef<"div", DividerProps>((props, ref) => {
const {Component, getDividerProps} = useDivider({ref, ...props});
return <Component {...getDividerProps()} />;

4
packages/components/divider/src/use-divider.ts
View File

@ -7,14 +7,14 @@ import {useDOMRef} from "@nextui-org/react-utils";
import {Ref, useCallback, useMemo} from "react";
import {mergeProps} from "@react-aria/utils";
interface Props extends HTMLNextUIProps<"hr", DividerVariantProps> {
interface Props extends HTMLNextUIProps<"hr"> {
/**
* Ref to the DOM node.
*/
ref?: Ref<HTMLElement> | undefined;
}
export type UseDividerProps = Props & Omit<AriaSeparatorProps, "elementType">;
export type UseDividerProps = Props & DividerVariantProps & Omit<AriaSeparatorProps, "elementType">;
export function useDivider(props: UseDividerProps) {
const {ref, as, className, orientation, ...otherProps} = props;

4
packages/components/divider/stories/divider.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {divider} from "@nextui-org/theme";
import {Divider, DividerProps} from "../src";
@ -28,7 +28,7 @@ const defaultProps = {
...divider.defaultVariants,
};
const Template: ComponentStory<typeof Divider> = (args: DividerProps) => (
const Template = (args: DividerProps) => (
<div className="max-w-md">
<div className="space-y-1">
<h4 className="text-base font-medium">NextUI Components</h4>

2
packages/components/dropdown/package.json
View File

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

5
packages/components/dropdown/src/dropdown-item.tsx
View File

@ -1,4 +1,5 @@
import {useMemo, ReactNode, forwardRef} from "react";
import {useMemo, ReactNode} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseDropdownItemProps, useDropdownItem} from "./use-dropdown-item";
import {DropdownSelectedIcon} from "./dropdown-selected-icon";
@ -8,7 +9,7 @@ export interface DropdownItemProps<T extends object = object> extends UseDropdow
/**
* @internal
*/
const DropdownItem = forwardRef<HTMLLIElement, DropdownItemProps>((props, _) => {
const DropdownItem = forwardRef<"li", DropdownItemProps>((props, _) => {
const {
Component,
slots,

6
packages/components/dropdown/src/dropdown-menu.tsx
View File

@ -6,8 +6,8 @@ import {AriaMenuProps} from "@react-types/menu";
import {useTreeState} from "@react-stately/tree";
import {dropdownMenu} from "@nextui-org/theme";
import {FocusScope} from "@react-aria/focus";
import {useMemo, forwardRef} from "react";
import {HTMLNextUIProps} from "@nextui-org/system";
import {useMemo} from "react";
import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
import DropdownSection from "./dropdown-section";
import DropdownItem, {DropdownItemProps} from "./dropdown-item";
@ -42,7 +42,7 @@ export interface DropdownMenuProps<T = object>
itemClasses?: DropdownItemProps["classNames"];
}
const DropdownMenu = forwardRef<HTMLUListElement, DropdownMenuProps>(
const DropdownMenu = forwardRef<"ul", DropdownMenuProps>(
(
{
as,

5
packages/components/dropdown/src/dropdown-section.tsx
View File

@ -2,7 +2,8 @@ import {dropdownSection} from "@nextui-org/theme";
import {Node} from "@react-types/shared";
import {TreeState} from "@react-stately/tree";
import {useMenuSection} from "@react-aria/menu";
import {useMemo, Key, forwardRef} from "react";
import {useMemo, Key} from "react";
import {forwardRef} from "@nextui-org/system";
import {mergeProps} from "@react-aria/utils";
import {clsx} from "@nextui-org/shared-utils";
import {Divider} from "@nextui-org/divider";
@ -40,7 +41,7 @@ export interface DropdownSectionProps<T extends object = object> extends Dropdow
/**
* @internal
*/
const DropdownSection = forwardRef<HTMLLIElement, DropdownSectionProps>(
const DropdownSection = forwardRef<"li", DropdownSectionProps>(
(
{
item,

4
packages/components/dropdown/src/dropdown-trigger.tsx
View File

@ -1,4 +1,4 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {PopoverTrigger} from "@nextui-org/popover";
import {useDropdownContext} from "./dropdown-context";
@ -11,7 +11,7 @@ export interface DropdownTriggerProps {
* DropdownTrigger opens the popover's content. It must be an interactive element
* such as `button` or `a`.
*/
const DropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>((props, _) => {
const DropdownTrigger = forwardRef<"button", DropdownTriggerProps>((props, _) => {
const {getMenuTriggerProps} = useDropdownContext();
const {children, ...otherProps} = props;

5
packages/components/dropdown/src/use-dropdown.ts
View File

@ -10,8 +10,7 @@ import {PopoverProps} from "@nextui-org/popover";
import {useMemo, useRef} from "react";
import {mergeProps} from "@react-aria/utils";
export interface UseDropdownProps
extends HTMLNextUIProps<"div", Omit<PopoverProps, "children" | "color" | "variant">> {
interface Props extends HTMLNextUIProps<"div"> {
/**
* Type of overlay that is opened by the trigger.
*/
@ -37,6 +36,8 @@ export interface UseDropdownProps
closeOnSelect?: boolean;
}
export type UseDropdownProps = Props & Omit<PopoverProps, "children" | "color" | "variant">;
export function useDropdown(props: UseDropdownProps) {
const {
as,

52
packages/components/dropdown/stories/dropdown.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {dropdown, popover} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Avatar} from "@nextui-org/avatar";
@ -113,11 +113,7 @@ const defaultProps = {
disableAnimation: false,
};
const Template: ComponentStory<any> = ({
color,
variant,
...args
}: DropdownProps & DropdownMenuProps) => (
const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
<Dropdown {...args}>
<DropdownTrigger>
<Button>Trigger</Button>
@ -133,11 +129,7 @@ const Template: ComponentStory<any> = ({
</Dropdown>
);
const DividerTemplate: ComponentStory<any> = ({
color,
variant,
...args
}: DropdownProps & DropdownMenuProps) => (
const DividerTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
<Dropdown {...args}>
<DropdownTrigger>
<Button>Trigger</Button>
@ -153,11 +145,7 @@ const DividerTemplate: ComponentStory<any> = ({
</Dropdown>
);
const DisabledKeysTemplate: ComponentStory<any> = ({
color,
variant,
...args
}: DropdownProps & DropdownMenuProps) => (
const DisabledKeysTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
<Dropdown {...args}>
<DropdownTrigger>
<Button>Trigger</Button>
@ -179,11 +167,7 @@ const DisabledKeysTemplate: ComponentStory<any> = ({
</Dropdown>
);
const SingleSelectionTemplate: ComponentStory<any> = ({
color,
variant,
...args
}: DropdownProps & DropdownMenuProps) => {
const SingleSelectionTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => {
const [selected, setSelected] = React.useState<string | Set<React.Key>>(new Set(["text"]));
const selectedValue = React.useMemo(
@ -218,7 +202,7 @@ const SingleSelectionTemplate: ComponentStory<any> = ({
);
};
const MultipleSelectionTemplate: ComponentStory<any> = ({
const MultipleSelectionTemplate = ({
color,
variant,
...args
@ -258,7 +242,7 @@ const MultipleSelectionTemplate: ComponentStory<any> = ({
);
};
const WithShortcutTemplate: ComponentStory<any> = ({color, variant, ...args}) => (
const WithShortcutTemplate = ({color, variant, ...args}) => (
<Dropdown {...args}>
<DropdownTrigger>
<Button>Trigger</Button>
@ -280,12 +264,12 @@ const WithShortcutTemplate: ComponentStory<any> = ({color, variant, ...args}) =>
</Dropdown>
);
const WithStartContentTemplate: ComponentStory<any> = ({
const WithStartContentTemplate = ({
color,
variant,
disableAnimation,
...args
}) => {
}: DropdownProps & DropdownMenuProps) => {
const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
return (
@ -331,12 +315,7 @@ const WithStartContentTemplate: ComponentStory<any> = ({
);
};
const WithEndContentTemplate: ComponentStory<any> = ({
color,
variant,
disableAnimation,
...args
}) => {
const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) => {
const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
return (
@ -369,12 +348,7 @@ const WithEndContentTemplate: ComponentStory<any> = ({
);
};
const WithDescriptionTemplate: ComponentStory<any> = ({
color,
variant,
disableAnimation,
...args
}) => {
const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) => {
const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
return (
@ -424,7 +398,7 @@ const WithDescriptionTemplate: ComponentStory<any> = ({
);
};
const WithSectionsTemplate: ComponentStory<any> = ({color, variant, disableAnimation, ...args}) => {
const WithSectionsTemplate = ({color, variant, disableAnimation, ...args}) => {
const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
return (
@ -484,7 +458,7 @@ const WithSectionsTemplate: ComponentStory<any> = ({color, variant, disableAnima
);
};
const CustomTriggerTemplate: ComponentStory<any> = ({variant, ...args}) => {
const CustomTriggerTemplate = ({variant, ...args}) => {
return (
<div className="flex items-center gap-10">
<Dropdown {...args} placement="bottom-end">

2
packages/components/image/package.json
View File

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

9
packages/components/image/src/image.tsx
View File

@ -1,10 +1,11 @@
import {cloneElement, forwardRef} from "react";
import {cloneElement} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseImageProps, useImage} from "./use-image";
export interface ImageProps extends Omit<UseImageProps, "ref" | "showSkeleton"> {}
export interface ImageProps extends Omit<UseImageProps, "showSkeleton"> {}
const Image = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
const Image = forwardRef<"img", ImageProps>((props, ref) => {
const {
Component,
domRef,
@ -19,8 +20,8 @@ const Image = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
getWrapperProps,
getBlurredImgProps,
} = useImage({
ref,
...props,
ref,
});
const img = <Component ref={domRef} {...getImgProps()} />;

6
packages/components/image/stories/image.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {image} from "@nextui-org/theme";
import {Image, ImageProps} from "../src";
@ -52,9 +52,9 @@ const defaultProps = {
disableSkeleton: true,
};
const Template: ComponentStory<typeof Image> = (args: ImageProps) => <Image {...args} />;
const Template = (args: ImageProps) => <Image {...args} />;
const LoadingTemplate: ComponentStory<typeof Image> = (args: ImageProps) => {
const LoadingTemplate = (args: ImageProps) => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {

2
packages/components/input/package.json
View File

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

10
packages/components/input/src/input.tsx
View File

@ -1,12 +1,12 @@
import {CloseFilledIcon} from "@nextui-org/shared-icons";
import {useMemo, forwardRef} from "react";
import {useMemo} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseInputProps, useInput} from "./use-input";
export interface InputProps
extends Omit<UseInputProps, "ref" | "isLabelPlaceholder" | "isMultiline"> {}
export interface InputProps extends Omit<UseInputProps, "isLabelPlaceholder" | "isMultiline"> {}
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const Input = forwardRef<"input", InputProps>((props, ref) => {
const {
Component,
label,
@ -30,7 +30,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
getDescriptionProps,
getErrorMessageProps,
getClearButtonProps,
} = useInput({ref, ...props});
} = useInput({...props, ref});
const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;

8
packages/components/input/src/textarea.tsx
View File

@ -1,4 +1,4 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {mergeProps} from "@react-aria/utils";
import TextareaAutosize from "react-textarea-autosize";
@ -24,7 +24,7 @@ export type TextareaHeightChangeMeta = {
rowHeight: number;
};
export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputProps> {
export interface TextAreaProps extends Omit<UseInputProps, OmittedInputProps> {
/**
* Minimum number of rows to show for textarea
* @default 3
@ -51,7 +51,7 @@ export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputP
onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
}
const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
const Textarea = forwardRef<"textarea", TextAreaProps>(
(
{style, minRows = 3, maxRows = 8, cacheMeasurements = false, onHeightChange, ...otherProps},
ref,
@ -70,7 +70,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
getHelperWrapperProps,
getDescriptionProps,
getErrorMessageProps,
} = useInput<HTMLTextAreaElement>({ref, ...otherProps, isMultiline: true});
} = useInput<HTMLTextAreaElement>({...otherProps, ref, isMultiline: true});
const labelContent = <label {...getLabelProps()}>{label}</label>;
const inputProps = getInputProps();

28
packages/components/input/stories/input.stories.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {input} from "@nextui-org/theme";
import {
MailFilledIcon,
@ -11,7 +11,7 @@ import {
CloseFilledIcon,
} from "@nextui-org/shared-icons";
import {Input, useInput} from "../src";
import {Input, InputProps, useInput} from "../src";
export default {
title: "Components/Input",
@ -67,20 +67,20 @@ const defaultProps = {
label: "Email",
};
const Template: ComponentStory<typeof Input> = (args) => (
const Template = (args) => (
<div className="w-full max-w-[240px]">
<Input {...args} size="sm" />
</div>
);
const MirrorTemplate: ComponentStory<typeof Input> = (args) => (
const MirrorTemplate = (args) => (
<div className="w-full max-w-xl flex flex-row gap-4">
<Input {...args} />
<Input {...args} placeholder="Enter your email" />
</div>
);
const PasswordTemplate: ComponentStory<typeof Input> = (args) => {
const PasswordTemplate = (args) => {
const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);
@ -109,7 +109,7 @@ const PasswordTemplate: ComponentStory<typeof Input> = (args) => {
);
};
const RegexValidationTemplate: ComponentStory<typeof Input> = (args) => {
const RegexValidationTemplate = (args) => {
const [value, setValue] = React.useState("");
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
@ -134,7 +134,7 @@ const RegexValidationTemplate: ComponentStory<typeof Input> = (args) => {
);
};
const ControlledTemplate: ComponentStory<typeof Input> = (args) => {
const ControlledTemplate = (args) => {
const [value, setValue] = React.useState("");
return (
@ -145,7 +145,7 @@ const ControlledTemplate: ComponentStory<typeof Input> = (args) => {
);
};
const LabelPlacementTemplate: ComponentStory<typeof Input> = (args) => (
const LabelPlacementTemplate = (args) => (
<div className="w-full flex flex-col items-center gap-12">
<div className="flex flex-col gap-3">
<h3>Without placeholder</h3>
@ -166,7 +166,7 @@ const LabelPlacementTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const StartContentTemplate: ComponentStory<typeof Input> = (args) => (
const StartContentTemplate = (args) => (
<div className="w-full max-w-xl flex flex-row items-end gap-4">
<Input
{...args}
@ -200,7 +200,7 @@ const StartContentTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const EndContentTemplate: ComponentStory<typeof Input> = (args) => (
const EndContentTemplate = (args) => (
<div className="w-full max-w-xl flex flex-row items-end gap-4">
<Input
{...args}
@ -234,7 +234,7 @@ const EndContentTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const StartAndEndContentTemplate: ComponentStory<typeof Input> = (args) => (
const StartAndEndContentTemplate = (args) => (
<div className="w-full max-w-xs flex flex-col items-end gap-4">
<Input
{...args}
@ -294,7 +294,7 @@ const StartAndEndContentTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const InputTypesTemplate: ComponentStory<typeof Input> = (args) => (
const InputTypesTemplate = (args) => (
<div className="grid grid-cols-3 gap-4">
<Input {...args} label="Text" placeholder="Enter your text" />
<Input {...args} label="Number" placeholder="Enter your number" type="number" />
@ -311,7 +311,7 @@ const InputTypesTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const CustomWithClassNamesTemplate: ComponentStory<typeof Input> = (args) => (
const CustomWithClassNamesTemplate = (args) => (
<div className="w-full max-w-[340px]">
<Input
{...args}
@ -355,7 +355,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Input> = (args) => (
</div>
);
const CustomWithHooksTemplate: ComponentStory<typeof Input> = (args) => {
const CustomWithHooksTemplate = (args: InputProps) => {
const {
Component,
label,

8
packages/components/input/stories/textarea.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {input} from "@nextui-org/theme";
import {Textarea, TextAreaProps} from "../src";
@ -59,13 +59,13 @@ const defaultProps = {
placeholder: "Enter your description",
};
const Template: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
const Template = (args: TextAreaProps) => (
<div className="w-full max-w-[440px]">
<Textarea {...args} />
</div>
);
const MinRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
const MinRowsTemplate = (args: TextAreaProps) => (
<div className="w-full max-w-xl flex flex-row gap-4">
<Textarea {...args} description="Default minRows is 3" />
<Textarea {...args} description="minRows is 5" minRows={5} />
@ -73,7 +73,7 @@ const MinRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) =
</div>
);
const MaxRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
const MaxRowsTemplate = (args: TextAreaProps) => (
<div className="w-full max-w-xl flex flex-row gap-4">
<Textarea {...args} description="Default maxRows is 8" />
<Textarea {...args} description="maxRows is 5" maxRows={5} />

2
packages/components/kbd/package.json
View File

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

9
packages/components/kbd/src/kbd.tsx
View File

@ -1,14 +1,15 @@
import {useMemo, forwardRef} from "react";
import {useMemo} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseKbdProps, useKbd} from "./use-kbd";
import {kbdKeysLabelMap, kbdKeysMap} from "./utils";
export interface KbdProps extends Omit<UseKbdProps, "ref"> {}
export interface KbdProps extends UseKbdProps {}
const Kbd = forwardRef<HTMLElement, KbdProps>((props, ref) => {
const Kbd = forwardRef<"kbd", KbdProps>((props, ref) => {
const {Component, children, slots, classNames, keysToRender, getKbdProps} = useKbd({
ref,
...props,
ref,
});
const keysContent = useMemo(() => {

4
packages/components/kbd/src/use-kbd.ts
View File

@ -10,7 +10,7 @@ import {mergeProps} from "@react-aria/utils";
import {KbdKey} from "./utils";
export interface UseKbdProps extends HTMLNextUIProps<"kbd", KbdVariantProps> {
interface Props extends HTMLNextUIProps<"kbd"> {
/**
* Ref to the DOM node.
*/
@ -35,6 +35,8 @@ export interface UseKbdProps extends HTMLNextUIProps<"kbd", KbdVariantProps> {
classNames?: SlotsToClasses<KbdSlots>;
}
export type UseKbdProps = Props & KbdVariantProps;
export function useKbd(originalProps: UseKbdProps) {
const [props, variantProps] = mapPropsVariants(originalProps, kbd.variantKeys);

4
packages/components/kbd/stories/kbd.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {kbd} from "@nextui-org/theme";
import {Kbd, KbdProps} from "../src";
@ -42,7 +42,7 @@ const defaultProps = {
keys: ["command"],
};
const Template: ComponentStory<typeof Kbd> = (args: KbdProps) => <Kbd {...args} />;
const Template = (args: KbdProps) => <Kbd {...args} />;
export const Default = Template.bind({});
Default.args = {

2
packages/components/link/package.json
View File

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

8
packages/components/link/src/link.tsx
View File

@ -1,12 +1,12 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {LinkIcon} from "@nextui-org/shared-icons";
import {linkAnchorClasses} from "@nextui-org/theme";
import {UseLinkProps, useLink} from "./use-link";
export interface LinkProps extends Omit<UseLinkProps, "ref"> {}
export interface LinkProps extends UseLinkProps {}
const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
const Link = forwardRef<"a", LinkProps>((props, ref) => {
const {
Component,
children,
@ -14,8 +14,8 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
anchorIcon = <LinkIcon className={linkAnchorClasses} />,
getLinkProps,
} = useLink({
...props,
ref,
...props,
});
return (

4
packages/components/link/stories/link.stories.tsx
View File

@ -1,6 +1,6 @@
import type {VariantProps} from "@nextui-org/theme";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import React from "react";
import {tv} from "@nextui-org/theme";
import {link} from "@nextui-org/theme";
@ -46,7 +46,7 @@ const defaultProps = {
children,
};
const Template: ComponentStory<typeof Link> = (args: LinkProps) => <Link {...args} href="#" />;
const Template = (args: LinkProps) => <Link {...args} href="#" />;
export const Default = Template.bind({});
Default.args = {

2
packages/components/modal/package.json
View File

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

2
packages/components/modal/src/modal-body.tsx
View File

@ -7,7 +7,7 @@ import {useModalContext} from "./modal-context";
export interface ModalBodyProps extends HTMLNextUIProps<"div"> {}
const ModalBody = forwardRef<ModalBodyProps, "div">((props, ref) => {
const ModalBody = forwardRef<"div", ModalBodyProps>((props, ref) => {
const {as, children, className, ...otherProps} = props;
const {slots, classNames, bodyId, setBodyMounted} = useModalContext();

11
packages/components/modal/src/modal-content.tsx
View File

@ -1,7 +1,8 @@
import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {cloneElement, isValidElement, ReactNode, useMemo, forwardRef} from "react";
import {cloneElement, isValidElement, ReactNode, useMemo} from "react";
import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
import {CloseIcon} from "@nextui-org/shared-icons";
@ -14,13 +15,13 @@ import {HTMLNextUIProps} from "@nextui-org/system";
import {useModalContext} from "./modal-context";
import {scaleInOut} from "./modal-transition";
export interface ModalContentProps
extends AriaDialogProps,
Omit<HTMLNextUIProps<"div">, "children" | "role"> {
type KeysToOmit = "children" | "role";
export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div", KeysToOmit> {
children: ReactNode | ((onClose: () => void) => ReactNode);
}
const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>((props, _) => {
const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
const {as, children, role = "dialog", ...otherProps} = props;
const {

2
packages/components/modal/src/modal-footer.tsx
View File

@ -6,7 +6,7 @@ import {useModalContext} from "./modal-context";
export interface ModalFooterProps extends HTMLNextUIProps<"footer"> {}
const ModalFooter = forwardRef<ModalFooterProps, "footer">((props, ref) => {
const ModalFooter = forwardRef<"footer", ModalFooterProps>((props, ref) => {
const {as, children, className, ...otherProps} = props;
const {slots, classNames} = useModalContext();

2
packages/components/modal/src/modal-header.tsx
View File

@ -7,7 +7,7 @@ import {useModalContext} from "./modal-context";
export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {}
const ModalHeader = forwardRef<ModalHeaderProps, "header">((props, ref) => {
const ModalHeader = forwardRef<"header", ModalHeaderProps>((props, ref) => {
const {as, children, className, ...otherProps} = props;
const {slots, classNames, headerId, setHeaderMounted} = useModalContext();

9
packages/components/modal/src/modal.tsx
View File

@ -1,20 +1,21 @@
import {ReactNode, forwardRef} from "react";
import {ReactNode} from "react";
import {AnimatePresence} from "framer-motion";
import {Overlay} from "@react-aria/overlays";
import {forwardRef} from "@nextui-org/system";
import {UseModalProps, useModal} from "./use-modal";
import {ModalProvider} from "./modal-context";
export interface ModalProps extends Omit<UseModalProps, "ref"> {
export interface ModalProps extends UseModalProps {
/**
* The content of the modal. Usually the ModalContent
*/
children: ReactNode;
}
const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
const Modal = forwardRef<"div", ModalProps>((props, ref) => {
const {children, ...otherProps} = props;
const context = useModal({ref, ...otherProps});
const context = useModal({...otherProps, ref});
const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;

10
packages/components/modal/stories/modal.stories.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-autofocus */
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {modal} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Input} from "@nextui-org/input";
@ -129,7 +129,7 @@ const content = (
</ModalContent>
);
const Template: ComponentStory<typeof Modal> = (args: ModalProps) => {
const Template = (args: ModalProps) => {
const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
return (
@ -142,7 +142,7 @@ const Template: ComponentStory<typeof Modal> = (args: ModalProps) => {
);
};
const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
const InsideScrollTemplate = (args: ModalProps) => {
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
return (
@ -163,7 +163,7 @@ const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =>
);
};
const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
const OutsideScrollTemplate = (args: ModalProps) => {
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
return (
@ -183,7 +183,7 @@ const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =
</>
);
};
const OpenChangeTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
const OpenChangeTemplate = (args: ModalProps) => {
const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
return (

2
packages/components/navbar/package.json
View File

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

2
packages/components/navbar/src/navbar-brand.tsx
View File

@ -8,7 +8,7 @@ export interface NavbarBrandProps extends HTMLNextUIProps<"div"> {
children?: React.ReactNode | React.ReactNode[];
}
const NavbarBrand = forwardRef<NavbarBrandProps, "div">((props, ref) => {
const NavbarBrand = forwardRef<"div", NavbarBrandProps>((props, ref) => {
const {as, className, children, ...otherProps} = props;
const Component = as || "div";

2
packages/components/navbar/src/navbar-content.tsx
View File

@ -16,7 +16,7 @@ export interface NavbarContentProps extends HTMLNextUIProps<"ul"> {
justify?: "start" | "end" | "center";
}
const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
const NavbarContent = forwardRef<"ul", NavbarContentProps>((props, ref) => {
const {as, className, children, justify = "start", ...otherProps} = props;
const Component = as || "ul";

2
packages/components/navbar/src/navbar-item.tsx
View File

@ -13,7 +13,7 @@ export interface NavbarItemProps extends HTMLNextUIProps<"li"> {
isActive?: boolean;
}
const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
const NavbarItem = forwardRef<"li", NavbarItemProps>((props, ref) => {
const {as, className, children, isActive, ...otherProps} = props;
const Component = as || "li";

2
packages/components/navbar/src/navbar-menu-item.tsx
View File

@ -8,7 +8,7 @@ export interface NavbarMenuItemProps extends HTMLNextUIProps<"li"> {
children?: React.ReactNode;
}
const NavbarMenuItem = forwardRef<NavbarMenuItemProps, "li">((props, ref) => {
const NavbarMenuItem = forwardRef<"li", NavbarMenuItemProps>((props, ref) => {
const {className, children, ...otherProps} = props;
const domRef = useDOMRef(ref);

2
packages/components/navbar/src/navbar-menu-toggle.tsx
View File

@ -28,7 +28,7 @@ export interface Props extends Omit<HTMLNextUIProps<"button">, keyof AriaToggleB
export type NavbarMenuToggleProps = Props & AriaToggleButtonProps;
const NavbarMenuToggle = forwardRef<NavbarMenuToggleProps, "button">((props, ref) => {
const NavbarMenuToggle = forwardRef<"button", NavbarMenuToggleProps>((props, ref) => {
const {
as,
icon,

2
packages/components/navbar/src/navbar-menu.tsx
View File

@ -23,7 +23,7 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
motionProps?: HTMLMotionProps<"ul">;
}
const NavbarMenu = forwardRef<NavbarMenuProps, "ul">((props, ref) => {
const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
const domRef = useDOMRef(ref);

8
packages/components/navbar/src/navbar.tsx
View File

@ -1,4 +1,4 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {pickChildren} from "@nextui-org/react-utils";
import {motion} from "framer-motion";
import {mergeProps} from "@react-aria/utils";
@ -8,14 +8,14 @@ import {UseNavbarProps, useNavbar} from "./use-navbar";
import {NavbarProvider} from "./navbar-context";
import NavbarMenu from "./navbar-menu";
export interface NavbarProps extends Omit<UseNavbarProps, "ref" | "hideOnScroll"> {
export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
children?: React.ReactNode | React.ReactNode[];
}
const Navbar = forwardRef<HTMLDivElement, NavbarProps>((props, ref) => {
const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
const {children, ...otherProps} = props;
const context = useNavbar({ref, ...otherProps});
const context = useNavbar({...otherProps, ref});
const Component = context.Component;

4
packages/components/navbar/src/use-navbar.ts
View File

@ -11,7 +11,7 @@ import {useScrollPosition} from "@nextui-org/use-scroll-position";
import {useControlledState} from "@react-stately/utils";
import {HTMLMotionProps} from "framer-motion";
export interface UseNavbarProps extends HTMLNextUIProps<"nav", NavbarVariantProps> {
interface Props extends HTMLNextUIProps<"nav"> {
/**
* Ref to the DOM node.
*/
@ -83,6 +83,8 @@ export interface UseNavbarProps extends HTMLNextUIProps<"nav", NavbarVariantProp
classNames?: SlotsToClasses<NavbarSlots>;
}
export type UseNavbarProps = Props & NavbarVariantProps;
export function useNavbar(originalProps: UseNavbarProps) {
const [props, variantProps] = mapPropsVariants(originalProps, navbar.variantKeys);

12
packages/components/navbar/stories/navbar.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {navbar} from "@nextui-org/theme";
import {Link} from "@nextui-org/link";
import {Button} from "@nextui-org/button";
@ -94,7 +94,7 @@ const App = React.forwardRef(({children}: any, ref: any) => {
App.displayName = "App";
const Template: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
const Template = (args: NavbarProps) => {
// for hide on scroll cases
const parentRef = React.useRef(null);
@ -145,7 +145,7 @@ const Template: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
);
};
const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
const WithMenuTemplate = (args: NavbarProps) => {
const parentRef = React.useRef(null);
const [isMenuOpen, setIsMenuOpen] = React.useState<boolean | undefined>(false);
@ -231,7 +231,7 @@ const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
);
};
const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
const WithDropdownTemplate = (args: NavbarProps) => {
const icons = {
chevron: <ChevronDown fill="currentColor" size={16} />,
scale: <Scale className="text-warning" fill="currentColor" size={30} />,
@ -346,7 +346,7 @@ const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps)
);
};
const WithAvatarUserTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
const WithAvatarUserTemplate = (args: NavbarProps) => {
const menuItems = [
"Profile",
"Dashboard",
@ -446,7 +446,7 @@ const WithAvatarUserTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps
);
};
const WithSearchInputTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
const WithSearchInputTemplate = (args: NavbarProps) => {
const menuItems = [
"Profile",
"Dashboard",

2
packages/components/pagination/package.json
View File

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

2
packages/components/pagination/src/pagination-cursor.tsx
View File

@ -8,7 +8,7 @@ export interface PaginationCursorProps extends HTMLNextUIProps<"span"> {
activePage?: number;
}
const PaginationCursor = forwardRef<PaginationCursorProps, "span">((props, ref) => {
const PaginationCursor = forwardRef<"span", PaginationCursorProps>((props, ref) => {
const {as, activePage, ...otherProps} = props;
const Component = as || "span";

8
packages/components/pagination/src/pagination-item.tsx
View File

@ -1,11 +1,11 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {usePaginationItem, UsePaginationItemProps} from "./use-pagination-item";
export interface PaginationItemProps extends Omit<UsePaginationItemProps, "ref"> {}
export interface PaginationItemProps extends UsePaginationItemProps {}
const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(({key, ...props}, ref) => {
const {Component, children, getItemProps} = usePaginationItem({ref, ...props});
const PaginationItem = forwardRef<"li", PaginationItemProps>(({key, ...props}, ref) => {
const {Component, children, getItemProps} = usePaginationItem({...props, ref});
return (
<Component key={key} {...getItemProps()}>

9
packages/components/pagination/src/pagination.tsx
View File

@ -1,5 +1,6 @@
import {PaginationItemValue} from "@nextui-org/use-pagination";
import {useCallback, forwardRef} from "react";
import {useCallback} from "react";
import {forwardRef} from "@nextui-org/system";
import {PaginationItemType} from "@nextui-org/use-pagination";
import {ChevronIcon, EllipsisIcon, ForwardIcon} from "@nextui-org/shared-icons";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
@ -8,9 +9,9 @@ import {UsePaginationProps, usePagination} from "./use-pagination";
import PaginationItem from "./pagination-item";
import PaginationCursor from "./pagination-cursor";
export interface PaginationProps extends Omit<UsePaginationProps, "ref"> {}
export interface PaginationProps extends UsePaginationProps {}
const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
const Pagination = forwardRef<"nav", PaginationProps>((props, ref) => {
const {
Component,
dotsJump,
@ -32,7 +33,7 @@ const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
getWrapperProps,
getItemProps,
getCursorProps,
} = usePagination({ref, ...props});
} = usePagination({...props, ref});
const renderItem = useCallback(
(value: PaginationItemValue, index: number) => {

6
packages/components/pagination/stories/pagination.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {button, pagination} from "@nextui-org/theme";
import {cn} from "@nextui-org/system";
import {ChevronIcon} from "@nextui-org/shared-icons";
@ -76,9 +76,7 @@ const defaultProps = {
initialPage: 1,
};
const Template: ComponentStory<typeof Pagination> = (args: PaginationProps) => (
<Pagination {...args} />
);
const Template = (args: PaginationProps) => <Pagination {...args} />;
export const Default = Template.bind({});
Default.args = {

2
packages/components/popover/package.json
View File

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

7
packages/components/popover/src/popover-content.tsx
View File

@ -1,7 +1,8 @@
import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {DOMAttributes, ReactNode, useMemo, useRef, forwardRef} from "react";
import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
import {motion} from "framer-motion";
@ -15,11 +16,11 @@ import {usePopoverContext} from "./popover-context";
export interface PopoverContentProps
extends AriaDialogProps,
Omit<HTMLNextUIProps<"div">, "children" | "role"> {
Omit<HTMLNextUIProps, "children" | "role"> {
children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
}
const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, _) => {
const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
const {as, children, role = "dialog", ...otherProps} = props;
const {

5
packages/components/popover/src/popover-trigger.tsx
View File

@ -1,4 +1,5 @@
import React, {Children, cloneElement, useMemo, forwardRef} from "react";
import React, {Children, cloneElement, useMemo} from "react";
import {forwardRef} from "@nextui-org/system";
import {pickChildren} from "@nextui-org/react-utils";
import {useAriaButton} from "@nextui-org/use-aria-button";
import {Button} from "@nextui-org/button";
@ -14,7 +15,7 @@ export interface PopoverTriggerProps {
* PopoverTrigger opens the popover's content. It must be an interactive element
* such as `button` or `a`.
*/
const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>((props, _) => {
const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
const {triggerRef, getTriggerProps} = usePopoverContext();
const {children, ...otherProps} = props;

9
packages/components/popover/src/popover.tsx
View File

@ -1,11 +1,12 @@
import {Children, ReactNode, forwardRef} from "react";
import {Children, ReactNode} from "react";
import {forwardRef} from "@nextui-org/system";
import {AnimatePresence} from "framer-motion";
import {Overlay} from "@react-aria/overlays";
import {UsePopoverProps, usePopover} from "./use-popover";
import {PopoverProvider} from "./popover-context";
export interface PopoverProps extends Omit<UsePopoverProps, "ref"> {
export interface PopoverProps extends UsePopoverProps {
/**
* The content of the popover. It is usually the `PopoverTrigger`,
* and `PopoverContent`
@ -13,9 +14,9 @@ export interface PopoverProps extends Omit<UsePopoverProps, "ref"> {
children: ReactNode[];
}
const Popover = forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
const Popover = forwardRef<"div", PopoverProps>((props, ref) => {
const {children, ...otherProps} = props;
const context = usePopover({ref, ...otherProps});
const context = usePopover({...otherProps, ref});
const [trigger, content] = Children.toArray(children);

16
packages/components/popover/stories/popover.stories.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-autofocus */
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {popover, ButtonVariantProps} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Input} from "@nextui-org/input";
@ -113,7 +113,7 @@ const content = (
</PopoverContent>
);
const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
const Template = (args: PopoverProps) => {
return (
<Popover {...args}>
<PopoverTrigger>
@ -124,7 +124,7 @@ const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
);
};
const WithTitlePropsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
const WithTitlePropsTemplate = (args: PopoverProps) => {
return (
<Popover {...args}>
<PopoverTrigger>
@ -144,7 +144,7 @@ const WithTitlePropsTemplate: ComponentStory<typeof Popover> = (args: PopoverPro
);
};
const OpenChangeTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
const OpenChangeTemplate = (args: PopoverProps) => {
const [isOpen, setIsOpen] = React.useState(false);
return (
@ -165,7 +165,7 @@ const OpenChangeTemplate: ComponentStory<typeof Popover> = (args: PopoverProps)
);
};
const PlacementsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
const PlacementsTemplate = (args: PopoverProps) => {
const buttonColor = args.color as ButtonVariantProps["color"];
return (
@ -281,7 +281,7 @@ const PlacementsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps)
);
};
const OffsetTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
const OffsetTemplate = (args: PopoverProps) => (
<div className="flex gap-2">
<Popover {...args}>
<PopoverTrigger>
@ -310,7 +310,7 @@ const OffsetTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
</div>
);
const WithFormTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
const WithFormTemplate = (args: PopoverProps) => (
<Popover {...args}>
<PopoverTrigger>
<Button color="primary">Open Popover</Button>
@ -333,7 +333,7 @@ const WithFormTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) =>
</Popover>
);
const WithBackdropTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
const WithBackdropTemplate = (args: PopoverProps) => (
<Card isFooterBlurred className="w-[420px] h-[400px] col-span-12 sm:col-span-7">
<CardHeader className="absolute z-10 top-1 flex-col items-start">
<p className="text-xs text-white/60 uppercase font-bold">Your day your way</p>

2
packages/components/progress/package.json
View File

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

6
packages/components/progress/src/circular-progress.tsx
View File

@ -1,10 +1,10 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseCircularProgressProps, useCircularProgress} from "./use-circular-progress";
export interface CircularProgressProps extends Omit<UseCircularProgressProps, "ref"> {}
export interface CircularProgressProps extends UseCircularProgressProps {}
const CircularProgress = forwardRef<HTMLDivElement, CircularProgressProps>((props, ref) => {
const CircularProgress = forwardRef<"div", CircularProgressProps>((props, ref) => {
const {
Component,
slots,

8
packages/components/progress/src/progress.tsx
View File

@ -1,10 +1,10 @@
import {forwardRef} from "react";
import {forwardRef} from "@nextui-org/system";
import {UseProgressProps, useProgress} from "./use-progress";
export interface ProgressProps extends Omit<UseProgressProps, "ref"> {}
export interface ProgressProps extends UseProgressProps {}
const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
const Progress = forwardRef<"div", ProgressProps>((props, ref) => {
const {
Component,
slots,
@ -14,7 +14,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
showValueLabel,
getProgressBarProps,
getLabelProps,
} = useProgress({ref, ...props});
} = useProgress({...props, ref});
const progressBarProps = getProgressBarProps();
const shouldShowLabelWrapper = label || showValueLabel;

12
packages/components/progress/stories/circular-progress.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {circularProgress} from "@nextui-org/theme";
import {Card, CardBody, CardFooter} from "@nextui-org/card";
import {Chip} from "@nextui-org/chip";
@ -34,11 +34,9 @@ const defaultProps = {
...circularProgress.defaultVariants,
};
const Template: ComponentStory<typeof CircularProgress> = (args: CircularProgressProps) => (
<CircularProgress {...args} />
);
const Template = (args: CircularProgressProps) => <CircularProgress {...args} />;
const IntervalTemplate: ComponentStory<typeof CircularProgress> = (args: CircularProgressProps) => {
const IntervalTemplate = (args: CircularProgressProps) => {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
@ -52,9 +50,7 @@ const IntervalTemplate: ComponentStory<typeof CircularProgress> = (args: Circula
return <CircularProgress {...args} value={value} />;
};
const CustomClassnamesTemplate: ComponentStory<typeof CircularProgress> = (
args: CircularProgressProps,
) => (
const CustomClassnamesTemplate = (args: CircularProgressProps) => (
<Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
<CardBody className="justify-center items-center pb-0">
<CircularProgress

6
packages/components/progress/stories/progress.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {ComponentMeta} from "@storybook/react";
import {progress} from "@nextui-org/theme";
import {Progress, ProgressProps} from "../src";
@ -39,13 +39,13 @@ const defaultProps = {
value: 55,
};
const Template: ComponentStory<typeof Progress> = (args: ProgressProps) => (
const Template = (args: ProgressProps) => (
<div className="max-w-[400px]">
<Progress {...args} />
</div>
);
const IntervalTemplate: ComponentStory<typeof Progress> = (args: ProgressProps) => {
const IntervalTemplate = (args: ProgressProps) => {
const [value, setValue] = React.useState(0);
React.useEffect(() => {

Some files were not shown because too many files have changed in this diff Show More