@mrigx/ui 0.1.0

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

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from '../../utils/cn';
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-white/20 data-[state=on]:text-white data-[state=on]:shadow-[inset_0_1px_2px_rgba(255,255,255,0.2)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent text-white/60",
+        outline:
+          "border border-white/10 bg-white/[0.02] text-white/60 hover:bg-white/10 shadow-sm",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

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

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from '../../utils/cn';
+import { toggleVariants } from '../toggle/optical-toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

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

@@ -0,0 +1,33 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from '../../utils/cn';
+import { GlassSurface } from '@mrigx/fx';
+
+const OpticalTooltipProvider = TooltipPrimitive.Provider
+
+const OpticalTooltip = TooltipPrimitive.Root
+
+const OpticalTooltipTrigger = TooltipPrimitive.Trigger
+
+const OpticalTooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { material?: string; materialStrength?: number }
+>(({ className, sideOffset = 4, material = "crystal", materialStrength = 0.5, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border border-white/10 px-3 py-1.5 text-xs text-white shadow-2xl animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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={6} className="absolute inset-0 -z-10" />
+      {props.children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+))
+OpticalTooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { OpticalTooltip, OpticalTooltipTrigger, OpticalTooltipContent, OpticalTooltipProvider }

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

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+
+// Typography System
+// Defines the strict optical hierarchy for the framework.
+
+interface TextProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  children: ReactNode;
+  className?: string;
+}
+
+export const Text = {
+  Display: forwardRef<HTMLElement, TextProps>(({ as: Component = 'h1', className = "", children, ...props }, ref) => (
+    <Component ref={ref as any} className={`text-[3.5rem] md:text-[6.5rem] leading-[1.0] font-light tracking-tighter text-white/95 ${className}`} {...props}>
+      {children}
+    </Component>
+  )),
+  
+  Heading: forwardRef<HTMLElement, TextProps>(({ as: Component = 'h2', className = "", children, ...props }, ref) => (
+    <Component ref={ref as any} className={`text-[2rem] md:text-[3.5rem] leading-[1.1] font-light tracking-tight text-white/90 ${className}`} {...props}>
+      {children}
+    </Component>
+  )),
+  
+  Title: forwardRef<HTMLElement, TextProps>(({ as: Component = 'h3', className = "", children, ...props }, ref) => (
+    <Component ref={ref as any} className={`text-xl md:text-3xl leading-snug font-light tracking-tight text-white/80 ${className}`} {...props}>
+      {children}
+    </Component>
+  )),
+  
+  Body: forwardRef<HTMLElement, TextProps>(({ as: Component = 'p', className = "", children, ...props }, ref) => (
+    <Component ref={ref as any} className={`text-lg md:text-xl font-normal leading-relaxed text-white/60 ${className}`} {...props}>
+      {children}
+    </Component>
+  )),
+  
+  Metadata: forwardRef<HTMLElement, TextProps>(({ as: Component = 'span', className = "", children, ...props }, ref) => (
+    <Component ref={ref as any} className={`text-[10px] md:text-xs font-semibold uppercase tracking-[0.25em] text-white/40 ${className}`} {...props}>
+      {children}
+    </Component>
+  )),
+};
+
+Text.Display.displayName = "Text.Display";
+Text.Heading.displayName = "Text.Heading";
+Text.Title.displayName = "Text.Title";
+Text.Body.displayName = "Text.Body";
+Text.Metadata.displayName = "Text.Metadata";

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.ts

@@ -0,0 +1,88 @@
+export * from './blocks/ContactPanel';
+export * from './blocks/FeatureGrid';
+export * from './blocks/OpticalCTA';
+export * from './blocks/OpticalHero';
+export * from './blocks/styles';
+export * from './components/ambient-light';
+export * from './components/glass-card';
+export * from './components/prism-button';
+export * from './components/stained-glass-card';
+export * from './components/accordion/optical-accordion';
+export * from './components/alert/optical-alert';
+export * from './components/alert-dialog/optical-alert-dialog';
+export * from './components/aspect-ratio/optical-aspect-ratio';
+export * from './components/attachment/optical-attachment';
+export * from './components/avatar/optical-avatar';
+export * from './components/badge/optical-badge';
+export * from './components/breadcrumb/optical-breadcrumb';
+export * from './components/bubble/optical-bubble';
+export * from './components/button/optical-button';
+export * from './components/button-group/optical-button-group';
+export * from './components/calendar/optical-calendar';
+export * from './components/card/optical-card';
+export * from './components/carousel/optical-carousel';
+export * from './components/chart/optical-chart';
+export * from './components/checkbox/optical-checkbox';
+export * from './components/collapsible/optical-collapsible';
+export * from './components/combobox/optical-combobox';
+export * from './components/command/optical-command';
+export * from './components/context-menu/optical-context-menu';
+export * from './components/cursor/optical-cursor';
+export * from './components/data-table/optical-data-table';
+export * from './components/date-picker/optical-date-picker';
+export * from './components/dialog/optical-dialog';
+export * from './components/direction/optical-direction';
+export * from './components/drawer/optical-drawer';
+export * from './components/dropdown-menu/optical-dropdown-menu';
+export * from './components/empty/optical-empty';
+export * from './components/field/optical-field';
+export * from './components/hover-card/optical-hover-card';
+export * from './components/icon-button/optical-icon-button';
+export * from './components/input/optical-input';
+export * from './components/input-group/optical-input-group';
+export * from './components/input-otp/optical-input-otp';
+export * from './components/item/optical-item';
+export * from './components/kbd/optical-kbd';
+export * from './components/label/optical-label';
+export * from './components/marker/optical-marker';
+export * from './components/menubar/optical-menubar';
+export * from './components/message/optical-message';
+export * from './components/message-scroller/optical-message-scroller';
+export * from './components/native-select/optical-native-select';
+export * from './components/navigation-menu/optical-navigation-menu';
+export * from './components/pagination/optical-pagination';
+export * from './components/panel/optical-panel';
+export * from './components/popover/optical-popover';
+export * from './components/progress/optical-progress';
+export * from './components/questionnaire/optical-questionnaire';
+export * from './components/radio-group/optical-radio-group';
+export * from './components/resizable/optical-resizable';
+export * from './components/scroll-area/optical-scroll-area';
+export * from './components/select/optical-select';
+export * from './components/separator/optical-separator';
+export * from './components/sheet/optical-sheet';
+export * from './components/sidebar/optical-sidebar';
+export * from './components/skeleton/optical-skeleton';
+export * from './components/slider/optical-slider';
+export * from './components/sonner/optical-toast';
+export * from './components/spinner/optical-spinner';
+export * from './components/switch/optical-switch';
+export * from './components/table/optical-table';
+export * from './components/tabs/optical-tabs';
+export * from './components/text/liquid-tension-text';
+export * from './components/text/optical-tension-text';
+export * from './components/text/optical-text';
+export * from './components/text/prismatic-selection';
+export * from './components/textarea/optical-textarea';
+export * from './components/theme-toggle/optical-theme-toggle';
+export * from './components/toast/optical-toast';
+export * from './components/toggle/optical-toggle';
+export * from './components/toggle-group/optical-toggle-group';
+export * from './components/tooltip/optical-tooltip';
+export * from './components/typography/optical-typography';
+export * from './templates/ContactPageTemplate';
+export * from './templates/LandingPageTemplate';
+export * from './templates/ProductPageTemplate';
+export * from './templates/styles';
+export * from './utils/button-variants';
+export * from './utils/cn';

package/src/templates/ContactPageTemplate.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { injectMrigTemplateStyles } from './styles';
+import { OpticalHero } from '../blocks/OpticalHero';
+import { ContactPanel, type ContactData } from '../blocks/ContactPanel';
+import { OpticalCTA, type OpticalCTAProps } from '../blocks/OpticalCTA';
+
+export interface ContactPageTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+  hero: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+  };
+  contactForm: {
+    title?: string;
+    description?: string;
+    isSubmitting?: boolean;
+    onSubmit: (data: ContactData) => void;
+  };
+  cta?: Omit<OpticalCTAProps, 'className' | 'style'>;
+}
+
+export function ContactPageTemplate({
+  hero,
+  contactForm,
+  cta,
+  className = "",
+  ...props
+}: ContactPageTemplateProps) {
+  injectMrigTemplateStyles();
+
+  return (
+    <div className={`mrig-template ${className}`} {...props}>
+      <OpticalHero 
+        title={hero.title}
+        description={hero.description}
+      />
+      <div style={{ display: 'flex', justifyContent: 'center', width: '100%', padding: '0 1.5rem' }}>
+        <ContactPanel {...contactForm} style={{ width: '100%' }} />
+      </div>
+      {cta && <OpticalCTA {...cta} />}
+    </div>
+  );
+}

