@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

package/README.md

@@ -34,9 +34,11 @@ Useful scripts:
 pnpm run test          # Vitest browser story tests
 pnpm run typecheck
 pnpm run lint
-pnpm run build:lib     # generate exports + build dist
+pnpm run build:lib     # generate exports + build JS/types + compile CSS
 ```
 
+Published CSS under `dist/` is **already compiled** (Tailwind `@apply` resolved). Theme and token values remain CSS custom properties so apps can swap themes at runtime. The package does not minify CSS.
+
 ## Using radiant-ui
 
 ```ts
@@ -55,7 +57,7 @@ import '@ecopages/radiant-ui/styles.css';
 import '@ecopages/radiant-ui';
 ```
 
-Convenience bundle (default theme + Tailwind + button primitive):
+Convenience bundle (default theme + core primitives):
 
 ```ts
 import '@ecopages/radiant-ui/radiant-ui.css';

package/dist/components/ui/alert/alert.css

@@ -1,27 +1,60 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-alert {
-	@apply block;
+  display: block;
 }
-
 @layer components {
-	.rui-alert {
-		@apply rounded-container border px-control-x py-control-y text-sm;
-	}
-
-	.rui-alert--info {
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-alert--success {
-		@apply border-success/40 bg-success/10 text-success;
-	}
-
-	.rui-alert--warning {
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-alert--error {
-		@apply border-error/40 bg-error/10 text-error;
-	}
+  .rui-alert {
+    border-radius: var(--radius-container, var(--radius-container));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    padding-inline: var(--spacing-control-x, var(--space-control-x));
+    padding-block: var(--spacing-control-y, var(--space-control-y));
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
+  .rui-alert--info {
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-alert--success {
+    border-color: var(--color-success, var(--success));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-success, var(--success)) 40%, transparent);
+    }
+    background-color: var(--color-success, var(--success));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-success, var(--success)) 10%, transparent);
+    }
+    color: var(--color-success, var(--success));
+  }
+  .rui-alert--warning {
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-alert--error {
+    border-color: var(--color-error, var(--error));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-error, var(--error)) 40%, transparent);
+    }
+    background-color: var(--color-error, var(--error));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-error, var(--error)) 10%, transparent);
+    }
+    color: var(--color-error, var(--error));
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
 }

package/dist/components/ui/breadcrumb/breadcrumb.css

@@ -1,41 +1,90 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-breadcrumb {
-	@apply block;
-	--rui-breadcrumb-separator: '/';
+  display: block;
+  --rui-breadcrumb-separator: '/';
 }
-
 @layer components {
-	.rui-breadcrumb__list {
-		@apply m-0 flex list-none flex-wrap items-center gap-inline p-0 text-sm;
-	}
-
-	.rui-breadcrumb__item {
-		@apply inline-flex items-center gap-inline;
-	}
-
-	.rui-breadcrumb__link {
-		@apply inline-flex items-center gap-inline text-primary underline-offset-2 hover:underline;
-	}
-
-	.rui-breadcrumb__page,
+  .rui-breadcrumb__list {
+    margin: 0px;
+    display: flex;
+    list-style-type: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-inline, var(--space-inline));
+    padding: 0px;
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
+  .rui-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-inline, var(--space-inline));
+  }
+  .rui-breadcrumb__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-inline, var(--space-inline));
+    color: var(--color-primary, var(--primary));
+    text-underline-offset: 2px;
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .rui-breadcrumb__page,
 	.rui-breadcrumb [aria-current='page'] {
-		@apply font-medium text-on-background;
-	}
-
-	.rui-breadcrumb__separator {
-		@apply inline-flex items-center text-on-surface/60;
-	}
-
-	.rui-breadcrumb__separator:empty::before {
-		content: var(--rui-breadcrumb-separator);
-	}
-
-	.rui-breadcrumb__ellipsis {
-		@apply inline-flex items-center tracking-widest text-on-surface/60;
-	}
-
-	.rui-breadcrumb__ellipsis-label {
-		@apply sr-only;
-	}
+    --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
+    font-weight: var(--font-weight-medium, var(--weight-medium));
+    color: var(--color-on-background, var(--on-background));
+  }
+  .rui-breadcrumb__separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-on-surface, var(--on-surface));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-on-surface, var(--on-surface)) 60%, transparent);
+    }
+  }
+  .rui-breadcrumb__separator:empty::before {
+    content: var(--rui-breadcrumb-separator);
+  }
+  .rui-breadcrumb__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    --tw-tracking: var(--tracking-widest, 0.1em);
+    letter-spacing: var(--tracking-widest, 0.1em);
+    color: var(--color-on-surface, var(--on-surface));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-on-surface, var(--on-surface)) 60%, transparent);
+    }
+  }
+  .rui-breadcrumb__ellipsis-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+    }
+  }
 }