@luanthnh/cntt-ui 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanthnh/cntt-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -15,6 +15,11 @@
     },
     "./globals.css": "./globals.css"
   },
+  "files": [
+    "dist",
+    "globals.css",
+    "assets"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/.storybook/globals.d.ts

@@ -1 +0,0 @@
-declare module '*.css';

package/.storybook/main.ts

@@ -1,29 +0,0 @@
-import path from 'path';
-import type { StorybookConfig } from '@storybook/react-vite';
-import tailwindcss from '@tailwindcss/vite';
-
-const config: StorybookConfig = {
-  stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-onboarding',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  viteFinal: async (config) => {
-    config.plugins = config.plugins || [];
-    config.plugins.push(tailwindcss());
-
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        '@': path.resolve(__dirname, '../'),
-      };
-    }
-    return config;
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,32 +0,0 @@
-import type { Preview } from '@storybook/react';
-
-import '../globals.css';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#0a0e1a' },
-      ],
-    },
-  },
-  decorators: [
-    (Story, context) => {
-      const theme = context.globals.backgrounds?.value === '#0a0e1a' ? 'dark' : 'light';
-      if (typeof document !== 'undefined') {
-        document.documentElement.classList.toggle('dark', theme === 'dark');
-      }
-      return Story();
-    },
-  ],
-};
-
-export default preview;

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>
-  );
-}