@luanthnh/cntt-ui 0.1.7 → 0.1.9

package/components/motion/slot.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { isMotionComponent, motion, type HTMLMotionProps } from 'motion/react';
-
-import { cn } from '@/lib/utils';
-
-type AnyProps = Record<string, unknown>;
-
-type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
-  HTMLMotionProps<keyof HTMLElementTagNameMap>,
-  'ref'
-> & {
-  ref?: React.Ref<T>;
-};
-
-type WithAsChild<Base extends object> =
-  | (Base & { asChild: true; children: React.ReactElement })
-  | (Base & { asChild?: false | undefined });
-
-type SlotProps<T extends HTMLElement = HTMLElement> = {
-  children?: React.ReactElement;
-} & DOMMotionProps<T>;
-
-function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
-  return (node) => {
-    refs.forEach((ref) => {
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        (ref as React.RefObject<T | null>).current = node;
-      }
-    });
-  };
-}
-
-const motionComponentCache = new Map<React.ElementType, React.ElementType>();
-
-function getMotionComponent(Component: React.ElementType): React.ElementType {
-  if (!motionComponentCache.has(Component)) {
-    motionComponentCache.set(Component, motion.create(Component));
-  }
-  return motionComponentCache.get(Component)!;
-}
-
-function mergeProps<T extends HTMLElement>(
-  childProps: AnyProps,
-  slotProps: DOMMotionProps<T>,
-): AnyProps {
-  const merged: AnyProps = { ...childProps, ...slotProps };
-
-  if (childProps.className || slotProps.className) {
-    merged.className = cn(childProps.className as string, slotProps.className as string);
-  }
-
-  if (childProps.style || slotProps.style) {
-    merged.style = {
-      ...(childProps.style as React.CSSProperties),
-      ...(slotProps.style as React.CSSProperties),
-    };
-  }
-
-  return merged;
-}
-
-function Slot<T extends HTMLElement = HTMLElement>({ children, ...props }: SlotProps<T>) {
-  const isValidElement = React.isValidElement(children);
-  const childType = isValidElement ? children.type : null;
-  const isAlreadyMotion =
-    isValidElement &&
-    childType !== null &&
-    typeof childType === 'object' &&
-    isMotionComponent(childType);
-
-  const Base = React.useMemo(() => {
-    if (!isValidElement || !childType) return null;
-    return isAlreadyMotion
-      ? (childType as React.ElementType)
-      : getMotionComponent(childType as React.ElementType);
-  }, [isValidElement, isAlreadyMotion, childType]);
-
-  const childRef = isValidElement && children ? (children.props as AnyProps).ref : undefined;
-  const childProps =
-    isValidElement && children
-      ? (({ ref: _ref, ...rest }) => rest)(children.props as AnyProps)
-      : {};
-
-  const mergedRef = React.useCallback(
-    (node: T | null) => {
-      mergeRefs(childRef as React.Ref<T>, props.ref)(node);
-    },
-    [childRef, props.ref],
-  );
-
-  if (!isValidElement || !Base || !children) return null;
-
-  const mergedProps = mergeProps(childProps, props);
-
-  return React.createElement(Base, {
-    ...mergedProps,
-    ref: mergedRef,
-  });
-}
-
-export { Slot, type SlotProps, type WithAsChild, type DOMMotionProps, type AnyProps };

package/components/motion/waves.tsx

@@ -1,417 +0,0 @@
-import React, { CSSProperties, useEffect, useRef } from 'react';
-
-const RANDOM_SEED = Math.random();
-
-class Grad {
-  x: number;
-  y: number;
-  z: number;
-  constructor(x: number, y: number, z: number) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
-  }
-  dot2(x: number, y: number): number {
-    return this.x * x + this.y * y;
-  }
-}
-
-class Noise {
-  grad3: Grad[];
-  p: number[];
-  perm: number[];
-  gradP: Grad[];
-
-  constructor(seed = 0) {
-    this.grad3 = [
-      new Grad(1, 1, 0),
-      new Grad(-1, 1, 0),
-      new Grad(1, -1, 0),
-      new Grad(-1, -1, 0),
-      new Grad(1, 0, 1),
-      new Grad(-1, 0, 1),
-      new Grad(1, 0, -1),
-      new Grad(-1, 0, -1),
-      new Grad(0, 1, 1),
-      new Grad(0, -1, 1),
-      new Grad(0, 1, -1),
-      new Grad(0, -1, -1),
-    ];
-    this.p = [
-      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69,
-      142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219,
-      203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175,
-      74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230,
-      220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209,
-      76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198,
-      173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212,
-      207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
-      154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79,
-      113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12,
-      191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157,
-      184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29,
-      24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180,
-    ];
-    this.perm = new Array(512);
-    this.gradP = new Array(512);
-    this.seed(seed);
-  }
-  seed(seed: number) {
-    if (seed > 0 && seed < 1) seed *= 65536;
-    seed = Math.floor(seed);
-    if (seed < 256) seed |= seed << 8;
-    for (let i = 0; i < 256; i++) {
-      const v = i & 1 ? this.p[i] ^ (seed & 255) : this.p[i] ^ ((seed >> 8) & 255);
-      this.perm[i] = this.perm[i + 256] = v;
-      this.gradP[i] = this.gradP[i + 256] = this.grad3[v % 12];
-    }
-  }
-  fade(t: number): number {
-    return t * t * t * (t * (t * 6 - 15) + 10);
-  }
-  lerp(a: number, b: number, t: number): number {
-    return (1 - t) * a + t * b;
-  }
-  perlin2(x: number, y: number): number {
-    let X = Math.floor(x),
-      Y = Math.floor(y);
-    x -= X;
-    y -= Y;
-    X &= 255;
-    Y &= 255;
-    const n00 = this.gradP[X + this.perm[Y]].dot2(x, y);
-    const n01 = this.gradP[X + this.perm[Y + 1]].dot2(x, y - 1);
-    const n10 = this.gradP[X + 1 + this.perm[Y]].dot2(x - 1, y);
-    const n11 = this.gradP[X + 1 + this.perm[Y + 1]].dot2(x - 1, y - 1);
-    const u = this.fade(x);
-    return this.lerp(this.lerp(n00, n10, u), this.lerp(n01, n11, u), this.fade(y));
-  }
-}
-
-interface Point {
-  x: number;
-  y: number;
-  wave: { x: number; y: number };
-  cursor: { x: number; y: number; vx: number; vy: number };
-}
-
-interface Mouse {
-  x: number;
-  y: number;
-  lx: number;
-  ly: number;
-  sx: number;
-  sy: number;
-  v: number;
-  vs: number;
-  a: number;
-  set: boolean;
-}
-
-interface Config {
-  lineColor: string;
-  waveSpeedX: number;
-  waveSpeedY: number;
-  waveAmpX: number;
-  waveAmpY: number;
-  friction: number;
-  tension: number;
-  maxCursorMove: number;
-  xGap: number;
-  yGap: number;
-}
-
-interface WavesProps {
-  lineColor?: string;
-  backgroundColor?: string;
-  waveSpeedX?: number;
-  waveSpeedY?: number;
-  waveAmpX?: number;
-  waveAmpY?: number;
-  xGap?: number;
-  yGap?: number;
-  friction?: number;
-  tension?: number;
-  maxCursorMove?: number;
-  style?: CSSProperties;
-  className?: string;
-}
-
-const Waves: React.FC<WavesProps> = ({
-  lineColor = '#e4e7ff',
-  backgroundColor = 'transparent',
-  waveSpeedX = 0.0125,
-  waveSpeedY = 0.005,
-  waveAmpX = 32,
-  waveAmpY = 16,
-  xGap = 10,
-  yGap = 32,
-  friction = 0.925,
-  tension = 0.005,
-  maxCursorMove = 100,
-  style = {},
-  className = '',
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
-  const boundingRef = useRef<{
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-  }>({
-    width: 0,
-    height: 0,
-    left: 0,
-    top: 0,
-  });
-  const noiseRef = useRef(new Noise(RANDOM_SEED));
-  const linesRef = useRef<Point[][]>([]);
-  const mouseRef = useRef<Mouse>({
-    x: -10,
-    y: 0,
-    lx: 0,
-    ly: 0,
-    sx: 0,
-    sy: 0,
-    v: 0,
-    vs: 0,
-    a: 0,
-    set: false,
-  });
-
-  const configRef = useRef<Config>({
-    lineColor,
-    waveSpeedX,
-    waveSpeedY,
-    waveAmpX,
-    waveAmpY,
-    friction,
-    tension,
-    maxCursorMove,
-    xGap,
-    yGap,
-  });
-
-  const frameIdRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    configRef.current = {
-      lineColor,
-      waveSpeedX,
-      waveSpeedY,
-      waveAmpX,
-      waveAmpY,
-      friction,
-      tension,
-      maxCursorMove,
-      xGap,
-      yGap,
-    };
-  }, [
-    lineColor,
-    waveSpeedX,
-    waveSpeedY,
-    waveAmpX,
-    waveAmpY,
-    friction,
-    tension,
-    maxCursorMove,
-    xGap,
-    yGap,
-  ]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const container = containerRef.current;
-    if (!canvas || !container) return;
-    ctxRef.current = canvas.getContext('2d');
-
-    function setSize() {
-      if (!container || !canvas) return;
-      const rect = container.getBoundingClientRect();
-      boundingRef.current = {
-        width: rect.width,
-        height: rect.height,
-        left: rect.left,
-        top: rect.top,
-      };
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-    }
-
-    function setLines() {
-      const { width, height } = boundingRef.current;
-      linesRef.current = [];
-      const oWidth = width + 200,
-        oHeight = height + 30;
-      const { xGap, yGap } = configRef.current;
-      const totalLines = Math.ceil(oWidth / xGap);
-      const totalPoints = Math.ceil(oHeight / yGap);
-      const xStart = (width - xGap * totalLines) / 2;
-      const yStart = (height - yGap * totalPoints) / 2;
-      for (let i = 0; i <= totalLines; i++) {
-        const pts: Point[] = [];
-        for (let j = 0; j <= totalPoints; j++) {
-          pts.push({
-            x: xStart + xGap * i,
-            y: yStart + yGap * j,
-            wave: { x: 0, y: 0 },
-            cursor: { x: 0, y: 0, vx: 0, vy: 0 },
-          });
-        }
-        linesRef.current.push(pts);
-      }
-    }
-
-    function movePoints(time: number) {
-      const lines = linesRef.current;
-      const mouse = mouseRef.current;
-      const noise = noiseRef.current;
-      const { waveSpeedX, waveSpeedY, waveAmpX, waveAmpY, friction, tension, maxCursorMove } =
-        configRef.current;
-      lines.forEach((pts) => {
-        pts.forEach((p) => {
-          const move =
-            noise.perlin2((p.x + time * waveSpeedX) * 0.002, (p.y + time * waveSpeedY) * 0.0015) *
-            12;
-          p.wave.x = Math.cos(move) * waveAmpX;
-          p.wave.y = Math.sin(move) * waveAmpY;
-
-          const dx = p.x - mouse.sx,
-            dy = p.y - mouse.sy;
-          const dist = Math.hypot(dx, dy);
-          const l = Math.max(175, mouse.vs);
-          if (dist < l) {
-            const s = 1 - dist / l;
-            const f = Math.cos(dist * 0.001) * s;
-            p.cursor.vx += Math.cos(mouse.a) * f * l * mouse.vs * 0.00065;
-            p.cursor.vy += Math.sin(mouse.a) * f * l * mouse.vs * 0.00065;
-          }
-
-          p.cursor.vx += (0 - p.cursor.x) * tension;
-          p.cursor.vy += (0 - p.cursor.y) * tension;
-          p.cursor.vx *= friction;
-          p.cursor.vy *= friction;
-          p.cursor.x += p.cursor.vx * 2;
-          p.cursor.y += p.cursor.vy * 2;
-          p.cursor.x = Math.min(maxCursorMove, Math.max(-maxCursorMove, p.cursor.x));
-          p.cursor.y = Math.min(maxCursorMove, Math.max(-maxCursorMove, p.cursor.y));
-        });
-      });
-    }
-
-    function moved(point: Point, withCursor = true): { x: number; y: number } {
-      const x = point.x + point.wave.x + (withCursor ? point.cursor.x : 0);
-      const y = point.y + point.wave.y + (withCursor ? point.cursor.y : 0);
-      return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
-    }
-
-    function drawLines() {
-      const { width, height } = boundingRef.current;
-      const ctx = ctxRef.current;
-      if (!ctx) return;
-      ctx.clearRect(0, 0, width, height);
-      ctx.beginPath();
-      ctx.strokeStyle = configRef.current.lineColor;
-      linesRef.current.forEach((points) => {
-        let p1 = moved(points[0], false);
-        ctx.moveTo(p1.x, p1.y);
-        points.forEach((p, idx) => {
-          const isLast = idx === points.length - 1;
-          p1 = moved(p, !isLast);
-          const p2 = moved(points[idx + 1] || points[points.length - 1], !isLast);
-          ctx.lineTo(p1.x, p1.y);
-          if (isLast) ctx.moveTo(p2.x, p2.y);
-        });
-      });
-      ctx.stroke();
-    }
-
-    function tick(t: number) {
-      if (!container) return;
-      const mouse = mouseRef.current;
-      mouse.sx += (mouse.x - mouse.sx) * 0.1;
-      mouse.sy += (mouse.y - mouse.sy) * 0.1;
-      const dx = mouse.x - mouse.lx,
-        dy = mouse.y - mouse.ly;
-      const d = Math.hypot(dx, dy);
-      mouse.v = d;
-      mouse.vs += (d - mouse.vs) * 0.1;
-      mouse.vs = Math.min(100, mouse.vs);
-      mouse.lx = mouse.x;
-      mouse.ly = mouse.y;
-      mouse.a = Math.atan2(dy, dx);
-      container.style.setProperty('--x', `${mouse.sx}px`);
-      container.style.setProperty('--y', `${mouse.sy}px`);
-
-      movePoints(t);
-      drawLines();
-      frameIdRef.current = requestAnimationFrame(tick);
-    }
-
-    function onResize() {
-      setSize();
-      setLines();
-    }
-    function onMouseMove(e: MouseEvent) {
-      updateMouse(e.clientX, e.clientY);
-    }
-    function onTouchMove(e: TouchEvent) {
-      const touch = e.touches[0];
-      updateMouse(touch.clientX, touch.clientY);
-    }
-    function updateMouse(x: number, y: number) {
-      const mouse = mouseRef.current;
-      const b = boundingRef.current;
-      mouse.x = x - b.left;
-      mouse.y = y - b.top;
-      if (!mouse.set) {
-        mouse.sx = mouse.x;
-        mouse.sy = mouse.y;
-        mouse.lx = mouse.x;
-        mouse.ly = mouse.y;
-        mouse.set = true;
-      }
-    }
-
-    setSize();
-    setLines();
-    frameIdRef.current = requestAnimationFrame(tick);
-    window.addEventListener('resize', onResize);
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('touchmove', onTouchMove, { passive: false });
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('touchmove', onTouchMove);
-      if (frameIdRef.current !== null) {
-        cancelAnimationFrame(frameIdRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        backgroundColor,
-        ...style,
-      }}
-      className={`absolute top-0 left-0 h-full w-full overflow-hidden ${className}`}
-    >
-      <div
-        className="absolute top-0 left-0 h-[0.5rem] w-[0.5rem] rounded-full bg-[#160000]"
-        style={{
-          transform: 'translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0)',
-          willChange: 'transform',
-        }}
-      />
-      <canvas ref={canvasRef} className="block h-full w-full" />
-    </div>
-  );
-};
-
-export default Waves;

