@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/slider/slider-range.tsx

@@ -0,0 +1,59 @@
+/**
+ * Slider Range component - visual indicator of the selected range.
+ */
+
+import { type HTMLAttributes, forwardRef } from "react";
+import { useSliderContext } from "./slider-context.js";
+
+export interface SliderRangeProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Visual range indicator within the slider track.
+ * Automatically positions based on current value or range.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ *   <Slider.Thumb />
+ * </Slider.Track>
+ * ```
+ */
+export const SliderRange = forwardRef<HTMLDivElement, SliderRangeProps>(
+  ({ className, style, ...restProps }, ref) => {
+    const { behavior, range, orientation } = useSliderContext("Slider.Range");
+    const { state } = behavior;
+
+    // Calculate percentage positions
+    const singlePercent = behavior.valueToPercent(state.value);
+    const minPercent = behavior.valueToPercent(state.rangeValue.min);
+    const maxPercent = behavior.valueToPercent(state.rangeValue.max);
+
+    const isVertical = orientation === "vertical";
+
+    // Build inline style for positioning
+    let positionStyle: React.CSSProperties;
+
+    if (range) {
+      positionStyle = isVertical
+        ? { bottom: `${minPercent}%`, height: `${maxPercent - minPercent}%` }
+        : { left: `${minPercent}%`, width: `${maxPercent - minPercent}%` };
+    } else {
+      positionStyle = isVertical
+        ? { bottom: "0%", height: `${singlePercent}%` }
+        : { left: "0%", width: `${singlePercent}%` };
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={className}
+        style={{ ...positionStyle, ...style }}
+        data-orientation={orientation}
+        {...restProps}
+      />
+    );
+  }
+);
+
+SliderRange.displayName = "Slider.Range";

package/templates/slider/slider-root.tsx

@@ -0,0 +1,166 @@
+/**
+ * Slider Root component - provides context to all Slider compound components.
+ */
+
+import { createSliderBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { SliderProvider } from "./slider-context.js";
+
+export interface SliderRootProps {
+  /** Slider content */
+  children?: ReactNode;
+  /** Minimum allowed value */
+  min?: number;
+  /** Maximum allowed value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Controlled value (single mode) */
+  value?: number;
+  /** Default value (single mode, uncontrolled) */
+  defaultValue?: number;
+  /** Called when value changes */
+  onValueChange?: (value: number) => void;
+  /** Range mode (two thumbs) */
+  range?: boolean;
+  /** Controlled range values */
+  rangeValue?: { min: number; max: number };
+  /** Default range values */
+  defaultRangeValue?: { min: number; max: number };
+  /** Called when range changes */
+  onRangeChange?: (range: { min: number; max: number }) => void;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Disabled state */
+  disabled?: boolean;
+  /** Value text formatter for screen readers */
+  formatValueText?: (value: number) => string;
+}
+
+/**
+ * Root component for Slider compound pattern.
+ * Provides context to Track, Thumb, and Range components.
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider.Root onValueChange={(value) => console.log(value)}>
+ *   <Slider.Track>
+ *     <Slider.Range />
+ *     <Slider.Thumb />
+ *   </Slider.Track>
+ * </Slider.Root>
+ *
+ * // Range slider
+ * <Slider.Root range onRangeChange={(range) => console.log(range)}>
+ *   <Slider.Track>
+ *     <Slider.Range />
+ *     <Slider.Thumb type="min" />
+ *     <Slider.Thumb type="max" />
+ *   </Slider.Track>
+ * </Slider.Root>
+ * ```
+ */
+export function SliderRoot({
+  children,
+  min = 0,
+  max = 100,
+  step = 1,
+  value: controlledValue,
+  defaultValue = 0,
+  onValueChange,
+  range = false,
+  rangeValue: controlledRangeValue,
+  defaultRangeValue,
+  onRangeChange,
+  orientation = "horizontal",
+  disabled = false,
+  formatValueText,
+}: SliderRootProps) {
+  // Compute default range if not provided
+  const defaultRange = defaultRangeValue ?? { min, max: Math.min(max, min + (max - min) / 2) };
+
+  // Support controlled and uncontrolled modes for value
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isValueControlled = controlledValue !== undefined;
+  const value = isValueControlled ? controlledValue : internalValue;
+
+  // Support controlled and uncontrolled modes for range
+  const [internalRangeValue, setInternalRangeValue] = useState(defaultRange);
+  const isRangeControlled = controlledRangeValue !== undefined;
+  const rangeValue = isRangeControlled ? controlledRangeValue : internalRangeValue;
+
+  const setValue = useCallback(
+    (nextValue: number) => {
+      if (!isValueControlled) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [isValueControlled, onValueChange]
+  );
+
+  const setRangeValue = useCallback(
+    (nextRange: { min: number; max: number }) => {
+      if (!isRangeControlled) {
+        setInternalRangeValue(nextRange);
+      }
+      onRangeChange?.(nextRange);
+    },
+    [isRangeControlled, onRangeChange]
+  );
+
+  // Create behavior instance
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once
+  const behavior = useMemo(
+    () =>
+      createSliderBehavior({
+        min,
+        max,
+        step,
+        defaultValue: value,
+        defaultRange: rangeValue,
+        range,
+        orientation,
+        disabled,
+        onValueChange: setValue,
+        onRangeChange: setRangeValue,
+      }),
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      value,
+      setValue,
+      rangeValue,
+      setRangeValue,
+      range,
+      min,
+      max,
+      step,
+      orientation,
+      disabled,
+      formatValueText,
+    }),
+    [
+      behavior,
+      value,
+      setValue,
+      rangeValue,
+      setRangeValue,
+      range,
+      min,
+      max,
+      step,
+      orientation,
+      disabled,
+      formatValueText,
+    ]
+  );
+
+  return <SliderProvider value={contextValue}>{children}</SliderProvider>;
+}
+
+SliderRoot.displayName = "Slider.Root";

package/templates/slider/slider-thumb.tsx

@@ -0,0 +1,213 @@
+/**
+ * Slider Thumb component - draggable handle for value selection.
+ */
+
+import type { ThumbType } from "@hypoth-ui/primitives-dom";
+import {
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useSliderContext } from "./slider-context.js";
+
+export interface SliderThumbProps extends HTMLAttributes<HTMLDivElement> {
+  /** Thumb type for range mode */
+  type?: "single" | "min" | "max";
+  /** Accessible label */
+  "aria-label"?: string;
+}
+
+/**
+ * Draggable thumb for selecting values.
+ * In range mode, use type="min" and type="max" for the two thumbs.
+ *
+ * @example
+ * ```tsx
+ * // Single thumb
+ * <Slider.Thumb />
+ *
+ * // Range thumbs
+ * <Slider.Thumb type="min" aria-label="Minimum price" />
+ * <Slider.Thumb type="max" aria-label="Maximum price" />
+ * ```
+ */
+export const SliderThumb = forwardRef<HTMLDivElement, SliderThumbProps>(
+  (
+    {
+      type = "single",
+      className,
+      style,
+      "aria-label": ariaLabel,
+      onPointerDown,
+      onKeyDown,
+      ...restProps
+    },
+    ref
+  ) => {
+    const { behavior, range, min, max, orientation, disabled, formatValueText } =
+      useSliderContext("Slider.Thumb");
+    const internalRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    // Determine actual thumb type
+    const thumbType: ThumbType = range ? (type as "min" | "max") : "single";
+
+    // Get current value for this thumb
+    const { state } = behavior;
+    const value =
+      thumbType === "single"
+        ? state.value
+        : thumbType === "min"
+          ? state.rangeValue.min
+          : state.rangeValue.max;
+
+    // Calculate position
+    const percent = behavior.valueToPercent(value);
+    const isVertical = orientation === "vertical";
+    const positionStyle: React.CSSProperties = isVertical
+      ? { bottom: `${percent}%` }
+      : { left: `${percent}%` };
+
+    // Determine value constraints
+    let valueMin = min;
+    let valueMax = max;
+    if (range) {
+      if (thumbType === "min") {
+        valueMax = state.rangeValue.max;
+      } else if (thumbType === "max") {
+        valueMin = state.rangeValue.min;
+      }
+    }
+
+    // Value text for screen readers
+    const valueText = formatValueText ? formatValueText(value) : String(value);
+
+    // Pointer event handlers
+    const handlePointerDown = useCallback(
+      (event: ReactPointerEvent<HTMLDivElement>) => {
+        if (disabled) return;
+
+        event.preventDefault();
+        (event.target as HTMLElement).setPointerCapture(event.pointerId);
+
+        behavior.startDrag(thumbType, event.nativeEvent as PointerEvent);
+        setIsDragging(true);
+
+        onPointerDown?.(event);
+      },
+      [behavior, thumbType, disabled, onPointerDown]
+    );
+
+    // Global pointer move/up handlers
+    useEffect(() => {
+      if (!isDragging) return;
+
+      const handlePointerMove = (event: globalThis.PointerEvent) => {
+        behavior.drag(event);
+      };
+
+      const handlePointerUp = () => {
+        behavior.endDrag();
+        setIsDragging(false);
+      };
+
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+
+      return () => {
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [behavior, isDragging]);
+
+    // Keyboard handlers
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        if (disabled) return;
+
+        switch (event.key) {
+          case "ArrowRight":
+          case "ArrowUp":
+            event.preventDefault();
+            if (isVertical ? event.key === "ArrowUp" : event.key === "ArrowRight") {
+              behavior.increment(thumbType);
+            } else {
+              behavior.decrement(thumbType);
+            }
+            break;
+          case "ArrowLeft":
+          case "ArrowDown":
+            event.preventDefault();
+            if (isVertical ? event.key === "ArrowDown" : event.key === "ArrowLeft") {
+              behavior.decrement(thumbType);
+            } else {
+              behavior.increment(thumbType);
+            }
+            break;
+          case "PageUp":
+            event.preventDefault();
+            behavior.increment(thumbType, true);
+            break;
+          case "PageDown":
+            event.preventDefault();
+            behavior.decrement(thumbType, true);
+            break;
+          case "Home":
+            event.preventDefault();
+            behavior.setToMin(thumbType);
+            break;
+          case "End":
+            event.preventDefault();
+            behavior.setToMax(thumbType);
+            break;
+        }
+
+        onKeyDown?.(event);
+      },
+      [behavior, thumbType, isVertical, disabled, onKeyDown]
+    );
+
+    return (
+      <div
+        ref={mergedRef}
+        role="slider"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={ariaLabel}
+        aria-valuemin={valueMin}
+        aria-valuemax={valueMax}
+        aria-valuenow={value}
+        aria-valuetext={valueText}
+        aria-orientation={orientation}
+        aria-disabled={disabled || undefined}
+        className={className}
+        style={{ ...positionStyle, ...style }}
+        data-thumb={thumbType}
+        data-dragging={isDragging || undefined}
+        data-disabled={disabled || undefined}
+        onPointerDown={handlePointerDown}
+        onKeyDown={handleKeyDown}
+        {...restProps}
+      />
+    );
+  }
+);
+
+SliderThumb.displayName = "Slider.Thumb";

package/templates/slider/slider-track.tsx

@@ -0,0 +1,113 @@
+/**
+ * Slider Track component - the track along which thumbs move.
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { useSliderContext } from "./slider-context.js";
+
+export interface SliderTrackProps extends HTMLAttributes<HTMLDivElement> {
+  /** Track content (Range, Thumb components) */
+  children?: ReactNode;
+}
+
+/**
+ * Track component that contains the range and thumb elements.
+ * Handles click-to-position functionality.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ *   <Slider.Thumb />
+ * </Slider.Track>
+ * ```
+ */
+export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
+  ({ children, className, onClick, ...restProps }, ref) => {
+    const { behavior, range, orientation, disabled } = useSliderContext("Slider.Track");
+    const internalRef = useRef<HTMLDivElement>(null);
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    // Set track element on behavior
+    useEffect(() => {
+      if (internalRef.current) {
+        behavior.trackElement = internalRef.current;
+      }
+      return () => {
+        behavior.trackElement = null;
+      };
+    }, [behavior]);
+
+    const handleClick = useCallback(
+      (event: ReactPointerEvent<HTMLDivElement>) => {
+        if (disabled) return;
+
+        const track = internalRef.current;
+        if (!track) return;
+
+        // Determine click position as percentage
+        const rect = track.getBoundingClientRect();
+        let percent: number;
+
+        if (orientation === "horizontal") {
+          percent = ((event.clientX - rect.left) / rect.width) * 100;
+        } else {
+          percent = 100 - ((event.clientY - rect.top) / rect.height) * 100;
+        }
+
+        // Determine which thumb to move
+        const clickValue = behavior.percentToValue(percent);
+        let thumb: "single" | "min" | "max" = "single";
+
+        if (range) {
+          const { rangeValue } = behavior.state;
+          const minDist = Math.abs(clickValue - rangeValue.min);
+          const maxDist = Math.abs(clickValue - rangeValue.max);
+          thumb = minDist <= maxDist ? "min" : "max";
+        }
+
+        // Move thumb to click position
+        behavior.startDrag(thumb, event.nativeEvent as PointerEvent);
+        behavior.endDrag();
+
+        onClick?.(event);
+      },
+      [behavior, range, orientation, disabled, onClick]
+    );
+
+    return (
+      <div
+        ref={mergedRef}
+        className={className}
+        data-orientation={orientation}
+        data-disabled={disabled || undefined}
+        onClick={handleClick}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SliderTrack.displayName = "Slider.Track";

package/templates/slider/wc/index.ts

@@ -0,0 +1 @@
+export { DsSlider } from "./slider.js";