@tollerud/ui 1.0.6 → 1.0.8

package/dist/index.d.cts

@@ -22,10 +22,17 @@ declare const sizes: {
     readonly md: "px-4 py-2 text-base";
     readonly lg: "px-6 py-3 text-lg";
 };
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonVariantProps {
     variant?: keyof typeof variants;
     size?: keyof typeof sizes;
 }
+declare function buttonVariants({ variant, size, className }?: ButtonVariantProps & {
+    className?: string;
+}): string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantProps {
+    /** Render as the single child element (e.g. a `<Link>`) instead of a `<button>`, merging props and styles onto it. */
+    asChild?: boolean;
+}
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const toneStyles: {
@@ -700,4 +707,4 @@ interface BentoDashboardProps {
 }
 declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react.JSX.Element;
 
-export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };
+export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, type ButtonVariantProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn };

package/dist/index.d.ts

@@ -22,10 +22,17 @@ declare const sizes: {
     readonly md: "px-4 py-2 text-base";
     readonly lg: "px-6 py-3 text-lg";
 };
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonVariantProps {
     variant?: keyof typeof variants;
     size?: keyof typeof sizes;
 }
+declare function buttonVariants({ variant, size, className }?: ButtonVariantProps & {
+    className?: string;
+}): string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantProps {
+    /** Render as the single child element (e.g. a `<Link>`) instead of a `<button>`, merging props and styles onto it. */
+    asChild?: boolean;
+}
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const toneStyles: {
@@ -700,4 +707,4 @@ interface BentoDashboardProps {
 }
 declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react.JSX.Element;
 
-export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };
+export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, type ButtonVariantProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn };

package/dist/index.js

@@ -1,7 +1,9 @@
+'use client';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React2 from 'react';
 import { forwardRef, useState, useCallback, lazy, useRef, useEffect, useMemo, useId, Suspense } from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -28,20 +30,24 @@ var sizes = {
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
 };
+function buttonVariants({ variant = "secondary", size = "md", className } = {}) {
+  return cn(
+    "inline-flex items-center justify-center gap-2 font-semibold rounded transition-all duration-[150ms] focus-visible:outline-2 focus-visible:outline-tollerud-yellow focus-visible:outline-offset-2",
+    "border cursor-pointer",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    variants[variant],
+    sizes[size],
+    className
+  );
+}
 var Button = forwardRef(
-  ({ className, variant = "secondary", size = "md", ...props }, ref) => {
+  ({ className, variant = "secondary", size = "md", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
-      "button",
+      Comp,
       {
         ref,
-        className: cn(
-          "inline-flex items-center justify-center gap-2 font-semibold rounded transition-all duration-[150ms] focus-visible:outline-2 focus-visible:outline-tollerud-yellow focus-visible:outline-offset-2",
-          "border cursor-pointer",
-          "disabled:opacity-50 disabled:pointer-events-none",
-          variants[variant],
-          sizes[size],
-          className
-        ),
+        className: buttonVariants({ variant, size, className }),
         ...props
       }
     );
@@ -2645,6 +2651,6 @@ function MetricBadge({ label, value }) {
   ] });
 }
 
-export { ActionDiff, ActionRow, Alert, AlertInbox, ApprovalCard, BackupStatusPanel, Badge, BentoDashboard, Button, Card, Checkbox, CodeBlock, CommandMenu, Container, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, GlowCard, HostCard, IncidentCard, Input, Kbd, LogViewer, NoirGlowBackground, Progress, Radio, RadioGroup, RollbackPlan, Select, ServiceHealthCard, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, StatusDot, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Timeline, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };
+export { ActionDiff, ActionRow, Alert, AlertInbox, ApprovalCard, BackupStatusPanel, Badge, BentoDashboard, Button, Card, Checkbox, CodeBlock, CommandMenu, Container, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, GlowCard, HostCard, IncidentCard, Input, Kbd, LogViewer, NoirGlowBackground, Progress, Radio, RadioGroup, RollbackPlan, Select, ServiceHealthCard, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, StatusDot, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Timeline, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map