@mrigx/ui 0.1.0

package/src/components/skeleton/optical-skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '../../utils/cn';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-white/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/slider/optical-slider.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { useMrigSurface } from '@mrigx/react';
+import { cn } from '../../utils/cn';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, forwardedRef) => {
+  const mrigRef = useMrigSurface<HTMLSpanElement>({ material: 'none', isDynamic: true }, forwardedRef as any);
+  
+  return (
+    <SliderPrimitive.Root
+      ref={mrigRef as any}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center group",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-white/[0.05] border border-white/10 shadow-[inset_0_1px_3px_rgba(0,0,0,0.8)]">
+        <SliderPrimitive.Range className="absolute h-full bg-gradient-to-r from-white/10 to-white/40 shadow-[0_0_10px_rgba(255,255,255,0.2)]" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="block h-6 w-6 rounded-full border border-white/30 bg-black/40 backdrop-blur-xl shadow-[0_4px_12px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.4)] transition-all hover:bg-white/10 hover:border-white/50 hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing active:scale-95 flex items-center justify-center">
+        <div className="w-2 h-2 rounded-full bg-white/50 shadow-[0_0_5px_rgba(255,255,255,0.5)] transition-all group-hover:bg-white" />
+      </SliderPrimitive.Thumb>
+    </SliderPrimitive.Root>
+  );
+})
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/src/components/sonner/optical-toast.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  CircleCheck,
+  Info,
+  LoaderCircle,
+  OctagonX,
+  TriangleAlert,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheck className="h-4 w-4" />,
+        info: <Info className="h-4 w-4" />,
+        warning: <TriangleAlert className="h-4 w-4" />,
+        error: <OctagonX className="h-4 w-4" />,
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-transparent group-[.toaster]:text-white group-[.toaster]:border-white/10 group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-white/50",
+          actionButton:
+            "group-[.toast]:bg-white/20 group-[.toast]:text-white",
+          cancelButton:
+            "group-[.toast]:bg-white/10 group-[.toast]:text-white/50",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/spinner/optical-spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from '../../utils/cn';
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/stained-glass-card.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react';
+import { useMrigSurface, useMrigInteraction } from '@mrigx/react';
+import { type OpticalMaterial } from '@mrigx/core';
+
+export interface StainedGlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: OpticalMaterial;
+  materialStrength?: number;
+  glowColor?: string;
+}
+
+export const StainedGlassCard = forwardRef<HTMLDivElement, StainedGlassCardProps>(({
+  children,
+  material = 'glass',
+  materialStrength = 1.0,
+  glowColor = "rgba(217, 70, 239, 0.3)", // fuchsia-500/30
+  className = "",
+  style,
+  onClick,
+  ...props
+}, forwardedRef) => {
+  // We use useMrigSurface to create a thick optical refractive layer
+  const rootRef = useMrigSurface<HTMLDivElement>({
+    material, 
+    materialStrength: 1.0, 
+    borderRadius: 16 
+  }, forwardedRef);
+  
+  const { pulseCenter } = useMrigInteraction();
+
+  const containerStyle: React.CSSProperties = {
+    minHeight: '16rem',
+    width: '100%',
+    border: '1px solid rgba(255, 255, 255, 0.05)',
+    backgroundColor: 'rgba(255, 255, 255, 0.01)',
+    borderRadius: '1rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+    cursor: 'crosshair',
+    ...style
+  };
+
+  const glowStyle: React.CSSProperties = {
+    position: 'absolute',
+    width: '50%',
+    height: '50%',
+    borderRadius: '9999px',
+    filter: 'blur(40px)',
+    pointerEvents: 'none',
+    backgroundColor: glowColor,
+    zIndex: 0,
+  };
+
+  const innerStyle: React.CSSProperties = {
+    position: 'relative',
+    zIndex: 1,
+    width: '80%',
+    minHeight: '8rem',
+    padding: '2rem',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '0.75rem',
+    backgroundColor: 'rgba(255, 255, 255, 0.02)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none', // let clicks fall through to root
+  };
+
+  return (
+    <div 
+      ref={rootRef}
+      style={containerStyle} 
+      className={className} 
+      onClick={(e) => {
+        pulseCenter(e.currentTarget, 0.3);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      <div style={glowStyle} />
+      <div style={innerStyle}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+StainedGlassCard.displayName = 'StainedGlassCard';
+
+

package/src/components/switch/optical-switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from '../../utils/cn';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-white/10 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-white/20 data-[state=unchecked]:bg-white/5 data-[state=checked]:shadow-[inset_0_1px_3px_rgba(255,255,255,0.2)] data-[state=unchecked]:shadow-[inset_0_1px_3px_rgba(0,0,0,0.8)]",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full border border-white/30 bg-black/40 backdrop-blur-xl shadow-[0_4px_12px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.4)] ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 flex items-center justify-center"
+      )}
+    >
+      <div className="w-1.5 h-1.5 rounded-full bg-white/50 transition-colors" />
+    </SwitchPrimitives.Thumb>
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/components/table/optical-table.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+import { GlassSurface } from '@mrigx/fx';
+
+const OpticalTable = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className = "", ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={`w-full caption-bottom text-sm ${className}`}
+      {...props}
+    />
+  </div>
+))
+OpticalTable.displayName = "OpticalTable"
+
+const OpticalTableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className = "", ...props }, ref) => (
+  <thead ref={ref} className={`[&_tr]:border-b border-white/10 ${className}`} {...props} />
+))
+OpticalTableHeader.displayName = "OpticalTableHeader"
+
+const OpticalTableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className = "", ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={`[&_tr:last-child]:border-0 ${className}`}
+    {...props}
+  />
+))
+OpticalTableBody.displayName = "OpticalTableBody"
+
+const OpticalTableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className = "", ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={`border-t border-white/10 bg-white/[0.02] font-medium text-white/80 ${className}`}
+    {...props}
+  />
+))
+OpticalTableFooter.displayName = "OpticalTableFooter"
+
+const OpticalTableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className = "", ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={`border-b border-white/5 transition-colors hover:bg-white/[0.02] data-[state=selected]:bg-white/[0.05] ${className}`}
+    {...props}
+  />
+))
+OpticalTableRow.displayName = "OpticalTableRow"
+
+const OpticalTableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className = "", ...props }, ref) => (
+  <th
+    ref={ref}
+    className={`h-12 px-4 text-left align-middle font-light text-white/50 [&:has([role=checkbox])]:pr-0 ${className}`}
+    {...props}
+  />
+))
+OpticalTableHead.displayName = "OpticalTableHead"
+
+const OpticalTableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className = "", ...props }, ref) => (
+  <td
+    ref={ref}
+    className={`p-4 align-middle text-white/80 font-light [&:has([role=checkbox])]:pr-0 ${className}`}
+    {...props}
+  />
+))
+OpticalTableCell.displayName = "OpticalTableCell"
+
+const OpticalTableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className = "", ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={`mt-4 text-sm text-white/50 ${className}`}
+    {...props}
+  />
+))
+OpticalTableCaption.displayName = "OpticalTableCaption"
+
+export {
+  OpticalTable,
+  OpticalTableHeader,
+  OpticalTableBody,
+  OpticalTableFooter,
+  OpticalTableHead,
+  OpticalTableRow,
+  OpticalTableCell,
+  OpticalTableCaption,
+}

