@carefully-built/cli 0.1.0 → 0.1.2

package/registry/ui/table-toolbar/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/table-toolbar/utils/use-media-query.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string, defaultValue = false): boolean {
+  const [matches, setMatches] = useState(defaultValue);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const handleChange = (): void => {
+      setMatches(mediaQuery.matches);
+    };
+
+    handleChange();
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(maxWidth = 767): boolean {
+  return useMediaQuery(`(max-width: ${String(maxWidth)}px)`);
+}

package/registry/ui/tabs/manifest.json

@@ -0,0 +1,40 @@
+{
+  "name": "tabs",
+  "description": "Editable source registry entry for tabs.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Tabs",
+    "TabsContent",
+    "TabsList",
+    "TabsScrollArea",
+    "TabsTrigger",
+    "tabsListVariants"
+  ],
+  "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/tabs.tsx",
+      "target": "components/ui/tabs.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/tabs/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>
+  );
+}

package/registry/ui/tabs/primitives/tabs.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+
+import { ScrollFadeArea } from '@/components/ui/scroll-fade-area';
+import { cn } from '@/lib/utils';
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'gap-2 rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-2 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsScrollArea({
+  className,
+  viewportClassName,
+  ...props
+}: React.ComponentProps<typeof ScrollFadeArea>) {
+  return (
+    <ScrollFadeArea
+      {...props}
+      data-slot="tabs-scroll-area"
+      orientation="horizontal"
+      className={cn('w-full min-w-0', className)}
+      viewportClassName={cn('min-w-0', viewportClassName)}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 text-sm outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsScrollArea, TabsTrigger, TabsContent, tabsListVariants };

package/registry/ui/tabs/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))
+}