feat: widgets and ai chat

packages/ui/src/custom/icon-button/icon-button.svelte

@@ -1,21 +1,31 @@
 <script lang="ts">
-  import { Button, type ButtonProps } from '../../base/button';
+  import { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from '../../base/button';
   import { Tooltip, Provider, Trigger, Content } from '../../base/tooltip';
 
   interface Props extends Omit<ButtonProps, 'variant' | 'size'> {
     tooltip?: string;
     tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
     tooltipClass?: string;
+    variant?: ButtonVariant;
+    size?: Extract<ButtonSize, 'icon' | 'icon-2xs' | 'icon-xs' | 'icon-sm' | 'icon-lg'>;
   }
 
-  let { tooltip, tooltipSide = 'top', tooltipClass = '', children, ...buttonProps }: Props = $props();
+  let {
+    tooltip,
+    tooltipSide = 'top',
+    tooltipClass = '',
+    variant = 'secondary',
+    size = 'icon',
+    children,
+    ...buttonProps
+  }: Props = $props();
 </script>
 
 {#if tooltip}
   <Provider>
     <Tooltip>
       <Trigger class={tooltipClass}>
-        <Button variant="secondary" size="icon" {...buttonProps}>
+        <Button {variant} {size} {...buttonProps}>
           {@render children?.()}
         </Button>
       </Trigger>
@@ -25,7 +35,7 @@
     </Tooltip>
   </Provider>
 {:else}
-  <Button variant="secondary" size="icon" {...buttonProps}>
+  <Button {variant} {size} {...buttonProps}>
     {@render children?.()}
   </Button>
 {/if}