package/src/components/tabs/optical-tabs.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from '../../utils/cn';
+import { RippleSurface, GlassSurface } from '@mrigx/fx';
+
+const OpticalTabs = TabsPrimitive.Root
+
+const OpticalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { material?: string; materialStrength?: number }
+>(({ className, material = "glass", materialStrength = 0.5, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-lg p-1 text-white/50 relative",
+      className
+    )}
+    {...props}
+  >
+    <GlassSurface material={material} materialStrength={materialStrength} borderRadius={8} className="absolute inset-0 -z-10 border border-white/5" />
+    {props.children}
+  </TabsPrimitive.List>
+))
+OpticalTabsList.displayName = TabsPrimitive.List.displayName
+
+const OpticalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/10 data-[state=active]:text-white data-[state=active]:shadow-sm cursor-pointer",
+      className
+    )}
+    {...props}
+  />
+))
+OpticalTabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const OpticalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+OpticalTabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { OpticalTabs, OpticalTabsList, OpticalTabsTrigger, OpticalTabsContent }

package/src/components/text/liquid-tension-text.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react';
+
+export function LiquidTensionText({ children, className = "", distance = 100, strength = 15, as: Component = "span" }: any) {
+  const ref = useRef<HTMLElement>(null);
+  
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    
+    let rect = el.getBoundingClientRect();
+    let centerX = rect.left + rect.width / 2;
+    let centerY = rect.top + rect.height / 2;
+    let isActive = false;
+    let rafId = 0;
+    let mouseX = 0;
+    let mouseY = 0;
+
+    const updateTransform = () => {
+      if (!isActive) return;
+      const distX = mouseX - centerX;
+      const distY = mouseY - centerY;
+      const dist = Math.sqrt(distX * distX + distY * distY);
+      
+      if (dist < distance) {
+         const pull = (distance - dist) / strength;
+         el.style.transform = `translate(${distX > 0 ? pull : -pull}px, ${distY > 0 ? pull : -pull}px)`;
+      } else {
+         el.style.transform = 'translate(0px, 0px)';
+      }
+      rafId = 0;
+    };
+
+    const handleMove = (e: MouseEvent) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      if (isActive && !rafId) rafId = requestAnimationFrame(updateTransform);
+    };
+
+    const handleEnter = () => {
+      isActive = true;
+      rect = el.getBoundingClientRect();
+      centerX = rect.left + rect.width / 2;
+      centerY = rect.top + rect.height / 2;
+    };
+    
+    const handleLeave = () => {
+      isActive = false;
+      el.style.transform = 'translate(0px, 0px)';
+      if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
+    };
+
+    el.addEventListener('mouseenter', handleEnter);
+    el.addEventListener('mouseleave', handleLeave);
+    window.addEventListener('mousemove', handleMove, { passive: true });
+    
+    return () => {
+      el.removeEventListener('mouseenter', handleEnter);
+      el.removeEventListener('mouseleave', handleLeave);
+      window.removeEventListener('mousemove', handleMove);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [distance, strength]);
+
+  return <Component ref={ref} className={`inline-block transition-transform duration-75 ease-out ${className}`}>{children}</Component>;
+}

