@refraction-ui/astro 0.10.0 → 0.11.1

package/dist/astro-cookie-consent/CookieConsent.astro

@@ -37,40 +37,45 @@ const {
   aria-label="Cookie consent"
   class={cn('fixed inset-x-0 z-50 p-4', position === 'bottom' ? 'bottom-0' : 'top-0', className)}
 >
-  <div class="mx-auto max-w-3xl rounded-xl border border-border bg-background p-4 shadow-lg">
-    <h2 class="text-base font-semibold">{title}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{description}</p>
-    {policyUrl && (
-      <a href={policyUrl} target="_blank" rel="noreferrer" class="mt-1 inline-block text-sm text-muted-foreground underline hover:text-foreground">{policyLabel}</a>
-    )}
-
-    <div data-rfr-cc-prompt class="mt-3 flex flex-wrap items-center gap-2">
-      <button type="button" data-rfr-cc-accept class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground">Accept all</button>
-      <button type="button" data-rfr-cc-reject class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent">Reject all</button>
-      <button type="button" data-rfr-cc-manage class="ml-auto rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent">Manage preferences</button>
+  <div class="mx-auto max-w-2xl overflow-hidden rounded-2xl border border-border bg-background shadow-lg">
+    <div data-rfr-cc-prompt class="flex flex-col gap-4 p-5 sm:flex-row sm:items-center">
+      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-xl" aria-hidden="true">🍪</div>
+      <div class="min-w-0 flex-1">
+        <p class="text-sm font-semibold">{title}</p>
+        <p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">
+          {description}
+          {policyUrl && (
+            <a href={policyUrl} target="_blank" rel="noreferrer" class="font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"> {policyLabel}</a>
+          )}
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2 sm:shrink-0">
+        <button type="button" data-rfr-cc-manage class="text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">Customize</button>
+        <button type="button" data-rfr-cc-reject class="inline-flex items-center rounded-lg border border-border px-3.5 py-2 text-sm font-medium hover:bg-accent">Reject all</button>
+        <button type="button" data-rfr-cc-accept class="inline-flex items-center rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Accept all</button>
+      </div>
     </div>
 
-    <div data-rfr-cc-settings hidden class="mt-3 space-y-2">
+    <div data-rfr-cc-settings hidden class="space-y-2 p-5">
+      <p class="text-sm font-semibold">Cookie preferences</p>
       {categories.map((cat) => (
-        <label class="flex items-start justify-between gap-3 rounded-md border border-border p-3">
+        <label class="flex items-center justify-between gap-4 rounded-xl border border-border p-3">
           <span class="min-w-0">
-            <span class="block text-sm font-medium">{cat.label}{cat.required ? ' (required)' : ''}</span>
-            {cat.description && <span class="block text-xs text-muted-foreground">{cat.description}</span>}
+            <span class="block text-sm font-medium">{cat.label}</span>
+            {cat.description && <span class="mt-0.5 block text-xs text-muted-foreground">{cat.description}</span>}
           </span>
-          <input
-            type="checkbox"
-            data-rfr-cc-cat={cat.id}
-            checked={cat.required}
-            disabled={cat.required}
-            aria-label={cat.label}
-            class="mt-0.5 h-4 w-4"
-          />
+          {cat.required ? (
+            <span class="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">Always on</span>
+          ) : (
+            <input type="checkbox" data-rfr-cc-cat={cat.id} aria-label={cat.label} class="h-5 w-5 accent-[hsl(var(--primary))]" />
+          )}
+          {cat.required && <input type="checkbox" data-rfr-cc-cat={cat.id} checked disabled hidden />}
         </label>
       ))}
       <div class="flex flex-wrap items-center gap-2 pt-1">
-        <button type="button" data-rfr-cc-save class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground">Save preferences</button>
-        <button type="button" data-rfr-cc-accept class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent">Accept all</button>
-        <button type="button" data-rfr-cc-back class="ml-auto text-sm text-muted-foreground underline hover:text-foreground">Back</button>
+        <button type="button" data-rfr-cc-back class="text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">← Back</button>
+        <button type="button" data-rfr-cc-accept class="inline-flex items-center rounded-lg border border-border px-3.5 py-2 text-sm font-medium hover:bg-accent sm:ml-auto">Accept all</button>
+        <button type="button" data-rfr-cc-save class="inline-flex items-center rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Save preferences</button>
       </div>
     </div>
   </div>

package/dist/astro-theme/ThemeScript.astro

@@ -1,13 +1,26 @@
 ---
-import { getThemeScript } from '../theme/index.ts'
+import { getThemeScript, type ThemeMode } from '../theme/index.ts'
 
 interface Props {
   storageKey?: string
   attribute?: 'class' | 'data-theme'
+  /**
+   * Theme to apply when nothing is stored. Match this to the `<ThemeProvider>`
+   * client component's `defaultMode` so first-paint and hydration agree. Issue #317.
+   */
+  defaultMode?: ThemeMode
+  /** When `false`, never fall through to `prefers-color-scheme`. Default `true`. */
+  enableSystem?: boolean
 }
 
-const { storageKey = 'rfr-theme', attribute = 'class' } = Astro.props
-const scriptContent = getThemeScript(storageKey, attribute)
+const {
+  storageKey = 'rfr-theme',
+  attribute = 'class',
+  defaultMode = 'system',
+  enableSystem = true,
+} = Astro.props
+
+const scriptContent = getThemeScript({ storageKey, attribute, defaultMode, enableSystem })
 ---
 
 <script set:html={scriptContent} />

package/dist/button/button.styles.ts

@@ -17,6 +17,10 @@ export const buttonVariants = cva({
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+      // Alias for `default` — see resolveButtonVariant + issue #201. Same classes
+      // so styling stays identical even if a consumer reaches into `buttonVariants`
+      // directly without going through resolveButtonVariant.
+      primary: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
       destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
       outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
       secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',

package/dist/button/button.ts

@@ -1,7 +1,30 @@
 import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
 import { Keys } from '../shared/index.ts'
 
-export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+/**
+ * `primary` is an alias of `default` — included so the universal React-ecosystem
+ * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
+ * button instead of falling through to the unstyled base. See issue #201.
+ */
+export type ButtonVariant =
+  | 'default'
+  | 'primary'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link'
+
+/** Variants that map to the same visual style as `default`. */
+export const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>> = {
+  primary: 'default',
+}
+
+/** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
+export function resolveButtonVariant(variant: ButtonVariant | undefined): ButtonVariant | undefined {
+  if (!variant) return variant
+  return BUTTON_VARIANT_ALIASES[variant] ?? variant
+}
 export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
 
 export interface ButtonProps {

package/dist/button/index.ts

@@ -1,6 +1,8 @@
 export {
   createButton,
   getButtonType,
+  resolveButtonVariant,
+  BUTTON_VARIANT_ALIASES,
   type ButtonProps,
   type ButtonAPI,
   type ButtonVariant,

package/dist/theme/theme-script.ts

@@ -4,15 +4,79 @@
  * Works with any framework (React, Astro, plain HTML).
  */
 
+import type { ThemeMode } from './theme-machine.js'
+
+export interface ThemeScriptOptions {
+  /** localStorage key the corresponding ThemeProvider reads. */
+  storageKey?: string
+  /** Attribute strategy: 'class' toggles `light`/`dark` classes; otherwise an HTML attribute. */
+  attribute?: 'class' | 'data-theme'
+  /**
+   * Theme to apply when nothing is stored AND `enableSystem` is false
+   * (or `defaultMode` is explicitly 'light'/'dark'). Match this to your
+   * ThemeProvider's `defaultMode` so the pre-paint script and provider agree.
+   * Defaults to `'system'` — current behavior, OS preference wins.
+   *
+   * Issue #317.
+   */
+  defaultMode?: ThemeMode
+  /**
+   * When `true` (default) and `defaultMode === 'system'`, the script falls
+   * through to `prefers-color-scheme`. When `false`, the script applies
+   * `defaultMode` directly and never reads the OS preference.
+   */
+  enableSystem?: boolean
+}
+
+/**
+ * Build the pre-paint inline script. Mirrors the resolution order used by
+ * the React/Astro `ThemeProvider`:
+ *
+ *   1. stored value (light|dark|system)
+ *   2. if no stored value: `defaultMode` (light|dark applied as-is)
+ *   3. if stored or default is 'system' AND `enableSystem`: matchMedia
+ *   4. else: 'light'
+ *
+ * Back-compat: with no options the script behaves exactly as before —
+ * stored value, then matchMedia, then 'light'.
+ */
 export function getThemeScript(
-  storageKey = 'rfr-theme',
+  storageKeyOrOptions: string | ThemeScriptOptions = 'rfr-theme',
   attribute: 'class' | 'data-theme' = 'class',
 ): string {
-  // This string is injected as innerHTML of a <script> tag.
-  // It runs before any CSS/JS loads, preventing flash of wrong theme.
-  return `(function(){try{var m=localStorage.getItem('${storageKey}');var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';var d=document.documentElement;${
-    attribute === 'class'
+  const opts: Required<ThemeScriptOptions> =
+    typeof storageKeyOrOptions === 'string'
+      ? {
+          storageKey: storageKeyOrOptions,
+          attribute,
+          defaultMode: 'system',
+          enableSystem: true,
+        }
+      : {
+          storageKey: storageKeyOrOptions.storageKey ?? 'rfr-theme',
+          attribute: storageKeyOrOptions.attribute ?? 'class',
+          defaultMode: storageKeyOrOptions.defaultMode ?? 'system',
+          enableSystem: storageKeyOrOptions.enableSystem ?? true,
+        }
+
+  // `noSystemFallback` short-circuits matchMedia entirely when the consumer
+  // wants brand consistency over OS preference (defaultMode='light'/'dark'
+  // OR enableSystem=false).
+  const noSystemFallback =
+    opts.defaultMode === 'light' || opts.defaultMode === 'dark' || !opts.enableSystem
+  const safeDefault: 'light' | 'dark' =
+    opts.defaultMode === 'dark' ? 'dark' : 'light'
+
+  const resolveExpr = noSystemFallback
+    ? // Stored wins → else hard default. No matchMedia call at all.
+      `var t=m==='dark'?'dark':(m==='light'?'light':'${safeDefault}');`
+    : // Original behaviour: stored → else matchMedia → else light.
+      `var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';`
+
+  const applyExpr =
+    opts.attribute === 'class'
       ? "d.classList.remove('light','dark');d.classList.add(t);"
-      : `d.setAttribute('${attribute}',t);`
-  }d.style.colorScheme=t;}catch(e){}})()`
+      : `d.setAttribute('${opts.attribute}',t);`
+
+  return `(function(){try{var m=localStorage.getItem('${opts.storageKey}');${resolveExpr}var d=document.documentElement;${applyExpr}d.style.colorScheme=t;}catch(e){}})()`
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {