@luanthnh/cntt-ui 0.1.5

package/hooks/index.ts

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

package/hooks/use-auto-height.tsx

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

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

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

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

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

@@ -0,0 +1,10 @@
+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/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@luanthnh/cntt-ui",
+  "version": "0.1.5",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./globals.css": "./globals.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate:exports": "tsx scripts/generate-exports.ts",
+    "prebuild": "pnpm generate:exports",
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "build:storybook": "storybook build"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "1.0.0-rc.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.1",
+    "framer-motion": "^11.13.1",
+    "input-otp": "^1.4.1",
+    "lenis": "^1.1.18",
+    "lucide-react": "^0.462.0",
+    "motion": "^11.11.17",
+    "next-themes": "^0.4.3",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.13.0",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.69.0",
+    "react-resizable-panels": "^4.0.15",
+    "recharts": "^2.13.3",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "tempus": "1.0.0-dev.17",
+    "vaul": "^1.1.1",
+    "zod": "^4.2.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "storybook": "^8.6.15",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  }
+}

package/scripts/generate-exports.ts

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

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