Updates
This commit is contained in:
@@ -8,6 +8,7 @@ import {
|
||||
} from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import Loading from "../elements/Loading";
|
||||
import LucideIcon, { TWUILucideIconName } from "../elements/lucide-icon";
|
||||
|
||||
export type TWUIButtonProps = DetailedHTMLProps<
|
||||
ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
@@ -34,8 +35,8 @@ export type TWUIButtonProps = DetailedHTMLProps<
|
||||
AnchorHTMLAttributes<HTMLAnchorElement>,
|
||||
HTMLAnchorElement
|
||||
>;
|
||||
beforeIcon?: React.ReactNode;
|
||||
afterIcon?: React.ReactNode;
|
||||
beforeIcon?: TWUILucideIconName | JSX.Element;
|
||||
afterIcon?: TWUILucideIconName | JSX.Element;
|
||||
buttonContentProps?: DetailedHTMLProps<
|
||||
HTMLAttributes<HTMLDivElement>,
|
||||
HTMLDivElement
|
||||
@@ -117,132 +118,132 @@ export default function Button({
|
||||
return twMerge(
|
||||
"bg-primary hover:bg-primary-hover text-white",
|
||||
"dark:bg-primary-dark hover:dark:bg-primary-dark-hover text-white",
|
||||
"twui-button-primary"
|
||||
"twui-button-primary",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-secondary hover:bg-secondary-hover text-white",
|
||||
"twui-button-secondary"
|
||||
"twui-button-secondary",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"!bg-white hover:!bg-slate-200 !text-slate-800",
|
||||
"twui-button-white"
|
||||
"twui-button-white",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-accent hover:bg-accent-hover text-white",
|
||||
"twui-button-accent"
|
||||
"twui-button-accent",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-gray hover:bg-gray-hover text-foreground-light",
|
||||
"dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
|
||||
"twui-button-gray"
|
||||
"twui-button-gray",
|
||||
);
|
||||
if (color == "success")
|
||||
return twMerge(
|
||||
"bg-success hover:bg-success-hover text-white",
|
||||
"dark:bg-success hover:dark:bg-success-hover text-white",
|
||||
"twui-button-success"
|
||||
"twui-button-success",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-error hover:bg-error-hover text-white",
|
||||
"dark:bg-error hover:dark:bg-error-hover text-white",
|
||||
"twui-button-error"
|
||||
"twui-button-error",
|
||||
);
|
||||
} else if (variant == "outlined") {
|
||||
if (color == "primary" || !color)
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-primary",
|
||||
"text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
|
||||
"twui-button-primary-outlined"
|
||||
"twui-button-primary-outlined",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-secondary",
|
||||
"text-secondary",
|
||||
"twui-button-secondary-outlined"
|
||||
"twui-button-secondary-outlined",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-accent",
|
||||
"text-accent",
|
||||
"twui-button-accent-outlined"
|
||||
"twui-button-accent-outlined",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-slate-300",
|
||||
"text-slate-600 dark:text-white/60 dark:outline-white/30",
|
||||
"twui-button-gray-outlined"
|
||||
"twui-button-gray-outlined",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-white/50",
|
||||
"text-white",
|
||||
"twui-button-white-outlined"
|
||||
"twui-button-white-outlined",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-error text-error",
|
||||
"dark:outline-error dark:text-error-dark",
|
||||
"twui-button-error-outlined"
|
||||
"twui-button-error-outlined",
|
||||
);
|
||||
} else if (variant == "ghost") {
|
||||
if (color == "primary" || !color)
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-primary-ghost"
|
||||
"twui-button-primary-ghost",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-secondary hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost"
|
||||
"twui-button-secondary-ghost",
|
||||
);
|
||||
if (color == "text")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
|
||||
"text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost"
|
||||
"twui-button-secondary-ghost",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-accent hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-accent-ghost"
|
||||
"twui-button-accent-ghost",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
|
||||
"text-slate-600 dark:text-white/70 hover:opacity-80",
|
||||
"twui-button-gray-ghost"
|
||||
"twui-button-gray-ghost",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-red-600 dark:text-red-400",
|
||||
"twui-button-error-ghost"
|
||||
"twui-button-error-ghost",
|
||||
);
|
||||
if (color == "warning")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-yellow-600",
|
||||
"twui-button-warning-ghost"
|
||||
"twui-button-warning-ghost",
|
||||
);
|
||||
if (color == "success")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-success",
|
||||
"twui-button-success-ghost"
|
||||
"twui-button-success-ghost",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-white",
|
||||
"twui-button-white-ghost"
|
||||
"twui-button-white-ghost",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -260,15 +261,15 @@ export default function Button({
|
||||
size == "small"
|
||||
? "px-3 py-1.5 twui-button-small text-sm"
|
||||
: size == "smaller"
|
||||
? "px-2 py-1 text-xs twui-button-smaller"
|
||||
: size == "large"
|
||||
? "text-lg twui-button-large"
|
||||
: size == "larger"
|
||||
? "px-5 py-3 text-xl twui-button-larger"
|
||||
: "twui-button-base",
|
||||
? "px-2 py-1 text-xs twui-button-smaller"
|
||||
: size == "large"
|
||||
? "text-lg twui-button-large"
|
||||
: size == "larger"
|
||||
? "px-5 py-3 text-xl twui-button-larger"
|
||||
: "twui-button-base",
|
||||
finalClassName,
|
||||
loading ? "pointer-events-none opacity-80" : "",
|
||||
props.className
|
||||
props.className,
|
||||
)}
|
||||
aria-label={props.title}
|
||||
>
|
||||
@@ -278,12 +279,24 @@ export default function Button({
|
||||
"flex flex-row items-center gap-2 whitespace-nowrap",
|
||||
loading ? "opacity-0" : "",
|
||||
"twui-button-content-wrapper",
|
||||
buttonContentProps?.className
|
||||
buttonContentProps?.className,
|
||||
)}
|
||||
>
|
||||
{beforeIcon && beforeIcon}
|
||||
{beforeIcon ? (
|
||||
typeof beforeIcon == "string" ? (
|
||||
<LucideIcon name={beforeIcon as TWUILucideIconName} />
|
||||
) : (
|
||||
beforeIcon
|
||||
)
|
||||
) : null}
|
||||
{props.children}
|
||||
{afterIcon && afterIcon}
|
||||
{afterIcon ? (
|
||||
typeof afterIcon == "string" ? (
|
||||
<LucideIcon name={afterIcon as TWUILucideIconName} />
|
||||
) : (
|
||||
afterIcon
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
|
||||
@@ -9,6 +9,7 @@ export type LoadingRectangleBlockProps = DetailedHTMLProps<
|
||||
/**
|
||||
* # A loading Rectangle block
|
||||
* @className twui-loading-rectangle-block
|
||||
* @className twui-loading-block
|
||||
*/
|
||||
export default function LoadingRectangleBlock({
|
||||
...props
|
||||
@@ -19,8 +20,8 @@ export default function LoadingRectangleBlock({
|
||||
className={twMerge(
|
||||
"flex items-center w-full h-10 animate-pulse bg-slate-200 rounded",
|
||||
"dark:bg-slate-800",
|
||||
"twui-loading-rectangle-block",
|
||||
props.className
|
||||
"twui-loading-rectangle-block twui-loading-block",
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
|
||||
@@ -8,10 +8,12 @@ import { twMerge } from "tailwind-merge";
|
||||
export default function Span({
|
||||
size,
|
||||
variant,
|
||||
truncate,
|
||||
...props
|
||||
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
|
||||
size?: "normal" | "small" | "smaller" | "large" | "larger";
|
||||
variant?: "normal" | "faded";
|
||||
truncate?: { lines?: number; width?: number };
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
@@ -23,8 +25,9 @@ export default function Span({
|
||||
size == "large" && "text-lg",
|
||||
size == "larger" && "text-xl",
|
||||
variant == "faded" && "opacity-50",
|
||||
truncate ? `` : ``,
|
||||
"twui-span",
|
||||
props.className
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
|
||||
Reference in New Issue
Block a user