@luanthnh/cntt-ui 0.1.5

package/assets/lotties/loader.json

@@ -0,0 +1,305 @@
+{
+  "nm": "Main Scene",
+  "ddd": 0,
+  "h": 500,
+  "w": 500,
+  "meta": { "g": "@lottiefiles/creator 1.15.0" },
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "Ellipse 1",
+      "sr": 1,
+      "st": 0,
+      "op": 120,
+      "ip": 0,
+      "hd": false,
+      "ddd": 0,
+      "bm": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [80, 80] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [246, 247] },
+        "r": {
+          "a": 1,
+          "k": [
+            { "o": { "x": 0, "y": 0 }, "i": { "x": 1, "y": 1 }, "s": [160], "t": 0 },
+            { "s": [-200], "t": 119 }
+          ]
+        },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "sh",
+          "bm": 0,
+          "hd": false,
+          "nm": "Ellipse Path 1",
+          "d": 1,
+          "ks": {
+            "a": 0,
+            "k": {
+              "c": true,
+              "i": [
+                [-73.9546, 0],
+                [0, -73.9546],
+                [73.9546, 0],
+                [0, 73.9546]
+              ],
+              "o": [
+                [73.9546, 0],
+                [0, 73.9546],
+                [-73.9546, 0],
+                [0, -73.9546]
+              ],
+              "v": [
+                [0, -134],
+                [134, 0],
+                [0, 134],
+                [-134, 0]
+              ]
+            }
+          }
+        },
+        {
+          "ty": "tm",
+          "bm": 0,
+          "hd": false,
+          "nm": "Trim Path",
+          "e": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.65, "y": 0 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 4 },
+              { "s": [0], "t": 120 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.55, "y": 0.06 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 0 },
+              { "s": [0], "t": 116 }
+            ]
+          },
+          "m": 1
+        },
+        {
+          "ty": "st",
+          "bm": 0,
+          "hd": false,
+          "nm": "Stroke",
+          "lc": 2,
+          "lj": 2,
+          "ml": 1,
+          "o": { "a": 0, "k": 100 },
+          "w": { "a": 0, "k": 28 },
+          "c": { "a": 0, "k": [0.0627, 0.3255, 0.9529, 1] }
+        }
+      ],
+      "ind": 1
+    },
+    {
+      "ty": 4,
+      "nm": "Ellipse 1",
+      "sr": 1,
+      "st": 0,
+      "op": 120,
+      "ip": 0,
+      "hd": false,
+      "ddd": 0,
+      "bm": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [80, 80] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [246, 247] },
+        "r": {
+          "a": 1,
+          "k": [
+            { "o": { "x": 0, "y": 0 }, "i": { "x": 1, "y": 1 }, "s": [60], "t": 0 },
+            { "s": [-300], "t": 119 }
+          ]
+        },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "sh",
+          "bm": 0,
+          "hd": false,
+          "nm": "Ellipse Path 1",
+          "d": 1,
+          "ks": {
+            "a": 0,
+            "k": {
+              "c": true,
+              "i": [
+                [-73.9546, 0],
+                [0, -73.9546],
+                [73.9546, 0],
+                [0, 73.9546]
+              ],
+              "o": [
+                [73.9546, 0],
+                [0, 73.9546],
+                [-73.9546, 0],
+                [0, -73.9546]
+              ],
+              "v": [
+                [0, -134],
+                [134, 0],
+                [0, 134],
+                [-134, 0]
+              ]
+            }
+          }
+        },
+        {
+          "ty": "tm",
+          "bm": 0,
+          "hd": false,
+          "nm": "Trim Path",
+          "e": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.65, "y": 0 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 26 },
+              { "s": [0], "t": 120 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.55, "y": 0.06 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 0 },
+              { "s": [0], "t": 96 }
+            ]
+          },
+          "m": 1
+        },
+        {
+          "ty": "st",
+          "bm": 0,
+          "hd": false,
+          "nm": "Stroke",
+          "lc": 2,
+          "lj": 2,
+          "ml": 1,
+          "o": { "a": 0, "k": 100 },
+          "w": { "a": 0, "k": 28 },
+          "c": { "a": 0, "k": [0.0627, 0.3255, 0.9529, 1] }
+        }
+      ],
+      "ind": 2
+    },
+    {
+      "ty": 4,
+      "nm": "Ellipse 1",
+      "sr": 1,
+      "st": 0,
+      "op": 122,
+      "ip": 0,
+      "hd": false,
+      "ddd": 0,
+      "bm": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [246, 247] },
+        "r": {
+          "a": 1,
+          "k": [
+            { "o": { "x": 0, "y": 0 }, "i": { "x": 1, "y": 1 }, "s": [0], "t": 0 },
+            { "s": [-359], "t": 120 }
+          ]
+        },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "sh",
+          "bm": 0,
+          "hd": false,
+          "nm": "Ellipse Path 1",
+          "d": 1,
+          "ks": {
+            "a": 0,
+            "k": {
+              "c": true,
+              "i": [
+                [-73.9546, 0],
+                [0, -73.9546],
+                [73.9546, 0],
+                [0, 73.9546]
+              ],
+              "o": [
+                [73.9546, 0],
+                [0, 73.9546],
+                [-73.9546, 0],
+                [0, -73.9546]
+              ],
+              "v": [
+                [0, -134],
+                [134, 0],
+                [0, 134],
+                [-134, 0]
+              ]
+            }
+          }
+        },
+        {
+          "ty": "tm",
+          "bm": 0,
+          "hd": false,
+          "nm": "Trim Path",
+          "e": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.65, "y": 0 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 26 },
+              { "s": [0], "t": 120 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              { "o": { "x": 0.55, "y": 0.06 }, "i": { "x": 0.36, "y": 1 }, "s": [100], "t": 0 },
+              { "s": [0], "t": 96 }
+            ]
+          },
+          "m": 1
+        },
+        {
+          "ty": "st",
+          "bm": 0,
+          "hd": false,
+          "nm": "Stroke",
+          "lc": 2,
+          "lj": 2,
+          "ml": 1,
+          "o": { "a": 0, "k": 100 },
+          "w": { "a": 0, "k": 10 },
+          "c": { "a": 0, "k": [0.8992, 0.9237, 0.9808, 1] }
+        }
+      ],
+      "ind": 3
+    }
+  ],
+  "v": "5.7.0",
+  "fr": 60,
+  "op": 120,
+  "ip": 0,
+  "assets": []
+}