package/src/components/text/optical-tension-text.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+
+export function LiquidTensionText({ children, className = "", distance = 100, strength = 15, as: Component = "span" }: any) {
+  const ref = useRef<HTMLElement>(null);
+  
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    
+    let rect = el.getBoundingClientRect();
+    let centerX = rect.left + rect.width / 2;
+    let centerY = rect.top + rect.height / 2;
+    let isActive = false;
+    let rafId = 0;
+    let mouseX = 0;
+    let mouseY = 0;
+
+    const updateTransform = () => {
+      if (!isActive) return;
+      const distX = mouseX - centerX;
+      const distY = mouseY - centerY;
+      const dist = Math.sqrt(distX * distX + distY * distY);
+      
+      if (dist < distance) {
+         const pull = (distance - dist) / strength;
+         el.style.transform = `translate(${distX > 0 ? pull : -pull}px, ${distY > 0 ? pull : -pull}px)`;
+      } else {
+         el.style.transform = 'translate(0px, 0px)';
+      }
+      rafId = 0;
+    };
+
+    const handleMove = (e: MouseEvent) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      if (isActive && !rafId) rafId = requestAnimationFrame(updateTransform);
+    };
+
+    const handleEnter = () => {
+      isActive = true;
+      rect = el.getBoundingClientRect();
+      centerX = rect.left + rect.width / 2;
+      centerY = rect.top + rect.height / 2;
+    };
+    
+    const handleLeave = () => {
+      isActive = false;
+      el.style.transform = 'translate(0px, 0px)';
+      if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
+    };
+
+    el.addEventListener('mouseenter', handleEnter);
+    el.addEventListener('mouseleave', handleLeave);
+    window.addEventListener('mousemove', handleMove, { passive: true });
+    
+    return () => {
+      el.removeEventListener('mouseenter', handleEnter);
+      el.removeEventListener('mouseleave', handleLeave);
+      window.removeEventListener('mousemove', handleMove);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [distance, strength]);
+
+  return <Component ref={ref} className={`inline-block transition-transform duration-75 ease-out ${className}`}>{children}</Component>;
+}

