aplance-ui 1.1.0 → 1.2.0

package/registry/components/primitives/slider/types.ts

@@ -0,0 +1,140 @@
+import type {
+  CSSProperties,
+  ComponentPropsWithoutRef,
+  ReactNode,
+  Ref,
+} from "react";
+import type { SliderApi } from "./slider-context";
+
+export const sliderEffects = ["slide", "fade", "scale"] as const;
+export type SliderEffect = (typeof sliderEffects)[number];
+
+export const sliderAlignments = ["start", "center", "end"] as const;
+export type SliderAlign = (typeof sliderAlignments)[number];
+
+export const sliderPaginationTypes = ["dots", "fraction", "progress"] as const;
+export type SliderPaginationType = (typeof sliderPaginationTypes)[number];
+
+export type SliderSlidesPerView = number | "auto";
+
+export type SliderResponsiveOptions = {
+  slidesPerView?: SliderSlidesPerView;
+  slidesPerGroup?: number;
+  spaceBetween?: number;
+  centered?: boolean;
+  align?: SliderAlign;
+  effect?: SliderEffect;
+};
+
+/** Responsive overrides keyed by minimum viewport width in px. */
+export type SliderResponsive = Record<number, SliderResponsiveOptions>;
+
+export type SliderAutoplayOptions = {
+  /** Milliseconds between auto-advances. */
+  delay?: number;
+  /** Pause autoplay while pointer hovers the slider. */
+  pauseOnHover?: boolean;
+  /** Pause autoplay while focus is inside the slider. */
+  pauseOnFocus?: boolean;
+  /** Permanently stop autoplay after the first user interaction. */
+  stopOnInteraction?: boolean;
+  /** Autoplay previous instead of next. */
+  reverseDirection?: boolean;
+};
+
+export type SliderNavigationOptions = {
+  prevIcon?: ReactNode;
+  nextIcon?: ReactNode;
+  ariaPrev?: string;
+  ariaNext?: string;
+  className?: string;
+};
+
+export type SliderPaginationOptions = {
+  type?: SliderPaginationType;
+  /** When true, dots/fraction items are clickable. */
+  clickable?: boolean;
+  /** Paginate by snap pages or every real slide. */
+  items?: "snaps" | "slides";
+  className?: string;
+};
+
+export type SliderSlideState = {
+  index: number;
+  renderedIndex: number;
+  isActive: boolean;
+  isVisible: boolean;
+  isClone: boolean;
+};
+
+export type SliderHandle = {
+  next: (steps?: number) => void;
+  prev: (steps?: number) => void;
+  goTo: (index: number) => void;
+  slideTo: (index: number) => void;
+  stopAutoplay: () => void;
+  index: number;
+  count: number;
+  snapCount: number;
+};
+
+export type SliderProps = {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  ref?: Ref<SliderHandle>;
+  ariaLabel?: string;
+
+  /** Slide transition effect. `fade` and `scale` are single-view effects. */
+  effect?: SliderEffect;
+  /** Alignment of the active slide inside the viewport. */
+  align?: SliderAlign;
+  /** Center active slides. Alias for align="center". */
+  centered?: boolean;
+
+  /** Visible slides per viewport. Floats and "auto" are supported. */
+  slidesPerView?: SliderSlidesPerView;
+  /** Number of slides to move per next/previous action. */
+  slidesPerGroup?: number;
+  /** Pixel gap between slides. */
+  spaceBetween?: number;
+  /** Per-breakpoint overrides. */
+  responsive?: SliderResponsive;
+
+  /** Controlled current snap/slide index. */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  onSlideChange?: (index: number) => void;
+  /** Wrap-around with cloned edges and an invisible snap-back. */
+  loop?: boolean;
+  /** When true, next on the last non-loop slide rewinds to the start. */
+  rewind?: boolean;
+  /** Transition duration in ms. */
+  speed?: number;
+  /** Easing for transform/opacity transitions. */
+  easing?: string;
+  /** Allow pointer drag / touch swipe. */
+  draggable?: boolean;
+  /** Minimum drag distance in px to commit a swipe. */
+  swipeThreshold?: number;
+  /** Selector for interactive elements that should not start a drag. */
+  dragIgnoreSelector?: string;
+  /** Enable left/right arrow keyboard navigation while focus is inside. */
+  keyboard?: boolean;
+  /** Enable trackpad/mouse-wheel navigation. */
+  mousewheel?: boolean;
+  /** Let the viewport height follow the active slide. */
+  autoHeight?: boolean;
+
+  autoplay?: boolean | SliderAutoplayOptions;
+  /** Pauses autoplay on hover when autoplay.pauseOnHover is enabled. */
+  pauseOnHover?: boolean;
+  navigation?: boolean | SliderNavigationOptions;
+  pagination?: boolean | SliderPaginationOptions;
+
+  /** Render arbitrary controls inside the context without making them slides. */
+  renderControls?: (api: SliderApi) => ReactNode;
+  /** Customize each slide wrapper's contents. */
+  renderSlide?: (child: ReactNode, state: SliderSlideState) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange">;

package/registry/components/primitives/slider/utils.ts

@@ -0,0 +1,88 @@
+import type {
+  SliderResponsive,
+  SliderResponsiveOptions,
+  SliderSlidesPerView,
+} from "./types";
+
+export const clamp = (value: number, min: number, max: number) => {
+  const safeMin = Number.isFinite(min) ? min : 0;
+  const safeMax = Number.isFinite(max) ? max : safeMin;
+  const lower = Math.min(safeMin, safeMax);
+  const upper = Math.max(safeMin, safeMax);
+  const safeValue = Number.isFinite(value) ? value : lower;
+
+  return Math.min(Math.max(safeValue, lower), upper);
+};
+
+export const wrap = (value: number, length: number) =>
+  !Number.isFinite(value) || !Number.isFinite(length) || length <= 0
+    ? 0
+    : ((value % length) + length) % length;
+
+export const getSnapMax = (
+  count: number,
+  slidesPerView: SliderSlidesPerView,
+) => {
+  if (count <= 0) return 0;
+  if (slidesPerView === "auto") return count - 1;
+  return Math.max(0, count - Math.max(1, Math.floor(Math.max(1, slidesPerView))));
+};
+
+export const normalizeIndex = (
+  index: number,
+  count: number,
+  maxIndex: number,
+  loop: boolean,
+) => {
+  if (count <= 0) return 0;
+  const safeIndex = Number.isFinite(index) ? index : 0;
+  return loop ? wrap(safeIndex, count) : clamp(safeIndex, 0, maxIndex);
+};
+
+export const resolveResponsive = (
+  width: number,
+  base: Required<SliderResponsiveOptions>,
+  responsive?: SliderResponsive,
+): Required<SliderResponsiveOptions> => {
+  if (!responsive || width <= 0) return base;
+
+  const active = { ...base };
+  const breakpoints = Object.keys(responsive)
+    .map(Number)
+    .filter((value) => Number.isFinite(value))
+    .sort((a, b) => a - b);
+
+  for (const breakpoint of breakpoints) {
+    if (width < breakpoint) continue;
+    const options = responsive[breakpoint];
+    if (options.slidesPerView !== undefined) {
+      active.slidesPerView = options.slidesPerView;
+    }
+    if (options.slidesPerGroup !== undefined) {
+      active.slidesPerGroup = options.slidesPerGroup;
+    }
+    if (options.spaceBetween !== undefined) {
+      active.spaceBetween = options.spaceBetween;
+    }
+    if (options.centered !== undefined) {
+      active.centered = options.centered;
+    }
+    if (options.align !== undefined) {
+      active.align = options.align;
+    }
+    if (options.effect !== undefined) {
+      active.effect = options.effect;
+    }
+  }
+
+  return active;
+};
+
+export const shouldIgnoreDrag = (target: EventTarget | null, selector: string) => {
+  if (!(target instanceof Element)) return false;
+  try {
+    return Boolean(target.closest(selector));
+  } catch {
+    return false;
+  }
+};

package/registry/components/ui/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,144 @@
+/* ─── Container ──────────────────────────────────────────────────────────────
+   `nav` wrapper. Tokens declared on the root let consumers theme individual
+   parts via CSS variables without overrides.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.container {
+  --breadcrumbs-color: var(--color-muted-foreground);
+  --breadcrumbs-color-hover: var(--color-foreground);
+  --breadcrumbs-color-current: var(--color-foreground);
+  --breadcrumbs-color-separator: var(--color-muted-foreground);
+  --breadcrumbs-font-size: var(--font-size-sm);
+  --breadcrumbs-gap: var(--spacing-3);
+  --breadcrumbs-padding: var(--spacing-2) var(--spacing-3);
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--breadcrumbs-color);
+  font-size: var(--breadcrumbs-font-size);
+  line-height: var(--line-height-md);
+}
+
+.size_sm {
+  --breadcrumbs-font-size: var(--font-size-xs);
+  --breadcrumbs-gap: var(--spacing-2);
+  --breadcrumbs-padding: var(--spacing-1) var(--spacing-2);
+}
+
+/* ─── List ───────────────────────────────────────────────────────────────── */
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--breadcrumbs-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* ─── Crumb (link / button / span) ───────────────────────────────────────── */
+
+.crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--breadcrumbs-padding);
+  border-radius: var(--radius-md);
+  color: inherit;
+  background-color: transparent;
+  font: inherit;
+  border: 0;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: default;
+  transition: var(--transition-fast);
+  transition-property: background-color, color;
+}
+
+.crumb_link {
+  cursor: pointer;
+  color: var(--breadcrumbs-color);
+
+  &:hover {
+    color: var(--breadcrumbs-color-hover);
+    background-color: var(--color-muted);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-2) solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  &[aria-disabled="true"],
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+.crumb_current {
+  color: var(--breadcrumbs-color-current);
+  font-weight: var(--font-weight-medium);
+}
+
+.crumb_disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* ─── Icon + label ───────────────────────────────────────────────────────── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.icon > svg {
+  width: 1em;
+  height: 1em;
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Separator + ellipsis ───────────────────────────────────────────────── */
+
+.separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumbs-color-separator);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.separator_icon {
+  width: 0.875em;
+  height: 0.875em;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-1);
+  color: var(--breadcrumbs-color-separator);
+  letter-spacing: 0.05em;
+  user-select: none;
+}

package/registry/components/ui/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,236 @@
+import {
+  Fragment,
+  type ComponentProps,
+  type CSSProperties,
+  type ElementType,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { IconChevronRight } from "@tabler/icons-react";
+import s from "./breadcrumbs.module.css";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export const breadcrumbsSizes = ["sm", "md"] as const;
+export type BreadcrumbsSize = (typeof breadcrumbsSizes)[number];
+
+type BreadcrumbClickHandler = (
+  event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+) => void;
+
+export type BreadcrumbItem = {
+  /** Stable id when labels can repeat (defaults to the array index). */
+  id?: string;
+  label: ReactNode;
+  /** Renders the crumb as a link when set. */
+  href?: string;
+  /** Optional leading icon (use an `@tabler/icons-react` icon). */
+  icon?: ReactNode;
+  onClick?: BreadcrumbClickHandler;
+  /** Marks the current page. Defaults to the last item when unset. */
+  isCurrent?: boolean;
+  disabled?: boolean;
+  /** Per-item link component override (e.g. Next.js Link). */
+  linkComponent?: ElementType;
+  /** Extra props forwarded to the link element. */
+  linkProps?: Record<string, unknown>;
+};
+
+export type BreadcrumbsProps = {
+  items: BreadcrumbItem[];
+  /** Custom separator node. Defaults to a chevron icon. */
+  separator?: ReactNode;
+  size?: BreadcrumbsSize;
+  /**
+   * Collapse middle items into `...` when items exceed this count.
+   * `0` (default) disables truncation.
+   */
+  maxItems?: number;
+  /** Items kept at the start when collapsing. Default 1. */
+  itemsBeforeCollapse?: number;
+  /** Items kept at the end when collapsing. Default 2. */
+  itemsAfterCollapse?: number;
+  /**
+   * Router-agnostic link component used for all linked items unless an item
+   * provides its own `linkComponent`.
+   */
+  linkComponent?: ElementType;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+} & Omit<ComponentProps<"nav">, "children" | "aria-label">;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const ELLIPSIS_KEY = "__breadcrumbs-ellipsis__";
+
+type ResolvedItem = BreadcrumbItem & { isCurrent: boolean; key: string };
+type ListEntry = ResolvedItem | typeof ELLIPSIS_KEY;
+
+const resolveItems = (items: BreadcrumbItem[]): ResolvedItem[] =>
+  items.map((item, index) => ({
+    ...item,
+    isCurrent: item.isCurrent ?? index === items.length - 1,
+    key: item.id ?? String(index),
+  }));
+
+// Inserts a sentinel where the middle items would have been so the renderer
+// can drop in a single ellipsis separator without re-walking the array.
+const collapseItems = (
+  items: ResolvedItem[],
+  maxItems: number,
+  before: number,
+  after: number,
+): ListEntry[] => {
+  if (!maxItems || items.length <= maxItems) return items;
+  const start = Math.max(0, before);
+  const end = Math.max(0, after);
+  if (start + end >= items.length) return items;
+  return [
+    ...items.slice(0, start),
+    ELLIPSIS_KEY,
+    ...items.slice(items.length - end),
+  ];
+};
+
+// ─── Breadcrumbs ──────────────────────────────────────────────────────────────
+
+export const Breadcrumbs = ({
+  items,
+  separator,
+  size = "md",
+  maxItems = 0,
+  itemsBeforeCollapse = 1,
+  itemsAfterCollapse = 2,
+  linkComponent,
+  ariaLabel = "Breadcrumb",
+  className,
+  style,
+  ...rest
+}: BreadcrumbsProps) => {
+  if (items.length === 0) return null;
+
+  const resolved = resolveItems(items);
+  const entries = collapseItems(
+    resolved,
+    maxItems,
+    itemsBeforeCollapse,
+    itemsAfterCollapse,
+  );
+  // Render the chevron directly (no <Icon> wrapper) so the em-based sizing in
+  // `.separator_icon` actually applies and the chevron scales with the
+  // breadcrumb's font-size across size variants.
+  const separatorNode = separator ?? (
+    <IconChevronRight className={s.separator_icon} />
+  );
+
+  return (
+    <nav
+      className={clsx(s.container, s[`size_${size}`], className)}
+      style={style}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      <ol className={s.list}>
+        {entries.map((entry, index) => {
+          const isLast = index === entries.length - 1;
+          const separatorEl = !isLast ? (
+            <li aria-hidden="true" className={s.separator}>
+              {separatorNode}
+            </li>
+          ) : null;
+
+          if (entry === ELLIPSIS_KEY) {
+            return (
+              <Fragment key={`ellipsis-${index}`}>
+                <li className={s.ellipsis} aria-hidden="true">
+                  &hellip;
+                </li>
+                {separatorEl}
+              </Fragment>
+            );
+          }
+
+          return (
+            <Fragment key={entry.key}>
+              <li className={s.item}>
+                <BreadcrumbCrumb item={entry} linkComponent={linkComponent} />
+              </li>
+              {separatorEl}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+// ─── Crumb (single item) ──────────────────────────────────────────────────────
+
+type BreadcrumbCrumbProps = {
+  item: ResolvedItem;
+  linkComponent?: ElementType;
+};
+
+const BreadcrumbCrumb = ({ item, linkComponent }: BreadcrumbCrumbProps) => {
+  const { label, icon, href, onClick, isCurrent, disabled } = item;
+  const content = (
+    <>
+      {icon ? <span className={s.icon}>{icon}</span> : null}
+      <span className={s.label}>{label}</span>
+    </>
+  );
+
+  // Current page: never a link. aria-current="page" lets assistive tech mark
+  // the destination so users don't navigate to where they already are.
+  if (isCurrent) {
+    return (
+      <span
+        className={clsx(s.crumb, s.crumb_current)}
+        aria-current="page"
+        aria-disabled={disabled || undefined}
+      >
+        {content}
+      </span>
+    );
+  }
+
+  const isLink = Boolean(href) && !disabled;
+  if (isLink) {
+    const LinkElement = item.linkComponent ?? linkComponent ?? "a";
+    return (
+      <LinkElement
+        className={clsx(s.crumb, s.crumb_link)}
+        href={href}
+        onClick={onClick}
+        aria-disabled={disabled || undefined}
+        {...(item.linkProps ?? {})}
+      >
+        {content}
+      </LinkElement>
+    );
+  }
+
+  if (onClick && !disabled) {
+    return (
+      <button
+        type="button"
+        className={clsx(s.crumb, s.crumb_link)}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span
+      className={clsx(s.crumb, disabled && s.crumb_disabled)}
+      aria-disabled={disabled || undefined}
+    >
+      {content}
+    </span>
+  );
+};

package/registry/components/ui/button/button.module.css

@@ -1,8 +1,4 @@
-/* contains all possible styles of button component
-with selectors for different variants and sizes and states
-*/
-
-.base {
+.base {
   --button-fg: var(--color-foreground);
   --button-placeholder: var(--button-fg);
   --button-icon: var(--button-fg);
@@ -28,8 +24,7 @@ with selectors for different variants and sizes and states
   outline: none;
   border: none;
 
-  /* necessary */
-  line-height: 1.125;
+  line-height: 1.125;
 
   svg {
     cursor: pointer;
@@ -41,8 +36,7 @@ with selectors for different variants and sizes and states
     font-size: var(--font-size-xs);
   }
 
-  /* Box layout - perfect square with centered content */
-  &.box {
+  &.box {
     width: var(--spacing-11);
     min-height: unset;
     justify-content: center;