mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(button): button and drip migrated
This commit is contained in:
Junior Garcia
parent
eb5b8b5511
commit
449f1bf762
@ -48,8 +48,8 @@ WithText.args = {
|
||||
color: "danger",
|
||||
};
|
||||
|
||||
export const isDisabled = Template.bind({});
|
||||
isDisabled.args = {
|
||||
export const IsDisabled = Template.bind({});
|
||||
IsDisabled.args = {
|
||||
...defaultProps,
|
||||
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
|
||||
color: "secondary",
|
||||
|
||||
@ -1,130 +0,0 @@
|
||||
import {styled, forwardRef, HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
export interface ButtonIconProps extends HTMLNextUIProps<"span"> {
|
||||
isAuto?: boolean;
|
||||
isRight?: boolean;
|
||||
isSingle?: boolean;
|
||||
isGradientButtonBorder?: boolean;
|
||||
}
|
||||
|
||||
const StyledButtonIcon = styled("span", {
|
||||
dflex: "center",
|
||||
position: "absolute",
|
||||
left: "$$buttonPadding",
|
||||
right: "auto",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
color: "inherit",
|
||||
zIndex: "$1",
|
||||
"& svg": {
|
||||
background: "transparent",
|
||||
},
|
||||
variants: {
|
||||
isAuto: {
|
||||
true: {
|
||||
position: "relative",
|
||||
transform: "none",
|
||||
top: "0%",
|
||||
},
|
||||
},
|
||||
isRight: {
|
||||
true: {
|
||||
right: "$$buttonPadding",
|
||||
left: "auto",
|
||||
},
|
||||
},
|
||||
isSingle: {
|
||||
true: {
|
||||
position: "static",
|
||||
transform: "none",
|
||||
},
|
||||
},
|
||||
isGradientButtonBorder: {
|
||||
true: {},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
// isAuto && isRight
|
||||
{
|
||||
isAuto: true,
|
||||
isRight: true,
|
||||
isSingle: false,
|
||||
css: {
|
||||
order: 2,
|
||||
ml: "calc($$buttonPadding / 2)",
|
||||
right: "0%",
|
||||
left: "0%",
|
||||
},
|
||||
},
|
||||
// isAuto && !isRight
|
||||
{
|
||||
isAuto: true,
|
||||
isRight: false,
|
||||
isSingle: false,
|
||||
css: {
|
||||
order: 0,
|
||||
mr: "calc($$buttonPadding / 2)",
|
||||
right: "0%",
|
||||
left: "0%",
|
||||
},
|
||||
},
|
||||
// isSingle && isRight
|
||||
{
|
||||
isSingle: true,
|
||||
isRight: false,
|
||||
css: {
|
||||
ml: 0,
|
||||
},
|
||||
},
|
||||
// isSingle && !isRight
|
||||
{
|
||||
isSingle: true,
|
||||
isRight: true,
|
||||
css: {
|
||||
mr: 0,
|
||||
},
|
||||
},
|
||||
// isSingle && !isRight && hasButttonBorder
|
||||
{
|
||||
isSingle: true,
|
||||
isRight: false,
|
||||
isGradientButtonBorder: true,
|
||||
css: {
|
||||
mr: "calc($$buttonPadding / 2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const ButtonIcon = forwardRef<ButtonIconProps, "span">((props, ref) => {
|
||||
const {children, className, ...otherProps} = props;
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
return (
|
||||
<StyledButtonIcon
|
||||
ref={domRef}
|
||||
className={clsx(
|
||||
"nextui-button-icon",
|
||||
{
|
||||
"nextui-button-icon-right": props.isRight,
|
||||
"nextui-button-icon-single": props.isSingle,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</StyledButtonIcon>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
ButtonIcon.displayName = "NextUI.ButtonIcon";
|
||||
}
|
||||
|
||||
ButtonIcon.toString = () => ".nextui-button-icon";
|
||||
|
||||
export default ButtonIcon;
|
||||
@ -1,53 +0,0 @@
|
||||
import type {UseButtonProps} from "./use-button";
|
||||
import {CSS} from '@nextui-org/system'
|
||||
|
||||
export const getColors = (props: UseButtonProps): CSS => {
|
||||
if (!props.disabled) {
|
||||
if (props.auto && props.color === "gradient" && (props.bordered || props.ghost)) {
|
||||
return {
|
||||
px: "$$buttonBorderWeight",
|
||||
py: "$$buttonBorderWeight",
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
const defaultDisabledCss: CSS = {
|
||||
bg: "$accents1",
|
||||
color: "$accents7",
|
||||
transform: "none",
|
||||
boxShadow: "none",
|
||||
pe: "none",
|
||||
};
|
||||
|
||||
if (!props.bordered && !props.flat && !props.ghost && !props.light) {
|
||||
return defaultDisabledCss;
|
||||
}
|
||||
if (props.color === "gradient" && (props.bordered || props.ghost)) {
|
||||
return {
|
||||
color: "$accents4",
|
||||
backgroundImage:
|
||||
"linear-gradient($background, $background), linear-gradient($accents2, $accents2)",
|
||||
transform: "none",
|
||||
boxShadow: "none",
|
||||
pe: "none",
|
||||
pl: "$$buttonBorderWeight",
|
||||
pr: "$$buttonBorderWeight",
|
||||
};
|
||||
}
|
||||
if (props.bordered || props.ghost || props.light) {
|
||||
return {
|
||||
...defaultDisabledCss,
|
||||
bg: "transparent",
|
||||
borderColor: "$accents4",
|
||||
};
|
||||
}
|
||||
if (props.flat) {
|
||||
return {
|
||||
...defaultDisabledCss,
|
||||
bg: "$accents1",
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
@ -1,815 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
import {cssFocusVisible} from "@nextui-org/shared-css";
|
||||
|
||||
export const StyledButton = styled(
|
||||
"button",
|
||||
{
|
||||
$$buttonBorderRadius: "$radii$md",
|
||||
$$buttonPressedScale: 0.97,
|
||||
dflex: "center",
|
||||
appearance: "none",
|
||||
boxSizing: "border-box",
|
||||
fontWeight: "$medium",
|
||||
us: "none",
|
||||
lineHeight: "$sm",
|
||||
ta: "center",
|
||||
whiteSpace: "nowrap",
|
||||
transition: "$button",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
pe: "auto",
|
||||
p: 0,
|
||||
br: "$$buttonBorderRadius",
|
||||
"@motion": {
|
||||
transition: "none",
|
||||
},
|
||||
".nextui-button-text": {
|
||||
dflex: "center",
|
||||
zIndex: "$2",
|
||||
"p, pre, div": {
|
||||
margin: 0,
|
||||
},
|
||||
},
|
||||
".nextui-drip": {
|
||||
zIndex: "$1",
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.25,
|
||||
fill: "$accents2",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
bordered: {
|
||||
true: {
|
||||
bg: "transparent",
|
||||
borderStyle: "solid",
|
||||
color: "$text",
|
||||
},
|
||||
},
|
||||
ghost: {
|
||||
true: {},
|
||||
},
|
||||
color: {
|
||||
default: {
|
||||
bg: "$primary",
|
||||
color: "$primarySolidContrast",
|
||||
},
|
||||
primary: {
|
||||
bg: "$primary",
|
||||
color: "$primarySolidContrast",
|
||||
},
|
||||
secondary: {
|
||||
bg: "$secondary",
|
||||
color: "$secondarySolidContrast",
|
||||
},
|
||||
success: {
|
||||
bg: "$success",
|
||||
color: "$successSolidContrast",
|
||||
},
|
||||
warning: {
|
||||
bg: "$warning",
|
||||
color: "$warningSolidContrast",
|
||||
},
|
||||
error: {
|
||||
bg: "$error",
|
||||
color: "$errorSolidContrast",
|
||||
},
|
||||
gradient: {
|
||||
bg: "$gradient",
|
||||
color: "$primarySolidContrast",
|
||||
},
|
||||
},
|
||||
size: {
|
||||
xs: {
|
||||
$$buttonPadding: "$space$3",
|
||||
$$buttonBorderRadius: "$radii$xs",
|
||||
$$buttonHeight: "$space$10",
|
||||
px: "$3",
|
||||
height: "$$buttonHeight",
|
||||
lh: "$space$10",
|
||||
width: "auto",
|
||||
minWidth: "$20",
|
||||
fontSize: "$xs",
|
||||
},
|
||||
sm: {
|
||||
$$buttonPadding: "$space$5",
|
||||
$$buttonBorderRadius: "$radii$sm",
|
||||
$$buttonHeight: "$space$12",
|
||||
px: "$5",
|
||||
height: "$$buttonHeight",
|
||||
lh: "$space$14",
|
||||
width: "auto",
|
||||
minWidth: "$36",
|
||||
fontSize: "$sm",
|
||||
},
|
||||
md: {
|
||||
$$buttonPadding: "$space$7",
|
||||
$$buttonBorderRadius: "$radii$md",
|
||||
$$buttonHeight: "$space$14",
|
||||
px: "$7",
|
||||
height: "$$buttonHeight",
|
||||
lh: "$space$14",
|
||||
width: "auto",
|
||||
minWidth: "$48",
|
||||
fontSize: "$sm",
|
||||
},
|
||||
lg: {
|
||||
$$buttonPadding: "$space$9",
|
||||
$$buttonBorderRadius: "$radii$base",
|
||||
$$buttonHeight: "$space$16",
|
||||
px: "$9",
|
||||
height: "$$buttonHeight",
|
||||
lh: "$space$15",
|
||||
width: "auto",
|
||||
minWidth: "$60",
|
||||
fontSize: "$md",
|
||||
},
|
||||
xl: {
|
||||
$$buttonPadding: "$space$10",
|
||||
$$buttonBorderRadius: "$radii$xl",
|
||||
$$buttonHeight: "$space$18",
|
||||
px: "$10",
|
||||
height: "$$buttonHeight",
|
||||
lh: "$space$17",
|
||||
width: "auto",
|
||||
minWidth: "$72",
|
||||
fontSize: "$lg",
|
||||
},
|
||||
},
|
||||
borderWeight: {
|
||||
light: {
|
||||
bw: "$light",
|
||||
$$buttonBorderWeight: "$borderWeights$light",
|
||||
},
|
||||
normal: {
|
||||
bw: "$normal",
|
||||
$$buttonBorderWeight: "$borderWeights$normal",
|
||||
},
|
||||
bold: {
|
||||
bw: "$bold",
|
||||
$$buttonBorderWeight: "$borderWeights$bold",
|
||||
},
|
||||
extrabold: {
|
||||
bw: "$extrabold",
|
||||
$$buttonBorderWeight: "$borderWeights$extrabold",
|
||||
},
|
||||
black: {
|
||||
bw: "$black",
|
||||
$$buttonBorderWeight: "$borderWeights$black",
|
||||
},
|
||||
},
|
||||
flat: {
|
||||
true: {
|
||||
color: "$text",
|
||||
},
|
||||
},
|
||||
light: {
|
||||
true: {
|
||||
bg: "transparent",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$accents2",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
true: {
|
||||
bs: "$sm",
|
||||
},
|
||||
},
|
||||
animated: {
|
||||
false: {
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
auto: {
|
||||
true: {
|
||||
width: "auto",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
rounded: {
|
||||
true: {
|
||||
$$buttonBorderRadius: "$radii$pill",
|
||||
},
|
||||
},
|
||||
isPressed: {
|
||||
true: {},
|
||||
},
|
||||
isHovered: {
|
||||
true: {},
|
||||
},
|
||||
isChildLess: {
|
||||
true: {
|
||||
p: 0,
|
||||
width: "$$buttonHeight",
|
||||
height: "$$buttonHeight",
|
||||
},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
// isPressed && animated
|
||||
{
|
||||
isPressed: true,
|
||||
animated: true,
|
||||
css: {
|
||||
transform: "scale($$buttonPressedScale)",
|
||||
},
|
||||
},
|
||||
// size / auto / isChildLess
|
||||
{
|
||||
auto: true,
|
||||
isChildLess: false,
|
||||
size: "xs",
|
||||
css: {
|
||||
px: "$5",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
{
|
||||
auto: true,
|
||||
isChildLess: false,
|
||||
size: "sm",
|
||||
css: {
|
||||
px: "$8",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
{
|
||||
auto: true,
|
||||
isChildLess: false,
|
||||
size: "md",
|
||||
css: {
|
||||
px: "$9",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
{
|
||||
auto: true,
|
||||
isChildLess: false,
|
||||
size: "lg",
|
||||
css: {
|
||||
px: "$10",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
{
|
||||
auto: true,
|
||||
isChildLess: false,
|
||||
size: "xl",
|
||||
css: {
|
||||
px: "$11",
|
||||
minWidth: "min-content",
|
||||
},
|
||||
},
|
||||
// shadow / color
|
||||
{
|
||||
shadow: true,
|
||||
color: "default",
|
||||
css: {
|
||||
normalShadow: "$primaryShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
normalShadow: "$primaryShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
normalShadow: "$secondaryShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
normalShadow: "$warningShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "success",
|
||||
css: {
|
||||
normalShadow: "$successShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "error",
|
||||
css: {
|
||||
normalShadow: "$errorShadow",
|
||||
},
|
||||
},
|
||||
{
|
||||
shadow: true,
|
||||
color: "gradient",
|
||||
css: {
|
||||
normalShadow: "$primaryShadow",
|
||||
},
|
||||
},
|
||||
// light / color
|
||||
{
|
||||
light: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$text",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$primaryLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
light: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$primary",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$primaryLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
light: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$secondary",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$secondaryLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
light: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$warning",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$warningLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
light: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$success",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$successLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
light: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$error",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.8,
|
||||
fill: "$errorLightActive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// bordered / color
|
||||
{
|
||||
bordered: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$primary",
|
||||
color: "$primary",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$primary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$primary",
|
||||
color: "$primary",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$primary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$secondary",
|
||||
color: "$secondary",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$secondary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$success",
|
||||
color: "$success",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$success",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$warning",
|
||||
color: "$warning",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$warning",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
borderColor: "$error",
|
||||
color: "$error",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$error",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
bordered: true,
|
||||
color: "gradient",
|
||||
css: {
|
||||
bg: "transparent",
|
||||
color: "$text",
|
||||
padding: "$$buttonBorderWeight",
|
||||
bgClip: "content-box, border-box",
|
||||
borderColor: "$primary",
|
||||
backgroundImage: "linear-gradient($background, $background), $gradient",
|
||||
border: "none",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
fill: "$secondary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// ghost / color && isHovered
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "$primary",
|
||||
color: "$primarySolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "$primary",
|
||||
color: "$primarySolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "$secondary",
|
||||
color: "$secondarySolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "$success",
|
||||
color: "$successSolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "$warning",
|
||||
color: "$warningSolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
isHovered: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "$error",
|
||||
color: "$errorSolidContrast",
|
||||
},
|
||||
},
|
||||
{
|
||||
ghost: true,
|
||||
color: "gradient",
|
||||
isHovered: true,
|
||||
css: {
|
||||
bg: "$gradient",
|
||||
color: "$white",
|
||||
},
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
flat: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "$primaryLight",
|
||||
color: "$primaryLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$primary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "$primaryLight",
|
||||
color: "$primaryLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$primary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "$secondaryLight",
|
||||
color: "$secondaryLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$secondary",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "$successLight",
|
||||
color: "$successLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$success",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "$warningLight",
|
||||
color: "$warningLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$warning",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "$errorLight",
|
||||
color: "$errorLightContrast",
|
||||
".nextui-drip": {
|
||||
".nextui-drip-filler": {
|
||||
opacity: 0.4,
|
||||
fill: "$error",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// flat / isHovered / color
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "$primaryLightHover",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "$primaryLightHover",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "$secondaryLightHover",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "$successLightHover",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "$warningLightHover",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isHovered: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "$errorLightHover",
|
||||
},
|
||||
},
|
||||
// flat / isPressed / color
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "default",
|
||||
css: {
|
||||
bg: "$primaryLightActive",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "primary",
|
||||
css: {
|
||||
bg: "$primaryLightActive",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "secondary",
|
||||
css: {
|
||||
bg: "$secondaryLightActive",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "success",
|
||||
css: {
|
||||
bg: "$successLightActive",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "warning",
|
||||
css: {
|
||||
bg: "$warningLightActive",
|
||||
},
|
||||
},
|
||||
{
|
||||
flat: true,
|
||||
isPressed: true,
|
||||
color: "error",
|
||||
css: {
|
||||
bg: "$errorLightActive",
|
||||
},
|
||||
},
|
||||
// auto / gradient-color / bordered
|
||||
{
|
||||
auto: true,
|
||||
color: "gradient",
|
||||
bordered: true,
|
||||
css: {
|
||||
".nextui-button-text": {
|
||||
px: "$$buttonPadding",
|
||||
},
|
||||
".nextui-button-icon": {
|
||||
ml: "$$buttonPadding",
|
||||
},
|
||||
".nextui-button-icon-right": {
|
||||
mr: "$$buttonPadding",
|
||||
},
|
||||
".nextui-button-text-left": {
|
||||
pl: 0,
|
||||
},
|
||||
".nextui-button-text-right": {
|
||||
pr: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
// rounded && size
|
||||
{
|
||||
rounded: true,
|
||||
size: "xs",
|
||||
css: {
|
||||
br: "$pill",
|
||||
},
|
||||
},
|
||||
{
|
||||
rounded: true,
|
||||
size: "sm",
|
||||
css: {
|
||||
br: "$pill",
|
||||
},
|
||||
},
|
||||
{
|
||||
rounded: true,
|
||||
size: "md",
|
||||
css: {
|
||||
br: "$pill",
|
||||
},
|
||||
},
|
||||
{
|
||||
rounded: true,
|
||||
size: "lg",
|
||||
css: {
|
||||
br: "$pill",
|
||||
},
|
||||
},
|
||||
{
|
||||
rounded: true,
|
||||
size: "xl",
|
||||
css: {
|
||||
br: "$pill",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
cssFocusVisible,
|
||||
);
|
||||
@ -1,9 +1,7 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
// import {Drip} from "@nextui-org/drip";
|
||||
// import {Children, useMemo} from "react";
|
||||
import {Drip} from "@nextui-org/drip";
|
||||
|
||||
// import ButtonIcon from "./button-icon";
|
||||
import {UseButtonProps, useButton} from "./use-button";
|
||||
|
||||
export interface ButtonProps extends Omit<UseButtonProps, "ref"> {}
|
||||
@ -13,12 +11,11 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
|
||||
Component,
|
||||
domRef,
|
||||
children,
|
||||
slots,
|
||||
// styles,
|
||||
baseStyles,
|
||||
// hasIcon,
|
||||
// dripBindings,
|
||||
// isRightIcon,
|
||||
styles,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
disableRipple,
|
||||
dripBindings,
|
||||
getButtonProps,
|
||||
} = useButton({
|
||||
ref,
|
||||
@ -26,42 +23,19 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
|
||||
});
|
||||
|
||||
return (
|
||||
<Component ref={domRef} className={slots.base({class: baseStyles})} {...getButtonProps()}>
|
||||
{/* {Children.count(children) === 0 ? (
|
||||
<ButtonIcon
|
||||
isSingle
|
||||
css={getIconCss}
|
||||
isAuto={buttonProps.auto}
|
||||
isGradientButtonBorder={isGradientButtonBorder}
|
||||
isRight={isRightIcon}
|
||||
>
|
||||
{hasIcon}
|
||||
</ButtonIcon>
|
||||
) : hasIcon ? (
|
||||
<>
|
||||
<ButtonIcon
|
||||
css={getIconCss}
|
||||
isAuto={buttonProps.auto}
|
||||
isGradientButtonBorder={isGradientButtonBorder}
|
||||
isRight={isRightIcon}
|
||||
isSingle={false}
|
||||
>
|
||||
{hasIcon}
|
||||
</ButtonIcon>
|
||||
<div
|
||||
className={clsx("nextui-button-text", {
|
||||
"nextui-button-text-right": isRightIcon,
|
||||
"nextui-button-text-left": !isRightIcon,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<span className="nextui-button-text">{children}</span>
|
||||
)} */}
|
||||
<Component ref={domRef} className={styles} {...getButtonProps()}>
|
||||
{leftIcon}
|
||||
{children}
|
||||
{/* <Drip color="white" {...dripBindings} /> */}
|
||||
{rightIcon}
|
||||
{!disableRipple && (
|
||||
<Drip
|
||||
{...dripBindings}
|
||||
styles={{
|
||||
base: "opacity-30",
|
||||
svg: "text-inherit",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import type {ButtonVariantProps, ButtonSlots, SlotsToClasses} from "@nextui-org/theme";
|
||||
import type {ButtonVariantProps} from "@nextui-org/theme";
|
||||
import type {AriaButtonProps} from "@react-types/button";
|
||||
import type {PressEvent} from "@react-types/shared";
|
||||
import type {ReactRef} from "@nextui-org/shared-utils";
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
import type {ReactNode} from "react";
|
||||
|
||||
import {MouseEventHandler, ReactNode, useCallback} from "react";
|
||||
import {MouseEventHandler, useCallback} from "react";
|
||||
import {useButton as useAriaButton} from "@react-aria/button";
|
||||
import {useFocusRing} from "@react-aria/focus";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
@ -12,6 +13,7 @@ import {useDrip} from "@nextui-org/drip";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {warn, clsx} from "@nextui-org/shared-utils";
|
||||
import {button} from "@nextui-org/theme";
|
||||
import {isValidElement, cloneElement} from "react";
|
||||
|
||||
import {useButtonGroupContext} from "./button-group-context";
|
||||
|
||||
@ -31,24 +33,11 @@ export interface UseButtonProps
|
||||
/**
|
||||
* The button left content.
|
||||
*/
|
||||
iconLeft?: ReactNode;
|
||||
leftIcon?: ReactNode;
|
||||
/**
|
||||
* The button right content.
|
||||
*/
|
||||
iconRight?: ReactNode;
|
||||
/**
|
||||
* 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",
|
||||
* }} />
|
||||
* ```
|
||||
*/
|
||||
styles?: SlotsToClasses<ButtonSlots>;
|
||||
rightIcon?: ReactNode;
|
||||
/**
|
||||
* The native button click event handler.
|
||||
* @deprecated - use `onPress` instead.
|
||||
@ -63,11 +52,10 @@ export function useButton(props: UseButtonProps) {
|
||||
ref,
|
||||
as,
|
||||
children,
|
||||
iconLeft,
|
||||
iconRight,
|
||||
leftIcon: leftIconProp,
|
||||
rightIcon: rightIconProp,
|
||||
autoFocus,
|
||||
className,
|
||||
styles,
|
||||
fullWidth = groupContext?.fullWidth ?? false,
|
||||
size = groupContext?.size ?? "md",
|
||||
color = groupContext?.color ?? "neutral",
|
||||
@ -89,16 +77,11 @@ export function useButton(props: UseButtonProps) {
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const hasIcon = iconLeft || iconRight;
|
||||
const isRightIcon = Boolean(iconRight);
|
||||
|
||||
const {isFocusVisible, focusProps} = useFocusRing({
|
||||
autoFocus,
|
||||
});
|
||||
|
||||
const baseStyles = clsx(styles?.base, className);
|
||||
|
||||
const slots = button({
|
||||
const styles = button({
|
||||
size,
|
||||
color,
|
||||
variant,
|
||||
@ -107,6 +90,7 @@ export function useButton(props: UseButtonProps) {
|
||||
isDisabled,
|
||||
isFocusVisible,
|
||||
disableAnimation,
|
||||
className,
|
||||
});
|
||||
|
||||
const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, domRef);
|
||||
@ -147,18 +131,30 @@ export function useButton(props: UseButtonProps) {
|
||||
[buttonAriaProps, focusProps, otherProps],
|
||||
);
|
||||
|
||||
const getIconClone = (icon: ReactNode) =>
|
||||
isValidElement(icon)
|
||||
? cloneElement(icon, {
|
||||
"aria-hidden": true,
|
||||
focusable: false,
|
||||
tabIndex: -1,
|
||||
width: "70%",
|
||||
height: "70%",
|
||||
className: clsx("fill-current max-w-[24px]", icon.props.className),
|
||||
})
|
||||
: null;
|
||||
|
||||
const leftIcon = getIconClone(leftIconProp);
|
||||
const rightIcon = getIconClone(rightIconProp);
|
||||
|
||||
return {
|
||||
Component,
|
||||
children,
|
||||
domRef,
|
||||
slots,
|
||||
styles,
|
||||
baseStyles,
|
||||
hasIcon,
|
||||
iconLeft,
|
||||
iconRight,
|
||||
isRightIcon,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
dripBindings,
|
||||
disableRipple,
|
||||
getButtonProps,
|
||||
};
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ 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 {Notification, Camera} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Button, ButtonProps} from "../src";
|
||||
|
||||
@ -64,31 +65,18 @@ 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 IsDisabled = Template.bind({});
|
||||
IsDisabled.args = {
|
||||
...defaultProps,
|
||||
isDisabled: true,
|
||||
};
|
||||
|
||||
export const WithIcons = Template.bind({});
|
||||
WithIcons.args = {
|
||||
...defaultProps,
|
||||
leftIcon: <Notification />,
|
||||
rightIcon: <Camera />,
|
||||
};
|
||||
|
||||
// export const Loadings = () => (
|
||||
// <Grid.Container gap={2}>
|
||||
@ -119,217 +107,3 @@ Default.args = {
|
||||
// </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>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import {keyframes} from "@nextui-org/system";
|
||||
|
||||
export const expand = keyframes({
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.25)",
|
||||
},
|
||||
"30%": {
|
||||
opacity: 1,
|
||||
},
|
||||
"80%": {
|
||||
opacity: 0.5,
|
||||
},
|
||||
"100%": {
|
||||
transform: "scale(28)",
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
import {styled} from "@nextui-org/system";
|
||||
|
||||
import {expand} from "./drip.animations";
|
||||
|
||||
export const StyledDrip = styled("div", {
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
"& svg": {
|
||||
position: "absolute",
|
||||
animation: `350ms linear ${expand}`,
|
||||
animationFillMode: "forwards",
|
||||
width: "$md",
|
||||
height: "$md",
|
||||
},
|
||||
});
|
||||
@ -1,9 +1,10 @@
|
||||
import type {DripSlots, SlotsToClasses} from "@nextui-org/theme";
|
||||
|
||||
import {useEffect} from "react";
|
||||
import {NextUI, forwardRef, HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledDrip} from "./drip.styles";
|
||||
import {drip} from "@nextui-org/theme";
|
||||
|
||||
export interface DripProps extends HTMLNextUIProps<"div"> {
|
||||
isVisible?: boolean;
|
||||
@ -11,13 +12,29 @@ export interface DripProps extends HTMLNextUIProps<"div"> {
|
||||
y: number;
|
||||
color?: string;
|
||||
onCompleted: () => void;
|
||||
/**
|
||||
* 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
|
||||
* <Drip styles={{
|
||||
* base:"base-classes",
|
||||
* svg: "svg-classes",
|
||||
* }} />
|
||||
* ```
|
||||
*/
|
||||
styles?: SlotsToClasses<DripSlots>;
|
||||
}
|
||||
|
||||
const Drip = forwardRef<DripProps, "div">((props, ref) => {
|
||||
const {isVisible, x, y, color, onCompleted, className, ...otherProps} = props;
|
||||
const {isVisible, x, y, color, onCompleted, styles, className, ...otherProps} = props;
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const slots = drip();
|
||||
const baseStyles = clsx(styles?.base, className);
|
||||
|
||||
const top = Number.isNaN(+y) ? 0 : y - 10;
|
||||
const left = Number.isNaN(+x) ? 0 : x - 10;
|
||||
|
||||
@ -36,15 +53,21 @@ const Drip = forwardRef<DripProps, "div">((props, ref) => {
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<StyledDrip ref={domRef} className={clsx("nextui-drip", className)} {...otherProps}>
|
||||
<NextUI.Svg css={{top, left}} height="20" viewBox="0 0 20 20" width="20">
|
||||
<div ref={domRef} className={slots.base({class: baseStyles})} {...otherProps}>
|
||||
<svg
|
||||
className={slots.svg({class: styles?.svg})}
|
||||
height="20%"
|
||||
style={{top, left}}
|
||||
viewBox="0 0 20 20"
|
||||
width="20%"
|
||||
>
|
||||
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
||||
<g className="nextui-drip-filler" fill={color}>
|
||||
<g fill={color || "currentColor"}>
|
||||
<rect height="100%" rx="10" width="100%" />
|
||||
</g>
|
||||
</g>
|
||||
</NextUI.Svg>
|
||||
</StyledDrip>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -52,6 +75,4 @@ if (__DEV__) {
|
||||
Drip.displayName = "NextUI.Drip";
|
||||
}
|
||||
|
||||
Drip.toString = () => ".nextui-drip";
|
||||
|
||||
export default Drip;
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
import {Drip} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Drip",
|
||||
component: Drip,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Drip />;
|
||||
@ -5,133 +5,76 @@ import {ringClasses} from "../../utils";
|
||||
/**
|
||||
* Button wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, icon} = button({...})
|
||||
* const styles = 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 className={styles())}>
|
||||
* Button
|
||||
* </button>
|
||||
*/
|
||||
const button = tv({
|
||||
slots: {
|
||||
base: [
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"box-border",
|
||||
"apparance-none",
|
||||
"outline-none",
|
||||
"user-select-none",
|
||||
"font-medium",
|
||||
],
|
||||
icon: "",
|
||||
},
|
||||
base: [
|
||||
"relative",
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"box-border",
|
||||
"apparance-none",
|
||||
"outline-none",
|
||||
"select-none",
|
||||
"font-medium",
|
||||
"antialiased",
|
||||
"active:scale-95",
|
||||
"overflow-hidden",
|
||||
"gap-2",
|
||||
],
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {},
|
||||
bordered: {
|
||||
base: "border-2 !bg-transparent",
|
||||
},
|
||||
light: {
|
||||
base: "!bg-transparent",
|
||||
},
|
||||
flat: {},
|
||||
shadow: {},
|
||||
ghost: {
|
||||
base: "transition-background border-2 !bg-transparent",
|
||||
},
|
||||
solid: "",
|
||||
bordered: "border-2 !bg-transparent",
|
||||
light: "!bg-transparent",
|
||||
flat: "",
|
||||
shadow: "",
|
||||
ghost: "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",
|
||||
},
|
||||
xs: "px-2 h-6 text-xs",
|
||||
sm: "px-3 h-8 text-sm",
|
||||
md: "px-4 h-10 text-base",
|
||||
lg: "px-6 h-12 text-md",
|
||||
xl: "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",
|
||||
},
|
||||
neutral: "bg-neutral-300 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-100",
|
||||
primary: "bg-primary text-white",
|
||||
secondary: "bg-secondary text-white",
|
||||
success: "bg-success text-success-800",
|
||||
warning: "bg-warning text-warning-800",
|
||||
danger: "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",
|
||||
},
|
||||
none: "rounded-none",
|
||||
base: "rounded",
|
||||
sm: "rounded-sm",
|
||||
md: "rounded-md",
|
||||
lg: "rounded-lg",
|
||||
xl: "rounded-xl",
|
||||
"2xl": "rounded-2xl",
|
||||
"3xl": "rounded-3xl",
|
||||
full: "rounded-full",
|
||||
},
|
||||
fullWidth: {
|
||||
true: {
|
||||
base: "w-full",
|
||||
},
|
||||
true: "w-full",
|
||||
},
|
||||
isDisabled: {
|
||||
true: {
|
||||
base: "opacity-50 pointer-events-none",
|
||||
},
|
||||
true: "opacity-50 pointer-events-none",
|
||||
},
|
||||
isFocusVisible: {
|
||||
true: {
|
||||
base: [...ringClasses],
|
||||
},
|
||||
true: [...ringClasses],
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
base: "!transition-none",
|
||||
},
|
||||
false: "transition-transform",
|
||||
true: "!transition-none",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@ -148,221 +91,166 @@ const button = tv({
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "shadow-lg shadow-neutral/40",
|
||||
},
|
||||
class: "shadow-lg shadow-neutral/40",
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-primary/40",
|
||||
},
|
||||
class: "shadow-lg shadow-primary/40",
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-secondary/40",
|
||||
},
|
||||
class: "shadow-lg shadow-secondary/40",
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "shadow-lg shadow-success/40",
|
||||
},
|
||||
class: "shadow-lg shadow-success/40",
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "shadow-lg shadow-warning/40",
|
||||
},
|
||||
class: "shadow-lg shadow-warning/40",
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "shadow-lg shadow-danger/40",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "border-primary text-primary",
|
||||
},
|
||||
class: "border-primary text-primary",
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "border-secondary text-secondary",
|
||||
},
|
||||
class: "border-secondary text-secondary",
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "border-success text-success",
|
||||
},
|
||||
class: "border-success text-success",
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "border-warning text-warning",
|
||||
},
|
||||
class: "border-warning text-warning",
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "border-danger text-danger",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "text-neutral-700 dark:text-neutral-100",
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "text-primary",
|
||||
},
|
||||
class: "text-primary",
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "text-secondary",
|
||||
},
|
||||
class: "text-secondary",
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "text-success",
|
||||
},
|
||||
class: "text-success",
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "text-warning",
|
||||
},
|
||||
class: "text-warning",
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "text-danger",
|
||||
},
|
||||
class: "text-danger",
|
||||
},
|
||||
// ghost / color
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "border-neutral-300 dark:border-neutral-700 hover:!bg-neutral-300",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "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",
|
||||
},
|
||||
class: "border-danger text-danger hover:text-white hover:!bg-danger",
|
||||
},
|
||||
// !disabledAnimation / ghost
|
||||
{
|
||||
variant: "ghost",
|
||||
disableAnimation: false,
|
||||
class: "transition-[transform,background]",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type ButtonVariantProps = VariantProps<typeof button>;
|
||||
export type ButtonSlots = keyof ReturnType<typeof button>;
|
||||
|
||||
export {button};
|
||||
|
||||
27
packages/core/theme/src/components/drip/index.ts
Normal file
27
packages/core/theme/src/components/drip/index.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {absoluteFullClasses} from "../../utils";
|
||||
|
||||
/**
|
||||
* Drip wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, svg} = drip({...})
|
||||
*
|
||||
* @example
|
||||
* <div className={base())}>
|
||||
* <svg className={svg()}>
|
||||
* // drip svg content
|
||||
* </svg>
|
||||
* </div>
|
||||
*/
|
||||
const drip = tv({
|
||||
slots: {
|
||||
base: [...absoluteFullClasses, "overflow-hidden"],
|
||||
svg: "absolute animate-drip-expand",
|
||||
},
|
||||
});
|
||||
|
||||
export type DripVariantProps = VariantProps<typeof drip>;
|
||||
export type DripSlots = keyof ReturnType<typeof drip>;
|
||||
|
||||
export {drip};
|
||||
@ -3,3 +3,4 @@ export * from "./avatar";
|
||||
export * from "./avatar-group";
|
||||
export * from "./user";
|
||||
export * from "./button";
|
||||
export * from "./drip";
|
||||
|
||||
@ -151,6 +151,27 @@ module.exports = plugin(
|
||||
DEFAULT: colors.pink[500],
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"drip-expand": "drip-expand 350ms linear",
|
||||
},
|
||||
keyframes: {
|
||||
"drip-expand": {
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.25)",
|
||||
},
|
||||
"30%": {
|
||||
opacity: 1,
|
||||
},
|
||||
"80%": {
|
||||
opacity: 0.5,
|
||||
},
|
||||
"100%": {
|
||||
transform: "scale(28)",
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -30,3 +30,5 @@ export const translateCenterClasses = [
|
||||
"-translate-x-1/2",
|
||||
"-translate-y-1/2",
|
||||
];
|
||||
|
||||
export const absoluteFullClasses = ["absolute", "inset-0"];
|
||||
|
||||
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@ -535,12 +535,14 @@ importers:
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
'@nextui-org/theme': link:../../core/theme
|
||||
devDependencies:
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user