@mrigx/ui 0.1.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@mrigx/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/ui.umd.js",
+  "module": "./dist/ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@mrigx/core": "*",
+    "@mrigx/react": "*",
+    "@mrigx/fx": "*",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "lucide-react": "^0.453.0",
+    "framer-motion": "^11.11.9",
+    "cmdk": "^1.0.0",
+    "date-fns": "^4.1.0",
+    "react-day-picker": "^9.2.0",
+    "input-otp": "^1.4.1",
+    "react-resizable-panels": "^2.1.4",
+    "recharts": "^2.13.0",
+    "sonner": "^1.5.0",
+    "embla-carousel-react": "^8.3.0",
+    "class-variance-authority": "^0.7.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "@vitejs/plugin-react": "^4.3.4"
+  }
+}

package/src/blocks/ContactPanel.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useId } from 'react';
+import { injectMrigBlockStyles } from './styles';
+import { OpticalPanel } from '../components/panel/optical-panel';
+import { OpticalInput } from '../components/input/optical-input';
+import { OpticalButton } from '../components/button/optical-button';
+import { Textarea as OpticalTextarea } from '../components/textarea/optical-textarea';
+
+export interface ContactData {
+  name: string;
+  email: string;
+  message: string;
+}
+
+export interface ContactPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+  title?: string;
+  description?: string;
+  isSubmitting?: boolean;
+  onSubmit: (data: ContactData) => void;
+}
+
+export function ContactPanel({
+  title = "Get in touch",
+  description = "We'd love to hear from you. Send us a message.",
+  isSubmitting = false,
+  onSubmit,
+  className = "",
+  ...props
+}: ContactPanelProps) {
+  injectMrigBlockStyles();
+  
+  const baseId = useId();
+  
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit({ name, email, message });
+  };
+
+  return (
+    <div className={`mrig-contact-container ${className}`} {...props}>
+      <OpticalPanel opticalStrength="default">
+        <div className="mrig-contact-header">
+          <h2 className="mrig-contact-title">{title}</h2>
+          <p className="mrig-contact-desc">{description}</p>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="mrig-contact-form">
+          <div className="mrig-contact-field">
+            <label htmlFor={`${baseId}-name`} className="mrig-contact-label">Name</label>
+            <OpticalInput 
+              id={`${baseId}-name`}
+              type="text" 
+              required 
+              value={name}
+              onChange={e => setName(e.target.value)}
+              disabled={isSubmitting}
+              autoComplete="name"
+            />
+          </div>
+          
+          <div className="mrig-contact-field">
+            <label htmlFor={`${baseId}-email`} className="mrig-contact-label">Email</label>
+            <OpticalInput 
+              id={`${baseId}-email`}
+              type="email" 
+              required 
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              disabled={isSubmitting}
+              autoComplete="email"
+            />
+          </div>
+          
+          <div className="mrig-contact-field">
+            <label htmlFor={`${baseId}-message`} className="mrig-contact-label">Message</label>
+            <OpticalTextarea
+              id={`${baseId}-message`}
+              required 
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+          
+          <OpticalButton 
+            type="submit" 
+            disabled={isSubmitting}
+            style={{ marginTop: '1rem', width: '100%' }}
+          >
+            {isSubmitting ? 'Sending...' : 'Send Message'}
+          </OpticalButton>
+        </form>
+      </OpticalPanel>
+    </div>
+  );
+}

