@revealui/core 0.0.1-pre.0

package/dist/ui/accents/Glass.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const Glass: React.FC = ({
+  children,
+  className = "",
+  style = {},
+  ...rest
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  rest?: Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style">;
+}) => {
+  const glassClasses = [
+    "relative isolate -z-10",
+    "rounded-3xl bg-scrapWhite/5 px-8 py-16",
+    "ring-1 ring-scrapWhite/10",
+    "gap-16 lg:mx-0 lg:flex-row lg:items-center lg:py-20",
+    "xl:max-w-none xl:gap-x-20 xl:px-20",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+
+  return (
+    <div {...rest} className={glassClasses} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default Glass;

package/dist/ui/accents/Parallax.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+const ParallaxComponent: React.FC<{
+  maxWidth?: string;
+  blendMode?: string;
+  zIndex?: number;
+  negativeIndex?: number;
+  className?: string;
+  children?: React.ReactNode;
+}> = ({ maxWidth, blendMode, zIndex, negativeIndex, className, children }) => {
+  const layerCount = 3;
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  const addLayerRef = (index: number) => (el: HTMLDivElement | null) => {
+    if (el && containerRef.current) {
+      const speed = index + 1;
+      const containerHeight = containerRef.current.clientHeight;
+      const containerWidth = containerRef.current.clientWidth;
+      const layerHeight = el.clientHeight;
+      const layerWidth = el.clientWidth;
+      const layerTop = el.offsetTop;
+      const layerLeft = el.offsetLeft;
+      const layerCenterY = layerTop + layerHeight / 2;
+      const layerCenterX = layerLeft + layerWidth / 2;
+      const layerCenterYPercent = (layerCenterY / containerHeight) * 100;
+      const layerCenterXPercent = (layerCenterX / containerWidth) * 100;
+      const layerCenterYOffset = (layerCenterYPercent / 100) * speed;
+      const layerCenterXOffset = (layerCenterXPercent / 100) * speed;
+
+      el.style.transform = `translate3d(-${layerCenterXOffset}%, -${layerCenterYOffset}%, 0)`;
+    }
+  };
+
+  const containerClasses = [
+    "relative overflow-hidden",
+    maxWidth ? `max-w-${maxWidth}` : "",
+    blendMode ? `bg-blend-${blendMode}` : "",
+    "bg-gradient-to-b from-scrapOrange via-scrapRed to-scrapYellow",
+    zIndex ? `z-${zIndex}` : "",
+    negativeIndex ? `-z-${negativeIndex}` : "",
+    className || "",
+  ]
+    .join(" ")
+    .trim();
+
+  const zIndexClasses: Record<number, string> = {
+    0: "z-10",
+    1: "z-20 opacity-70",
+    2: "z-30",
+  };
+
+  const getLayerClasses = (index: number): string => {
+    return [
+      "absolute inset-0",
+      zIndexClasses[index],
+      index === 0 ? className || "" : "",
+    ]
+      .join(" ")
+      .trim();
+  };
+
+  return (
+    <div ref={containerRef} className={containerClasses}>
+      {Array.from({ length: layerCount }, (_, index) => (
+        <div
+          key={index}
+          ref={addLayerRef(index)}
+          className={getLayerClasses(index)}
+          data-speed={index + 1}
+        >
+          {index === 0 && children}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ParallaxComponent;

package/dist/ui/accents/Shadow.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const Shadow = ({ children }: { children: React.ReactNode }) => {
+  const shadowClasses = [
+    "absolute",
+    "top-0",
+    "bottom-0",
+    "w-1/2",
+    "pointer-events-none",
+    "bg-gradient-to-r",
+    "from-scrapBlack",
+    "to-transparent",
+  ];
+
+  return (
+    <div className="bg-scrapBlack relative lg:max-w-7xl xl:max-w-none">
+      <div className="max-w-screen-2xl xl:max-w-none">{children}</div>
+
+      <div className={`${shadowClasses} left-0`} aria-hidden="true" />
+      <div
+        className={`${shadowClasses} "bg-gradient-to-l right-0`}
+        aria-hidden="true"
+      />
+    </div>
+  );
+};
+
+export default Shadow;

package/dist/ui/accents/index.tsx

@@ -0,0 +1,4 @@
+export { default as DiagonalGrid } from "./DiagonalGrid.js";
+export { default as Glass } from "./Glass.js";
+export { default as ParallaxComponent } from "./Parallax.js";
+export { default as Shadow } from "./Shadow.js";

package/dist/ui/accessibility/index.ts

@@ -0,0 +1,168 @@
+/**
+ * Accessibility Utilities
+ * Provides utilities for WCAG 2.1 AA compliance
+ */
+
+/**
+ * Generate ARIA label from text content
+ */
+export function generateAriaLabel(text: string): string {
+  return text.trim().replace(/\s+/g, " ")
+}
+
+/**
+ * Check if color contrast meets WCAG AA standards
+ * Returns true if contrast ratio is at least 4.5:1 for normal text
+ */
+export function checkContrastRatio(
+  foreground: string,
+  background: string
+): boolean {
+  // Simplified contrast check - in production, use a proper color contrast library
+  // This is a placeholder that should be replaced with actual contrast calculation
+  return true // Placeholder
+}
+
+/**
+ * Generate accessible button props
+ */
+export function getAccessibleButtonProps(
+  label: string,
+  options?: {
+    ariaDescribedBy?: string
+    ariaExpanded?: boolean
+    ariaControls?: string
+  }
+) {
+  return {
+    "aria-label": label,
+    "aria-describedby": options?.ariaDescribedBy,
+    "aria-expanded": options?.ariaExpanded,
+    "aria-controls": options?.ariaControls,
+    role: "button",
+    tabIndex: 0,
+  }
+}
+
+/**
+ * Generate accessible link props
+ */
+export function getAccessibleLinkProps(
+  href: string,
+  label: string,
+  options?: {
+    external?: boolean
+    ariaCurrent?: "page" | "step" | "location" | "date" | "time" | boolean
+  }
+) {
+  return {
+    href,
+    "aria-label": label,
+    "aria-current": options?.ariaCurrent,
+    ...(options?.external && {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-describedby": "external-link-description",
+    }),
+  }
+}
+
+/**
+ * Generate accessible form field props
+ */
+export function getAccessibleFieldProps(
+  id: string,
+  label: string,
+  options?: {
+    required?: boolean
+    invalid?: boolean
+    describedBy?: string
+    errorMessage?: string
+  }
+) {
+  return {
+    id,
+    "aria-label": label,
+    "aria-required": options?.required,
+    "aria-invalid": options?.invalid,
+    "aria-describedby": options?.describedBy || (options?.errorMessage ? `${id}-error` : undefined),
+  }
+}
+
+/**
+ * Keyboard navigation helpers
+ */
+export const KeyboardKeys = {
+  Enter: "Enter",
+  Escape: "Escape",
+  Space: " ",
+  Tab: "Tab",
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  Home: "Home",
+  End: "End",
+} as const
+
+/**
+ * Handle keyboard navigation for custom components
+ */
+export function handleKeyboardNavigation(
+  event: React.KeyboardEvent,
+  handlers: {
+    onEnter?: () => void
+    onEscape?: () => void
+    onArrowUp?: () => void
+    onArrowDown?: () => void
+    onArrowLeft?: () => void
+    onArrowRight?: () => void
+    onHome?: () => void
+    onEnd?: () => void
+  }
+) {
+  switch (event.key) {
+    case KeyboardKeys.Enter:
+      handlers.onEnter?.()
+      break
+    case KeyboardKeys.Escape:
+      handlers.onEscape?.()
+      break
+    case KeyboardKeys.ArrowUp:
+      event.preventDefault()
+      handlers.onArrowUp?.()
+      break
+    case KeyboardKeys.ArrowDown:
+      event.preventDefault()
+      handlers.onArrowDown?.()
+      break
+    case KeyboardKeys.ArrowLeft:
+      event.preventDefault()
+      handlers.onArrowLeft?.()
+      break
+    case KeyboardKeys.ArrowRight:
+      event.preventDefault()
+      handlers.onArrowRight?.()
+      break
+    case KeyboardKeys.Home:
+      event.preventDefault()
+      handlers.onHome?.()
+      break
+    case KeyboardKeys.End:
+      event.preventDefault()
+      handlers.onEnd?.()
+      break
+  }
+}
+
+/**
+ * Skip to main content link component props
+ */
+export function getSkipToContentProps(targetId: string = "main-content") {
+  return {
+    href: `#${targetId}`,
+    className: "sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-blue-600 focus:text-white",
+    "aria-label": "Skip to main content",
+  }
+}
+

package/dist/ui/ai/ChatGPTAssistant.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { useChatGPT } from "../hooks/useChatGPT.js";
+
+type Role = "user" | "assistant";
+
+interface Message {
+  role: Role;
+  content: string;
+}
+
+const ChatGPTAssistant: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState<string>("");
+  const {
+    sendMessage,
+    transcript,
+    startVoiceRecognition,
+    stopVoiceRecognition,
+  } = useChatGPT();
+
+  const handleSend = async () => {
+    if (!input.trim()) return;
+    const response: string = await sendMessage(input);
+    setMessages([
+      ...messages,
+      { role: "user", content: input },
+      { role: "assistant", content: response },
+    ]);
+    setInput("");
+  };
+
+  const handleVoiceStart = () => {
+    startVoiceRecognition();
+  };
+
+  const handleVoiceStop = () => {
+    stopVoiceRecognition();
+    if (transcript) {
+      setMessages([...messages, { role: "user", content: transcript }]);
+      setInput(transcript);
+    }
+  };
+
+  useEffect(() => {
+    const scanCodebase = async () => {
+      try {
+        const response = await fetch("/api/scan-codebase");
+        const data: { summary: string } = await response.json();
+        await sendMessage(`Codebase scanned: \n${data.summary}`);
+      } catch (error) {
+        console.error("Error scanning the codebase:", error);
+      }
+    };
+
+    scanCodebase();
+    // Adding sendMessage to dependency array to prevent potential issues
+  }, [sendMessage]);
+
+  return (
+    <div className="flex flex-col h-96 border border-gray-300 rounded-lg p-4 bg-black shadow-md">
+      {/* Chat Messages */}
+      <div className="flex-1 overflow-y-auto space-y-4 p-2 border-b border-gray-200">
+        {messages.map((msg, idx) => (
+          <div
+            key={idx}
+            className={`p-2 rounded-md text-white ${
+              msg.role === "user"
+                ? "bg-blue-500 text-right self-end"
+                : "bg-gray-600 text-left self-start"
+            }`}
+          >
+            {msg.content}
+          </div>
+        ))}
+      </div>
+      {/* Input Area */}
+      <div className="mt-4 flex flex-col space-y-2">
+        <textarea
+          className="w-full p-2 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={input}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setInput(e.target.value)
+          }
+          rows={3}
+          placeholder="Type your message..."
+        />
+        {/* Action Buttons */}
+        <div className="flex space-x-2">
+          <button
+            className="flex-1 bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+            onClick={handleSend}
+          >
+            Send
+          </button>
+          <button
+            className="flex-1 bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors"
+            onClick={handleVoiceStart}
+          >
+            Start Voice
+          </button>
+          <button
+            className="flex-1 bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
+            onClick={handleVoiceStop}
+          >
+            Stop Voice
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatGPTAssistant;

package/dist/ui/ai/index.ts

@@ -0,0 +1,3 @@
+import { default as ChatGPTAssistant } from "./ChatGPTAssistant.js";
+
+export { ChatGPTAssistant };

package/dist/ui/animations/container.ts

@@ -0,0 +1,7 @@
+import { transition } from "./transition.js";
+
+export const headContainerAnimation = {
+  initial: { x: -100, opacity: 0, transition: { ...transition, delay: 0.5 } },
+  animate: { x: 0, opacity: 1, transition: { ...transition, delay: 0 } },
+  exit: { x: -100, opacity: 0, transition: { ...transition, delay: 0 } },
+};

package/dist/ui/animations/content.ts

@@ -0,0 +1,16 @@
+import { transition } from "./transition.js";
+
+export const headContentAnimation = {
+  initial: { y: 100, opacity: 0 },
+  animate: { y: 0, opacity: 1 },
+  transition: {
+    ...transition,
+    type: "spring",
+    damping: 7,
+    stiffness: 30,
+    restDelta: 0.001,
+    duration: 0.6,
+    delay: 0.2,
+    delayChildren: 0.2,
+  },
+};

package/dist/ui/animations/fade.ts

@@ -0,0 +1,16 @@
+import { transition } from "./transition.js";
+
+export const fadeAnimation = {
+  initial: {
+    opacity: 0,
+    transition: { ...transition, delay: 0.5 },
+  },
+  animate: {
+    opacity: 1,
+    transition: { ...transition, delay: 0 },
+  },
+  exit: {
+    opacity: 0,
+    transition: { ...transition, delay: 0 },
+  },
+};

package/dist/ui/animations/index.ts

@@ -0,0 +1,6 @@
+export * from "./container.js";
+export * from "./content.js";
+export * from "./fade.js";
+export * from "./slide.js";
+export * from "./text.js";
+export * from "./transition.js";

package/dist/ui/animations/slide.ts

@@ -0,0 +1,23 @@
+import { transition } from "./transition.js";
+
+export const slideAnimation = (direction: string) => {
+  return {
+    initial: {
+      x: direction === "left" ? -100 : direction === "right" ? 100 : 0,
+      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
+      opacity: 0,
+      transition: { ...transition, delay: 0.5 },
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: { ...transition, delay: 0 },
+    },
+    exit: {
+      x: direction === "left" ? -100 : direction === "right" ? 100 : 0,
+      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
+      transition: { ...transition, delay: 0 },
+    },
+  };
+};

package/dist/ui/animations/text.ts

@@ -0,0 +1,14 @@
+import { transition } from "./transition.js";
+
+export const headTextAnimation = {
+  initial: { x: 100, opacity: 0 },
+  animate: { x: 0, opacity: 1 },
+  transition: {
+    ...transition,
+    type: "spring",
+    damping: 5,
+    stiffness: 40,
+    restDelta: 0.001,
+    duration: 0.3,
+  },
+};

package/dist/ui/animations/transition.ts

@@ -0,0 +1 @@
+export const transition = { type: "spring", duration: 0.8 };

package/dist/ui/audio/AudioTrack.tsx

@@ -0,0 +1,26 @@
+import React, { type HTMLAttributes, type RefObject } from "react";
+
+const AudioTrack: React.FC<
+  {
+    audioRef: RefObject<HTMLAudioElement | null>;
+    audioUrl: string;
+    captionUrl?: string;
+    className?: string;
+  } & HTMLAttributes<HTMLAudioElement>
+> = ({ audioRef, audioUrl, captionUrl, className = "", ...rest }) => {
+  return (
+    <>
+      <audio
+        ref={audioRef}
+        controls
+        className={`border-scrapBlack bg-scrapRed text-scrapBlack mx-auto items-center justify-center border ${className}`}
+        {...rest}
+      >
+        <track kind="captions" src={captionUrl || ""} label="English" default />
+      </audio>
+      <source src={audioUrl} type="audio/mpeg" />
+    </>
+  );
+};
+
+export default AudioTrack;

package/dist/ui/audio/index.tsx

@@ -0,0 +1 @@
+export { default as AudioTrack } from "./AudioTrack.js";

package/dist/ui/backgrounds/Diagonal.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const Diagonal: React.FC = ({ children }: { children?: React.ReactNode }) => {
+  // Ensure the component's width behaves responsively across different screen sizes
+  return (
+    <div className="relative isolate -z-50 mx-auto max-w-full lg:max-w-6xl xl:max-w-none">
+      <DecorativeDiv
+        gradient="from-scrapRed to-scrapOrange"
+        aspect="aspect-[1108/632]"
+        width="w-full lg:w-[59.25rem]" // Ensure width is responsive
+        topPosition="top-4"
+      />
+      {children}
+      <DecorativeDiv
+        gradient="from-scrapGreen to-scrapBlue"
+        aspect="aspect-[1318/752]"
+        width="w-full lg:w-[71.375rem]" // Ensure width is responsive
+        topPosition="-top-16"
+      />
+    </div>
+  );
+};
+
+const DecorativeDiv: React.FC<{
+  gradient: string;
+  aspect: string;
+  width: string;
+  topPosition: string;
+}> = ({ gradient, aspect, width, topPosition }) => (
+  <div
+    className={`aspect-${aspect} gradient-${gradient} w-${width} absolute inset-x-0 ${topPosition} -z-50 flex transform-gpu justify-center blur-3xl`.trim()}
+    aria-hidden="true"
+  >
+    <div
+      className={`bg-gradient-to-r opacity-25 aspect-${aspect} w-${width} gradient-${gradient}`.trim()}
+      style={{
+        // The clipPath may need to be adjusted for different screen sizes.
+        // Consider using media queries or a responsive SVG if the shape needs to change.
+        clipPath:
+          "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
+      }}
+    />
+  </div>
+);
+
+export default Diagonal;

package/dist/ui/backgrounds/GradientConic.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+
+const GradientConic: React.FC<{
+  children?: ReactNode;
+  gradientStops: string;
+  blendMode?: string;
+}> = ({ children, gradientStops, blendMode = "overlay" }) => {
+  const gradientClass = `bg-[conic-gradient(${gradientStops})]`;
+  const blendClass = `bg-blend-${blendMode}`;
+  const shadowClass = "lg:shadow-inner";
+
+  return (
+    <div
+      className={`-z-50 ${gradientClass} ${blendClass} ${shadowClass} size-full`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default GradientConic;

package/dist/ui/backgrounds/GradientConicRev.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from "react";
+
+const GradientConicRev: React.FC<{
+  children?: ReactNode;
+  className?: string;
+  fromColor?: string;
+  viaColor?: string;
+  toColor?: string;
+  blendMode?: string;
+}> = ({
+  children,
+  className = "",
+  fromColor = "from-scrapRed",
+  viaColor = "via-scrapYellow",
+  toColor = "to-scrapOrange",
+  blendMode = "overlay",
+}) => {
+  const baseClasses = [
+    `
+    relative
+    -z-50 
+    bg-gradient-conic
+    ${fromColor} ${viaColor} ${toColor}
+    bg-blend-${blendMode} 
+    shadow-inner 
+    backdrop-blur-md 
+    backdrop-filter
+  `,
+  ]
+    .join(" ")
+    .trim();
+
+  const responsiveClasses = [
+    `
+    xs:max-w-md
+    sm:max-w-lg
+    md:max-w-xl 
+    lg:max-w-6xl
+    xl:max-w-7xl 
+    2xl:max-w-none
+  `,
+  ]
+    .join(" ")
+    .trim();
+
+  const allClasses = `${baseClasses} ${responsiveClasses} ${className}`.trim();
+  return <div className={allClasses}>{children}</div>;
+};
+
+export default GradientConicRev;