@thangnqdev/ui 0.2.1 → 0.2.2

package/scripts/postinstall.js

@@ -1,125 +1,125 @@
-#!/usr/bin/env node
-
-import fs from 'node:fs';
-import path from 'node:path';
-import os from 'node:os';
-import readline from 'node:readline';
-import { execSync } from 'node:child_process';
-
-const CONFIG_DIR = path.join(os.homedir(), '.thangnqdev-ui');
-const CONFIG_FILE = path.join(CONFIG_DIR, 'telemetry.json');
-
-// 1. Silent bailouts for CI, non-interactive environments, and opt-out flags
-if (
-  process.env.CI ||
-  process.env.CONTINUOUS_INTEGRATION ||
-  process.env.DO_NOT_TRACK === '1' ||
-  process.env.AETHER_TELEMETRY_DISABLED === '1' ||
-  !process.stdout.isTTY ||
-  !process.stdin.isTTY
-) {
-  process.exit(0);
-}
-
-// 2. Check if user has already configured preference
-if (fs.existsSync(CONFIG_FILE)) {
-  try {
-    const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
-    if (config.prompted) {
-      process.exit(0);
-    }
-  } catch {
-    // Ignore corrupted config
-  }
-}
-
-function getGitRemote() {
-  try {
-    const remote = execSync('git remote get-url origin', {
-      stdio: ['pipe', 'pipe', 'ignore'],
-      timeout: 1000,
-    })
-      .toString()
-      .trim();
-    return remote;
-  } catch {
-    return null;
-  }
-}
-
-function saveConfig(data) {
-  try {
-    if (!fs.existsSync(CONFIG_DIR)) {
-      fs.mkdirSync(CONFIG_DIR, { recursive: true });
-    }
-    fs.writeFileSync(
-      CONFIG_FILE,
-      JSON.stringify(
-        {
-          ...data,
-          updatedAt: new Date().toISOString(),
-          prompted: true,
-        },
-        null,
-        2
-      )
-    );
-  } catch {
-    // Ignore filesystem permissions error on read-only environments
-  }
-}
-
-async function promptUser() {
-  const detectedRepo = getGitRemote();
-
-  console.log('\n\x1b[36m╭────────────────────────────────────────────────────────────────────────╮\x1b[0m');
-  console.log('\x1b[36m│\x1b[0m  \x1b[1m✦ Thanks for installing @thangnqdev/ui (AETHER Spatial UI)\x1b[0m            \x1b[36m│\x1b[0m');
-  console.log('\x1b[36m│\x1b[0m                                                                        \x1b[36m│\x1b[0m');
-  console.log('\x1b[36m│\x1b[0m  Would you like to share your public repository info to be featured    \x1b[36m│\x1b[0m');
-  console.log('\x1b[36m│\x1b[0m  in the AETHER Community Showcase & project ecosystem?                 \x1b[36m│\x1b[0m');
-  if (detectedRepo) {
-    console.log(`\x1b[36m│\x1b[0m  \x1b[90mDetected repo:\x1b[0m \x1b[32m${detectedRepo.slice(0, 52)}\x1b[0m \x1b[36m│\x1b[0m`);
-  }
-  console.log('\x1b[36m│\x1b[0m                                                                        \x1b[36m│\x1b[0m');
-  console.log('\x1b[36m│\x1b[0m  \x1b[1m[y]\x1b[0m Yes, share repo info    \x1b[1m[n]\x1b[0m No, keep anonymous (Default: n)      \x1b[36m│\x1b[0m');
-  console.log('\x1b[36m╰────────────────────────────────────────────────────────────────────────╯\x1b[0m');
-
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-
-  return new Promise((resolve) => {
-    // Timeout prompt after 15 seconds so installation never hangs
-    const timer = setTimeout(() => {
-      saveConfig({ enabled: false, repo: null });
-      rl.close();
-      resolve();
-    }, 15000);
-
-    rl.question('  \x1b[33mShare repository info? (y/N):\x1b[0m ', (answer) => {
-      clearTimeout(timer);
-      const isYes = answer.trim().toLowerCase() === 'y' || answer.trim().toLowerCase() === 'yes';
-
-      if (isYes) {
-        saveConfig({
-          enabled: true,
-          repo: detectedRepo || 'manual-opt-in',
-          optedInAt: new Date().toISOString(),
-        });
-        console.log('  \x1b[32m✔ Thank you! Repository info shared with AETHER Community Showcase.\x1b[0m\n');
-      } else {
-        saveConfig({
-          enabled: false,
-          repo: null,
-        });
-        console.log('  \x1b[90m✔ Understood. Anonymous mode active. (Manage anytime via npx @thangnqdev/ui showcase)\x1b[0m\n');
-      }
-
-      rl.close();
-      resolve();
-    });
-  });
-}
-
-promptUser().catch(() => process.exit(0));
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import readline from 'node:readline';
+import { execSync } from 'node:child_process';
+
+const CONFIG_DIR = path.join(os.homedir(), '.thangnqdev-ui');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'telemetry.json');
+
+// 1. Silent bailouts for CI, non-interactive environments, and opt-out flags
+if (
+  process.env.CI ||
+  process.env.CONTINUOUS_INTEGRATION ||
+  process.env.DO_NOT_TRACK === '1' ||
+  process.env.AETHER_TELEMETRY_DISABLED === '1' ||
+  !process.stdout.isTTY ||
+  !process.stdin.isTTY
+) {
+  process.exit(0);
+}
+
+// 2. Check if user has already configured preference
+if (fs.existsSync(CONFIG_FILE)) {
+  try {
+    const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
+    if (config.prompted) {
+      process.exit(0);
+    }
+  } catch {
+    // Ignore corrupted config
+  }
+}
+
+function getGitRemote() {
+  try {
+    const remote = execSync('git remote get-url origin', {
+      stdio: ['pipe', 'pipe', 'ignore'],
+      timeout: 1000,
+    })
+      .toString()
+      .trim();
+    return remote;
+  } catch {
+    return null;
+  }
+}
+
+function saveConfig(data) {
+  try {
+    if (!fs.existsSync(CONFIG_DIR)) {
+      fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    fs.writeFileSync(
+      CONFIG_FILE,
+      JSON.stringify(
+        {
+          ...data,
+          updatedAt: new Date().toISOString(),
+          prompted: true,
+        },
+        null,
+        2
+      )
+    );
+  } catch {
+    // Ignore filesystem permissions error on read-only environments
+  }
+}
+
+async function promptUser() {
+  const detectedRepo = getGitRemote();
+
+  console.log('\n\x1b[36m╭────────────────────────────────────────────────────────────────────────╮\x1b[0m');
+  console.log('\x1b[36m│\x1b[0m  \x1b[1m✦ Thanks for installing @thangnqdev/ui (AETHER Spatial UI)\x1b[0m            \x1b[36m│\x1b[0m');
+  console.log('\x1b[36m│\x1b[0m                                                                        \x1b[36m│\x1b[0m');
+  console.log('\x1b[36m│\x1b[0m  Would you like to share your public repository info to be featured    \x1b[36m│\x1b[0m');
+  console.log('\x1b[36m│\x1b[0m  in the AETHER Community Showcase & project ecosystem?                 \x1b[36m│\x1b[0m');
+  if (detectedRepo) {
+    console.log(`\x1b[36m│\x1b[0m  \x1b[90mDetected repo:\x1b[0m \x1b[32m${detectedRepo.slice(0, 52)}\x1b[0m \x1b[36m│\x1b[0m`);
+  }
+  console.log('\x1b[36m│\x1b[0m                                                                        \x1b[36m│\x1b[0m');
+  console.log('\x1b[36m│\x1b[0m  \x1b[1m[y]\x1b[0m Yes, share repo info    \x1b[1m[n]\x1b[0m No, keep anonymous (Default: n)      \x1b[36m│\x1b[0m');
+  console.log('\x1b[36m╰────────────────────────────────────────────────────────────────────────╯\x1b[0m');
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    // Timeout prompt after 15 seconds so installation never hangs
+    const timer = setTimeout(() => {
+      saveConfig({ enabled: false, repo: null });
+      rl.close();
+      resolve();
+    }, 15000);
+
+    rl.question('  \x1b[33mShare repository info? (y/N):\x1b[0m ', (answer) => {
+      clearTimeout(timer);
+      const isYes = answer.trim().toLowerCase() === 'y' || answer.trim().toLowerCase() === 'yes';
+
+      if (isYes) {
+        saveConfig({
+          enabled: true,
+          repo: detectedRepo || 'manual-opt-in',
+          optedInAt: new Date().toISOString(),
+        });
+        console.log('  \x1b[32m✔ Thank you! Repository info shared with AETHER Community Showcase.\x1b[0m\n');
+      } else {
+        saveConfig({
+          enabled: false,
+          repo: null,
+        });
+        console.log('  \x1b[90m✔ Understood. Anonymous mode active. (Manage anytime via npx @thangnqdev/ui showcase)\x1b[0m\n');
+      }
+
+      rl.close();
+      resolve();
+    });
+  });
+}
+
+promptUser().catch(() => process.exit(0));