package/src/blocks/FeatureGrid.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { injectMrigBlockStyles } from './styles';
+import { OpticalPanel } from '../components/panel/optical-panel';
+
+export interface FeatureItem {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface FeatureGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+}
+
+export function FeatureGrid({
+  features,
+  className = "",
+  ...props
+}: FeatureGridProps) {
+  injectMrigBlockStyles();
+
+  return (
+    <section className={`mrig-feature-grid-container ${className}`} {...props}>
+      <div className="mrig-feature-grid">
+        {features.map((feature) => (
+          <OpticalPanel 
+            key={feature.id} 
+            className="mrig-feature-item" 
+            opticalStrength="soft"
+          >
+            <h3 className="mrig-feature-item-title">{feature.title}</h3>
+            <p className="mrig-feature-item-desc">{feature.description}</p>
+          </OpticalPanel>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/blocks/OpticalCTA.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { injectMrigBlockStyles } from './styles';
+import { OpticalPanel } from '../components/panel/optical-panel';
+
+export interface OpticalCTAProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  primaryAction: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+}
+
+export function OpticalCTA({
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  className = "",
+  ...props
+}: OpticalCTAProps) {
+  injectMrigBlockStyles();
+
+  return (
+    <OpticalPanel className={`mrig-cta-panel ${className}`} opticalStrength="strong" {...props}>
+      <h2 className="mrig-cta-title">{title}</h2>
+      {description && <p className="mrig-cta-desc">{description}</p>}
+      
+      <div className="mrig-cta-actions">
+        {primaryAction}
+        {secondaryAction}
+      </div>
+    </OpticalPanel>
+  );
+}

package/src/blocks/OpticalHero.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { injectMrigBlockStyles } from './styles';
+
+export interface OpticalHeroProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  eyebrow?: string;
+  title: React.ReactNode;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  description?: React.ReactNode;
+  primaryAction?: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+  visualArea?: React.ReactNode;
+}
+
+export function OpticalHero({
+  eyebrow,
+  title,
+  headingLevel = 1,
+  description,
+  primaryAction,
+  secondaryAction,
+  visualArea,
+  className = "",
+  ...props
+}: OpticalHeroProps) {
+  injectMrigBlockStyles();
+
+  const HeadingTag = `h${headingLevel}` as React.ElementType;
+
+  return (
+    <section className={`mrig-hero ${className}`} {...props}>
+      <div className="mrig-hero-content">
+        {eyebrow && <p className="mrig-hero-eyebrow">{eyebrow}</p>}
+        <HeadingTag className="mrig-hero-title">{title}</HeadingTag>
+        {description && <p className="mrig-hero-description">{description}</p>}
+        
+        {(primaryAction || secondaryAction) && (
+          <div className="mrig-hero-actions">
+            {primaryAction}
+            {secondaryAction}
+          </div>
+        )}
+      </div>
+      
+      {visualArea && (
+        <div className="mrig-hero-visual">
+          {visualArea}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/blocks/styles.ts

@@ -0,0 +1,175 @@
+const BLOCK_STYLES = `
+/* OpticalHero */
+.mrig-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  padding: 4rem 1.5rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+@media (min-width: 768px) {
+  .mrig-hero {
+    flex-direction: row;
+    align-items: center;
+    padding: 6rem 2rem;
+  }
+}
+.mrig-hero-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.mrig-hero-visual {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.mrig-hero-eyebrow {
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+}
+.mrig-hero-title {
+  font-size: 3rem;
+  font-weight: 300;
+  line-height: 1.1;
+  margin: 0;
+  color: white;
+}
+@media (min-width: 768px) {
+  .mrig-hero-title {
+    font-size: 4rem;
+  }
+}
+.mrig-hero-description {
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 600px;
+}
+.mrig-hero-actions {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+/* FeatureGrid */
+.mrig-feature-grid-container {
+  padding: 4rem 1.5rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.mrig-feature-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+@media (min-width: 640px) {
+  .mrig-feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .mrig-feature-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.mrig-feature-item-title {
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: white;
+  margin: 0 0 1rem 0;
+}
+.mrig-feature-item-desc {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ContactPanel */
+.mrig-contact-container {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.mrig-contact-header {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+.mrig-contact-title {
+  font-size: 2rem;
+  font-weight: 300;
+  color: white;
+  margin: 0 0 0.5rem 0;
+}
+.mrig-contact-desc {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+}
+.mrig-contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.mrig-contact-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mrig-contact-label {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* OpticalCTA */
+.mrig-cta-panel {
+  text-align: center;
+  padding: 4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+.mrig-cta-title {
+  font-size: 2.5rem;
+  font-weight: 300;
+  color: white;
+  margin: 0;
+}
+.mrig-cta-desc {
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+  max-width: 600px;
+}
+.mrig-cta-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+`;
+
+let injected = false;
+export function injectMrigBlockStyles() {
+  if (typeof window === 'undefined' || injected) return;
+  const style = document.createElement('style');
+  style.id = 'mrig-block-styles';
+  style.innerHTML = BLOCK_STYLES;
+  document.head.appendChild(style);
+  injected = true;
+}

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

@@ -0,0 +1,199 @@
+import React, { createContext, useContext, forwardRef, useState } from 'react';
+import { RippleSurface } from '@mrigx/fx';
+import { useMrigInteraction } from '@mrigx/react';
+
+/* --- CONTEXT --- */
+type AccordionType = 'single' | 'multiple';
+
+interface AccordionContextValue {
+  type: AccordionType;
+  value: string | string[];
+  onItemOpen: (value: string) => void;
+  onItemClose: (value: string) => void;
+  collapsible?: boolean;
+}
+
+const AccordionContext = createContext<AccordionContextValue | undefined>(undefined);
+const AccordionItemContext = createContext<{ value: string; disabled?: boolean } | undefined>(undefined);
+
+/* --- ACCORDION ROOT --- */
+export interface OpticalAccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  type?: AccordionType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: any) => void;
+  collapsible?: boolean;
+}
+
+export const OpticalAccordion = forwardRef<HTMLDivElement, OpticalAccordionProps>(({
+  className = "",
+  type = 'single',
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  collapsible = false,
+  ...props
+}, ref) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState<string | string[]>(
+    defaultValue !== undefined ? defaultValue : (type === 'multiple' ? [] : "")
+  );
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const handleItemOpen = (itemValue: string) => {
+    if (type === 'single') {
+      const newValue = itemValue;
+      if (controlledValue === undefined) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    } else {
+      const prev = (Array.isArray(value) ? value : []) as string[];
+      const newValue = [...prev, itemValue];
+      if (controlledValue === undefined) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    }
+  };
+
+  const handleItemClose = (itemValue: string) => {
+    if (type === 'single') {
+      if (collapsible) {
+        if (controlledValue === undefined) setUncontrolledValue("");
+        onValueChange?.("");
+      }
+    } else {
+      const prev = (Array.isArray(value) ? value : []) as string[];
+      const newValue = prev.filter(v => v !== itemValue);
+      if (controlledValue === undefined) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    }
+  };
+
+  return (
+    <AccordionContext.Provider value={{ type, value, onItemOpen: handleItemOpen, onItemClose: handleItemClose, collapsible }}>
+      <div ref={ref} className={`${className}`} {...props} />
+    </AccordionContext.Provider>
+  );
+});
+OpticalAccordion.displayName = "OpticalAccordion";
+
+/* --- ACCORDION ITEM --- */
+export interface OpticalAccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  disabled?: boolean;
+  material?: string;
+  materialStrength?: number;
+}
+
+export const OpticalAccordionItem = forwardRef<HTMLDivElement, OpticalAccordionItemProps>(({
+  className = "",
+  value,
+  disabled = false,
+  ...props
+}, ref) => {
+  return (
+    <AccordionItemContext.Provider value={{ value, disabled }}>
+      <div 
+        ref={ref}
+        className={`border-b border-white/10 ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className}`}
+        {...props}
+      />
+    </AccordionItemContext.Provider>
+  );
+});
+OpticalAccordionItem.displayName = "OpticalAccordionItem";
+
+/* --- ACCORDION TRIGGER --- */
+export const OpticalAccordionTrigger = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({
+  className = "",
+  children,
+  onClick,
+  ...props
+}, ref) => {
+  const ctx = useContext(AccordionContext);
+  const itemCtx = useContext(AccordionItemContext);
+
+  if (!ctx || !itemCtx) {
+    throw new Error("OpticalAccordionTrigger must be used within an OpticalAccordionItem");
+  }
+
+  const isOpen = ctx.type === 'single' 
+    ? ctx.value === itemCtx.value 
+    : (Array.isArray(ctx.value) && ctx.value.includes(itemCtx.value));
+
+  const { pulseCenter } = useMrigInteraction();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (itemCtx.disabled) return;
+    
+    pulseCenter(e.currentTarget, 0.4);
+
+    if (isOpen) {
+      ctx.onItemClose(itemCtx.value);
+    } else {
+      ctx.onItemOpen(itemCtx.value);
+    }
+    onClick?.(e);
+  };
+
+  return (
+    <div className="flex">
+      <RippleSurface
+        as="button"
+        ref={ref as any}
+        material="liquid"
+        materialStrength={0.5}
+        borderRadius={8}
+        type="button"
+        aria-expanded={isOpen}
+        disabled={itemCtx.disabled}
+        onClick={handleClick}
+        className={`flex flex-1 items-center justify-between py-4 text-sm font-medium tracking-wide text-white/90 transition-all hover:text-white ${className}`}
+        {...props}
+      >
+        {children}
+        <svg
+          className={`h-4 w-4 shrink-0 text-white/50 transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${isOpen ? 'rotate-180 text-white/90' : ''}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </RippleSurface>
+    </div>
+  );
+});
+OpticalAccordionTrigger.displayName = "OpticalAccordionTrigger";
+
+/* --- ACCORDION CONTENT --- */
+export const OpticalAccordionContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({
+  className = "",
+  children,
+  ...props
+}, ref) => {
+  const ctx = useContext(AccordionContext);
+  const itemCtx = useContext(AccordionItemContext);
+
+  if (!ctx || !itemCtx) {
+    throw new Error("OpticalAccordionContent must be used within an OpticalAccordionItem");
+  }
+
+  const isOpen = ctx.type === 'single' 
+    ? ctx.value === itemCtx.value 
+    : (Array.isArray(ctx.value) && ctx.value.includes(itemCtx.value));
+
+  return (
+    <div
+      className={`grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+        isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+      }`}
+    >
+      <div className="overflow-hidden">
+        <div ref={ref} className={`pb-4 pt-0 text-sm leading-relaxed text-white/60 ${className}`} {...props}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+OpticalAccordionContent.displayName = "OpticalAccordionContent";
+