docs(fluffy): updated all components

Author: shairez

apps/website/src/_state/component-statuses.ts

@@ -20,7 +20,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Card: ComponentStatus.Planned,
     Carousel: ComponentStatus.Planned,
     Checkbox: ComponentStatus.Planned,
-    Collapse: ComponentStatus.Planned,
+    Combobox: ComponentStatus.Planned,
     Drawer: ComponentStatus.Planned,
     Input: ComponentStatus.Planned,
     'Input Phone': ComponentStatus.Planned,

apps/website/src/root.tsx

@@ -32,7 +32,7 @@ export default component$(() => {
     mode: 'light',
     isSidebarOpened: false,
     featureFlags: {
-      showFluffy: import.meta.env.DEV,
+      showFluffy: true, //import.meta.env.DEV
     },
   });
 

apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx

@@ -12,7 +12,7 @@ export function getClassByStatus(status: ComponentStatus) {
     case ComponentStatus.Ready:
       return 'text-green-900 bg-green-300 tracking-wide';
     case ComponentStatus.Beta:
-      return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-beta';
+      return 'dark:text-slate-100 dark:bg-qwikui-purple-600 bg-qwikui-blue-600 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-beta';
     case ComponentStatus.Draft:
       return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';
     case ComponentStatus.Planned:

apps/website/src/routes/docs/fluffy/(components)/accordion/examples.tsx

@@ -1,151 +1,12 @@
 ---
-title: Qwik UI | Accordion
+title: Qwik UI | Fluffy Accordion Component
 ---
 
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionContent,
-  AccordionTrigger,
-  Checkbox,
-} from '@qwik-ui/headless';
-import { Example01, Example02 } from './examples';
-import { CodeExample } from '../../../_components/code-example/code-example';
-import { KeyboardInteractionTable } from '../../../_components/keyboard-interaction-table/keyboard-interaction-table';
-import { APITable } from '../../../_components/api-table/api-table';
+import {StatusBanner, statusByComponent} from '../exports';
 
 # Accordion
 
-#### A vertically stacked set of interactive headings which reveal or hide their associated content.
-
-{' '}
-
-<Example01>
-  ```tsx
-  <Accordion>
-    <AccordionItem label="Heading 1">
-      <div class="p-2">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
-          aliquid architecto delectus deleniti dolor
-        </p>
-      </div>
-    </AccordionItem>
-    <AccordionItem label="Heading 2">
-      <div class="p-2">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
-          aliquid architecto delectus deleniti dolor
-        </p>
-      </div>
-    </AccordionItem>
-  </Accordion>
-  ```
-</Example01>
-
-## Building blocks
-
-  <CodeExample>
-    ```tsx
-    import { component$ } from '@builder.io/qwik';
-    import { Accordion, AccordionItem } from '@qwik-ui/tailwind';
-
-    export default component$(() => (
-      <Accordion>
-        <AccordionItem>Content</AccordionItem>
-      </Accordion>
-    ));
-    ```
-
-  </CodeExample>
-
-## Examples
-
-### EXAMPLE: with disabled item
-
-<Example02>
-  ```tsx
-  <Accordion>
-    <AccordionItem label="Heading 1">
-      <div class="p-2">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
-          aliquid architecto delectus deleniti dolor
-        </p>
-      </div>
-    </AccordionItem>
-    <AccordionItem label="Heading 2 - Disabled" disabled>
-      <div class="p-2">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
-          aliquid architecto delectus deleniti dolor
-        </p>
-      </div>
-    </AccordionItem>
-  </Accordion>
-  ```
-</Example02>
-
-## Accessibility
-
-### Keyboard interaction
-
-<KeyboardInteractionTable keyDescriptors={
-  [
-    {
-      keyTitle: 'Space',
-      description: 'Expand or collapse the `AccordionItem`.',
-    },
-    {
-      keyTitle: 'Enter',
-      description: 'Expand or collapse the `AccordionItem`.',
-    },
-    {
-      keyTitle: 'Tab',
-      description: 'Moves focus to the next focusable element.',
-    },
-    {
-      keyTitle: 'Shift + Tab',
-      description: 'Moves focus to the previous focusable element.',
-    },
-    {
-      keyTitle: 'Home',
-      description: 'When on `AccordionItem`, Moves focus to the first `AccordionItem`.',
-    },
-    {
-      keyTitle: 'End',
-      description: 'When on `AccordionItem`, Moves focus to the last `AccordionItem`.',
-    },
-
-]
-}/>
-
-## API
-
-### AccordionItem
-
-<APITable
-  propDescriptors={[
-    {
-      name: 'class',
-      type: 'string',
-      description: 'CSS classes to apply to the accordion container.',
-    },
-    {
-      name: 'style',
-      type: 'string',
-      description: 'CSS styles to apply to the accordion container.',
-    },
-    {
-      name: 'label',
-      type: 'string',
-      description: 'The label to give to the accordion item.',
-    },
-    {
-      name: 'onClick$',
-      info: 'PropFunction<() => void>',
-      type: 'function',
-      description: 'A custom click handler',
-    },
-  ]}
-/>
+A vertically stacked set of beautifully interactive headings which like to play "hard to get" by revealing or hiding their associated content.
+<br/>
+<StatusBanner status={statusByComponent.fluffy.Accordion}/> 
+ 

apps/website/src/routes/docs/fluffy/(components)/accordion/exports.ts

@@ -0,0 +1,12 @@
+---
+title: Qwik UI | Fluffy Alert Component
+---
+
+import {StatusBanner, statusByComponent} from '../exports';
+
+# Alert
+
+In a digital landscape of gentle nudges, the Fluffy alert pops with a playful flair, ensuring every crucial whisper finds its audience effortlessly.
+<br/>
+<StatusBanner status={statusByComponent.fluffy.Alert}/> 
+