@revealui/core 0.0.1-pre.0

package/dist/ui/backgrounds/GradientGlass.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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