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

package/dist/ui/providers/ThemeProvider.tsx

@@ -1,196 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import ThemeContext from "../contexts/ThemeContext";
-
-const defaultThemeSettings = {
-  maxWidth: {
-    0: "max-w-3xl",
-    1: "max-w-5xl",
-    2: "max-w-7xl",
-    3: "max-w-8xl",
-    4: "max-w-9xl",
-    5: "max-w-10xl",
-    default: "max-w-full",
-  },
-  padding: {
-    0: "p-0",
-    1: "p-1",
-    2: "p-2",
-    default: "p-3",
-  },
-  breakpoints: {
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px",
-    "2xl": "1536px",
-  },
-  layoutType: {
-    container: "container",
-    flex: "flex",
-    grid: "grid",
-    stack: "stack",
-  },
-  customProps: {
-    flex: {
-      flexDirection: {
-        row: "flex-row",
-        col: "flex-col",
-      },
-      justifyContent: {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between",
-        around: "justify-around",
-        evenly: "justify-evenly",
-      },
-      alignItems: {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch",
-        baseline: "items-baseline",
-      },
-      alignContent: {
-        start: "content-start",
-        center: "content-center",
-        end: "content-end",
-        between: "content-between",
-        around: "content-around",
-        evenly: "content-evenly",
-      },
-      flexWrap: {
-        nowrap: "flex-nowrap",
-        wrap: "flex-wrap",
-        wrapReverse: "flex-wrap-reverse",
-      },
-      flexFlow: {
-        row: "flex-row",
-        col: "flex-col",
-        rowWrap: "flex-row flex-wrap",
-        colWrap: "flex-col flex-wrap",
-        rowWrapReverse: "flex-row flex-wrap-reverse",
-        colWrapReverse: "flex-col flex-wrap-reverse",
-      },
-      flexGrow: {
-        0: "flex-grow-0",
-        1: "flex-grow-1",
-      },
-      flexShrink: {
-        0: "flex-shrink-0",
-        1: "flex-shrink-1",
-      },
-      flexBasis: {
-        auto: "flex-basis-auto",
-        0: "flex-basis-0",
-        full: "flex-basis-full",
-      },
-      flexOrder: {
-        first: "order-first",
-        last: "order-last",
-        none: "order-none",
-        1: "order-1",
-        2: "order-2",
-        3: "order-3",
-        4: "order-4",
-        5: "order-5",
-        6: "order-6",
-        7: "order-7",
-        8: "order-8",
-        9: "order-9",
-        10: "order-10",
-        11: "order-11",
-        12: "order-12",
-      },
-      flexSelf: {
-        auto: "self-auto",
-        start: "self-start",
-        center: "self-center",
-        end: "self-end",
-        stretch: "self-stretch",
-      },
-    },
-    grid: {
-      gridTemplateColumns: {
-        1: "grid-cols-1",
-        2: "grid-cols-2",
-        3: "grid-cols-3",
-        4: "grid-cols-4",
-        5: "grid-cols-5",
-        6: "grid-cols-6",
-        7: "grid-cols-7",
-        8: "grid-cols-8",
-        9: "grid-cols-9",
-        10: "grid-cols-10",
-        11: "grid-cols-11",
-        12: "grid-cols-12",
-        none: "grid-cols-none",
-      },
-      gridTemplateRows: {
-        1: "grid-rows-1",
-        2: "grid-rows-2",
-        3: "grid-rows-3",
-        4: "grid-rows-4",
-        5: "grid-rows-5",
-        6: "grid-rows-6",
-        none: "grid-rows-none",
-      },
-      gridTemplateAreas: {
-        none: "grid-areas-none",
-      },
-      gridAutoColumns: {
-        auto: "auto-cols-auto",
-        min: "auto-cols-min",
-        max: "auto-cols-max",
-        fr: "auto-cols-fr",
-      },
-      gridAutoRows: {
-        auto: "auto-rows-auto",
-        min: "auto-rows-min",
-        max: "auto-rows-max",
-        fr: "auto-rows-fr",
-      },
-      gridAutoFlow: {
-        row: "grid-flow-row",
-        col: "grid-flow-col",
-        rowDense: "grid-flow-row-dense",
-        colDense: "grid-flow-col-dense",
-      },
-      grid: {
-        rows: "rows",
-        cols: "cols",
-        gap: "gap",
-        gapX: "gap-x",
-        gapY: "gap-y",
-        autoFlow: "auto-flow",
-        autoRows: "auto-rows",
-        autoCols: "auto-cols",
-        templateRows: "template-rows",
-        templateCols: "template-cols",
-        templateAreas: "template-areas",
-      },
-      gridRow: {
-        auto: "row-auto",
-        span: "row-span",
-        start: "row-start",
-        end: "row-end",
-      },
-      gridColumn: {
-        auto: "col-auto",
-        span: "col-span",
-        start: "col-start",
-        end: "col-end",
-      },
-      gridArea: {
-        auto: "area-auto",
-      },
-    },
-  },
-};
-const ThemeProvider = ({ children }: { children: any }) => (
-  <ThemeContext.Provider value={defaultThemeSettings}>
-    {children}
-  </ThemeContext.Provider>
-);
-
-export default ThemeProvider;

