@unsetsoft/ryunixjs 1.2.5-canary.11 → 1.2.5-canary.13

package/styles/theme-toggle.css

@@ -0,0 +1,101 @@
+/**
+ * Theme segmented control (ThemeToggle) — import alongside app styles.
+ * Expects `html.dark` (or custom class via createThemeController) for dark mode.
+ */
+
+html:not(.dark) {
+  --ryx-theme-segment-bg: var(--ryx-surface-elevated, #f4f4f5);
+  --ryx-theme-segment-border: var(--ryx-border-strong, #d4d4d8);
+  --ryx-theme-chip-active: var(--ryx-surface, #ffffff);
+  --ryx-theme-chip-active-border: color-mix(
+    in srgb,
+    var(--ryx-text, #18181b) 8%,
+    transparent
+  );
+  --ryx-theme-chip-active-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
+  --ryx-theme-icon: var(--ryx-text-subtle, #71717a);
+  --ryx-theme-icon-hover: var(--ryx-text, #18181b);
+  --ryx-theme-icon-active: var(--ryx-link, #2563eb);
+}
+
+html.dark {
+  --ryx-theme-segment-bg: var(--ryx-surface-elevated, #1c1c1f);
+  --ryx-theme-segment-border: var(--ryx-border-strong, #3f3f46);
+  --ryx-theme-chip-active: var(--ryx-surface, #111113);
+  --ryx-theme-chip-active-border: color-mix(
+    in srgb,
+    var(--ryx-text, #fafafa) 12%,
+    transparent
+  );
+  --ryx-theme-chip-active-shadow:
+    0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.04);
+  --ryx-theme-icon: var(--ryx-text-muted, #a1a1aa);
+  --ryx-theme-icon-hover: var(--ryx-text, #fafafa);
+  --ryx-theme-icon-active: var(--ryx-link, #60a5fa);
+}
+
+.ryx-theme-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  border: 1px solid var(--ryx-theme-segment-border);
+  background: var(--ryx-theme-segment-bg);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
+}
+
+.ryx-theme-segment-btn {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--ryx-theme-icon);
+  cursor: pointer;
+  transition:
+    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ryx-theme-segment-btn:hover {
+  color: var(--ryx-theme-icon-hover);
+  background: color-mix(in srgb, var(--ryx-theme-icon-hover) 6%, transparent);
+}
+
+.ryx-theme-segment-btn:focus-visible {
+  outline: 2px solid var(--ryx-focus-ring, #60a5fa);
+  outline-offset: 2px;
+}
+
+.ryx-theme-segment-btn--active {
+  color: var(--ryx-theme-icon-active);
+  background-color: var(--ryx-theme-chip-active);
+  box-shadow: var(--ryx-theme-chip-active-shadow);
+  border: 1px solid var(--ryx-theme-chip-active-border);
+}
+
+.ryx-theme-segment-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  display: block;
+  pointer-events: none;
+}
+
+.ryx-theme-segment-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/types/index.d.ts

@@ -3,7 +3,7 @@
  *
  * Runtime remains JavaScript (Rollup bundles in `dist/`). These declarations
  * cover the package entry, hooks, components, and SSR helpers exported from
- * `src/main.js`.
+ * `src/main.ts` → emitido como `.generated/main.js` antes de Rollup.
  */
 
 // ---------------------------------------------------------------------------
@@ -234,6 +234,16 @@ export function useMetadata(
   options?: RyunixMetadataOptions,
 ): void
 
+export function resolvePageMetadata(
+  meta?: Record<string, unknown>,
+  options?: RyunixMetadataOptions,
+): { title: string; tags: Record<string, string | string[]> }
+
+export function mergeRouteMetadata(
+  base?: Record<string, unknown>,
+  next?: Record<string, unknown>,
+): Record<string, unknown>
+
 // ---------------------------------------------------------------------------
 // Router
 // ---------------------------------------------------------------------------
@@ -376,6 +386,11 @@ export function getMDXComponents(
 
 export const defaultComponents: RyunixMDXComponents
 
+/** Maps `unstyled` to `data-ryx-unstyled` for global style opt-out. */
+export function ryxProps(
+  props: Record<string, unknown> & { unstyled?: boolean },
+): Record<string, unknown>
+
 export function RyunixDevOverlay(propsOrError?: unknown): RyunixNode
 
 // ---------------------------------------------------------------------------
@@ -475,6 +490,117 @@ export namespace Hooks {
   export const useSearchParams: typeof useSearchParams
 }
 
+// ---------------------------------------------------------------------------
+// Theme toggle & cookie persistence
+// ---------------------------------------------------------------------------
+
+export interface ThemeToggleLabels {
+  title: string
+  light: string
+  system: string
+  dark: string
+}
+
+export type ThemePreference = 'light' | 'system' | 'dark'
+
+export interface ThemeControllerOptions {
+  cookieName?: string
+  defaultTheme?: ThemePreference
+  darkClass?: string
+  maxAgeSeconds?: number
+}
+
+export interface ThemeController {
+  cookieName: string
+  defaultTheme: ThemePreference
+  themes: readonly ThemePreference[]
+  getThemeCookie: () => ThemePreference | null
+  setThemeCookie: (theme: ThemePreference) => void
+  resolveThemeFromCookie: () => ThemePreference
+  getSystemColorScheme: () => 'light' | 'dark'
+  resolveEffectiveTheme: (
+    theme: ThemePreference | string | null | undefined,
+  ) => 'light' | 'dark'
+  applyTheme: (theme: ThemePreference | string | null | undefined) => void
+  getInitScript: () => string
+  watchSystemTheme: (onChange: (scheme: 'light' | 'dark') => void) => () => void
+}
+
+export const DEFAULT_THEME_COOKIE_NAME: string
+export const THEME_PREFERENCES: readonly ThemePreference[]
+export const themeController: ThemeController
+export const THEME_COOKIE_NAME: string
+export const defaultTheme: ThemePreference
+export const themes: readonly ThemePreference[]
+export const themeInitScript: string
+
+export function createThemeController(
+  options?: ThemeControllerOptions,
+): ThemeController
+
+export function getThemeCookie(): ThemePreference | null
+export function setThemeCookie(theme: ThemePreference): void
+export function resolveThemeFromCookie(): ThemePreference
+export function getSystemColorScheme(): 'light' | 'dark'
+export function resolveEffectiveTheme(
+  theme: ThemePreference | string | null | undefined,
+): 'light' | 'dark'
+export function applyTheme(
+  theme: ThemePreference | string | null | undefined,
+): void
+export function watchSystemTheme(
+  onChange: (scheme: 'light' | 'dark') => void,
+): () => void
+
+export interface ThemeToggleProps {
+  labels: ThemeToggleLabels
+  className?: string
+  controller?: ThemeController
+}
+
+export function ThemeToggle(props: ThemeToggleProps): RyunixElement
+
+export interface ThemeInitScriptProps {
+  controller?: ThemeController
+}
+
+export function ThemeInitScript(props?: ThemeInitScriptProps): RyunixElement
+
+export interface HeaderProps {
+  image?: string
+  title: string
+  href?: string
+  imageAlt?: string
+  sticky?: boolean
+  className?: string
+  children?: RyunixNode
+}
+
+export interface FooterProps {
+  image?: string
+  title?: string
+  description?: string
+  href?: string
+  imageAlt?: string
+  className?: string
+  children?: RyunixNode
+  bottomStart?: RyunixNode
+  bottomEnd?: RyunixNode
+}
+
+export function Header(props: HeaderProps): RyunixElement
+
+export function Footer(props: FooterProps): RyunixElement
+
+export interface MainProps {
+  maxWidth?: string
+  className?: string
+  innerClassName?: string
+  children?: RyunixNode
+}
+
+export function Main(props: MainProps): RyunixElement
+
 declare const Ryunix: {
   createElement: typeof createElement
   Fragment: typeof Fragment
@@ -499,6 +625,8 @@ declare const Ryunix: {
   useQuery: typeof useQuery
   useHash: typeof useHash
   useMetadata: typeof useMetadata
+  resolvePageMetadata: typeof resolvePageMetadata
+  mergeRouteMetadata: typeof mergeRouteMetadata
   useId: typeof useId
   resetIdCounter: typeof resetIdCounter
   useDebounce: typeof useDebounce
@@ -535,6 +663,15 @@ declare const Ryunix: {
   getState: typeof getState
   createActionProxy: typeof createActionProxy
   RyunixDevOverlay: typeof RyunixDevOverlay
+  ThemeToggle: typeof ThemeToggle
+  ThemeInitScript: typeof ThemeInitScript
+  Header: typeof Header
+  Footer: typeof Footer
+  Main: typeof Main
+  createThemeController: typeof createThemeController
+  themeController: typeof themeController
+  applyTheme: typeof applyTheme
+  themeInitScript: typeof themeInitScript
 }
 
 export default Ryunix