@luanthnh/cntt-ui 0.1.7 → 0.1.9

package/components/ui/VStack/index.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { motion, type HTMLMotionProps } from 'motion/react';
-
-import { cn } from '@/lib/utils';
-
-/* ---------- VStack ---------- */
-const vStackVariants = cva('flex flex-col', {
-  variants: {
-    justify: {
-      top: 'justify-start',
-      bottom: 'justify-end',
-      center: 'justify-center',
-      apart: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    align: {
-      default: 'items-stretch',
-      center: 'items-center',
-      start: 'items-start',
-      end: 'items-end',
-      baseline: 'items-baseline',
-    },
-    spacing: {
-      0: 'gap-0',
-      2: 'gap-0.5',
-      4: 'gap-1',
-      6: 'gap-1.5',
-      8: 'gap-2',
-      12: 'gap-3',
-      16: 'gap-4',
-      20: 'gap-5',
-      24: 'gap-6',
-      32: 'gap-8',
-      40: 'gap-10',
-      48: 'gap-12',
-      64: 'gap-16',
-      none: 'gap-0',
-    },
-    noWrap: {
-      true: 'flex-nowrap',
-    },
-  },
-  defaultVariants: {
-    spacing: 16,
-    justify: 'top',
-    align: 'default',
-  },
-});
-
-export interface VStackProps extends VariantProps<typeof vStackVariants>, HTMLMotionProps<'div'> {}
-
-const VStack = React.forwardRef<HTMLDivElement, VStackProps>(
-  ({ className, noWrap, justify, align, spacing, children, ...motionProps }, ref) => (
-    <motion.div
-      ref={ref}
-      className={cn(vStackVariants({ spacing, align, justify, noWrap }), className)}
-      {...motionProps}
-    >
-      {children}
-    </motion.div>
-  ),
-);
-VStack.displayName = 'VStack';
-
-export { VStack, vStackVariants };

package/components/ui/colors.stories.tsx

@@ -1,148 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-/**
- * Display existing color palettes from `globals.css`.
- * Colors are defined as CSS variables with Dark Mode support.
- */
-const meta: Meta = {
-  title: 'Theme/Colors',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const ColorGroup = ({ title, colors }: { title: string; colors: Record<string, string> }) => (
-  <div className="mb-10">
-    <h3 className="text-foreground mb-4 text-lg font-bold">{title}</h3>
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      {Object.entries(colors).map(([name, variable]) => (
-        <div key={name} className="flex flex-col gap-2">
-          <div
-            className="border-border h-20 w-full rounded-lg border shadow-sm transition-transform hover:scale-105"
-            style={{ backgroundColor: variable }}
-          />
-          <div className="flex flex-col">
-            <span className="text-foreground text-sm font-medium">{name}</span>
-            <span className="text-muted-foreground text-xs uppercase">
-              {variable.replace('var(', '').replace(')', '')}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-export const Palettes = {
-  render: () => (
-    <div className="bg-background min-h-screen p-8">
-      <div className="border-border mb-8 border-b pb-4">
-        <h1 className="text-foreground text-3xl font-bold">Color Palette</h1>
-        <p className="text-muted-foreground mt-2">
-          The color system used in the application, defined in <code>globals.css</code>.
-        </p>
-      </div>
-
-      <ColorGroup
-        title="Primary (Blue)"
-        colors={{
-          'Primary 50': 'var(--primary-50)',
-          'Primary 100': 'var(--primary-100)',
-          'Primary 200': 'var(--primary-200)',
-          'Primary 300': 'var(--primary-300)',
-          'Primary 400': 'var(--primary-400)',
-          'Primary 500': 'var(--primary-500)',
-          'Primary 600': 'var(--primary-600)',
-          'Primary 700': 'var(--primary-700)',
-          'Primary 800': 'var(--primary-800)',
-          'Primary 900': 'var(--primary-900)',
-          'Primary 950': 'var(--primary-950)',
-          Default: 'var(--primary)',
-        }}
-      />
-
-      <ColorGroup
-        title="Secondary & Muted"
-        colors={{
-          'Secondary 50': 'var(--secondary-50)',
-          'Secondary 100': 'var(--secondary-100)',
-          'Secondary 200': 'var(--secondary-200)',
-          Secondary: 'var(--secondary)',
-          Muted: 'var(--muted)',
-          'Muted Foreground': 'var(--muted-foreground)',
-        }}
-      />
-
-      <ColorGroup
-        title="Accent & Status"
-        colors={{
-          Accent: 'var(--accent)',
-          'Accent Foreground': 'var(--accent-foreground)',
-          Success: 'var(--success)',
-          Warning: 'var(--warning)',
-          Destructive: 'var(--destructive)',
-        }}
-      />
-
-      <ColorGroup
-        title="Base UI Colors"
-        colors={{
-          Background: 'var(--background)',
-          Foreground: 'var(--foreground)',
-          Card: 'var(--card)',
-          Popover: 'var(--popover)',
-          Border: 'var(--border)',
-          Input: 'var(--input)',
-          Ring: 'var(--ring)',
-        }}
-      />
-
-      <ColorGroup
-        title="Chart Colors"
-        colors={{
-          'Chart 1': 'var(--chart-1)',
-          'Chart 2': 'var(--chart-2)',
-          'Chart 3': 'var(--chart-3)',
-          'Chart 4': 'var(--chart-4)',
-          'Chart 5': 'var(--chart-5)',
-        }}
-      />
-
-      <ColorGroup
-        title="Sidebar Colors"
-        colors={{
-          'Sidebar BG': 'var(--sidebar)',
-          'Sidebar FG': 'var(--sidebar-foreground)',
-          'Sidebar Primary': 'var(--sidebar-primary)',
-          'Sidebar Accent': 'var(--sidebar-accent)',
-          'Sidebar Border': 'var(--sidebar-border)',
-          'Sidebar Ring': 'var(--sidebar-ring)',
-        }}
-      />
-
-      <ColorGroup
-        title="Solid Colors"
-        colors={{
-          'Primary Solid': 'var(--color-primary-solid)',
-          'Secondary Solid': 'var(--color-secondary-solid)',
-          'Success Solid': 'var(--color-success-solid)',
-          'Warning Solid': 'var(--color-warning-solid)',
-          'Danger Solid': 'var(--color-danger-solid)',
-          'Surface Solid': 'var(--color-surface-solid)',
-        }}
-      />
-
-      <ColorGroup
-        title="Glass & Shadows"
-        colors={{
-          'Glass BG': 'var(--glass-bg)',
-          'Glass Border': 'var(--glass-border)',
-          'Shadow Glow': 'var(--shadow-glow)',
-          'Shadow Glow LG': 'var(--shadow-glow-lg)',
-        }}
-      />
-    </div>
-  ),
-};

package/eslint.config.js

@@ -1,10 +0,0 @@
-import { baseEslintConfig } from '@luanthnh/eslint-config';
-
-const config = [
-  {
-    ignores: ['dist/**', 'node_modules/**', 'storybook-static/**', 'index.ts'],
-  },
-  ...baseEslintConfig,
-];
-
-export default config;

package/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useAutoHeight } from './use-auto-height';
-export { useControlledState } from './use-controlled-state';
-export { useIsMobile } from './use-mobile';

package/hooks/use-auto-height.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-type AutoHeightOptions = {
-  includeParentBox?: boolean;
-  includeSelfBox?: boolean;
-};
-
-export function useAutoHeight<T extends HTMLElement = HTMLDivElement>(
-  deps: React.DependencyList = [],
-  options: AutoHeightOptions = {
-    includeParentBox: true,
-    includeSelfBox: false,
-  },
-) {
-  const ref = React.useRef<T | null>(null);
-  const roRef = React.useRef<ResizeObserver | null>(null);
-  const [height, setHeight] = React.useState(0);
-
-  const measure = React.useCallback(() => {
-    const el = ref.current;
-    if (!el) return 0;
-
-    const base = el.getBoundingClientRect().height || 0;
-
-    let extra = 0;
-
-    if (options.includeParentBox && el.parentElement) {
-      const cs = getComputedStyle(el.parentElement);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) + (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    if (options.includeSelfBox) {
-      const cs = getComputedStyle(el);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) + (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-    const total = Math.ceil((base + extra) * dpr) / dpr;
-
-    return total;
-  }, [options.includeParentBox, options.includeSelfBox]);
-
-  React.useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    setHeight(measure());
-
-    if (roRef.current) {
-      roRef.current.disconnect();
-      roRef.current = null;
-    }
-
-    const ro = new ResizeObserver(() => {
-      const next = measure();
-      requestAnimationFrame(() => setHeight(next));
-    });
-
-    ro.observe(el);
-    if (options.includeParentBox && el.parentElement) {
-      ro.observe(el.parentElement);
-    }
-
-    roRef.current = ro;
-
-    return () => {
-      ro.disconnect();
-      roRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  React.useLayoutEffect(() => {
-    if (height === 0) {
-      const next = measure();
-      if (next !== 0) setHeight(next);
-    }
-  }, [height, measure]);
-
-  return { ref, height } as const;
-}

package/hooks/use-controlled-state.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-interface CommonControlledStateProps<T> {
-  value?: T;
-  defaultValue?: T;
-}
-
-export function useControlledState<T, Rest extends unknown[] = []>(
-  props: CommonControlledStateProps<T> & {
-    onChange?: (value: T, ...args: Rest) => void;
-  },
-): readonly [T, (next: T, ...args: Rest) => void] {
-  const { value, defaultValue, onChange } = props;
-
-  const [state, setInternalState] = React.useState<T>(
-    value !== undefined ? value : (defaultValue as T),
-  );
-
-  React.useEffect(() => {
-    if (value !== undefined) setInternalState(value);
-  }, [value]);
-
-  const setState = React.useCallback(
-    (next: T, ...args: Rest) => {
-      setInternalState(next);
-      onChange?.(next, ...args);
-    },
-    [onChange],
-  );
-
-  return [state, setState] as const;
-}

package/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/index.ts

@@ -1,58 +0,0 @@
-// Auto-generated file. Do not edit manually.
-export * from './components/ui/Accordion';
-export * from './components/ui/Alert';
-export * from './components/ui/AlertDialog';
-export * from './components/ui/AspectRatio';
-export * from './components/ui/Avatar';
-export * from './components/ui/Badge';
-export * from './components/ui/Breadcrumb';
-export * from './components/ui/Button';
-export * from './components/ui/Calendar';
-export * from './components/ui/Card';
-export * from './components/ui/Carousel';
-export * from './components/ui/Chart';
-export * from './components/ui/Checkbox';
-export * from './components/ui/CircleProcess';
-export * from './components/ui/Collapsible';
-export * from './components/ui/Command';
-export * from './components/ui/Container';
-export * from './components/ui/ContextMenu';
-export * from './components/ui/Dialog';
-export * from './components/ui/Drawer';
-export * from './components/ui/DropdownMenu';
-export * from './components/ui/Dropzone';
-export * from './components/ui/Form';
-export * from './components/ui/HStack';
-export * from './components/ui/HoverCard';
-export * from './components/ui/Icons';
-export * from './components/ui/ImageWithFallback';
-export * from './components/ui/Input';
-export * from './components/ui/InputOtp';
-export * from './components/ui/Label';
-export * from './components/ui/Marquee';
-export * from './components/ui/Menubar';
-export * from './components/ui/NavigationMenu';
-export * from './components/ui/NoData';
-export * from './components/ui/Pagination';
-export * from './components/ui/Popover';
-export * from './components/ui/Progress';
-export * from './components/ui/RadioGroup';
-export * from './components/ui/Resizable';
-export * from './components/ui/ScrollArea';
-export * from './components/ui/Select';
-export * from './components/ui/Separator';
-export * from './components/ui/Sheet';
-export * from './components/ui/Sidebar';
-export * from './components/ui/Skeleton';
-export * from './components/ui/Slider';
-export * from './components/ui/Slot';
-export * from './components/ui/Sonner';
-export * from './components/ui/Switch';
-export * from './components/ui/Table';
-export * from './components/ui/Tabs';
-export * from './components/ui/Text';
-export * from './components/ui/Textarea';
-export * from './components/ui/Toggle';
-export * from './components/ui/ToggleGroup';
-export * from './components/ui/Tooltip';
-export * from './components/ui/VStack';

package/lib/get-strict-context.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-
-export function getStrictContext<T>(name: string) {
-  const Context = React.createContext<T | undefined>(undefined);
-
-  function useContext() {
-    const context = React.useContext(Context);
-    if (context === undefined) {
-      throw new Error(`use${name} must be used within a ${name}Provider`);
-    }
-    return context;
-  }
-
-  return [Context.Provider, useContext] as const;
-}

package/lib/utils.ts

@@ -1,10 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function onMutateError(error: unknown) {
-  console.error('Mutation error:', error);
-}

package/scripts/generate-exports.ts

@@ -1,32 +0,0 @@
-import fs from 'fs/promises';
-import path from 'path';
-
-async function generateExports() {
-  const componentsDir = path.join(process.cwd(), 'components/ui');
-  const componentDirs = await fs.readdir(componentsDir, { withFileTypes: true });
-
-  const exports = [];
-
-  for (const dir of componentDirs) {
-    if (dir.isDirectory()) {
-      const componentName = dir.name;
-      const indexPath = path.join(dir.path, dir.name, 'index.tsx');
-
-      try {
-        await fs.access(indexPath);
-        exports.push(`export * from "./components/ui/${componentName}"`);
-      } catch {
-        console.warn(`No index.tsx found for component: ${componentName}`);
-      }
-    }
-  }
-
-  const content = `// Auto-generated file. Do not edit manually.
-${exports.join('\n')}
-`;
-
-  await fs.writeFile(path.join(process.cwd(), 'index.ts'), content);
-  console.log('Exports generated successfully!');
-}
-
-generateExports().catch(console.error);

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "ignoreDeprecations": "5.0",
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "incremental": false
-  },
-  "include": ["**/*.ts", "**/*.tsx", "types/*.d.ts", "lib", "scripts", "hooks", "components"]
-}