@thangnqdev/ui 0.1.2 → 0.2.1

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';

package/src/bento/tokens.css

@@ -1,46 +1,46 @@
-:root {
-  /* ==========================================================================
-     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
-     ========================================================================== */
-  --ui-bento-bg-surface: #f6f8fb;
-  --ui-bento-bg-card: #ffffff;
-  --ui-bento-bg-card-hover: #f9fafc;
-  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
-
-  --ui-bento-border: rgba(15, 23, 42, 0.08);
-  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
-
-  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
-  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
-
-  --ui-bento-text-title: #0a0c10;
-  --ui-bento-text-desc: #4b5563;
-  --ui-bento-text-tag: #6b7280;
-  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
-  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
-
-  --ui-bento-radius-md: 1.25rem; /* 20px */
-  --ui-bento-radius-lg: 1.75rem; /* 28px */
-}
-
-.dark {
-  /* ==========================================================================
-     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
-     ========================================================================== */
-  --ui-bento-bg-surface: #07080b;
-  --ui-bento-bg-card: #0d1017;
-  --ui-bento-bg-card-hover: #121620;
-  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
-
-  --ui-bento-border: rgba(255, 255, 255, 0.07);
-  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
-
-  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
-  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
-
-  --ui-bento-text-title: #f2f5f9;
-  --ui-bento-text-desc: #94a1b2;
-  --ui-bento-text-tag: #6b7a90;
-  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
-  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
-}
+:root {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
+     ========================================================================== */
+  --ui-bento-bg-surface: #f6f8fb;
+  --ui-bento-bg-card: #ffffff;
+  --ui-bento-bg-card-hover: #f9fafc;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
+
+  --ui-bento-border: rgba(15, 23, 42, 0.08);
+  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
+
+  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-bento-text-title: #0a0c10;
+  --ui-bento-text-desc: #4b5563;
+  --ui-bento-text-tag: #6b7280;
+  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
+  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
+
+  --ui-bento-radius-md: 1.25rem; /* 20px */
+  --ui-bento-radius-lg: 1.75rem; /* 28px */
+}
+
+.dark {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
+     ========================================================================== */
+  --ui-bento-bg-surface: #07080b;
+  --ui-bento-bg-card: #0d1017;
+  --ui-bento-bg-card-hover: #121620;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
+
+  --ui-bento-border: rgba(255, 255, 255, 0.07);
+  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
+
+  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
+
+  --ui-bento-text-title: #f2f5f9;
+  --ui-bento-text-desc: #94a1b2;
+  --ui-bento-text-tag: #6b7a90;
+  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
+  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
+}