@luanthnh/cntt-ui 0.1.8 → 0.1.9

package/assets/lotties/loader.json

@@ -1,305 +0,0 @@
-{
-  "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

@@ -1,74 +0,0 @@
-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

@@ -1,48 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-'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

@@ -1,108 +0,0 @@
-'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>
-  );
-}