mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(badge): migration in progress
This commit is contained in:
Junior Garcia
parent
be6d1e3893
commit
c1697d6187
@ -38,6 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/dom-utils": "workspace:*"
|
||||
},
|
||||
|
||||
@ -1,70 +1,18 @@
|
||||
import {useMemo} from "react";
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, __DEV__} from "@nextui-org/shared-utils";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
|
||||
import {StyledBadgeRoot, StyledBadge, StyledBadgePoints} from "./badge.styles";
|
||||
import {UseBadgeProps, useBadge} from "./use-badge";
|
||||
|
||||
export interface BadgeProps extends UseBadgeProps {}
|
||||
export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {}
|
||||
|
||||
const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
|
||||
const {
|
||||
children,
|
||||
content,
|
||||
badgeCss,
|
||||
css,
|
||||
variant,
|
||||
asChild,
|
||||
isOneChar,
|
||||
isInvisible,
|
||||
disableAnimation,
|
||||
disableOutline,
|
||||
className,
|
||||
...otherProps
|
||||
} = useBadge(props);
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const badgeChildren = useMemo(() => {
|
||||
if (variant === "dot") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (variant === "points") {
|
||||
return (
|
||||
<StyledBadgePoints className="nextui-badge-points">
|
||||
<span className="nextui-badge-point" data-testid="badge-point" />
|
||||
<span className="nextui-badge-point" data-testid="badge-point" />
|
||||
<span className="nextui-badge-point" data-testid="badge-point" />
|
||||
</StyledBadgePoints>
|
||||
);
|
||||
}
|
||||
|
||||
return asChild ? content : children;
|
||||
}, [variant, isOneChar, asChild, content, children]);
|
||||
const {Component, children, content, slots, styles, getBadgeProps} = useBadge({ref, ...props});
|
||||
|
||||
return (
|
||||
<StyledBadgeRoot ref={domRef}>
|
||||
{asChild && children}
|
||||
<StyledBadge
|
||||
asChild={asChild}
|
||||
className={clsx(
|
||||
"nextui-badge",
|
||||
{
|
||||
"nextui-badge--is-invisible": isInvisible,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
css={{...badgeCss, ...css}}
|
||||
disableAnimation={disableAnimation || !asChild}
|
||||
disableOutline={variant === "bordered" || disableOutline}
|
||||
isOneChar={isOneChar}
|
||||
{...otherProps}
|
||||
>
|
||||
{badgeChildren}
|
||||
</StyledBadge>
|
||||
</StyledBadgeRoot>
|
||||
<div className={slots.base({class: styles?.base})}>
|
||||
{children}
|
||||
<Component {...getBadgeProps()}>{content}</Component>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1,158 +1,79 @@
|
||||
import type {HTMLNextUIProps} from "@nextui-org/system";
|
||||
import type {
|
||||
SimpleColors,
|
||||
SimplePlacement,
|
||||
NormalSizes,
|
||||
NormalWeights,
|
||||
} from "@nextui-org/shared-utils";
|
||||
import type {BadgeSlots, BadgeVariantProps, SlotsToClasses} from "@nextui-org/theme";
|
||||
|
||||
import {badge} from "@nextui-org/theme";
|
||||
import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, ReactRef} from "@nextui-org/shared-utils";
|
||||
import {useMemo} from "react";
|
||||
|
||||
export interface UseBadgeProps extends HTMLNextUIProps<"span"> {
|
||||
export interface UseBadgeProps extends HTMLNextUIProps<"span">, BadgeVariantProps {
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
*/
|
||||
ref?: ReactRef<HTMLDivElement | null>;
|
||||
/**
|
||||
* The children of the badge.
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* The content of the badge. The badge will be rendered relative to its children.
|
||||
*/
|
||||
content?: string | number | React.ReactNode;
|
||||
/**
|
||||
* The badge variation.
|
||||
* @default "default"
|
||||
* Classname or List of classes to change the styles of the element.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* <Badge styles={{
|
||||
* base:"base-classes", // wrapper
|
||||
* badge: "badge-classes",
|
||||
* }} />
|
||||
* ```
|
||||
*/
|
||||
variant?: "default" | "flat" | "dot" | "points" | "bordered";
|
||||
/**
|
||||
* The badge color.
|
||||
* @default "default"
|
||||
*/
|
||||
color?: SimpleColors;
|
||||
/**
|
||||
* The badge size.
|
||||
* @default "md"
|
||||
*/
|
||||
size?: NormalSizes;
|
||||
/**
|
||||
* The placement of the badge content.
|
||||
* @default "top-right"
|
||||
*/
|
||||
placement?: SimplePlacement;
|
||||
/**
|
||||
* The border weight for bordered badge variation.
|
||||
* @default "normal"
|
||||
*/
|
||||
borderWeight?: NormalWeights;
|
||||
/**
|
||||
* The vertical offset of the badge content.
|
||||
*/
|
||||
verticalOffset?: string | number;
|
||||
/**
|
||||
* The horizontal offset of the badge content.
|
||||
*/
|
||||
horizontalOffset?: string | number;
|
||||
/**
|
||||
* The wrapped shape the badge should overlap.
|
||||
* @default "rectangle"
|
||||
*/
|
||||
shape?: "circle" | "rectangle";
|
||||
/**
|
||||
* Whether the badge is invisible.
|
||||
* @default false
|
||||
*/
|
||||
isInvisible?: boolean;
|
||||
/**
|
||||
* Whether the badge corners should be squared.
|
||||
* @default false
|
||||
*/
|
||||
isSquared?: boolean;
|
||||
/**
|
||||
* Whether the badge shadow should be enabled.
|
||||
* @default false
|
||||
*/
|
||||
enableShadow?: boolean;
|
||||
/**
|
||||
* Whether the badge content animation should be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableAnimation?: boolean;
|
||||
/**
|
||||
* Whether the badge content animation should be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disableOutline?: boolean;
|
||||
styles?: SlotsToClasses<BadgeSlots>;
|
||||
}
|
||||
|
||||
export function useBadge(props: UseBadgeProps) {
|
||||
const {
|
||||
children,
|
||||
content,
|
||||
size = "md",
|
||||
color = "default",
|
||||
variant = "default",
|
||||
borderWeight = "normal",
|
||||
placement = "top-right",
|
||||
shape = "rectangle",
|
||||
enableShadow = false,
|
||||
verticalOffset,
|
||||
horizontalOffset,
|
||||
isSquared = false,
|
||||
isInvisible = false,
|
||||
disableOutline = false,
|
||||
disableAnimation = false,
|
||||
...otherProps
|
||||
} = props;
|
||||
export function useBadge(originalProps: UseBadgeProps) {
|
||||
const [props, variantProps] = mapPropsVariants(originalProps, badge.variantKeys);
|
||||
|
||||
const asChild = content !== undefined && !!children;
|
||||
const {as, ref, children, className, content, styles, ...otherProps} = props;
|
||||
|
||||
const isOneChar = useMemo(() => {
|
||||
if (asChild && content && variant !== "points" && variant !== "dot") {
|
||||
return String(content)?.length === 1;
|
||||
}
|
||||
if (children && typeof children === "string") {
|
||||
return children.length === 1;
|
||||
}
|
||||
const Component = as || "span";
|
||||
|
||||
return false;
|
||||
}, [asChild, children, variant, content]);
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const badgeCss = useMemo(() => {
|
||||
const isHOffsetNumber = typeof horizontalOffset === "number";
|
||||
const isVOffsetNumber = typeof verticalOffset === "number";
|
||||
const isOneChar = useMemo(() => String(content)?.length === 1, [content]);
|
||||
const isDot = useMemo(() => String(content)?.length === 0, [content]);
|
||||
|
||||
if (verticalOffset && horizontalOffset) {
|
||||
return {
|
||||
$$badgePlacementHOffset: isHOffsetNumber ? `${horizontalOffset}px` : horizontalOffset,
|
||||
$$badgePlacementVOffset: isVOffsetNumber ? `${verticalOffset}px` : verticalOffset,
|
||||
};
|
||||
}
|
||||
if (verticalOffset) {
|
||||
return {
|
||||
$$badgePlacementVOffset: isVOffsetNumber ? `${verticalOffset}px` : verticalOffset,
|
||||
};
|
||||
}
|
||||
if (horizontalOffset) {
|
||||
return {
|
||||
$$badgePlacementHOffset: isHOffsetNumber ? `${horizontalOffset}px` : horizontalOffset,
|
||||
};
|
||||
}
|
||||
const baseStyles = clsx(styles?.badge, className);
|
||||
|
||||
return {};
|
||||
}, [verticalOffset, horizontalOffset]);
|
||||
const slots = useMemo(
|
||||
() =>
|
||||
badge({
|
||||
...variantProps,
|
||||
isOneChar,
|
||||
isDot,
|
||||
}),
|
||||
[...Object.values(variantProps), isOneChar, isDot],
|
||||
);
|
||||
|
||||
const getBadgeProps = () => {
|
||||
return {
|
||||
ref: domRef,
|
||||
className: slots.badge({class: baseStyles}),
|
||||
"data-invisible": originalProps.isInvisible,
|
||||
...otherProps,
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
Component,
|
||||
children,
|
||||
content,
|
||||
variant,
|
||||
shape,
|
||||
size,
|
||||
color,
|
||||
borderWeight,
|
||||
asChild,
|
||||
isSquared,
|
||||
isOneChar,
|
||||
badgeCss,
|
||||
placement,
|
||||
isInvisible,
|
||||
enableShadow,
|
||||
disableAnimation,
|
||||
disableOutline,
|
||||
...otherProps,
|
||||
slots,
|
||||
styles,
|
||||
getBadgeProps,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
603
packages/components/badge/stories/badge.stories.text
Normal file
603
packages/components/badge/stories/badge.stories.text
Normal file
@ -0,0 +1,603 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
// Row, Spacer, Grid, Avatar, Switch, Text
|
||||
import {Col} from "@nextui-org/col";
|
||||
import {Row} from "@nextui-org/row";
|
||||
import {Spacer} from "@nextui-org/spacer";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
// import {Switch} from "@nextui-org/switch"; TODO: create
|
||||
// import {Text} from "@nextui-org/text";
|
||||
import {Notification} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Badge} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Display/Badge",
|
||||
component: Badge,
|
||||
} as Meta;
|
||||
|
||||
export const Default = () => <Badge>Default</Badge>;
|
||||
|
||||
export const WithAvatar = () => (
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5}>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" shape="circle">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const WithIcon = () => (
|
||||
<Badge color="error" content={5} horizontalOffset={2} shape="circle">
|
||||
<Notification fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
);
|
||||
|
||||
export const WithContentIcon = () => (
|
||||
<Badge
|
||||
color="error"
|
||||
content={<Notification fill="currentColor" size={12} />}
|
||||
css={{p: "$2"}}
|
||||
horizontalOffset={2}
|
||||
shape="circle"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
);
|
||||
|
||||
// TODO: create switch
|
||||
// export const ToggleBadge = () => {
|
||||
// const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
// return (
|
||||
// <Grid.Container alignItems="center" gap={2}>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
|
||||
// <Notification fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
|
||||
// <CartIcon fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Row align="center">
|
||||
// <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
|
||||
// <Text css={{ml: "$3"}}>Show badge</Text>
|
||||
// </Row>
|
||||
// </Grid>
|
||||
// </Grid.Container>
|
||||
// );
|
||||
// };
|
||||
|
||||
export const WithContentPlacements = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5} size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge
|
||||
isInvisible
|
||||
color="primary"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
size="md"
|
||||
variant="points"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="success"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
shape="circle"
|
||||
size="md"
|
||||
variant="dot"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="success"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<Grid.Container>
|
||||
<Grid.Container alignItems="center" gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge size="xs">New (xs)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="sm">New (sm)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="md">New (md)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="lg">New (lg)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="xl">New (xl)</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="xs" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="sm" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="md" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="lg" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="xl" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={2} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const Squared = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs">
|
||||
New (xs)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="sm">
|
||||
New (sm)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="md">
|
||||
New (md)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="lg">
|
||||
New (lg)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="xl">
|
||||
New (xl)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const Colors = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge>Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success">Success</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error">Error</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const EnableShadow = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow>
|
||||
Neutral
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="primary">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="success">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="warning">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="error">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const FlatVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="flat">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="flat">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="flat">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="flat">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="flat">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="flat">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const BorderedVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="bordered">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="bordered">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="bordered">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="bordered">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="bordered">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="bordered">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const DotVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge size="xl" variant="dot">
|
||||
<span>new</span>
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" size="xl" variant="dot" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const PointsVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="primary" size="sm" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="secondary" size="md" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="success" size="lg" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="warning" size="xl" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="error" size="xl" variant="points" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
@ -1,603 +1,108 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
|
||||
// Row, Spacer, Grid, Avatar, Switch, Text
|
||||
import {Col} from "@nextui-org/col";
|
||||
import {Row} from "@nextui-org/row";
|
||||
import {Spacer} from "@nextui-org/spacer";
|
||||
import {Grid} from "@nextui-org/grid";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {badge} from "@nextui-org/theme";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
// import {Switch} from "@nextui-org/switch"; TODO: create
|
||||
// import {Text} from "@nextui-org/text";
|
||||
import {Notification} from "@nextui-org/shared-icons";
|
||||
import {CheckIcon} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Badge} from "../src";
|
||||
import {Badge, BadgeProps} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Display/Badge",
|
||||
component: Badge,
|
||||
} as Meta;
|
||||
argTypes: {
|
||||
content: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "flat", "faded", "shadow"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["xs", "sm", "md", "lg", "xl"],
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["rectangle", "circle"],
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["top-right", "top-left", "bottom-right", "bottom-left"],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Badge>;
|
||||
|
||||
export const Default = () => <Badge>Default</Badge>;
|
||||
const defaultProps = {
|
||||
...badge.defaultVariants,
|
||||
content: 5,
|
||||
};
|
||||
|
||||
export const WithAvatar = () => (
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5}>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" shape="circle">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
);
|
||||
|
||||
export const WithIcon = () => (
|
||||
<Badge color="error" content={5} horizontalOffset={2} shape="circle">
|
||||
<Notification fill="currentColor" size={30} />
|
||||
</Badge>
|
||||
);
|
||||
|
||||
export const WithContentIcon = () => (
|
||||
<Badge
|
||||
color="error"
|
||||
content={<Notification fill="currentColor" size={12} />}
|
||||
css={{p: "$2"}}
|
||||
horizontalOffset={2}
|
||||
shape="circle"
|
||||
>
|
||||
const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
|
||||
<Badge {...args}>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
isBordered={args.styles?.badge?.includes("bottom")}
|
||||
radius={args.shape === "rectangle" ? "lg" : "full"}
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
||||
/>
|
||||
</Badge>
|
||||
);
|
||||
|
||||
// TODO: create switch
|
||||
// export const ToggleBadge = () => {
|
||||
// const [isInvisible, setIsInvisible] = React.useState(false);
|
||||
|
||||
// return (
|
||||
// <Grid.Container alignItems="center" gap={2}>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
|
||||
// <Notification fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
|
||||
// <CartIcon fill="currentColor" size={30} />
|
||||
// </Badge>
|
||||
// </Grid>
|
||||
// <Grid>
|
||||
// <Row align="center">
|
||||
// <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
|
||||
// <Text css={{ml: "$3"}}>Show badge</Text>
|
||||
// </Row>
|
||||
// </Grid>
|
||||
// </Grid.Container>
|
||||
// );
|
||||
// };
|
||||
|
||||
export const WithContentPlacements = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content={5} size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-right" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge
|
||||
isInvisible
|
||||
color="primary"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
size="md"
|
||||
variant="points"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="primary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge
|
||||
color="success"
|
||||
content={5}
|
||||
placement="bottom-right"
|
||||
shape="circle"
|
||||
size="md"
|
||||
variant="dot"
|
||||
>
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
color="success"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="top-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content={5} placement="bottom-left" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</>
|
||||
);
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<Grid.Container>
|
||||
<Grid.Container alignItems="center" gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge size="xs">New (xs)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="sm">New (sm)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="md">New (md)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="lg">New (lg)</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge size="xl">New (xl)</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={1} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="xs" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="sm" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="md" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="lg" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="xl" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
<Spacer y={1} />
|
||||
<Grid.Container gap={2} justify="center">
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xs">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="sm">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="md">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="lg">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Badge color="error" content="999+" size="xl">
|
||||
<Avatar
|
||||
bordered
|
||||
pointer
|
||||
squared
|
||||
color="secondary"
|
||||
size="lg"
|
||||
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
|
||||
/>
|
||||
</Badge>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Grid.Container>
|
||||
);
|
||||
export const Dot = Template.bind({});
|
||||
Dot.args = {
|
||||
...defaultProps,
|
||||
content: "",
|
||||
color: "success",
|
||||
size: "sm",
|
||||
};
|
||||
|
||||
export const Squared = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs">
|
||||
New (xs)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="sm">
|
||||
New (sm)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="md">
|
||||
New (md)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="lg">
|
||||
New (lg)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared size="xl">
|
||||
New (xl)
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
</Col>
|
||||
);
|
||||
export const HorizontalOffset = Template.bind({});
|
||||
HorizontalOffset.args = {
|
||||
...defaultProps,
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
content: <CheckIcon />,
|
||||
placement: "bottom-right",
|
||||
size: "md",
|
||||
styles: {
|
||||
badge: "p-0.5 right-[50%]",
|
||||
},
|
||||
};
|
||||
|
||||
export const Colors = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge>Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success">Success</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error">Error</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const EnableShadow = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow>
|
||||
Neutral
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="primary">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="secondary">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="success">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="warning">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge disableOutline enableShadow color="error">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const FlatVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="flat">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="flat">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="flat">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="flat">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="flat">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="flat">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const BorderedVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge variant="bordered">Neutral</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" variant="bordered">
|
||||
Primary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" variant="bordered">
|
||||
Secondary
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" variant="bordered">
|
||||
Success
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" variant="bordered">
|
||||
Warning
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" variant="bordered">
|
||||
Error
|
||||
</Badge>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const DotVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge size="xl" variant="dot">
|
||||
<span>new</span>
|
||||
</Badge>
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="primary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="secondary" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="success" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="warning" size="xl" variant="dot" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge color="error" size="xl" variant="dot" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
|
||||
export const PointsVariant = () => (
|
||||
<Col css={{pl: "$6"}}>
|
||||
<Row>
|
||||
<Badge isSquared size="xs" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="primary" size="sm" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="secondary" size="md" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="success" size="lg" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="warning" size="xl" variant="points" />
|
||||
</Row>
|
||||
<Spacer y={0.5} />
|
||||
<Row>
|
||||
<Badge isSquared color="error" size="xl" variant="points" />
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
export const VerticalOffset = Template.bind({});
|
||||
VerticalOffset.args = {
|
||||
...defaultProps,
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
content: <CheckIcon />,
|
||||
placement: "bottom-right",
|
||||
size: "md",
|
||||
styles: {
|
||||
badge: "p-0.5 right-[50%] bottom-[50%]",
|
||||
},
|
||||
};
|
||||
|
||||
@ -24,7 +24,7 @@ export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
|
||||
*/
|
||||
rightContent?: React.ReactNode;
|
||||
/**
|
||||
* Classname or List of classes to change the styles of the avatar.
|
||||
* Classname or List of classes to change the styles of the element.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
*
|
||||
* @example
|
||||
@ -66,7 +66,7 @@ export function useChip(originalProps: UseChipProps) {
|
||||
...variantProps,
|
||||
isCloseButtonFocusVisible,
|
||||
}),
|
||||
[...Object.values(variantProps), isCloseButtonFocusVisible, className],
|
||||
[...Object.values(variantProps), isCloseButtonFocusVisible],
|
||||
);
|
||||
|
||||
const {pressProps: closePressProps} = usePress({
|
||||
|
||||
@ -2,7 +2,7 @@ import type {TooltipVariantProps} from "@nextui-org/theme";
|
||||
import type {AriaTooltipProps} from "@react-types/tooltip";
|
||||
import type {OverlayTriggerProps} from "@react-types/overlays";
|
||||
import type {CSSTransitionProps} from "@nextui-org/react-utils";
|
||||
import type {ReactNode} from "react";
|
||||
import type {ReactNode, Ref} from "react";
|
||||
|
||||
import {useTooltipTriggerState} from "@react-stately/tooltip";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
@ -179,7 +179,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
|
||||
);
|
||||
|
||||
const getTriggerProps = useCallback(
|
||||
(props = {}, _ref = null) => ({
|
||||
(props = {}, _ref: Ref<any> | null | undefined = null) => ({
|
||||
...mergeProps(triggerProps, props),
|
||||
ref: mergeRefs(triggerRef, _ref),
|
||||
onPointerEnter: () => state.open(),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {translateCenterClasses, ringClasses, colorVariants} from "../../utils";
|
||||
import {translateCenterClasses, ringClasses, colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Avatar wrapper **Tailwind Variants** component
|
||||
408
packages/core/theme/src/components/badge.ts
Normal file
408
packages/core/theme/src/components/badge.ts
Normal file
@ -0,0 +1,408 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Badge wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const {base, badge} = badge({...})
|
||||
*
|
||||
* @example
|
||||
* <div className={base())}>
|
||||
* // children
|
||||
* <span className={badge()}>5+</span>
|
||||
* </div>
|
||||
*/
|
||||
const badge = tv({
|
||||
slots: {
|
||||
base: ["relative", "inline-flex", "shrink-0", "overflow-visible", "align-middle"],
|
||||
badge: [
|
||||
"flex",
|
||||
"z-10",
|
||||
"flex-wrap",
|
||||
"absolute",
|
||||
"box-border",
|
||||
"whitespace-nowrap",
|
||||
"place-content-center",
|
||||
"origin-center",
|
||||
"items-center",
|
||||
"text-inherit",
|
||||
"select-none",
|
||||
"font-medium",
|
||||
"scale-100",
|
||||
"opacity-100",
|
||||
"data-[invisible=true]:scale-0",
|
||||
"data-[invisible=true]:opacity-0",
|
||||
],
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {},
|
||||
flat: {},
|
||||
faded: {
|
||||
badge: "border-2",
|
||||
},
|
||||
shadow: {},
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
badge: colorVariants.solid.neutral,
|
||||
},
|
||||
primary: {
|
||||
badge: colorVariants.solid.primary,
|
||||
},
|
||||
secondary: {
|
||||
badge: colorVariants.solid.secondary,
|
||||
},
|
||||
success: {
|
||||
badge: colorVariants.solid.success,
|
||||
},
|
||||
warning: {
|
||||
badge: colorVariants.solid.warning,
|
||||
},
|
||||
danger: {
|
||||
badge: colorVariants.solid.danger,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
xs: {
|
||||
badge: "px-0.5 text-[0.625rem]",
|
||||
},
|
||||
sm: {
|
||||
badge: "px-1 text-xs",
|
||||
},
|
||||
md: {
|
||||
badge: "px-1 text-sm",
|
||||
},
|
||||
lg: {
|
||||
badge: "px-1 text-sm",
|
||||
},
|
||||
xl: {
|
||||
badge: "px-1 text-md",
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
"top-right": {},
|
||||
"top-left": {},
|
||||
"bottom-right": {},
|
||||
"bottom-left": {},
|
||||
},
|
||||
radius: {
|
||||
none: {badge: "rounded-none"},
|
||||
base: {badge: "rounded"},
|
||||
sm: {badge: "rounded-sm"},
|
||||
md: {badge: "rounded-md"},
|
||||
lg: {badge: "rounded-lg"},
|
||||
xl: {badge: "rounded-xl"},
|
||||
full: {badge: "rounded-full"},
|
||||
},
|
||||
shape: {
|
||||
circle: {},
|
||||
rectangle: {},
|
||||
},
|
||||
isInvisible: {
|
||||
true: {},
|
||||
},
|
||||
isOneChar: {
|
||||
true: {
|
||||
badge: "px-0",
|
||||
},
|
||||
},
|
||||
isDot: {
|
||||
true: {},
|
||||
},
|
||||
disableAnimation: {
|
||||
true: {
|
||||
badge: "transition-none",
|
||||
},
|
||||
false: {
|
||||
badge: "transition-all",
|
||||
},
|
||||
},
|
||||
disableOutline: {
|
||||
true: {
|
||||
badge: "border-transparent border-0",
|
||||
},
|
||||
false: {
|
||||
badge: "border-1.5 border-background",
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "solid",
|
||||
color: "neutral",
|
||||
size: "md",
|
||||
radius: "full",
|
||||
shape: "rectangle",
|
||||
placement: "top-right",
|
||||
disableOutline: false,
|
||||
disableAnimation: false,
|
||||
isInvisible: false,
|
||||
},
|
||||
compoundVariants: [
|
||||
// shadow / color
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: {
|
||||
badge: colorVariants.shadow.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: {
|
||||
badge: colorVariants.shadow.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: {
|
||||
badge: colorVariants.shadow.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: {
|
||||
badge: colorVariants.shadow.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: {
|
||||
badge: colorVariants.shadow.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: {
|
||||
badge: colorVariants.shadow.danger,
|
||||
},
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: {
|
||||
badge: colorVariants.flat.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: {
|
||||
badge: colorVariants.flat.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: {
|
||||
badge: colorVariants.flat.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: {
|
||||
badge: colorVariants.flat.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: {
|
||||
badge: colorVariants.flat.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: {
|
||||
badge: colorVariants.flat.danger,
|
||||
},
|
||||
},
|
||||
// faded / color
|
||||
{
|
||||
variant: "faded",
|
||||
color: "neutral",
|
||||
class: {
|
||||
badge: colorVariants.faded.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "primary",
|
||||
class: {
|
||||
badge: colorVariants.faded.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "secondary",
|
||||
class: {
|
||||
badge: colorVariants.faded.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "success",
|
||||
class: {
|
||||
badge: colorVariants.faded.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "warning",
|
||||
class: {
|
||||
badge: colorVariants.faded.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "danger",
|
||||
class: {
|
||||
badge: colorVariants.faded.danger,
|
||||
},
|
||||
},
|
||||
// isOneChar / size
|
||||
{
|
||||
isOneChar: true,
|
||||
size: "xs",
|
||||
class: {
|
||||
badge: "w-3.5 h-3.5",
|
||||
},
|
||||
},
|
||||
{
|
||||
isOneChar: true,
|
||||
size: "sm",
|
||||
class: {
|
||||
badge: "w-4 h-4",
|
||||
},
|
||||
},
|
||||
{
|
||||
isOneChar: true,
|
||||
size: "md",
|
||||
class: {
|
||||
badge: "w-5 h-5",
|
||||
},
|
||||
},
|
||||
{
|
||||
isOneChar: true,
|
||||
size: "lg",
|
||||
class: {
|
||||
badge: "w-6 h-6",
|
||||
},
|
||||
},
|
||||
{
|
||||
isOneChar: true,
|
||||
size: "xl",
|
||||
class: {
|
||||
badge: "w-7 h-7",
|
||||
},
|
||||
},
|
||||
// isDot / size
|
||||
{
|
||||
isDot: true,
|
||||
size: "xs",
|
||||
class: {
|
||||
badge: "w-2 h-2",
|
||||
},
|
||||
},
|
||||
{
|
||||
isDot: true,
|
||||
size: "sm",
|
||||
class: {
|
||||
badge: "w-3 h-3",
|
||||
},
|
||||
},
|
||||
{
|
||||
isDot: true,
|
||||
size: "md",
|
||||
class: {
|
||||
badge: "w-3.5 h-3.5",
|
||||
},
|
||||
},
|
||||
{
|
||||
isDot: true,
|
||||
size: "lg",
|
||||
class: {
|
||||
badge: "w-4 h-4",
|
||||
},
|
||||
},
|
||||
{
|
||||
isDot: true,
|
||||
size: "xl",
|
||||
class: {
|
||||
badge: "w-5 h-5",
|
||||
},
|
||||
},
|
||||
// placement / rectangle
|
||||
{
|
||||
placement: "top-right",
|
||||
shape: "rectangle",
|
||||
class: {
|
||||
badge: "top-[5%] right-[5%] translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "top-left",
|
||||
shape: "rectangle",
|
||||
class: {
|
||||
badge: "top-[5%] left-[5%] -translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-right",
|
||||
shape: "rectangle",
|
||||
class: {
|
||||
badge: "bottom-[5%] right-[5%] translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-left",
|
||||
shape: "rectangle",
|
||||
class: {
|
||||
badge: "bottom-[5%] left-[5%] -translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
// placement / circle
|
||||
{
|
||||
placement: "top-right",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "top-[15%] right-[15%] translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "top-left",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "top-[15%] left-[15%] -translate-x-1/2 -translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-right",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "bottom-[15%] right-[15%] translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
{
|
||||
placement: "bottom-left",
|
||||
shape: "circle",
|
||||
class: {
|
||||
badge: "bottom-[15%] left-[15%] -translate-x-1/2 translate-y-1/2",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type BadgeVariantProps = VariantProps<typeof badge>;
|
||||
export type BadgeSlots = keyof ReturnType<typeof badge>;
|
||||
|
||||
export {badge};
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
import {ringClasses, colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Button wrapper **Tailwind Variants** component
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
import {ringClasses, colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Chip wrapper **Tailwind Variants** component
|
||||
@ -45,22 +45,22 @@ const chip = tv({
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
base: [colorVariants.solid.neutral],
|
||||
base: colorVariants.solid.neutral,
|
||||
},
|
||||
primary: {
|
||||
base: [colorVariants.solid.primary, "data-[status=checked]:bg-primary-600"],
|
||||
base: colorVariants.solid.primary,
|
||||
},
|
||||
secondary: {
|
||||
base: [colorVariants.solid.secondary, "data-[status=checked]:bg-secondary-600"],
|
||||
base: colorVariants.solid.secondary,
|
||||
},
|
||||
success: {
|
||||
base: [colorVariants.solid.success, "data-[status=checked]:bg-success-600"],
|
||||
base: colorVariants.solid.success,
|
||||
},
|
||||
warning: {
|
||||
base: [colorVariants.solid.warning, "data-[status=checked]:bg-warning-600"],
|
||||
base: colorVariants.solid.warning,
|
||||
},
|
||||
danger: {
|
||||
base: [colorVariants.solid.danger, "data-[status=checked]:bg-danger-600"],
|
||||
base: colorVariants.solid.danger,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {colorVariants} from "../../utils";
|
||||
import {colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Code wrapper **Tailwind Variants** component
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {absoluteFullClasses} from "../../utils";
|
||||
import {absoluteFullClasses} from "../utils";
|
||||
|
||||
/**
|
||||
* Drip wrapper **Tailwind Variants** component
|
||||
@ -10,3 +10,4 @@ export * from "./code";
|
||||
export * from "./tooltip";
|
||||
export * from "./snippet";
|
||||
export * from "./chip";
|
||||
export * from "./badge";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {focusVisibleClasses} from "../../utils";
|
||||
import {focusVisibleClasses} from "../utils";
|
||||
|
||||
/**
|
||||
* Link wrapper **Tailwind Variants** component
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
import {ringClasses, colorVariants} from "../utils";
|
||||
|
||||
/**
|
||||
* Snippet wrapper **Tailwind Variants** component
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {colorVariants} from "../../utils";
|
||||
import {colorVariants} from "../utils";
|
||||
/**
|
||||
* Tooltip wrapper **Tailwind Variants** component
|
||||
*
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses} from "../../utils";
|
||||
import {ringClasses} from "../utils";
|
||||
|
||||
/**
|
||||
* User wrapper **Tailwind Variants** component
|
||||
@ -158,7 +158,11 @@ const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
...commonColors,
|
||||
...resolved.colors,
|
||||
},
|
||||
fontSize: {
|
||||
tiny: "0.625rem",
|
||||
},
|
||||
borderWidth: {
|
||||
1: "1px",
|
||||
1.5: "1.5px",
|
||||
3: "3px",
|
||||
5: "5px",
|
||||
|
||||
@ -31,7 +31,7 @@ const bordered = {
|
||||
const flat = {
|
||||
neutral: "bg-neutral-100 text-neutral-contrastText",
|
||||
primary: "bg-primary-50 text-primary",
|
||||
secondary: "bg-secondary-50 text-secondary",
|
||||
secondary: "bg-secondary-100 text-secondary",
|
||||
success: "bg-success-50 text-success",
|
||||
warning: "bg-warning-50 text-warning",
|
||||
danger: "bg-danger-50 text-danger",
|
||||
|
||||
@ -10,6 +10,7 @@ module.exports = {
|
||||
"../../components/tooltip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/snippet/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/chip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/badge/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
],
|
||||
staticDirs: ["../public"],
|
||||
addons: [
|
||||
|
||||
@ -624,14 +624,54 @@ video {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.bottom-\[15\%\] {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
.bottom-\[5\%\] {
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.bottom-\[50\%\] {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.left-\[15\%\] {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.left-\[5\%\] {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.right-\[15\%\] {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.right-\[5\%\] {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.right-\[50\%\] {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.top-1\/2 {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.top-\[15\%\] {
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.top-\[5\%\] {
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.isolate {
|
||||
isolation: isolate;
|
||||
}
|
||||
@ -817,10 +857,22 @@ video {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-3\.5 {
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
@ -877,10 +929,22 @@ video {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.w-2 {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-3\.5 {
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
@ -929,6 +993,10 @@ video {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -953,6 +1021,10 @@ video {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.origin-center {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -968,6 +1040,16 @@ video {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-1\/2 {
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-1\/2 {
|
||||
--tw-translate-y: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-y-10 {
|
||||
--tw-translate-y: 2.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -988,6 +1070,12 @@ video {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.scale-100 {
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
@ -1917,6 +2005,18 @@ video {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-1\.5 {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
@ -1979,6 +2079,11 @@ video {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.border-background {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--nextui-background) / var(--nextui-background-opacity, var(--tw-border-opacity)));
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--nextui-danger) / var(--nextui-danger-opacity, var(--tw-border-opacity)));
|
||||
@ -2009,6 +2114,10 @@ video {
|
||||
border-color: hsl(var(--nextui-success) / var(--nextui-success-opacity, var(--tw-border-opacity)));
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--nextui-warning) / var(--nextui-warning-opacity, var(--tw-border-opacity)));
|
||||
@ -2133,9 +2242,9 @@ video {
|
||||
background-color: hsl(var(--nextui-secondary) / var(--nextui-secondary-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.bg-secondary-50 {
|
||||
.bg-secondary-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-secondary-50) / var(--nextui-secondary-50-opacity, var(--tw-bg-opacity)));
|
||||
background-color: hsl(var(--nextui-secondary-100) / var(--nextui-secondary-100-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
@ -2288,6 +2397,10 @@ video {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-0\.5 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -2687,6 +2800,10 @@ video {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.opacity-30 {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@ -3695,6 +3812,12 @@ video {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.data-\[invisible\=true\]\:scale-0[data-invisible=true] {
|
||||
--tw-scale-x: 0;
|
||||
--tw-scale-y: 0;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
@keyframes appearance-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
@ -3711,29 +3834,8 @@ video {
|
||||
animation: appearance-out 60ms ease-in normal both;
|
||||
}
|
||||
|
||||
.data-\[status\=checked\]\:bg-danger-600[data-status=checked] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-danger-600) / var(--nextui-danger-600-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.data-\[status\=checked\]\:bg-primary-600[data-status=checked] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-primary-600) / var(--nextui-primary-600-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.data-\[status\=checked\]\:bg-secondary-600[data-status=checked] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-secondary-600) / var(--nextui-secondary-600-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.data-\[status\=checked\]\:bg-success-600[data-status=checked] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-success-600) / var(--nextui-success-600-opacity, var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.data-\[status\=checked\]\:bg-warning-600[data-status=checked] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--nextui-warning-600) / var(--nextui-warning-600-opacity, var(--tw-bg-opacity)));
|
||||
.data-\[invisible\=true\]\:opacity-0[data-invisible=true] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.data-\[loaded\=true\]\:opacity-100[data-loaded=true] {
|
||||
|
||||
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@ -368,12 +368,14 @@ importers:
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
clean-package: 2.2.0
|
||||
react: ^18.2.0
|
||||
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:
|
||||
'@nextui-org/avatar': link:../avatar
|
||||
'@nextui-org/shared-icons': link:../../utilities/shared-icons
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user