@refraction-ui/react 0.16.0 → 0.16.2

package/dist/internal/date-picker/index.d.cts

@@ -22,6 +22,8 @@ interface DatePickerProps {
     defaultOpen?: boolean;
     /** Callback when open changes */
     onOpenChange?: (open: boolean) => void;
+    /** The currently displayed month (controlled) */
+    currentMonth?: Date;
 }
 interface DatePickerState {
     open: boolean;
@@ -85,7 +87,7 @@ declare function formatDate(date: Date | undefined, format: string, showTime: bo
 declare function createDatePicker(props?: DatePickerProps): DatePickerAPI;
 
 declare 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";
-declare const datePickerDropdownStyles = "absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
+declare const datePickerDropdownStyles = "absolute z-50 mt-1 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
 declare const datePickerGridStyles = "w-full border-collapse";
 declare const datePickerDayVariants: (props?: ({
     state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;

package/dist/internal/date-picker/index.d.ts

@@ -22,6 +22,8 @@ interface DatePickerProps {
     defaultOpen?: boolean;
     /** Callback when open changes */
     onOpenChange?: (open: boolean) => void;
+    /** The currently displayed month (controlled) */
+    currentMonth?: Date;
 }
 interface DatePickerState {
     open: boolean;
@@ -85,7 +87,7 @@ declare function formatDate(date: Date | undefined, format: string, showTime: bo
 declare function createDatePicker(props?: DatePickerProps): DatePickerAPI;
 
 declare 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";
-declare const datePickerDropdownStyles = "absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
+declare const datePickerDropdownStyles = "absolute z-50 mt-1 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
 declare const datePickerGridStyles = "w-full border-collapse";
 declare const datePickerDayVariants: (props?: ({
     state?: "default" | "selected" | "today" | "disabled" | "outside" | undefined;

package/dist/internal/mascot/index.d.ts

@@ -0,0 +1,46 @@
+import { TokenContract } from '../shared/index.js';
+
+type MascotMood = 'happy' | 'think' | 'wave';
+type MascotAnimation = 'none' | 'bounce' | 'float';
+type MascotSize = 'sm' | 'md' | 'lg' | 'xl';
+interface MascotProps {
+    mood?: MascotMood;
+    animation?: MascotAnimation;
+    size?: MascotSize;
+    animate?: boolean;
+}
+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).
+ */
+declare function getMascotMoodStyles(mood: MascotMood): Record<string, string>;
+/**
+ * Creates a cleanup-enabled interval timer for Tobi's blinking state.
+ * Blinks for 150ms every 4000ms.
+ */
+declare function startMascotBlinkInterval(onBlinkChange: (isBlinking: boolean) => void, intervalMs?: number, durationMs?: number): () => void;
+declare function createMascot(props?: MascotProps): MascotAPI;
+
+declare const mascotTokens: TokenContract;
+declare const mascotVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | undefined;
+    animation?: "none" | "bounce" | "float" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type MascotAPI, type MascotAnimation, type MascotMood, type MascotProps, type MascotSize, createMascot, getMascotMoodStyles, mascotTokens, mascotVariants, startMascotBlinkInterval };

package/dist/internal/react-date-picker/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export { CalendarDay, DatePickerProps as CoreDatePickerProps, DatePickerAPI, DatePickerState, DatePickerView, datePickerDayVariants, datePickerDropdownStyles, datePickerTimeInputStyles, datePickerTimeStyles, datePickerTriggerStyles } from '../date-picker/index.cjs';
 
-interface DatePickerProps {
+interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
     value?: Date;
     onChange?: (date: Date) => void;
     minDate?: Date;
@@ -9,15 +9,7 @@ interface DatePickerProps {
     showTime?: boolean;
     format?: string;
     placeholder?: string;
-    className?: string;
-    disabled?: boolean;
-}
-declare function DatePicker({ value, onChange, minDate, maxDate, showTime, format, placeholder, className, disabled, }: DatePickerProps): React.DetailedReactHTMLElement<{
-    ref: React.RefObject<HTMLDivElement | null>;
-    className: string;
-}, HTMLDivElement>;
-declare namespace DatePicker {
-    var displayName: string;
 }
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 
 export { DatePicker, type DatePickerProps };

package/dist/internal/react-date-picker/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export { CalendarDay, DatePickerProps as CoreDatePickerProps, DatePickerAPI, DatePickerState, DatePickerView, datePickerDayVariants, datePickerDropdownStyles, datePickerTimeInputStyles, datePickerTimeStyles, datePickerTriggerStyles } from '../date-picker/index.js';
 
-interface DatePickerProps {
+interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
     value?: Date;
     onChange?: (date: Date) => void;
     minDate?: Date;
@@ -9,15 +9,7 @@ interface DatePickerProps {
     showTime?: boolean;
     format?: string;
     placeholder?: string;
-    className?: string;
-    disabled?: boolean;
-}
-declare function DatePicker({ value, onChange, minDate, maxDate, showTime, format, placeholder, className, disabled, }: DatePickerProps): React.DetailedReactHTMLElement<{
-    ref: React.RefObject<HTMLDivElement | null>;
-    className: string;
-}, HTMLDivElement>;
-declare namespace DatePicker {
-    var displayName: string;
 }
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 
 export { DatePicker, type DatePickerProps };

package/dist/internal/react-mascot/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MascotMood, MascotAnimation, MascotSize } from '../mascot/index.js';
+export { MascotAnimation, MascotMood, MascotSize } from '../mascot/index.js';
+
+interface MascotProps extends Omit<React.SVGProps<SVGSVGElement>, 'size'> {
+    /** The mood of the mascot. Defaults to 'happy'. */
+    mood?: MascotMood;
+    /** The active animation style. Defaults to 'none'. */
+    animation?: MascotAnimation;
+    /** The size class of the mascot. Defaults to 'md'. */
+    size?: MascotSize;
+    /** Master switch for all animations. Defaults to true. */
+    animate?: boolean;
+    /** Whether the bobbing animation is enabled. Defaults to null, falling back to animate. */
+    animateBobbing?: boolean;
+    /** Whether the blinking timer animation is enabled. Defaults to null, falling back to animate. */
+    animateBlinking?: boolean;
+    /** Whether the sprout swaying animation is enabled. Defaults to null, falling back to animate. */
+    animateSprout?: boolean;
+}
+/**
+ * Mascot component displaying Tobi the tortoise.
+ *
+ * Supports three moods ('happy', 'think', and 'wave') and toggleable animations
+ * (breathing bobbing, blinking timers, sprout swaying).
+ * States and theme styling are driven by the headless core `@refraction-ui/mascot`.
+ */
+declare const Mascot: React.ForwardRefExoticComponent<Omit<MascotProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+export { Mascot, type MascotProps };

package/dist/internal/react-slider/index.d.cts

@@ -1 +1,8 @@
-export * from '../slider/index.cjs';
+import * as React from 'react';
+
+interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    variant?: 'default';
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps };

package/dist/internal/react-slider/index.d.ts

@@ -1 +1,8 @@
-export * from '../slider/index.js';
+import * as React from 'react';
+
+interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    variant?: 'default';
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -117,6 +117,7 @@
     "@refraction-ui/react-logger": "workspace:*",
     "@refraction-ui/react-markdown-renderer": "workspace:*",
     "@refraction-ui/react-marquee-strip": "workspace:*",
+    "@refraction-ui/react-mascot": "workspace:*",
     "@refraction-ui/react-mastery-bar": "workspace:*",
     "@refraction-ui/react-mini-map": "workspace:*",
     "@refraction-ui/react-mobile-nav": "workspace:*",

package/dist/internal/slider/index.d.cts

@@ -1,4 +0,0 @@
-interface SliderProps {
-}
-
-export type { SliderProps };

package/dist/internal/slider/index.d.ts

@@ -1,4 +0,0 @@
-interface SliderProps {
-}
-
-export type { SliderProps };