@lapismd/design-core 0.1.0

package/src/shared/shadcn/scroll-area/ScrollArea.local-example-sources.ts

@@ -0,0 +1,30 @@
+export const Basic = `<script lang="ts">
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+
+  const items = Array.from({ length: 20 }, (_, index) => \`Item \${index + 1}\`);
+</script>
+
+<ScrollArea.Root aria-label="Catalog items">
+  <ul>
+    {#each items as item}
+      <li>{item}</li>
+    {/each}
+  </ul>
+</ScrollArea.Root>`;
+
+export const VisibilityModes = `<script lang="ts">
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+  import type { ScrollAreaVisibility } from "@lapismd/design-core/shadcn/scroll-area";
+
+  let visibility: ScrollAreaVisibility = "scroll";
+</script>
+
+<div data-ui-scrollbar-visibility={visibility}>
+  <ScrollArea.Root aria-label="Inherited scroll area">
+    <!-- Overflowing content -->
+  </ScrollArea.Root>
+</div>
+
+<ScrollArea.Root type="always" aria-label="Explicit standalone scroll area">
+  <!-- This local override remains authoritative. -->
+</ScrollArea.Root>`;

package/src/shared/shadcn/scroll-area/ScrollAreaBehaviorFixture.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import * as ScrollArea from "./index.js";
+  import type { ScrollAreaVisibility } from "./scroll-area-model.js";
+
+  const modes: ScrollAreaVisibility[] = ["scroll", "hover", "always"];
+  let inheritedMode = $state<ScrollAreaVisibility>("scroll");
+  let dynamicCount = $state(12);
+</script>
+
+<div class="scroll-area-behavior" data-ui-scrollbar-visibility={inheritedMode}>
+  <div class="scroll-area-behavior__controls" aria-label="Scrollbar preference">
+    {#each modes as mode (mode)}
+      <button
+        type="button"
+        aria-pressed={inheritedMode === mode}
+        onclick={() => (inheritedMode = mode)}
+      >
+        {mode}
+      </button>
+    {/each}
+    <button type="button" onclick={() => (dynamicCount += 6)}
+      >Add content</button
+    >
+    <button
+      type="button"
+      onclick={() => (dynamicCount = Math.max(2, dynamicCount - 6))}
+    >
+      Remove content
+    </button>
+  </div>
+
+  <section>
+    <h2>Inherited preference</h2>
+    <ScrollArea.Root aria-label="Inherited vertical area">
+      <ol>
+        {#each Array.from({ length: dynamicCount }, (_, index) => index + 1) as item (item)}
+          <li>Dynamic item {item}</li>
+        {/each}
+      </ol>
+    </ScrollArea.Root>
+  </section>
+
+  <div class="scroll-area-behavior__mode-grid">
+    {#each modes as mode (mode)}
+      <section>
+        <h2>{mode}</h2>
+        <ScrollArea.Root type={mode} aria-label={`${mode} vertical area`}>
+          <ol>
+            {#each Array.from({ length: 12 }, (_, index) => index + 1) as item (item)}
+              <li>{mode} item {item}</li>
+            {/each}
+          </ol>
+        </ScrollArea.Root>
+      </section>
+    {/each}
+  </div>
+
+  <section>
+    <h2>Horizontal</h2>
+    <ScrollArea.Root
+      type="always"
+      orientation="horizontal"
+      aria-label="Horizontal area"
+    >
+      <div class="scroll-area-behavior__wide-content">
+        Horizontal content remains natively scrollable.
+      </div>
+    </ScrollArea.Root>
+  </section>
+
+  <section>
+    <h2>Both axes</h2>
+    <ScrollArea.Root
+      type="always"
+      orientation="both"
+      aria-label="Dual axis area"
+    >
+      <div
+        class="scroll-area-behavior__wide-content scroll-area-behavior__tall-content"
+      >
+        Horizontal and vertical content remains natively scrollable.
+      </div>
+    </ScrollArea.Root>
+  </section>
+
+  <section>
+    <h2>No overflow</h2>
+    <ScrollArea.Root type="always" aria-label="No overflow area">
+      <p>Short content</p>
+    </ScrollArea.Root>
+  </section>
+</div>
+
+<style>
+  .scroll-area-behavior {
+    display: grid;
+    max-width: 52rem;
+    gap: 1rem;
+  }
+
+  .scroll-area-behavior__controls,
+  .scroll-area-behavior__mode-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .scroll-area-behavior__controls button {
+    padding: 0.35rem 0.65rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    color: var(--foreground);
+  }
+
+  .scroll-area-behavior__controls button[aria-pressed="true"] {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .scroll-area-behavior section {
+    min-width: 0;
+  }
+
+  .scroll-area-behavior h2 {
+    margin: 0 0 0.35rem;
+    font-size: 0.875rem;
+  }
+
+  .scroll-area-behavior :global([data-ui-part="scroll-area"]) {
+    width: 14rem;
+    height: 8rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+  }
+
+  .scroll-area-behavior ol,
+  .scroll-area-behavior p {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+  }
+
+  .scroll-area-behavior__wide-content {
+    width: 44rem;
+    padding: 1rem;
+    white-space: nowrap;
+  }
+
+  .scroll-area-behavior__tall-content {
+    height: 18rem;
+  }
+</style>

package/src/shared/shadcn/scroll-area/ScrollAreaScrollableList.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import * as ScrollArea from "./index.js";
+
+  let { items }: { items: string[] } = $props();
+  let viewportRef = $state<HTMLElement | null>(null);
+
+  $effect(() => {
+    const element = viewportRef;
+    if (!element) return;
+    element.dataset.scrollAreaBoundViewport = "true";
+    return () => {
+      delete element.dataset.scrollAreaBoundViewport;
+    };
+  });
+</script>
+
+<ScrollArea.Root
+  bind:viewportRef
+  class="scroll-area-story__root"
+  aria-label="Catalog items"
+>
+  <ul class="scroll-area-story__list">
+    {#each items as item (item)}
+      <li>
+        <a href={`#${item}`}>{item}</a>
+      </li>
+    {/each}
+  </ul>
+</ScrollArea.Root>
+
+<style>
+  :global(.scroll-area-story__root) {
+    width: 14rem;
+    height: 10rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+  }
+
+  .scroll-area-story__list {
+    display: flex;
+    margin: 0;
+    padding: 0.75rem;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    list-style: none;
+  }
+</style>

package/src/shared/shadcn/scroll-area/examples/horizontal-scrolling.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { ScrollArea } from "../index.js";
+
+  type Artwork = {
+    artist: string;
+    art: string;
+  };
+
+  const works: Artwork[] = [
+    {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Tom Byrom",
+      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Vladimir Malyavko",
+      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+    },
+  ];
+</script>
+
+<ScrollArea
+  class="w-96 rounded-md border whitespace-nowrap"
+  orientation="horizontal"
+>
+  <div class="flex w-max space-x-4 p-4">
+    {#each works as artwork (artwork.artist)}
+      <figure class="shrink-0">
+        <div class="overflow-hidden rounded-md">
+          <img
+            src={artwork.art}
+            alt="Photo by {artwork.artist}"
+            class="aspect-[3/4] h-fit w-fit object-cover"
+            width={300}
+            height={400}
+          />
+        </div>
+        <figcaption class="text-muted-foreground pt-2 text-xs">
+          Photo by
+          <span class="text-foreground font-semibold">
+            {artwork.artist}
+          </span>
+        </figcaption>
+      </figure>
+    {/each}
+  </div>
+</ScrollArea>

package/src/shared/shadcn/scroll-area/examples/preview.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { ScrollArea } from "../index.js";
+  import { Separator } from "../../separator/index.js";
+
+  const tags = Array.from({ length: 50 }).map(
+    (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+  );
+</script>
+
+<ScrollArea class="h-72 w-48 rounded-md border">
+  <div class="p-4">
+    <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
+    {#each tags as tag (tag)}
+      <div class="text-sm">
+        {tag}
+      </div>
+      <Separator class="my-2" />
+    {/each}
+  </div>
+</ScrollArea>

package/src/shared/shadcn/scroll-area/index.ts

@@ -0,0 +1,20 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+  Root,
+  Scrollbar,
+  //
+  Root as ScrollArea,
+  Scrollbar as ScrollAreaScrollbar,
+};
+
+export {
+  scroll_areaTokenNames,
+  type ScrollAreaToken,
+} from "./scroll-area.tokens.js";
+
+export {
+  SCROLL_AREA_VISIBILITY_ATTRIBUTE,
+  type ScrollAreaVisibility,
+} from "./scroll-area-model.js";

package/src/shared/shadcn/scroll-area/scroll-area-model.ts

@@ -0,0 +1,122 @@
+export type ScrollAreaVisibility = "scroll" | "hover" | "always";
+
+export type ScrollAreaType = ScrollAreaVisibility | "auto";
+
+export const SCROLL_AREA_VISIBILITY_ATTRIBUTE =
+  "data-ui-scrollbar-visibility" as const;
+
+export interface OverlayScrollbarMetrics {
+  overflowing: boolean;
+  maxScroll: number;
+  maxThumbTravel: number;
+  thumbOffset: number;
+  thumbSize: number;
+}
+
+export function isScrollAreaVisibility(
+  value: unknown,
+): value is ScrollAreaVisibility {
+  return value === "scroll" || value === "hover" || value === "always";
+}
+
+export function calculateOverlayScrollbarMetrics({
+  viewportSize,
+  contentSize,
+  scrollOffset,
+  trackSize = viewportSize,
+  minimumThumbSize = 20,
+}: {
+  viewportSize: number;
+  contentSize: number;
+  scrollOffset: number;
+  trackSize?: number;
+  minimumThumbSize?: number;
+}): OverlayScrollbarMetrics {
+  const safeViewportSize = Math.max(0, viewportSize);
+  const safeContentSize = Math.max(0, contentSize);
+  const safeTrackSize = Math.max(0, trackSize);
+  const maxScroll = Math.max(0, safeContentSize - safeViewportSize);
+  const overflowing = maxScroll > 1 && safeTrackSize > 0;
+  if (!overflowing) {
+    return {
+      overflowing: false,
+      maxScroll,
+      maxThumbTravel: 0,
+      thumbOffset: 0,
+      thumbSize: safeTrackSize,
+    };
+  }
+
+  const proportionalSize = safeTrackSize * (safeViewportSize / safeContentSize);
+  const thumbSize = Math.min(
+    safeTrackSize,
+    Math.max(Math.min(minimumThumbSize, safeTrackSize), proportionalSize),
+  );
+  const maxThumbTravel = Math.max(0, safeTrackSize - thumbSize);
+  const clampedScrollOffset = Math.min(maxScroll, Math.max(0, scrollOffset));
+  const thumbOffset =
+    maxScroll === 0 ? 0 : (clampedScrollOffset / maxScroll) * maxThumbTravel;
+
+  return {
+    overflowing: true,
+    maxScroll,
+    maxThumbTravel,
+    thumbOffset,
+    thumbSize,
+  };
+}
+
+export function shouldShowOverlayScrollbar({
+  overflowing,
+  type,
+  hovered,
+  scrollbarHovered = false,
+  scrolling,
+  interacting,
+}: {
+  overflowing: boolean;
+  type: ScrollAreaType;
+  hovered: boolean;
+  scrollbarHovered?: boolean;
+  scrolling: boolean;
+  interacting: boolean;
+}): boolean {
+  if (!overflowing) return false;
+  if (type === "always" || type === "auto") return true;
+  if (type === "hover") return hovered || interacting;
+  return scrolling || scrollbarHovered || interacting;
+}
+
+export function scrollOffsetForTrackPress({
+  pointerOffset,
+  metrics,
+  viewportSize,
+  currentScrollOffset,
+}: {
+  pointerOffset: number;
+  metrics: OverlayScrollbarMetrics;
+  viewportSize: number;
+  currentScrollOffset: number;
+}): number {
+  if (!metrics.overflowing) return 0;
+  const beforeThumb = pointerOffset < metrics.thumbOffset;
+  const afterThumb = pointerOffset > metrics.thumbOffset + metrics.thumbSize;
+  const delta = beforeThumb ? -viewportSize : afterThumb ? viewportSize : 0;
+  return Math.min(metrics.maxScroll, Math.max(0, currentScrollOffset + delta));
+}
+
+export function scrollOffsetForThumbDrag({
+  pointerDelta,
+  startScrollOffset,
+  metrics,
+}: {
+  pointerDelta: number;
+  startScrollOffset: number;
+  metrics: OverlayScrollbarMetrics;
+}): number {
+  if (!metrics.overflowing || metrics.maxThumbTravel === 0) return 0;
+  const next =
+    startScrollOffset +
+    (pointerDelta / metrics.maxThumbTravel) * metrics.maxScroll;
+  return Math.min(metrics.maxScroll, Math.max(0, next));
+}