@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/skeleton.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type SkeletonVariant = "pulse" | "shimmer" | "none"
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+const skeletonVariants = cva(
+  "ax:rounded-md ax:bg-muted",
+  {
+    variants: {
+      variant: {
+        // Tailwind's built-in pulse: opacity oscillation. Quiet, ubiquitous.
+        pulse: "ax:animate-pulse ax:motion-reduce:animate-none",
+        // Sliding gradient overlay. Feels smoother on larger placeholder blocks
+        // (hero images, card previews). Uses an `::after` pseudo-element so the
+        // base bg-muted stays visible underneath.
+        shimmer: cn(
+          "ax:relative ax:overflow-hidden",
+          "ax:after:absolute ax:after:inset-0",
+          "ax:after:bg-gradient-to-r ax:after:from-transparent ax:after:via-foreground/[0.08] ax:after:to-transparent",
+          "ax:after:animate-skeleton-shimmer",
+          "ax:motion-reduce:after:animate-none",
+        ),
+        // Static placeholder with no animation. Use when motion is distracting
+        // (e.g. inside an already-animated parent) or for visual snapshots.
+        none: "",
+      },
+    },
+    defaultVariants: { variant: "pulse" },
+  }
+)
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonVariants> {}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      aria-hidden="true"
+      className={cn(skeletonVariants({ variant }), className)}
+      {...props}
+    />
+  )
+)
+Skeleton.displayName = "Skeleton"
+
+// ─── SkeletonText ─────────────────────────────────────────────────────────────
+//
+// Stacked text-line placeholders with naturally varied widths: the recurring
+// "3 paragraph lines" pattern in one component. The last line is always
+// noticeably shorter to mimic a paragraph ending mid-line.
+
+const TEXT_WIDTHS = ["ax:w-full", "ax:w-11/12", "ax:w-10/12", "ax:w-9/12"]
+
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of text lines to render. Default 3. */
+  lines?: number
+  /** Animation variant - applied to every line. */
+  variant?: SkeletonVariant
+  /** Line height - applied to every line. Default `h-3`. */
+  lineClassName?: string
+}
+
+export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
+  ({ className, lines = 3, variant, lineClassName, ...props }, ref) => (
+    <div
+      ref={ref}
+      aria-hidden="true"
+      className={cn("ax:space-y-2", className)}
+      {...props}
+    >
+      {Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1
+        const width  = isLast ? "ax:w-2/3" : TEXT_WIDTHS[i % TEXT_WIDTHS.length]
+        return (
+          <Skeleton
+            key={i}
+            variant={variant}
+            className={cn("ax:h-3", width, lineClassName)}
+          />
+        )
+      })}
+    </div>
+  )
+)
+SkeletonText.displayName = "SkeletonText"

