@refraction-ui/astro 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/astro-empty-state/EmptyState.astro +57 -0
  2. package/dist/astro-empty-state/index.ts +1 -0
  3. package/dist/astro-input/Input.astro +5 -1
  4. package/dist/astro-password-input/PasswordInput.astro +102 -0
  5. package/dist/astro-password-input/index.ts +1 -0
  6. package/dist/astro-segmented-control/SegmentedControl.astro +106 -0
  7. package/dist/astro-segmented-control/SegmentedControlItem.astro +32 -0
  8. package/dist/astro-segmented-control/index.ts +1 -0
  9. package/dist/astro-separator/Separator.astro +49 -0
  10. package/dist/astro-separator/index.ts +1 -0
  11. package/dist/astro-social-auth-button/SocialAuthButton.astro +110 -0
  12. package/dist/astro-social-auth-button/SocialAuthRow.astro +13 -0
  13. package/dist/astro-social-auth-button/index.ts +1 -0
  14. package/dist/astro-theme/ThemeScript.astro +16 -3
  15. package/dist/button/button.styles.ts +4 -0
  16. package/dist/button/button.ts +24 -1
  17. package/dist/button/index.ts +2 -0
  18. package/dist/empty-state/empty-state.styles.ts +42 -0
  19. package/dist/empty-state/empty-state.ts +27 -0
  20. package/dist/empty-state/index.ts +14 -0
  21. package/dist/index.ts +22 -17
  22. package/dist/input/index.ts +2 -0
  23. package/dist/input/input.styles.ts +4 -0
  24. package/dist/input/input.ts +39 -3
  25. package/dist/password-input/index.ts +9 -0
  26. package/dist/password-input/password-input.styles.ts +10 -0
  27. package/dist/password-input/password-input.ts +45 -0
  28. package/dist/segmented-control/index.ts +13 -0
  29. package/dist/segmented-control/segmented-control.styles.ts +42 -0
  30. package/dist/segmented-control/segmented-control.ts +80 -0
  31. package/dist/separator/index.ts +12 -0
  32. package/dist/separator/separator.styles.ts +34 -0
  33. package/dist/separator/separator.ts +53 -0
  34. package/dist/social-auth-button/index.ts +14 -0
  35. package/dist/social-auth-button/social-auth-button.styles.ts +16 -0
  36. package/dist/social-auth-button/social-auth-button.ts +51 -0
  37. package/dist/theme/theme-script.ts +71 -7
  38. package/package.json +24 -19
package/dist/theme/theme-script.ts CHANGED
@@ -4,15 +4,79 @@
4
4
  * Works with any framework (React, Astro, plain HTML).
5
5
  */
6
6
 