package/components/primitives/tabs.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { AnimatePresence, motion, type HTMLMotionProps, type Transition } from 'motion/react';
-import { Tabs as TabsPrimitive } from 'radix-ui';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { AutoHeight, type AutoHeightProps } from '@/components/motion/auto-height';
-import {
-  Highlight,
-  HighlightItem,
-  type HighlightItemProps,
-  type HighlightProps,
-} from '@/components/motion/highlight';
-
-type TabsContextType = {
-  value: string | undefined;
-  setValue: TabsProps['onValueChange'];
-};
-
-const [TabsProvider, useTabs] = getStrictContext<TabsContextType>('TabsContext');
-
-type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
-
-function Tabs(props: TabsProps) {
-  const [value, setValue] = useControlledState({
-    value: props.value,
-    defaultValue: props.defaultValue,
-    onChange: props.onValueChange,
-  });
-
-  return (
-    <TabsProvider value={{ value, setValue }}>
-      <TabsPrimitive.Root data-slot="tabs" {...props} onValueChange={setValue} />
-    </TabsProvider>
-  );
-}
-
-type TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;
-
-function TabsHighlight({
-  transition = { type: 'spring', stiffness: 200, damping: 25 },
-  ...props
-}: TabsHighlightProps) {
-  const { value } = useTabs();
-
-  return (
-    <Highlight
-      data-slot="tabs-highlight"
-      controlledItems
-      value={value}
-      transition={transition}
-      click={false}
-      {...props}
-    />
-  );
-}
-
-type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
-
-function TabsList(props: TabsListProps) {
-  return <TabsPrimitive.List data-slot="tabs-list" {...props} />;
-}
-
-type TabsHighlightItemProps = HighlightItemProps & {
-  value: string;
-};
-
-function TabsHighlightItem(props: TabsHighlightItemProps) {
-  return <HighlightItem data-slot="tabs-highlight-item" {...props} />;
-}
-
-type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;
-
-function TabsTrigger(props: TabsTriggerProps) {
-  return <TabsPrimitive.Trigger data-slot="tabs-trigger" {...props} />;
-}
-
-type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> & HTMLMotionProps<'div'>;
-
-function TabsContent({
-  value,
-  forceMount,
-  transition = { duration: 0.5, ease: 'easeInOut' },
-  ...props
-}: TabsContentProps) {
-  return (
-    <AnimatePresence mode="wait">
-      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>
-        <motion.div
-          data-slot="tabs-content"
-          layout
-          layoutDependency={value}
-          initial={{ opacity: 0, filter: 'blur(4px)' }}
-          animate={{ opacity: 1, filter: 'blur(0px)' }}
-          exit={{ opacity: 0, filter: 'blur(4px)' }}
-          transition={transition}
-          {...props}
-        />
-      </TabsPrimitive.Content>
-    </AnimatePresence>
-  );
-}
-
-type TabsContentsAutoProps = AutoHeightProps & {
-  mode?: 'auto-height';
-  children: React.ReactNode;
-  transition?: Transition;
-};
-
-type TabsContentsLayoutProps = Omit<HTMLMotionProps<'div'>, 'transition'> & {
-  mode: 'layout';
-  children: React.ReactNode;
-  transition?: Transition;
-};
-
-type TabsContentsProps = TabsContentsAutoProps | TabsContentsLayoutProps;
-
-const defaultTransition: Transition = {
-  type: 'spring',
-  stiffness: 200,
-  damping: 30,
-};
-
-function isAutoMode(props: TabsContentsProps): props is TabsContentsAutoProps {
-  return !('mode' in props) || props.mode === 'auto-height';
-}
-
-function TabsContents(props: TabsContentsProps) {
-  const { value } = useTabs();
-
-  if (isAutoMode(props)) {
-    const { transition = defaultTransition, ...autoProps } = props;
-
-    return (
-      <AutoHeight data-slot="tabs-contents" deps={[value]} transition={transition} {...autoProps} />
-    );
-  }
-
-  const {
-    transition = defaultTransition,
-    style,
-    ...layoutProps
-  } = props as TabsContentsLayoutProps;
-
-  return (
-    <motion.div
-      data-slot="tabs-contents"
-      layout="size"
-      layoutDependency={value}
-      style={{ overflow: 'hidden', ...style }}
-      transition={{ layout: transition }}
-      {...layoutProps}
-    />
-  );
-}
-
-export {
-  Tabs,
-  TabsHighlight,
-  TabsHighlightItem,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  TabsContents,
-  type TabsProps,
-  type TabsHighlightProps,
-  type TabsHighlightItemProps,
-  type TabsListProps,
-  type TabsTriggerProps,
-  type TabsContentProps,
-  type TabsContentsProps,
-};