Carousel

.changeset/healthy-pumpkins-repair.md

@@ -0,0 +1,11 @@
+---
+'@qwik-ui/headless': patch
+---
+
+## Carousel
+
+The carousel has been refactored from the ground up, including new features, components, and QOL updates. It is still in a draft state, and development is ongoing.
+
+## Dropdown
+
+More improvements have been made to the dropdown component, including new features, components, and QOL updates.

apps/website/src/routes/docs/headless/carousel/examples/carousel.css

@@ -1,37 +1,24 @@
-.carousel {
-  --slide-size: 100%;
-  --slide-height: 5rem;
-  height: 100%;
-  max-width: 500px;
-  overflow: hidden;
+.carousel-root {
+  width: 100%;
 }
 
-.carousel-container {
-  backface-visibility: hidden;
-  display: flex;
-  touch-action: pan-y;
-  margin-left: calc(var(--slide-spacing) * -1);
-  transition-property: transform;
-  transition-timing-function: ease;
-  overflow-x: visible;
-  padding-block: 0.5rem;
+.carousel-scroller {
+  margin-bottom: 0.5rem;
 }
 
 .carousel-slide {
-  flex: 0 0 var(--slide-size);
-  min-width: 0;
-  position: relative;
-  user-select: none;
-  transition-property: transform;
   border: 2px dotted hsl(var(--primary));
-  pointer-events: none;
+  min-height: 10rem;
+  margin-top: 0.5rem;
+  user-select: none;
 }
 
 .carousel-pagination {
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
   border: 2px dotted hsl(var(--foreground));
+  outline: none;
 }
 
 .carousel-buttons {
@@ -40,10 +27,6 @@
   border: 2px dotted hsl(var(--accent));
 }
 
-.carousel-buttons button[aria-disabled='true'] {
-  opacity: 0.5;
-}
-
 .carousel-buttons button {
   border: 2px dotted hsl(var(--foreground));
   padding: 0.5rem;
@@ -53,20 +36,38 @@
   background-color: hsla(var(--primary) / 0.08);
 }
 
-.carousel-img {
-  pointer-events: none;
+.carousel-buttons button:disabled {
+  opacity: 0.5;
 }
 
 .carousel-pagination-bullet {
   cursor: pointer;
   padding-inline: 0.5rem;
 }
 
-.pagination-underline {
+.carousel-pagination-bullet[data-active] {
   outline: 2px dotted hsl(var(--primary));
   background-color: hsla(var(--primary) / 0.08);
 }
 
 .carousel-pagination-bullet:hover {
   background-color: hsla(var(--primary) / 0.08);
 }
+
+.carousel-conditional {
+  position: relative;
+  height: 200px;
+}
+
+.carousel-conditional .carousel-slide {
+  opacity: 0;
+  transition: opacity 0.5s;
+  /* NOT display block */
+  display: revert;
+  position: absolute;
+  inset: 0;
+}
+
+.carousel-conditional .carousel-slide[data-active] {
+  opacity: 1;
+}

apps/website/src/routes/docs/headless/carousel/examples/center.tsx

@@ -0,0 +1,30 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Carousel } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
+
+  return (
+    <Carousel.Root class="carousel-root" gap={30} align="center">
+      <div class="carousel-buttons">
+        <Carousel.Previous>Prev</Carousel.Previous>
+        <Carousel.Next>Next</Carousel.Next>
+      </div>
+      <Carousel.Scroller class="carousel-scroller">
+        {colors.map((color) => (
+          <Carousel.Slide
+            style={{ flexBasis: '300px' }}
+            key={color}
+            class="carousel-slide"
+          >
+            {color}
+          </Carousel.Slide>
+        ))}
+      </Carousel.Scroller>
+    </Carousel.Root>
+  );
+});
+// internal
+import styles from './carousel.css?inline';

apps/website/src/routes/docs/headless/carousel/examples/conditional.tsx

@@ -0,0 +1,26 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Carousel } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
+
+  return (
+    <Carousel.Root class="carousel-root" gap={30}>
+      <div class="carousel-buttons">
+        <Carousel.Previous>Prev</Carousel.Previous>
+        <Carousel.Next>Next</Carousel.Next>
+      </div>
+      <div class="carousel-conditional">
+        {colors.map((color) => (
+          <Carousel.Slide key={color} class="carousel-slide">
+            {color}
+          </Carousel.Slide>
+        ))}
+      </div>
+    </Carousel.Root>
+  );
+});
+// internal
+import styles from './carousel.css?inline';

apps/website/src/routes/docs/headless/carousel/examples/csr.tsx

@@ -0,0 +1,34 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Carousel } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
+  const renderCarousel = useSignal(false);
+
+  return (
+    <>
+      <button onClick$={() => (renderCarousel.value = !renderCarousel.value)}>
+        Render Carousel
+      </button>
+      {renderCarousel.value && (
+        <Carousel.Root class="carousel-root">
+          <div class="carousel-buttons">
+            <Carousel.Previous>Prev</Carousel.Previous>
+            <Carousel.Next>Next</Carousel.Next>
+          </div>
+          <Carousel.Scroller class="carousel-scroller">
+            {colors.map((color) => (
+              <Carousel.Slide key={color} class="carousel-slide">
+                {color}
+              </Carousel.Slide>
+            ))}
+          </Carousel.Scroller>
+        </Carousel.Root>
+      )}
+    </>
+  );
+});
+// internal
+import styles from './carousel.css?inline';

apps/website/src/routes/docs/headless/carousel/examples/different-widths.tsx

@@ -0,0 +1,34 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Carousel } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Carousel.Root class="carousel-root" gap={30}>
+      <div class="carousel-buttons">
+        <Carousel.Previous>Prev</Carousel.Previous>
+        <Carousel.Next>Next</Carousel.Next>
+      </div>
+      <Carousel.Scroller class="carousel-scroller">
+        <Carousel.Slide style={{ flexBasis: '200px' }} class="carousel-slide">
+          red
+        </Carousel.Slide>
+        <Carousel.Slide style={{ flexBasis: '400px' }} class="carousel-slide">
+          green
+        </Carousel.Slide>
+        <Carousel.Slide style={{ flexBasis: '300px' }} class="carousel-slide">
+          blue
+        </Carousel.Slide>
+        <Carousel.Slide style={{ flexBasis: '350px' }} class="carousel-slide">
+          yellow
+        </Carousel.Slide>
+        <Carousel.Slide style={{ flexBasis: '100px' }} class="carousel-slide">
+          purple
+        </Carousel.Slide>
+      </Carousel.Scroller>
+    </Carousel.Root>
+  );
+});
+// internal
+import styles from './carousel.css?inline';

apps/website/src/routes/docs/headless/carousel/examples/end.tsx

@@ -0,0 +1,30 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Carousel } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
+
+  return (
+    <Carousel.Root class="carousel-root" gap={30} align="end">
+      <div class="carousel-buttons">
+        <Carousel.Previous>Prev</Carousel.Previous>
+        <Carousel.Next>Next</Carousel.Next>
+      </div>
+      <Carousel.Scroller class="carousel-scroller">
+        {colors.map((color) => (
+          <Carousel.Slide
+            style={{ flexBasis: '300px' }}
+            key={color}
+            class="carousel-slide"
+          >
+            {color}
+          </Carousel.Slide>
+        ))}
+      </Carousel.Scroller>
+    </Carousel.Root>
+  );
+});
+// internal
+import styles from './carousel.css?inline';