feat(website): add Tabs ui qwik component

Author: ZAHON

apps/website/src/ui/qwik/tabs/index.ts

@@ -0,0 +1 @@
+export * as Tabs from './tabs';

apps/website/src/ui/qwik/tabs/tabs-content/index.ts

@@ -0,0 +1,2 @@
+export type { TabsContentProps } from './tabs-content.types';
+export { TabsContent } from './tabs-content';

apps/website/src/ui/qwik/tabs/tabs-content/tabs-content.styles.ts

@@ -0,0 +1,8 @@
+import { cva } from 'class-variance-authority';
+
+export const tabsContentStyles = cva([
+  'focus:outline-none',
+  'focus-visible:outline',
+  'focus-visible:outline-2',
+  'focus-visible:outline-primary-focus',
+]);

apps/website/src/ui/qwik/tabs/tabs-content/tabs-content.tsx

@@ -0,0 +1,15 @@
+import type { TabsContentProps } from './tabs-content.types';
+import { component$, Slot } from '@builder.io/qwik';
+import { Tabs } from 'qwik-primitives';
+import { twm } from '@/utilities/twm';
+import { tabsContentStyles } from './tabs-content.styles';
+
+export const TabsContent = component$<TabsContentProps>((props) => {
+  const { class: className, ...others } = props;
+
+  return (
+    <Tabs.Content class={twm(tabsContentStyles(), className)} {...others}>
+      <Slot />
+    </Tabs.Content>
+  );
+});

apps/website/src/ui/qwik/tabs/tabs-content/tabs-content.types.ts

@@ -0,0 +1,25 @@
+import type { PropsOf, FunctionComponent, CSSProperties } from '@builder.io/qwik';
+
+export interface TabsContentProps extends PropsOf<'div'> {
+  /**
+   * Change the default rendered element for the one passed as, merging their props and behavior.
+   *
+   * Read our [Composition](https://github.com/ZAHON/qwik-primitives/blob/main/packages/primitives/docs/composition.md) guide for more details.
+   */
+  as?: FunctionComponent;
+
+  /**
+   * A unique value that associates the content with a trigger.
+   */
+  value: string;
+
+  /**
+   * The CSS class for the element.
+   */
+  class?: string;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

apps/website/src/ui/qwik/tabs/tabs-context/index.ts

@@ -0,0 +1,2 @@
+export type { TabsContextValue } from './tabs-context.types';
+export { TabsContext } from './tabs-context';

apps/website/src/ui/qwik/tabs/tabs-context/tabs-context.tsx

@@ -0,0 +1,4 @@
+import type { TabsContextValue } from './tabs-context.types';
+import { createContextId } from '@builder.io/qwik';
+
+export const TabsContext = createContextId<TabsContextValue>('tabs-context');

apps/website/src/ui/qwik/tabs/tabs-context/tabs-context.types.ts

@@ -0,0 +1,16 @@
+export interface TabsContextValue {
+  /**
+   * The size of the tabs.
+   */
+  size: '1' | '2';
+
+  /**
+   * The color of the tabs.
+   */
+  color: 'default' | 'primary';
+
+  /**
+   * Uses a higher contrast color for the tabs.
+   */
+  highContrast: boolean;
+}

apps/website/src/ui/qwik/tabs/tabs-list/index.ts

@@ -0,0 +1,2 @@
+export type { TabsListProps } from './tabs-list.types';
+export { TabsList } from './tabs-list';

apps/website/src/ui/qwik/tabs/tabs-list/tabs-list.styles.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export const tabsListStyles = cva([
+  'flex',
+  'justify-start',
+  'whitespace-nowrap',
+  'border-b',
+  'border-default-6',
+
+  'focus:outline-none',
+  'focus-visible:outline',
+  'focus-visible:outline-2',
+  'focus-visible:outline-primary-focus',
+]);