package/dist/ui/shells/App.tsx

@@ -1,57 +0,0 @@
-import React, { type FC } from "react";
-
-import NavShell from "./Nav";
-import Footer from "../navigation/Footer";
-import Container from "./Container";
-import { PageContextServer } from "../../types/interfaces/context";
-
-const App: FC<{
-  children?: React.ReactNode;
-  pageContext?: PageContextServer;
-}> = ({ children }) => {
-  return (
-    <Container>
-      <NavShell />
-      {children}
-      <Footer />
-    </Container>
-  );
-};
-
-export default App;
-
-// import { type FC } from "react";
-// import { Container, Footer, Header, Main, Section } from "reveal";
-// import NavShell from "./NavShell";
-// import "./styles.css";
-
-// const AppShell: FC<{
-//   children: React.ReactNode;
-// }> = ({ children }) => {
-//   return (
-//     <>
-//       <Container>
-//         <Header index={1} style={{ background: "transparent" }}>
-//           <NavShell />
-//         </Header>
-//         <Main
-//           crosses={false}
-//           crossesOffset={" -100px"}
-//           customPaddings={" 0 0 0 0"}
-//         >
-//           <Section
-//             id={"section"}
-//             crosses={false}
-//             crossesOffset={" -100px"}
-//             customPaddings={" 0 0 0 0"}
-//           >
-//             {children}
-//           </Section>
-//         </Main>
-//         <Footer />
-//       </Container>
-//     </>
-//   );
-// };
-
-// export default AppShell;

package/dist/ui/shells/Container.tsx