package/src/templates/LandingPageTemplate.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { injectMrigTemplateStyles } from './styles';
+import { OpticalHero, type OpticalHeroProps } from '../blocks/OpticalHero';
+import { FeatureGrid, type FeatureItem } from '../blocks/FeatureGrid';
+import { OpticalCTA, type OpticalCTAProps } from '../blocks/OpticalCTA';
+
+export interface LandingPageTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+  hero: Omit<OpticalHeroProps, 'className' | 'style'>;
+  features: FeatureItem[];
+  cta: Omit<OpticalCTAProps, 'className' | 'style'>;
+}
+
+export function LandingPageTemplate({
+  hero,
+  features,
+  cta,
+  className = "",
+  ...props
+}: LandingPageTemplateProps) {
+  injectMrigTemplateStyles();
+
+  return (
+    <div className={`mrig-template ${className}`} {...props}>
+      <OpticalHero {...hero} />
+      {features && features.length > 0 && <FeatureGrid features={features} />}
+      <OpticalCTA {...cta} />
+    </div>
+  );
+}

package/src/templates/ProductPageTemplate.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { injectMrigTemplateStyles } from './styles';
+import { OpticalHero } from '../blocks/OpticalHero';
+import { FeatureGrid, type FeatureItem } from '../blocks/FeatureGrid';
+import { OpticalCTA, type OpticalCTAProps } from '../blocks/OpticalCTA';
+
+export interface ProductPageTemplateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  productName: string;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  visual?: React.ReactNode;
+  primaryAction?: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+  features: FeatureItem[];
+  cta: Omit<OpticalCTAProps, 'className' | 'style'>;
+}
+
+export function ProductPageTemplate({
+  productName,
+  title,
+  description,
+  visual,
+  primaryAction,
+  secondaryAction,
+  features,
+  cta,
+  className = "",
+  ...props
+}: ProductPageTemplateProps) {
+  injectMrigTemplateStyles();
+
+  return (
+    <div className={`mrig-template ${className}`} {...props}>
+      <OpticalHero 
+        eyebrow={productName}
+        title={title}
+        description={description}
+        visualArea={visual}
+        primaryAction={primaryAction}
+        secondaryAction={secondaryAction}
+      />
+      {features && features.length > 0 && <FeatureGrid features={features} />}
+      <OpticalCTA {...cta} />
+    </div>
+  );
+}