package/components/Welcome.mdx

@@ -0,0 +1,74 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Welcome" />
+
+# Welcome 👋🏼
+
+Welcome to the **@luanthnh/cntt-ui** component library. A modern, high-performance UI component library built with **React**, **Tailwind CSS (v4)**, **Radix UI**, and **Framer Motion**.
+
+🔗 **Live Demo**: [https://cntt-ui.vercel.app/](https://cntt-ui.vercel.app/)
+
+---
+
+## 📦 Install
+
+Use your preferred package manager to install the library:
+
+```bash
+# npm
+npm install @luanthnh/cntt-ui
+
+# pnpm
+pnpm add @luanthnh/cntt-ui
+
+# yarn
+yarn add @luanthnh/cntt-ui
+```
+
+---
+
+## 🛠️ Setup
+
+To get started, follow these simple steps:
+
+### 1. Import Global CSS
+
+Include the global styles in your application's entry point (e.g., `layout.tsx` or `index.tsx`):
+
+```tsx
+import '@luanthnh/cntt-ui/globals.css';
+```
+
+### 2. Configure Tailwind CSS (v4)
+
+Ensure your project is set up with Tailwind CSS v4. If you are using Next.js, make sure to configure `@tailwindcss/postcss` for optimal performance.
+
+---
+
+## 🚀 Use the component
+
+Start using our premium components in your project:
+
+```tsx
+import { Button, Card, Text } from '@luanthnh/cntt-ui';
+
+export default function App() {
+  return (
+    <Card className="max-w-sm p-6">
+      <Text variant="h3" className="mb-4">
+        Hello World!
+      </Text>
+      <Text className="mb-6 opacity-80">
+        You are now using the powerful @luanthnh/cntt-ui components.
+      </Text>
+      <Button variant="primary" onClick={() => alert('Ready to build!')}>
+        Get Started
+      </Button>
+    </Card>
+  );
+}
+```
+
+---
+
+Designed with ❤️ for a superior developer experience.

package/components/lenis/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import type { LenisOptions } from 'lenis';
+
+import 'lenis/dist/lenis.css';
+
+import { useRef } from 'react';
+import { LenisRef, ReactLenis, LenisProps as ReactLenisProps } from 'lenis/react';
+import { useTempus } from 'tempus/react';
+
+interface LenisProps extends Omit<ReactLenisProps, 'ref'> {
+  root: boolean;
+  options: LenisOptions;
+}
+
+export function Lenis({ root, options }: LenisProps) {
+  const lenisRef = useRef<LenisRef>(null);
+  // const lenis = useLenis();
+
+  useTempus((time: number) => {
+    if (lenisRef.current?.lenis) {
+      lenisRef.current.lenis.raf(time);
+    }
+  });
+
+  // useEffect(() => {
+  //   if (isNavOpened) {
+  //     lenis?.stop();
+  //   } else {
+  //     lenis?.start();
+  //   }
+  // }, [isNavOpened, lenis]);
+
+  return (
+    <ReactLenis
+      ref={lenisRef}
+      root={root}
+      options={{
+        ...options,
+        lerp: options?.lerp ?? 0.125,
+        autoRaf: false,
+        anchors: true,
+        prevent: (node: Element | null) =>
+          node?.nodeName === 'VERCEL-LIVE-FEEDBACK' || node?.id === 'theatrejs-studio-root',
+      }}
+    />
+  );
+}

package/components/motion/auto-height.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  type AnimationControls,
+  type HTMLMotionProps,
+  type TargetAndTransition,
+  type Transition,
+} from 'motion/react';
+
+import { useAutoHeight } from '@/hooks/use-auto-height';
+
+import { Slot, WithAsChild } from './slot';
+
+type AutoHeightProps = WithAsChild<
+  {
+    children: React.ReactNode;
+    deps?: React.DependencyList;
+    animate?: TargetAndTransition | AnimationControls;
+    transition?: Transition;
+  } & Omit<HTMLMotionProps<'div'>, 'animate'>
+>;
+
+function AutoHeight({
+  children,
+  deps = [],
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01,
+  },
+  style,
+  animate,
+  asChild = false,
+  ...props
+}: AutoHeightProps) {
+  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <Comp
+      style={{ overflow: 'hidden', ...style }}
+      animate={{ height, ...animate }}
+      transition={transition}
+      {...props}
+    >
+      <div ref={ref}>{children}</div>
+    </Comp>
+  );
+}
+
+export { AutoHeight, type AutoHeightProps };