package/src/bento/BentoCard.tsx

@@ -1,140 +1,140 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const bentoCardVariants = cva(
-  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',
-  {
-    variants: {
-      colSpan: {
-        1: 'col-span-1',
-        2: 'col-span-1 md:col-span-2',
-        3: 'col-span-1 md:col-span-2 lg:col-span-3',
-      },
-      rowSpan: {
-        1: 'row-span-1',
-        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',
-        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',
-      },
-      variant: {
-        default:
-          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',
-        spotlight:
-          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',
-        elevated:
-          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',
-      },
-      radius: {
-        md: 'rounded-[var(--ui-bento-radius-md)]',
-        lg: 'rounded-[var(--ui-bento-radius-lg)]',
-      },
-      padding: {
-        sm: 'p-4 sm:p-5',
-        md: 'p-5 sm:p-7',
-        lg: 'p-6 sm:p-9',
-      },
-    },
-    defaultVariants: {
-      colSpan: 1,
-      rowSpan: 1,
-      variant: 'default',
-      radius: 'lg',
-      padding: 'md',
-    },
-  }
-);
-
-export interface BentoCardProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
-    VariantProps<typeof bentoCardVariants> {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  icon?: React.ReactNode;
-  tag?: React.ReactNode;
-  /**
-   * Decorative background graphic. Non-interactive backdrop element.
-   */
-  backgroundGraphic?: React.ReactNode;
-  /**
-   * @deprecated Use `backgroundGraphic` instead.
-   */
-  graphic?: React.ReactNode;
-}
-
-export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
-  (
-    {
-      className,
-      colSpan,
-      rowSpan,
-      variant,
-      radius,
-      padding,
-      title,
-      description,
-      icon,
-      tag,
-      backgroundGraphic,
-      graphic,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const bgGraphic = backgroundGraphic ?? graphic;
-
-    return (
-      <div
-        ref={ref}
-        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}
-        {...props}
-      >
-        {/* Subtle Specular Top Line */}
-        <div
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50"
-          aria-hidden="true"
-        />
-
-        {/* Background Visual Graphic Slot (Decorative) */}
-        {bgGraphic && (
-          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105">
-            {bgGraphic}
-          </div>
-        )}
-
-        {/* Top Header Section */}
-        {(icon || tag) && (
-          <div className="relative z-10 flex items-start justify-between gap-4">
-            {icon && (
-              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105">
-                {icon}
-              </div>
-            )}
-            {tag && (
-              <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm">
-                {tag}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Main Content Area */}
-        <div className="relative z-10 mt-auto pt-6">
-          {title && (
-            <h3 className="text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white">
-              {title}
-            </h3>
-          )}
-          {description && (
-            <p className="mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal">
-              {description}
-            </p>
-          )}
-          {children}
-        </div>
-      </div>
-    );
-  }
-);
-
-BentoCard.displayName = 'BentoCard';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoCardVariants = cva(
+  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',
+  {
+    variants: {
+      colSpan: {
+        1: 'col-span-1',
+        2: 'col-span-1 md:col-span-2',
+        3: 'col-span-1 md:col-span-2 lg:col-span-3',
+      },
+      rowSpan: {
+        1: 'row-span-1',
+        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',
+        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',
+      },
+      variant: {
+        default:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',
+        spotlight:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',
+        elevated:
+          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',
+      },
+      radius: {
+        md: 'rounded-[var(--ui-bento-radius-md)]',
+        lg: 'rounded-[var(--ui-bento-radius-lg)]',
+      },
+      padding: {
+        sm: 'p-4 sm:p-5',
+        md: 'p-5 sm:p-7',
+        lg: 'p-6 sm:p-9',
+      },
+    },
+    defaultVariants: {
+      colSpan: 1,
+      rowSpan: 1,
+      variant: 'default',
+      radius: 'lg',
+      padding: 'md',
+    },
+  }
+);
+
+export interface BentoCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof bentoCardVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  tag?: React.ReactNode;
+  /**
+   * Decorative background graphic. Non-interactive backdrop element.
+   */
+  backgroundGraphic?: React.ReactNode;
+  /**
+   * @deprecated Use `backgroundGraphic` instead.
+   */
+  graphic?: React.ReactNode;
+}
+
+export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
+  (
+    {
+      className,
+      colSpan,
+      rowSpan,
+      variant,
+      radius,
+      padding,
+      title,
+      description,
+      icon,
+      tag,
+      backgroundGraphic,
+      graphic,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const bgGraphic = backgroundGraphic ?? graphic;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}
+        {...props}
+      >
+        {/* Subtle Specular Top Line */}
+        <div
+          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50"
+          aria-hidden="true"
+        />
+
+        {/* Background Visual Graphic Slot (Decorative) */}
+        {bgGraphic && (
+          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105">
+            {bgGraphic}
+          </div>
+        )}
+
+        {/* Top Header Section */}
+        {(icon || tag) && (
+          <div className="relative z-10 flex items-start justify-between gap-4">
+            {icon && (
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105">
+                {icon}
+              </div>
+            )}
+            {tag && (
+              <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm">
+                {tag}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Main Content Area */}
+        <div className="relative z-10 mt-auto pt-6">
+          {title && (
+            <h3 className="text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal">
+              {description}
+            </p>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+BentoCard.displayName = 'BentoCard';

package/src/bento/BentoGrid.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {
-  variants: {
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 md:grid-cols-2',
-      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-    },
-    gap: {
-      sm: 'gap-4',
-      md: 'gap-6',
-      lg: 'gap-8',
-    },
-    flow: {
-      row: 'grid-flow-row',
-      col: 'grid-flow-col',
-      dense: 'grid-flow-dense',
-      'row-dense': 'grid-flow-row-dense',
-      'col-dense': 'grid-flow-col-dense',
-    },
-  },
-  defaultVariants: {
-    cols: 3,
-    gap: 'md',
-    flow: 'row',
-  },
-});
-
-export interface BentoGridProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof bentoGridVariants> {}
-
-export const BentoGrid: React.FC<BentoGridProps> = ({
-  className,
-  cols,
-  gap,
-  flow,
-  children,
-  ...props
-}) => {
-  return (
-    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>
-      {children}
-    </div>
-  );
-};
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 md:grid-cols-2',
+      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+    },
+    gap: {
+      sm: 'gap-4',
+      md: 'gap-6',
+      lg: 'gap-8',
+    },
+    flow: {
+      row: 'grid-flow-row',
+      col: 'grid-flow-col',
+      dense: 'grid-flow-dense',
+      'row-dense': 'grid-flow-row-dense',
+      'col-dense': 'grid-flow-col-dense',
+    },
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: 'md',
+    flow: 'row',
+  },
+});
+
+export interface BentoGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bentoGridVariants> {}
+
+export const BentoGrid: React.FC<BentoGridProps> = ({
+  className,
+  cols,
+  gap,
+  flow,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/bento/index.ts

@@ -1,2 +1,2 @@
-export * from './BentoGrid';
-export * from './BentoCard';
+export * from './BentoGrid';
+export * from './BentoCard';