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

package/dist/ui/backgrounds/GradientGlass.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-const GradientGlass: React.FC<{
-  children?: React.ReactNode;
-  indexClass?: number;
-  className?: string;
-  id: string;
-}> = ({ children, indexClass, className = "", id }) => {
-  // Base classes for the glass effect
-  const baseClasses =
-    "absolute inset-0 -z-50 border border-scrapBlack bg-scrapWhite/10 shadow-lg backdrop-blur-md backdrop-filter";
-
-  // Responsive classes for different breakpoints
-  const mdClasses = "md:max-w-6xl";
-  const lgClasses = "lg:max-w-7xl";
-  const xlClasses = "xl:max-w-none";
-
-  // Combine all classes
-  const allClasses = `${baseClasses} ${mdClasses} ${lgClasses} ${xlClasses} ${className}`;
-
-  return (
-    <div id={id} className={allClasses} style={{ zIndex: indexClass }}>
-      {children}
-    </div>
-  );
-};
-
-export default GradientGlass;

package/dist/ui/backgrounds/GradientRadial.tsx

@@ -1,37 +0,0 @@
-import React, { ReactNode } from "react";
-
-const GradientRadial: React.FC<{
-  children?: ReactNode;
-  position?: string;
-  size?: string;
-  gradientStops?: string;
-  responsivePositions?: Record<string, string>;
-}> = ({
-  children,
-  position = "center",
-  size = "ellipse",
-  gradientStops = "",
-  responsivePositions = {},
-}) => {
-  const responsiveStyles = Object.entries(responsivePositions)
-    .map(
-      ([breakpoint, position]) =>
-        // eslint-disable-next-line prettier/prettier
-        `${breakpoint}:bg-[radial-gradient(${size}_at_${position},_${gradientStops})]`,
-    )
-    .filter(Boolean)
-    .join(" ")
-    .trim();
-
-  const baseGradientClass = `bg-[radial-gradient(${size}_at_${position},_${gradientStops})]`;
-
-  return (
-    <div
-      className={`-z-50 ${baseGradientClass} ${responsiveStyles} bg-blend-overlay`}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default GradientRadial;

package/dist/ui/backgrounds/GradientRadialLeft.tsx

@@ -1,33 +0,0 @@
-import React, { ReactNode, useMemo } from "react";
-
-const GradientRadialLeft: React.FC = ({
-  children,
-  className = "",
-  gradientStops = "var(--tw-gradient-stops)",
-  blendMode = "overlay",
-}: {
-  children?: ReactNode;
-  className?: string;
-  gradientStops?: string;
-  blendMode?: string;
-}) => {
-  const gradientCss = useMemo(() => {
-    return `radial-gradient(ellipse at left, ${gradientStops})`.trim();
-  }, [gradientStops]);
-
-  const gradientClass = useMemo(() => {
-    return `bg-[${gradientCss}] bg-blend-${blendMode}`.trim();
-  }, [gradientCss, blendMode]);
-
-  const allClasses = useMemo(() => {
-    return `-z-50 shadow-lg ${gradientClass} ${className}`.trim();
-  }, [className, gradientClass]);
-
-  return (
-    <div className={allClasses} aria-hidden="true">
-      {children}
-    </div>
-  );
-};
-
-export default GradientRadialLeft;

package/dist/ui/backgrounds/GradientToBottom.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-
-const indexClasses: Record<number, string> = {
-  0: "z-0",
-  10: "z-10",
-  20: "z-20",
-  30: "z-30",
-  40: "z-40",
-  50: "z-50",
-};
-
-const negativeIndexClasses: Record<number, string> = {
-  50: "-z-50",
-  40: "-z-40",
-  30: "-z-30",
-  20: "-z-20",
-  10: "-z-10",
-};
-
-const GradientToBottom: React.FC<{
-  children?: React.ReactNode;
-  maxWidth?: string;
-  blendMode?: string;
-  zIndexClasses?: number;
-  negativeIndex?: number;
-  className?: string;
-}> = ({
-  children,
-  maxWidth = "none",
-  blendMode = "normal",
-  zIndexClasses,
-  negativeIndex,
-  className = "",
-}) => {
-  const containerClasses = [
-    // eslint-disable-next-line prettier/prettier
-    `absolute inset-0 max-w-${maxWidth} bg-blend-${blendMode} bg-gradient-to-b from-scrapOrange via-scrapRed to-scrapYellow`,
-  ]
-    .join(" ")
-    .trim();
-
-  const allIndexClasses = [
-    `${zIndexClasses != null ? indexClasses[zIndexClasses] : ""}
-    ${zIndexClasses != null ? negativeIndexClasses[zIndexClasses] : ""}
-    ${negativeIndex != null ? negativeIndexClasses[negativeIndex] : ""}`,
-  ]
-    .join(" ")
-    .trim();
-
-  return (
-    <div
-      className={`${containerClasses} ${allIndexClasses} ${className}`.trim()}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default GradientToBottom;

package/dist/ui/backgrounds/GradientToTop.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-
-const indexClasses: Record<number, string> = {
-  0: "z-0",
-  10: "z-10",
-  20: "z-20",
-  30: "z-30",
-  40: "z-40",
-  50: "z-50",
-};
-
-const negativeIndexClasses: Record<number, string> = {
-  50: "-z-50",
-  40: "-z-40",
-  30: "-z-30",
-  20: "-z-20",
-  10: "-z-10",
-};
-
-const GradientToTop: React.FC<{
-  children?: React.ReactNode;
-  maxWidth?: string;
-  blendMode?: string;
-  zIndexClasses?: number;
-  negativeIndex?: number;
-  className?: string;
-}> = ({
-  children,
-  maxWidth = "none",
-  blendMode = "normal",
-  zIndexClasses,
-  negativeIndex,
-  className = "",
-}) => {
-  const containerClasses = [
-    // eslint-disable-next-line prettier/prettier
-    `absolute inset-0 max-w-${maxWidth} bg-blend-${blendMode} bg-gradient-to-t from-scrapOrange via-scrapRed to-scrapYellow`,
-  ]
-    .filter(Boolean)
-    .join(" ")
-    .trim();
-
-  const allIndexClasses = [
-    `${zIndexClasses != null ? indexClasses[zIndexClasses] : ""}
-    ${zIndexClasses != null ? negativeIndexClasses[zIndexClasses] : ""}
-    ${negativeIndex != null ? negativeIndexClasses[negativeIndex] : ""}`,
-  ]
-    .join(" ")
-    .trim();
-
-  return (
-    <div
-      className={`${containerClasses} ${allIndexClasses} ${className}`.trim()}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default GradientToTop;

package/dist/ui/backgrounds/Solid.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import { Container } from "../shells";
-
-// Define a type for the color classes
-const colorClasses: Record<string, string> = {
-  black: "bg-scrapBlack",
-  orange: "bg-scrapOrange",
-  red: "bg-scrapRed",
-  blue: "bg-scrapBlue",
-  green: "bg-scrapGreen",
-  yellow: "bg-scrapYellow",
-  transparent: "bg-transparent",
-};
-
-const Solid: React.FC<{
-  color?: string;
-  darkColor?: string;
-  opacity?: number;
-  negativeIndex?: number;
-  className?: string;
-  role?: string;
-  ariaLabel?: string;
-  children?: React.ReactNode;
-}> = ({
-  color = "",
-  darkColor = "",
-  opacity,
-  negativeIndex,
-  className = "",
-  role = "presentation",
-  ariaLabel = "",
-}) => {
-  // Get the corresponding TailwindCSS class for the provided color
-  const colorClass = colorClasses[color];
-  const darkColorClass = colorClasses[darkColor];
-  const negativeIndexClass = negativeIndex ? String(`-z-${negativeIndex}`) : "";
-  const opacityClass = opacity ? `opacity-${opacity}` : "";
-  const combinedClasses = `${negativeIndexClass} ${colorClass} ${darkColorClass} ${opacityClass} ${className}`;
-
-  return (
-    <Container
-      className={`absolute inset-0 ${combinedClasses}`}
-      role={role}
-      aria-label={ariaLabel}
-      aria-hidden={!ariaLabel}
-    />
-  );
-};
-
-export default Solid;

package/dist/ui/backgrounds/Straight.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-
-const Straight: React.FC<{
-  children?: React.ReactNode;
-  fromColor: string;
-  toColor: string;
-  ringColor: string;
-  lgRingColor: string;
-  skewAngle?: number;
-  shadowColor?: string;
-}> = ({
-  children,
-  fromColor,
-  toColor,
-  ringColor,
-  lgRingColor,
-  skewAngle = 0,
-  shadowColor = "transparent",
-}) => {
-  const skewClasses = `
-    absolute 
-    inset-y-0 
-    right-1/3 
-    -z-50 
-    w-full 
-    origin-top-right
-    skew-x-${skewAngle} 
-    shadow-xl 
-    shadow-${shadowColor} 
-    ring-1 
-    ring-${ringColor} 
-    lg:ring-${lgRingColor}
-  `;
-  const gradientClasses = `
-    relative 
-    isolate 
-    -z-50 
-    max-w-xl 
-    bg-gradient-to-b 
-    from-${fromColor} 
-    to-${toColor}
-    md:max-w-6xl 
-    lg:max-w-7xl 
-    xl:max-w-none
-  `;
-
-  return (
-    <div className={gradientClasses}>
-      <div className={skewClasses} aria-hidden="true" />
-      {children}
-    </div>
-  );
-};
-
-export default Straight;

package/dist/ui/backgrounds/TopRight.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-
-const TopRight: React.FC<{
-  skewDeg?: number;
-  opacity?: number;
-}> = ({ skewDeg = 25, opacity = 60 }) => {
-  return (
-    <div
-      className={`skew-x-${String(skewDeg)} bg-scrapBlack/${String(opacity)} shadow-scrapOrange/20 ring-scrapOrange absolute inset-y-0 right-3/4 -z-50 w-full origin-top-right shadow-2xl ring-1 lg:right-1/4`}
-      aria-hidden="true"
-    />
-  );
-};
-
-export default TopRight;

package/dist/ui/backgrounds/Wrapper.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { Container } from "../shells";
-
-const BackgroundWrapper = React.forwardRef<
-  HTMLDivElement,
-  {
-    backgrounds: React.ReactNode[];
-    children: React.ReactNode;
-  } & React.HTMLAttributes<HTMLDivElement>
->(({ backgrounds, children }, ref) => {
-  // Render the backgrounds
-  const renderBackgrounds = () => {
-    return backgrounds.map((Background, index) => {
-      return (
-        <Container key={index} className="absolute left-0 top-0 size-full">
-          {Background}
-        </Container>
-      );
-    });
-  };
-  const ComponentBackground = renderBackgrounds();
-  return (
-    <Container ref={ref} className="relative w-full overflow-hidden">
-      {ComponentBackground}
-      <Container className="relative z-50 w-full">{children}</Container>
-    </Container>
-  );
-});
-
-// Manually assign a display name to the component
-BackgroundWrapper.displayName = "BackgroundWrapper";
-
-export default BackgroundWrapper;

package/dist/ui/backgrounds/index.tsx

@@ -1,12 +0,0 @@
-export { default as Diagonal } from "./Diagonal.js";
-export { default as GradientConic } from "./GradientConic.js";
-export { default as GradientConicRev } from "./GradientConicRev.js";
-export { default as GradientGlass } from "./GradientGlass.js";
-export { default as GradientRadial } from "./GradientRadial.js";
-export { default as GradientRadialLeft } from "./GradientRadialLeft.js";
-export { default as GradientToBottom } from "./GradientToBottom.js";
-export { default as GradientToTop } from "./GradientToTop.js";
-export { default as Solid } from "./Solid.js";
-export { default as Straight } from "./Straight.js";
-export { default as TopRight } from "./TopRight.js";
-export { default as BackgroundWrapper } from "./Wrapper.js";

package/dist/ui/buttons/Button.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef, ForwardRefRenderFunction, MouseEvent } from "react";
-
-const Button: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  {
-    className?: string;
-    children?: React.ReactNode;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-  }
-> = (
-  { className, children, disabled, type = "button", onClick, ...props },
-  ref,
-) => {
-  const baseStyles =
-    "bg-scrapWhite relative w-full lg:w-auto flex justify-center border border-transparent " +
-    "inline-flex items-center justify-center rounded-lg px-4 py-3 my-1 text-sm " +
-    "font-medium transition duration-100 ease-in-out focus:outline-none hover:z-10";
-
-  const enabledStyles = disabled
-    ? ""
-    : "hover:bg-scrapBlack hover:text-scrapWhite hover:brightness-125 focus:ring-4 focus:ring-scrapOrange";
-
-  const darkModeStyles =
-    "dark:bg-scrapBlack dark:text-scrapYellow dark:hover:bg-scrapWhite " +
-    "dark:hover:font-bold dark:hover:text-scrapBlack dark:focus:ring-scrapOrange";
-
-  const disabledStyles = disabled ? "cursor-not-allowed opacity-75" : "";
-
-  const buttonClasses = `
-    ${baseStyles}
-    ${enabledStyles}
-    ${darkModeStyles}
-    ${disabledStyles}
-    ${className ?? ""}
-  `;
-
-  return (
-    <button
-      type={type}
-      className={buttonClasses}
-      onClick={!disabled ? onClick : undefined}
-      disabled={disabled}
-      aria-disabled={disabled ? "true" : "false"}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default forwardRef(Button);

package/dist/ui/buttons/DisclosureButton.tsx

@@ -1,35 +0,0 @@
-import React, { ElementType, FC } from "react";
-
-const DisclosureButton: FC<{
-  as?: ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  onClick?: (
-    event: React.MouseEvent<HTMLButtonElement, HTMLAnchorElement>,
-  ) => void;
-}> = ({ as: Component = "button", children, className, onClick }) => {
-  const toggle = () => {
-    return (
-      <Component className={className} onClick={onClick}>
-        {children}
-      </Component>
-    );
-  };
-
-  const handleClick = (
-    event: React.MouseEvent<HTMLButtonElement, HTMLAnchorElement>,
-  ) => {
-    toggle();
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  return (
-    <Component className={className} onClick={handleClick}>
-      {children}
-    </Component>
-  );
-};
-
-export default DisclosureButton;

package/dist/ui/buttons/GradientButton.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-
-const GradientButton = ({
-  title,
-  className = "",
-  onClick,
-  disabled = false,
-  ariaLabel,
-  ...rest
-}: {
-  title: string;
-  className?: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  ariaLabel?: string;
-}) => {
-  const disabledStyles = disabled
-    ? "opacity-50 cursor-not-allowed"
-    : "hover:scale-110 transition duration-300";
-
-  // Responsive base styles for various device sizes
-  const baseStyles = `
-    rounded-lg 
-    bg-gradient-to-r from-scrapOrange to-scrapRed 
-    px-3
-    py-1
-    text-sm text-base md:text-md lg:text-lg xl:text-xl
-    focus:ring focus:ring-offset-1 focus:ring-scrapOrange`;
-
-  const buttonStyles = `${baseStyles} ${disabledStyles} ${className}`;
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (!disabled && onClick) {
-      onClick(event);
-    }
-  };
-
-  return (
-    <button
-      className={buttonStyles}
-      onClick={handleClick}
-      disabled={disabled}
-      aria-label={ariaLabel || title}
-      {...rest}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default GradientButton;

package/dist/ui/buttons/IconButton.tsx

@@ -1,24 +0,0 @@
-import React, { type MouseEvent } from "react";
-
-const IconButton: React.FC<{
-  children?: React.ReactNode;
-  onClick?:
-    | ((event: React.MouseEvent<HTMLButtonElement>) => Promise<void>)
-    | ((event: MouseEvent<HTMLButtonElement>) => Promise<void>)
-    | ((event: React.MouseEvent<HTMLButtonElement>) => void)
-    | undefined;
-  icon?: React.ReactNode;
-  className?: string;
-}> = ({ children, onClick, icon, className }) => {
-  return (
-    <button
-      onClick={onClick}
-      className={`bg-scrapBlack text-scrapWhite flex items-center justify-center rounded-full border p-1 shadow-md transition hover:scale-110 ${className}`.trim()}
-    >
-      {icon}
-      {children}
-    </button>
-  );
-};
-
-export default IconButton;