package/components/motion/cursor.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export default function Cursor() {
+  const mousePosition = useRef({ x: 0, y: 0 });
+
+  const dotPosition = useRef({ x: 0, y: 0 });
+  const borderDotPosition = useRef({ x: 0, y: 0 });
+
+  const [renderPos, setRenderPos] = useState({ dot: { x: 0, y: 0 }, border: { x: 0, y: 0 } });
+  const [isHovering, setIsHovering] = useState(false);
+
+  const DOT_SMOOTHNESS = 0.2;
+  const BORDER_DOT_SMOOTHNESS = 0.1;
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      mousePosition.current = { x: e.clientX, y: e.clientY };
+    };
+
+    const handleMouseEnter = () => setIsHovering(true);
+    const handleMouseLeave = () => setIsHovering(false);
+
+    // Add event listeners
+    window.addEventListener('mousemove', handleMouseMove);
+
+    const interactiveElements = document.querySelectorAll(
+      'a, button, img, input, textarea, select',
+    );
+    interactiveElements.forEach((element) => {
+      element.addEventListener('mouseenter', handleMouseEnter);
+      element.addEventListener('mouseleave', handleMouseLeave);
+    });
+
+    // Animation function for smooth movement
+    const animate = () => {
+      const lerp = (start: number, end: number, factor: number) => {
+        return start + (end - start) * factor;
+      };
+
+      dotPosition.current.x = lerp(dotPosition.current.x, mousePosition.current.x, DOT_SMOOTHNESS);
+      dotPosition.current.y = lerp(dotPosition.current.y, mousePosition.current.y, DOT_SMOOTHNESS);
+
+      borderDotPosition.current.x = lerp(
+        borderDotPosition.current.x,
+        mousePosition.current.x,
+        BORDER_DOT_SMOOTHNESS,
+      );
+      borderDotPosition.current.y = lerp(
+        borderDotPosition.current.y,
+        mousePosition.current.y,
+        BORDER_DOT_SMOOTHNESS,
+      );
+
+      setRenderPos({
+        dot: { x: dotPosition.current.x, y: dotPosition.current.y },
+        border: { x: borderDotPosition.current.x, y: borderDotPosition.current.y },
+      });
+
+      requestAnimationFrame(animate);
+    };
+
+    // Start animation loop
+    const animationId = requestAnimationFrame(animate);
+
+    // Clean up
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+
+      interactiveElements.forEach((element) => {
+        element.removeEventListener('mouseenter', handleMouseEnter);
+        element.removeEventListener('mouseleave', handleMouseLeave);
+      });
+
+      cancelAnimationFrame(animationId);
+    };
+  }, []);
+
+  if (typeof window === 'undefined') return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[999]">
+      <div
+        className="bg-primary absolute rounded-full"
+        style={{
+          width: '8px',
+          height: '8px',
+          transform: 'translate(-50%, -50%)',
+          left: `${renderPos.dot.x}px`,
+          top: `${renderPos.dot.y}px`,
+        }}
+      />
+
+      <div
+        className="border-primary absolute rounded-full border"
+        style={{
+          width: isHovering ? '32px' : '24px',
+          height: isHovering ? '32px' : '24px',
+          transform: 'translate(-50%, -50%)',
+          left: `${renderPos.border.x}px`,
+          top: `${renderPos.border.y}px`,
+          transition: 'width 0.3s, height 0.3s',
+        }}
+      />
+    </div>
+  );
+}