feat(styled kit): add Separator component

Author: maiieul

.changeset/pretty-vans-march.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+feat(styled kit): add Separator component

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

@@ -24,6 +24,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Popover: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
+    Textarea: ComponentStatus.Draft,
   },
   headless: {
     Accordion: ComponentStatus.Beta,

apps/website/src/global.css

@@ -1220,15 +1220,16 @@
     background-color: var(--qwikui-slate-500);
     border-radius: 0.5rem;
     background-clip: padding-box;
-    border: 0.3rem solid transparent;
+    border-left: 0.3rem solid transparent;
+    border-right: 0.3rem solid transparent;
   }
 
   *::-webkit-scrollbar-corner {
     background: transparent;
   }
 
   *::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: transparent;
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
@@ -1239,11 +1240,12 @@
   .dark *::-webkit-scrollbar-track {
     background: transparent;
     border-left: 1px solid var(--qwikui-slate-800);
+    border-right: 1px solid var(--qwikui-slate-800);
   }
 
   .code-example *::-webkit-scrollbar-track {
     background: transparent;
-    border-left: 0px;
+    border: 0px;
   }
 
   .code-example *::-webkit-scrollbar-thumb {

apps/website/src/routes/docs/styled/menu.md

@@ -20,3 +20,4 @@
 - [Popover](/docs/styled/popover)
 - [Separator](/docs/styled/separator)
 - [Tabs](/docs/styled/tabs)
+- [Textarea](/docs/styled/textarea)

apps/website/src/routes/docs/styled/textarea/examples/disabled.tsx

@@ -0,0 +1,6 @@
+import { component$ } from '@builder.io/qwik';
+import { Textarea } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return <Textarea placeholder="Type your message here." disabled />;
+});

apps/website/src/routes/docs/styled/textarea/examples/hero.tsx

@@ -0,0 +1,6 @@
+import { component$ } from '@builder.io/qwik';
+import { Textarea } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return <Textarea placeholder="Type your message here." />;
+});

apps/website/src/routes/docs/styled/textarea/examples/with-button.tsx

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Button, Textarea } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div class="grid w-full gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/textarea/examples/with-label.tsx

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Label, Textarea } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div class="grid w-full gap-1.5">
+      <Label for="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/textarea/examples/with-text.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Label, Textarea } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div class="grid w-full gap-1.5">
+      <Label for="message-2">Your Message</Label>
+      <Textarea placeholder="Type your message here." id="message-2" />
+      <p class="text-muted-foreground text-sm">
+        Your message will be copied to the support team.
+      </p>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/textarea/index.mdx

@@ -0,0 +1,47 @@
+---
+title: Qwik UI | Styled Textarea Component
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+
+<StatusBanner status={statusByComponent.styled.Textarea} />
+
+# Textarea
+
+Displays a form textarea field or a component that looks like a textarea.
+
+<Showcase name="hero" />
+
+## Installation
+
+```sh
+qwik-ui add textarea
+```
+
+## Usage
+
+```tsx
+import { Textarea } from '@/components/ui/textarea';
+```
+
+```tsx
+<Textarea />
+```
+
+## Examples
+
+### Disabled
+
+<Showcase name="disabled" vertical />
+
+### With Label
+
+<Showcase name="with-label" vertical />
+
+### With button
+
+<Showcase name="with-button" vertical />
+
+### With text
+
+<Showcase name="with-text" vertical />