7
+ import type { ThemeMode } from './theme-machine.js'
8
+
9
+ export interface ThemeScriptOptions {
10
+ /** localStorage key the corresponding ThemeProvider reads. */
11
+ storageKey?: string
12
+ /** Attribute strategy: 'class' toggles `light`/`dark` classes; otherwise an HTML attribute. */
13
+ attribute?: 'class' | 'data-theme'
14
+ /**
15
+ * Theme to apply when nothing is stored AND `enableSystem` is false
16
+ * (or `defaultMode` is explicitly 'light'/'dark'). Match this to your
17
+ * ThemeProvider's `defaultMode` so the pre-paint script and provider agree.
18
+ * Defaults to `'system'` — current behavior, OS preference wins.
19
+ *
20
+ * Issue #317.
21
+ */
22
+ defaultMode?: ThemeMode
23
+ /**
24
+ * When `true` (default) and `defaultMode === 'system'`, the script falls
25
+ * through to `prefers-color-scheme`. When `false`, the script applies
26
+ * `defaultMode` directly and never reads the OS preference.
27
+ */
28
+ enableSystem?: boolean
29
+ }
30
+
31
+ /**
32
+ * Build the pre-paint inline script. Mirrors the resolution order used by
33
+ * the React/Astro `ThemeProvider`:
34
+ *
35
+ * 1. stored value (light|dark|system)
36
+ * 2. if no stored value: `defaultMode` (light|dark applied as-is)
37
+ * 3. if stored or default is 'system' AND `enableSystem`: matchMedia
38
+ * 4. else: 'light'
39
+ *
40
+ * Back-compat: with no options the script behaves exactly as before —
41
+ * stored value, then matchMedia, then 'light'.
42
+ */
7
43
  export function getThemeScript(
8
- storageKey = 'rfr-theme',
44
+ storageKeyOrOptions: string | ThemeScriptOptions = 'rfr-theme',
9
45
  attribute: 'class' | 'data-theme' = 'class',
10
46
  ): string {
11
- // This string is injected as innerHTML of a <script> tag.
12
- // It runs before any CSS/JS loads, preventing flash of wrong theme.
13
- 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;${
14
- attribute === 'class'
47
+ const opts: Required<ThemeScriptOptions> =
48
+ typeof storageKeyOrOptions === 'string'
49
+ ? {
50
+ storageKey: storageKeyOrOptions,
51
+ attribute,
52
+ defaultMode: 'system',
53
+ enableSystem: true,
54
+ }
55
+ : {
56
+ storageKey: storageKeyOrOptions.storageKey ?? 'rfr-theme',
57
+ attribute: storageKeyOrOptions.attribute ?? 'class',
58
+ defaultMode: storageKeyOrOptions.defaultMode ?? 'system',
59
+ enableSystem: storageKeyOrOptions.enableSystem ?? true,
60
+ }
61
+
62
+ // `noSystemFallback` short-circuits matchMedia entirely when the consumer
63
+ // wants brand consistency over OS preference (defaultMode='light'/'dark'
64
+ // OR enableSystem=false).
65
+ const noSystemFallback =
66
+ opts.defaultMode === 'light' || opts.defaultMode === 'dark' || !opts.enableSystem
67
+ const safeDefault: 'light' | 'dark' =
68
+ opts.defaultMode === 'dark' ? 'dark' : 'light'
69
+
70
+ const resolveExpr = noSystemFallback
71
+ ? // Stored wins → else hard default. No matchMedia call at all.
72
+ `var t=m==='dark'?'dark':(m==='light'?'light':'${safeDefault}');`
73
+ : // Original behaviour: stored → else matchMedia → else light.
74
+ `var s=window.matchMedia('(prefers-color-scheme:dark)').matches;var t=m==='dark'||(m!=='light'&&s)?'dark':'light';`
75
+
76
+ const applyExpr =
77
+ opts.attribute === 'class'
15
78
  ? "d.classList.remove('light','dark');d.classList.add(t);"
16
- : `d.setAttribute('${attribute}',t);`
17
- }d.style.colorScheme=t;}catch(e){}})()`
79
+ : `d.setAttribute('${opts.attribute}',t);`
80
+
81
+ return `(function(){try{var m=localStorage.getItem('${opts.storageKey}');${resolveExpr}var d=document.documentElement;${applyExpr}d.style.colorScheme=t;}catch(e){}})()`
18
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refraction-ui/astro",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "description": "All Refraction UI Astro components in one package",
5
5
  "type": "module",
6
6
  "exports": {
@@ -22,6 +22,7 @@
22
22
  "devDependencies": {
23
23
  "@refraction-ui/astro-accordion": "workspace:*",
24
24
  "@refraction-ui/astro-ai": "workspace:*",
25
+ "@refraction-ui/astro-analytics": "workspace:*",
25
26
  "@refraction-ui/astro-animated-text": "workspace:*",
26
27
  "@refraction-ui/astro-app-shell": "workspace:*",
27
28
  "@refraction-ui/astro-auth": "workspace:*",
@@ -32,14 +33,19 @@
32
33
  "@refraction-ui/astro-breadcrumbs": "workspace:*",
33
34
  "@refraction-ui/astro-button": "workspace:*",
34
35
  "@refraction-ui/astro-calendar": "workspace:*",
36
+ "@refraction-ui/astro-callout": "workspace:*",
35
37
  "@refraction-ui/astro-card": "workspace:*",
38
+ "@refraction-ui/astro-card-grid": "workspace:*",
39
+ "@refraction-ui/astro-carousel": "workspace:*",
36
40
  "@refraction-ui/astro-charts": "workspace:*",
37
41
  "@refraction-ui/astro-checkbox": "workspace:*",
42
+ "@refraction-ui/astro-code-block": "workspace:*",
38
43
  "@refraction-ui/astro-code-editor": "workspace:*",
39
44
  "@refraction-ui/astro-collapsible": "workspace:*",
40
45
  "@refraction-ui/astro-command": "workspace:*",
41
- "@refraction-ui/astro-conversation": "workspace:*",
46
+ "@refraction-ui/astro-command-input": "workspace:*",
42
47
  "@refraction-ui/astro-content-protection": "workspace:*",
48
+ "@refraction-ui/astro-conversation": "workspace:*",
43
49
  "@refraction-ui/astro-cookie-consent": "workspace:*",
44
50
  "@refraction-ui/astro-data-table": "workspace:*",
45
51
  "@refraction-ui/astro-date-picker": "workspace:*",
@@ -48,19 +54,27 @@
48
54
  "@refraction-ui/astro-diff-viewer": "workspace:*",
49
55
  "@refraction-ui/astro-dropdown-menu": "workspace:*",
50
56
  "@refraction-ui/astro-emoji-picker": "workspace:*",
57
+ "@refraction-ui/astro-empty-state": "workspace:*",
51
58
  "@refraction-ui/astro-feedback-dialog": "workspace:*",
59
+ "@refraction-ui/astro-file-tree": "workspace:*",
52
60
  "@refraction-ui/astro-file-upload": "workspace:*",
53
61
  "@refraction-ui/astro-footer": "workspace:*",
62
+ "@refraction-ui/astro-icon-system": "workspace:*",
54
63
  "@refraction-ui/astro-inline-editor": "workspace:*",
55
64
  "@refraction-ui/astro-input": "workspace:*",
56
65
  "@refraction-ui/astro-input-group": "workspace:*",
57
66
  "@refraction-ui/astro-install-prompt": "workspace:*",
58
67
  "@refraction-ui/astro-keyboard-shortcut": "workspace:*",
59
68
  "@refraction-ui/astro-language-selector": "workspace:*",
69
+ "@refraction-ui/astro-link-card": "workspace:*",
70
+ "@refraction-ui/astro-logger": "workspace:*",
60
71
  "@refraction-ui/astro-markdown-renderer": "workspace:*",
61
72
  "@refraction-ui/astro-mobile-nav": "workspace:*",
62
73
  "@refraction-ui/astro-navbar": "workspace:*",
63
74
  "@refraction-ui/astro-otp-input": "workspace:*",
75
+ "@refraction-ui/astro-pagination": "workspace:*",
76
+ "@refraction-ui/astro-password-input": "workspace:*",
77
+ "@refraction-ui/astro-payment": "workspace:*",
64
78
  "@refraction-ui/astro-popover": "workspace:*",
65
79
  "@refraction-ui/astro-presence-indicator": "workspace:*",
66
80
  "@refraction-ui/astro-progress-display": "workspace:*",
@@ -69,12 +83,19 @@
69
83
  "@refraction-ui/astro-resizable-layout": "workspace:*",
70
84
  "@refraction-ui/astro-rich-editor": "workspace:*",
71
85
  "@refraction-ui/astro-search-bar": "workspace:*",
86
+ "@refraction-ui/astro-segmented-control": "workspace:*",
72
87
  "@refraction-ui/astro-select": "workspace:*",
88
+ "@refraction-ui/astro-separator": "workspace:*",
73
89
  "@refraction-ui/astro-sidebar": "workspace:*",
74
90
  "@refraction-ui/astro-skeleton": "workspace:*",
91
+ "@refraction-ui/astro-skip-to-content": "workspace:*",
75
92
  "@refraction-ui/astro-slide-viewer": "workspace:*",
93
+ "@refraction-ui/astro-slider": "workspace:*",
94
+ "@refraction-ui/astro-social-auth-button": "workspace:*",
76
95
  "@refraction-ui/astro-status-indicator": "workspace:*",
96
+ "@refraction-ui/astro-steps": "workspace:*",
77
97
  "@refraction-ui/astro-switch": "workspace:*",
98
+ "@refraction-ui/astro-table-of-contents": "workspace:*",
78
99
  "@refraction-ui/astro-tabs": "workspace:*",
79
100
  "@refraction-ui/astro-textarea": "workspace:*",
80
101
  "@refraction-ui/astro-theme": "workspace:*",
@@ -85,23 +106,7 @@
85
106
  "@refraction-ui/astro-video-player": "workspace:*",
86
107
  "@refraction-ui/astro-voice-pill": "workspace:*",
87
108
  "@refraction-ui/astro-waveform": "workspace:*",
88
- "@refraction-ui/shared": "workspace:*",
89
- "@refraction-ui/astro-table-of-contents": "workspace:*",
90
- "@refraction-ui/astro-carousel": "workspace:*",
91
- "@refraction-ui/astro-slider": "workspace:*",
92
- "@refraction-ui/astro-pagination": "workspace:*",
93
- "@refraction-ui/astro-callout": "workspace:*",
94
- "@refraction-ui/astro-steps": "workspace:*",
95
- "@refraction-ui/astro-file-tree": "workspace:*",
96
- "@refraction-ui/astro-icon-system": "workspace:*",
97
- "@refraction-ui/astro-skip-to-content": "workspace:*",
98
- "@refraction-ui/astro-code-block": "workspace:*",
99
- "@refraction-ui/astro-link-card": "workspace:*",
100
- "@refraction-ui/astro-card-grid": "workspace:*",
101
- "@refraction-ui/astro-payment": "workspace:*",
102
- "@refraction-ui/astro-command-input": "workspace:*",
103
- "@refraction-ui/astro-logger": "workspace:*",
104
- "@refraction-ui/astro-analytics": "workspace:*"
109
+ "@refraction-ui/shared": "workspace:*"
105
110
  },
106
111
  "publishConfig": {
107
112
  "access": "public"