package/src/templates/styles.ts

@@ -0,0 +1,23 @@
+const TEMPLATE_STYLES = `
+.mrig-template {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .mrig-template {
+    gap: 8rem;
+  }
+}
+`;
+
+let injected = false;
+export function injectMrigTemplateStyles() {
+  if (typeof window === 'undefined' || injected) return;
+  const style = document.createElement('style');
+  style.id = 'mrig-template-styles';
+  style.innerHTML = TEMPLATE_STYLES;
+  document.head.appendChild(style);
+  injected = true;
+}

package/src/utils/button-variants.ts

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority';
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+import url from 'url';
+
+const dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  publicDir: false,
+  plugins: [
+    react(),
+    dts({ 
+      include: ['src/**/*'], 
+      outDir: 'dist', 
+      insertTypesEntry: true, 
+      tsconfigPath: './tsconfig.json',
+      rollupTypes: true
+    })
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(dirname, 'src/index.ts'),
+      name: 'MrigUi',
+      fileName: (format) => 'ui.' + format + '.js'
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'framer-motion', '@mrigx/core', '@mrigx/react', '@mrigx/fx'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM',
+          '@mrigx/core': 'MrigCore',
+          '@mrigx/react': 'MrigReact',
+          '@mrigx/fx': 'MrigFx'
+        }
+      }
+    }
+  }
+});