@thangnqdev/ui 0.1.2 → 0.2.0

package/src/forms/tokens.css

@@ -1,6 +1,6 @@
-/* Forms Tokens */
-:root {
-  --ui-input-height-sm: 2rem;
-  --ui-input-height-md: 2.5rem;
-  --ui-input-height-lg: 3rem;
-}
+/* Forms Tokens */
+:root {
+  --ui-input-height-sm: 2rem;
+  --ui-input-height-md: 2.5rem;
+  --ui-input-height-lg: 3rem;
+}

package/src/glass/GlassButton.tsx

@@ -1,59 +1,59 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const glassButtonVariants = cva(
-  'group relative inline-flex items-center justify-center font-medium tracking-tight transition-all duration-300 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 overflow-hidden cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 dark:focus-visible:ring-white/90 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-focus-ring-offset)]',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-[var(--ui-glass-btn-default-bg)] hover:bg-[var(--ui-glass-btn-default-hover)] backdrop-blur-md border border-[var(--ui-glass-btn-default-border)] text-[var(--ui-glass-btn-default-text)] shadow-sm dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)] hover:border-black/20 dark:hover:border-white/35',
-        primary:
-          'bg-slate-900 text-white dark:bg-white dark:text-slate-950 font-semibold shadow-md hover:bg-slate-800 dark:hover:bg-slate-100 border border-slate-700 dark:border-white shadow-[0_4px_20px_rgba(0,0,0,0.2)] dark:shadow-[0_0_24px_rgba(255,255,255,0.25)]',
-        luminescent:
-          'bg-gradient-to-r from-slate-800/80 to-slate-900/80 text-white dark:from-white/15 dark:to-white/5 dark:text-white backdrop-blur-xl border border-white/20 dark:border-white/30 shadow-[0_0_20px_-4px_rgba(255,255,255,0.15)] hover:border-white/50 hover:shadow-[0_0_30px_-4px_rgba(255,255,255,0.3)]',
-        ghost:
-          'bg-transparent hover:bg-black/5 dark:hover:bg-white/10 backdrop-blur-sm border border-transparent hover:border-black/10 dark:hover:border-white/15 text-[var(--ui-glass-text-secondary)] hover:text-[var(--ui-glass-text-primary)]',
-      },
-      size: {
-        sm: 'h-8 px-3.5 text-xs rounded-xl gap-1.5',
-        md: 'h-10 px-5 text-sm rounded-2xl gap-2',
-        lg: 'h-12 px-7 text-base rounded-2xl gap-2.5',
-        icon: 'h-10 w-10 rounded-2xl',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-);
-
-export interface GlassButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof glassButtonVariants> {
-  shimmer?: boolean;
-}
-
-export const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(
-  ({ className, variant, size, shimmer = true, children, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(glassButtonVariants({ variant, size, className }))}
-        {...props}
-      >
-        {shimmer && (
-          <span
-            className="pointer-events-none absolute -inset-full top-0 block -rotate-45 bg-gradient-to-r from-transparent via-white/25 dark:via-white/15 to-transparent transition-all duration-700 motion-safe:group-hover:translate-x-full"
-            aria-hidden="true"
-          />
-        )}
-        <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
-      </button>
-    );
-  }
-);
-
-GlassButton.displayName = 'GlassButton';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const glassButtonVariants = cva(
+  'group relative inline-flex items-center justify-center font-medium tracking-tight transition-all duration-300 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 overflow-hidden cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 dark:focus-visible:ring-white/90 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-focus-ring-offset)]',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-[var(--ui-glass-btn-default-bg)] hover:bg-[var(--ui-glass-btn-default-hover)] backdrop-blur-md border border-[var(--ui-glass-btn-default-border)] text-[var(--ui-glass-btn-default-text)] shadow-sm dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)] hover:border-black/20 dark:hover:border-white/35',
+        primary:
+          'bg-slate-900 text-white dark:bg-white dark:text-slate-950 font-semibold shadow-md hover:bg-slate-800 dark:hover:bg-slate-100 border border-slate-700 dark:border-white shadow-[0_4px_20px_rgba(0,0,0,0.2)] dark:shadow-[0_0_24px_rgba(255,255,255,0.25)]',
+        luminescent:
+          'bg-gradient-to-r from-slate-800/80 to-slate-900/80 text-white dark:from-white/15 dark:to-white/5 dark:text-white backdrop-blur-xl border border-white/20 dark:border-white/30 shadow-[0_0_20px_-4px_rgba(255,255,255,0.15)] hover:border-white/50 hover:shadow-[0_0_30px_-4px_rgba(255,255,255,0.3)]',
+        ghost:
+          'bg-transparent hover:bg-black/5 dark:hover:bg-white/10 backdrop-blur-sm border border-transparent hover:border-black/10 dark:hover:border-white/15 text-[var(--ui-glass-text-secondary)] hover:text-[var(--ui-glass-text-primary)]',
+      },
+      size: {
+        sm: 'h-8 px-3.5 text-xs rounded-xl gap-1.5',
+        md: 'h-10 px-5 text-sm rounded-2xl gap-2',
+        lg: 'h-12 px-7 text-base rounded-2xl gap-2.5',
+        icon: 'h-10 w-10 rounded-2xl',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface GlassButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof glassButtonVariants> {
+  shimmer?: boolean;
+}
+
+export const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(
+  ({ className, variant, size, shimmer = true, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(glassButtonVariants({ variant, size, className }))}
+        {...props}
+      >
+        {shimmer && (
+          <span
+            className="pointer-events-none absolute -inset-full top-0 block -rotate-45 bg-gradient-to-r from-transparent via-white/25 dark:via-white/15 to-transparent transition-all duration-700 motion-safe:group-hover:translate-x-full"
+            aria-hidden="true"
+          />
+        )}
+        <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
+      </button>
+    );
+  }
+);
+
+GlassButton.displayName = 'GlassButton';

