@mrigx/ui 0.1.0

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

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from '../../utils/cn';
+import { GlassSurface } from '@mrigx/fx';
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-transparent p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-transparent border-white/10 relative p-1 text-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-transparent border-white/10 relative p-1 text-white shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-white/10", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-white/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

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

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalMessage({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalMessageProps) {
+  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 || 'Message Interface'}
+    </div>
+  );
+}
+
+
+

package/src/components/message-scroller/optical-message-scroller.tsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalMessageScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalMessageScroller({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalMessageScrollerProps) {
+  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 || 'Message Scroller Interface'}
+    </div>
+  );
+}
+
+
+

package/src/components/native-select/optical-native-select.tsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalNativeSelectProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalNativeSelect({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalNativeSelectProps) {
+  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 || 'Native Select Interface'}
+    </div>
+  );
+}
+
+
+

package/src/components/navigation-menu/optical-navigation-menu.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { RippleSurface } from '@mrigx/fx';
+import { Link, useLocation } from "react-router-dom";
+
+export interface OpticalNavigationItem {
+  title: string;
+  href: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface OpticalNavigationGroup {
+  title: string;
+  items: OpticalNavigationItem[];
+}
+
+export interface OpticalNavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  groups: OpticalNavigationGroup[];
+}
+
+export const OpticalNavigationMenu = React.forwardRef<HTMLDivElement, OpticalNavigationMenuProps>(
+  ({ className = "", groups, ...props }, ref) => {
+    const location = useLocation();
+
+    return (
+      <div ref={ref} className={`w-full flex flex-col gap-8 ${className}`} {...props}>
+        {groups.map((group, index) => (
+          <div key={index} className="flex flex-col gap-2">
+            <h4 className="px-4 text-xs font-semibold uppercase tracking-widest text-white/40 mb-2">
+              {group.title}
+            </h4>
+            <div className="flex flex-col gap-1">
+              {group.items.map((item, i) => {
+                const isActive = location.pathname === item.href;
+                return (
+                  <RippleSurface
+                    key={i}
+                    material={isActive ? "crystal" : "glass"}
+                    materialStrength={isActive ? 0.3 : 0.1}
+                    borderRadius={8}
+                    className="w-full relative"
+                  >
+                    <Link
+                      to={item.disabled ? "#" : item.href}
+                      className={`
+                        w-full flex items-center justify-between px-4 py-2.5 rounded-lg text-sm font-medium transition-colors
+                        ${item.disabled ? "opacity-40 cursor-not-allowed pointer-events-none" : "hover:text-white"}
+                        ${isActive ? "text-white bg-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]" : "text-white/60"}
+                      `}
+                    >
+                      {item.title}
+                      {item.label && (
+                        <span className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full ${isActive ? "bg-white/20 text-white" : "bg-white/5 text-white/40"}`}>
+                          {item.label}
+                        </span>
+                      )}
+                    </Link>
+                  </RippleSurface>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+OpticalNavigationMenu.displayName = "OpticalNavigationMenu";

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

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from '../../utils/cn';
+import { OpticalButtonProps as ButtonProps } from '../button/optical-button';
+import { buttonVariants } from '../../utils/button-variants';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

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

@@ -0,0 +1,26 @@
+
+import React, { forwardRef } from 'react';
+import { GlassSurface } from '@mrigx/fx';
+
+export interface OpticalPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+}
+
+export const OpticalPanel = forwardRef<HTMLDivElement, OpticalPanelProps>(({ className = "", title, description, children, ...props }, ref) => {
+  return (
+    <GlassSurface 
+      ref={ref as any}
+      className={`rounded-2xl border border-white/10 bg-white/5 p-6 shadow-sm ${className}`} 
+      {...props}
+    >
+      {title && <h3 className="font-semibold leading-none tracking-tight text-white mb-2">{title}</h3>}
+      {description && <p className="text-sm text-white/60 mb-4">{description}</p>}
+      {children}
+    </GlassSurface>
+  );
+});
+OpticalPanel.displayName = "OpticalPanel";
+
+
+

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

@@ -0,0 +1,32 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from '../../utils/cn';
+import { GlassSurface } from '@mrigx/fx';
+
+const OpticalPopover = PopoverPrimitive.Root
+
+const OpticalPopoverTrigger = PopoverPrimitive.Trigger
+
+const OpticalPopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { material?: string; materialStrength?: number }
+>(({ className, align = "center", sideOffset = 4, material = "glass", materialStrength = 1.0, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-xl border border-white/10 p-4 text-white shadow-2xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative",
+        className
+      )}
+      {...props}
+    >
+      <GlassSurface material={material} materialStrength={materialStrength} borderRadius={12} className="absolute inset-0 -z-10" />
+      {props.children}
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+))
+OpticalPopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { OpticalPopover, OpticalPopoverTrigger, OpticalPopoverContent }

package/src/components/prism-button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RippleSurface } from '@mrigx/fx';
+
+export function PrismButton({ as, children, onClick, className = "", ...props }: { as?: React.ElementType, children: React.ReactNode, onClick?: () => void, className?: string, [key: string]: any }) {
+  return (
+    <RippleSurface as={as} 
+      material={0} 
+      materialStrength={2.5} 
+      borderRadius={0}
+      onClick={onClick}
+      {...props} className={`cursor-pointer px-8 py-3 text-sm tracking-widest font-bold uppercase rounded-none border border-white/20 bg-white/5 hover:bg-white/10 ${className}`}
+    >
+      {children}
+    </RippleSurface>
+  );
+}
+

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

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from '../../utils/cn';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-white/5",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-white/20 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

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

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalQuestionnaireProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalQuestionnaire({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalQuestionnaireProps) {
+  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 || 'Questionnaire Interface'}
+    </div>
+  );
+}
+
+
+

package/src/components/radio-group/optical-radio-group.tsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useMrigSurface } from "@mrigx/react";
+
+export interface OpticalRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  material?: 'glass' | 'crystal' | 'abyss';
+  materialStrength?: number;
+}
+
+export function OpticalRadioGroup({ children, className = "", material = 'glass', materialStrength = 1.0, ...props }: OpticalRadioGroupProps) {
+  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 || 'Radio Group Interface'}
+    </div>
+  );
+}
+
+
+