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

refactor(root): styles prop renamed to classNames, progresslabel wrapper continionally render

Browse Source
This commit is contained in:
Junior Garcia 2023-04-12 22:43:54 -03:00
parent ecfd22e3d2
commit ca6e4fd631
169 changed files with 919 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/components/accordion/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230413014154
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-icons@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/aria-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

@ -1,6 +1,6 @@
{
"name": "@nextui-org/accordion",
"version": "0.0.0-dev-v2-20230412124525",
"version": "0.0.0-dev-v2-20230413014154",
"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

@ -10,7 +10,7 @@ export interface AccordionItemProps extends Omit<UseAccordionItemProps, "ref"> {
const AccordionItem = forwardRef<AccordionItemProps, "div">((props, ref) => {
const {
Component,
styles,
classNames,
slots,
indicator,
children,
@ -57,9 +57,11 @@ const AccordionItem = forwardRef<AccordionItemProps, "div">((props, ref) => {
<h2 {...getHeadingProps()}>
<button {...getButtonProps()}>
{startContent && (
<div className={slots.startContent({class: styles?.startContent})}>{startContent}</div>
<div className={slots.startContent({class: classNames?.startContent})}>
{startContent}
</div>
)}
<div className={slots.titleWrapper({class: styles?.titleWrapper})}>
<div className={slots.titleWrapper({class: classNames?.titleWrapper})}>
{title && <span {...getTitleProps()}>{title}</span>}
{subtitle && <span {...getSubtitleProps()}>{subtitle}</span>}
</div>

6
packages/components/accordion/src/base/accordion-item-base.tsx
View File

@ -55,12 +55,12 @@ export interface Props<T extends object = {}>
*/
motionProps?: CollapseTransitionProps;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <AccordionItem styles={{
* <AccordionItem classNames={{
* base:"base-classes",
* heading: "heading-classes",
* trigger: "trigger-classes",
@ -73,7 +73,7 @@ export interface Props<T extends object = {}>
* }} />
* ```
*/
styles?: SlotsToClasses<AccordionItemSlots>;
classNames?: SlotsToClasses<AccordionItemSlots>;
}
export type AccordionItemBaseProps<T extends object = {}> = Props<T> & AccordionItemVariantProps;

40
packages/components/accordion/src/use-accordion-item.ts
View File

@ -30,7 +30,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
const {ref, as, item, onFocusChange} = props;
const {
styles,
classNames,
className,
indicator,
children,
@ -97,7 +97,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getBaseProps = useCallback<PropGetter>(
(props = {}) => {
@ -119,7 +119,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
"data-focus-visible": dataAttr(isFocusVisible),
"data-focused": dataAttr(isFocused),
"data-disabled": dataAttr(isDisabled),
className: slots.trigger({class: styles?.trigger}),
className: slots.trigger({class: classNames?.trigger}),
onFocus: callAllHandlers(
handleFocus,
onFocusButton,
@ -137,7 +137,17 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
...mergeProps(buttonProps, props),
};
},
[domRef, isOpen, isFocusVisible, isDisabled, isFocused, buttonProps, focusProps, slots, styles],
[
domRef,
isOpen,
isFocusVisible,
isDisabled,
isFocused,
buttonProps,
focusProps,
slots,
classNames,
],
);
const getContentProps = useCallback<PropGetter>(
@ -145,11 +155,11 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
return {
"data-open": dataAttr(isOpen),
"data-disabled": dataAttr(isDisabled),
className: slots.content({class: styles?.content}),
className: slots.content({class: classNames?.content}),
...mergeProps(regionProps, props),
};
},
[slots, styles, regionProps, isOpen, isDisabled],
[slots, classNames, regionProps, isOpen, isDisabled],
);
const getIndicatorProps = useCallback<PropGetter>(
@ -158,11 +168,11 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
"aria-hidden": dataAttr(true),
"data-open": dataAttr(isOpen),
"data-disabled": dataAttr(isDisabled),
className: slots.indicator({class: styles?.indicator}),
className: slots.indicator({class: classNames?.indicator}),
...props,
};
},
[slots, styles, isOpen, isDisabled],
[slots, classNames, isOpen, isDisabled],
);
const getHeadingProps = useCallback<PropGetter>(
@ -170,11 +180,11 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
return {
"data-open": dataAttr(isOpen),
"data-disabled": dataAttr(isDisabled),
className: slots.heading({class: styles?.heading}),
className: slots.heading({class: classNames?.heading}),
...props,
};
},
[slots, styles, isOpen, isDisabled],
[slots, classNames, isOpen, isDisabled],
);
const getTitleProps = useCallback<PropGetter>(
@ -182,11 +192,11 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
return {
"data-open": dataAttr(isOpen),
"data-disabled": dataAttr(isDisabled),
className: slots.title({class: styles?.title}),
className: slots.title({class: classNames?.title}),
...props,
};
},
[slots, styles, isOpen, isDisabled],
[slots, classNames, isOpen, isDisabled],
);
const getSubtitleProps = useCallback<PropGetter>(
@ -194,18 +204,18 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
return {
"data-open": dataAttr(isOpen),
"data-disabled": dataAttr(isDisabled),
className: slots.subtitle({class: styles?.subtitle}),
className: slots.subtitle({class: classNames?.subtitle}),
...props,
};
},
[slots, styles, isOpen, isDisabled],
[slots, classNames, isOpen, isDisabled],
);
return {
Component,
item,
slots,
styles,
classNames,
domRef,
indicator,
children,

6
packages/components/accordion/src/use-accordion.ts
View File

@ -87,7 +87,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
const domRef = useDOMRef(ref);
const styles = useMemo(
const classNames = useMemo(
() =>
accordion({
variant,
@ -162,7 +162,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
const getBaseProps: PropGetter = useCallback((props = {}) => {
return {
ref: domRef,
className: styles,
className: classNames,
"data-orientation": "vertical",
...mergeProps(accordionProps, otherProps, props),
};
@ -172,7 +172,7 @@ export function useAccordion<T extends object>(props: UseAccordionProps<T>) {
isFocused && setFocusedKey(key);
}, []);
return {Component, context, styles, state, focusedKey, getBaseProps, handleFocusChanged};
return {Component, context, classNames, state, focusedKey, getBaseProps, handleFocusChanged};
}
export type UseAccordionReturn = ReturnType<typeof useAccordion>;

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

@ -242,8 +242,8 @@ const ControlledTemplate: ComponentStory<typeof Accordion> = (args: AccordionPro
);
};
const CustomWithStylesTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
const itemStyles: AccordionItemProps["styles"] = {
const CustomWithClassNamesTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
const itemStyles: AccordionItemProps["classNames"] = {
base: "py-0 w-full",
title: "font-normal text-base",
trigger: "px-2 py-0 hover:bg-neutral-100 rounded-lg h-14 flex items-center",
@ -261,8 +261,8 @@ const CustomWithStylesTemplate: ComponentStory<typeof Accordion> = (args: Accord
<AccordionItem
key="1"
aria-label="Connected devices"
classNames={itemStyles}
startContent={<MonitorMobileIcon className="text-primary" />}
styles={itemStyles}
subtitle={
<p className="flex">
2 issues to&nbsp;<p className="text-primary">fix now</p>
@ -275,8 +275,8 @@ const CustomWithStylesTemplate: ComponentStory<typeof Accordion> = (args: Accord
<AccordionItem
key="2"
aria-label="Apps Permissions"
classNames={itemStyles}
startContent={<ShieldSecurityIcon />}
styles={itemStyles}
subtitle="3 apps have read permissions"
title="Apps Permissions"
>
@ -285,8 +285,8 @@ const CustomWithStylesTemplate: ComponentStory<typeof Accordion> = (args: Accord
<AccordionItem
key="3"
aria-label="Pending tasks"
classNames={{...itemStyles, subtitle: "text-warning"}}
startContent={<InfoIcon className="text-warning" />}
styles={{...itemStyles, subtitle: "text-warning"}}
subtitle="Complete your profile"
title="Pending tasks"
>
@ -295,8 +295,8 @@ const CustomWithStylesTemplate: ComponentStory<typeof Accordion> = (args: Accord
<AccordionItem
key="4"
aria-label="Card expired"
classNames={{...itemStyles, subtitle: "text-danger"}}
startContent={<InvalidCardIcon className="text-danger" />}
styles={{...itemStyles, subtitle: "text-danger"}}
subtitle="Please, update now"
title={
<p className="flex gap-1 items-center">
@ -383,7 +383,7 @@ Controlled.args = {
...defaultProps,
};
export const CustomWithStyles = CustomWithStylesTemplate.bind({});
CustomWithStyles.args = {
export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
};

12
packages/components/avatar/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-image@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -13,7 +13,7 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
icon = <AvatarIcon />,
alt,
domRef,
styles,
classNames,
slots,
name,
showFallback,
@ -35,7 +35,7 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
return (
<div
aria-label={ariaLabel}
className={slots.fallback({class: styles?.fallback})}
className={slots.fallback({class: classNames?.fallback})}
role="img"
>
{fallbackComponent}
@ -44,15 +44,15 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
}
return name ? (
<span aria-label={ariaLabel} className={slots.name({class: styles?.name})} role="img">
<span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
{getInitials(name)}
</span>
) : (
<span aria-label={ariaLabel} className={slots.icon({class: styles?.icon})} role="img">
<span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
{icon}
</span>
);
}, [showFallback, src, fallbackComponent, name, styles]);
}, [showFallback, src, fallbackComponent, name, classNames]);
return (
<Component ref={domRef} {...getAvatarProps()}>

4
packages/components/avatar/src/use-avatar-group.ts
View File

@ -77,7 +77,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps) {
}),
[size, color, radius, isGrid, isBordered, isDisabled],
);
const styles = useMemo(() => avatarGroup({className, isGrid}), [className, isGrid]);
const classNames = useMemo(() => avatarGroup({className, isGrid}), [className, isGrid]);
const validChildren = getValidChildren(children);
const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
@ -101,7 +101,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps) {
const getAvatarGroupProps: PropGetter = () => {
return {
ref: domRef,
className: styles,
className: classNames,
role: "group",
...otherProps,
};

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

@ -69,12 +69,12 @@ export interface UseAvatarProps
*/
onError?: () => void;
/**
* Classname or List of classes to change the styles of the avatar.
* Classname or List of classes to change the classNames of the avatar.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Avatar styles={{
* <Avatar classNames={{
* base:"base-classes",
* img: "image-classes",
* name: "name-classes",
@ -83,7 +83,7 @@ export interface UseAvatarProps
* }} />
* ```
*/
styles?: SlotsToClasses<AvatarSlots>;
classNames?: SlotsToClasses<AvatarSlots>;
}
export function useAvatar(props: UseAvatarProps) {
@ -96,7 +96,7 @@ export function useAvatar(props: UseAvatarProps) {
src,
name,
icon,
styles,
classNames,
fallback,
alt = name,
imgRef: imgRefProp,
@ -151,11 +151,11 @@ export function useAvatar(props: UseAvatarProps) {
const buttonStyles = useMemo(() => {
if (as !== "button") return "";
// reset button styles
// reset button classNames
return "appearance-none outline-none border-none cursor-pointer";
}, [as]);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const canBeFocused = useMemo(() => {
return isFocusable || as === "button";
@ -177,7 +177,7 @@ export function useAvatar(props: UseAvatarProps) {
ref: imgRef,
src: src,
"data-loaded": isImgLoaded,
className: slots.img({class: styles?.img}),
className: slots.img({class: classNames?.img}),
}),
[slots, isImgLoaded, src, imgRef],
);
@ -191,7 +191,7 @@ export function useAvatar(props: UseAvatarProps) {
domRef,
imgRef,
slots,
styles,
classNames,
fallback,
isImgLoaded,
showFallback,

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

@ -1,3 +1,4 @@
/* eslint-disable react/display-name */
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";

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

@ -89,7 +89,7 @@ Custom.args = {
...defaultProps,
icon: <Activity fill="currentColor" size={20} />,
radius: "xl",
styles: {
classNames: {
base: "shadow-lg bg-cyan-200 dark:bg-cyan-800",
},
};
@ -97,7 +97,7 @@ Custom.args = {
export const CustomSize = Template.bind({});
CustomSize.args = {
...defaultProps,
styles: {
classNames: {
base: "w-32 h-32 text-md",
},
};
@ -107,7 +107,7 @@ CustomSizeImg.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
name: "Junior",
styles: {
classNames: {
base: "w-32 h-32 text-md",
},
};
@ -115,7 +115,7 @@ CustomSizeImg.args = {
export const DefaultIcon = Template.bind({});
DefaultIcon.args = {
...defaultProps,
styles: {
classNames: {
icon: "text-neutral-400",
},
};

11
packages/components/badge/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -9,10 +9,13 @@ export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {
}
const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
const {Component, children, content, slots, styles, getBadgeProps} = useBadge({ref, ...props});
const {Component, children, content, slots, classNames, getBadgeProps} = useBadge({
ref,
...props,
});
return (
<div className={slots.base({class: styles?.base})}>
<div className={slots.base({class: classNames?.base})}>
{children}
<Component {...getBadgeProps()}>{content}</Component>
</div>

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

@ -21,24 +21,24 @@ export interface UseBadgeProps extends HTMLNextUIProps<"span">, BadgeVariantProp
*/
content?: string | number | ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Badge styles={{
* <Badge classNames={{
* base:"base-classes", // wrapper
* badge: "badge-classes",
* }} />
* ```
*/
styles?: SlotsToClasses<BadgeSlots>;
classNames?: SlotsToClasses<BadgeSlots>;
}
export function useBadge(originalProps: UseBadgeProps) {
const [props, variantProps] = mapPropsVariants(originalProps, badge.variantKeys);
const {as, ref, children, className, content, styles, ...otherProps} = props;
const {as, ref, children, className, content, classNames, ...otherProps} = props;
const Component = as || "span";
@ -47,7 +47,7 @@ export function useBadge(originalProps: UseBadgeProps) {
const isOneChar = useMemo(() => String(content)?.length === 1, [content]);
const isDot = useMemo(() => String(content)?.length === 0, [content]);
const baseStyles = clsx(styles?.badge, className);
const baseStyles = clsx(classNames?.badge, className);
const slots = useMemo(
() =>
@ -73,7 +73,7 @@ export function useBadge(originalProps: UseBadgeProps) {
children,
content,
slots,
styles,
classNames,
getBadgeProps,
};
}

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

@ -62,7 +62,7 @@ const defaultProps = {
const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
<Badge {...args}>
<Avatar
isBordered={args.styles?.badge?.includes("bottom")}
isBordered={args.classNames?.badge?.includes("bottom")}
radius={args.shape === "rectangle" ? "lg" : "full"}
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
@ -90,7 +90,7 @@ HorizontalOffset.args = {
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
styles: {
classNames: {
badge: "p-0.5 right-[50%]",
},
};
@ -103,7 +103,7 @@ VerticalOffset.args = {
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
styles: {
classNames: {
badge: "p-0.5 right-[50%] bottom-[50%]",
},
};

14
packages/components/button/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/spinner@0.0.0-dev-v2-20230413014154
- @nextui-org/drip@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

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

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

@ -10,7 +10,7 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
Component,
domRef,
children,
styles,
classNames,
drips,
startIcon,
endIcon,
@ -22,7 +22,7 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
});
return (
<Component ref={domRef} className={styles} {...getButtonProps()}>
<Component ref={domRef} className={classNames} {...getButtonProps()}>
{startIcon}
{children}
{endIcon}

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

@ -59,7 +59,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
const domRef = useDOMRef(ref);
const styles = useMemo(
const classNames = useMemo(
() =>
buttonGroup({
...variantProps,
@ -106,7 +106,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
children,
domRef,
context,
styles,
classNames,
getButtonGroupProps,
};
}

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

@ -77,7 +77,7 @@ export function useButton(props: UseButtonProps) {
autoFocus,
});
const styles = useMemo(
const classNames = useMemo(
() =>
button({
size,
@ -153,7 +153,7 @@ export function useButton(props: UseButtonProps) {
children,
domRef,
drips,
styles,
classNames,
startIcon,
endIcon,
disableRipple,

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

@ -122,8 +122,8 @@ IsLoading.args = {
),
};
export const CustomWithStyles = Template.bind({});
CustomWithStyles.args = {
export const CustomWithClassNames = Template.bind({});
CustomWithClassNames.args = {
...defaultProps,
radius: "full",
className: "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",

13
packages/components/card/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/drip@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -10,9 +10,9 @@ const CardBody = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
const Component = as || "div";
const domRef = useDOMRef(ref);
const {slots, styles} = useCardContext();
const {slots, classNames} = useCardContext();
const bodyStyles = clsx(styles?.body, className);
const bodyStyles = clsx(classNames?.body, className);
return (
<Component ref={domRef} className={slots.body?.({class: bodyStyles})} {...otherProps}>

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

@ -14,9 +14,9 @@ const CardFooter = forwardRef<CardFooterProps, "div">((props, ref) => {
const Component = as || "div";
const domRef = useDOMRef(ref);
const {slots, styles} = useCardContext();
const {slots, classNames} = useCardContext();
const footerStyles = clsx(styles?.body, className, {
const footerStyles = clsx(classNames?.body, className, {
"backdrop-blur-xl backdrop-saturate-200": isBlurred,
});

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

@ -10,9 +10,9 @@ const CardHeader = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
const domRef = useDOMRef(ref);
const {slots, styles} = useCardContext();
const {slots, classNames} = useCardContext();
const headerStyles = clsx(styles?.header, className);
const headerStyles = clsx(classNames?.header, className);
return (
<Component ref={domRef} className={slots.header?.({class: headerStyles})} {...otherProps}>

18
packages/components/card/src/use-card.ts
View File

@ -30,12 +30,12 @@ export interface Props extends HTMLNextUIProps<"div"> {
*/
allowTextSelectionOnPress?: boolean;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Card styles={{
* <Card classNames={{
* base:"base-classes",
* header: "dot-classes",
* body: "content-classes",
@ -43,14 +43,14 @@ export interface Props extends HTMLNextUIProps<"div"> {
* }} />
* ```
*/
styles?: SlotsToClasses<CardSlots>;
classNames?: SlotsToClasses<CardSlots>;
}
export type UseCardProps = Props & PressEvents & FocusableProps & CardVariantProps;
export type ContextType = {
slots: CardReturnType;
styles?: SlotsToClasses<CardSlots>;
classNames?: SlotsToClasses<CardSlots>;
isDisabled?: CardVariantProps["isDisabled"];
isFooterBlurred?: CardVariantProps["isFooterBlurred"];
disableAnimation?: CardVariantProps["disableAnimation"];
@ -69,7 +69,7 @@ export function useCard(originalProps: UseCardProps) {
onPress,
autoFocus,
className,
styles,
classNames,
allowTextSelectionOnPress = true,
...otherProps
} = props;
@ -77,7 +77,7 @@ export function useCard(originalProps: UseCardProps) {
const domRef = useDOMRef<HTMLDivElement>(ref);
const Component = as || (originalProps.isPressable ? "button" : "div");
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const {onClick: onDripClickHandler, drips} = useDrip();
@ -124,11 +124,11 @@ export function useCard(originalProps: UseCardProps) {
disableAnimation: originalProps.disableAnimation,
fullWidth: originalProps.fullWidth,
slots,
styles,
classNames,
}),
[
slots,
styles,
classNames,
originalProps.isDisabled,
originalProps.isFooterBlurred,
originalProps.disableAnimation,
@ -176,7 +176,7 @@ export function useCard(originalProps: UseCardProps) {
context,
domRef,
Component,
styles,
classNames,
children,
drips,
isHovered,

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

@ -293,7 +293,7 @@ const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
},
];
type ListItem = (typeof list)[number];
type ListItem = typeof list[number];
const handlePress = (item: ListItem) => {
// eslint-disable-next-line no-console

11
packages/components/checkbox/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -6,8 +6,14 @@ import {UseCheckboxGroupProps, useCheckboxGroup} from "./use-checkbox-group";
export interface CheckboxGroupProps extends Omit<UseCheckboxGroupProps, "ref"> {}
const CheckboxGroup = forwardRef<CheckboxGroupProps, "div">((props, ref) => {
const {children, context, label, getGroupProps, getLabelProps, getWrapperProps} =
useCheckboxGroup({ref, ...props});
const {
children,
context,
label,
getGroupProps,
getLabelProps,
getWrapperProps,
} = useCheckboxGroup({ref, ...props});
return (
<div {...getGroupProps()}>

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

@ -25,12 +25,12 @@ interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
*/
orientation?: Orientation;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <CheckboxGroup styles={{
* <CheckboxGroup classNames={{
* base:"base-classes",
* label: "label-classes",
* wrapper: "wrapper-classes", // checkboxes wrapper
@ -39,7 +39,7 @@ interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
* </CheckboxGroup>
* ```
*/
styles?: SlotsToClasses<CheckboxGroupSlots>;
classNames?: SlotsToClasses<CheckboxGroupSlots>;
}
export type UseCheckboxGroupProps = Props &
@ -62,7 +62,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
const {
as,
ref,
styles,
classNames,
children,
label,
size = "md",
@ -105,7 +105,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
const slots = useMemo(() => checkboxGroup(), []);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getGroupProps: PropGetter = () => {
return {
@ -117,14 +117,14 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
const getLabelProps: PropGetter = () => {
return {
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
...labelProps,
};
};
const getWrapperProps: PropGetter = () => {
return {
className: slots.wrapper({class: styles?.wrapper}),
className: slots.wrapper({class: classNames?.wrapper}),
role: "presentation",
"data-orientation": orientation,
};

20
packages/components/checkbox/src/use-checkbox.ts
View File

@ -50,12 +50,12 @@ interface Props extends HTMLNextUIProps<"label"> {
*/
onValueChange?: AriaCheckboxProps["onChange"];
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Checkbox styles={{
* <Checkbox classNames={{
* base:"base-classes",
* wrapper: "wrapper-classes",
* icon: "icon-classes",
@ -63,7 +63,7 @@ interface Props extends HTMLNextUIProps<"label"> {
* }} />
* ```
*/
styles?: SlotsToClasses<CheckboxSlots>;
classNames?: SlotsToClasses<CheckboxSlots>;
}
export type UseCheckboxProps = Omit<Props, "defaultChecked"> &
@ -94,7 +94,7 @@ export function useCheckbox(props: UseCheckboxProps) {
isIndeterminate = false,
validationState,
defaultSelected,
styles,
classNames,
onChange,
className,
onValueChange,
@ -200,7 +200,7 @@ export function useCheckbox(props: UseCheckboxProps) {
[color, size, radius, lineThrough, isDisabled, isFocusVisible, disableAnimation],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getBaseProps: PropGetter = () => {
return {
@ -224,7 +224,7 @@ export function useCheckbox(props: UseCheckboxProps) {
"data-invalid": dataAttr(isInvalid),
"data-readonly": dataAttr(inputProps.readOnly),
"aria-hidden": true,
className: clsx(slots.wrapper({class: styles?.wrapper})),
className: clsx(slots.wrapper({class: classNames?.wrapper})),
};
};
@ -242,9 +242,9 @@ export function useCheckbox(props: UseCheckboxProps) {
"data-disabled": dataAttr(isDisabled),
"data-checked": dataAttr(isSelected),
"data-invalid": dataAttr(isInvalid),
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
}),
[slots, styles?.label, isDisabled, isSelected, isInvalid],
[slots, classNames?.label, isDisabled, isSelected, isInvalid],
);
const getIconProps = useCallback(
@ -254,9 +254,9 @@ export function useCheckbox(props: UseCheckboxProps) {
isSelected: isSelected,
isIndeterminate: !!isIndeterminate,
disableAnimation: !!disableAnimation,
className: slots.icon({class: styles?.icon}),
className: slots.icon({class: classNames?.icon}),
} as CheckboxIconProps),
[slots, styles?.icon, isSelected, isIndeterminate, disableAnimation],
[slots, classNames?.icon, isSelected, isIndeterminate, disableAnimation],
);
return {

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

@ -5,7 +5,7 @@ import {checkbox} from "@nextui-org/theme";
import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";
import {
CustomWithStyles as CheckboxItemWithStyles,
CustomWithClassNames as CheckboxItemWithStyles,
CustomWithHooks as CheckboxItemWithHooks,
} from "./checkbox.stories";
@ -126,7 +126,7 @@ export const Controlled = () => {
);
};
export const CustomWithStyles = () => {
export const CustomWithClassNames = () => {
const [groupSelected, setGroupSelected] = React.useState<string[]>([]);
return (

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

@ -147,7 +147,7 @@ interface CustomCheckboxProps extends CheckboxProps {
statusColor?: ChipProps["color"];
}
export const CustomWithStyles = (props: CustomCheckboxProps) => {
export const CustomWithClassNames = (props: CustomCheckboxProps) => {
const {
value,
userName = "Junior Garcia",
@ -180,7 +180,7 @@ export const CustomWithStyles = (props: CustomCheckboxProps) => {
<Checkbox
{...otherProps}
aria-label={userName}
styles={{
classNames={{
base: clsx(
"inline-flex w-full max-w-md bg-content1 hover:bg-content2 items-center justify-start cursor-pointer rounded-lg gap-2 p-4 border-1.5 border-transparent",
{
@ -232,9 +232,7 @@ export const CustomWithHooks = (props: CheckboxProps) => {
<input {...getInputProps()} />
</VisuallyHidden>
<Chip
color="primary"
startContent={isSelected ? <CheckIcon className="ml-1" color={colors.white} /> : null}
styles={{
classNames={{
base: clsx("border-neutral hover:bg-neutral-200", {
"border-primary bg-primary hover:bg-primary-600 hover:border-primary-600": isSelected,
"outline-none ring-2 !ring-primary ring-offset-2 ring-offset-background dark:ring-offset-background-dark": isFocusVisible,
@ -243,6 +241,8 @@ export const CustomWithHooks = (props: CheckboxProps) => {
"text-primary-contrastText pl-1": isSelected,
}),
}}
color="primary"
startContent={isSelected ? <CheckIcon className="ml-1" color={colors.white} /> : null}
variant="faded"
{...getLabelProps()}
>

12
packages/components/chip/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -12,7 +12,7 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
Component,
children,
slots,
styles,
classNames,
isDot,
isCloseable,
startContent,
@ -26,7 +26,7 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
const start = useMemo(() => {
if (isDot && !startContent) {
return <span className={slots.dot({class: styles?.dot})} />;
return <span className={slots.dot({class: classNames?.dot})} />;
}
return startContent;
@ -43,7 +43,7 @@ const Chip = forwardRef<ChipProps, "div">((props, ref) => {
return (
<Component {...getChipProps()}>
{start}
<span className={slots.content({class: styles?.content})}>{children}</span>
<span className={slots.content({class: classNames?.content})}>{children}</span>
{end}
</Component>
);

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

@ -33,12 +33,12 @@ export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
*/
endContent?: React.ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Chip styles={{
* <Chip classNames={{
* base:"base-classes",
* dot: "dot-classes",
* content: "content-classes",
@ -47,7 +47,7 @@ export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
* }} />
* ```
*/
styles?: SlotsToClasses<ChipSlots>;
classNames?: SlotsToClasses<ChipSlots>;
/**
* Callback fired when the chip is closed. if you pass this prop,
* the chip will display a close button (endContent).
@ -67,7 +67,7 @@ export function useChip(originalProps: UseChipProps) {
startContent,
endContent,
onClose,
styles,
classNames,
className,
...otherProps
} = props;
@ -76,7 +76,7 @@ export function useChip(originalProps: UseChipProps) {
const domRef = useDOMRef(ref);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const isCloseable = !!onClose;
const isDotVariant = originalProps.variant === "dot";
@ -125,7 +125,7 @@ export function useChip(originalProps: UseChipProps) {
return {
role: "button",
tabIndex: 0,
className: slots.closeButton({class: styles?.closeButton}),
className: slots.closeButton({class: classNames?.closeButton}),
...mergeProps(closePressProps, closeFocusProps),
};
};
@ -135,7 +135,7 @@ export function useChip(originalProps: UseChipProps) {
return cloneElement(avatar, {
// @ts-ignore
className: slots.avatar({class: styles?.avatar}),
className: slots.avatar({class: classNames?.avatar}),
});
};
@ -151,7 +151,7 @@ export function useChip(originalProps: UseChipProps) {
Component,
children,
slots,
styles,
classNames,
isDot: isDotVariant,
isCloseable,
startContent: getAvatarClone(avatar) || getContentClone(startContent),

11
packages/components/code/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -22,7 +22,7 @@ export function useCode(originalProps: UseCodeProps) {
const domRef = useDOMRef(ref);
const styles = useMemo(
const classNames = useMemo(
() =>
code({
...variantProps,
@ -34,7 +34,7 @@ export function useCode(originalProps: UseCodeProps) {
const getCodeProps: PropGetter = () => {
return {
ref: domRef,
className: styles,
className: classNames,
...otherProps,
};
};

11
packages/components/drip/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -10,7 +10,7 @@ export interface DripProps extends HTMLNextUIProps<"span"> {
const Drip = (props: DripProps) => {
const {drips, ...otherProps} = props;
const styles = drip();
const classNames = drip();
if (!drips || !Array.isArray(drips) || drips.length < 1) {
return null;
@ -19,7 +19,7 @@ const Drip = (props: DripProps) => {
return (
<>
{drips.map(({key, ...dripProps}) => (
<span key={key} className={styles} {...otherProps} {...dripProps} />
<span key={key} className={classNames} {...otherProps} {...dripProps} />
))}
</>
);

13
packages/components/dropdown/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/aria-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/popover@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

6
packages/components/dropdown/src/base/dropdown-item-base.tsx
View File

@ -55,12 +55,12 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
*/
selectedIcon?: ReactNode | ((props: DropdownItemSelectedIconProps) => ReactNode) | null;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <DropdownItem styles={{
* <DropdownItem classNames={{
* base:"base-classes",
* title:"label-classes",
* wrapper:"wrapper-classes", // title and description wrapper
@ -70,7 +70,7 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
* }} />
* ```
*/
styles?: SlotsToClasses<DropdownItemSlots>;
classNames?: SlotsToClasses<DropdownItemSlots>;
}
export type DropdownItemBaseProps<T extends object = {}> = Props<T> &

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

@ -13,7 +13,7 @@ const DropdownItem = forwardRef<DropdownItemProps, "li">((props, _) => {
const {
Component,
slots,
styles,
classNames,
rendered,
shortcut,
description,
@ -49,7 +49,7 @@ const DropdownItem = forwardRef<DropdownItemProps, "li">((props, _) => {
<Component {...getItemProps()}>
{startContent}
{description ? (
<div className={slots.wrapper({class: styles?.wrapper})}>
<div className={slots.wrapper({class: classNames?.wrapper})}>
<span {...getLabelProps()}>{rendered}</span>
<span {...getDescriptionProps()}>{description}</span>
</div>

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

@ -35,9 +35,9 @@ export interface DropdownMenuProps<T = object>
*/
closeOnSelect?: DropdownItemProps["closeOnSelect"];
/**
* The dropdown items styles.
* The dropdown items classNames.
*/
itemStyles?: DropdownItemProps["styles"];
itemStyles?: DropdownItemProps["classNames"];
}
const DropdownMenu = forwardRef<DropdownMenuProps, "ul">(
@ -64,11 +64,11 @@ const DropdownMenu = forwardRef<DropdownMenuProps, "ul">(
const state = useTreeState(otherProps);
const {menuProps} = useMenu(otherProps, state, domRef);
const styles = useMemo(() => dropdownMenu({className}), [className]);
const classNames = useMemo(() => dropdownMenu({className}), [className]);
return (
<PopoverContent>
<Component {...getMenuProps({...menuProps}, domRef)} className={styles}>
<Component {...getMenuProps({...menuProps}, domRef)} className={classNames}>
{[...state.collection].map((item) => {
const itemProps = {
key: item.key,
@ -77,7 +77,7 @@ const DropdownMenu = forwardRef<DropdownMenuProps, "ul">(
disableAnimation,
item,
state,
styles: itemStyles,
classNames: itemStyles,
variant,
onAction,
...item.props,

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

@ -33,9 +33,9 @@ export interface DropdownSectionProps<T extends object = object> extends HTMLNex
*/
closeOnSelect?: DropdownItemProps["closeOnSelect"];
/**
* The dropdown items styles.
* The dropdown items classNames.
*/
styles?: DropdownItemProps["styles"] & SlotsToClasses<DropdownSectionSlots>;
classNames?: DropdownItemProps["classNames"] & SlotsToClasses<DropdownSectionSlots>;
/**
* Shows a divider between sections
* @default true
@ -59,13 +59,13 @@ const DropdownSection = forwardRef<DropdownSectionProps, "li">(
onAction,
closeOnSelect,
className,
styles: stylesProp = {},
classNames: stylesProp = {},
showDivider = true,
...otherProps
},
_,
) => {
const {section, heading, ...styles} = stylesProp;
const {section, heading, ...classNames} = stylesProp;
const headingId = useId();
@ -99,12 +99,12 @@ const DropdownSection = forwardRef<DropdownSectionProps, "li">(
let dropdownItem = (
<DropdownItem
key={node.key}
classNames={classNames}
closeOnSelect={closeOnSelect}
color={color}
disableAnimation={disableAnimation}
item={node}
state={state}
styles={styles}
variant={variant}
onAction={onAction}
{...node.props}

16
packages/components/dropdown/src/use-dropdown-item.ts
View File

@ -41,7 +41,7 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
isVirtualized,
selectedIcon,
className,
styles,
classNames,
onAction,
autoFocus,
onPress,
@ -107,7 +107,7 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
[...Object.values(variantProps), isDisabled, isFocusVisible, disableAnimation],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getItemProps: PropGetter = (props = {}) => ({
ref: domRef,
@ -128,19 +128,19 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
const getLabelProps: PropGetter = (props = {}) => ({
...mergeProps(labelProps, props),
id: labelId,
className: slots.title({class: styles?.title}),
className: slots.title({class: classNames?.title}),
});
const getDescriptionProps: PropGetter = (props = {}) => ({
...mergeProps(descriptionProps, props),
id: descriptionId,
className: slots.description({class: styles?.description}),
className: slots.description({class: classNames?.description}),
});
const getKeyboardShortcutProps: PropGetter = (props = {}) => ({
...mergeProps(keyboardShortcutProps, props),
id: keyboardId,
className: slots.shortcut({class: styles?.shortcut}),
className: slots.shortcut({class: classNames?.shortcut}),
});
const getSelectedIconProps = useCallback<PropGetter>(
@ -148,18 +148,18 @@ export function useDropdownItem<T extends object>(originalProps: UseDropdownItem
return {
"aria-hidden": dataAttr(true),
"data-disabled": dataAttr(isDisabled),
className: slots.selectedIcon({class: styles?.selectedIcon}),
className: slots.selectedIcon({class: classNames?.selectedIcon}),
...props,
};
},
[isDisabled, slots, styles],
[isDisabled, slots, classNames],
);
return {
Component,
domRef,
slots,
styles,
classNames,
isSelectable,
isSelected,
isDisabled,

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

@ -48,7 +48,7 @@ export function useDropdown(props: UseDropdownProps) {
placement = "bottom",
isDisabled = false,
closeOnSelect = true,
styles: stylesProp,
classNames: stylesProp,
disableAnimation = false,
className,
...otherProps
@ -72,7 +72,7 @@ export function useDropdown(props: UseDropdownProps) {
menuTriggerRef,
);
const styles = useMemo(
const classNames = useMemo(
() =>
dropdown({
className,
@ -88,10 +88,10 @@ export function useDropdown(props: UseDropdownProps) {
scrollRef: menuRef,
triggerRef: menuTriggerRef,
...mergeProps(otherProps, props),
styles: {
classNames: {
...stylesProp,
...props.styles,
base: clsx(styles, stylesProp?.base, props.className),
...props.classNames,
base: clsx(classNames, stylesProp?.base, props.className),
arrow: clsx("border border-neutral-100", stylesProp?.arrow),
},
});
@ -121,7 +121,7 @@ export function useDropdown(props: UseDropdownProps) {
return {
Component,
styles,
classNames,
closeOnSelect,
onClose: state.close,
autoFocus: state.focusStrategy || true,

12
packages/components/image/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-image@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -10,7 +10,7 @@ const Image = forwardRef<ImageProps, "img">((props, ref) => {
Component,
domRef,
slots,
styles,
classNames,
isBlurred,
isZoomed,
fallbackSrc,
@ -24,7 +24,9 @@ const Image = forwardRef<ImageProps, "img">((props, ref) => {
});
const img = <Component ref={domRef} {...getImgProps()} />;
const zoomed = <div className={slots.zoomedWrapper({class: styles?.zoomedWrapper})}>{img}</div>;
const zoomed = (
<div className={slots.zoomedWrapper({class: classNames?.zoomedWrapper})}>{img}</div>
);
if (isBlurred) {
// clone element to add isBlurred prop to the cloned image

16
packages/components/image/src/use-image.ts
View File

@ -45,19 +45,19 @@ interface Props extends HTMLNextUIProps<"img"> {
*/
onError?: () => void;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Image styles={{
* <Image classNames={{
* base:"base-classes", // wrapper
* img: "img-classes",
* blurredImg: "blurredImg-classes", // this is a cloned version of the img
* }} />
* ```
*/
styles?: SlotsToClasses<ImageSlots>;
classNames?: SlotsToClasses<ImageSlots>;
}
export type UseImageProps = Props & ImageVariantProps;
@ -70,7 +70,7 @@ export function useImage(originalProps: UseImageProps) {
as,
src,
className,
styles,
classNames,
loading,
isBlurred,
fallbackSrc,
@ -118,7 +118,7 @@ export function useImage(originalProps: UseImageProps) {
[...Object.values(variantProps), showSkeleton],
);
const baseStyles = clsx(className, styles?.base);
const baseStyles = clsx(className, classNames?.base);
const getImgProps: PropGetter = () => {
return {
@ -150,15 +150,15 @@ export function useImage(originalProps: UseImageProps) {
return {
src,
"aria-hidden": dataAttr(true),
className: slots.blurredImg({class: styles?.blurredImg}),
className: slots.blurredImg({class: classNames?.blurredImg}),
};
}, [slots, src, styles?.blurredImg]);
}, [slots, src, classNames?.blurredImg]);
return {
Component,
domRef,
slots,
styles,
classNames,
isBlurred,
disableSkeleton,
fallbackSrc,

13
packages/components/input/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

26
packages/components/input/src/use-input.ts
View File

@ -30,12 +30,12 @@ export interface Props extends Omit<HTMLNextUIProps<"input">, keyof InputVariant
*/
endContent?: React.ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Input styles={{
* <Input classNames={{
* base:"base-classes",
* label: "label-classes",
* inputWrapper: "input-wrapper-classes",
@ -46,7 +46,7 @@ export interface Props extends Omit<HTMLNextUIProps<"input">, keyof InputVariant
* }} />
* ```
*/
styles?: SlotsToClasses<InputSlots>;
classNames?: SlotsToClasses<InputSlots>;
/**
* Callback fired when the value is cleared.
* if you pass this prop, the clear button will be shown.
@ -70,7 +70,7 @@ export function useInput(originalProps: UseInputProps) {
description,
errorMessage,
className,
styles,
classNames,
autoFocus,
startContent,
endContent,
@ -83,7 +83,7 @@ export function useInput(originalProps: UseInputProps) {
const [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
const Component = as || "div";
const baseStyles = clsx(styles?.base, className, !!inputValue ? "is-filled" : "");
const baseStyles = clsx(classNames?.base, className, !!inputValue ? "is-filled" : "");
const isMultiline = originalProps.isMultiline;
const domRef = useDOMRef(ref) as typeof isMultiline extends "true"
@ -165,7 +165,7 @@ export function useInput(originalProps: UseInputProps) {
const getLabelProps: PropGetter = (props = {}) => {
return {
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
...labelProps,
...props,
};
@ -174,7 +174,7 @@ export function useInput(originalProps: UseInputProps) {
const getInputProps: PropGetter = (props = {}) => {
return {
ref: domRef,
className: slots.input({class: clsx(styles?.input, !!inputValue ? "is-filled" : "")}),
className: slots.input({class: clsx(classNames?.input, !!inputValue ? "is-filled" : "")}),
"data-focus-visible": dataAttr(isFocusVisible),
"data-focused": dataAttr(isFocused),
"data-invalid": dataAttr(isInvalid),
@ -186,7 +186,7 @@ export function useInput(originalProps: UseInputProps) {
const getInputWrapperProps: PropGetter = (props = {}) => {
return {
className: slots.inputWrapper({
class: clsx(styles?.inputWrapper, !!inputValue ? "is-filled" : ""),
class: clsx(classNames?.inputWrapper, !!inputValue ? "is-filled" : ""),
}),
onClick: (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
@ -204,7 +204,7 @@ export function useInput(originalProps: UseInputProps) {
const getInnerWrapperProps: PropGetter = (props = {}) => {
return {
className: slots.innerWrapper({
class: styles?.innerWrapper,
class: classNames?.innerWrapper,
}),
...props,
};
@ -212,7 +212,7 @@ export function useInput(originalProps: UseInputProps) {
const getDescriptionProps: PropGetter = (props = {}) => {
return {
className: slots.description({class: styles?.description}),
className: slots.description({class: classNames?.description}),
...descriptionProps,
...props,
};
@ -220,7 +220,7 @@ export function useInput(originalProps: UseInputProps) {
const getErrorMessageProps: PropGetter = (props = {}) => {
return {
className: slots.errorMessage({class: styles?.errorMessage}),
className: slots.errorMessage({class: classNames?.errorMessage}),
...errorMessageProps,
...props,
};
@ -230,14 +230,14 @@ export function useInput(originalProps: UseInputProps) {
return {
role: "button",
tabIndex: 0,
className: slots.clearButton({class: styles?.clearButton}),
className: slots.clearButton({class: classNames?.clearButton}),
...mergeProps(clearPressProps, clearFocusProps),
};
};
return {
Component,
styles,
classNames,
domRef,
label,
description,

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

@ -300,25 +300,11 @@ const InputTypesTemplate: ComponentStory<typeof Input> = (args: InputProps) => (
</div>
);
const CustomWithStylesTemplate: ComponentStory<typeof Input> = (args: InputProps) => (
const CustomWithClassNamesTemplate: ComponentStory<typeof Input> = (args: InputProps) => (
<div className="w-full max-w-[340px]">
<Input
{...args}
endContent={
<div className="pointer-events-none flex items-center">
<kbd className="font-sans font-semibold text-slate-400">
<abbr className="no-underline" title="Command">
⌘
</abbr>
&nbsp;K
</kbd>
</div>
}
placeholder="Quick search..."
startContent={
<SearchIcon className="text-xl text-slate-400 pointer-events-none flex-shrink-0" />
}
styles={{
classNames={{
label: "hidden",
inputWrapper: [
"bg-slate-100",
@ -340,6 +326,20 @@ const CustomWithStylesTemplate: ComponentStory<typeof Input> = (args: InputProps
"dark:placeholder:text-slate-400",
],
}}
endContent={
<div className="pointer-events-none flex items-center">
<kbd className="font-sans font-semibold text-slate-400">
<abbr className="no-underline" title="Command">
⌘
</abbr>
&nbsp;K
</kbd>
</div>
}
placeholder="Quick search..."
startContent={
<SearchIcon className="text-xl text-slate-400 pointer-events-none flex-shrink-0" />
}
/>
</div>
);
@ -366,7 +366,7 @@ const CustomWithHooksTemplate: ComponentStory<typeof Input> = (args: InputProps)
getClearButtonProps,
} = useInput({
...args,
styles: {
classNames: {
label: "text-black/50 dark:text-white/90",
input: [
"bg-transparent",
@ -543,8 +543,8 @@ Controlled.args = {
variant: "bordered",
};
export const CustomWithStyles = CustomWithStylesTemplate.bind({});
CustomWithStyles.args = {
export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
};

11
packages/components/link/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230412124525",
"version": "0.0.0-dev-v2-20230413014154",
"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"

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

@ -6,13 +6,10 @@ import {LinkIcon} from "./link-icon";
export interface LinkProps extends Omit<UseLinkProps, "ref"> {}
const Link = forwardRef<LinkProps, "a">((props, ref) => {
const {
Component,
children,
showAnchorIcon,
anchorIcon = <LinkIcon />,
getLinkProps,
} = useLink({...props, ref});
const {Component, children, showAnchorIcon, anchorIcon = <LinkIcon />, getLinkProps} = useLink({
...props,
ref,
});
return (
<Component {...getLinkProps()}>

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

@ -61,7 +61,7 @@ export function useLink(originalProps: UseLinkProps) {
otherProps.role = "link";
}
const styles = useMemo(
const classNames = useMemo(
() =>
link({
...variantProps,
@ -73,7 +73,7 @@ export function useLink(originalProps: UseLinkProps) {
const getLinkProps: PropGetter = () => {
return {
ref: domRef,
className: styles,
className: classNames,
...linkProps,
...otherProps,
};

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

@ -1,6 +1,8 @@
import type {VariantProps} from "@nextui-org/theme";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import React from "react";
import {tv, type VariantProps} from "@nextui-org/theme";
import {tv} from "@nextui-org/theme";
import {link} from "@nextui-org/theme";
import {Link, LinkProps} from "../src";
@ -18,7 +20,7 @@ export default {
size: {
control: {
type: "select",
options: ["xs", "sm", "md", "xl"],
options: ["xs", "sm", "md", "lg", "xl"],
},
},
isDisabled: {

13
packages/components/pagination/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-pagination@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -16,7 +16,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
Component,
dotsJump,
slots,
styles,
classNames,
total,
range,
loop,
@ -52,7 +52,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
onPrevious,
setPage,
ref: typeof value === "number" ? (node) => getItemRef(node, value) : undefined,
className: slots.item({class: styles?.item}),
className: slots.item({class: classNames?.item}),
});
}
if (value === PaginationItemType.PREV) {
@ -61,7 +61,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
key={key}
className={slots.prev({
class: clsx(
styles?.prev,
classNames?.prev,
!loop && activePage === 1 && "opacity-50 pointer-events-none",
),
})}
@ -78,7 +78,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
key={key}
className={slots.next({
class: clsx(
styles?.next,
classNames?.next,
!loop && activePage === total && "opacity-50 pointer-events-none",
),
})}
@ -95,7 +95,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
<PaginationItem
key={key}
className={slots.item({
class: clsx(styles?.item, "group"),
class: clsx(classNames?.item, "group"),
})}
value={value}
onPress={() =>
@ -120,7 +120,7 @@ const Pagination = forwardRef<PaginationProps, "ul">((props, ref) => {
</PaginationItem>
);
},
[activePage, dotsJump, getItemProps, loop, range, renderItemProp, slots, styles, total],
[activePage, dotsJump, getItemProps, loop, range, renderItemProp, slots, classNames, total],
);
return (

16
packages/components/pagination/src/use-pagination.ts
View File

@ -57,12 +57,12 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "onChange"> {
*/
renderItem?: <T extends HTMLElement>(props: PaginationItemRenderProps<T>) => ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Pagination styles={{
* <Pagination classNames={{
* base:"base-classes",
* wrapper: "wrapper-classes",
* prev: "prev-classes", // prev button classes
@ -72,7 +72,7 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "onChange"> {
* }} />
* ```
*/
styles?: SlotsToClasses<PaginationSlots>;
classNames?: SlotsToClasses<PaginationSlots>;
}
export type UsePaginationProps = Props & UseBasePaginationProps & PaginationVariantProps;
@ -85,7 +85,7 @@ export function usePagination(originalProps: UsePaginationProps) {
const {
as,
ref,
styles,
classNames,
dotsJump = 5,
loop = false,
showControls = false,
@ -186,7 +186,7 @@ export function usePagination(originalProps: UsePaginationProps) {
[...Object.values(variantProps)],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const onNext = () => {
if (loop && activePage === total) {
@ -224,7 +224,7 @@ export function usePagination(originalProps: UsePaginationProps) {
...props,
ref: (node) => getItemRef(node, props.value),
isActive: props.value === activePage,
className: slots.item({class: styles?.item}),
className: slots.item({class: classNames?.item}),
onPress: () => {
if (props.value !== activePage) {
setPage(props.value);
@ -238,7 +238,7 @@ export function usePagination(originalProps: UsePaginationProps) {
...props,
ref: cursorRef,
activePage,
className: slots.cursor({class: styles?.cursor}),
className: slots.cursor({class: classNames?.cursor}),
};
};
@ -247,7 +247,7 @@ export function usePagination(originalProps: UsePaginationProps) {
showControls,
dotsJump,
slots,
styles,
classNames,
loop,
total,
range,

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

@ -199,11 +199,11 @@ export const CustomItems = () => {
);
};
export const CustomWithStyles = Template.bind({});
CustomWithStyles.args = {
export const CustomWithClassNames = Template.bind({});
CustomWithClassNames.args = {
...defaultProps,
showShadow: true,
styles: {
classNames: {
base: "gap-0 rounded border-1 border-neutral",
item: "w-8 h-8 text-sm rounded-none bg-transparent",
cursor:

15
packages/components/popover/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230413014154
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230413014154
- @nextui-org/aria-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/button@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

22
packages/components/popover/src/use-popover.ts
View File

@ -56,19 +56,19 @@ export interface Props extends HTMLNextUIProps<"div"> {
*/
motionProps?: HTMLMotionProps<"div">;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Popover styles={{
* <Popover classNames={{
* base:"base-classes",
* trigger: "trigger-classes",
* arrow: "arrow-classes",
* }} />
* ```
*/
styles?: SlotsToClasses<PopoverSlots>;
classNames?: SlotsToClasses<PopoverSlots>;
}
export type UsePopoverProps = Props &
@ -99,7 +99,7 @@ export function usePopover(originalProps: UsePopoverProps) {
isKeyboardDismissDisabled,
motionProps,
className,
styles,
classNames,
...otherProps
} = props;
@ -155,7 +155,7 @@ export function usePopover(originalProps: UsePopoverProps) {
[...Object.values(variantProps), isFocusVisible],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getPopoverProps: PropGetter = (props = {}) => ({
ref: popoverRef,
@ -176,7 +176,7 @@ export function usePopover(originalProps: UsePopoverProps) {
(props = {}, _ref: Ref<any> | null | undefined = null) => {
return {
...mergeProps(triggerProps, props),
className: slots.trigger({class: clsx(styles?.trigger, props.className)}),
className: slots.trigger({class: clsx(classNames?.trigger, props.className)}),
ref: mergeRefs(_ref, triggerRef),
"aria-controls": popoverId,
"aria-haspopup": "dialog",
@ -187,27 +187,27 @@ export function usePopover(originalProps: UsePopoverProps) {
const getBackdropProps = useCallback<PropGetter>(
(props = {}) => ({
className: slots.backdrop({class: styles?.backdrop}),
className: slots.backdrop({class: classNames?.backdrop}),
onClick: () => state.close(),
...underlayProps,
...props,
}),
[slots, styles, underlayProps],
[slots, classNames, underlayProps],
);
const getArrowProps = useCallback<PropGetter>(
() => ({
className: slots.arrow({class: styles?.arrow}),
className: slots.arrow({class: classNames?.arrow}),
"data-placement": getArrowPlacement(placement, placementProp),
...arrowProps,
}),
[arrowProps, placement, placementProp, slots, styles],
[arrowProps, placement, placementProp, slots, classNames],
);
return {
Component,
children,
styles,
classNames,
showArrow,
triggerRef,
placement: placementProp,

13
packages/components/progress/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230413014154
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

@ -1,6 +1,6 @@
{
"name": "@nextui-org/progress",
"version": "0.0.0-dev-v2-20230412124525",
"version": "0.0.0-dev-v2-20230413014154",
"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

@ -8,7 +8,7 @@ const CircularProgress = forwardRef<CircularProgressProps, "div">((props, ref) =
const {
Component,
slots,
styles,
classNames,
label,
showValueLabel,
getProgressBarProps,
@ -21,12 +21,12 @@ const CircularProgress = forwardRef<CircularProgressProps, "div">((props, ref) =
return (
<Component {...progressBarProps}>
<div className={slots.svgWrapper({class: styles?.svgWrapper})}>
<div className={slots.svgWrapper({class: classNames?.svgWrapper})}>
<svg {...getSvgProps()}>
<circle {...getCircleProps()} />
</svg>
{showValueLabel && (
<span className={slots.value({class: styles?.value})}>
<span className={slots.value({class: classNames?.value})}>
{progressBarProps["aria-valuetext"]}
</span>
)}

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

@ -8,7 +8,7 @@ const Progress = forwardRef<ProgressProps, "div">((props, ref) => {
const {
Component,
slots,
styles,
classNames,
label,
percentage,
showValueLabel,
@ -17,20 +17,23 @@ const Progress = forwardRef<ProgressProps, "div">((props, ref) => {
} = useProgress({ref, ...props});
const progressBarProps = getProgressBarProps();
const shouldShowLabelWrapper = label || showValueLabel;
return (
<Component {...progressBarProps}>
<div className={slots.labelWrapper({class: styles?.labelWrapper})}>
{label && <span {...getLabelProps()}>{label}</span>}
{showValueLabel && (
<span className={slots.value({class: styles?.value})}>
{progressBarProps["aria-valuetext"]}
</span>
)}
</div>
<div className={slots.track({class: styles?.track})}>
{shouldShowLabelWrapper ? (
<div className={slots.labelWrapper({class: classNames?.labelWrapper})}>
{label && <span {...getLabelProps()}>{label}</span>}
{showValueLabel && (
<span className={slots.value({class: classNames?.value})}>
{progressBarProps["aria-valuetext"]}
</span>
)}
</div>
) : null}
<div className={slots.track({class: classNames?.track})}>
<div
className={slots.filler({class: styles?.filler})}
className={slots.filler({class: classNames?.filler})}
style={{
transform: `translateX(-${100 - (percentage || 0)}%)`,
}}

24
packages/components/progress/src/use-circular-progress.ts
View File

@ -27,12 +27,12 @@ export interface Props extends HTMLNextUIProps<"div"> {
*/
showValueLabel?: boolean;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <CircularProgress styles={{
* <CircularProgress classNames={{
* base:"base-classes",
* labelWrapper: "labelWrapper-classes",
* label: "label-classes",
@ -42,7 +42,7 @@ export interface Props extends HTMLNextUIProps<"div"> {
* }} />
* ```
*/
styles?: SlotsToClasses<CircularProgressSlots>;
classNames?: SlotsToClasses<CircularProgressSlots>;
}
export type UseCircularProgressProps = Props & AriaProgressBarProps & CircularProgressVariantProps;
@ -55,7 +55,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
as,
id,
className,
styles,
classNames,
label,
valueLabel,
value = undefined,
@ -72,7 +72,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
const domRef = useDOMRef(ref);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const [, isMounted] = useIsMounted({
rerender: true,
delay: 100,
@ -145,10 +145,10 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
const getLabelProps = useCallback<PropGetter>(
(props = {}) => ({
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
...mergeProps(labelProps, props),
}),
[slots, styles, labelProps],
[slots, classNames, labelProps],
);
const getSvgProps = useCallback<PropGetter>(
@ -156,10 +156,10 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
viewBox: "0 0 32 32",
fill: "none",
strokeWidth,
className: slots.svg({class: styles?.svg}),
className: slots.svg({class: classNames?.svg}),
...props,
}),
[strokeWidth, slots, styles],
[strokeWidth, slots, classNames],
);
const getCircleProps = useCallback<PropGetter>(
@ -171,17 +171,17 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
strokeDasharray: `${circumference} ${circumference}`,
strokeDashoffset: offset,
transform: "rotate(-90 16 16)",
className: slots.circle({class: styles?.circle}),
className: slots.circle({class: classNames?.circle}),
...props,
}),
[slots, styles, offset, circumference, radius],
[slots, classNames, offset, circumference, radius],
);
return {
Component,
domRef,
slots,
styles,
classNames,
label,
showValueLabel,
getProgressBarProps,

16
packages/components/progress/src/use-progress.ts
View File

@ -23,12 +23,12 @@ interface Props extends HTMLNextUIProps<"div"> {
*/
showValueLabel?: boolean;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Progress styles={{
* <Progress classNames={{
* base:"base-classes",
* labelWrapper: "labelWrapper-classes",
* label: "label-classes",
@ -38,7 +38,7 @@ interface Props extends HTMLNextUIProps<"div"> {
* }} />
* ```
*/
styles?: SlotsToClasses<ProgressSlots>;
classNames?: SlotsToClasses<ProgressSlots>;
}
export type UseProgressProps = Props & AriaProgressBarProps & ProgressVariantProps;
@ -51,7 +51,7 @@ export function useProgress(originalProps: UseProgressProps) {
as,
id,
className,
styles,
classNames,
label,
valueLabel,
value = 0,
@ -68,7 +68,7 @@ export function useProgress(originalProps: UseProgressProps) {
const domRef = useDOMRef(ref);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const [, isMounted] = useIsMounted({
rerender: true,
delay: 100,
@ -128,17 +128,17 @@ export function useProgress(originalProps: UseProgressProps) {
const getLabelProps = useCallback<PropGetter>(
(props = {}) => ({
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
...mergeProps(labelProps, props),
}),
[slots, styles, labelProps],
[slots, classNames, labelProps],
);
return {
Component,
domRef,
slots,
styles,
classNames,
label,
percentage,
showValueLabel,

11
packages/components/radio/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

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

@ -10,7 +10,7 @@ const Radio = forwardRef<RadioProps, "label">((props, ref) => {
Component,
children,
slots,
styles,
classNames,
description,
getBaseProps,
getWrapperProps,
@ -31,7 +31,7 @@ const Radio = forwardRef<RadioProps, "label">((props, ref) => {
<div {...getLabelWrapperProps()}>
{children && <span {...getLabelProps()}>{children}</span>}
{description && (
<span className={slots.description({class: styles?.description})}>{description}</span>
<span className={slots.description({class: classNames?.description})}>{description}</span>
)}
</div>
</Component>

14
packages/components/radio/src/use-radio-group.ts
View File

@ -25,12 +25,12 @@ interface Props extends HTMLNextUIProps<"div"> {
*/
orientation?: Orientation;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <RadioGroup styles={{
* <RadioGroup classNames={{
* base:"base-classes",
* label: "label-classes",
* wrapper: "wrapper-classes", // radios wrapper
@ -39,7 +39,7 @@ interface Props extends HTMLNextUIProps<"div"> {
* </RadioGroup>
* ```
*/
styles?: SlotsToClasses<RadioGroupSlots>;
classNames?: SlotsToClasses<RadioGroupSlots>;
/**
* React aria onChange event.
*/
@ -66,7 +66,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
const {
as,
ref,
styles,
classNames,
children,
label,
size = "md",
@ -131,7 +131,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
const slots = useMemo(() => radioGroup(), []);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getGroupProps: PropGetter = () => {
return {
@ -143,14 +143,14 @@ export function useRadioGroup(props: UseRadioGroupProps) {
const getLabelProps: PropGetter = () => {
return {
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
...labelProps,
};
};
const getWrapperProps: PropGetter = () => {
return {
className: slots.wrapper({class: styles?.wrapper}),
className: slots.wrapper({class: classNames?.wrapper}),
role: "presentation",
"data-orientation": orientation,
};

24
packages/components/radio/src/use-radio.ts
View File

@ -28,12 +28,12 @@ interface Props extends HTMLNextUIProps<"label"> {
*/
description?: string | ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Radio styles={{
* <Radio classNames={{
* base:"base-classes",
* wrapper: "wrapper-classes",
* point: "control-classes", // inner circle
@ -43,7 +43,7 @@ interface Props extends HTMLNextUIProps<"label"> {
* }} />
* ```
*/
styles?: SlotsToClasses<RadioSlots>;
classNames?: SlotsToClasses<RadioSlots>;
}
export type UseRadioProps = Omit<Props, "defaultChecked"> &
@ -56,7 +56,7 @@ export function useRadio(props: UseRadioProps) {
const {
as,
ref,
styles,
classNames,
id,
value,
children,
@ -145,7 +145,7 @@ export function useRadio(props: UseRadioProps) {
[color, size, radius, isDisabled, isInvalid, isFocusVisible, disableAnimation],
);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getBaseProps: PropGetter = (props = {}) => {
return {
@ -173,7 +173,7 @@ export function useRadio(props: UseRadioProps) {
"data-readonly": dataAttr(inputProps.readOnly),
"aria-required": dataAttr(isRequired),
"aria-hidden": true,
className: clsx(slots.wrapper({class: styles?.wrapper})),
className: clsx(slots.wrapper({class: classNames?.wrapper})),
};
};
@ -197,17 +197,17 @@ export function useRadio(props: UseRadioProps) {
"data-disabled": dataAttr(isDisabled),
"data-checked": dataAttr(isSelected),
"data-invalid": dataAttr(isInvalid),
className: slots.label({class: styles?.label}),
className: slots.label({class: classNames?.label}),
}),
[slots, styles, isDisabled, isSelected, isInvalid],
[slots, classNames, isDisabled, isSelected, isInvalid],
);
const getLabelWrapperProps: PropGetter = useCallback(
(props = {}) => ({
...props,
className: slots.labelWrapper({class: styles?.labelWrapper}),
className: slots.labelWrapper({class: classNames?.labelWrapper}),
}),
[slots, styles],
[slots, classNames],
);
const getControlProps: PropGetter = useCallback(
@ -216,7 +216,7 @@ export function useRadio(props: UseRadioProps) {
"data-disabled": dataAttr(isDisabled),
"data-checked": dataAttr(isSelected),
"data-invalid": dataAttr(isInvalid),
className: slots.control({class: styles?.control}),
className: slots.control({class: classNames?.control}),
}),
[slots, isDisabled, isSelected, isInvalid],
);
@ -225,7 +225,7 @@ export function useRadio(props: UseRadioProps) {
Component,
children,
slots,
styles,
classNames,
description,
isSelected,
isDisabled,

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

@ -197,7 +197,7 @@ const CustomRadio = (props: RadioProps) => {
return (
<Radio
{...otherProps}
styles={{
classNames={{
base: clsx(
"inline-flex bg-content1 hover:bg-content2 items-center justify-between flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
{
@ -211,7 +211,7 @@ const CustomRadio = (props: RadioProps) => {
);
};
export const CustomWithStyles = () => {
export const CustomWithClassNames = () => {
return (
<RadioGroup label="Plans">
<CustomRadio description="Up to 20 items" value="free">

13
packages/components/snippet/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/tooltip@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

@ -1,6 +1,6 @@
{
"name": "@nextui-org/snippet",
"version": "0.0.0-dev-v2-20230412124525",
"version": "0.0.0-dev-v2-20230413014154",
"description": "Display a snippet of copyable code for the command line.",
"keywords": [
"snippet"

12
packages/components/snippet/src/snippet.tsx
View File

@ -15,7 +15,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
domRef,
children,
slots,
styles,
classNames,
copied,
copyIcon = <SnippetCopyIcon />,
checkIcon = <SnippetCheckIcon />,
@ -44,7 +44,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
const copyButton = (
<button
className={slots.copy({
class: clsx(disableCopy && "opacity-50 cursor-not-allowed", styles?.copy),
class: clsx(disableCopy && "opacity-50 cursor-not-allowed", classNames?.copy),
})}
onClick={onCopy}
{...focusProps}
@ -60,7 +60,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
return <TooltipContent>{copyButton}</TooltipContent>;
}, [
slots,
styles?.copy,
classNames?.copy,
copied,
checkIcon,
copyIcon,
@ -76,7 +76,7 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
return (
<div className="flex flex-col">
{children.map((t, index) => (
<pre key={`${index}-${t}`} className={slots.pre({class: styles?.pre})}>
<pre key={`${index}-${t}`} className={slots.pre({class: classNames?.pre})}>
{!hideSymbol && <span className="select-none">{symbolBefore}</span>}
{t}
</pre>
@ -86,12 +86,12 @@ const Snippet = forwardRef<SnippetProps, "div">((props, ref) => {
}
return (
<pre className={slots.pre({class: styles?.pre})}>
<pre className={slots.pre({class: classNames?.pre})}>
{!hideSymbol && <span className="select-none">{symbolBefore}</span>}
{children}
</pre>
);
}, [children, hideSymbol, isMultiLine, symbolBefore, styles?.pre, slots]);
}, [children, hideSymbol, isMultiLine, symbolBefore, classNames?.pre, slots]);
return (
<Component ref={domRef} {...getSnippetProps()}>

12
packages/components/snippet/src/use-snippet.ts
View File

@ -39,19 +39,19 @@ export interface UseSnippetProps
*/
checkIcon?: React.ReactNode;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Snippet styles={{
* <Snippet classNames={{
* base:"base-classes",
* pre: "pre-classes",
* copy: "copy-classes",
* }} />
* ```
*/
styles?: SlotsToClasses<SnippetSlots>;
classNames?: SlotsToClasses<SnippetSlots>;
/**
* Whether the copy button should receive focus on render.
* @default false
@ -95,7 +95,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
as,
children,
symbol = "$",
styles,
classNames,
timeout,
copyIcon,
checkIcon,
@ -144,7 +144,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
return str ? `${str} ` : "";
}, [symbol]);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const getSnippetProps = useCallback<PropGetter>(
() => ({
@ -178,7 +178,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
domRef,
children,
slots,
styles,
classNames,
copied,
onCopy,
copyIcon,

11
packages/components/spinner/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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

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

6
packages/components/spinner/src/spinner.tsx
View File

@ -5,12 +5,12 @@ import {UseSpinnerProps, useSpinner} from "./use-spinner";
export interface SpinnerProps extends Omit<UseSpinnerProps, "ref"> {}
const Spinner = forwardRef<SpinnerProps, "div">((props, ref) => {
const {domRef, slots, styles, label, getSpinnerProps} = useSpinner({ref, ...props});
const {domRef, slots, classNames, label, getSpinnerProps} = useSpinner({ref, ...props});
return (
<div ref={domRef} {...getSpinnerProps()}>
<i className={slots.circle1({class: styles?.circle1})} />
<i className={slots.circle2({class: styles?.circle2})} />
<i className={slots.circle1({class: classNames?.circle1})} />
<i className={slots.circle2({class: classNames?.circle2})} />
{label && <span className={slots.label()}>{label}</span>}
</div>
);

12
packages/components/spinner/src/use-spinner.ts
View File

@ -16,12 +16,12 @@ export interface UseSpinnerProps extends HTMLNextUIProps<"div", SpinnerVariantPr
*/
label?: string;
/**
* Classname or List of classes to change the styles of the element.
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <Spinner styles={{
* <Spinner classNames={{
* base:"base-classes",
* line1: "circle1-classes",
* line2: "circle2-classes",
@ -29,19 +29,19 @@ export interface UseSpinnerProps extends HTMLNextUIProps<"div", SpinnerVariantPr
* }} />
* ```
*/
styles?: SlotsToClasses<SpinnerSlots>;
classNames?: SlotsToClasses<SpinnerSlots>;
}
export function useSpinner(originalProps: UseSpinnerProps) {
const [props, variantProps] = mapPropsVariants(originalProps, spinner.variantKeys);
const {ref, children, className, styles, label: labelProp, ...otherProps} = props;
const {ref, children, className, classNames, label: labelProp, ...otherProps} = props;
const domRef = useDOMRef(ref);
const slots = useMemo(() => spinner({...variantProps}), [...Object.values(variantProps)]);
const baseStyles = clsx(styles?.base, className);
const baseStyles = clsx(classNames?.base, className);
const label = labelProp || children;
@ -64,7 +64,7 @@ export function useSpinner(originalProps: UseSpinnerProps) {
[ariaLabel, slots, baseStyles, otherProps],
);
return {domRef, label, slots, styles, getSpinnerProps};
return {domRef, label, slots, classNames, getSpinnerProps};
}
export type UseSpinnerReturn = ReturnType<typeof useSpinner>;

11
packages/components/switch/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230413014154
### Patch Changes
- Styles prop chnaged to classNames, progress label wrapper hidden when possible
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/dom-utils@0.0.0-dev-v2-20230413014154
- @nextui-org/system@0.0.0-dev-v2-20230413014154
- @nextui-org/theme@0.0.0-dev-v2-20230413014154
## 0.0.0-dev-v2-20230412124525
### Patch Changes

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