@thangnqdev/ui 0.1.0

package/dist/glass/index.cjs

@@ -0,0 +1,165 @@
+'use strict';
+
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/glass/GlassCard.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var glassCardVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var GlassCard = react.forwardRef(
+  ({ className, intensity, glow, radius, padding, specularLight = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(glassCardVariants({ intensity, glow, radius, padding, className })),
+        ...props,
+        children: [
+          specularLight && /* @__PURE__ */ jsxRuntime.jsx(
+            "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
+        ]
+      }
+    );
+  }
+);
+GlassCard.displayName = "GlassCard";
+var glassButtonVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var GlassButton = react.forwardRef(
+  ({ className, variant, size, shimmer = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        className: cn(glassButtonVariants({ variant, size, className })),
+        ...props,
+        children: [
+          shimmer && /* @__PURE__ */ jsxRuntime.jsx(
+            "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"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex items-center gap-2", children })
+        ]
+      }
+    );
+  }
+);
+GlassButton.displayName = "GlassButton";
+var glassBadgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center font-sans font-semibold tracking-tight rounded-full backdrop-blur-xl border transition-all select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--ui-bg-secondary)]/80 text-[var(--ui-text-primary)] border-[var(--ui-border-default)] shadow-xs",
+        emerald: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/25 shadow-xs shadow-emerald-500/10",
+        cyan: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/25 shadow-xs shadow-blue-500/10",
+        purple: "bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/25 shadow-xs shadow-purple-500/10",
+        amber: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/25 shadow-xs shadow-amber-500/10",
+        rose: "bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/25 shadow-xs shadow-rose-500/10"
+      },
+      size: {
+        sm: "text-[10px] px-2 py-0.5 gap-1",
+        md: "text-[11px] px-2.5 py-0.5 gap-1.5",
+        lg: "text-xs px-3 py-1 gap-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var GlassBadge = ({
+  className,
+  variant,
+  size,
+  dot = false,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(glassBadgeVariants({ variant, size, className })), ...props, children: [
+    dot && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-pulse shrink-0",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+  ] });
+};
+
+exports.GlassBadge = GlassBadge;
+exports.GlassButton = GlassButton;
+exports.GlassCard = GlassCard;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/glass/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/glass/GlassCard.tsx","../../src/glass/GlassButton.tsx","../../src/glass/GlassBadge.tsx"],"names":["twMerge","clsx","cva","forwardRef","jsxs","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst glassCardVariants = cva(\r\n  'relative overflow-hidden transition-all duration-300 text-[var(--ui-glass-text-primary)]',\r\n  {\r\n    variants: {\r\n      intensity: {\r\n        subtle:\r\n          'bg-[var(--ui-glass-subtle-bg)] backdrop-blur-[var(--ui-glass-subtle-blur)] border border-[var(--ui-glass-subtle-border)]',\r\n        standard:\r\n          '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)]',\r\n        frosted:\r\n          '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)]',\r\n        acrylic:\r\n          '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)]',\r\n      },\r\n      glow: {\r\n        none: '',\r\n        cyan: 'hover:shadow-[0_0_40px_-8px_rgba(56,189,248,0.3)] hover:border-sky-400/40',\r\n        purple: 'hover:shadow-[0_0_40px_-8px_rgba(192,132,252,0.3)] hover:border-purple-400/40',\r\n        white: 'hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.25)] hover:border-white/30',\r\n      },\r\n      radius: {\r\n        md: 'rounded-xl',\r\n        lg: 'rounded-2xl',\r\n        xl: 'rounded-3xl',\r\n      },\r\n      padding: {\r\n        sm: 'p-4',\r\n        md: 'p-6',\r\n        lg: 'p-8',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      intensity: 'standard',\r\n      glow: 'none',\r\n      radius: 'lg',\r\n      padding: 'md',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface GlassCardProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof glassCardVariants> {\r\n  specularLight?: boolean;\r\n}\r\n\r\nexport const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(\r\n  ({ className, intensity, glow, radius, padding, specularLight = true, children, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(glassCardVariants({ intensity, glow, radius, padding, className }))}\r\n        {...props}\r\n      >\r\n        {specularLight && (\r\n          <div\r\n            className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-[image:var(--ui-glass-specular-light)] opacity-80\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        )}\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nGlassCard.displayName = 'GlassCard';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst glassButtonVariants = cva(\r\n  '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)]',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          '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',\r\n        primary:\r\n          '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)]',\r\n        luminescent:\r\n          '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)]',\r\n        ghost:\r\n          '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)]',\r\n      },\r\n      size: {\r\n        sm: 'h-8 px-3.5 text-xs rounded-xl gap-1.5',\r\n        md: 'h-10 px-5 text-sm rounded-2xl gap-2',\r\n        lg: 'h-12 px-7 text-base rounded-2xl gap-2.5',\r\n        icon: 'h-10 w-10 rounded-2xl',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'default',\r\n      size: 'md',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface GlassButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof glassButtonVariants> {\r\n  shimmer?: boolean;\r\n}\r\n\r\nexport const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(\r\n  ({ className, variant, size, shimmer = true, children, ...props }, ref) => {\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        className={cn(glassButtonVariants({ variant, size, className }))}\r\n        {...props}\r\n      >\r\n        {shimmer && (\r\n          <span\r\n            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\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        )}\r\n        <span className=\"relative z-10 inline-flex items-center gap-2\">{children}</span>\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nGlassButton.displayName = 'GlassButton';\r\n","import React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../utils/cn';\n\nconst glassBadgeVariants = cva(\n  'inline-flex items-center font-sans font-semibold tracking-tight rounded-full backdrop-blur-xl border transition-all select-none',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-[var(--ui-bg-secondary)]/80 text-[var(--ui-text-primary)] border-[var(--ui-border-default)] shadow-xs',\n        emerald:\n          'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/25 shadow-xs shadow-emerald-500/10',\n        cyan:\n          'bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/25 shadow-xs shadow-blue-500/10',\n        purple:\n          'bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/25 shadow-xs shadow-purple-500/10',\n        amber:\n          'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/25 shadow-xs shadow-amber-500/10',\n        rose:\n          'bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/25 shadow-xs shadow-rose-500/10',\n      },\n      size: {\n        sm: 'text-[10px] px-2 py-0.5 gap-1',\n        md: 'text-[11px] px-2.5 py-0.5 gap-1.5',\n        lg: 'text-xs px-3 py-1 gap-1.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n);\n\nexport interface GlassBadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof glassBadgeVariants> {\n  dot?: boolean;\n}\n\nexport const GlassBadge: React.FC<GlassBadgeProps> = ({\n  className,\n  variant,\n  size,\n  dot = false,\n  children,\n  ...props\n}) => {\n  return (\n    <span className={cn(glassBadgeVariants({ variant, size, className }))} {...props}>\n      {dot && (\n        <span\n          className=\"h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-pulse shrink-0\"\n          aria-hidden=\"true\"\n        />\n      )}\n      <span>{children}</span>\n    </span>\n  );\n};\n"]}

package/dist/glass/index.d.cts

@@ -0,0 +1,4 @@
+export { G as GlassBadge, a as GlassBadgeProps, b as GlassButton, c as GlassButtonProps, d as GlassCard, e as GlassCardProps } from '../index-COQ7uwt9.cjs';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/glass/index.d.ts

@@ -0,0 +1,4 @@
+export { G as GlassBadge, a as GlassBadgeProps, b as GlassButton, c as GlassButtonProps, d as GlassCard, e as GlassCardProps } from '../index-COQ7uwt9.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/glass/index.js

@@ -0,0 +1,4 @@
+export { GlassBadge, GlassButton, GlassCard } from '../chunk-A7P3O5Z5.js';
+import '../chunk-4S6L5V7X.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/glass/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/glass/styles.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/dist/index-BTvkbCIj.d.cts

@@ -0,0 +1,146 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const containerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "fluid" | null | undefined;
+    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    centered?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    as?: React__default.ElementType;
+}
+declare const Container: React__default.ForwardRefExoticComponent<ContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const sectionVariants: (props?: ({
+    spacing?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    variant?: "default" | "subtle" | "surface" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends React__default.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    as?: React__default.ElementType;
+}
+declare const Section: React__default.ForwardRefExoticComponent<SectionProps & React__default.RefAttributes<HTMLElement>>;
+
+declare const stackVariants: (props?: ({
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    align?: "center" | "baseline" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StackProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+    as?: React__default.ElementType;
+}
+declare const Stack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const HStack: React__default.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const VStack: React__default.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const gridVariants: (props?: ({
+    cols?: 2 | 1 | 4 | 3 | 5 | 6 | 12 | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    flow?: "col" | "row" | "dense" | "row-dense" | "col-dense" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    as?: React__default.ElementType;
+}
+declare const Grid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const gridItemVariants: (props?: ({
+    colSpan?: 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | "full" | 7 | 9 | 11 | null | undefined;
+    rowSpan?: 2 | 1 | 4 | 3 | 5 | 6 | "full" | null | undefined;
+    colStart?: 2 | 1 | "auto" | 4 | 3 | 5 | 6 | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridItemProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
+    as?: React__default.ElementType;
+}
+declare const GridItem: React__default.ForwardRefExoticComponent<GridItemProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const flexVariants: (props?: ({
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    align?: "center" | "baseline" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    inline?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    as?: React__default.ElementType;
+}
+declare const Flex: React__default.ForwardRefExoticComponent<FlexProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "solid" | "dashed" | "dotted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
+    label?: React__default.ReactNode;
+}
+declare const Divider: React__default.ForwardRefExoticComponent<DividerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface SpacerProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    x?: number | string;
+    y?: number | string;
+}
+declare const Spacer: React__default.ForwardRefExoticComponent<SpacerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface AspectRatioProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    ratio?: number | `${number}/${number}`;
+    children: React__default.ReactNode;
+}
+declare const AspectRatio: React__default.ForwardRefExoticComponent<AspectRatioProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface PageLayoutProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    header?: React__default.ReactNode;
+    sidebar?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    sidebarWidth?: string;
+    sidebarCollapsed?: boolean;
+}
+declare const PageLayout: React__default.ForwardRefExoticComponent<PageLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const PageHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLElement> & React__default.RefAttributes<HTMLElement>>;
+declare const PageSidebar: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLElement> & React__default.RefAttributes<HTMLElement>>;
+
+interface ScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    maxHeight?: string | number;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    hideScrollbar?: boolean;
+}
+declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const index_AspectRatio: typeof AspectRatio;
+type index_AspectRatioProps = AspectRatioProps;
+declare const index_Container: typeof Container;
+type index_ContainerProps = ContainerProps;
+declare const index_Divider: typeof Divider;
+type index_DividerProps = DividerProps;
+declare const index_Flex: typeof Flex;
+type index_FlexProps = FlexProps;
+declare const index_Grid: typeof Grid;
+declare const index_GridItem: typeof GridItem;
+type index_GridItemProps = GridItemProps;
+type index_GridProps = GridProps;
+declare const index_HStack: typeof HStack;
+declare const index_PageHeader: typeof PageHeader;
+declare const index_PageLayout: typeof PageLayout;
+type index_PageLayoutProps = PageLayoutProps;
+declare const index_PageSidebar: typeof PageSidebar;
+declare const index_ScrollArea: typeof ScrollArea;
+type index_ScrollAreaProps = ScrollAreaProps;
+declare const index_Section: typeof Section;
+type index_SectionProps = SectionProps;
+declare const index_Spacer: typeof Spacer;
+type index_SpacerProps = SpacerProps;
+declare const index_Stack: typeof Stack;
+type index_StackProps = StackProps;
+declare const index_VStack: typeof VStack;
+declare const index_containerVariants: typeof containerVariants;
+declare const index_dividerVariants: typeof dividerVariants;
+declare const index_flexVariants: typeof flexVariants;
+declare const index_gridItemVariants: typeof gridItemVariants;
+declare const index_gridVariants: typeof gridVariants;
+declare const index_sectionVariants: typeof sectionVariants;
+declare const index_stackVariants: typeof stackVariants;
+declare namespace index {
+  export { index_AspectRatio as AspectRatio, type index_AspectRatioProps as AspectRatioProps, index_Container as Container, type index_ContainerProps as ContainerProps, index_Divider as Divider, type index_DividerProps as DividerProps, index_Flex as Flex, type index_FlexProps as FlexProps, index_Grid as Grid, index_GridItem as GridItem, type index_GridItemProps as GridItemProps, type index_GridProps as GridProps, index_HStack as HStack, index_PageHeader as PageHeader, index_PageLayout as PageLayout, type index_PageLayoutProps as PageLayoutProps, index_PageSidebar as PageSidebar, index_ScrollArea as ScrollArea, type index_ScrollAreaProps as ScrollAreaProps, index_Section as Section, type index_SectionProps as SectionProps, index_Spacer as Spacer, type index_SpacerProps as SpacerProps, index_Stack as Stack, type index_StackProps as StackProps, index_VStack as VStack, index_containerVariants as containerVariants, index_dividerVariants as dividerVariants, index_flexVariants as flexVariants, index_gridItemVariants as gridItemVariants, index_gridVariants as gridVariants, index_sectionVariants as sectionVariants, index_stackVariants as stackVariants };
+}
+
+export { AspectRatio as A, Container as C, Divider as D, Flex as F, Grid as G, HStack as H, PageHeader as P, ScrollArea as S, VStack as V, type AspectRatioProps as a, type ContainerProps as b, type DividerProps as c, type FlexProps as d, GridItem as e, type GridItemProps as f, type GridProps as g, PageLayout as h, index as i, type PageLayoutProps as j, PageSidebar as k, type ScrollAreaProps as l, Section as m, type SectionProps as n, Spacer as o, type SpacerProps as p, Stack as q, type StackProps as r, containerVariants as s, dividerVariants as t, flexVariants as u, gridItemVariants as v, gridVariants as w, sectionVariants as x, stackVariants as y };

package/dist/index-BTvkbCIj.d.ts

@@ -0,0 +1,146 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const containerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "fluid" | null | undefined;
+    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    centered?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    as?: React__default.ElementType;
+}
+declare const Container: React__default.ForwardRefExoticComponent<ContainerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const sectionVariants: (props?: ({
+    spacing?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    variant?: "default" | "subtle" | "surface" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends React__default.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    as?: React__default.ElementType;
+}
+declare const Section: React__default.ForwardRefExoticComponent<SectionProps & React__default.RefAttributes<HTMLElement>>;
+
+declare const stackVariants: (props?: ({
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    align?: "center" | "baseline" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StackProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+    as?: React__default.ElementType;
+}
+declare const Stack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const HStack: React__default.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const VStack: React__default.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const gridVariants: (props?: ({
+    cols?: 2 | 1 | 4 | 3 | 5 | 6 | 12 | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    flow?: "col" | "row" | "dense" | "row-dense" | "col-dense" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    as?: React__default.ElementType;
+}
+declare const Grid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const gridItemVariants: (props?: ({
+    colSpan?: 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | "full" | 7 | 9 | 11 | null | undefined;
+    rowSpan?: 2 | 1 | 4 | 3 | 5 | 6 | "full" | null | undefined;
+    colStart?: 2 | 1 | "auto" | 4 | 3 | 5 | 6 | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridItemProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
+    as?: React__default.ElementType;
+}
+declare const GridItem: React__default.ForwardRefExoticComponent<GridItemProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const flexVariants: (props?: ({
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    align?: "center" | "baseline" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+    gap?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    inline?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    as?: React__default.ElementType;
+}
+declare const Flex: React__default.ForwardRefExoticComponent<FlexProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "solid" | "dashed" | "dotted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
+    label?: React__default.ReactNode;
+}
+declare const Divider: React__default.ForwardRefExoticComponent<DividerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface SpacerProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    x?: number | string;
+    y?: number | string;
+}
+declare const Spacer: React__default.ForwardRefExoticComponent<SpacerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface AspectRatioProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    ratio?: number | `${number}/${number}`;
+    children: React__default.ReactNode;
+}
+declare const AspectRatio: React__default.ForwardRefExoticComponent<AspectRatioProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface PageLayoutProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    header?: React__default.ReactNode;
+    sidebar?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    sidebarWidth?: string;
+    sidebarCollapsed?: boolean;
+}
+declare const PageLayout: React__default.ForwardRefExoticComponent<PageLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const PageHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLElement> & React__default.RefAttributes<HTMLElement>>;
+declare const PageSidebar: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLElement> & React__default.RefAttributes<HTMLElement>>;
+
+interface ScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    maxHeight?: string | number;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    hideScrollbar?: boolean;
+}
+declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const index_AspectRatio: typeof AspectRatio;
+type index_AspectRatioProps = AspectRatioProps;
+declare const index_Container: typeof Container;
+type index_ContainerProps = ContainerProps;
+declare const index_Divider: typeof Divider;
+type index_DividerProps = DividerProps;
+declare const index_Flex: typeof Flex;
+type index_FlexProps = FlexProps;
+declare const index_Grid: typeof Grid;
+declare const index_GridItem: typeof GridItem;
+type index_GridItemProps = GridItemProps;
+type index_GridProps = GridProps;
+declare const index_HStack: typeof HStack;
+declare const index_PageHeader: typeof PageHeader;
+declare const index_PageLayout: typeof PageLayout;
+type index_PageLayoutProps = PageLayoutProps;
+declare const index_PageSidebar: typeof PageSidebar;
+declare const index_ScrollArea: typeof ScrollArea;
+type index_ScrollAreaProps = ScrollAreaProps;
+declare const index_Section: typeof Section;
+type index_SectionProps = SectionProps;
+declare const index_Spacer: typeof Spacer;
+type index_SpacerProps = SpacerProps;
+declare const index_Stack: typeof Stack;
+type index_StackProps = StackProps;
+declare const index_VStack: typeof VStack;
+declare const index_containerVariants: typeof containerVariants;
+declare const index_dividerVariants: typeof dividerVariants;
+declare const index_flexVariants: typeof flexVariants;
+declare const index_gridItemVariants: typeof gridItemVariants;
+declare const index_gridVariants: typeof gridVariants;
+declare const index_sectionVariants: typeof sectionVariants;
+declare const index_stackVariants: typeof stackVariants;
+declare namespace index {
+  export { index_AspectRatio as AspectRatio, type index_AspectRatioProps as AspectRatioProps, index_Container as Container, type index_ContainerProps as ContainerProps, index_Divider as Divider, type index_DividerProps as DividerProps, index_Flex as Flex, type index_FlexProps as FlexProps, index_Grid as Grid, index_GridItem as GridItem, type index_GridItemProps as GridItemProps, type index_GridProps as GridProps, index_HStack as HStack, index_PageHeader as PageHeader, index_PageLayout as PageLayout, type index_PageLayoutProps as PageLayoutProps, index_PageSidebar as PageSidebar, index_ScrollArea as ScrollArea, type index_ScrollAreaProps as ScrollAreaProps, index_Section as Section, type index_SectionProps as SectionProps, index_Spacer as Spacer, type index_SpacerProps as SpacerProps, index_Stack as Stack, type index_StackProps as StackProps, index_VStack as VStack, index_containerVariants as containerVariants, index_dividerVariants as dividerVariants, index_flexVariants as flexVariants, index_gridItemVariants as gridItemVariants, index_gridVariants as gridVariants, index_sectionVariants as sectionVariants, index_stackVariants as stackVariants };
+}
+
+export { AspectRatio as A, Container as C, Divider as D, Flex as F, Grid as G, HStack as H, PageHeader as P, ScrollArea as S, VStack as V, type AspectRatioProps as a, type ContainerProps as b, type DividerProps as c, type FlexProps as d, GridItem as e, type GridItemProps as f, type GridProps as g, PageLayout as h, index as i, type PageLayoutProps as j, PageSidebar as k, type ScrollAreaProps as l, Section as m, type SectionProps as n, Spacer as o, type SpacerProps as p, Stack as q, type StackProps as r, containerVariants as s, dividerVariants as t, flexVariants as u, gridItemVariants as v, gridVariants as w, sectionVariants as x, stackVariants as y };