feat(website): add Spoiler ui component

Author: ZAHON

apps/website/src/ui/spoiler/index.ts

@@ -0,0 +1 @@
+export * as Spoiler from './spoiler';

apps/website/src/ui/spoiler/spoiler-content/index.ts

@@ -0,0 +1,2 @@
+export type { SpoilerContentProps } from './spoiler-content.types';
+export { SpoilerContent } from './spoiler-content';

apps/website/src/ui/spoiler/spoiler-content/spoiler-content.tsx

@@ -0,0 +1,16 @@
+import type { SpoilerContentProps } from './spoiler-content.types';
+import { component$, Slot } from '@builder.io/qwik';
+import { Spoiler } from 'qwik-primitives';
+
+/**
+ * The component that contains the spoiler content.
+ * Must be rendered inside `Spoiler.Panel`.
+ * This component is based on the `div` element.
+ */
+export const SpoilerContent = component$<SpoilerContentProps>((props) => {
+  return (
+    <Spoiler.Content {...props}>
+      <Slot />
+    </Spoiler.Content>
+  );
+});

apps/website/src/ui/spoiler/spoiler-content/spoiler-content.types.ts

@@ -0,0 +1,20 @@
+import type { PropsOf, FunctionComponent, CSSProperties } from '@builder.io/qwik';
+
+export interface SpoilerContentProps 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;
+
+  /**
+   * The CSS class for the element.
+   */
+  class?: string;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

apps/website/src/ui/spoiler/spoiler-panel/index.ts

@@ -0,0 +1,2 @@
+export type { SpoilerPanelProps } from './spoiler-panel.types';
+export { SpoilerPanel } from './spoiler-panel';

apps/website/src/ui/spoiler/spoiler-panel/spoiler-panel.styles.ts

@@ -0,0 +1,6 @@
+import { cva } from 'class-variance-authority';
+
+export const spoilerPanelStyles = cva([
+  'motion-safe:data-[state=open]:animate-spoiler-panel-down',
+  'motion-safe:data-[state=closed]:animate-spoiler-panel-up',
+]);

apps/website/src/ui/spoiler/spoiler-panel/spoiler-panel.tsx

@@ -0,0 +1,19 @@
+import type { SpoilerPanelProps } from './spoiler-panel.types';
+import { component$, Slot } from '@builder.io/qwik';
+import { Spoiler } from 'qwik-primitives';
+import { twm } from '@/utilities/twm';
+import { spoilerPanelStyles } from './spoiler-panel.styles';
+
+/**
+ * The panel that expands/collapses.
+ * This component is based on the `div` element.
+ */
+export const SpoilerPanel = component$<SpoilerPanelProps>((props) => {
+  const { class: className, ...others } = props;
+
+  return (
+    <Spoiler.Panel class={twm(spoilerPanelStyles(), className)} {...others}>
+      <Slot />
+    </Spoiler.Panel>
+  );
+});

apps/website/src/ui/spoiler/spoiler-panel/spoiler-panel.types.ts

@@ -0,0 +1,38 @@
+import type { PropsOf, FunctionComponent, QRL, CSSProperties } from '@builder.io/qwik';
+
+export interface SpoilerPanelProps 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;
+
+  /**
+   * The minimum height of the panel when spolier is closed.
+   * @default "0px"
+   */
+  minHeight?: string;
+
+  /**
+   * Event handler called when the panel is fully open.
+   * If you animate the size of the panel when it opens this event handler was call after animation end.
+   */
+  onOpen$?: QRL<() => void>;
+
+  /**
+   * Event handler called when the panel is fully close.
+   * If you animate the size of the panel when it closes this event handler was call after animation end.
+   */
+  onClose$?: QRL<() => void>;
+
+  /**
+   * The CSS class for the element.
+   */
+  class?: string;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

apps/website/src/ui/spoiler/spoiler-root/index.ts

@@ -0,0 +1,2 @@
+export type { SpoilerRootProps } from './spoiler-root.types';
+export { SpoilerRoot } from './spoiler-root';

apps/website/src/ui/spoiler/spoiler-root/spoiler-root.tsx

@@ -0,0 +1,15 @@
+import type { SpoilerRootProps } from './spoiler-root.types';
+import { component$, Slot } from '@builder.io/qwik';
+import { Spoiler } from 'qwik-primitives';
+
+/**
+ * Contains all the parts of a spoiler.
+ * This component is based on the `div` element.
+ */
+export const SpoilerRoot = component$<SpoilerRootProps>((props) => {
+  return (
+    <Spoiler.Root {...props}>
+      <Slot />
+    </Spoiler.Root>
+  );
+});