feat: add new separator component and fix typo in status banner message

- Add a new separator component to the kit-headless package.

- Fix a typo in the status banner message, changing "Production Readty" to "Production Ready".

Author: NexonTreeHouse

apps/website/src/routes/docs/_components/status-banner/status-banner.tsx

@@ -17,7 +17,7 @@ function getMessageByStatus(status?: ComponentStatus) {
     case ComponentStatus.Ready:
       return (
         <>
-          This component is <strong>Production Readty</strong>
+          This component is <strong>Production Ready</strong>
         </>
       );
     case ComponentStatus.Beta:

packages/kit-headless/src/components/separator/separator.tsx

@@ -0,0 +1,57 @@
+import { component$, HTMLAttributes, useComputed$ } from '@builder.io/qwik';
+
+const ORIENTATIONS = ['horizontal', 'vertical'] as const;
+
+type Orientation = (typeof ORIENTATIONS)[number];
+
+export interface SeparatorProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  orientation?: Orientation;
+  /**
+   * If true, accessibility-related attributes
+   * are updated so that that the element is not included in the accessibility tree.
+   */
+  decorative?: boolean;
+}
+
+export const Separator = component$(
+  ({
+    orientation: orientationProp = 'horizontal',
+    decorative,
+    ...props
+  }: SeparatorProps) => {
+    const orientation = useComputed$(() => {
+      if (ORIENTATIONS.includes(orientationProp)) {
+        return orientationProp;
+      }
+
+      console.warn(
+        `Invalid prop 'orientation' of value '${orientationProp}' supplied to 'separator',
+        expected one of:
+        - horizontal
+        - vertical
+
+        Defaulting to 'horizontal'.`
+      );
+      return 'horizontal';
+    });
+
+    // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+    const ariaOrientation = useComputed$(() =>
+      orientation.value === 'vertical' ? orientation : undefined
+    );
+
+    const semanticProps = useComputed$(() =>
+      decorative
+        ? { role: 'none' }
+        : {
+            role: 'separator',
+            'aria-orientation': ariaOrientation
+          }
+    );
+
+    return <div data-orientation={orientation} {...semanticProps} {...props} />;
+  }
+);

packages/kit-headless/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/tooltip/tooltip';
 export * as Checkbox from './components/checkbox/checkbox';
 export * as CheckboxProps from './components/checkbox/checkbox';
 export * from './components/select';
+export * from './components/separator/separator';
 export * from './components/slider';
 export * from './components/breadcrumb';
 export * from './components/navigation-bar/navigation-bar';