@thangnqdev/ui 0.1.0

package/src/glass/tokens.css

@@ -0,0 +1,81 @@
+:root {
+  /* ==========================================================================
+     AETHER SPATIAL DESIGN TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
+     ========================================================================== */
+  
+  /* Glass Surface Tokens */
+  --ui-glass-subtle-bg: rgba(255, 255, 255, 0.65);
+  --ui-glass-subtle-border: rgba(15, 23, 42, 0.08);
+  --ui-glass-subtle-blur: 12px;
+
+  --ui-glass-standard-bg: rgba(255, 255, 255, 0.82);
+  --ui-glass-standard-border: rgba(15, 23, 42, 0.10);
+  --ui-glass-standard-blur: 20px;
+  --ui-glass-standard-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
+
+  --ui-glass-frosted-bg: rgba(255, 255, 255, 0.90);
+  --ui-glass-frosted-border: rgba(15, 23, 42, 0.12);
+  --ui-glass-frosted-blur: 32px;
+  --ui-glass-frosted-shadow: 0 20px 48px -8px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-glass-acrylic-bg: linear-gradient(175deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 247, 250, 0.80) 100%);
+  --ui-glass-acrylic-border: rgba(15, 23, 42, 0.14);
+  --ui-glass-acrylic-blur: 44px;
+  --ui-glass-acrylic-shadow: 0 28px 64px -12px rgba(15, 23, 42, 0.12), inset 0 1.5px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-glass-specular-light: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.06) 20%, rgba(15, 23, 42, 0.18) 50%, rgba(15, 23, 42, 0.06) 80%, transparent 100%);
+  --ui-glass-text-primary: #0a0c10;
+  --ui-glass-text-secondary: #4b5563;
+  --ui-glass-text-muted: #8b949e;
+
+  /* Button Tokens */
+  --ui-glass-btn-default-bg: rgba(255, 255, 255, 0.85);
+  --ui-glass-btn-default-hover: rgba(255, 255, 255, 1);
+  --ui-glass-btn-default-border: rgba(15, 23, 42, 0.12);
+  --ui-glass-btn-default-text: #0a0c10;
+
+  /* Focus Ring */
+  --ui-focus-ring: 0 0 0 1px #fff, 0 0 0 3px rgba(15, 23, 42, 0.9);
+  --ui-focus-ring-offset: #fafbfc;
+}
+
+.dark {
+  /* ==========================================================================
+     AETHER SPATIAL DESIGN TOKENS — DARK MODE (OBSIDIAN & LUNAR PRISM)
+     ========================================================================== */
+  
+  /* Glass Surface Tokens */
+  --ui-glass-subtle-bg: rgba(18, 20, 26, 0.45);
+  --ui-glass-subtle-border: rgba(255, 255, 255, 0.07);
+  --ui-glass-subtle-blur: 14px;
+
+  --ui-glass-standard-bg: rgba(18, 21, 28, 0.65);
+  --ui-glass-standard-border: rgba(255, 255, 255, 0.10);
+  --ui-glass-standard-blur: 24px;
+  --ui-glass-standard-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
+
+  --ui-glass-frosted-bg: rgba(22, 26, 36, 0.78);
+  --ui-glass-frosted-border: rgba(255, 255, 255, 0.14);
+  --ui-glass-frosted-blur: 36px;
+  --ui-glass-frosted-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
+
+  --ui-glass-acrylic-bg: linear-gradient(175deg, rgba(30, 36, 48, 0.85) 0%, rgba(14, 17, 24, 0.70) 100%);
+  --ui-glass-acrylic-border: rgba(255, 255, 255, 0.18);
+  --ui-glass-acrylic-blur: 48px;
+  --ui-glass-acrylic-shadow: 0 36px 80px -16px rgba(0, 0, 0, 0.85), inset 0 1.5px 0 0 rgba(255, 255, 255, 0.24);
+
+  --ui-glass-specular-light: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.15) 80%, transparent 100%);
+  --ui-glass-text-primary: #f0f3f8;
+  --ui-glass-text-secondary: #a0aec0;
+  --ui-glass-text-muted: #5e697a;
+
+  /* Button Tokens */
+  --ui-glass-btn-default-bg: rgba(255, 255, 255, 0.06);
+  --ui-glass-btn-default-hover: rgba(255, 255, 255, 0.12);
+  --ui-glass-btn-default-border: rgba(255, 255, 255, 0.15);
+  --ui-glass-btn-default-text: #f0f3f8;
+
+  /* Focus Ring */
+  --ui-focus-ring: 0 0 0 1px #07080b, 0 0 0 3px rgba(255, 255, 255, 0.8);
+  --ui-focus-ring-offset: #07080b;
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Domain Namespaces
+export * as Core from './core';
+export * as Layout from './layout';
+export * as Typography from './typography';
+export * as Buttons from './buttons';
+export * as Forms from './forms';
+export * as Overlays from './overlays';
+export * as Navigation from './navigation';
+export * as DataDisplay from './data-display';
+export * as Feedback from './feedback';
+export * as Glass from './glass';
+export * as Bento from './bento';
+
+// Flat Exports
+export * from './core';
+export * from './layout';
+export * from './typography';
+export * from './buttons';
+export * from './forms';
+export * from './overlays';
+export * from './navigation';
+export * from './data-display';
+export * from './feedback';
+export * from './glass';
+export * from './bento';
+export * from './utils/cn';

