@cryptlex/web-components 6.6.6-alpha19 → 6.6.6-alpha21

package/lib/index.css

@@ -1,7 +1,8 @@
 @import 'tailwindcss';
+@plugin 'tailwindcss-react-aria-components';
 @import './tokens.css';
 /** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
-@theme inline {
+@theme {
     /* Radius */
     --radius-*: initial;
 
@@ -70,16 +71,10 @@
     --color-success-10: var(--success-10);
 
     --color-background: var(--color-neutral-3);
+    --color-foreground: var(--color-neutral-8);
     --color-elevation-1: var(--color-neutral-2);
     --color-elevation-2: var(--color-neutral-1);
 
-    --color-foreground: var(--color-neutral-8);
-    --color-card: var(--color-elevation-1);
-    --color-card-foreground: var(--color-foreground);
-    /* Assuming popovers only show up over cards ??? */
-    --color-popover: var(--color-elevation-2);
-    --color-popover-foreground: var(--color-foreground);
-
     --color-primary: var(--color-primary-7);
     --color-primary-foreground: var(--color-primary-2);
     --color-secondary: var(--color-secondary-7);
@@ -103,9 +98,6 @@
     --color-chart-4: var(--color-secondary-4);
     --color-chart-5: var(--color-secondary-2);
 
-    --color-sidebar-background: var(--color-elevation-1);
-    --color-sidebar-foreground: var(--color-foreground);
-
     --spacing-input: --spacing(8);
     --spacing-icon: --spacing(4);
     --spacing-table: --spacing(100);
@@ -130,47 +122,51 @@
     @apply text-primary/70 focus:text-primary hover:text-primary;
 }
 
+@utility bg-glass-1 {
+    @apply bg-elevation-1/20 backdrop-blur-xl;
+}
+
 /* Fluid grid with minimum width */
 @utility grid-fluid {
     @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
 }
 
 @utility focus-ring {
-    @apply data-[focus-visible]:outline-none focus-visible:outline-none data-[focus-visible]:ring-1 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 focus-visible:outline-hidden focus-visible:ring-offset-2 focus-visible:ring-1 focus-visible:ring-ring;
+    @apply focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden;
 }
 
 @utility disabled-muted {
-    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
+    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 disabled:pointer-events-none;
 }
 @utility input {
-    @apply border border-input bg-popover px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
+    @apply border border-input bg-elevation-2 px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
 }
 
 /* A base set of classes for elements that can be clicked */
 @utility btn {
-    @apply inline-flex body-sm gap-1 data-[disabled]:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
+    @apply inline-flex body-sm gap-1 disabled:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
 }
 
 @utility btn-link {
     @apply btn-ghost underline underline-offset-2;
 }
 @utility btn-primary {
-    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 data-[hovered]:bg-primary/20 focus:bg-primary/20 data-[focused]:bg-primary/20;
+    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 focus:bg-primary/20;
 }
 @utility btn-destructive {
-    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 data-[hovered]:bg-destructive/20 focus:bg-destructive/20 data-[focused]:bg-destructive/20;
+    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 focus:bg-destructive/20;
 }
 @utility btn-neutral {
-    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 data-[hovered]:bg-accent/20 focus:bg-accent/20 data-[focused]:bg-accent/20;
+    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 focus:bg-accent/20;
 }
 @utility btn-secondary {
-    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 data-[hovered]:bg-secondary/20 focus:bg-secondary/20 data-[focused]:bg-secondary/20;
+    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 focus:bg-secondary/20;
 }
 @utility btn-ghost {
-    @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
+    @apply bg-transparent focus:bg-accent/20 hover:bg-accent/20;
 }
 @utility btn-tab {
-    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start data-[selected=true]:bg-primary/20 data-[selected=true]:font-medium data-[selected=true]:text-primary;
+    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start selected:bg-primary/20 selected:font-medium selected:text-primary;
 }
 /* Dimensions for a standard input */
 @utility input-dim {
@@ -214,7 +210,7 @@
     }
 
     body {
-        @apply bg-background text-foreground;
+        @apply bg-gradient-to-t from-background to-neutral-1 text-foreground;
     }
 
     .tw-prose a {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha19",
+  "version": "6.6.6-alpha21",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -93,6 +93,7 @@
     "rollup-preserve-directives": "1.1.3",
     "sass": "1.89.2",
     "storybook": "9.1.4",
+    "tailwindcss-react-aria-components": "2.0.1",
     "typescript": "5.9.2",
     "vite": "7.1.4",
     "vite-plugin-dts": "4.5.4",