package/src/components/slider.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Slider } from "./slider"
+
+const meta: Meta<typeof Slider> = {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    className: "ax:w-64",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Slider>
+
+export const Default: Story = {}

package/src/components/slider.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+export type SliderSize       = "sm" | "md" | "lg"
+export type SliderValueLabel = "always" | "active" | false
+
+const trackVariants = cva(
+  "ax:relative ax:flex ax:w-full ax:touch-none ax:select-none ax:items-center",
+  {
+    variants: {
+      size: {
+        sm: "ax:h-4",
+        md: "ax:h-5",
+        lg: "ax:h-6",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+const TRACK_HEIGHT: Record<SliderSize, string> = {
+  sm: "ax:h-1",
+  md: "ax:h-1.5",
+  lg: "ax:h-2",
+}
+
+const THUMB_SIZE: Record<SliderSize, string> = {
+  sm: "ax:size-3",
+  md: "ax:size-4",
+  lg: "ax:size-5",
+}
+
+// How far above the thumb the value-label pill sits. Increases with thumb size
+// so the gap between thumb and label stays visually consistent.
+const LABEL_OFFSET: Record<SliderSize, string> = {
+  sm: "ax:-top-6",
+  md: "ax:-top-7",
+  lg: "ax:-top-8",
+}
+
+export interface SliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
+    VariantProps<typeof trackVariants> {
+  /** Show the current value in a small pill above each thumb.
+   *  - `"always"` - pill is always visible
+   *  - `"active"` - pill appears on hover / focus / drag, hidden otherwise
+   *  - `false`  (default) - no pill */
+  valueLabel?: SliderValueLabel
+  /** Format the value rendered in the label (e.g. add a "%" suffix, currency).
+   *  Default: the raw number. */
+  formatValue?: (value: number) => React.ReactNode
+  /** Render tick marks along the track.
+   *  - `true` - auto-generate at every `step` between `min` and `max`
+   *    (auto-generation is skipped when it would produce more than 21 marks
+   *    - for fine sliders, provide an explicit array instead)
+   *  - `number[]` - render marks at exactly the provided positions */
+  marks?: boolean | number[]
+}
+
+export const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(
+  (
+    {
+      className,
+      size,
+      valueLabel = false,
+      formatValue,
+      marks = false,
+      value,
+      defaultValue,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedSize = size ?? "md"
+
+    // Track the live value so the per-thumb label has something to render in
+    // uncontrolled mode. In controlled mode the parent's `value` wins; in
+    // uncontrolled mode the internal mirror is updated via onValueChange.
+    const [internalValue, setInternalValue] = React.useState<number[]>(
+      () => value ?? defaultValue ?? [min]
+    )
+    const currentValue = value ?? internalValue
+    const handleValueChange = (v: number[]) => {
+      setInternalValue(v)
+      onValueChange?.(v)
+    }
+
+    const thumbCount = currentValue.length
+
+    // Compute mark positions. When `marks === true`, generate one per step;
+    // bail out when the resulting count would be unreasonable (fine sliders).
+    const markPositions: number[] = React.useMemo(() => {
+      if (!marks) return []
+      if (Array.isArray(marks)) return marks
+      const out: number[] = []
+      for (let v = min; v <= max; v += step) out.push(v)
+      return out.length <= 21 ? out : []
+    }, [marks, min, max, step])
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={handleValueChange}
+        min={min}
+        max={max}
+        step={step}
+        className={cn(trackVariants({ size }), className)}
+        {...props}
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            "ax:relative ax:w-full ax:grow ax:overflow-hidden ax:rounded-full ax:bg-muted",
+            TRACK_HEIGHT[resolvedSize]
+          )}
+        >
+          <SliderPrimitive.Range className="ax:absolute ax:h-full ax:bg-primary" />
+          {markPositions.map((m) => (
+            <span
+              key={m}
+              aria-hidden="true"
+              style={{ left: `${((m - min) / (max - min)) * 100}%` }}
+              className="ax:absolute ax:top-1/2 ax:-translate-x-1/2 ax:-translate-y-1/2 ax:size-1 ax:rounded-full ax:bg-foreground/40 ax:pointer-events-none"
+            />
+          ))}
+        </SliderPrimitive.Track>
+
+        {Array.from({ length: thumbCount }).map((_, i) => {
+          const v = currentValue[i] ?? min
+          return (
+            <SliderPrimitive.Thumb
+              key={i}
+              className={cn(
+                "ax:group ax:relative ax:block ax:rounded-full ax:border-2 ax:border-primary ax:bg-background ax:cursor-grab ax:active:cursor-grabbing",
+                "ax:transition-colors ax:transition-snappy",
+                "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2 ax:focus-visible:ring-offset-background",
+                "ax:disabled:pointer-events-none ax:disabled:opacity-50",
+                THUMB_SIZE[resolvedSize]
+              )}
+            >
+              {valueLabel && (
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "ax:absolute ax:left-1/2 ax:-translate-x-1/2 ax:px-1.5 ax:py-0.5 ax:rounded ax:text-xs ax:font-medium ax:tabular-nums ax:whitespace-nowrap ax:pointer-events-none",
+                    "ax:bg-foreground ax:text-background",
+                    LABEL_OFFSET[resolvedSize],
+                    valueLabel === "active" && [
+                      "ax:opacity-0 ax:transition-opacity",
+                      "ax:group-hover:opacity-100 ax:group-focus-visible:opacity-100 ax:group-active:opacity-100",
+                    ]
+                  )}
+                >
+                  {formatValue ? formatValue(v) : v}
+                </span>
+              )}
+            </SliderPrimitive.Thumb>
+          )
+        })}
+      </SliderPrimitive.Root>
+    )
+  }
+)
+Slider.displayName = SliderPrimitive.Root.displayName

package/src/components/slideshow.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Slideshow, SlideshowSlide } from "./slideshow"
+
+const meta: Meta<typeof Slideshow> = {
+  title: "Components/Slideshow",
+  component: Slideshow,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Slideshow>
+
+const slides = [
+  { src: "https://picsum.photos/800/400?random=10", alt: "Slide 1" },
+  { src: "https://picsum.photos/800/400?random=11", alt: "Slide 2" },
+  { src: "https://picsum.photos/800/400?random=12", alt: "Slide 3" },
+]
+
+export const Default: Story = {
+  render: () => (
+    <Slideshow className="ax:max-w-xl">
+      {slides.map((slide) => (
+        <SlideshowSlide key={slide.src}>
+          <img src={slide.src} alt={slide.alt} className="ax:w-full ax:rounded-md ax:object-cover ax:aspect-[2/1]" />
+        </SlideshowSlide>
+      ))}
+    </Slideshow>
+  ),
+}

package/src/components/slideshow.tsx

@@ -0,0 +1,291 @@
+"use client"
+
+import * as React from "react"
+import { motion, AnimatePresence } from "motion/react"
+import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react"
+import { cn } from "../lib/cn"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
+import { transitions } from "../lib/motion"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type SlideshowVariant = "slide" | "fade"
+
+// ─── Slide ────────────────────────────────────────────────────────────────────
+
+export interface SlideshowSlideProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const SlideshowSlide = React.forwardRef<HTMLDivElement, SlideshowSlideProps>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn("ax:w-full ax:select-none", className)} {...props}>
+      {children}
+    </div>
+  )
+)
+SlideshowSlide.displayName = "SlideshowSlide"
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export interface SlideshowProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Transition style - "slide" (default) or "fade". */
+  variant?: SlideshowVariant
+  /** Auto-advance interval in ms. Pauses on hover / focus / explicit toggle.
+   *  Pass `false` to disable (default). When enabled, a visible pause button
+   *  appears in the top-right corner. */
+  autoplay?: number | false
+  /** Wrap around at the edges (default true). */
+  loop?: boolean
+  /** Show prev/next arrow buttons (default true). */
+  showArrows?: boolean
+  /** Show dot indicators (default true). */
+  showDots?: boolean
+  /** Controlled active index. */
+  index?: number
+  /** Callback fired when the active slide changes. */
+  onIndexChange?: (index: number) => void
+}
+
+export const Slideshow = React.forwardRef<HTMLDivElement, SlideshowProps>(
+  (
+    {
+      className,
+      children,
+      variant     = "slide",
+      autoplay    = false,
+      loop        = true,
+      showArrows  = true,
+      showDots    = true,
+      index:      controlledIndex,
+      onIndexChange,
+      ...props
+    },
+    ref
+  ) => {
+    const reduce = useReducedMotion()
+    const slides = React.Children.toArray(children)
+    const count  = slides.length
+
+    // [activeIndex, direction] - direction: 1 = forward, -1 = backward.
+    const [[activeIndex, direction], setSlide] = React.useState<[number, number]>([
+      controlledIndex ?? 0,
+      1,
+    ])
+
+    // Pause state. Two sources combine:
+    //  - `transientPause` - set while hover/focus is inside the carousel
+    //    (per WAI-ARIA carousel guidance: must pause on pointer + keyboard)
+    //  - `userPaused`    - toggled by the explicit pause/play button
+    //                       (per WCAG 2.2.2: pause control for auto-moving content)
+    // Effective pause = either source set.
+    const [transientPause, setTransientPause] = React.useState(false)
+    const [userPaused,     setUserPaused]     = React.useState(false)
+    const isPaused = transientPause || userPaused
+
+    // Sync with controlled index when it changes externally.
+    React.useEffect(() => {
+      if (controlledIndex === undefined) return
+      setSlide(([prev]) => [controlledIndex, controlledIndex >= prev ? 1 : -1])
+    }, [controlledIndex])
+
+    const go = React.useCallback(
+      (next: number) => {
+        setSlide(([prev]) => {
+          const clamped = loop
+            ? ((next % count) + count) % count
+            : Math.min(Math.max(next, 0), count - 1)
+          onIndexChange?.(clamped)
+          return [clamped, next >= prev ? 1 : -1]
+        })
+      },
+      [count, loop, onIndexChange]
+    )
+
+    // Autoplay - interval cleared/restarted whenever pause state changes.
+    React.useEffect(() => {
+      if (!autoplay || count < 2 || isPaused) return
+      const id = setInterval(() => go(activeIndex + 1), autoplay as number)
+      return () => clearInterval(id)
+    }, [autoplay, activeIndex, count, go, isPaused])
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowLeft")  go(activeIndex - 1)
+      if (e.key === "ArrowRight") go(activeIndex + 1)
+    }
+
+    // Slide variants - direction-aware horizontal translate.
+    const slideVariants = {
+      enter:  (dir: number) => ({ x: reduce ? 0 : `${dir * 100}%`,  opacity: reduce ? 0 : 1 }),
+      center: { x: "0%", opacity: 1 },
+      exit:   (dir: number) => ({ x: reduce ? 0 : `${dir * -100}%`, opacity: reduce ? 0 : 1 }),
+    }
+
+    const fadeVariants = {
+      enter:  { opacity: 0 },
+      center: { opacity: 1 },
+      exit:   { opacity: 0 },
+    }
+
+    const canGoPrev = loop || activeIndex > 0
+    const canGoNext = loop || activeIndex < count - 1
+
+    // Autoplay progress duration in seconds, used by the active-dot fill.
+    const autoplaySec = autoplay ? (autoplay as number) / 1000 : 0
+
+    return (
+      <div
+        ref={ref}
+        role="region"
+        aria-roledescription="carousel"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        onMouseEnter={() => setTransientPause(true)}
+        onMouseLeave={() => setTransientPause(false)}
+        onFocus={()      => setTransientPause(true)}
+        onBlur={()       => setTransientPause(false)}
+        className={cn(
+          "ax:relative ax:overflow-hidden ax:rounded-md",
+          "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2 ax:focus-visible:ring-offset-background",
+          className
+        )}
+        {...props}
+      >
+        {/* Viewport - only the active slide is rendered */}
+        <div aria-live="polite" aria-atomic="true">
+          <AnimatePresence initial={false} custom={direction} mode="popLayout">
+            <motion.div
+              key={activeIndex}
+              custom={direction}
+              role="group"
+              aria-roledescription="slide"
+              aria-label={`${activeIndex + 1} of ${count}`}
+              variants={variant === "fade" ? fadeVariants : slideVariants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={
+                variant === "fade"
+                  ? (reduce ? { duration: 0 } : transitions.smooth)
+                  : transitions.spring
+              }
+              drag={count > 1 ? "x" : false}
+              dragConstraints={{ left: 0, right: 0 }}
+              dragElastic={0.12}
+              onDragEnd={(_, { offset }) => {
+                if (offset.x < -50) go(activeIndex + 1)
+                if (offset.x >  50) go(activeIndex - 1)
+              }}
+              className="ax:w-full"
+            >
+              {slides[activeIndex]}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Arrow controls */}
+        {showArrows && count > 1 && (
+          <>
+            <button
+              onClick={() => go(activeIndex - 1)}
+              disabled={!canGoPrev}
+              aria-label="Previous slide"
+              className={cn(
+                "ax:absolute ax:left-3 ax:top-1/2 ax:-translate-y-1/2 ax:z-10",
+                "ax:size-8 ax:flex ax:items-center ax:justify-center",
+                "ax:rounded-full ax:bg-background/80 ax:backdrop-blur-sm ax:border ax:border-border ax:shadow-sm",
+                "ax:text-foreground ax:hover:bg-background ax:transition-colors ax:cursor-pointer",
+                "ax:disabled:opacity-40 ax:disabled:cursor-not-allowed"
+              )}
+            >
+              <ChevronLeft className="ax:size-4" />
+            </button>
+
+            <button
+              onClick={() => go(activeIndex + 1)}
+              disabled={!canGoNext}
+              aria-label="Next slide"
+              className={cn(
+                "ax:absolute ax:right-3 ax:top-1/2 ax:-translate-y-1/2 ax:z-10",
+                "ax:size-8 ax:flex ax:items-center ax:justify-center",
+                "ax:rounded-full ax:bg-background/80 ax:backdrop-blur-sm ax:border ax:border-border ax:shadow-sm",
+                "ax:text-foreground ax:hover:bg-background ax:transition-colors ax:cursor-pointer",
+                "ax:disabled:opacity-40 ax:disabled:cursor-not-allowed"
+              )}
+            >
+              <ChevronRight className="ax:size-4" />
+            </button>
+          </>
+        )}
+
+        {/* Pause/play button - only when autoplay is on. WCAG 2.2.2 requires
+         *   a control for auto-moving content longer than 5s; we offer one
+         *   for any autoplay interval. */}
+        {autoplay && count > 1 && (
+          <button
+            onClick={() => setUserPaused((p) => !p)}
+            aria-label={userPaused ? "Play slideshow" : "Pause slideshow"}
+            aria-pressed={userPaused}
+            className={cn(
+              "ax:absolute ax:top-3 ax:right-3 ax:z-10",
+              "ax:size-8 ax:flex ax:items-center ax:justify-center",
+              "ax:rounded-full ax:bg-background/80 ax:backdrop-blur-sm ax:border ax:border-border ax:shadow-sm",
+              "ax:text-foreground ax:hover:bg-background ax:transition-colors ax:cursor-pointer"
+            )}
+          >
+            {userPaused ? <Play className="ax:size-3.5" /> : <Pause className="ax:size-3.5" />}
+          </button>
+        )}
+
+        {/* Dot indicators */}
+        {showDots && count > 1 && (
+          <div
+            role="tablist"
+            aria-label="Slides"
+            className="ax:absolute ax:bottom-3 ax:left-0 ax:right-0 ax:flex ax:justify-center ax:items-center ax:gap-1.5 ax:z-10"
+          >
+            {Array.from({ length: count }).map((_, i) => {
+              const isActive = i === activeIndex
+              return (
+                <button
+                  key={i}
+                  role="tab"
+                  aria-selected={isActive}
+                  aria-label={`Slide ${i + 1}`}
+                  onClick={() => go(i)}
+                  className={cn(
+                    "ax:relative ax:overflow-hidden ax:rounded-full ax:transition-all ax:transition-snappy ax:cursor-pointer",
+                    isActive
+                      ? "ax:w-4 ax:h-1.5 ax:bg-foreground/20"
+                      : "ax:size-1.5 ax:bg-foreground/30 ax:hover:bg-foreground/50"
+                  )}
+                >
+                  {isActive && (
+                    autoplay && !isPaused ? (
+                      // Progress fill - animates 0→100% width over the autoplay
+                      // interval, re-keys (= restarts) on every slide change.
+                      <motion.span
+                        key={`progress-${activeIndex}`}
+                        aria-hidden="true"
+                        className="ax:absolute ax:inset-y-0 ax:left-0 ax:bg-primary ax:rounded-full ax:origin-left"
+                        initial={{ scaleX: 0 }}
+                        animate={{ scaleX: 1 }}
+                        transition={{ duration: autoplaySec, ease: "linear" }}
+                        style={{ width: "100%" }}
+                      />
+                    ) : (
+                      // Static full fill when autoplay is off or paused.
+                      <span
+                        aria-hidden="true"
+                        className="ax:absolute ax:inset-0 ax:bg-primary ax:rounded-full"
+                      />
+                    )
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+Slideshow.displayName = "Slideshow"

package/src/components/source.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Source, SourceContent, SourceTrigger } from "./source"
+import { Text } from "./text"
+
+const meta: Meta<typeof Source> = {
+  title: "Components/Source",
+  component: Source,
+  tags: ["autodocs"],
+  decorators: [(Story) => <div style={{ maxWidth: 560, paddingBottom: 160 }}><Story /></div>],
+}
+
+export default meta
+type Story = StoryObj<typeof Source>
+
+export const InText: Story = {
+  render: () => (
+    <Text as="p" size="2">
+      Yas Acres townhouses with a private garden start at AED 4.2M
+      <Source href="https://www.propertyfinder.ae/en/search?c=1&l=yas-island">
+        <SourceTrigger favicon />
+        <SourceContent title="Townhouses for sale in Yas Island" description="42 townhouses under AED 5M, 11 with a private garden." />
+      </Source>
+      , below the AED 4.6M median sale
+      <Source href="https://www.dari.ae/en/market-insights">
+        <SourceTrigger label={2} />
+        <SourceContent title="Abu Dhabi market insights" description="Registered sales by community over the last 12 months." />
+      </Source>
+      .
+    </Text>
+  ),
+}

package/src/components/source.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Source, SourceTrigger, sourceDomain } from "./source"
+
+const HREF = "https://www.propertyfinder.ae/en/yas-island"
+
+describe("sourceDomain", () => {
+  it("strips the protocol, path and www", () => {
+    expect(sourceDomain(HREF)).toBe("propertyfinder.ae")
+  })
+
+  it("falls back to the input when it is not a URL", () => {
+    expect(sourceDomain("internal report")).toBe("internal report")
+  })
+})
+
+describe("SourceTrigger", () => {
+  it("is a link to the source, labelled with its domain", () => {
+    const html = renderToStaticMarkup(<Source href={HREF}><SourceTrigger /></Source>)
+    expect(html).toContain(`href="${HREF}"`)
+    expect(html).toContain('rel="noopener noreferrer"')
+    expect(html).toContain(">propertyfinder.ae<")
+    expect(html).not.toContain("aria-label")
+  })
+
+  it("names a custom label with the domain so a bare number still makes sense", () => {
+    const html = renderToStaticMarkup(<Source href={HREF}><SourceTrigger label={2} /></Source>)
+    expect(html).toContain('aria-label="Source 2, propertyfinder.ae"')
+  })
+
+  it("uses a given favicon and falls back to a link icon", () => {
+    expect(renderToStaticMarkup(<Source href={HREF}><SourceTrigger favicon="/pf.png" /></Source>)).toContain('src="/pf.png"')
+    expect(renderToStaticMarkup(<Source href={HREF}><SourceTrigger favicon /></Source>)).toContain("lucide-link2")
+  })
+
+  it("throws outside Source", () => {
+    expect(() => renderToStaticMarkup(<SourceTrigger />)).toThrow(/Source/)
+  })
+})