nextworks 0.0.1 → 0.1.0-alpha.1

package/dist/kits/blocks/components/sections/TrustBadges.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * A single trust badge (stat or certification).
+ * @public
+ */
+export interface TrustBadgeData {
+  /** Main badge text (e.g., "99.9% Uptime") */
+  badgeText: string;
+  /** Optional short descriptor above/below the text */
+  badgeDescription?: string;
+  /** Optional icon/emoji representation */
+  badgeIcon?: string;
+}
+
+/**
+ * Props for the TrustBadges section component.
+ *
+ * @remarks
+ * - Layout: choose horizontal row or vertical stack via layout.
+ * - Styling: slot-style overrides are merged after defaults via cn().
+ * - Motion: enableMotion toggles hover scale.
+ */
+export interface TrustBadgesProps {
+  /** Optional id on root. @defaultValue "trust-badges" */
+  id?: string;
+  /** Root className merged into section slot */
+  className?: string;
+
+  /** Badges to display. @defaultValue defaultTrustBadgeData */
+  badges?: TrustBadgeData[];
+  /** Optional heading above badges */
+  trustBadgesSectionHeader?: string;
+
+  /** Slot-style overrides */
+  section?: { className?: string };
+  container?: { className?: string };
+  header?: { className?: string };
+  heading?: { className?: string };
+  badgesContainer?: { className?: string };
+  badge?: { className?: string };
+  badgeContent?: { className?: string };
+  icon?: { className?: string };
+  description?: { className?: string };
+  text?: { className?: string };
+
+  /** Layout orientation. @defaultValue "horizontal" */
+  layout?: "horizontal" | "vertical";
+  /** When false, disables hover scale */
+  enableMotion?: boolean;
+  /** ARIA label for the section. @defaultValue "Trust badges section" */
+  ariaLabel?: string;
+}
+
+const defaultTrustBadgeData: TrustBadgeData[] = [
+  {
+    badgeText: "10,000+ businesses",
+    badgeDescription: "Trusted by",
+    badgeIcon: "📊",
+  },
+  {
+    badgeText: "SOC 2 Compliant",
+    badgeDescription: "Enterprise security",
+    badgeIcon: "🔒",
+  },
+  {
+    badgeText: "99.9% Uptime",
+    badgeDescription: "Reliable service",
+    badgeIcon: "⚡",
+  },
+];
+
+/**
+ * Compact section to showcase trust signals like usage stats and compliance.
+ *
+ * @remarks
+ * - Horizontal by default; switch to vertical with layout="vertical".
+ * - Hover motion can be disabled via enableMotion.
+ *
+ * @example
+ * <TrustBadges badges={[{ badgeText: 'SOC 2', badgeDescription: 'Security', badgeIcon: '🔒' }]} />
+ */
+export function TrustBadges({
+  id,
+  className,
+  badges = defaultTrustBadgeData,
+  trustBadgesSectionHeader,
+  section = { className: "py-8 px-6 bg-muted" },
+  container = { className: "max-w-7xl mx-auto" },
+  header = { className: "text-center mb-6" },
+  heading = {
+    className: "text-xl font-semibold text-foreground text-[var(--heading-fg)]",
+  },
+  badgesContainer = {
+    className:
+      "flex flex-col md:flex-row justify-center items-center gap-8 flex-wrap",
+  },
+  badge = {
+    className:
+      "flex flex-col items-center text-center min-w-[200px] transition-all duration-300 ease-in-out hover:scale-[1.02]",
+  },
+  badgeContent = { className: "flex flex-col items-center space-y-2" },
+  icon = { className: "text-2xl mb-2" },
+  description = {
+    className:
+      "text-sm font-medium text-muted-foreground text-[var(--card-muted-fg)]",
+  },
+  text = {
+    className: "text-lg font-bold text-foreground text-[var(--card-fg)]",
+  },
+  layout = "horizontal",
+  enableMotion = true,
+  ariaLabel = "Trust badges section",
+}: TrustBadgesProps) {
+  const containerClasses =
+    layout === "vertical"
+      ? "flex flex-col justify-center items-center gap-8"
+      : badgesContainer.className;
+
+  return (
+    <section
+      id={id || "trust-badges"}
+      className={cn(section.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={container.className}>
+        {trustBadgesSectionHeader && (
+          <div className={header.className}>
+            <h2 className={heading.className}>{trustBadgesSectionHeader}</h2>
+          </div>
+        )}
+
+        <div className={containerClasses}>
+          {badges.map((badgeData, index) => (
+            <div
+              key={index}
+              className={cn(
+                badge.className,
+                !enableMotion && "transition-none hover:!scale-100",
+              )}
+            >
+              <div className={badgeContent.className}>
+                {badgeData.badgeIcon && (
+                  <div className={icon.className}>{badgeData.badgeIcon}</div>
+                )}
+                {badgeData.badgeDescription && (
+                  <p className={description.className}>
+                    {badgeData.badgeDescription}
+                  </p>
+                )}
+                <p className={text.className}>{badgeData.badgeText}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/kits/blocks/components/theme-provider.tsx

@@ -0,0 +1,34 @@
+export { ThemeProvider } from "@nextworks/blocks-core";
+
+// "use client";
+
+// import * as React from "react";
+// import { ThemeProvider as NextThemesProvider } from "next-themes";
+// import type { ThemeProviderProps as NextThemesProviderProps } from "next-themes";
+
+// interface ThemeProviderProps {
+//   children: React.ReactNode;
+//   attribute?: NextThemesProviderProps["attribute"];
+//   defaultTheme?: NextThemesProviderProps["defaultTheme"];
+//   enableSystem?: NextThemesProviderProps["enableSystem"];
+//   disableTransitionOnChange?: NextThemesProviderProps["disableTransitionOnChange"];
+// }
+
+// export function ThemeProvider({
+//   children,
+//   attribute = "class",
+//   defaultTheme = "system",
+//   enableSystem = true,
+//   disableTransitionOnChange = false,
+// }: ThemeProviderProps) {
+//   return (
+//     <NextThemesProvider
+//       attribute={attribute}
+//       defaultTheme={defaultTheme}
+//       enableSystem={enableSystem}
+//       disableTransitionOnChange={disableTransitionOnChange}
+//     >
+//       {children}
+//     </NextThemesProvider>
+//   );
+// }

package/dist/kits/blocks/components/ui/alert-dialog.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "@/lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", className)}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col space-y-1 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      "bg-destructive text-destructive-foreground inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow transition-colors hover:opacity-90 focus:outline-none",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      "bg-background hover:bg-muted inline-flex h-9 items-center justify-center rounded-md border px-4 text-sm font-medium shadow focus:outline-none",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/dist/kits/blocks/components/ui/brand-node.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+import type { ComponentType } from "react";
+import { Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface BrandNodeProps {
+  /** Optional wrapper className to override size/colors (merged with defaults) */
+  className?: string;
+}
+
+export interface BrandNodeIconBadgeProps extends BrandNodeProps {
+  /** Icon component to render inside the badge */
+  icon?: ComponentType<{ className?: string }>;
+  /** Tailwind classes to control icon size; default `h-4 w-4` */
+  iconClassName?: string;
+}
+
+export function BrandNodeIconBadge({
+  className,
+  icon: Icon = Sparkles,
+  iconClassName = "h-4 w-4",
+}: BrandNodeIconBadgeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-primary/10 ring-1 ring-primary/30 text-primary";
+  return (
+    <div className={cn(base, className)} aria-label="Brand icon badge">
+      <Icon className={iconClassName} />
+    </div>
+  );
+}
+
+export interface BrandNodeGradientRingProps extends BrandNodeProps {
+  /** CSS conic-gradient string; provide two or more colors */
+  gradient?: string;
+  /** Inner fill background (center disc) */
+  innerBgClassName?: string;
+}
+
+export function BrandNodeGradientRing({
+  className,
+  gradient = "conic-gradient(hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)))",
+  innerBgClassName = "h-full w-full rounded-full bg-background",
+}: BrandNodeGradientRingProps) {
+  const base = "relative h-8 w-8";
+  return (
+    <div className={cn(base, className)} aria-label="Brand gradient ring">
+      <div className="absolute inset-0 rounded-full p-[2px]" style={{ background: gradient }}>
+        <div className={innerBgClassName} />
+      </div>
+    </div>
+  );
+}
+
+export function BrandNodeGeometricMark({ className }: BrandNodeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-gradient-to-br from-primary/10 to-accent/10 ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand geometric mark">
+      <svg viewBox="0 0 24 24" className="fill-primary h-4 w-4">
+        <path d="M12 4l8 14H4l8-14z" />
+      </svg>
+    </div>
+  );
+}
+
+export interface BrandNodeEmojiBadgeProps extends BrandNodeProps {
+  emoji?: string;
+}
+
+export function BrandNodeEmojiBadge({ className, emoji = "⚡" }: BrandNodeEmojiBadgeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-card/60 backdrop-blur ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand emoji badge">
+      <span className="text-base" aria-hidden>
+        {emoji}
+      </span>
+    </div>
+  );
+}
+
+export interface BrandNodeDiagonalAppIconProps extends BrandNodeProps {
+  /** Base and overlay colors */
+  baseColorClass?: string;
+  overlayColorClass?: string;
+}
+
+export function BrandNodeDiagonalAppIcon({
+  className,
+  baseColorClass = "bg-primary",
+  overlayColorClass = "bg-accent",
+}: BrandNodeDiagonalAppIconProps) {
+  const base = "relative h-8 w-8 overflow-hidden rounded-md ring-1 ring-black/5 dark:ring-white/10";
+  return (
+    <div className={cn(base, className)} aria-label="Brand diagonal app icon">
+      <div className={cn("absolute inset-0", baseColorClass)} />
+      <div className={cn("absolute inset-0 translate-y-1/3 -skew-y-12", overlayColorClass)} />
+    </div>
+  );
+}
+
+export function BrandNodeCubeOutline({ className }: BrandNodeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-foreground text-background ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand cube outline">
+      <svg viewBox="0 0 24 24" className="h-4 w-4">
+        <path d="M12 2l8 4.5v9L12 20 4 15.5v-9L12 2z" fill="none" stroke="currentColor" strokeWidth="1.6" />
+        <path d="M12 20v-9M4 6l8 5 8-5" fill="none" stroke="currentColor" strokeWidth="1.6" />
+      </svg>
+    </div>
+  );
+}
+
+/** Registry for quick swapping by name */
+export const BrandNodes = {
+  IconBadge: BrandNodeIconBadge,
+  GradientRing: BrandNodeGradientRing,
+  GeometricMark: BrandNodeGeometricMark,
+  EmojiBadge: BrandNodeEmojiBadge,
+  DiagonalAppIcon: BrandNodeDiagonalAppIcon,
+  CubeOutline: BrandNodeCubeOutline,
+};

package/dist/kits/blocks/components/ui/button.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 shadow-xs",
+        outline:
+          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    /** When true, bypasses tokenized buttonVariants so callers fully control classes */
+    unstyled?: boolean;
+    /** Opt-in: force inline CSS var styles for color/bg/border/ring */
+    forceInlineVars?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      unstyled = false,
+      forceInlineVars = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    // Use caller-provided style; only inject inline var-driven colors when explicitly requested
+    const incomingStyle =
+      (props.style as React.CSSProperties | undefined) ?? undefined;
+    const finalStyle =
+      forceInlineVars && !unstyled
+        ? {
+            ...incomingStyle,
+            color: "var(--btn-fg)",
+            backgroundColor: "var(--btn-bg)",
+            borderColor: "var(--btn-border)",
+            "--tw-ring-color": "var(--btn-ring)",
+          }
+        : incomingStyle;
+
+    // Only enable CSS variable hooks when explicitly requested via inline vars
+    // or when the caller sets any [--btn-*] classes in className.
+    const wantsVarHooks =
+      !unstyled &&
+      (forceInlineVars ||
+        (typeof className === "string" && className.includes("[--btn-")));
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={
+          unstyled
+            ? cn(
+                "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
+                className,
+              )
+            : cn(
+                buttonVariants({ variant, size }),
+                wantsVarHooks && [
+                  // Color var hooks (apply only when CSS vars are provided)
+                  "text-[var(--btn-fg)]",
+                  "bg-[var(--btn-bg)]",
+                  "hover:bg-[var(--btn-hover-bg)]",
+                  "hover:text-[var(--btn-hover-fg)]",
+                  // explicit dark variants to compete with dark: utilities from variants like outline
+                  "dark:bg-[var(--btn-bg)]",
+                  "dark:hover:bg-[var(--btn-hover-bg)]",
+                  "dark:hover:text-[var(--btn-hover-fg)]",
+                  // Focus ring and border hooks
+                  "focus-visible:ring-[var(--btn-ring)]",
+                  "border-[var(--btn-border)]",
+                  "dark:border-[var(--btn-border)]",
+                ],
+                className,
+              )
+        }
+        style={finalStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/kits/blocks/components/ui/button_bck.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+        destructive:
+          "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+        outline:
+          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  unstyled = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    /** When true, bypasses tokenized buttonVariants so callers fully control classes */
+    unstyled?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={
+        unstyled
+          ? cn(
+              "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
+              className,
+            )
+          : cn(
+              buttonVariants({ variant, size }),
+              // Color var hooks (ignored when vars are unset; tokens from variants apply)
+              "text-[var(--btn-fg)]",
+              "bg-[var(--btn-bg)]",
+              "hover:bg-[var(--btn-hover-bg)]",
+              "hover:text-[var(--btn-hover-fg)]",
+              // explicit dark variants to compete with dark: utilities from variants like outline
+              "dark:bg-[var(--btn-bg)]",
+              "dark:hover:bg-[var(--btn-hover-bg)]",
+              "dark:hover:text-[var(--btn-hover-fg)]",
+              // Focus ring and border hooks
+              "focus-visible:ring-[var(--btn-ring)]",
+              "border-[var(--btn-border)]",
+              "dark:border-[var(--btn-border)]",
+              className,
+            )
+      }
+      style={{
+        ...(props.style as React.CSSProperties),
+        color: "var(--btn-fg)",
+        backgroundColor: "var(--btn-bg)",
+        borderColor: "var(--btn-border)",
+        // @ts-expect-error custom CSS var for Tailwind ring color
+        "--tw-ring-color": "var(--btn-ring)",
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };