@stasho/ds 0.1.0

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,218 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import {
+  CaretDoubleLeft,
+  CaretDoubleRight,
+  CaretLeft,
+  CaretRight,
+} from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+type PageItem = number | "ellipsis";
+
+type BuildPageRangeArgs = {
+  page: number;
+  totalPages: number;
+  siblingCount: number;
+  showFirstLast: boolean;
+};
+
+function buildPageRange({
+  page,
+  totalPages,
+  siblingCount,
+  showFirstLast,
+}: BuildPageRangeArgs): PageItem[] {
+  if (!showFirstLast) {
+    const left = Math.max(page - siblingCount, 1);
+    const right = Math.min(page + siblingCount, totalPages);
+    const items: PageItem[] = [];
+    for (let i = left; i <= right; i++) {
+      items.push(i);
+    }
+    return items;
+  }
+
+  const maxSlots = 2 * siblingCount + 5;
+
+  if (totalPages <= maxSlots) {
+    const items: PageItem[] = [];
+    for (let i = 1; i <= totalPages; i++) {
+      items.push(i);
+    }
+    return items;
+  }
+
+  const nearStart = page <= siblingCount + 3;
+  const nearEnd = page >= totalPages - siblingCount - 2;
+
+  if (nearStart) {
+    const items: PageItem[] = [];
+    for (let i = 1; i <= maxSlots - 2; i++) {
+      items.push(i);
+    }
+    items.push("ellipsis", totalPages);
+    return items;
+  }
+
+  if (nearEnd) {
+    const items: PageItem[] = [1, "ellipsis"];
+    for (let i = totalPages - (maxSlots - 3); i <= totalPages; i++) {
+      items.push(i);
+    }
+    return items;
+  }
+
+  const items: PageItem[] = [1, "ellipsis"];
+  for (let i = page - siblingCount; i <= page + siblingCount; i++) {
+    items.push(i);
+  }
+  items.push("ellipsis", totalPages);
+  return items;
+}
+
+type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  showFirstLast?: boolean;
+};
+
+const NAV_BUTTON = [
+  "inline-flex items-center justify-center",
+  "size-8 rounded-full",
+  "text-primary-600 dark:text-primary-400",
+  "hover:bg-primary-100 dark:hover:bg-primary-200/10",
+  "transition-colors cursor-pointer",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500",
+].join(" ");
+
+const NAV_DISABLED = "opacity-50 pointer-events-none";
+
+const PAGE_BUTTON = [
+  "inline-flex items-center justify-center",
+  "size-8 rounded-full",
+  "font-heading font-bold text-lg",
+  "text-primary-600 dark:text-primary-400",
+  "hover:bg-primary-100 dark:hover:bg-primary-200/10",
+  "transition-colors cursor-pointer",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500",
+].join(" ");
+
+const PAGE_ACTIVE = [
+  "bg-primary-400 text-white dark:bg-primary-600 dark:text-white",
+  "hover:bg-primary-400 dark:hover:bg-primary-600",
+].join(" ");
+
+const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      page,
+      totalPages,
+      onPageChange,
+      siblingCount = 1,
+      showFirstLast = true,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const items = buildPageRange({
+      page,
+      totalPages,
+      siblingCount,
+      showFirstLast,
+    });
+
+    const isFirst = page <= 1;
+    const isLast = page >= totalPages;
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Pagination"
+        className={cn("flex items-center gap-4", className)}
+        {...rest}
+      >
+        {showFirstLast && (
+          <button
+            type="button"
+            className={cn(NAV_BUTTON, isFirst && NAV_DISABLED)}
+            aria-label="First page"
+            aria-disabled={isFirst || undefined}
+            onClick={isFirst ? undefined : () => onPageChange(1)}
+          >
+            <CaretDoubleLeft
+              weight="bold"
+              className="size-4"
+              aria-hidden="true"
+            />
+          </button>
+        )}
+
+        <button
+          type="button"
+          className={cn(NAV_BUTTON, isFirst && NAV_DISABLED)}
+          aria-label="Previous page"
+          aria-disabled={isFirst || undefined}
+          onClick={isFirst ? undefined : () => onPageChange(page - 1)}
+        >
+          <CaretLeft weight="bold" className="size-4" aria-hidden="true" />
+        </button>
+
+        {items.map((item, i) =>
+          item === "ellipsis" ? (
+            <span
+              key={i}
+              className="inline-flex items-center justify-center size-8 font-heading font-bold text-lg text-primary-600 dark:text-primary-400 select-none"
+              aria-hidden="true"
+            >
+              {"\u2026"}
+            </span>
+          ) : (
+            <button
+              key={i}
+              type="button"
+              className={cn(PAGE_BUTTON, item === page && PAGE_ACTIVE)}
+              aria-label={`Page ${item}`}
+              aria-current={item === page ? "page" : undefined}
+              onClick={item === page ? undefined : () => onPageChange(item)}
+            >
+              {item}
+            </button>
+          ),
+        )}
+
+        <button
+          type="button"
+          className={cn(NAV_BUTTON, isLast && NAV_DISABLED)}
+          aria-label="Next page"
+          aria-disabled={isLast || undefined}
+          onClick={isLast ? undefined : () => onPageChange(page + 1)}
+        >
+          <CaretRight weight="bold" className="size-4" aria-hidden="true" />
+        </button>
+
+        {showFirstLast && (
+          <button
+            type="button"
+            className={cn(NAV_BUTTON, isLast && NAV_DISABLED)}
+            aria-label="Last page"
+            aria-disabled={isLast || undefined}
+            onClick={isLast ? undefined : () => onPageChange(totalPages)}
+          >
+            <CaretDoubleRight
+              weight="bold"
+              className="size-4"
+              aria-hidden="true"
+            />
+          </button>
+        )}
+      </nav>
+    );
+  },
+);
+
+Pagination.displayName = "Pagination";
+
+export { buildPageRange, Pagination, type PageItem, type PaginationProps };

package/src/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,134 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+/* ── Variants ──────────────────────────────────── */
+
+const progressBarVariants = cva(
+  "relative rounded-full bg-surface overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-1.5",
+        lg: "h-2.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+/* ── ProgressBarDescription ────────────────────── */
+
+type ProgressBarDescriptionProps = HTMLAttributes<HTMLSpanElement>;
+
+const ProgressBarDescription = forwardRef<
+  HTMLSpanElement,
+  ProgressBarDescriptionProps
+>(({ className, ...rest }, ref) => (
+  <span
+    ref={ref}
+    data-description=""
+    className={cn("text-xs text-muted-foreground", className)}
+    {...rest}
+  />
+));
+
+ProgressBarDescription.displayName = "ProgressBarDescription";
+
+/* ── ProgressBar ───────────────────────────────── */
+
+type ProgressBarProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof progressBarVariants> & {
+    /** 0–max. Omit for indeterminate mode. */
+    value?: number;
+    /** Upper bound. Default 100. */
+    max?: number;
+    /** Accessible label (required). Becomes aria-label. */
+    label: string;
+    children?: ReactNode;
+  };
+
+const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  ({ value, max = 100, label, size, className, children, ...rest }, ref) => {
+    const descId = useId();
+    const indeterminate = value === undefined;
+
+    const clampedPercent = indeterminate
+      ? 0
+      : (Math.min(Math.max(value, 0), max) / max) * 100;
+
+    let hasDescription = false;
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === ProgressBarDescription) {
+        hasDescription = true;
+      }
+    });
+
+    const track = (
+      <div
+        ref={hasDescription ? undefined : ref}
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={indeterminate ? undefined : 0}
+        aria-valuemax={indeterminate ? undefined : max}
+        aria-valuenow={indeterminate ? undefined : Math.round(clampedPercent)}
+        aria-describedby={hasDescription ? descId : undefined}
+        className={cn(progressBarVariants({ size }), className)}
+        {...(hasDescription ? {} : rest)}
+      >
+        <div
+          data-fill=""
+          data-indeterminate={indeterminate ? "" : undefined}
+          className={cn(
+            "h-full rounded-full bg-primary",
+            indeterminate
+              ? "animate-progress-indeterminate"
+              : "transition-all",
+            "motion-reduce:animate-none",
+          )}
+          style={indeterminate ? undefined : { width: `${clampedPercent}%` }}
+        />
+      </div>
+    );
+
+    if (!hasDescription) return track;
+
+    const descChildren = Children.map(children, (child) => {
+      if (
+        isValidElement<ProgressBarDescriptionProps>(child) &&
+        child.type === ProgressBarDescription
+      ) {
+        return cloneElement(child, { id: descId });
+      }
+      return child;
+    });
+
+    return (
+      <div ref={ref} className="flex flex-col gap-1.5" {...rest}>
+        {track}
+        {descChildren}
+      </div>
+    );
+  },
+);
+
+ProgressBar.displayName = "ProgressBar";
+
+/* ── Exports ───────────────────────────────────── */
+
+export {
+  ProgressBar,
+  ProgressBarDescription,
+  progressBarVariants,
+  type ProgressBarProps,
+  type ProgressBarDescriptionProps,
+};

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const radioItemVariants = cva(
+  [
+    "peer shrink-0 rounded-full bg-surface",
+    "border-3 border-edge",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[state=checked]:border-primary",
+    "transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type RadioGroupProps = ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Root
+> & {
+  size?: "xs" | "sm" | "md";
+};
+
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <RadioGroupPrimitive.Root
+        ref={ref}
+        className={cn("flex flex-col gap-2", className)}
+        {...rest}
+      />
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+type RadioGroupItemProps = Omit<
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+  "size"
+> &
+  VariantProps<typeof radioItemVariants>;
+
+const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ size, className, ...rest }, ref) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(radioItemVariants({ size }), className)}
+        {...rest}
+      >
+        <RadioGroupPrimitive.Indicator
+          forceMount
+          className={cn(
+            "flex size-full items-center justify-center",
+            "[clip-path:circle(0%_at_50%_50%)]",
+            "data-[state=checked]:[clip-path:circle(100%_at_50%_50%)]",
+            "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
+          )}
+        >
+          <span className="block size-[80%] rounded-full bg-primary" />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export {
+  RadioGroup,
+  RadioGroupItem,
+  radioItemVariants,
+  type RadioGroupProps,
+  type RadioGroupItemProps,
+};

package/src/components/select/select.tsx

@@ -0,0 +1,124 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CaretDown, Check } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const triggerVariants = cva(
+  [
+    "inline-flex items-center justify-between",
+    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
+    "border-0 rounded-full",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 transition-colors",
+    "data-[placeholder]:text-muted-foreground",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type SelectProps = Omit<
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+  "children"
+> &
+  VariantProps<typeof triggerVariants> & {
+    options: SelectOption[];
+    placeholder?: string;
+    error?: boolean;
+    className?: string;
+    id?: string;
+    "aria-describedby"?: string;
+  };
+
+const Select = forwardRef<HTMLButtonElement, SelectProps>(
+  (
+    {
+      options,
+      placeholder,
+      size,
+      error = false,
+      className,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <SelectPrimitive.Root {...rest}>
+        <SelectPrimitive.Trigger
+          ref={ref}
+          id={id}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={error || undefined}
+          className={cn(
+            triggerVariants({ size }),
+            error && "border-3 border-error-400 hover:border-error-500",
+            className,
+          )}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon className="ml-2 shrink-0 text-muted-foreground">
+            <CaretDown weight="bold" className="size-4" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            className={cn(
+              "z-50 overflow-hidden rounded-2xl",
+              "bg-surface border border-edge shadow-brand",
+            )}
+            position="popper"
+            sideOffset={4}
+          >
+            <SelectPrimitive.Viewport className="p-1 min-w-[var(--radix-select-trigger-width)]">
+              {options.map((option) => (
+                <SelectPrimitive.Item
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled ?? false}
+                  className={cn(
+                    "relative flex items-center rounded-xl px-4 py-2",
+                    "text-sm text-foreground cursor-pointer select-none",
+                    "outline-none",
+                    "data-[highlighted]:bg-muted",
+                    "data-[disabled]:opacity-50",
+                    "data-[disabled]:pointer-events-none",
+                  )}
+                >
+                  <SelectPrimitive.ItemText>
+                    {option.label}
+                  </SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="ml-auto pl-4">
+                    <Check weight="bold" className="size-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    );
+  },
+);
+
+Select.displayName = "Select";
+
+export { Select, triggerVariants, type SelectProps, type SelectOption };

package/src/components/slider/slider.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const trackVariants = cva(
+  [
+    "relative w-full grow overflow-hidden rounded-full",
+    "bg-neutral-200 dark:bg-base-700",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const thumbVariants = cva(
+  [
+    "block rounded-full bg-white",
+    "border-2 border-primary-500",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:pointer-events-none",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type SliderProps = Omit<
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
+  "size"
+> &
+  VariantProps<typeof trackVariants> & {
+    error?: boolean;
+    showTooltip?: boolean;
+  };
+
+const Slider = forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(
+  (
+    {
+      size,
+      error = false,
+      showTooltip = false,
+      className,
+      disabled,
+      onValueChange: onValueChangeProp,
+      ...rootProps
+    },
+    ref,
+  ) => {
+    const [hovering, setHovering] = useState(false);
+    const [internalValue, setInternalValue] = useState(
+      rootProps.defaultValue ?? rootProps.value ?? [0],
+    );
+
+    const displayValue = rootProps.value ?? internalValue;
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        {...(disabled ? { disabled: true } : {})}
+        className={cn(
+          "relative flex w-full touch-none select-none items-center",
+          disabled && "opacity-50 pointer-events-none",
+          className,
+        )}
+        onValueChange={(val) => {
+          setInternalValue(val);
+          onValueChangeProp?.(val);
+        }}
+        onPointerEnter={() => setHovering(true)}
+        onPointerLeave={() => setHovering(false)}
+        {...rootProps}
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            trackVariants({ size }),
+            error && "ring-2 ring-error-400",
+          )}
+        >
+          <SliderPrimitive.Range className="absolute h-full bg-primary-500 rounded-full" />
+        </SliderPrimitive.Track>
+        {displayValue.map((val, i) => (
+          <SliderPrimitive.Thumb
+            key={i}
+            className={cn(thumbVariants({ size }), "relative")}
+          >
+            {showTooltip && hovering && (
+              <span
+                className={cn(
+                  "absolute bottom-full left-1/2 -translate-x-1/2 mb-2",
+                  "rounded-md bg-neutral-900 dark:bg-base-700 px-2 py-1",
+                  "text-xs text-white whitespace-nowrap pointer-events-none",
+                )}
+              >
+                {val}
+              </span>
+            )}
+          </SliderPrimitive.Thumb>
+        ))}
+      </SliderPrimitive.Root>
+    );
+  },
+);
+
+Slider.displayName = "Slider";
+
+export { Slider, trackVariants, thumbVariants, type SliderProps };