package/src/glass/GlassCard.tsx

@@ -1,71 +1,71 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const glassCardVariants = cva(
-  'relative overflow-hidden transition-all duration-300 text-[var(--ui-glass-text-primary)]',
-  {
-    variants: {
-      intensity: {
-        subtle:
-          'bg-[var(--ui-glass-subtle-bg)] backdrop-blur-[var(--ui-glass-subtle-blur)] border border-[var(--ui-glass-subtle-border)]',
-        standard:
-          'bg-[var(--ui-glass-standard-bg)] backdrop-blur-[var(--ui-glass-standard-blur)] border border-[var(--ui-glass-standard-border)] shadow-[var(--ui-glass-standard-shadow)]',
-        frosted:
-          'bg-[var(--ui-glass-frosted-bg)] backdrop-blur-[var(--ui-glass-frosted-blur)] border border-[var(--ui-glass-frosted-border)] shadow-[var(--ui-glass-frosted-shadow)]',
-        acrylic:
-          'bg-[image:var(--ui-glass-acrylic-bg)] backdrop-blur-[var(--ui-glass-acrylic-blur)] border border-[var(--ui-glass-acrylic-border)] shadow-[var(--ui-glass-acrylic-shadow)]',
-      },
-      glow: {
-        none: '',
-        cyan: 'hover:shadow-[0_0_40px_-8px_rgba(56,189,248,0.3)] hover:border-sky-400/40',
-        purple: 'hover:shadow-[0_0_40px_-8px_rgba(192,132,252,0.3)] hover:border-purple-400/40',
-        white: 'hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.25)] hover:border-white/30',
-      },
-      radius: {
-        md: 'rounded-xl',
-        lg: 'rounded-2xl',
-        xl: 'rounded-3xl',
-      },
-      padding: {
-        sm: 'p-4',
-        md: 'p-6',
-        lg: 'p-8',
-      },
-    },
-    defaultVariants: {
-      intensity: 'standard',
-      glow: 'none',
-      radius: 'lg',
-      padding: 'md',
-    },
-  }
-);
-
-export interface GlassCardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof glassCardVariants> {
-  specularLight?: boolean;
-}
-
-export const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
-  ({ className, intensity, glow, radius, padding, specularLight = true, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(glassCardVariants({ intensity, glow, radius, padding, className }))}
-        {...props}
-      >
-        {specularLight && (
-          <div
-            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[image:var(--ui-glass-specular-light)] opacity-80"
-            aria-hidden="true"
-          />
-        )}
-        {children}
-      </div>
-    );
-  }
-);
-
-GlassCard.displayName = 'GlassCard';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const glassCardVariants = cva(
+  'relative overflow-hidden transition-all duration-300 text-[var(--ui-glass-text-primary)]',
+  {
+    variants: {
+      intensity: {
+        subtle:
+          'bg-[var(--ui-glass-subtle-bg)] backdrop-blur-[var(--ui-glass-subtle-blur)] border border-[var(--ui-glass-subtle-border)]',
+        standard:
+          'bg-[var(--ui-glass-standard-bg)] backdrop-blur-[var(--ui-glass-standard-blur)] border border-[var(--ui-glass-standard-border)] shadow-[var(--ui-glass-standard-shadow)]',
+        frosted:
+          'bg-[var(--ui-glass-frosted-bg)] backdrop-blur-[var(--ui-glass-frosted-blur)] border border-[var(--ui-glass-frosted-border)] shadow-[var(--ui-glass-frosted-shadow)]',
+        acrylic:
+          'bg-[image:var(--ui-glass-acrylic-bg)] backdrop-blur-[var(--ui-glass-acrylic-blur)] border border-[var(--ui-glass-acrylic-border)] shadow-[var(--ui-glass-acrylic-shadow)]',
+      },
+      glow: {
+        none: '',
+        cyan: 'hover:shadow-[0_0_40px_-8px_rgba(56,189,248,0.3)] hover:border-sky-400/40',
+        purple: 'hover:shadow-[0_0_40px_-8px_rgba(192,132,252,0.3)] hover:border-purple-400/40',
+        white: 'hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.25)] hover:border-white/30',
+      },
+      radius: {
+        md: 'rounded-xl',
+        lg: 'rounded-2xl',
+        xl: 'rounded-3xl',
+      },
+      padding: {
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      intensity: 'standard',
+      glow: 'none',
+      radius: 'lg',
+      padding: 'md',
+    },
+  }
+);
+
+export interface GlassCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glassCardVariants> {
+  specularLight?: boolean;
+}
+
+export const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
+  ({ className, intensity, glow, radius, padding, specularLight = true, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(glassCardVariants({ intensity, glow, radius, padding, className }))}
+        {...props}
+      >
+        {specularLight && (
+          <div
+            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[image:var(--ui-glass-specular-light)] opacity-80"
+            aria-hidden="true"
+          />
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+GlassCard.displayName = 'GlassCard';

package/src/glass/index.ts

@@ -1,3 +1,3 @@
-export * from './GlassCard';
-export * from './GlassButton';
-export * from './GlassBadge';
+export * from './GlassCard';
+export * from './GlassButton';
+export * from './GlassBadge';

package/src/glass/tokens.css

@@ -1,81 +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;
-}
+: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

@@ -1,26 +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';
+// 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

@@ -1,39 +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';
+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';