@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/TreeView.tsx

@@ -0,0 +1,297 @@
+import {
+    ChevronDown,
+    ChevronRight,
+    Edit2,
+    Plus,
+    Trash2,
+    Users,
+} from "lucide-react";
+import { useState, type ReactNode } from "react";
+import {
+    ContextMenuAdvanced,
+    ContextMenuAdvancedItem,
+    ContextMenuAdvancedSeparator,
+    ContextMenuAdvancedSub,
+} from "./context menu core/contextMenuAdvanced";
+export interface TreeTeam {
+    id: string | number;
+    name: string;
+    [key: string]: any;
+}
+
+export interface TreeItem {
+    id: string | number;
+    name: string;
+    code?: string;
+    children?: TreeItem[] | null;
+    teams?: TreeTeam[] | null;
+    [key: string]: any;
+}
+
+export interface TreeViewProps<T extends TreeItem = TreeItem> {
+    items: T[];
+    onAction: (action: "create" | "edit" | "delete", item: T | null) => void;
+    level?: number;
+    teams?: TreeTeam[];
+    onAssignTeam?: (
+        item: T,
+        teamId: string | number | null,
+        teamIds?: (string | number)[],
+    ) => void;
+    renderNodeIcon?: (
+        item: T,
+        hasChildren: boolean,
+        isExpanded: boolean,
+    ) => ReactNode;
+    emptyMessage?: string;
+    labels?: {
+        createSub?: string;
+        editItem?: string;
+        assignTeams?: string;
+        unlinkAllTeams?: string;
+        deleteItem?: string;
+    };
+    renderContextMenu?: (item: T) => ReactNode;
+    renderTeamSelector?: (
+        item: T,
+        assignedIds: (string | number)[],
+        onChange: (teamIds: (string | number)[]) => void,
+    ) => ReactNode;
+}
+
+export function TreeView<T extends TreeItem = TreeItem>({
+    items,
+    onAction,
+    level = 0,
+    teams = [],
+    onAssignTeam,
+    renderNodeIcon,
+    emptyMessage = "No items found.",
+    labels = {
+        createSub: "Add Sub-item",
+        editItem: "Edit Item",
+        assignTeams: "Assign to Teams",
+        unlinkAllTeams: "Unlink All Teams",
+        deleteItem: "Delete Item",
+    },
+    renderContextMenu,
+    renderTeamSelector,
+}: TreeViewProps<T>) {
+    if (!items || items.length === 0) {
+        if (level === 0) {
+            return (
+                <div className="p-6 text-sm text-center text-dashboard-muted-foreground">
+                    {emptyMessage}
+                </div>
+            );
+        }
+        return null;
+    }
+
+    const resolvedLabels = {
+        createSub: labels?.createSub ?? "Add Sub-item",
+        editItem: labels?.editItem ?? "Edit Item",
+        assignTeams: labels?.assignTeams ?? "Assign to Teams",
+        unlinkAllTeams: labels?.unlinkAllTeams ?? "Unlink All Teams",
+        deleteItem: labels?.deleteItem ?? "Delete Item",
+    };
+
+    return (
+        <div className="flex flex-col w-full animate-in fade-in duration-300">
+            {items.map((item) => (
+                <TreeNodeComponent
+                    key={item.id}
+                    item={item}
+                    level={level}
+                    onAction={onAction}
+                    teams={teams}
+                    onAssignTeam={onAssignTeam}
+                    renderNodeIcon={renderNodeIcon}
+                    labels={resolvedLabels}
+                    renderContextMenu={renderContextMenu}
+                    renderTeamSelector={renderTeamSelector}
+                />
+            ))}
+        </div>
+    );
+}
+
+function TreeNodeComponent<T extends TreeItem>({
+    item,
+    level,
+    onAction,
+    teams,
+    onAssignTeam,
+    renderNodeIcon,
+    labels,
+    renderContextMenu,
+    renderTeamSelector,
+}: {
+    item: T;
+    level: number;
+    onAction: TreeViewProps<T>["onAction"];
+    teams: TreeTeam[];
+    onAssignTeam?: TreeViewProps<T>["onAssignTeam"];
+    renderNodeIcon?: TreeViewProps<T>["renderNodeIcon"];
+    labels: Required<NonNullable<TreeViewProps<T>["labels"]>>;
+    renderContextMenu?: TreeViewProps<T>["renderContextMenu"];
+    renderTeamSelector?: TreeViewProps<T>["renderTeamSelector"];
+}) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const hasChildren = !!(item.children && item.children.length > 0);
+
+    const assignedIds = item.teams ? item.teams.map((t) => t.id) : [];
+    const isTeamAssigned = (teamId: string | number) =>
+        assignedIds.some((id: any) => String(id) === String(teamId));
+
+    const toggleTeamAssignment = (teamId: string | number) => {
+        if (!onAssignTeam) return;
+        const isAssigned = isTeamAssigned(teamId);
+        let newTeamIds: (string | number)[] = [];
+        if (isAssigned) {
+            newTeamIds = assignedIds.filter(
+                (id: any) => String(id) !== String(teamId),
+            );
+        } else {
+            newTeamIds = [...assignedIds, teamId];
+        }
+        onAssignTeam(item, newTeamIds[0] || null, newTeamIds);
+    };
+
+    const contextMenuContent = (
+        <>
+            <ContextMenuAdvancedItem
+                icon={Plus}
+                onClick={() => onAction("create", item)}
+            >
+                {labels.createSub}
+            </ContextMenuAdvancedItem>
+            <ContextMenuAdvancedItem
+                icon={Edit2}
+                onClick={() => onAction("edit", item)}
+            >
+                {labels.editItem}
+            </ContextMenuAdvancedItem>
+
+            {onAssignTeam && renderTeamSelector && (
+                <ContextMenuAdvancedSub
+                    icon={Users}
+                    label={labels.assignTeams}
+                    contentClassName="w-80 p-2"
+                >
+                    {renderTeamSelector(item, assignedIds, (teamIds) =>
+                        onAssignTeam(item, teamIds[0] || null, teamIds),
+                    )}
+                </ContextMenuAdvancedSub>
+            )}
+            {!renderTeamSelector && teams.length > 0 && onAssignTeam && (
+                <ContextMenuAdvancedSub icon={Users} label={labels.assignTeams}>
+                    {teams.map((t) => {
+                        const assigned = isTeamAssigned(t.id);
+                        return (
+                            <ContextMenuAdvancedItem
+                                key={t.id}
+                                onClick={() => toggleTeamAssignment(t.id)}
+                            >
+                                <span className="flex items-center gap-2">
+                                    <span className="w-3 text-xs font-bold text-dashboard-primary">
+                                        {assigned ? "✓" : ""}
+                                    </span>
+                                    <span>{t.name}</span>
+                                </span>
+                            </ContextMenuAdvancedItem>
+                        );
+                    })}
+                </ContextMenuAdvancedSub>
+            )}
+            {assignedIds.length > 0 && onAssignTeam && (
+                <ContextMenuAdvancedItem
+                    onClick={() => onAssignTeam(item, null, [])}
+                >
+                    {labels.unlinkAllTeams}
+                </ContextMenuAdvancedItem>
+            )}
+
+            <ContextMenuAdvancedSeparator />
+            <ContextMenuAdvancedItem
+                icon={Trash2}
+                variant="destructive"
+                onClick={() => onAction("delete", item)}
+            >
+                {labels.deleteItem}
+            </ContextMenuAdvancedItem>
+        </>
+    );
+
+    return (
+        <div className="flex flex-col w-full border-b border-dashboard-border">
+            <ContextMenuAdvanced
+                menuContent={
+                    renderContextMenu
+                        ? renderContextMenu(item)
+                        : contextMenuContent
+                }
+                className="w-48"
+            >
+                <div
+                    className="flex items-center justify-between py-2.5 hover:bg-dashboard-secondary/50 transition-colors cursor-pointer group px-4 border-b border-dashboard-border last:border-0"
+                    style={{ paddingLeft: `calc(1rem + ${level * 1.5}rem)` }}
+                    onClick={() => setIsExpanded(!isExpanded)}
+                >
+                    <div className="flex items-center gap-3">
+                        <div className="w-4 h-4 flex items-center justify-center shrink-0">
+                            {renderNodeIcon ? (
+                                renderNodeIcon(item, hasChildren, isExpanded)
+                            ) : hasChildren ? (
+                                isExpanded ? (
+                                    <ChevronDown className="w-3.5 h-3.5 text-dashboard-muted-foreground" />
+                                ) : (
+                                    <ChevronRight className="w-3.5 h-3.5 text-dashboard-muted-foreground rtl:rotate-180" />
+                                )
+                            ) : (
+                                <span className="w-3.5 h-3.5" />
+                            )}
+                        </div>
+
+                        <div className="flex flex-col">
+                            <div className="flex items-center gap-2">
+                                <h3 className="font-semibold text-dashboard-foreground text-sm group-hover:text-dashboard-primary transition-colors">
+                                    {item.name}
+                                </h3>
+                                {item.code && (
+                                    <span className="px-1.5 py-0.5 rounded-dashboard-radius bg-dashboard-background border border-dashboard-border text-[9px] font-bold text-dashboard-muted-foreground  tracking-wider font-mono">
+                                        {item.code}
+                                    </span>
+                                )}
+                                {item.teams &&
+                                    item.teams.length > 0 &&
+                                    item.teams.map((t, idx) => (
+                                        <span
+                                            key={idx}
+                                            className="px-1.5 py-0.5 rounded-dashboard-radius bg-dashboard-primary/10 border border-dashboard-primary/20 text-[9px] font-bold text-dashboard-primary  tracking-wider"
+                                        >
+                                            {t.name}
+                                        </span>
+                                    ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ContextMenuAdvanced>
+
+            {isExpanded && hasChildren && (
+                <TreeView
+                    items={item.children as T[]}
+                    level={level + 1}
+                    onAction={onAction}
+                    teams={teams}
+                    onAssignTeam={onAssignTeam}
+                    renderNodeIcon={renderNodeIcon}
+                    labels={labels}
+                    renderContextMenu={renderContextMenu}
+                    renderTeamSelector={renderTeamSelector}
+                />
+            )}
+        </div>
+    );
+}

package/src/components/accordion.tsx

@@ -0,0 +1,78 @@
+import { cn } from "../support/utils";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+    return (
+        <AccordionPrimitive.Root
+            data-slot="accordion"
+            className={cn("flex w-full flex-col", className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn("border-b border-dashboard-border", className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionTrigger({
+    className,
+    children,
+    ...props
+}: AccordionPrimitive.Trigger.Props) {
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    "group/accordion-trigger relative flex flex-1 items-center justify-between rounded-lg py-2.5 text-left text-xs font-medium text-dashboard-foreground transition-all outline-none hover:text-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-dashboard-muted-foreground",
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon
+                    data-slot="accordion-trigger-icon"
+                    className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+                />
+                <ChevronUpIcon
+                    data-slot="accordion-trigger-icon"
+                    className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+                />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+function AccordionContent({
+    className,
+    children,
+    ...props
+}: AccordionPrimitive.Panel.Props) {
+    return (
+        <AccordionPrimitive.Panel
+            data-slot="accordion-content"
+            className="overflow-hidden text-xs text-dashboard-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up"
+            {...props}
+        >
+            <div
+                className={cn(
+                    "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-dashboard-foreground [&_p:not(:last-child)]:mb-4",
+                    className,
+                )}
+            >
+                {children}
+            </div>
+        </AccordionPrimitive.Panel>
+    );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/avatar.tsx

@@ -0,0 +1,107 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import * as React from "react";
+
+import { cn } from "../support/utils";
+
+function Avatar({
+    className,
+    size = "default",
+    ...props
+}: AvatarPrimitive.Root.Props & {
+    size?: "default" | "sm" | "lg";
+}) {
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            data-size={size}
+            className={cn(
+                "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-dashboard-border data-[size=lg]:size-10 data-[size=sm]:size-6",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn(
+                "aspect-square size-full rounded-full object-cover",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarFallback({
+    className,
+    ...props
+}: AvatarPrimitive.Fallback.Props) {
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn(
+                "flex size-full items-center justify-center rounded-full bg-dashboard-secondary text-xs font-semibold text-dashboard-muted-foreground group-data-[size=sm]/avatar:text-[10px]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="avatar-badge"
+            className={cn(
+                "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-dashboard-primary text-white ring-2 ring-dashboard-background select-none",
+                "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+                "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+                "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group"
+            className={cn(
+                "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-dashboard-background",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroupCount({
+    className,
+    ...props
+}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group-count"
+            className={cn(
+                "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-dashboard-secondary text-xs font-semibold text-dashboard-muted-foreground ring-2 ring-dashboard-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Avatar,
+    AvatarBadge,
+    AvatarFallback,
+    AvatarGroup,
+    AvatarGroupCount,
+    AvatarImage,
+};

package/src/components/badge.tsx

@@ -0,0 +1,72 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ThemedText } from "../index";
+
+import { cn } from "../support/utils";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[5px] border border-transparent px-2 py-0.5 text-[10.5px] font-semibold whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-dashboard-primary/15 text-dashboard-primary border-dashboard-primary/30 [a]:hover:bg-dashboard-primary/25",
+        secondary:
+          "bg-dashboard-secondary text-dashboard-muted-foreground border-dashboard-border [a]:hover:bg-dashboard-secondary/80",
+        destructive:
+          "bg-dashboard-destructive/15 text-dashboard-destructive border-dashboard-destructive/30 [a]:hover:bg-dashboard-destructive/25",
+        success:
+          "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 [a]:hover:bg-emerald-500/25",
+        warning:
+          "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30 [a]:hover:bg-amber-500/25",
+        info:
+          "bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/30 [a]:hover:bg-sky-500/25",
+        outline:
+          "border-dashboard-border bg-dashboard-card/50 text-dashboard-foreground [a]:hover:bg-dashboard-secondary [a]:hover:text-dashboard-foreground",
+        ghost:
+          "text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground",
+        link: "text-dashboard-primary underline-offset-4 hover:underline",
+      },
+      shape: {
+        default: "rounded-[5px]",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      shape: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends Omit<React.ComponentProps<typeof ThemedText>, "variant">,
+    VariantProps<typeof badgeVariants> {
+  render?: useRender.ComponentProps<"span">["render"];
+}
+
+function Badge({
+  className,
+  variant = "default",
+  shape = "default",
+  render = (props) => <ThemedText {...(props as any)} />,
+  ...props
+}: BadgeProps) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ variant, shape }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -0,0 +1,93 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../support/utils";
+import Tooltip from "./Tooltip";
+
+const buttonVariants = cva(
+    "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none cursor-pointer focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-dashboard-destructive aria-invalid:ring-1 aria-invalid:ring-dashboard-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-dashboard-primary text-white hover:bg-dashboard-primary/90 shadow-xs active:scale-[0.98]",
+                outline:
+                    "border-dashboard-border bg-dashboard-card/60 text-dashboard-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground shadow-xs aria-expanded:bg-dashboard-secondary aria-expanded:text-dashboard-foreground",
+                secondary:
+                    "bg-dashboard-secondary text-dashboard-foreground hover:bg-dashboard-secondary/80 border border-dashboard-border aria-expanded:bg-dashboard-secondary aria-expanded:text-dashboard-foreground",
+                ghost:
+                    "text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground aria-expanded:bg-dashboard-secondary aria-expanded:text-dashboard-foreground",
+                destructive:
+                    "bg-dashboard-destructive/15 text-dashboard-destructive border border-dashboard-destructive/30 hover:bg-dashboard-destructive/25 focus-visible:ring-dashboard-destructive/30",
+                link: "text-dashboard-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default:
+                    "h-8 gap-1.5 px-3 py-1 text-xs has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+                xs: "h-6 gap-1 rounded-[5px] px-2 text-[11px] in-data-[slot=button-group]:rounded-[5px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+                sm: "h-7 gap-1.5 rounded-md px-2.5 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+                lg: "h-9 gap-2 px-4 text-xs font-semibold has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-4",
+                icon: "size-8 rounded-md",
+                "icon-xs":
+                    "size-6 rounded-[5px] in-data-[slot=button-group]:rounded-[5px] [&_svg:not([class*='size-'])]:size-3",
+                "icon-sm":
+                    "size-7 rounded-[5px] in-data-[slot=button-group]:rounded-[5px] [&_svg:not([class*='size-'])]:size-3.5",
+                "icon-lg": "size-9 rounded-md [&_svg:not([class*='size-'])]:size-4",
+            },
+            shape: {
+                default: "",
+                pill: "rounded-full",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+            shape: "default",
+        },
+    },
+);
+
+function Button({
+    className,
+    variant = "default",
+    size = "default",
+    shape = "default",
+    asChild, // Destructure but don't use since we don't have Slot
+    tooltip,
+    tooltipPlacement = "top",
+    tooltipDelay,
+    ...props
+}: ButtonPrimitive.Props &
+    VariantProps<typeof buttonVariants> & {
+        asChild?: boolean;
+        tooltip?: React.ReactNode;
+        tooltipPlacement?: "top" | "bottom" | "left" | "right";
+        tooltipDelay?: number;
+    }) {
+    const button = (
+        <ButtonPrimitive
+            data-slot="button"
+            className={cn(buttonVariants({ variant, size, shape, className }))}
+            {...props}
+        />
+    );
+
+    if (tooltip) {
+        const isFullWidth =
+            typeof className === "string" && className.includes("w-full");
+        return (
+            <Tooltip
+                content={tooltip}
+                placement={tooltipPlacement}
+                delay={tooltipDelay}
+                parentClassName={isFullWidth ? "w-full" : undefined}
+            >
+                {button}
+            </Tooltip>
+        );
+    }
+
+    return button;
+}
+
+export { Button, buttonVariants };