sparkdesign 0.0.1 → 0.2.6

package/cli/registry/basic/collapsible-card.tsx

@@ -0,0 +1,230 @@
+import { useState, useRef, useLayoutEffect, type ReactNode } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { ArrowDownSLine } from './icons-inline'
+
+export interface CollapsibleCardProps {
+  headerIcon?: ReactNode
+  headerTitle: ReactNode
+  headerRight?: ReactNode
+  children?: ReactNode
+  defaultExpanded?: boolean
+  /** CSS padding 如 '6px 8px'，或 Tailwind 类 */
+  contentPadding?: string
+  onToggle?: (expanded: boolean) => void
+  collapsible?: boolean
+  footer?: ReactNode
+  contentMaxHeight?: number
+  /** 是否启用内容区底部展开/收起栏：内容高度超过 maxHeight 时显示，点击切换全部展开或收起 */
+  showExpandAllBar?: boolean
+  /** showExpandAllBar 为 true 时，未展开全部时的内容区最大高度（px） */
+  maxHeight?: number
+  titleShimmer?: boolean
+  className?: string
+}
+
+const DEFAULT_MAX_HEIGHT = 124
+
+export function CollapsibleCard({
+  headerIcon,
+  headerTitle,
+  headerRight,
+  children,
+  defaultExpanded = true,
+  contentPadding = 'var(--spacing-1\.5) var(--spacing-2)',
+  onToggle,
+  collapsible = true,
+  footer,
+  contentMaxHeight,
+  showExpandAllBar = false,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  titleShimmer = false,
+  className,
+}: CollapsibleCardProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
+  const [isHovered, setIsHovered] = useState(false)
+  const [expandAll, setExpandAll] = useState(false)
+  const [shouldShowBar, setShouldShowBar] = useState(false)
+  const [contentHeight, setContentHeight] = useState(0)
+  const [isMeasuring, setIsMeasuring] = useState(showExpandAllBar && defaultExpanded)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const measureRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (!showExpandAllBar || !isExpanded) {
+      setShouldShowBar(false)
+      setContentHeight(0)
+      setIsMeasuring(false)
+      return
+    }
+    setIsMeasuring(true)
+    const checkHeight = () => {
+      const el = measureRef.current
+      if (!el) return
+      const actualHeight = el.scrollHeight
+      setContentHeight(actualHeight)
+      setShouldShowBar(actualHeight > maxHeight)
+      setIsMeasuring(false)
+    }
+    const raf = requestAnimationFrame(checkHeight)
+    let resizeObserver: ResizeObserver | null = null
+    if (measureRef.current) {
+      resizeObserver = new ResizeObserver(checkHeight)
+      resizeObserver.observe(measureRef.current)
+    }
+    return () => {
+      cancelAnimationFrame(raf)
+      resizeObserver?.disconnect()
+    }
+  }, [showExpandAllBar, isExpanded, children, maxHeight])
+
+  const handleToggle = () => {
+    if (!collapsible) return
+    const next = !isExpanded
+    setIsAnimating(true)
+    if (next && showExpandAllBar) setIsMeasuring(true)
+    setIsExpanded(next)
+    onToggle?.(next)
+    setTimeout(() => setIsAnimating(false), 300)
+  }
+
+  const showArrow = collapsible && (isHovered || headerIcon == null)
+  const headerIconNode = showArrow
+    ? <ArrowDownSLine className={cn('w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 transition-transform duration-200 text-text-secondary', isExpanded ? 'rotate-0' : '-rotate-90')} />
+    : headerIcon
+
+  const useExpandAllLogic = showExpandAllBar && isExpanded && !contentMaxHeight
+  const contentClamped = useExpandAllLogic && (isMeasuring || (shouldShowBar && !expandAll) || isAnimating || (!shouldShowBar && contentHeight === 0))
+  const contentMaxHeightStyle =
+    contentMaxHeight != null
+      ? `${contentMaxHeight}px`
+      : contentClamped
+        ? `${maxHeight}px`
+        : useExpandAllLogic && shouldShowBar && expandAll && contentHeight > 0
+          ? `${Math.max(contentHeight + 50, 2000)}px`
+          : undefined
+
+  return (
+    <div
+      className={cn(
+        'rounded-md overflow-hidden border border-border-tertiary bg-fill-tertiary relative',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex flex-row items-center gap-2 px-2 py-1.5 select-none',
+          isExpanded && 'border-b border-border-tertiary'
+        )}
+        onMouseEnter={() => collapsible && setIsHovered(true)}
+        onMouseLeave={() => collapsible && setIsHovered(false)}
+      >
+        <div
+          className={cn('flex flex-row items-center gap-2 flex-1 min-w-0', collapsible && 'cursor-pointer')}
+          onClick={handleToggle}
+          role={collapsible ? 'button' : undefined}
+          aria-expanded={collapsible ? isExpanded : undefined}
+        >
+          <div className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] flex items-center justify-center shrink-0 text-text-secondary [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
+            {headerIconNode}
+          </div>
+          <div className="min-w-0 flex-1 flex items-center text-xs leading-xs text-text-secondary">
+            {titleShimmer ? (
+              <span className="animate-pulse">{headerTitle}</span>
+            ) : (
+              headerTitle
+            )}
+          </div>
+        </div>
+        {headerRight != null && (
+          <div
+            className="flex items-center gap-1.5 shrink-0 relative z-10"
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            {headerRight}
+          </div>
+        )}
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.2, 0.8, 0.2, 1] }}
+            className={cn('overflow-hidden', isAnimating && 'select-none')}
+          >
+            {/* 隐藏测量用，用于获取内容实际高度 */}
+            {useExpandAllLogic && (
+              <div
+                ref={measureRef}
+                className="absolute invisible h-auto w-full pointer-events-none"
+                style={{ padding: contentPadding }}
+                aria-hidden
+              >
+                {children}
+              </div>
+            )}
+          <div
+            className={cn(
+              'relative overflow-x-hidden bg-bg-base scrollbar-auto',
+              contentMaxHeight != null
+                ? 'overflow-y-auto'
+                : contentClamped
+                  ? 'overflow-y-hidden'
+                  : 'overflow-y-visible',
+              shouldShowBar && 'transition-[max-height] duration-300 ease-in-out'
+            )}
+            style={{
+              padding: contentPadding,
+              maxHeight: contentMaxHeightStyle,
+            }}
+          >
+              {children}
+              {/* 底部渐变遮罩：内容被截断且未展开全部时显示 */}
+              {useExpandAllLogic && shouldShowBar && contentHeight > maxHeight && (
+                <div
+                  className={cn(
+                    'absolute bottom-0 left-0 right-0 pointer-events-none h-[25px] bg-gradient-to-b from-transparent to-[var(--color-bg-base)] transition-opacity duration-300',
+                    expandAll ? 'opacity-0' : 'opacity-100'
+                  )}
+                />
+              )}
+            </div>
+            {/* 内容区底部展开/收起栏：仅当内容高度超过 maxHeight 时显示 */}
+            {useExpandAllLogic && shouldShowBar && (
+              <button
+                type="button"
+                className="w-full h-4 flex items-center justify-center bg-bg-base border-0 cursor-pointer text-text-secondary hover:text-text transition-colors"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIsAnimating(true)
+                  setExpandAll((prev) => !prev)
+                  setTimeout(() => setIsAnimating(false), 300)
+                }}
+                aria-label={expandAll ? '收起' : '展开全部'}
+              >
+                <ArrowDownSLine
+                  className={cn(
+                    'w-[var(--font-size-sm)] h-[var(--font-size-sm)] transition-transform duration-200',
+                    expandAll ? 'rotate-180' : 'rotate-0'
+                  )}
+                />
+              </button>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {footer != null && (
+        <div className="flex flex-row items-center gap-2 px-2 py-1.5 border-t border-border-tertiary">
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}
+
+CollapsibleCard.displayName = 'CollapsibleCard'

package/cli/registry/basic/collapsible.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { cn } from '@/lib/utils'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn('overflow-hidden', className)}
+    {...props}
+  />
+))
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/cli/registry/basic/dropdown-menu.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { ArrowRightLine, CheckLine } from './icons-inline'
+import { getThemeFromDocument } from './theme-from-document'
+
+/** 取消 outline/ring，避免与全局 *:focus-visible 冲突产生偶现 focus 环 */
+const FOCUS_RESET =
+  'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none focus-visible:!ring-0 focus-visible:outline-offset-0 focus-visible:!outline-offset-0 focus-visible:ring-offset-0 focus-visible:!ring-offset-0'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const contentClasses =
+  'min-w-32 overflow-hidden rounded-lg border border-border-tertiary bg-bg-container p-1 text-text shadow-lg z-50 outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none focus-visible:!ring-0'
+
+export interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(({ className, sideOffset = 4, children, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <DropdownMenuPrimitive.Content
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(contentClasses, className)}
+          {...props}
+        >
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+          >
+            {children}
+          </motion.div>
+        </DropdownMenuPrimitive.Content>
+      </div>
+    </DropdownMenuPrimitive.Portal>
+  )
+})
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const subTriggerVariants = cva(
+  'flex h-9 w-full cursor-pointer select-none items-center gap-2 rounded-sm px-3 text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none hover:bg-fill-secondary focus:bg-fill-secondary data-[highlighted]:bg-fill-secondary data-[state=open]:bg-fill-secondary',
+  {
+    variants: {
+      inset: { true: 'pl-8 pr-3', false: '' },
+    },
+    defaultVariants: { inset: false },
+  }
+)
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> &
+    VariantProps<typeof subTriggerVariants> & { subTriggerIcon?: React.ReactNode }
+>(({ className, inset = false, children, subTriggerIcon, ...rest }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={subTriggerVariants({ inset, className })}
+    {...rest}
+  >
+    {children}
+    <span className="ml-auto flex h-4 w-4 items-center justify-center">
+      {subTriggerIcon ?? <ArrowRightLine className="h-4 w-4" />}
+    </span>
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+export interface DropdownMenuSubContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  DropdownMenuSubContentProps
+>(({ className, sideOffset = -1, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <DropdownMenuPrimitive.SubContent
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(contentClasses, className)}
+          {...props}
+        />
+      </div>
+    </DropdownMenuPrimitive.Portal>
+  )
+})
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const itemVariants = cva(
+  'relative flex h-9 w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm px-3 text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'hover:bg-fill-secondary focus:bg-fill-secondary focus:text-text data-[highlighted]:bg-fill-secondary data-[highlighted]:text-text',
+        destructive:
+          'text-error hover:bg-error-bg focus:bg-error-bg focus:text-error data-[highlighted]:bg-error-bg data-[highlighted]:text-error',
+      },
+      inset: { true: 'pl-8 pr-3', false: '' },
+    },
+    defaultVariants: { variant: 'default', inset: false },
+  }
+)
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> &
+    VariantProps<typeof itemVariants>
+>(({ className, inset = false, variant = 'default', ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={itemVariants({ variant, inset, className })}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const itemIndicatorClasses =
+  'relative flex h-9 w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm pl-8 pr-3 text-sm outline-none transition-colors hover:bg-fill-secondary focus:bg-fill-secondary focus:text-text data-[highlighted]:bg-fill-secondary data-[highlighted]:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & { checkIcon?: React.ReactNode }
+>(({ className, children, checked, checkIcon, ...rest }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(itemIndicatorClasses, className)}
+    checked={checked}
+    {...rest}
+  >
+    <span className="absolute left-2 top-1/2 flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        {checkIcon ?? <CheckLine className="h-4 w-4" />}
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(itemIndicatorClasses, className)}
+    {...props}
+  >
+    <span className="absolute left-2 top-1/2 flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <div className="h-2 w-2 rounded-full bg-primary" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const labelVariants = cva(
+  'flex h-9 items-center px-3 text-sm font-semibold text-text-secondary',
+  {
+    variants: {
+      inset: { true: 'pl-8 pr-3', false: '' },
+    },
+    defaultVariants: { inset: false },
+  }
+)
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> &
+    VariantProps<typeof labelVariants>
+>(({ className, inset = false, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={labelVariants({ inset, className })}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('my-1 mx-1 h-px bg-border-tertiary', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest text-text-tertiary', className)}
+    {...props}
+  />
+)
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/cli/registry/basic/icon-button.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const iconButtonVariants = cva(
+  'flex-none shrink-0 inline-flex items-center justify-center box-border transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:size-full [&>*]:[&>svg]:block [&>*]:[&>svg]:leading-none',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-text-on-primary hover:bg-primary-hover',
+        secondary: 'bg-bg-highlight text-text-on-primary hover:bg-bg-highlight-hover',
+        tertiary: 'bg-fill-secondary text-text hover:bg-fill',
+        ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
+        iconOnly: 'bg-transparent text-text-secondary hover:text-text',
+      },
+      rounded: {
+        square: 'rounded',
+        pill: 'rounded-full',
+      },
+      size: {
+        sm: 'h-7 w-7 min-h-7 min-w-7 p-1.5',
+        md: 'h-9 w-9 min-h-9 min-w-9 p-1.5',
+        lg: 'h-11 w-11 min-h-11 min-w-11 p-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'secondary',
+      size: 'md',
+      rounded: 'square',
+    },
+  }
+)
+
+export interface IconButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof iconButtonVariants> {
+  icon: ReactNode
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      variant = 'secondary',
+      size = 'md',
+      rounded = 'square',
+      icon,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      className={cn(iconButtonVariants({ variant, size, rounded }), className)}
+      disabled={disabled}
+      {...props}
+    >
+      <span className="inline-flex shrink-0 size-full items-center justify-center">{icon}</span>
+    </button>
+  )
+)
+IconButton.displayName = 'IconButton'
+
+export { iconButtonVariants }