banhaten 0.1.0 → 0.1.2

package/registry/components/expanded/ActivityFeed.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
 import "./activityFeed.css";
 
 const defaultAvatarSrc = new URL("../assets/activity-feed-avatar.png", import.meta.url).href;
@@ -85,26 +86,48 @@ function Indicator({
 }
 
 function ActionButton({ action }: { action: ActivityFeedAction }) {
-  const className = classes("ds-activity-feed-item__button", `ds-activity-feed-item__button--${action.variant ?? "secondary"}`);
+  const variant = action.variant === "primary" ? "default" : "outline";
 
   if (action.href) {
     return (
-      <a aria-label={action.ariaLabel} className={className} href={action.href}>
-        {action.label}
-      </a>
+      <Button
+        aria-label={action.ariaLabel}
+        asChild
+        className="ds-activity-feed-item__button"
+        size="sm"
+        variant={variant}
+      >
+        <a
+          aria-disabled={action.disabled || undefined}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {action.label}
+        </a>
+      </Button>
     );
   }
 
   return (
-    <button
+    <Button
       aria-label={action.ariaLabel}
-      className={className}
+      className="ds-activity-feed-item__button"
       disabled={action.disabled}
       onClick={action.onClick}
+      size="sm"
       type="button"
+      variant={variant}
     >
       {action.label}
-    </button>
+    </Button>
   );
 }
 
@@ -135,17 +158,11 @@ export function ActivityFeedItem({
   const rtl = dir === "rtl";
   const nodeId = rtl ? (type === "caption" ? "587:18720" : "587:18701") : type === "caption" ? "584:18591" : "584:10411";
 
-  const textParts = rtl
-    ? [
-        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
-        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
-        label && <strong key="label">{label}</strong>,
-      ]
-    : [
-        label && <strong key="label">{label}</strong>,
-        hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
-        hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
-      ];
+  const textParts = [
+    label && <strong key="label">{label}</strong>,
+    hasSupportText && supportText && <span className="ds-activity-feed-item__support" key="support">{supportText}</span>,
+    hasLink && link && <span className="ds-activity-feed-item__link" key="link">{link}</span>,
+  ];
 
   return (
     <article
@@ -158,14 +175,13 @@ export function ActivityFeedItem({
       data-node-id={nodeId}
       dir={rtl ? "rtl" : "ltr"}
     >
-      {!rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
+      <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />
 
       <div className="ds-activity-feed-item__content">
         <div className="ds-activity-feed-item__container">
           <div className="ds-activity-feed-item__topline">
-            {rtl && hasStatus && <StatusDot />}
             <div className="ds-activity-feed-item__text">{textParts}</div>
-            {!rtl && hasStatus && <StatusDot />}
+            {hasStatus && <StatusDot />}
           </div>
 
           {type === "slot" ? (
@@ -191,8 +207,6 @@ export function ActivityFeedItem({
 
         {showPaddingBottom && <div className="ds-activity-feed-item__bottom-space" aria-hidden="true" />}
       </div>
-
-      {rtl && <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} rtl={rtl} showLine={showLine} type={type} />}
     </article>
   );
 }

package/registry/components/expanded/Banner.tsx

@@ -1,4 +1,9 @@
 import type { ReactNode } from "react";
+import { MegaphoneIcon as LucideMegaphoneIcon, XIcon } from "lucide-react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
 import "./banner.css";
 
 export type BannerType = "slim" | "single-action-inline" | "single-action" | "input";
@@ -30,19 +35,17 @@ export type BannerProps = {
 };
 
 function MegaphoneIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-banner__icon" viewBox="0 0 24 24">
-      <path d="M3 10.5v3a2.5 2.5 0 0 0 2.5 2.5h.63l1.15 3.44A1.5 1.5 0 0 0 8.7 20.5h1.1a1 1 0 0 0 .95-1.32L9.7 16H11l7.24 3.1A1.25 1.25 0 0 0 20 17.95V6.05a1.25 1.25 0 0 0-1.76-1.14L11 8H5.5A2.5 2.5 0 0 0 3 10.5Zm15 6.69-6-2.58V9.39l6-2.58v10.38ZM5 10.5A.5.5 0 0 1 5.5 10H10v4H5.5a.5.5 0 0 1-.5-.5v-3Z" />
-    </svg>
-  );
+  return <LucideMegaphoneIcon aria-hidden="true" className="ds-banner__icon" strokeWidth={2.1} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-banner__close-icon" viewBox="0 0 24 24">
-      <path d="m12 10.59 5.3-5.3 1.41 1.42-5.3 5.29 5.3 5.3-1.41 1.41-5.3-5.3-5.29 5.3-1.42-1.41 5.3-5.3-5.3-5.29 1.42-1.42 5.29 5.3Z" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" className="ds-banner__close-icon" strokeWidth={2.25} />;
+}
+
+function getBannerActionVariant(color: BannerColor): ButtonProps["variant"] {
+  if (color === "brand-light") return "default";
+  if (color === "grey") return "secondary";
+  return "white";
 }
 
 function cx(...classes: Array<string | false | undefined>) {
@@ -75,10 +78,18 @@ export function Banner({
   const isInlineAction = type === "slim" || type === "single-action-inline";
   const inlineActionLabel = type === "single-action-inline" ? actionLabel : linkLabel;
   const hasInlineAction = isInlineAction && (showInlineAction ?? true) && Boolean(inlineActionLabel);
+  const actionVariant = getBannerActionVariant(color);
   const closeButton = (
-    <button className="ds-banner__close" onClick={onClose} type="button" aria-label={closeLabel}>
+    <Button
+      aria-label={closeLabel ?? "Dismiss banner"}
+      className="ds-banner__close"
+      onClick={onClose}
+      size="icon-xs"
+      type="button"
+      variant="ghost"
+    >
       <CloseIcon />
-    </button>
+    </Button>
   );
 
   return (
@@ -110,18 +121,30 @@ export function Banner({
         </div>
 
         {hasInlineAction && (
-          <button className="ds-banner__link" onClick={onAction} type="button">
+          <Button
+            className="ds-banner__link"
+            onClick={onAction}
+            size="sm"
+            type="button"
+            variant={type === "single-action-inline" ? actionVariant : "link"}
+          >
             {inlineActionLabel}
-          </button>
+          </Button>
         )}
       </div>
 
       {type === "single-action" && (
         <div className="ds-banner__tail">
           {actionLabel && (
-            <button className="ds-banner__action" onClick={onAction} type="button">
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
               {actionLabel}
-            </button>
+            </Button>
           )}
           {closeButton}
         </div>
@@ -129,11 +152,23 @@ export function Banner({
 
       {type === "input" && (
         <div className="ds-banner__tail ds-banner__tail--input">
-          <input aria-label={inputAriaLabel} className="ds-banner__input" placeholder={inputPlaceholder} type="text" />
+          <Input
+            aria-label={inputAriaLabel}
+            className="ds-banner__input"
+            hasInformationIcon={false}
+            placeholder={inputPlaceholder}
+            size="md"
+          />
           {actionLabel && (
-            <button className="ds-banner__action" onClick={onAction} type="button">
+            <Button
+              className="ds-banner__action"
+              onClick={onAction}
+              size="sm"
+              type="button"
+              variant={actionVariant}
+            >
               {actionLabel}
-            </button>
+            </Button>
           )}
           {closeButton}
         </div>

package/registry/components/expanded/Breadcrumbs.tsx

@@ -1,4 +1,10 @@
 import type { ReactNode } from "react";
+import {
+  ChevronRightIcon,
+  EllipsisIcon,
+  FolderIcon,
+  HomeIcon,
+} from "lucide-react";
 import "./breadcrumbs.css";
 
 export type BreadcrumbSeparator = "slash" | "chevron";
@@ -106,51 +112,17 @@ function Separator({ separator }: { separator: BreadcrumbSeparator }) {
 }
 
 export function BreadcrumbHomeIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M3.5 8.7 10 3.4l6.5 5.3v7.1a.9.9 0 0 1-.9.9h-3.2v-4.9H7.6v4.9H4.4a.9.9 0 0 1-.9-.9V8.7Z"
-        fill="none"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
-    </svg>
-  );
+  return <HomeIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 export function BreadcrumbFolderIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M2.8 5.7c0-.9.7-1.6 1.6-1.6h3.8l1.5 1.8h5.9c.9 0 1.6.7 1.6 1.6v6.8c0 .9-.7 1.6-1.6 1.6H4.4c-.9 0-1.6-.7-1.6-1.6V5.7Z"
-        fill="none"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
-    </svg>
-  );
+  return <FolderIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 function ChevronIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="m6 3.5 4 4.5-4 4.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
-    </svg>
-  );
+  return <ChevronRightIcon aria-hidden="true" strokeWidth={2} />;
 }
 
 function OverflowIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path
-        d="M5.2 10h.1M10 10h.1M14.8 10h.1"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="2.4"
-      />
-    </svg>
-  );
+  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
 }

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -36,17 +36,12 @@ const breadcrumbAriaLabel = "Catalog breadcrumbs";
 const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
 
 const uploadFiles: FileUploadFile[] = [
-  { id: "tokens", name: "semantic-tokens.json", sizeLabel: "4 MB", versionLabel: "v3.0", status: "uploaded" },
-  { id: "components", name: "component-inventory.csv", sizeLabel: "18 MB", versionLabel: "v2.4", status: "uploading" },
-  { id: "icons", name: "icons-shortlist.pdf", sizeLabel: "7 MB", status: "error", errorLabel: "Needs retry" },
+  { id: "uploaded", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "uploaded" },
+  { id: "uploading", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "uploading" },
+  { id: "progress", name: "file-name.pdf", sizeLabel: "32 KB", progress: 40, status: "uploading-progress" },
+  { id: "error", name: "file-name.pdf", sizeLabel: "32mb", versionLabel: "v1.2.2", status: "error", errorLabel: "Upload failed" },
 ];
 
-const fileUploadCopy = {
-  browseLabel: "Browse",
-  helperText: "SVG, PNG, PDF, or CSV up to 50 MB",
-  prompt: "Drag and drop files here, or",
-};
-
 const projectRows: ProjectRow[] = [
   { id: "1", name: "Component audit", leader: "Maya Chen", progress: 84, status: "On track", deadline: "Jun 12" },
   { id: "2", name: "Icon decision", leader: "Ahmed Galal", progress: 64, status: "Review", deadline: "Jun 18" },
@@ -121,7 +116,7 @@ export function CatalogComponentsShowcase() {
             aria-label={rtlBreadcrumbAriaLabel}
             dir="rtl"
             items={rtlBreadcrumbItems}
-            overflowLabel="\u0627\u0644\u0645\u0632\u064a\u062f"
+            overflowLabel={"\u0627\u0644\u0645\u0632\u064a\u062f"}
             separator="chevron"
             style="raised"
           />
@@ -134,7 +129,7 @@ export function CatalogComponentsShowcase() {
           <CatalogDivider borderStyle="dotted" />
           <CatalogContentDivider label="Text" />
           <CatalogContentDivider actionLabel="Button" onAction={() => undefined} />
-          <CatalogContentDivider dir="rtl" label="\u0646\u0635" borderStyle="dotted" />
+          <CatalogContentDivider dir="rtl" label={"\u0646\u0635"} borderStyle="dotted" />
         </div>
       </ShowcaseCard>
 
@@ -162,21 +157,21 @@ export function CatalogComponentsShowcase() {
             large
           </CatalogTag>
           <CatalogTag
-            avatar="\u0645"
-            closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"
+            avatar={"\u0645"}
+            closeLabel={"\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"}
             dir="rtl"
             type="avatar"
             showCloseButton
           >
-            \u0645\u0644\u0635\u0642
+            {"\u0645\u0644\u0635\u0642"}
           </CatalogTag>
         </div>
       </ShowcaseCard>
 
       <ShowcaseCard title="File Upload" description="Large and small queued-file upload states.">
         <div className="catalog-showcase__upload-grid">
-          <FileUpload {...fileUploadCopy} files={uploadFiles} multiple />
-          <FileUpload {...fileUploadCopy} files={uploadFiles.slice(0, 1)} size="sm" />
+          <FileUpload files={uploadFiles} multiple />
+          <FileUpload files={uploadFiles.slice(0, 4)} size="sm" />
         </div>
       </ShowcaseCard>
 

package/registry/components/expanded/CatalogTag.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { PlusIcon as LucidePlusIcon, XIcon } from "lucide-react";
 import "./tag.css";
 
 export type TagType = "simple" | "dot" | "flag" | "avatar" | "icon";
@@ -61,7 +62,7 @@ export function CatalogTag({
         <span aria-hidden="true" className="ds-tag__leading">
           {type === "dot" && <span className="ds-tag__dot" />}
           {type === "flag" && (flag ?? <span className="ds-tag__flag" />)}
-          {type === "avatar" && avatar}
+          {type === "avatar" && <span className="ds-tag__avatar">{avatar}</span>}
           {type === "icon" && (icon ?? <PlusIcon />)}
         </span>
       )}
@@ -76,17 +77,9 @@ export function CatalogTag({
 }
 
 function PlusIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="M8 3.5v9M3.5 8h9" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
-    </svg>
-  );
+  return <LucidePlusIcon aria-hidden="true" strokeWidth={2.25} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16">
-      <path d="m4.5 4.5 7 7M11.5 4.5l-7 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" strokeWidth={2.25} />;
 }

package/registry/components/expanded/CommandBar.tsx

@@ -1,5 +1,16 @@
 import "./commandBar.css";
 
+import {
+  ArrowUpDownIcon as LucideArrowUpDownIcon,
+  BookOpenIcon,
+  CommandIcon,
+  CornerDownLeftIcon,
+  SearchIcon as LucideSearchIcon,
+  XIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
 export type CommandBarType = "default" | "recent" | "results" | "no-result";
 export type CommandBarBreakpoint = "desktop" | "mobile";
 
@@ -34,7 +45,7 @@ type CommandRow = {
   readonly visual: "avatar" | "icon";
 };
 
-const shortcutText = "\u2318K";
+const shortcutLabel = "Command K";
 
 const ltrCopy: CommandBarCopy = {
   clear: "Clear search",
@@ -248,9 +259,15 @@ function FilterSection({ copy }: { copy: CommandBarCopy }) {
       <SectionHeading>{copy.searchFor}</SectionHeading>
       <div className="ds-command-bar__tags" aria-label={copy.searchFor}>
         {copy.tags.map((tag) => (
-          <button className="ds-command-bar__tag" key={tag} type="button">
+          <Button
+            className="ds-command-bar__tag"
+            key={tag}
+            size="sm"
+            type="button"
+            variant="secondary"
+          >
             {tag}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
@@ -326,7 +343,14 @@ function CommandFooter({ copy }: { copy: CommandBarCopy }) {
 }
 
 function Shortcut() {
-  return <kbd className="ds-command-bar__shortcut">{shortcutText}</kbd>;
+  return (
+    <kbd aria-label={shortcutLabel} className="ds-command-bar__shortcut">
+      <CommandIcon aria-hidden="true" className="ds-command-bar__shortcut-icon" />
+      <span aria-hidden="true" className="ds-command-bar__shortcut-key">
+        K
+      </span>
+    </kbd>
+  );
 }
 
 function IconWrap() {
@@ -342,65 +366,21 @@ function Avatar() {
 }
 
 function SearchIcon({ size = 24 }: { size?: number }) {
-  return (
-    <svg aria-hidden="true" fill="none" height={size} viewBox="0 0 24 24" width={size}>
-      <path
-        d="M10.75 18.5a7.75 7.75 0 1 1 5.48-2.27l3.02 3.02"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-    </svg>
-  );
+  return <LucideSearchIcon aria-hidden="true" height={size} strokeWidth={2} width={size} />;
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="m5 5 10 10M15 5 5 15" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" height="20" strokeWidth={2.2} width="20" />;
 }
 
 function BookIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path
-        d="M5.5 3.5h8.2c.9 0 1.6.7 1.6 1.6v10.4H6.2a1.5 1.5 0 0 0 0 3h9.1M5.5 3.5a2 2 0 0 0-2 2v11a2 2 0 0 1 2-2m0-11v11m2.4-7.8h4.8"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.6"
-      />
-    </svg>
-  );
+  return <BookOpenIcon aria-hidden="true" height="20" strokeWidth={1.8} width="20" />;
 }
 
 function ArrowUpDownIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M5 2v12m0 0 2.5-2.5M5 14l-2.5-2.5M11 14V2m0 0 2.5 2.5M11 2 8.5 4.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.45"
-      />
-    </svg>
-  );
+  return <LucideArrowUpDownIcon aria-hidden="true" height="16" strokeWidth={1.9} width="16" />;
 }
 
 function EnterIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M12.5 3.5v3.25a3 3 0 0 1-3 3H3.75m0 0L6.2 7.3M3.75 9.75 6.2 12.2"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.45"
-      />
-    </svg>
-  );
+  return <CornerDownLeftIcon aria-hidden="true" height="16" strokeWidth={1.9} width="16" />;
 }

package/registry/components/expanded/EmptyState.tsx

@@ -0,0 +1,155 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { SearchIcon } from "lucide-react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+
+import "./emptyState.css";
+
+export type EmptyStateAlign = "center" | "start";
+export type EmptyStateSize = "default" | "compact";
+
+export type EmptyStateAction = {
+  ariaLabel?: string;
+  disabled?: boolean;
+  href?: string;
+  icon?: ReactNode;
+  label: ReactNode;
+  onAction?: () => void;
+  rel?: string;
+  size?: ButtonProps["size"];
+  target?: string;
+  type?: "button" | "submit" | "reset";
+  variant?: ButtonProps["variant"];
+};
+
+export type EmptyStateProps = Omit<ComponentPropsWithoutRef<"section">, "title"> & {
+  actions?: EmptyStateAction[];
+  align?: EmptyStateAlign;
+  description?: ReactNode;
+  dir?: "ltr" | "rtl" | "auto";
+  icon?: ReactNode;
+  iconLabel?: string;
+  size?: EmptyStateSize;
+  title: ReactNode;
+};
+
+export function EmptyState({
+  actions = [],
+  align = "center",
+  className,
+  description,
+  dir = "ltr",
+  icon,
+  iconLabel,
+  size = "default",
+  title,
+  ...props
+}: EmptyStateProps) {
+  const hasActions = actions.length > 0;
+
+  return (
+    <section
+      className={cx(
+        "ds-empty-state",
+        `ds-empty-state--${align}`,
+        `ds-empty-state--${size}`,
+        className,
+      )}
+      dir={dir}
+      {...props}
+    >
+      <span
+        aria-hidden={iconLabel ? undefined : true}
+        aria-label={iconLabel}
+        className="ds-empty-state__icon-wrap"
+        role={iconLabel ? "img" : undefined}
+      >
+        <span className="ds-empty-state__icon-media">
+          {icon ?? <SearchIcon />}
+        </span>
+      </span>
+
+      <div className="ds-empty-state__copy">
+        <h3 className="ds-empty-state__title" dir="auto">
+          {title}
+        </h3>
+        {description && (
+          <p className="ds-empty-state__description" dir="auto">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {hasActions && (
+        <div className="ds-empty-state__actions">
+          {actions.map((action, index) => (
+            <EmptyStateActionButton
+              action={action}
+              actionCount={actions.length}
+              index={index}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function EmptyStateActionButton({
+  action,
+  actionCount,
+  index,
+}: {
+  action: EmptyStateAction;
+  actionCount: number;
+  index: number;
+}) {
+  const variant =
+    action.variant ?? (actionCount > 1 && index === 0 ? "secondary" : "default");
+  const content = (
+    <>
+      {action.icon}
+      {action.label}
+    </>
+  );
+
+  if (action.href) {
+    const isDisabled = Boolean(action.disabled);
+
+    return (
+      <Button
+        aria-label={action.ariaLabel}
+        asChild
+        size={action.size ?? "default"}
+        variant={variant}
+      >
+        <a
+          aria-disabled={isDisabled || undefined}
+          href={isDisabled ? undefined : action.href}
+          rel={action.rel ?? (action.target === "_blank" ? "noreferrer" : undefined)}
+          target={action.target}
+        >
+          {content}
+        </a>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      aria-label={action.ariaLabel}
+      disabled={action.disabled}
+      onClick={action.onAction}
+      size={action.size ?? "default"}
+      type={action.type ?? "button"}
+      variant={variant}
+    >
+      {content}
+    </Button>
+  );
+}
+
+function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}