package/src/layout/AspectRatio.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+  ratio?: number | `${number}/${number}`;
+  children: React.ReactNode;
+}
+
+export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ className, ratio = 16 / 9, style, children, ...props }, ref) => {
+    const computedRatio =
+      typeof ratio === 'string'
+        ? ratio
+            .split('/')
+            .map(Number)
+            .reduce((w, h) => (h ? w / h : 1))
+        : ratio;
+
+    return (
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          position: 'relative',
+          width: '100%',
+          paddingBottom: `${(1 / computedRatio) * 100}%`,
+        }}
+        className={cn('overflow-hidden', className)}
+        {...props}
+      >
+        <div className="absolute inset-0 w-full h-full [&>img]:object-cover [&>video]:object-cover [&>img]:w-full [&>img]:h-full [&>video]:w-full [&>video]:h-full">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+AspectRatio.displayName = 'AspectRatio';

package/src/layout/Container.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const containerVariants = cva('w-full mx-auto', {
+  variants: {
+    size: {
+      sm: 'max-w-screen-sm',
+      md: 'max-w-screen-md',
+      lg: 'max-w-screen-lg',
+      xl: 'max-w-screen-xl',
+      '2xl': 'max-w-screen-2xl',
+      fluid: 'max-w-full',
+    },
+    padding: {
+      none: 'px-0',
+      sm: 'px-4',
+      md: 'px-6',
+      lg: 'px-8 sm:px-12',
+    },
+    centered: {
+      true: 'flex flex-col items-center justify-center',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'xl',
+    padding: 'md',
+    centered: false,
+  },
+});
+
+export interface ContainerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {
+  as?: React.ElementType;
+}
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size, padding, centered, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(containerVariants({ size, padding, centered }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Container.displayName = 'Container';

package/src/layout/Divider.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const dividerVariants = cva('border-0 flex-shrink-0', {
+  variants: {
+    orientation: {
+      horizontal: 'w-full h-px border-t border-[var(--ui-border-subtle)] my-4',
+      vertical: 'h-full w-px border-l border-[var(--ui-border-subtle)] mx-4 inline-block align-middle self-stretch',
+    },
+    variant: {
+      solid: 'border-solid',
+      dashed: 'border-dashed',
+      dotted: 'border-dotted',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid',
+  },
+});
+
+export interface DividerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof dividerVariants> {
+  label?: React.ReactNode;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ className, orientation = 'horizontal', variant, label, children, ...props }, ref) => {
+    const content = label || children;
+
+    if (orientation === 'horizontal' && content) {
+      return (
+        <div
+          ref={ref}
+          role="separator"
+          aria-orientation="horizontal"
+          className={cn('flex items-center w-full my-4 text-xs font-medium text-[var(--ui-text-muted)]', className)}
+          {...props}
+        >
+          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
+          <span className="px-3 select-none">{content}</span>
+          <div className={cn('flex-grow border-t border-[var(--ui-border-subtle)]', dividerVariants({ variant }))} />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation={orientation || 'horizontal'}
+        className={cn(dividerVariants({ orientation, variant }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

package/src/layout/Flex.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const flexVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      'row-reverse': 'flex-row-reverse',
+      column: 'flex-col',
+      'column-reverse': 'flex-col-reverse',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      nowrap: 'flex-nowrap',
+      wrap: 'flex-wrap',
+      'wrap-reverse': 'flex-wrap-reverse',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    inline: {
+      true: 'inline-flex',
+      false: 'flex',
+    },
+  },
+  defaultVariants: {
+    direction: 'row',
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'nowrap',
+    inline: false,
+  },
+});
+
+export interface FlexProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof flexVariants> {
+  as?: React.ElementType;
+}
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(
+  ({ className, direction, align, justify, wrap, gap, inline, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(flexVariants({ direction, align, justify, wrap, gap, inline }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Flex.displayName = 'Flex';

package/src/layout/Grid.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const gridVariants = cva('grid', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+      5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+      12: 'grid-cols-12',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    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: 1,
+    gap: 4,
+    flow: 'row',
+  },
+});
+
+export interface GridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof gridVariants> {
+  as?: React.ElementType;
+}
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  ({ className, cols, gap, flow, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(gridVariants({ cols, gap, flow }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+Grid.displayName = 'Grid';
+
+export const gridItemVariants = cva('', {
+  variants: {
+    colSpan: {
+      1: 'col-span-1',
+      2: 'col-span-2',
+      3: 'col-span-3',
+      4: 'col-span-4',
+      5: 'col-span-5',
+      6: 'col-span-6',
+      7: 'col-span-7',
+      8: 'col-span-8',
+      9: 'col-span-9',
+      10: 'col-span-10',
+      11: 'col-span-11',
+      12: 'col-span-12',
+      full: 'col-span-full',
+    },
+    rowSpan: {
+      1: 'row-span-1',
+      2: 'row-span-2',
+      3: 'row-span-3',
+      4: 'row-span-4',
+      5: 'row-span-5',
+      6: 'row-span-6',
+      full: 'row-span-full',
+    },
+    colStart: {
+      1: 'col-start-1',
+      2: 'col-start-2',
+      3: 'col-start-3',
+      4: 'col-start-4',
+      5: 'col-start-5',
+      6: 'col-start-6',
+      auto: 'col-start-auto',
+    },
+  },
+  defaultVariants: {
+    colSpan: 1,
+  },
+});
+
+export interface GridItemProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof gridItemVariants> {
+  as?: React.ElementType;
+}
+
+export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
+  ({ className, colSpan, rowSpan, colStart, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(gridItemVariants({ colSpan, rowSpan, colStart }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+GridItem.displayName = 'GridItem';

package/src/layout/PageLayout.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  header?: React.ReactNode;
+  sidebar?: React.ReactNode;
+  footer?: React.ReactNode;
+  sidebarWidth?: string;
+  sidebarCollapsed?: boolean;
+}
+
+export const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
+  ({ className, header, sidebar, footer, children, sidebarWidth = '16rem', sidebarCollapsed = false, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('min-h-screen flex flex-col bg-[var(--ui-bg-primary)] text-[var(--ui-text-primary)]', className)} {...props}>
+        {header && <header className="sticky top-0 z-30 w-full border-b border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] backdrop-blur-md">{header}</header>}
+        
+        <div className="flex-1 flex w-full">
+          {sidebar && (
+            <aside
+              style={{ width: sidebarCollapsed ? '4rem' : sidebarWidth }}
+              className="hidden md:flex flex-col flex-shrink-0 border-r border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] transition-[width] duration-200"
+            >
+              {sidebar}
+            </aside>
+          )}
+
+          <main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
+            <div className="flex-1 p-4 md:p-6 lg:p-8">{children}</div>
+            {footer && <footer className="border-t border-[var(--ui-border-subtle)] bg-[var(--ui-bg-surface)] p-4 md:p-6">{footer}</footer>}
+          </main>
+        </div>
+      </div>
+    );
+  }
+);
+PageLayout.displayName = 'PageLayout';
+
+export const PageHeader = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref as any} className={cn('flex items-center justify-between h-16 px-4 md:px-6 w-full', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PageHeader.displayName = 'PageHeader';
+
+export const PageSidebar = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref as any} className={cn('flex flex-col h-full p-4 overflow-y-auto', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PageSidebar.displayName = 'PageSidebar';

package/src/layout/ScrollArea.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import { cn } from '../utils/cn';
+
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  maxHeight?: string | number;
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  hideScrollbar?: boolean;
+}
+
+export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
+  (
+    {
+      maxHeight = '100%',
+      orientation = 'vertical',
+      hideScrollbar = false,
+      children,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        style={{ maxHeight, ...style }}
+        className={cn(
+          'relative w-full overflow-auto',
+          orientation === 'vertical' && 'overflow-y-auto overflow-x-hidden',
+          orientation === 'horizontal' && 'overflow-x-auto overflow-y-hidden',
+          orientation === 'both' && 'overflow-auto',
+          hideScrollbar && '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
+          !hideScrollbar && '[scrollbar-width:thin] [scrollbar-color:rgba(150,150,160,0.3)_transparent]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ScrollArea.displayName = 'ScrollArea';

package/src/layout/Section.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const sectionVariants = cva('w-full relative', {
+  variants: {
+    spacing: {
+      none: 'py-0',
+      sm: 'py-6 md:py-8',
+      md: 'py-12 md:py-16',
+      lg: 'py-16 md:py-24',
+      xl: 'py-24 md:py-32',
+    },
+    variant: {
+      default: 'bg-transparent text-[var(--ui-text-primary)]',
+      subtle: 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-primary)]',
+      surface: 'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)]',
+      muted: 'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]',
+    },
+  },
+  defaultVariants: {
+    spacing: 'md',
+    variant: 'default',
+  },
+});
+
+export interface SectionProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof sectionVariants> {
+  as?: React.ElementType;
+}
+
+export const Section = forwardRef<HTMLElement, SectionProps>(
+  ({ className, spacing, variant, as: Component = 'section', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(sectionVariants({ spacing, variant }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Section.displayName = 'Section';

package/src/layout/Spacer.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  x?: number | string;
+  y?: number | string;
+}
+
+export const Spacer = forwardRef<HTMLDivElement, SpacerProps>(
+  ({ className, x, y, style, ...props }, ref) => {
+    const spacingStyle: React.CSSProperties = {
+      ...style,
+      ...(x !== undefined && {
+        width: typeof x === 'number' ? `${x * 0.25}rem` : x,
+        minWidth: typeof x === 'number' ? `${x * 0.25}rem` : x,
+      }),
+      ...(y !== undefined && {
+        height: typeof y === 'number' ? `${y * 0.25}rem` : y,
+        minHeight: typeof y === 'number' ? `${y * 0.25}rem` : y,
+      }),
+      ...(x === undefined && y === undefined && {
+        flex: '1 1 0%',
+      }),
+    };
+
+    return <div ref={ref} aria-hidden="true" style={spacingStyle} className={cn('pointer-events-none', className)} {...props} />;
+  }
+);
+
+Spacer.displayName = 'Spacer';