@refraction-ui/astro 0.15.0 → 0.15.1

package/dist/astro-tooltip/Tooltip.stories.ts

@@ -1,12 +1,19 @@
 import Component from './Tooltip.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/Tooltip',
   component: Component,
+  argTypes: {
+    delayDuration: { control: 'number' },
+    default: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    delayDuration: 0,
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-tooltip/TooltipContent.stories.ts

@@ -0,0 +1,19 @@
+import Component from './TooltipContent.astro'
+
+const meta = {
+  title: 'Astro/TooltipContent',
+  component: Component,
+  argTypes: {
+    side: { control: 'text' },
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    side: '',
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-tooltip/TooltipTrigger.stories.ts

@@ -0,0 +1,17 @@
+import Component from './TooltipTrigger.astro'
+
+const meta = {
+  title: 'Astro/TooltipTrigger',
+  component: Component,
+  argTypes: {
+    default: { control: 'text' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    default: '<span>default content</span>',
+  }
+}

package/dist/astro-version-selector/VersionSelector.astro

@@ -23,7 +23,7 @@ const {
 } = Astro.props
 
 const api = createVersionSelector({ value, versions })
-const selectedOpt = versions.find((v) => v.value === value)
+const selectedOpt = (versions || []).find((v) => v.value === value)
 const displayLabel = selectedOpt ? selectedOpt.label : placeholder
 ---
 
@@ -106,7 +106,7 @@ const displayLabel = selectedOpt ? selectedOpt.label : placeholder
       selectedValue = value
       root.setAttribute('data-rfr-version-value', value)
 
-      const opt = versions.find((v) => v.value === value)
+      const opt = (versions || []).find((v) => v.value === value)
       label.textContent = opt ? opt.label : placeholder
 
       // Update latest badge on trigger

package/dist/astro-version-selector/VersionSelector.stories.ts

@@ -1,12 +1,21 @@
 import Component from './VersionSelector.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/VersionSelector',
   component: Component,
+  argTypes: {
+    value: { control: 'text' },
+    versions: { control: 'text' },
+    placeholder: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    value: '',
+    versions: '',
+    placeholder: '',
+  },
+}

package/dist/astro-video-grid/VideoGrid.astro

@@ -53,7 +53,7 @@ const gridStyle =
 
 const spotlightParticipant =
   effectiveLayout === 'speaker'
-    ? (participants.find((p) => p.id === spotlightId) ?? participants[0])
+    ? ((participants || []).find((p) => p.id === spotlightId) ?? participants[0])
     : undefined
 
 const filmstrip =

package/dist/astro-video-player/VideoPlayer.stories.ts

@@ -1,12 +1,25 @@
 import Component from './VideoPlayer.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/VideoPlayer',
   component: Component,
+  argTypes: {
+    src: { control: 'text' },
+    poster: { control: 'text' },
+    autoplay: { control: 'boolean' },
+    muted: { control: 'boolean' },
+    controls: { control: 'boolean' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    src: '',
+    poster: '',
+    autoplay: false,
+    muted: false,
+    controls: false,
+  },
+}

package/dist/astro-voice-pill/VoicePill.stories.ts

@@ -1,12 +1,33 @@
 import Component from './VoicePill.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/VoicePill',
   component: Component,
+  argTypes: {
+    speaker: { control: 'text' },
+    label: { control: 'text' },
+    sub: { control: 'text' },
+    subtitle: { control: 'text' },
+    intensity: { control: 'number' },
+    muted: { control: 'boolean' },
+    position: { control: 'text' },
+    showMuteButton: { control: 'boolean' },
+    avatar: { control: 'text' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    speaker: '',
+    label: '',
+    sub: '',
+    subtitle: '',
+    intensity: 0,
+    muted: false,
+    position: '',
+    showMuteButton: false,
+    avatar: '<span>avatar content</span>',
+  }
+}

package/dist/astro-waveform/Waveform.stories.ts

@@ -1,12 +1,35 @@
 import Component from './Waveform.astro'
 
-// Auto-generated baseline story. Renders the component with empty args;
-// components that require props show a render error (enrich by hand as needed).
 const meta = {
   title: 'Astro/Waveform',
   component: Component,
+  argTypes: {
+    samples: { control: 'text' },
+    intensity: { control: 'number' },
+    amplitude: { control: 'number' },
+    variant: { control: 'select', options: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'] },
+    height: { control: 'number' },
+    width: { control: 'number' },
+    barCount: { control: 'number' },
+    smoothing: { control: 'number' },
+    color: { control: 'text' },
+    paused: { control: 'boolean' },
+  },
 }
 
 export default meta
 
-export const Default = { args: {} }
+export const Default = {
+  args: {
+    samples: '',
+    intensity: 0,
+    amplitude: 0,
+    variant: 'default',
+    height: 0,
+    width: 0,
+    barCount: 0,
+    smoothing: 0,
+    color: '',
+    paused: false,
+  },
+}

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.1",
   "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:*",