@refraction-ui/astro 0.15.0 → 0.15.2

package/dist/date-picker/date-picker.styles.ts

@@ -4,7 +4,7 @@ export const datePickerTriggerStyles =
   'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer'
 
 export const datePickerDropdownStyles =
-  'absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md'
+  'absolute z-50 mt-1 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md'
 
 export const datePickerGridStyles = 'w-full border-collapse'
 

package/dist/date-picker/date-picker.ts

@@ -24,6 +24,8 @@ export interface DatePickerProps {
   defaultOpen?: boolean
   /** Callback when open changes */
   onOpenChange?: (open: boolean) => void
+  /** The currently displayed month (controlled) */
+  currentMonth?: Date
 }
 
 export interface DatePickerState {
@@ -149,7 +151,7 @@ export function createDatePicker(props: DatePickerProps = {}): DatePickerAPI {
 
   const today = new Date()
   let internalOpen = controlledOpen ?? defaultOpen
-  let currentMonth = value ? startOfMonth(value) : startOfMonth(today)
+  let currentMonth = props.currentMonth ?? (value ? startOfMonth(value) : startOfMonth(today))
   let view: DatePickerView = 'calendar'
   const hours = value ? value.getHours() : 0
   const minutes = value ? value.getMinutes() : 0

package/dist/index.ts

@@ -67,6 +67,7 @@ export * from './astro-logger/index.ts';
 export * from './astro-markdown-renderer/index.ts';
 export * from './astro-marquee-strip/index.ts';
 export * from './astro-mastery-bar/index.ts';
+export * from './astro-mascot/index.ts';
 export * from './astro-mini-map/index.ts';
 export * from './astro-mobile-nav/index.ts';
 export * from './astro-navbar/index.ts';

package/dist/mascot/index.ts

@@ -0,0 +1,2 @@
+export * from './mascot.ts'
+export * from './mascot.styles.ts'

package/dist/mascot/mascot.styles.ts

@@ -0,0 +1,33 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const mascotTokens: TokenContract = {
+  name: 'mascot',
+  tokens: {
+    primary: { variable: '--rfr-mascot-primary', fallback: '138 60% 51%' },
+    secondary: { variable: '--rfr-mascot-secondary', fallback: '138 60% 83%' },
+    accent: { variable: '--rfr-mascot-accent', fallback: '26 100% 67%' },
+    stroke: { variable: '--rfr-mascot-stroke', fallback: '139 59% 16%' },
+  },
+}
+
+export const mascotVariants = cva({
+  base: 'inline-block select-none transition-all duration-300',
+  variants: {
+    size: {
+      sm: 'w-24 h-auto',
+      md: 'w-36 h-auto',
+      lg: 'w-48 h-auto',
+      xl: 'w-64 h-auto',
+    },
+    animation: {
+      none: '',
+      bounce: 'motion-safe:animate-bounce',
+      float: 'rfr-mascot-float',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    animation: 'none',
+  },
+})

package/dist/mascot/mascot.ts

@@ -0,0 +1,121 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type MascotMood = 'happy' | 'think' | 'wave'
+export type MascotAnimation = 'none' | 'bounce' | 'float'
+export type MascotSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export interface MascotProps {
+  mood?: MascotMood
+  animation?: MascotAnimation
+  size?: MascotSize
+  animate?: boolean
+}
+
+export interface MascotAPI {
+  /** ARIA attributes to spread on the root element */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for CSS styling hooks and states */
+  dataAttributes: Record<string, string>
+  /** Active mascot state configuration */
+  state: {
+    mood: MascotMood
+    animation: MascotAnimation
+    size: MascotSize
+    animate: boolean
+  }
+  /** Mood styles mapping moods to CSS custom properties */
+  style: Record<string, string>
+}
+
+/**
+ * Maps mascot moods ('happy', 'think', 'wave') to CSS custom properties (variables).
+ */
+export function getMascotMoodStyles(mood: MascotMood): Record<string, string> {
+  switch (mood) {
+    case 'happy':
+      return {
+        '--rfr-mascot-shell': 'var(--primary, 138 60% 51%)',
+        '--rfr-mascot-shell-rim': 'var(--primary-700, 138 58% 36%)',
+        '--rfr-mascot-belly': 'var(--primary-200, 138 60% 83%)',
+        '--rfr-mascot-skin': 'var(--primary-400, 138 59% 63%)',
+        '--rfr-mascot-skin-d': 'var(--primary-600, 138 58% 43%)',
+        '--rfr-mascot-scute': 'var(--sunshine, 42 100% 62%)',
+        '--rfr-mascot-scute-alt': 'var(--primary-300, 138 59% 74%)',
+        '--rfr-mascot-cheek': 'var(--accent-solid, 26 100% 67%)',
+      }
+    case 'think':
+      return {
+        // Indigo / purple tones
+        '--rfr-mascot-shell': '250 65% 55%',
+        '--rfr-mascot-shell-rim': '250 65% 40%',
+        '--rfr-mascot-belly': '250 65% 85%',
+        '--rfr-mascot-skin': '250 65% 72%',
+        '--rfr-mascot-skin-d': '250 65% 62%',
+        '--rfr-mascot-scute': '280 65% 60%',
+        '--rfr-mascot-scute-alt': '280 65% 50%',
+        '--rfr-mascot-cheek': '320 80% 65%',
+      }
+    case 'wave':
+      return {
+        // Orange / warm tones
+        '--rfr-mascot-shell': '24 85% 50%',
+        '--rfr-mascot-shell-rim': '24 85% 40%',
+        '--rfr-mascot-belly': '24 85% 85%',
+        '--rfr-mascot-skin': '24 85% 68%',
+        '--rfr-mascot-skin-d': '24 85% 58%',
+        '--rfr-mascot-scute': '160 60% 45%',
+        '--rfr-mascot-scute-alt': '160 60% 35%',
+        '--rfr-mascot-cheek': '15 90% 65%',
+      }
+  }
+}
+
+/**
+ * Creates a cleanup-enabled interval timer for Tobi's blinking state.
+ * Blinks for 150ms every 4000ms.
+ */
+export function startMascotBlinkInterval(
+  onBlinkChange: (isBlinking: boolean) => void,
+  intervalMs = 4000,
+  durationMs = 150,
+): () => void {
+  const timer = setInterval(() => {
+    onBlinkChange(true)
+    setTimeout(() => {
+      onBlinkChange(false)
+    }, durationMs)
+  }, intervalMs)
+
+  return () => {
+    clearInterval(timer)
+  }
+}
+
+export function createMascot(props: MascotProps = {}): MascotAPI {
+  const { mood = 'happy', animation = 'none', size = 'md', animate = true } = props
+
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'img',
+    'aria-label': `Tobi the Tortoise feeling ${mood}`,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-slot': 'mascot',
+    'data-mood': mood,
+    'data-animation': animation,
+    'data-size': size,
+    'data-animate': animate ? 'true' : 'false',
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+    state: {
+      mood,
+      animation,
+      size,
+      animate,
+    },
+    style: getMascotMoodStyles(mood),
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -87,6 +87,7 @@
     "@refraction-ui/astro-markdown-renderer": "workspace:*",
     "@refraction-ui/astro-marquee-strip": "workspace:*",
     "@refraction-ui/astro-mastery-bar": "workspace:*",
+    "@refraction-ui/astro-mascot": "workspace:*",
     "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",