@refraction-ui/astro 0.11.0 → 0.11.1

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.11.0",
+  "version": "0.11.1",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {