keystone-design-bootstrap 1.0.3

package/src/design_system/elements/buttons/button-utility.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import { isValidElement } from "react";
+import type { Placement } from "react-aria";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { Tooltip } from '../tooltip/tooltip';
+import { cx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+
+export const styles = {
+    secondary:
+        "bg-primary text-fg-quaternary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs disabled:ring-disabled_subtle",
+    tertiary: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover",
+};
+
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** The size variant of the button */
+    size?: "xs" | "sm";
+    /** The color variant of the button */
+    color?: "secondary" | "tertiary";
+    /** The icon to display in the button */
+    icon?: FC<{ className?: string }> | ReactNode;
+    /** The tooltip to display when hovering over the button */
+    tooltip?: string;
+    /** The placement of the tooltip */
+    tooltipPlacement?: Placement;
+}
+
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps["slot"];
+}
+
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {}
+
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+
+export const ButtonUtility = ({
+    tooltip,
+    className,
+    isDisabled,
+    icon: Icon,
+    size = "sm",
+    color = "secondary",
+    tooltipPlacement = "top",
+    ...otherProps
+}: Props) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+
+            href: isDisabled ? undefined : href,
+
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(isDisabled ? { "data-rac": true, "data-disabled": true } : {}),
+        };
+    } else {
+        props = {
+            ...otherProps,
+
+            type: otherProps.type || "button",
+            isDisabled,
+        };
+    }
+
+    const content = (
+        <Component
+            aria-label={tooltip}
+            {...props}
+            className={cx(
+                "group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-fg-disabled_subtle",
+                styles[color],
+
+                // Icon styles
+                "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all",
+                size === "xs" ? "*:data-icon:size-4" : "*:data-icon:size-5",
+
+                className,
+            )}
+        >
+            {isReactComponent(Icon) && <Icon data-icon />}
+            {isValidElement(Icon) && Icon}
+        </Component>
+    );
+
+    if (tooltip) {
+        return (
+            <Tooltip title={tooltip} placement={tooltipPlacement} isDisabled={isDisabled} offset={size === "xs" ? 4 : 6}>
+                {content}
+            </Tooltip>
+        );
+    }
+
+    return content;
+};

package/src/design_system/elements/buttons/button.aman.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import React, { isValidElement } from "react";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { cx, sortCx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+
+// Aman theme: Minimal dark charcoal buttons with white text
+export const styles = sortCx({
+    common: {
+        root: [
+            "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-none transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all",
+        ].join(" "),
+        icon: "pointer-events-none size-5 shrink-0 transition-inherit-all",
+    },
+    sizes: {
+        sm: {
+            root: "gap-2 rounded-sm px-5 py-2.5 text-sm font-medium uppercase tracking-wide",
+        },
+        md: {
+            root: "gap-2 rounded-sm px-6 py-3 text-base font-medium uppercase tracking-wide",
+        },
+        lg: {
+            root: "gap-2 rounded-sm px-8 py-3.5 text-lg font-medium uppercase tracking-wide",
+        },
+        xl: {
+            root: "gap-2.5 rounded-sm px-10 py-4 text-xl font-medium uppercase tracking-wide",
+        },
+    },
+
+    colors: {
+        primary: {
+            root: "bg-primary text-primary_contrast hover:opacity-90",
+        },
+        secondary: {
+            root: "bg-white text-fg-primary border-2 hover:opacity-90 transition-all",
+        },
+        tertiary: {
+            root: "text-fg-primary hover:underline",
+        },
+        "link-gray": {
+            root: [
+                "p-0! text-fg-primary",
+                "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline",
+            ].join(" "),
+        },
+        "link-color": {
+            root: [
+                "p-0! text-fg-primary",
+                "*:data-text:underline *:data-text:underline-offset-4 hover:*:data-text:no-underline",
+            ].join(" "),
+        },
+    },
+});
+
+export interface CommonProps {
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    size?: keyof typeof styles.sizes;
+    color?: keyof typeof styles.colors;
+    iconLeading?: FC<{ className?: string }> | ReactNode;
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    noTextPadding?: boolean;
+    showTextWhileLoading?: boolean;
+}
+
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    slot?: AriaButtonProps["slot"];
+}
+
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {}
+
+export type Props = ButtonProps | LinkProps;
+
+export const Button = ({
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading,
+    ...otherProps
+}: Props) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    const isLinkType = ["link-gray", "link-color"].includes(color);
+
+    noTextPadding = isLinkType || noTextPadding;
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+            href: disabled ? undefined : href,
+            ...(disabled ? { "data-rac": true, "data-disabled": true } : {}),
+        };
+    } else {
+        props = {
+            ...otherProps,
+            type: otherProps.type || "button",
+            isPending: loading,
+            isDisabled: disabled,
+        };
+    }
+
+    // Dynamic border color for secondary buttons using brand secondary color
+    const secondaryStyle = color === 'secondary' ? {
+        borderColor: 'var(--color-text-brand-secondary)'
+    } : undefined;
+
+    return (
+        <Component
+            data-loading={loading ? true : undefined}
+            data-icon-only={isIcon ? true : undefined}
+            {...props}
+            style={secondaryStyle}
+            className={cx(
+                styles.common.root,
+                styles.sizes[size].root,
+                styles.colors[color].root,
+                (loading || (href && (disabled || loading))) && "pointer-events-none",
+                loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+                className,
+            )}
+        >
+            {isValidElement(IconLeading) && IconLeading}
+            {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
+
+            {loading && (
+                <svg
+                    fill="none"
+                    data-icon="loading"
+                    viewBox="0 0 20 20"
+                    className={cx(styles.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")}
+                >
+                    <circle className="stroke-current opacity-30" cx="10" cy="10" r="8" fill="none" strokeWidth="2" />
+                    <circle
+                        className="origin-center animate-spin stroke-current"
+                        cx="10"
+                        cy="10"
+                        r="8"
+                        fill="none"
+                        strokeWidth="2"
+                        strokeDasharray="12.5 50"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            )}
+
+            {children && (
+                <span data-text className={cx("transition-inherit-all", !noTextPadding && "px-0.5")}>
+                    {children}
+                </span>
+            )}
+
+            {isValidElement(IconTrailing) && IconTrailing}
+            {isReactComponent(IconTrailing) && <IconTrailing data-icon="trailing" className={styles.common.icon} />}
+        </Component>
+    );
+};
+
+import { registerThemeVariant } from '../../../lib/component-registry';
+registerThemeVariant('button', 'aman', Button);

package/src/design_system/elements/buttons/button.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
+import React, { isValidElement } from "react";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
+import { cx, sortCx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+
+export const styles = sortCx({
+    common: {
+        root: [
+            "group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2",
+            // When button is used within `InputGroup`
+            "in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
+            // Disabled styles
+            "disabled:cursor-not-allowed disabled:text-fg-disabled",
+            // Icon styles
+            "disabled:*:data-icon:text-fg-disabled_subtle",
+            // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+            "*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all",
+        ].join(" "),
+        icon: "pointer-events-none size-5 shrink-0 transition-inherit-all",
+    },
+    sizes: {
+        sm: {
+            root: [
+                "gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2",
+                "in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5",
+            ].join(" "),
+            linkRoot: "gap-1",
+        },
+        md: {
+            root: [
+                "gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5",
+                "in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3",
+            ].join(" "),
+            linkRoot: "gap-1",
+        },
+        lg: {
+            root: "gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3",
+            linkRoot: "gap-1.5",
+        },
+        xl: {
+            root: "gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5",
+            linkRoot: "gap-1.5",
+        },
+    },
+
+    colors: {
+        primary: {
+            root: [
+                "bg-brand-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover",
+                // Inner border gradient
+                "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+                // Disabled styles
+                "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-button-primary-icon hover:*:data-icon:text-button-primary-icon_hover",
+            ].join(" "),
+        },
+        secondary: {
+            root: [
+                "bg-primary text-secondary shadow-xs-skeumorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
+                // Disabled styles
+                "disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        tertiary: {
+            root: [
+                "text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        "link-gray": {
+            root: [
+                "justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover",
+            ].join(" "),
+        },
+        "link-color": {
+            root: [
+                "justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover",
+            ].join(" "),
+        },
+        "primary-destructive": {
+            root: [
+                "bg-error-solid text-white shadow-xs-skeumorphic ring-1 ring-transparent outline-error ring-inset",
+                // Inner border gradient
+                "before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+                // Disabled styles
+                "disabled:bg-disabled disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-button-destructive-primary-icon hover:*:data-icon:text-button-destructive-primary-icon_hover",
+            ].join(" "),
+        },
+        "secondary-destructive": {
+            root: [
+                "bg-primary text-error-primary shadow-xs-skeumorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+                // Disabled styles
+                "disabled:bg-primary disabled:shadow-xs disabled:ring-disabled_subtle",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+        "tertiary-destructive": {
+            root: [
+                "text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+        "link-destructive": {
+            root: [
+                "justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover",
+                // Inner text underline
+                "*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current",
+                // Icon styles
+                "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary",
+            ].join(" "),
+        },
+    },
+});
+
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{ className?: string }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+}
+
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps["slot"];
+}
+
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {}
+
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+
+export const Button = ({
+    size = "sm",
+    color = "primary",
+    children,
+    className,
+    noTextPadding,
+    iconLeading: IconLeading,
+    iconTrailing: IconTrailing,
+    isDisabled: disabled,
+    isLoading: loading,
+    showTextWhileLoading,
+    ...otherProps
+}: Props) => {
+    const href = "href" in otherProps ? otherProps.href : undefined;
+    const Component = href ? AriaLink : AriaButton;
+
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+
+    noTextPadding = isLinkType || noTextPadding;
+
+    let props = {};
+
+    if (href) {
+        props = {
+            ...otherProps,
+
+            href: disabled ? undefined : href,
+
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(disabled ? { "data-rac": true, "data-disabled": true } : {}),
+        };
+    } else {
+        props = {
+            ...otherProps,
+
+            type: otherProps.type || "button",
+            isPending: loading,
+            isDisabled: disabled,
+        };
+    }
+
+    return (
+        <Component
+            data-loading={loading ? true : undefined}
+            data-icon-only={isIcon ? true : undefined}
+            {...props}
+            className={cx(
+                styles.common.root,
+                styles.sizes[size].root,
+                styles.colors[color].root,
+                isLinkType && styles.sizes[size].linkRoot,
+                (loading || (href && (disabled || loading))) && "pointer-events-none",
+                // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+                loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+                className,
+            )}
+        >
+            {/* Leading icon */}
+            {isValidElement(IconLeading) && IconLeading}
+            {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
+
+            {loading && (
+                <svg
+                    fill="none"
+                    data-icon="loading"
+                    viewBox="0 0 20 20"
+                    className={cx(styles.common.icon, !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2")}
+                >
+                    {/* Background circle */}
+                    <circle className="stroke-current opacity-30" cx="10" cy="10" r="8" fill="none" strokeWidth="2" />
+                    {/* Spinning circle */}
+                    <circle
+                        className="origin-center animate-spin stroke-current"
+                        cx="10"
+                        cy="10"
+                        r="8"
+                        fill="none"
+                        strokeWidth="2"
+                        strokeDasharray="12.5 50"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            )}
+
+            {children && (
+                <span data-text className={cx("transition-inherit-all", !noTextPadding && "px-0.5")}>
+                    {children}
+                </span>
+            )}
+
+            {/* Trailing icon */}
+            {isValidElement(IconTrailing) && IconTrailing}
+            {isReactComponent(IconTrailing) && <IconTrailing data-icon="trailing" className={styles.common.icon} />}
+        </Component>
+    );
+};

package/src/design_system/elements/buttons/close-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { X as CloseIcon } from "@untitledui/icons";
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+const sizes = {
+    xs: { root: "size-7", icon: "size-4" },
+    sm: { root: "size-9", icon: "size-5" },
+    md: { root: "size-10", icon: "size-5" },
+    lg: { root: "size-11", icon: "size-6" },
+};
+
+const themes = {
+    light: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring",
+    dark: "text-fg-white/70 hover:text-fg-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 outline-focus-ring",
+};
+
+interface CloseButtonProps extends AriaButtonProps {
+    theme?: "light" | "dark";
+    size?: "xs" | "sm" | "md" | "lg";
+    label?: string;
+}
+
+export const CloseButton = ({ label, className, size = "sm", theme = "light", ...otherProps }: CloseButtonProps) => {
+    return (
+        <AriaButton
+            {...otherProps}
+            aria-label={label || "Close"}
+            className={(state) =>
+                cx(
+                    "flex cursor-pointer items-center justify-center rounded-lg p-2 transition duration-100 ease-linear focus:outline-hidden",
+                    sizes[size].root,
+                    themes[theme],
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            <CloseIcon aria-hidden="true" className={cx("shrink-0 transition-inherit-all", sizes[size].icon)} />
+        </AriaButton>
+    );
+};

package/src/design_system/elements/buttons/round-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ComponentPropsWithRef, FC } from "react";
+import { Button } from '..';
+import { cx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+
+interface RoundButtonProps extends ComponentPropsWithRef<"button"> {
+    icon?: FC<{ className?: string }>;
+}
+
+export const RoundButton = ({ icon: Icon, ...props }: RoundButtonProps) => {
+    return (
+        <Button
+            {...props}
+            color="link-gray"
+            className={cx(
+                "group flex size-12 items-center justify-center rounded-full bg-primary ring-1 ring-secondary backdrop-blur transition duration-100 ease-linear ring-inset hover:bg-secondary md:size-14",
+                props.className,
+            )}
+        >
+            {props.children ??
+                (isReactComponent(Icon) ? (
+                    <Icon className="size-5 text-fg-quaternary transition-inherit-all group-hover:text-fg-quaternary_hover md:size-6" />
+                ) : null)}
+        </Button>
+    );
+};
+