package/src/components/text/optical-text.tsx

@@ -0,0 +1,20 @@
+
+import React, { forwardRef } from 'react';
+import { useMrigSurface, useMrigInteraction } from '@mrigx/react';
+export const OpticalText = forwardRef<any, any>(({ children, className = "", as = "span", ...props }, forwardedRef) => {
+  const Component = as;
+  const internalRef = useMrigSurface({ material: 'soft-glass', materialStrength: 0.5, borderRadius: 4 }, forwardedRef);
+  const { pulseCenter } = useMrigInteraction();
+  
+  return (
+    <Component 
+      ref={internalRef as any} 
+      className={`inline-block px-1 rounded bg-white/5 ${className}`} 
+      onMouseEnter={(e: any) => pulseCenter(e.currentTarget, 0.2)}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+OpticalText.displayName = "OpticalText";

package/src/components/text/prismatic-selection.tsx

@@ -0,0 +1,5 @@
+export function PrismaticSelection() {
+  // Logic migrated directly into MrigEngine's native event loop.
+  // Component kept for backward compatibility in the API.
+  return null;
+}

package/src/components/textarea/optical-textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from '../../utils/cn';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-base ring-offset-black placeholder:text-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/theme-toggle/optical-theme-toggle.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+
+const THEMES = ['default', 'theme-cyan', 'theme-magenta', 'theme-toxic', 'theme-amber', 'theme-electric', 'theme-laser', 'theme-hotpink', 'theme-crimson'];
+const THEME_COLORS = ['#ffffff', '#00ffcc', '#ff00cc', '#39ff14', '#ffb000', '#0077ff', '#ffff00', '#ff1493', '#ff0033'];
+
+export function OpticalThemeToggle() {
+  const [themeIdx, setThemeIdx] = useState(0);
+  // Add an internal dynamic surface for the toggle itself so its glow updates cleanly
+  const toggleRef = useMrigSurface<HTMLButtonElement>({ isDynamic: true });
+
+  const toggleTheme = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const nextIdx = (themeIdx + 1) % THEMES.length;
+    setThemeIdx(nextIdx);
+    
+    THEMES.forEach(t => {
+      if (t !== 'default') document.documentElement.classList.remove(t); document.getElementById("mrig-app-root")?.classList.remove(t);
+    });
+    
+    const nextTheme = THEMES[nextIdx];
+    if (nextTheme !== 'default') {
+      document.documentElement.classList.add(nextTheme); document.getElementById("mrig-app-root")?.classList.add(nextTheme);
+    }
+    
+    // Force the optical engine to re-rasterize the entire DOM to capture the new colors
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 10);
+  };
+
+  return (
+    <button 
+      ref={toggleRef}
+      onClick={(e) => toggleTheme(e)} 
+      className="p-3 rounded-full border border-white/20 bg-white/5 hover:bg-white/20 transition-all cursor-pointer flex items-center justify-center text-white pointer-events-auto shadow-2xl hover:scale-110"
+      style={{ boxShadow: `0 0 15px ${THEME_COLORS[themeIdx]}50` }}
+      aria-label="Toggle Glass Theme"
+    >
+      <div className="w-5 h-5 rounded-full shadow-inner border border-black/30" style={{ backgroundColor: THEME_COLORS[themeIdx] }} />
+    </button>
+  );
+}
+

package/src/components/toast/optical-toast.tsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalToast({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalToastProps) {
+  const localRef = useRef<HTMLDivElement>(null);
+  const ref = useMrigSurface<HTMLDivElement>({ material, materialStrength, borderRadius: 8 }, localRef);
+  
+  return (
+    <div 
+      ref={ref as any} 
+      className={`p-6 border border-white/10 bg-white/5 rounded-xl shadow-lg backdrop-blur-md flex items-center justify-center text-white/80 font-light ${className}`}
+      {...props}
+    >
+      {children || 'Toast Interface'}
+    </div>
+  );
+}
+
+
+