@revealui/core 0.0.1-pre.1 → 0.0.1-pre.2

package/dist/ui/accents/Glass.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,168 +0,0 @@
-/**
- * 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

@@ -1,113 +0,0 @@
-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

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

package/dist/ui/animations/container.ts

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/dist/ui/audio/AudioTrack.tsx

@@ -1,26 +0,0 @@
-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

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

package/dist/ui/backgrounds/Diagonal.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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;