@@ -1,74 +0,0 @@
-import React, { ForwardedRef, forwardRef, useMemo } from "react";
-
-const Container = forwardRef<
-  HTMLElement,
-  {
-    id?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    index?: number;
-    maxWidth?: string;
-    padding?: string;
-    className?: string;
-    role?: string;
-    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
-    onTouchMove?: (e: React.TouchEvent<HTMLDivElement>) => void;
-    as?: React.ElementType;
-    breakpoints?: {
-      [key: string]: number;
-    };
-  }
->(
-  (
-    {
-      id,
-      children,
-      index = 0,
-      maxWidth = "none",
-      padding = "0",
-      className = "",
-      onTouchMove,
-      onTouchStart,
-      as: Component = "div",
-      breakpoints = {},
-      ...props
-    },
-    ref: ForwardedRef<HTMLElement>,
-  ) => {
-    const combinedClasses = useMemo(() => {
-      // Generate responsive classes based on the breakpoints
-      const responsiveClasses =
-        Object.keys(breakpoints).length !== 0
-          ? Object.entries(breakpoints).map(([key, value]) => {
-              return `lg:${key}-${value}`;
-            })
-          : [index === 0 ? "lg:col-span-12" : "lg:col-span-6"];
-      return [
-        responsiveClasses,
-        maxWidth !== "none" ? `max-w-${maxWidth}` : "",
-        padding !== "0" ? `p-${padding}` : "",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")
-        .trim();
-    }, [breakpoints, index, maxWidth, padding, className]);
-
-    return (
-      <Component
-        id={id}
-        ref={ref}
-        onTouchStart={onTouchStart}
-        onTouchMove={onTouchMove}
-        className={combinedClasses}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  },
-);
-
-Container.displayName = "Container";
-
-export default Container;

package/dist/ui/shells/Disclosure.tsx

@@ -1,72 +0,0 @@
-// eslint-disable-next-line prettier/prettier
-
-import React, { ElementType, FC, JSX, useState } from "react";
-import { DisclosureButton } from "../buttons";
-import { DisclosurePanel } from "../lists";
-
-interface DisclosureProps {
-  as?: keyof JSX.IntrinsicElements;
-  className?: string;
-  children: (props: {
-    open: boolean;
-    toggle: (
-      event: React.MouseEvent<HTMLElement>,
-    ) => void;
-  }) => JSX.Element;
-}
-
-const Disclosure: FC<DisclosureProps> & {
-  Button: FC<{
-    as?: ElementType;
-    children?: React.ReactNode;
-    className?: string;
-    onClick?: (
-      event: React.MouseEvent<HTMLElement>,
-    ) => void;
-  }>; // Add the missing Button property
-  Panel: FC<{
-    as?: ElementType;
-    children?: React.ReactNode;
-    className?: string;
-    onClick?: (
-      event: React.MouseEvent<HTMLElement>,
-    ) => void;
-  }>;
-} = ({ as: Component = "div", children, className }) => {
-  const [open, setOpen] = useState(false);
-
-  const toggle = (
-    event: React.MouseEvent<HTMLElement>,
-  ) => {
-    event.preventDefault();
-    setOpen((prevOpen) => !prevOpen);
-  };
-  return (
-    <Component className={className}>
-      {children({
-        open,
-        toggle,
-      })}
-    </Component>
-  );
-};
-
-Disclosure.Button = DisclosureButton as FC<{
-  as?: ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  onClick?: (
-    event: React.MouseEvent<HTMLElement>,
-  ) => void;
-}>;
-
-Disclosure.Panel = DisclosurePanel as FC<{
-  as?: ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  onClick?: (
-    event: React.MouseEvent<HTMLElement>,
-  ) => void;
-}>;
-
-export default Disclosure;

package/dist/ui/shells/Field.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-const Field = React.forwardRef<
-  HTMLDivElement,
-  {
-    className?: string;
-    children?: React.ReactNode;
-  }
->(({ className, children, ...rest }, ref) => {
-  const combinedClasses = [className].filter(Boolean).join(" ").trim();
-
-  return (
-    <div className={combinedClasses} ref={ref} {...rest}>
-      {children}
-    </div>
-  );
-});
-
-Field.displayName = "Field";
-
-export default Field;

package/dist/ui/shells/Flex.tsx

@@ -1,193 +0,0 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-} from "react";
-
-interface FlexContainerProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode | ReactNode[];
-  className?: string;
-  index?: number;
-  width?: string;
-  layoutType?: string;
-  flexDirection?: string;
-  justifyContent?: string;
-  alignItems?: string;
-  layoutStyle?: number;
-  customStyles?: string;
-  breakpoints?: Record<string, string>;
-}
-
-const FlexContainer = forwardRef<HTMLDivElement, FlexContainerProps>(
-  (
-    {
-      children,
-      className = "",
-      index = 0,
-      width = "auto",
-      layoutType = "flex",
-      flexDirection = "row",
-      justifyContent = "center",
-      alignItems = "center",
-      layoutStyle = 0,
-      customStyles = "",
-      breakpoints = {},
-      ...props
-    },
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const layoutClasses = [
-      `w-${width}`,
-      `${layoutType}`,
-      `flex-${flexDirection}`,
-      `justify-${justifyContent}`,
-      `items-${alignItems}`,
-    ]
-      .filter(Boolean)
-      .join(" ")
-      .trim();
-
-    const childrenWithFlex = React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        const childClassMap: { [key: number]: string } = {
-          0: "flex-auto",
-          1: "flex-1",
-          2: "flex-1 min-w-[25ch]",
-          3: "flex-1 min-w-[10em]",
-          4: "flex-1 min-w-[15em]",
-          5: "flex-1 min-w-[20em]",
-        };
-
-        const childClass = childClassMap[layoutStyle] || "flex-1";
-        const additionalClass =
-          React.Children.count(children) === 1 && layoutStyle === 2
-            ? "min-w-[15ch]"
-            : "";
-
-        // Type assertion to ensure TypeScript knows that child.props has a className property
-        const childElement = child as ReactElement<{ className?: string }>;
-
-        return React.cloneElement(childElement, {
-          className: `${childClass} ${additionalClass} ${
-            childElement.props.className || ""
-          }`,
-        });
-      }
-
-      return child;
-    });
-
-    const responsiveClasses =
-      Object.keys(breakpoints).length !== 0 ? "responsive" : "";
-    const combinedClasses =
-      `${layoutClasses} ${responsiveClasses} ${className} ${customStyles}`.trim();
-
-    return (
-      <div tabIndex={index} className={combinedClasses} ref={ref} {...props}>
-        {childrenWithFlex}
-      </div>
-    );
-  },
-);
-
-FlexContainer.displayName = "FlexContainer";
-
-export default FlexContainer;
-
-// import React, {
-//   ForwardedRef,
-//   ReactElement,
-//   ReactNode,
-//   forwardRef,
-// } from "react";
-
-// const FlexContainer = forwardRef<
-//   HTMLDivElement,
-//   {
-//     children: ReactNode | ReactNode[];
-//     className?: string;
-//     index?: number;
-//     width?: string;
-//     layoutType?: string;
-//     flexDirection?: string;
-//     justifyContent?: string;
-//     alignItems?: string;
-//     layoutStyle?: number;
-//     customStyles?: string;
-//     breakpoints?: Record<string, string>;
-//   }
-// >(
-//   (
-//     {
-//       children,
-//       className = "",
-//       index = 0,
-//       width = "auto",
-//       layoutType = "flex",
-//       flexDirection = "row",
-//       justifyContent = "center",
-//       alignItems = "center",
-//       layoutStyle = 0,
-//       customStyles = "",
-//       breakpoints = {},
-//       ...props
-//     },
-//     ref: ForwardedRef<HTMLDivElement>,
-//   ) => {
-//     const layoutClasses = [
-//       `w-${width}`,
-//       `${layoutType}`,
-//       `flex-${flexDirection}`,
-//       `justify-${justifyContent}`,
-//       `items-${alignItems}`,
-//     ]
-//       .filter(Boolean)
-//       .join(" ")
-//       .trim();
-
-//     const childrenWithFlex = React.Children.map(children, (child) => {
-//       // Only import.meta.child if it's a valid React element
-//       if (React.isValidElement(child)) {
-//         const childClassMap: { [key: number]: string } = {
-//           0: "flex-auto",
-//           1: "flex-1",
-//           2: "flex-1 min-w-[25ch]",
-//           3: "flex-1 min-w-[10em]",
-//           4: "flex-1 min-w-[15em]",
-//           5: "flex-1 min-w-[20em]",
-//         };
-
-//         const childClass = childClassMap[layoutStyle] || "flex-1";
-//         const additionalClass =
-//           React.Children.count(children) === 1 && layoutStyle === 2
-//             ? "min-w-[15ch]"
-//             : "";
-
-//         // Clone the child element with additional className
-//         return React.cloneElement(child as ReactElement, {
-//           className: `${childClass} ${additionalClass} ${
-//             child.props.className || ""
-//           }`,
-//         });
-//       }
-
-//       // Return non-element child as is
-//       return child;
-//     });
-
-//     const responsiveClasses = Object.keys(breakpoints).length !== 0;
-//     const combinedClasses =
-//       `${layoutClasses} ${responsiveClasses} ${className} ${customStyles}`.trim();
-
-//     return (
-//       <div tabIndex={index} className={combinedClasses} ref={ref} {...props}>
-//         {childrenWithFlex}
-//       </div>
-//     );
-//   },
-// );
-// FlexContainer.displayName = "FlexContainer";
-
-// export default FlexContainer;