chore: sync changes (#8343)
This commit is contained in:
parent
d8930c5188
commit
7c6a6a3432
28 changed files with 69 additions and 49 deletions
|
|
@ -17,6 +17,13 @@ export enum EPillSize {
|
|||
XS = "xs",
|
||||
}
|
||||
|
||||
export enum ERadius {
|
||||
SQUARE = "square",
|
||||
CIRCLE = "circle",
|
||||
}
|
||||
|
||||
export type TRadius = ERadius.SQUARE | ERadius.CIRCLE;
|
||||
|
||||
export type TPillVariant =
|
||||
| EPillVariant.DEFAULT
|
||||
| EPillVariant.PRIMARY
|
||||
|
|
@ -31,10 +38,11 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|||
size?: TPillSize;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
radius?: TRadius;
|
||||
}
|
||||
|
||||
const pillVariants = {
|
||||
[EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle",
|
||||
[EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
|
||||
[EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
|
||||
[EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
|
||||
[EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
|
||||
|
|
@ -49,8 +57,20 @@ const pillSizes = {
|
|||
[EPillSize.LG]: "px-3 py-1.5 text-14",
|
||||
};
|
||||
|
||||
const pillRadius = {
|
||||
[ERadius.SQUARE]: "rounded",
|
||||
[ERadius.CIRCLE]: "rounded-full",
|
||||
};
|
||||
|
||||
const Pill = React.forwardRef(function Pill(
|
||||
{ variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }: PillProps,
|
||||
{
|
||||
variant = EPillVariant.DEFAULT,
|
||||
size = EPillSize.MD,
|
||||
radius = ERadius.CIRCLE,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: PillProps,
|
||||
ref: React.ForwardedRef<HTMLSpanElement>
|
||||
) {
|
||||
return (
|
||||
|
|
@ -63,6 +83,8 @@ const Pill = React.forwardRef(function Pill(
|
|||
pillVariants[variant],
|
||||
// Size styles
|
||||
pillSizes[size],
|
||||
// Radius styles
|
||||
pillRadius[radius],
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive>
|
|||
}
|
||||
|
||||
const Separator = React.forwardRef(function Separator(
|
||||
{ orientation = "horizontal", ...props }: SeparatorProps,
|
||||
{ orientation = "horizontal", className, ...props }: SeparatorProps,
|
||||
ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
|
||||
) {
|
||||
return (
|
||||
|
|
@ -21,7 +21,7 @@ const Separator = React.forwardRef(function Separator(
|
|||
data-slot="separator"
|
||||
data-orientation={orientation}
|
||||
{...props}
|
||||
className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px")}
|
||||
className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue