@carefully-built/cli 0.1.0 → 0.1.2

package/registry/ui/searchable-select/utils/search.ts

@@ -0,0 +1,227 @@
+function normalizeSearchValue(value: string): string {
+  return value
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLocaleLowerCase()
+    .replace(/[^\p{L}\p{N}\s]/gu, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function tokenize(value: string): string[] {
+  return normalizeSearchValue(value)
+    .split(' ')
+    .filter((token) => token.length > 0);
+}
+
+function flattenSearchPart(
+  part: SearchTextPart,
+  fragments: string[],
+): void {
+  if (typeof part === 'string') {
+    const normalized = part.trim();
+    if (normalized.length > 0) {
+      fragments.push(normalized);
+    }
+    return;
+  }
+
+  if (!part) {
+    return;
+  }
+
+  for (const nestedPart of part) {
+    flattenSearchPart(nestedPart, fragments);
+  }
+}
+
+function getMaxDistance(term: string): number {
+  if (term.length <= 4) {
+    return 1;
+  }
+
+  if (term.length <= 8) {
+    return 2;
+  }
+
+  return 3;
+}
+
+function damerauLevenshtein(left: string, right: string): number {
+  const rows = left.length + 1;
+  const columns = right.length + 1;
+  const matrix = Array.from({ length: rows }, () => Array<number>(columns).fill(0));
+
+  for (let row = 0; row < rows; row += 1) {
+    const matrixRow = matrix[row];
+    if (!matrixRow) {
+      continue;
+    }
+    matrixRow[0] = row;
+  }
+
+  for (let column = 0; column < columns; column += 1) {
+    const firstRow = matrix[0];
+    if (!firstRow) {
+      return 0;
+    }
+    firstRow[column] = column;
+  }
+
+  for (let row = 1; row < rows; row += 1) {
+    const currentRow = matrix[row];
+    const previousRow = matrix[row - 1];
+    if (!currentRow || !previousRow) {
+      continue;
+    }
+
+    for (let column = 1; column < columns; column += 1) {
+      const substitutionCost = left[row - 1] === right[column - 1] ? 0 : 1;
+      const leftCost = currentRow[column - 1];
+      const topCost = previousRow[column];
+      const diagonalCost = previousRow[column - 1];
+
+      if (
+        leftCost === undefined ||
+        topCost === undefined ||
+        diagonalCost === undefined
+      ) {
+        continue;
+      }
+
+      currentRow[column] = Math.min(
+        topCost + 1,
+        leftCost + 1,
+        diagonalCost + substitutionCost,
+      );
+
+      if (
+        row > 1 &&
+        column > 1 &&
+        left[row - 1] === right[column - 2] &&
+        left[row - 2] === right[column - 1]
+      ) {
+        const transpositionRow = matrix[row - 2];
+        const transpositionCost = transpositionRow?.[column - 2];
+
+        if (transpositionCost !== undefined) {
+          currentRow[column] = Math.min(currentRow[column] ?? Number.POSITIVE_INFINITY, transpositionCost + 1);
+        }
+      }
+    }
+  }
+
+  return matrix[left.length]?.[right.length] ?? 0;
+}
+
+function scoreTokenMatch(
+  searchTerm: string,
+  candidateToken: string,
+  isLastTerm: boolean,
+): number | null {
+  if (candidateToken === searchTerm) {
+    return 120;
+  }
+
+  if (isLastTerm && candidateToken.startsWith(searchTerm)) {
+    return 90 - Math.max(candidateToken.length - searchTerm.length, 0);
+  }
+
+  const distance = damerauLevenshtein(searchTerm, candidateToken);
+  if (distance > getMaxDistance(searchTerm)) {
+    return null;
+  }
+
+  return 70 - distance * 10 - Math.abs(candidateToken.length - searchTerm.length);
+}
+
+export type SearchTextPart =
+  | string
+  | null
+  | undefined
+  | readonly SearchTextPart[];
+
+export function buildSearchText(...parts: SearchTextPart[]): string {
+  const fragments: string[] = [];
+
+  for (const part of parts) {
+    flattenSearchPart(part, fragments);
+  }
+
+  return fragments.join(' ').replace(/\s+/g, ' ').trim();
+}
+
+export function scoreFuzzyMatch(query: string, candidate: string): number | null {
+  const normalizedQuery = normalizeSearchValue(query);
+  if (normalizedQuery.length === 0) {
+    return 0;
+  }
+
+  const queryTerms = tokenize(normalizedQuery);
+  const candidateTerms = tokenize(candidate);
+  const normalizedCandidate = normalizeSearchValue(candidate);
+
+  if (queryTerms.length === 0 || candidateTerms.length === 0) {
+    return null;
+  }
+
+  let score = normalizedCandidate.includes(normalizedQuery) ? 40 : 0;
+
+  for (const [index, queryTerm] of queryTerms.entries()) {
+    let bestScore: number | null = null;
+
+    for (const candidateTerm of candidateTerms) {
+      const tokenScore = scoreTokenMatch(
+        queryTerm,
+        candidateTerm,
+        index === queryTerms.length - 1,
+      );
+
+      if (tokenScore !== null && (bestScore === null || tokenScore > bestScore)) {
+        bestScore = tokenScore;
+      }
+    }
+
+    if (bestScore === null) {
+      return null;
+    }
+
+    score += bestScore;
+  }
+
+  return score;
+}
+
+export function filterAndRankBySearch<T extends { searchText: string }>(
+  items: readonly T[],
+  query: string,
+): T[] {
+  const normalizedQuery = normalizeSearchValue(query);
+
+  if (normalizedQuery.length === 0) {
+    return [...items];
+  }
+
+  return items
+    .map((item) => ({
+      item,
+      score: scoreFuzzyMatch(normalizedQuery, item.searchText),
+    }))
+    .filter((result): result is { item: T; score: number } => result.score !== null)
+    .sort((left, right) => right.score - left.score)
+    .map((result) => result.item);
+}
+
+export function rankBySearch<T>(
+  items: readonly T[],
+  query: string,
+  getSearchText: (item: T) => string,
+): T[] {
+  return filterAndRankBySearch(
+    items.map((item) => ({
+      item,
+      searchText: getSearchText(item),
+    })),
+    query,
+  ).map((result) => result.item);
+}

package/registry/ui/searchable-select-position/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "searchable-select-position",
+  "description": "Editable source registry entry for searchable-select-position.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "SearchableSelectRect",
+    "resolveSearchableSelectDropdownPosition"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "search/searchable-select-position.ts",
+      "target": "components/ui/search/searchable-select-position.ts"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/searchable-select-position/search/searchable-select-position.ts

@@ -0,0 +1,95 @@
+export interface SearchableSelectRect {
+  readonly top: number;
+  readonly left: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+interface ResolveSearchableSelectDropdownPositionArgs {
+  readonly triggerRect: SearchableSelectRect;
+  readonly boundaryRect?: SearchableSelectRect;
+  readonly portalRect?: SearchableSelectRect;
+  readonly contentWidth: number;
+  readonly contentHeight: number;
+  readonly viewportWidth: number;
+  readonly viewportHeight: number;
+  readonly offset?: number;
+  readonly padding?: number;
+}
+
+interface SearchableSelectDropdownPosition {
+  readonly top: number;
+  readonly left: number;
+  readonly width: number;
+  readonly maxHeight: number;
+  readonly direction: 'up' | 'down';
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) {
+    return min;
+  }
+
+  return Math.min(Math.max(value, min), max);
+}
+
+export function resolveSearchableSelectDropdownPosition({
+  triggerRect,
+  boundaryRect,
+  portalRect,
+  contentWidth,
+  contentHeight,
+  viewportWidth,
+  viewportHeight,
+  offset = 8,
+  padding = 8,
+}: ResolveSearchableSelectDropdownPositionArgs): SearchableSelectDropdownPosition {
+  const boundaryLeftEdge = boundaryRect?.left ?? 0;
+  const boundaryRightEdge = boundaryRect?.right ?? viewportWidth;
+  const boundaryTopEdge = boundaryRect?.top ?? 0;
+  const boundaryBottomEdge = boundaryRect?.bottom ?? viewportHeight;
+  const boundaryLeft = Math.max(padding, boundaryLeftEdge + padding);
+  const boundaryRight = Math.min(
+    viewportWidth - padding,
+    boundaryRightEdge - padding,
+  );
+  const boundaryTop = Math.max(padding, boundaryTopEdge + padding);
+  const boundaryBottom = Math.min(
+    viewportHeight - padding,
+    boundaryBottomEdge - padding,
+  );
+  const availableWidth = Math.max(0, boundaryRight - boundaryLeft);
+  const width = Math.min(contentWidth, availableWidth);
+  const alignedRightLeft = triggerRect.right - width;
+  const defaultLeft = triggerRect.left;
+  const shouldAlignRight =
+    defaultLeft + width > boundaryRight && alignedRightLeft >= boundaryLeft;
+  const left = clamp(
+    shouldAlignRight ? alignedRightLeft : defaultLeft,
+    boundaryLeft,
+    boundaryRight - width,
+  );
+
+  const spaceAbove = triggerRect.top - boundaryTop;
+  const spaceBelow = boundaryBottom - triggerRect.bottom;
+  const shouldOpenUp = spaceBelow < contentHeight + offset && spaceAbove > spaceBelow;
+  const direction = shouldOpenUp ? 'up' : 'down';
+  const maxHeight = Math.max(
+    120,
+    Math.floor((shouldOpenUp ? spaceAbove : spaceBelow) - offset),
+  );
+  const renderedHeight = Math.min(contentHeight, maxHeight);
+  const viewportTop = shouldOpenUp
+    ? Math.max(boundaryTop, triggerRect.top - offset - renderedHeight)
+    : Math.min(boundaryBottom - renderedHeight, triggerRect.bottom + offset);
+
+  return {
+    top: viewportTop - (portalRect?.top ?? 0),
+    left: left - (portalRect?.left ?? 0),
+    width,
+    maxHeight,
+    direction,
+  };
+}

package/registry/ui/searchable-select-position/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/segmented-toggle/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "segmented-toggle",
+  "description": "Editable source registry entry for segmented-toggle.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "SegmentedToggle",
+    "SegmentedToggleOption",
+    "SegmentedToggleProps"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/scroll-fade-area.tsx",
+      "target": "components/ui/scroll-fade-area.tsx"
+    },
+    {
+      "source": "primitives/segmented-toggle.tsx",
+      "target": "components/ui/segmented-toggle.tsx"
+    },
+    {
+      "source": "primitives/tabs.tsx",
+      "target": "components/ui/tabs.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/segmented-toggle/primitives/scroll-fade-area.tsx

@@ -0,0 +1,295 @@
+'use client';
+
+import * as React from 'react';
+
+import type { PointerEvent } from 'react';
+
+import { cn } from '@/lib/utils';
+
+type ScrollFadeOrientation = 'horizontal' | 'vertical';
+
+interface ScrollFadeAreaProps extends React.ComponentProps<'div'> {
+  readonly fadeSize?: number;
+  readonly orientation?: ScrollFadeOrientation;
+  readonly scrollbarVisibility?: 'hidden' | 'section-hover';
+  readonly viewportClassName?: string;
+}
+
+interface VerticalScrollbarState {
+  readonly isScrollable: boolean;
+  readonly thumbHeight: number;
+  readonly thumbTop: number;
+}
+
+const MIN_THUMB_SIZE = 40;
+const SCROLLBAR_INSET = 6;
+
+function getScrollFadeMask({
+  canScrollEnd,
+  canScrollStart,
+  orientation,
+}: {
+  readonly canScrollEnd: boolean;
+  readonly canScrollStart: boolean;
+  readonly orientation: ScrollFadeOrientation;
+}): string {
+  const direction = orientation === 'horizontal' ? 'right' : 'bottom';
+
+  if (canScrollStart && canScrollEnd) {
+    return `linear-gradient(to ${direction}, transparent, black var(--scroll-fade-size), black calc(100% - var(--scroll-fade-size)), transparent)`;
+  }
+
+  if (canScrollStart) {
+    return `linear-gradient(to ${direction}, transparent, black var(--scroll-fade-size))`;
+  }
+
+  if (canScrollEnd) {
+    return `linear-gradient(to ${direction}, black calc(100% - var(--scroll-fade-size)), transparent)`;
+  }
+
+  return 'none';
+}
+
+function getScrollState(
+  scrollArea: HTMLDivElement,
+  orientation: ScrollFadeOrientation,
+): {
+  canScrollEnd: boolean;
+  canScrollStart: boolean;
+} {
+  if (orientation === 'horizontal') {
+    return {
+      canScrollStart: scrollArea.scrollLeft > 1,
+      canScrollEnd: scrollArea.scrollLeft + scrollArea.clientWidth < scrollArea.scrollWidth - 1,
+    };
+  }
+
+  return {
+    canScrollStart: scrollArea.scrollTop > 1,
+    canScrollEnd: scrollArea.scrollTop + scrollArea.clientHeight < scrollArea.scrollHeight - 1,
+  };
+}
+
+function getVerticalScrollbarState(scrollArea: HTMLDivElement): VerticalScrollbarState {
+  const trackHeight = scrollArea.clientHeight - SCROLLBAR_INSET * 2;
+  const maxScrollTop = scrollArea.scrollHeight - scrollArea.clientHeight;
+
+  if (maxScrollTop <= 0 || trackHeight <= 0) {
+    return {
+      isScrollable: false,
+      thumbHeight: 0,
+      thumbTop: 0,
+    };
+  }
+
+  const thumbHeight = Math.max(
+    (scrollArea.clientHeight / scrollArea.scrollHeight) * trackHeight,
+    MIN_THUMB_SIZE,
+  );
+  const maxThumbTop = trackHeight - thumbHeight;
+  const scrollProgress = scrollArea.scrollTop / maxScrollTop;
+
+  return {
+    isScrollable: true,
+    thumbHeight,
+    thumbTop: maxThumbTop * scrollProgress,
+  };
+}
+
+export function ScrollFadeArea({
+  children,
+  className,
+  fadeSize = 24,
+  onPointerEnter,
+  onPointerLeave,
+  onScroll,
+  orientation = 'vertical',
+  scrollbarVisibility = 'hidden',
+  style,
+  viewportClassName,
+  ...props
+}: ScrollFadeAreaProps): React.ReactElement {
+  const scrollAreaRef = React.useRef<HTMLDivElement>(null);
+  const dragOffsetRef = React.useRef(0);
+  const [scrollState, setScrollState] = React.useState({
+    canScrollStart: false,
+    canScrollEnd: false,
+  });
+  const [verticalScrollbarState, setVerticalScrollbarState] =
+    React.useState<VerticalScrollbarState>({
+      isScrollable: false,
+      thumbHeight: 0,
+      thumbTop: 0,
+    });
+  const [isSectionActive, setIsSectionActive] = React.useState(false);
+  const [isDraggingScrollbar, setIsDraggingScrollbar] = React.useState(false);
+  const shouldRenderSectionScrollbar =
+    orientation === 'vertical' && scrollbarVisibility === 'section-hover';
+  const isSectionScrollbarVisible = isSectionActive || isDraggingScrollbar;
+
+  const updateScrollState = React.useCallback(() => {
+    const scrollArea = scrollAreaRef.current;
+
+    if (!scrollArea) {
+      return;
+    }
+
+    const nextScrollState = getScrollState(scrollArea, orientation);
+
+    setScrollState((currentScrollState) => {
+      if (
+        currentScrollState.canScrollStart === nextScrollState.canScrollStart &&
+        currentScrollState.canScrollEnd === nextScrollState.canScrollEnd
+      ) {
+        return currentScrollState;
+      }
+
+      return nextScrollState;
+    });
+
+    if (shouldRenderSectionScrollbar) {
+      setVerticalScrollbarState(getVerticalScrollbarState(scrollArea));
+    }
+  }, [orientation, shouldRenderSectionScrollbar]);
+
+  const scrollToThumbPosition = React.useCallback(
+    (thumbTop: number): void => {
+      const scrollArea = scrollAreaRef.current;
+
+      if (!scrollArea) {
+        return;
+      }
+
+      const trackHeight = scrollArea.clientHeight - SCROLLBAR_INSET * 2;
+      const maxThumbTop = trackHeight - verticalScrollbarState.thumbHeight;
+      const maxScrollTop = scrollArea.scrollHeight - scrollArea.clientHeight;
+      const clampedThumbTop = Math.min(Math.max(thumbTop, 0), maxThumbTop);
+      const scrollProgress = maxThumbTop > 0 ? clampedThumbTop / maxThumbTop : 0;
+
+      scrollArea.scrollTop = maxScrollTop * scrollProgress;
+      updateScrollState();
+    },
+    [updateScrollState, verticalScrollbarState.thumbHeight],
+  );
+
+  function handleTrackPointerDown(event: PointerEvent<HTMLDivElement>): void {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    scrollToThumbPosition(event.nativeEvent.offsetY - verticalScrollbarState.thumbHeight / 2);
+  }
+
+  function handleThumbPointerDown(event: PointerEvent<HTMLDivElement>): void {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setIsDraggingScrollbar(true);
+    dragOffsetRef.current = event.clientY - SCROLLBAR_INSET - verticalScrollbarState.thumbTop;
+  }
+
+  function handleThumbPointerMove(event: PointerEvent<HTMLDivElement>): void {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+      return;
+    }
+
+    scrollToThumbPosition(event.clientY - SCROLLBAR_INSET - dragOffsetRef.current);
+  }
+
+  function handleThumbPointerUp(event: PointerEvent<HTMLDivElement>): void {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+
+    setIsDraggingScrollbar(false);
+  }
+
+  React.useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+
+    if (!scrollArea) {
+      return;
+    }
+
+    updateScrollState();
+
+    const resizeObserver = new ResizeObserver(updateScrollState);
+    resizeObserver.observe(scrollArea);
+
+    if (scrollArea.firstElementChild) {
+      resizeObserver.observe(scrollArea.firstElementChild);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [children, updateScrollState]);
+
+  const maskImage = getScrollFadeMask({
+    canScrollEnd: scrollState.canScrollEnd,
+    canScrollStart: scrollState.canScrollStart,
+    orientation,
+  });
+  const maskStyle = {
+    '--scroll-fade-size': `${String(fadeSize)}px`,
+    WebkitMaskImage: maskImage,
+    maskImage,
+  } satisfies React.CSSProperties & Record<'--scroll-fade-size', string>;
+
+  return (
+    <div
+      className={cn('group/scroll-fade relative min-h-0 min-w-0', className)}
+      style={style}
+      onPointerEnter={(event) => {
+        setIsSectionActive(true);
+        onPointerEnter?.(event);
+      }}
+      onPointerLeave={(event) => {
+        setIsSectionActive(false);
+        onPointerLeave?.(event);
+      }}
+      {...props}
+    >
+      <div
+        ref={scrollAreaRef}
+        className={cn(
+          'min-h-0 min-w-0',
+          orientation === 'horizontal' ? 'overflow-x-auto' : 'h-full overflow-y-auto',
+          '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+          viewportClassName,
+        )}
+        style={maskStyle}
+        onScroll={(event) => {
+          updateScrollState();
+          onScroll?.(event);
+        }}
+      >
+        {children}
+      </div>
+      {shouldRenderSectionScrollbar && verticalScrollbarState.isScrollable ? (
+        <div
+          aria-hidden="true"
+          className={cn(
+            'absolute top-1.5 right-0 bottom-1.5 z-10 w-3 transition-opacity duration-150',
+            isSectionScrollbarVisible
+              ? 'pointer-events-auto opacity-100'
+              : 'pointer-events-none opacity-0',
+          )}
+          data-section-scrollbar="true"
+          onPointerDown={handleTrackPointerDown}
+        >
+          <div
+            className="absolute right-1 w-1.5 rounded-full bg-black/15 transition-colors hover:bg-black/25"
+            onPointerDown={handleThumbPointerDown}
+            onPointerMove={handleThumbPointerMove}
+            onPointerUp={handleThumbPointerUp}
+            onPointerCancel={handleThumbPointerUp}
+            style={{
+              height: `${String(verticalScrollbarState.thumbHeight)}px`,
+              transform: `translateY(${String(verticalScrollbarState.thumbTop)}px)`,
+            }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}