feat(fluffy): added more variants to button

Author: shairez

apps/website/src/routes/docs/headless/(components)/button/index.tsx

@@ -1,14 +1,14 @@
-import { $, component$, useStyles$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/primitives';
 import styles from './index.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
 
   return (
-    <div class="flex flex-col gap-8 mt-4">
+    <div class="mt-4 flex flex-col gap-8">
       <h2>This is the documentation for the Button</h2>
-      <div class="flex flex-col gap-8 mt-4">
+      <div class="mt-4 flex flex-col gap-8">
         <div>
           <h2>Basic Example</h2>
           <Button>SIMPLE BUTTON</Button>
@@ -29,7 +29,7 @@ export default component$(() => {
 
         <div>
           <h2>Events</h2>
-          <Button onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
+          <Button onClick$={() => window.alert('hello')}>SHOW ALERT</Button>
         </div>
       </div>
     </div>

packages/kit-fluffy/src/components/button/button.tsx

@@ -21,15 +21,22 @@
       * INTENT
         * Primary
         * Secondary
-        * Danger / Destructive
+        * Accent
+        * Danger / Destructive / Error
+        * Success
+        * Warning
+        * Info
+        
+      STATE: 
+        * Active
+        * Disabled
+        
       * LOOK
         * Outline 
         * Ghost
         * Link
-        
-      * STATE
-        * Active
-        * Disabled
+
+
     
     DOCS EXAMPLES:
     * with Icon
@@ -55,14 +62,25 @@ export const buttonVariants = cva(
       intent: {
         primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        link: 'text-primary underline-offset-4 hover:underline',
+        danger: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
       },
       look: {
+        link: 'text-primary underline-offset-4 hover:underline',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         outline:
           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
       },
+      shape: {
+        rounded: '',
+        circular: '',
+        square: '',
+      },
+      state: {
+        enabled: '',
+        active: '',
+        disabled: '',
+      },
+      animation: {},
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
@@ -71,6 +89,7 @@ export const buttonVariants = cva(
       },
     },
     defaultVariants: {
+      state: 'enabled',
       intent: 'primary',
       size: 'default',
     },