mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(button): migration in progress
This commit is contained in:
Junior Garcia
parent
608650b706
commit
eb5b8b5511
@ -5,7 +5,7 @@ import {AvatarGroupProvider} from "./avatar-group-context";
|
||||
import {useAvatarGroup, UseAvatarGroupProps} from "./use-avatar-group";
|
||||
import Avatar from "./avatar";
|
||||
|
||||
export interface AvatarGroupProps extends UseAvatarGroupProps {}
|
||||
export interface AvatarGroupProps extends Omit<UseAvatarGroupProps, "ref"> {}
|
||||
|
||||
const AvatarGroup = forwardRef<AvatarGroupProps, "div">((props, ref) => {
|
||||
const {
|
||||
|
||||
@ -5,7 +5,7 @@ import {useMemo} from "react";
|
||||
import {AvatarIcon} from "./avatar-icon";
|
||||
import {useAvatar, UseAvatarProps} from "./use-avatar";
|
||||
|
||||
export interface AvatarProps extends UseAvatarProps {}
|
||||
export interface AvatarProps extends Omit<UseAvatarProps, "ref"> {}
|
||||
|
||||
const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
|
||||
const {
|
||||
|
||||
@ -9,19 +9,19 @@ export default {
|
||||
argTypes: {
|
||||
color: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "error"],
|
||||
type: "select",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
control: {
|
||||
type: "radio",
|
||||
type: "select",
|
||||
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
type: "select",
|
||||
options: ["xs", "sm", "md", "lg", "xl"],
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {Activity, Camera} from "@nextui-org/shared-icons";
|
||||
import {avatar} from "@nextui-org/theme";
|
||||
|
||||
import {Avatar, AvatarProps} from "../src";
|
||||
|
||||
@ -10,43 +11,46 @@ export default {
|
||||
argTypes: {
|
||||
color: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "error"],
|
||||
type: "select",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
|
||||
type: "select",
|
||||
options: ["none", "base", "sm", "md", "lg", "xl", "2xl", "3xl", "full"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
type: "select",
|
||||
options: ["xs", "sm", "md", "lg", "xl"],
|
||||
},
|
||||
},
|
||||
showFallback: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Avatar>;
|
||||
|
||||
const Template: ComponentStory<typeof Avatar> = (args: AvatarProps) => <Avatar {...args} />;
|
||||
|
||||
const defaultProps = {
|
||||
...avatar.defaultVariants,
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {};
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const WithText = Template.bind({});
|
||||
WithText.args = {
|
||||
...defaultProps,
|
||||
name: "JW",
|
||||
color: "error",
|
||||
color: "danger",
|
||||
};
|
||||
|
||||
export const isDisabled = Template.bind({});
|
||||
isDisabled.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
|
||||
color: "secondary",
|
||||
isBordered: true,
|
||||
@ -55,11 +59,13 @@ isDisabled.args = {
|
||||
|
||||
export const WithImage = Template.bind({});
|
||||
WithImage.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
|
||||
};
|
||||
|
||||
export const isBordered = Template.bind({});
|
||||
isBordered.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
|
||||
color: "secondary",
|
||||
isBordered: true,
|
||||
@ -67,17 +73,20 @@ isBordered.args = {
|
||||
|
||||
export const isFocusable = Template.bind({});
|
||||
isFocusable.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
|
||||
isFocusable: true,
|
||||
};
|
||||
|
||||
export const WithIcon = Template.bind({});
|
||||
WithIcon.args = {
|
||||
...defaultProps,
|
||||
size: "lg",
|
||||
};
|
||||
|
||||
export const Custom = Template.bind({});
|
||||
Custom.args = {
|
||||
...defaultProps,
|
||||
icon: <Activity fill="currentColor" size={20} />,
|
||||
radius: "xl",
|
||||
styles: {
|
||||
@ -87,6 +96,7 @@ Custom.args = {
|
||||
|
||||
export const CustomSize = Template.bind({});
|
||||
CustomSize.args = {
|
||||
...defaultProps,
|
||||
styles: {
|
||||
base: "w-32 h-32 text-md",
|
||||
},
|
||||
@ -94,6 +104,7 @@ CustomSize.args = {
|
||||
|
||||
export const CustomSizeImg = Template.bind({});
|
||||
CustomSizeImg.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
|
||||
name: "Junior",
|
||||
styles: {
|
||||
@ -103,6 +114,7 @@ CustomSizeImg.args = {
|
||||
|
||||
export const DefaultIcon = Template.bind({});
|
||||
DefaultIcon.args = {
|
||||
...defaultProps,
|
||||
styles: {
|
||||
icon: "text-neutral-400",
|
||||
},
|
||||
@ -110,12 +122,14 @@ DefaultIcon.args = {
|
||||
|
||||
export const IconFallback = Template.bind({});
|
||||
IconFallback.args = {
|
||||
...defaultProps,
|
||||
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
|
||||
showFallback: true,
|
||||
};
|
||||
|
||||
export const InitialsFallback = Template.bind({});
|
||||
InitialsFallback.args = {
|
||||
...defaultProps,
|
||||
src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
|
||||
name: "Junior",
|
||||
showFallback: true,
|
||||
@ -123,6 +137,7 @@ InitialsFallback.args = {
|
||||
|
||||
export const CustomFallback = Template.bind({});
|
||||
CustomFallback.args = {
|
||||
...defaultProps,
|
||||
src: "https://images.unsplash.com/broken",
|
||||
showFallback: true,
|
||||
fallback: (
|
||||
@ -132,6 +147,7 @@ CustomFallback.args = {
|
||||
|
||||
export const BrokenImage = Template.bind({});
|
||||
BrokenImage.args = {
|
||||
...defaultProps,
|
||||
src: "https://images.unsplash.com/broken-image",
|
||||
name: "Junior",
|
||||
showFallback: true,
|
||||
|
||||
@ -39,8 +39,8 @@
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/shared-css": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@nextui-org/drip": "workspace:*",
|
||||
"@react-aria/button": "^3.6.2",
|
||||
"@react-aria/interactions": "^3.12.0",
|
||||
|
||||
@ -1,54 +1,33 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
import {Drip} from "@nextui-org/drip";
|
||||
import {Children, useMemo} from "react";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
// import {Drip} from "@nextui-org/drip";
|
||||
// import {Children, useMemo} from "react";
|
||||
|
||||
import ButtonGroup from "./button-group";
|
||||
import ButtonIcon from "./button-icon";
|
||||
import {StyledButton} from "./button.styles";
|
||||
// import ButtonIcon from "./button-icon";
|
||||
import {UseButtonProps, useButton} from "./use-button";
|
||||
|
||||
export interface ButtonProps extends Omit<UseButtonProps, "ref"> {}
|
||||
|
||||
type CompoundButton = {
|
||||
Group: typeof ButtonGroup;
|
||||
};
|
||||
|
||||
const Button = forwardRef<ButtonProps, "button", CompoundButton>((props, ref) => {
|
||||
const Button = forwardRef<ButtonProps, "button">((props, ref) => {
|
||||
const {
|
||||
buttonRef,
|
||||
Component,
|
||||
domRef,
|
||||
children,
|
||||
state,
|
||||
as,
|
||||
css,
|
||||
hasIcon,
|
||||
dripBindings,
|
||||
isRightIcon,
|
||||
cssColors,
|
||||
getIconCss,
|
||||
className,
|
||||
isGradientButtonBorder,
|
||||
slots,
|
||||
// styles,
|
||||
baseStyles,
|
||||
// hasIcon,
|
||||
// dripBindings,
|
||||
// isRightIcon,
|
||||
getButtonProps,
|
||||
} = useButton({
|
||||
ref,
|
||||
...props,
|
||||
});
|
||||
|
||||
const buttonProps = useMemo(() => getButtonProps(), [getButtonProps]);
|
||||
|
||||
return (
|
||||
<StyledButton
|
||||
ref={buttonRef}
|
||||
as={as}
|
||||
className={clsx("nextui-button", className)}
|
||||
css={{
|
||||
...cssColors,
|
||||
...css,
|
||||
}}
|
||||
data-state={state}
|
||||
{...buttonProps}
|
||||
>
|
||||
{Children.count(children) === 0 ? (
|
||||
<Component ref={domRef} className={slots.base({class: baseStyles})} {...getButtonProps()}>
|
||||
{/* {Children.count(children) === 0 ? (
|
||||
<ButtonIcon
|
||||
isSingle
|
||||
css={getIconCss}
|
||||
@ -80,18 +59,15 @@ const Button = forwardRef<ButtonProps, "button", CompoundButton>((props, ref) =>
|
||||
</>
|
||||
) : (
|
||||
<span className="nextui-button-text">{children}</span>
|
||||
)}
|
||||
<Drip color="white" {...dripBindings} />
|
||||
</StyledButton>
|
||||
)} */}
|
||||
{children}
|
||||
{/* <Drip color="white" {...dripBindings} /> */}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
|
||||
Button.Group = ButtonGroup;
|
||||
|
||||
if (__DEV__) {
|
||||
Button.displayName = "NextUI.Button";
|
||||
}
|
||||
|
||||
Button.toString = () => ".nextui-button";
|
||||
|
||||
export default Button;
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import Button from "./button";
|
||||
// import ButtonGroup from "./button-group";
|
||||
|
||||
// export types
|
||||
export type {ButtonProps} from "./button";
|
||||
|
||||
// export hooks
|
||||
export {useButton} from "./use-button";
|
||||
// export {useButtonGroup} from "./use-button-group";
|
||||
|
||||
// export component
|
||||
export {default as Button} from "./button";
|
||||
export {Button};
|
||||
|
||||
@ -1,107 +1,54 @@
|
||||
import type {ButtonVariantProps, ButtonSlots, SlotsToClasses} from "@nextui-org/theme";
|
||||
import type {AriaButtonProps} from "@react-types/button";
|
||||
import type {PressEvent} from "@react-types/shared";
|
||||
import type {ReactRef, NormalColors, NormalSizes, NormalWeights} from "@nextui-org/shared-utils";
|
||||
import type {HTMLNextUIProps, CSS} from "@nextui-org/system";
|
||||
import type {ReactRef} from "@nextui-org/shared-utils";
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
|
||||
import {MouseEventHandler, ReactNode, useCallback, useMemo, Children} from "react";
|
||||
import {MouseEventHandler, ReactNode, useCallback} from "react";
|
||||
import {useButton as useAriaButton} from "@react-aria/button";
|
||||
import {useFocusRing} from "@react-aria/focus";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {useDrip} from "@nextui-org/drip";
|
||||
import {useHover} from "@react-aria/interactions";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {__DEV__, warn} from "@nextui-org/shared-utils";
|
||||
import {warn, clsx} from "@nextui-org/shared-utils";
|
||||
import {button} from "@nextui-org/theme";
|
||||
|
||||
import {getColors} from "./button-utils";
|
||||
import {useButtonGroupContext} from "./button-group-context";
|
||||
|
||||
export interface UseButtonProps extends HTMLNextUIProps<"button", AriaButtonProps> {
|
||||
export interface UseButtonProps
|
||||
extends HTMLNextUIProps<"button", Omit<AriaButtonProps, keyof ButtonVariantProps>>,
|
||||
Omit<ButtonVariantProps, "isFocusVisible"> {
|
||||
/**
|
||||
* the button ref.
|
||||
*/
|
||||
ref?: ReactRef<HTMLButtonElement | null>;
|
||||
/**
|
||||
* The button color.
|
||||
* @default "default"
|
||||
*/
|
||||
color?: NormalColors;
|
||||
/**
|
||||
* The button size.
|
||||
* @default "md"
|
||||
*/
|
||||
size?: NormalSizes;
|
||||
/**
|
||||
* The border weight of the border button.
|
||||
* @default "normal"
|
||||
*/
|
||||
borderWeight?: NormalWeights;
|
||||
/**
|
||||
* Whether the button should autoscale its width to fit its content.
|
||||
* @default false
|
||||
*/
|
||||
auto?: boolean;
|
||||
/**
|
||||
* Whether the button is disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Whether the button should be rounded.
|
||||
* @default false
|
||||
*/
|
||||
bordered?: boolean;
|
||||
/**
|
||||
* Whether the button should be light.
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
/**
|
||||
* Whether the button should be flat.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* Whether the button should display a shadow.
|
||||
* @default false
|
||||
*/
|
||||
shadow?: boolean;
|
||||
/**
|
||||
* Whether the button should be rounded.
|
||||
* @default false
|
||||
*/
|
||||
rounded?: boolean;
|
||||
/**
|
||||
* Whether the button should have a ghost look.
|
||||
* @default false
|
||||
*/
|
||||
ghost?: boolean;
|
||||
/**
|
||||
* Whether the button have animations.
|
||||
* @default true
|
||||
*/
|
||||
animated?: boolean;
|
||||
/**
|
||||
* Whether the button should display a ripple effect on press.
|
||||
* @default true
|
||||
* @default false
|
||||
*/
|
||||
ripple?: boolean;
|
||||
disableRipple?: boolean;
|
||||
|
||||
/**
|
||||
* The button left content.
|
||||
*/
|
||||
icon?: ReactNode;
|
||||
iconLeft?: ReactNode;
|
||||
/**
|
||||
* The button right content.
|
||||
*/
|
||||
iconRight?: ReactNode;
|
||||
/**
|
||||
* The button left content css object.
|
||||
* Classname or List of classes to change the styles of the avatar.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* <Avatar styles={{
|
||||
* base:"base-classes",
|
||||
* icon: "image-classes",
|
||||
* }} />
|
||||
* ```
|
||||
*/
|
||||
iconLeftCss?: CSS;
|
||||
/**
|
||||
* The button right content css object.
|
||||
*/
|
||||
iconRightCss?: CSS;
|
||||
styles?: SlotsToClasses<ButtonSlots>;
|
||||
/**
|
||||
* The native button click event handler.
|
||||
* @deprecated - use `onPress` instead.
|
||||
@ -115,27 +62,20 @@ export function useButton(props: UseButtonProps) {
|
||||
const {
|
||||
ref,
|
||||
as,
|
||||
css,
|
||||
children,
|
||||
iconLeftCss,
|
||||
iconRightCss,
|
||||
autoFocus,
|
||||
icon,
|
||||
iconLeft,
|
||||
iconRight,
|
||||
autoFocus,
|
||||
className,
|
||||
auto = groupContext?.auto ?? false,
|
||||
styles,
|
||||
fullWidth = groupContext?.fullWidth ?? false,
|
||||
size = groupContext?.size ?? "md",
|
||||
color = groupContext?.color ?? "default",
|
||||
shadow = groupContext?.shadow ?? false,
|
||||
flat = groupContext?.flat ?? false,
|
||||
ghost = groupContext?.ghost ?? false,
|
||||
light = groupContext?.light ?? false,
|
||||
bordered = groupContext?.bordered ?? false,
|
||||
borderWeight = groupContext?.borderWeight ?? "normal",
|
||||
animated = groupContext?.animated ?? true,
|
||||
rounded = groupContext?.rounded ?? false,
|
||||
ripple = groupContext?.ripple ?? true,
|
||||
disabled = groupContext?.disabled ?? false,
|
||||
color = groupContext?.color ?? "neutral",
|
||||
variant = groupContext?.variant ?? "solid",
|
||||
disableAnimation = groupContext?.disableAnimation ?? false,
|
||||
radius = groupContext?.radius ?? "lg",
|
||||
disableRipple = groupContext?.disableRipple ?? false,
|
||||
isDisabled = groupContext?.isDisabled ?? false,
|
||||
onClick: deprecatedOnClick,
|
||||
onPress,
|
||||
onPressStart,
|
||||
@ -145,44 +85,35 @@ export function useButton(props: UseButtonProps) {
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const buttonRef = useDOMRef(ref);
|
||||
const Component = as || "button";
|
||||
|
||||
const hasIcon = icon || iconRight;
|
||||
const isChildLess = Children.count(children) === 0;
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const hasIcon = iconLeft || iconRight;
|
||||
const isRightIcon = Boolean(iconRight);
|
||||
const isGradientButtonBorder = useMemo(
|
||||
() => color === "gradient" && (bordered || ghost),
|
||||
[color, bordered, ghost],
|
||||
);
|
||||
|
||||
/* eslint-enable @typescript-eslint/no-unused-vars */
|
||||
if (__DEV__ && color === "gradient" && (flat || light)) {
|
||||
warn("Using the gradient color on flat and light buttons will have no effect.", "Button");
|
||||
}
|
||||
const {isFocusVisible, focusProps} = useFocusRing({
|
||||
autoFocus,
|
||||
});
|
||||
|
||||
const buttonProps = {
|
||||
auto,
|
||||
const baseStyles = clsx(styles?.base, className);
|
||||
|
||||
const slots = button({
|
||||
size,
|
||||
color,
|
||||
shadow,
|
||||
flat,
|
||||
ghost,
|
||||
light,
|
||||
bordered,
|
||||
borderWeight,
|
||||
animated,
|
||||
rounded,
|
||||
disabled,
|
||||
};
|
||||
variant,
|
||||
radius,
|
||||
fullWidth,
|
||||
isDisabled,
|
||||
isFocusVisible,
|
||||
disableAnimation,
|
||||
});
|
||||
|
||||
const cssColors = getColors(buttonProps) as CSS;
|
||||
|
||||
const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, buttonRef);
|
||||
const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, domRef);
|
||||
|
||||
const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent | Event) => {
|
||||
if (animated && ripple && buttonRef.current) {
|
||||
onDripClickHandler(e);
|
||||
}
|
||||
if (disableRipple || isDisabled || disableAnimation) return;
|
||||
domRef.current && onDripClickHandler(e);
|
||||
};
|
||||
|
||||
const handlePress = (e: PressEvent) => {
|
||||
@ -198,7 +129,7 @@ export function useButton(props: UseButtonProps) {
|
||||
onPress?.(e);
|
||||
};
|
||||
|
||||
const {buttonProps: buttonAriaProps, isPressed} = useAriaButton(
|
||||
const {buttonProps: buttonAriaProps} = useAriaButton(
|
||||
{
|
||||
...otherProps,
|
||||
elementType: as,
|
||||
@ -208,67 +139,26 @@ export function useButton(props: UseButtonProps) {
|
||||
onPressChange,
|
||||
onPressUp,
|
||||
} as AriaButtonProps,
|
||||
buttonRef,
|
||||
domRef,
|
||||
);
|
||||
|
||||
const {hoverProps, isHovered} = useHover({isDisabled: disabled});
|
||||
|
||||
const {isFocused, isFocusVisible, focusProps} = useFocusRing({
|
||||
autoFocus,
|
||||
});
|
||||
|
||||
const getButtonProps = useCallback(() => {
|
||||
return mergeProps(buttonAriaProps, hoverProps, focusProps, otherProps, {
|
||||
...buttonProps,
|
||||
bordered: buttonProps.bordered || buttonProps.ghost,
|
||||
isFocusVisible: isFocusVisible && !buttonProps.disabled,
|
||||
isHovered: isHovered || (buttonProps.ghost && isFocused),
|
||||
isChildLess,
|
||||
isPressed,
|
||||
});
|
||||
}, [
|
||||
buttonProps,
|
||||
buttonAriaProps,
|
||||
hoverProps,
|
||||
focusProps,
|
||||
isFocusVisible,
|
||||
isHovered,
|
||||
isFocused,
|
||||
isPressed,
|
||||
isChildLess,
|
||||
otherProps,
|
||||
]);
|
||||
|
||||
const state = useMemo(() => {
|
||||
if (isPressed) return "pressed";
|
||||
if (isHovered) return "hovered";
|
||||
|
||||
return disabled ? "disabled" : "ready";
|
||||
}, [disabled, isHovered, isPressed]);
|
||||
|
||||
const getIconCss = useMemo<CSS | undefined>(() => {
|
||||
if (isRightIcon) return iconRightCss;
|
||||
|
||||
return iconLeftCss;
|
||||
}, [isRightIcon, iconRightCss, iconLeftCss]);
|
||||
const getButtonProps = useCallback(
|
||||
() => mergeProps(buttonAriaProps, focusProps, otherProps),
|
||||
[buttonAriaProps, focusProps, otherProps],
|
||||
);
|
||||
|
||||
return {
|
||||
as,
|
||||
css,
|
||||
state,
|
||||
icon,
|
||||
Component,
|
||||
children,
|
||||
buttonRef,
|
||||
className,
|
||||
cssColors,
|
||||
domRef,
|
||||
slots,
|
||||
styles,
|
||||
baseStyles,
|
||||
hasIcon,
|
||||
iconLeft,
|
||||
iconRight,
|
||||
isFocused,
|
||||
isRightIcon,
|
||||
isFocusVisible,
|
||||
isGradientButtonBorder,
|
||||
dripBindings,
|
||||
getIconCss,
|
||||
getButtonProps,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,133 +1,133 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
// import React from "react";
|
||||
// import {Meta} from "@storybook/react";
|
||||
// import {Grid} from "@nextui-org/grid";
|
||||
|
||||
import {Button} from "../src";
|
||||
// import {Button} from "../src";
|
||||
|
||||
export default {
|
||||
title: "General/ButtonGroup",
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<Grid.Container direction="column" gap={2} justify="center">
|
||||
<Story />
|
||||
</Grid.Container>
|
||||
),
|
||||
],
|
||||
} as Meta;
|
||||
// export default {
|
||||
// title: "General/ButtonGroup",
|
||||
// component: Button,
|
||||
// decorators: [
|
||||
// (Story) => (
|
||||
// <Grid.Container direction="column" gap={2} justify="center">
|
||||
// <Story />
|
||||
// </Grid.Container>
|
||||
// ),
|
||||
// ],
|
||||
// } as Meta;
|
||||
|
||||
export const Default = () => (
|
||||
<Button.Group>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
);
|
||||
// export const Default = () => (
|
||||
// <Button.Group>
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// );
|
||||
|
||||
export const Loading = () => (
|
||||
<Button.Group>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
);
|
||||
// export const Loading = () => (
|
||||
// <Button.Group>
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// );
|
||||
|
||||
export const Variants = () => (
|
||||
<>
|
||||
<Button.Group color="success">
|
||||
<Button>One</Button>
|
||||
<Button disabled>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="gradient">
|
||||
<Button>One</Button>
|
||||
<Button disabled>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="error">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button disabled>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group bordered color="primary">
|
||||
<Button disabled>Action1</Button>
|
||||
<Button>Action2</Button>
|
||||
<Button>Action3</Button>
|
||||
</Button.Group>
|
||||
<Button.Group bordered color="gradient">
|
||||
<Button disabled>Action1</Button>
|
||||
<Button>Action2</Button>
|
||||
<Button>Action3</Button>
|
||||
</Button.Group>
|
||||
<Button.Group flat color="warning">
|
||||
<Button>Action1</Button>
|
||||
<Button disabled>Action2</Button>
|
||||
<Button>Action2</Button>
|
||||
</Button.Group>
|
||||
<Button.Group color="secondary" size="sm">
|
||||
<Button disabled>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group light color="secondary">
|
||||
<Button>One</Button>
|
||||
<Button disabled>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group ghost color="gradient">
|
||||
<Button>One</Button>
|
||||
<Button disabled>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
// export const Variants = () => (
|
||||
// <>
|
||||
// <Button.Group color="success">
|
||||
// <Button>One</Button>
|
||||
// <Button disabled>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group color="gradient">
|
||||
// <Button>One</Button>
|
||||
// <Button disabled>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group color="error">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button disabled>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group bordered color="primary">
|
||||
// <Button disabled>Action1</Button>
|
||||
// <Button>Action2</Button>
|
||||
// <Button>Action3</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group bordered color="gradient">
|
||||
// <Button disabled>Action1</Button>
|
||||
// <Button>Action2</Button>
|
||||
// <Button>Action3</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group flat color="warning">
|
||||
// <Button>Action1</Button>
|
||||
// <Button disabled>Action2</Button>
|
||||
// <Button>Action2</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group color="secondary" size="sm">
|
||||
// <Button disabled>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group light color="secondary">
|
||||
// <Button>One</Button>
|
||||
// <Button disabled>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group ghost color="gradient">
|
||||
// <Button>One</Button>
|
||||
// <Button disabled>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// </>
|
||||
// );
|
||||
|
||||
export const Sizes = () => (
|
||||
<>
|
||||
<Button.Group size="xs">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="md">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="lg">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
<Button.Group size="xl">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
// export const Sizes = () => (
|
||||
// <>
|
||||
// <Button.Group size="xs">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group size="sm">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group size="md">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group size="lg">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// <Button.Group size="xl">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// </>
|
||||
// );
|
||||
|
||||
export const Vertical = () => (
|
||||
<>
|
||||
<Button.Group vertical size="sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
<Button>Four</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
// export const Vertical = () => (
|
||||
// <>
|
||||
// <Button.Group vertical size="sm">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// <Button>Four</Button>
|
||||
// </Button.Group>
|
||||
// </>
|
||||
// );
|
||||
|
||||
export const Disabled = () => (
|
||||
<>
|
||||
<Button.Group disabled size="sm">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</Button.Group>
|
||||
</>
|
||||
);
|
||||
// export const Disabled = () => (
|
||||
// <>
|
||||
// <Button.Group disabled size="sm">
|
||||
// <Button>One</Button>
|
||||
// <Button>Two</Button>
|
||||
// <Button>Three</Button>
|
||||
// </Button.Group>
|
||||
// </>
|
||||
// );
|
||||
|
||||
@ -1,292 +1,335 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
import {Spacer} from "@nextui-org/spacer";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
import {Loading} from "@nextui-org/loading";
|
||||
import {Lock, Notification, User, Camera, Activity} from "@nextui-org/shared-icons";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {button} from "@nextui-org/theme";
|
||||
// import {Loading} from "@nextui-org/loading";
|
||||
// import {Lock, Notification, User, Camera, Activity} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Button} from "../src";
|
||||
import {Button, ButtonProps} from "../src";
|
||||
|
||||
export default {
|
||||
title: "General/Button",
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{}}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} as Meta;
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["none", "base", "sm", "md", "lg", "xl", "2xl", "3xl", "full"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["xs", "sm", "md", "lg", "xl"],
|
||||
},
|
||||
},
|
||||
fullWidth: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Button>;
|
||||
|
||||
export const Default = () => <Button>Action</Button>;
|
||||
|
||||
export const Sizes = () => (
|
||||
<div>
|
||||
<Button size="xs">Mini</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="secondary" size="sm">
|
||||
Small
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="success" size="md">
|
||||
Medium
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="warning" size="lg">
|
||||
Large
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="error" size="xl">
|
||||
Extra Large
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button auto color="gradient">
|
||||
Auto width
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Loadings = () => (
|
||||
<Grid.Container gap={2}>
|
||||
<Grid>
|
||||
<Button auto disabled color="primary" css={{px: "$13"}}>
|
||||
<Loading color="currentColor" size="sm" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto disabled color="secondary" css={{px: "$13"}}>
|
||||
<Loading color="currentColor" size="sm" type="spinner" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto disabled color="success" css={{px: "$13"}}>
|
||||
<Loading color="currentColor" size="sm" type="points" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto disabled color="warning" css={{px: "$13"}}>
|
||||
<Loading color="currentColor" size="sm" type="points-opacity" />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button auto disabled color="error" css={{px: "$13"}}>
|
||||
<Loading color="currentColor" size="sm" type="spinner" />
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const Colors = () => (
|
||||
<>
|
||||
<Button color="primary">Primary</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="success">Success</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="warning">Warning</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="error">Error</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="gradient">Gradient</Button>
|
||||
<Spacer y={0.5} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Ghost = () => (
|
||||
<>
|
||||
<Button ghost color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button ghost color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button ghost color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button ghost color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button ghost color="error">
|
||||
Error
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button ghost color="gradient">
|
||||
Gradient
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Disabled = () => <Button disabled>Action</Button>;
|
||||
|
||||
export const Shadow = () => (
|
||||
<>
|
||||
<Button shadow color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button shadow color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button shadow color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button shadow color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button shadow color="error">
|
||||
Error
|
||||
</Button>
|
||||
<Spacer y={1} />
|
||||
<Button shadow color="gradient">
|
||||
Gradient
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Bordered = () => (
|
||||
<>
|
||||
<Button bordered color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button bordered color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button bordered color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button bordered color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button bordered color="error">
|
||||
Error
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button bordered color="gradient">
|
||||
Gradient
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Flat = () => (
|
||||
<>
|
||||
<Button flat color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button flat color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button flat color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button flat color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button flat color="error">
|
||||
Error
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Rounded = () => (
|
||||
<>
|
||||
<Button rounded color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button rounded color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button rounded color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button rounded color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button rounded color="error">
|
||||
Error
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button rounded color="gradient">
|
||||
Action
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Light = () => (
|
||||
<>
|
||||
<Button light>Default</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button light color="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button light color="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button light color="success">
|
||||
Success
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button light color="warning">
|
||||
Warning
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button light color="error">
|
||||
Error
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Icons = () => {
|
||||
return (
|
||||
<>
|
||||
<Button auto color="secondary" icon={<Activity fill="currentColor" />} />
|
||||
<Spacer y={0.5} />
|
||||
<Button auto iconRight={<Camera fill="currentColor" />}>
|
||||
Right Icon
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button auto bordered color="gradient" icon={<Camera fill="currentColor" />}>
|
||||
Left Icon
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="success" icon={<Lock fill="currentColor" />}>
|
||||
Lock
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button color="secondary" icon={<Notification fill="currentColor" />}>
|
||||
Notifications
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button flat color="error" icon={<User fill="currentColor" />}>
|
||||
Delete User
|
||||
</Button>
|
||||
<Spacer y={0.5} />
|
||||
<Button disabled icon={<User fill="currentColor" />}>
|
||||
Delete User
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
const defaultProps = {
|
||||
children: "Button",
|
||||
...button.defaultVariants,
|
||||
};
|
||||
|
||||
const Template: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
// export const Sizes = () => (
|
||||
// <div>
|
||||
// <Button size="xs">Mini</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="secondary" size="sm">
|
||||
// Small
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="success" size="md">
|
||||
// Medium
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="warning" size="lg">
|
||||
// Large
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="error" size="xl">
|
||||
// Extra Large
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button auto color="gradient">
|
||||
// Auto width
|
||||
// </Button>
|
||||
// </div>
|
||||
// );
|
||||
|
||||
// export const Loadings = () => (
|
||||
// <Grid.Container gap={2}>
|
||||
// <Grid>
|
||||
// <Button auto disabled color="primary" css={{px: "$13"}}>
|
||||
// <Loading color="currentColor" size="sm" />
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Button auto disabled color="secondary" css={{px: "$13"}}>
|
||||
// <Loading color="currentColor" size="sm" type="spinner" />
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Button auto disabled color="success" css={{px: "$13"}}>
|
||||
// <Loading color="currentColor" size="sm" type="points" />
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Button auto disabled color="warning" css={{px: "$13"}}>
|
||||
// <Loading color="currentColor" size="sm" type="points-opacity" />
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Button auto disabled color="error" css={{px: "$13"}}>
|
||||
// <Loading color="currentColor" size="sm" type="spinner" />
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// </Grid.Container>
|
||||
// );
|
||||
|
||||
// export const Colors = () => (
|
||||
// <>
|
||||
// <Button color="primary">Primary</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="secondary">Secondary</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="success">Success</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="warning">Warning</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="error">Error</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="gradient">Gradient</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Ghost = () => (
|
||||
// <>
|
||||
// <Button ghost color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button ghost color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button ghost color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button ghost color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button ghost color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button ghost color="gradient">
|
||||
// Gradient
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Disabled = () => <Button disabled>Action</Button>;
|
||||
|
||||
// export const Shadow = () => (
|
||||
// <>
|
||||
// <Button shadow color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={1} />
|
||||
// <Button shadow color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={1} />
|
||||
// <Button shadow color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={1} />
|
||||
// <Button shadow color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={1} />
|
||||
// <Button shadow color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// <Spacer y={1} />
|
||||
// <Button shadow color="gradient">
|
||||
// Gradient
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Bordered = () => (
|
||||
// <>
|
||||
// <Button bordered color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button bordered color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button bordered color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button bordered color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button bordered color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button bordered color="gradient">
|
||||
// Gradient
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Flat = () => (
|
||||
// <>
|
||||
// <Button flat color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button flat color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button flat color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button flat color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button flat color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Rounded = () => (
|
||||
// <>
|
||||
// <Button rounded color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button rounded color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button rounded color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button rounded color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button rounded color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button rounded color="gradient">
|
||||
// Action
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Light = () => (
|
||||
// <>
|
||||
// <Button light>Default</Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button light color="primary">
|
||||
// Primary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button light color="secondary">
|
||||
// Secondary
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button light color="success">
|
||||
// Success
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button light color="warning">
|
||||
// Warning
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button light color="error">
|
||||
// Error
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
|
||||
// export const Icons = () => {
|
||||
// return (
|
||||
// <>
|
||||
// <Button auto color="secondary" icon={<Activity fill="currentColor" />} />
|
||||
// <Spacer y={0.5} />
|
||||
// <Button auto iconRight={<Camera fill="currentColor" />}>
|
||||
// Right Icon
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button auto bordered color="gradient" icon={<Camera fill="currentColor" />}>
|
||||
// Left Icon
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="success" icon={<Lock fill="currentColor" />}>
|
||||
// Lock
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button color="secondary" icon={<Notification fill="currentColor" />}>
|
||||
// Notifications
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button flat color="error" icon={<User fill="currentColor" />}>
|
||||
// Delete User
|
||||
// </Button>
|
||||
// <Spacer y={0.5} />
|
||||
// <Button disabled icon={<User fill="currentColor" />}>
|
||||
// Delete User
|
||||
// </Button>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
@ -5,7 +5,7 @@ import {__DEV__} from "@nextui-org/shared-utils";
|
||||
import {UseLinkProps, useLink} from "./use-link";
|
||||
import {LinkIcon} from "./link-icon";
|
||||
|
||||
export interface LinkProps extends UseLinkProps {}
|
||||
export interface LinkProps extends Omit<UseLinkProps, "ref"> {}
|
||||
|
||||
const Link = forwardRef<LinkProps, "a">((props, ref) => {
|
||||
const {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import React from "react";
|
||||
import {tv, type VariantProps} from "@nextui-org/theme";
|
||||
import {link} from "@nextui-org/theme";
|
||||
|
||||
import {Link, LinkProps} from "../src";
|
||||
|
||||
@ -10,13 +11,13 @@ export default {
|
||||
argTypes: {
|
||||
color: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["foreground", "primary", "secondary", "success", "warning", "error"],
|
||||
type: "select",
|
||||
options: ["foreground", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
type: "select",
|
||||
options: ["xs", "sm", "md", "xl"],
|
||||
},
|
||||
},
|
||||
@ -30,6 +31,10 @@ export default {
|
||||
|
||||
const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
|
||||
|
||||
const defaultProps = {
|
||||
...link.defaultVariants,
|
||||
};
|
||||
|
||||
const Template: ComponentStory<typeof Link> = (args: LinkProps) => (
|
||||
<Link {...args} href="#">
|
||||
{text}
|
||||
@ -38,6 +43,7 @@ const Template: ComponentStory<typeof Link> = (args: LinkProps) => (
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
isDisabled: false,
|
||||
color: "foreground",
|
||||
size: "md",
|
||||
@ -45,6 +51,7 @@ Default.args = {
|
||||
|
||||
export const isUnderline = Template.bind({}) as any;
|
||||
isUnderline.args = {
|
||||
...defaultProps,
|
||||
isUnderline: true,
|
||||
isDisabled: false,
|
||||
size: "md",
|
||||
@ -70,6 +77,7 @@ const CustomLink = () => (
|
||||
|
||||
export const isExternal = Template.bind({}) as any;
|
||||
isExternal.args = {
|
||||
...defaultProps,
|
||||
isExternal: true,
|
||||
isDisabled: false,
|
||||
showAnchorIcon: true,
|
||||
@ -80,6 +88,7 @@ isExternal.args = {
|
||||
export const isBlock = Template.bind({}) as any;
|
||||
|
||||
isBlock.args = {
|
||||
...defaultProps,
|
||||
isBlock: true,
|
||||
isDisabled: false,
|
||||
size: "md",
|
||||
|
||||
@ -3,6 +3,7 @@ module.exports = {
|
||||
"../../link/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../avatar/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../user/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../button/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
],
|
||||
staticDirs: ["../public"],
|
||||
addons: [
|
||||
|
||||
@ -4,7 +4,7 @@ import {Avatar} from "@nextui-org/avatar";
|
||||
|
||||
import {UseUserProps, useUser} from "./use-user";
|
||||
|
||||
export interface UserProps extends UseUserProps {}
|
||||
export interface UserProps extends Omit<UseUserProps, "ref"> {}
|
||||
|
||||
const User = forwardRef<UserProps, "div">((props, ref) => {
|
||||
const {Component, domRef, name, slots, description, avatarProps, getUserProps} = useUser({
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {tv, VariantProps} from "tailwind-variants";
|
||||
|
||||
/**
|
||||
* AvatarGroup wrapper tv component
|
||||
* AvatarGroup wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const styles = avatarGroup({...})
|
||||
*
|
||||
|
||||
@ -3,7 +3,7 @@ import {tv, type VariantProps} from "tailwind-variants";
|
||||
import {translateCenterClasses, ringClasses} from "../../utils";
|
||||
|
||||
/**
|
||||
* Avatar wrapper tv component
|
||||
* Avatar wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, img, icon, name } = avatar({...})
|
||||
*
|
||||
@ -60,7 +60,7 @@ const avatar = tv({
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
base: "bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-white",
|
||||
base: "bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
primary: {
|
||||
base: "bg-primary",
|
||||
@ -74,8 +74,8 @@ const avatar = tv({
|
||||
warning: {
|
||||
base: "bg-warning text-warning-800 dark:text-warning-800",
|
||||
},
|
||||
error: {
|
||||
base: "bg-error",
|
||||
danger: {
|
||||
base: "bg-danger",
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
@ -97,6 +97,12 @@ const avatar = tv({
|
||||
xl: {
|
||||
base: "rounded-xl",
|
||||
},
|
||||
"2xl": {
|
||||
base: "rounded-2xl",
|
||||
},
|
||||
"3xl": {
|
||||
base: "rounded-3xl",
|
||||
},
|
||||
full: {
|
||||
base: "rounded-full",
|
||||
},
|
||||
@ -169,10 +175,10 @@ const avatar = tv({
|
||||
},
|
||||
},
|
||||
{
|
||||
color: "error",
|
||||
color: "danger",
|
||||
isBordered: true,
|
||||
class: {
|
||||
base: "ring-error",
|
||||
base: "ring-danger",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
368
packages/core/theme/src/components/button/index.ts
Normal file
368
packages/core/theme/src/components/button/index.ts
Normal file
@ -0,0 +1,368 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses} from "../../utils";
|
||||
|
||||
/**
|
||||
* Button wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, icon} = button({...})
|
||||
*
|
||||
* @example
|
||||
* <button className={base())}>
|
||||
* <span className={icon()} aria-hidden="true" focusable="false" >
|
||||
* <svg>your left icon</svg>
|
||||
* </span>
|
||||
* Button text
|
||||
* <span className={icon()} aria-hidden="true" focusable="false" >
|
||||
* <svg>your right icon</svg>
|
||||
* </span>
|
||||
* </button>
|
||||
*/
|
||||
const button = tv({
|
||||
slots: {
|
||||
base: [
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"box-border",
|
||||
"apparance-none",
|
||||
"outline-none",
|
||||
"user-select-none",
|
||||
"font-medium",
|
||||
],
|
||||
icon: "",
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {},
|
||||
bordered: {
|
||||
base: "border-2 !bg-transparent",
|
||||
},
|
||||
light: {
|
||||
base: "!bg-transparent",
|
||||
},
|
||||
flat: {},
|
||||
shadow: {},
|
||||
ghost: {
|
||||
base: "transition-background border-2 !bg-transparent",
|
||||
},
|
||||
},
|
||||
size: {
|
||||
xs: {
|
||||
base: "px-2 h-6 text-xs",
|
||||
},
|
||||
sm: {
|
||||
base: "px-3 h-8 text-sm",
|
||||
},
|
||||
md: {
|
||||
base: "px-4 h-10 text-base",
|
||||
},
|
||||
lg: {
|
||||
base: "px-6 h-12 text-md",
|
||||
},
|
||||
xl: {
|
||||
base: "px-8 h-14 text-lg",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
base: "bg-neutral-300 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-100",
|
||||
},
|
||||
primary: {
|
||||
base: "bg-primary text-white",
|
||||
},
|
||||
secondary: {
|
||||
base: "bg-secondary text-white",
|
||||
},
|
||||
success: {
|
||||
base: "bg-success text-success-800",
|
||||
},
|
||||
warning: {
|
||||
base: "bg-warning text-warning-800",
|
||||
},
|
||||
danger: {
|
||||
base: "bg-danger text-white",
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
none: {
|
||||
base: "rounded-none",
|
||||
},
|
||||
base: {
|
||||
base: "rounded",
|
||||
},
|
||||
sm: {
|
||||
base: "rounded-sm",
|
||||
},
|
||||
md: {
|
||||
base: "rounded-md",
|
||||
},
|
||||
lg: {
|
||||
base: "rounded-lg",
|
||||
},
|
||||
xl: {
|
||||
base: "rounded-xl",
|
||||
},
|
||||
"2xl": {
|
||||
base: "rounded-2xl",
|
||||
},
|
||||
"3xl": {
|
||||
base: "rounded-3xl",
|
||||
},
|
||||
full: {
|
||||
base: "rounded-full",
|
||||
},
|
||||
},
|
||||
fullWidth: {
|
||||
true: {
|
||||
base: "w-full",
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
true: {
|
||||
base: "opacity-50 pointer-events-none",
|
||||
},
|
||||
},
|
||||
isFocusVisible: {
|
||||
true: {
|
||||
base: [...ringClasses],
|
||||
},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
base: "!transition-none",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "md",
|
||||
variant: "solid",
|
||||
color: "neutral",
|
||||
radius: "xl",
|
||||
fullWidth: false,
|
||||
isDisabled: false,
|
||||
disableAnimation: false,
|
||||
},
|
||||
compoundVariants: [
|
||||
// shadow / color
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "shadow-lg shadow-neutral/40",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-primary/40",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-secondary/40",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "shadow-lg shadow-success/40",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "shadow-lg shadow-warning/40",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "shadow-lg shadow-danger/40",
|
||||
},
|
||||
},
|
||||
// bordered / color
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "border-primary text-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "border-secondary text-secondary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "border-success text-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "border-warning text-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "border-danger text-danger",
|
||||
},
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "bg-danger-50 dark:bg-danger-900 text-danger dark:text-danger-400",
|
||||
},
|
||||
},
|
||||
// light / color
|
||||
{
|
||||
variant: "light",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "text-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "text-secondary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "text-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "text-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "text-danger",
|
||||
},
|
||||
},
|
||||
// ghost / color
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "border-neutral-300 dark:border-neutral-700 hover:!bg-neutral-300",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "border-primary text-primary hover:text-white hover:!bg-primary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "border-secondary text-secondary hover:text-white hover:!bg-secondary",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "border-success text-success hover:text-white hover:!bg-success",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "border-warning text-warning hover:text-white hover:!bg-warning",
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "border-danger text-danger hover:text-white hover:!bg-danger",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type ButtonVariantProps = VariantProps<typeof button>;
|
||||
export type ButtonSlots = keyof ReturnType<typeof button>;
|
||||
|
||||
export {button};
|
||||
@ -2,3 +2,4 @@ export * from "./link";
|
||||
export * from "./avatar";
|
||||
export * from "./avatar-group";
|
||||
export * from "./user";
|
||||
export * from "./button";
|
||||
|
||||
@ -3,7 +3,7 @@ import {tv, type VariantProps} from "tailwind-variants";
|
||||
import {focusVisibleClasses} from "../../utils";
|
||||
|
||||
/**
|
||||
* Link **Tailwind Variants** component
|
||||
* Link wrapper **Tailwind Variants** component
|
||||
*
|
||||
* @example
|
||||
* <a className={link({ color: "secondary", isBlock: true })} href="#" />
|
||||
@ -24,7 +24,7 @@ const link = tv({
|
||||
secondary: "text-secondary dark:text-secondary-dark",
|
||||
success: "text-success",
|
||||
warning: "text-warning",
|
||||
error: "text-error",
|
||||
danger: "text-danger",
|
||||
},
|
||||
isUnderline: {
|
||||
true: "hover:underline active:underline focus:underline underline-offset-4",
|
||||
@ -69,8 +69,8 @@ const link = tv({
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "error",
|
||||
class: "hover:after:bg-error/25",
|
||||
color: "danger",
|
||||
class: "hover:after:bg-danger/25",
|
||||
},
|
||||
],
|
||||
defaultVariants: {
|
||||
|
||||
@ -3,7 +3,7 @@ import {tv, VariantProps} from "tailwind-variants";
|
||||
import {ringClasses} from "../../utils";
|
||||
|
||||
/**
|
||||
* User wrapper tv component
|
||||
* User wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, wrapper, name, description} = user({...})
|
||||
*
|
||||
|
||||
@ -118,9 +118,9 @@ module.exports = plugin(
|
||||
...colors.yellow,
|
||||
light: colors.yellow[400],
|
||||
DEFAULT: colors.yellow[500],
|
||||
dark: colors.yellow[700],
|
||||
dark: colors.yellow[500],
|
||||
},
|
||||
error: {
|
||||
danger: {
|
||||
...colors.red,
|
||||
light: colors.red[200],
|
||||
DEFAULT: colors.red[500],
|
||||
|
||||
15
pnpm-lock.yaml
generated
15
pnpm-lock.yaml
generated
@ -384,10 +384,10 @@ importers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/drip': workspace:*
|
||||
'@nextui-org/loading': workspace:*
|
||||
'@nextui-org/shared-css': workspace:*
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
'@react-aria/button': ^3.6.2
|
||||
'@react-aria/focus': ^3.9.0
|
||||
'@react-aria/interactions': ^3.12.0
|
||||
@ -399,9 +399,9 @@ importers:
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/drip': link:../drip
|
||||
'@nextui-org/shared-css': link:../../utilities/shared-css
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
'@nextui-org/theme': link:../../core/theme
|
||||
'@react-aria/button': 3.6.4_react@17.0.2
|
||||
'@react-aria/focus': 3.10.1_react@17.0.2
|
||||
'@react-aria/interactions': 3.13.1_react@17.0.2
|
||||
@ -915,17 +915,6 @@ importers:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/hooks/use-tv:
|
||||
specifiers:
|
||||
'@nextui-org/system': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/system': link:../../core/system
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
packages/utilities/aria-utils:
|
||||
specifiers:
|
||||
'@nextui-org/system': workspace:*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user