@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.22

package/src/components/modal/modalContainer/index.tsx

@@ -1,127 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { HTMLAttributes } from "react";
-
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { ModalProvider } from "../modalContext";
-import "./styles.css";
-
-type ModalContainerProps = HTMLAttributes<HTMLElement> & {
-  isVisible: boolean;
-  makeInvisible: () => void;
-};
-
-/**
- * ModalContainer component - animated overlay modal for dialogs and content
- *
- * @param props - ModalContainer component properties
- * @param props.isVisible - Controls modal visibility state
- * @param props.makeInvisible - Callback function to hide the modal
- *
- * **...Other valid HTML properties for aside element**
- *
- * @returns ModalContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic modal
- * const [isOpen, setIsOpen] = useState(false);
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- * >
- *   <p>Modal content</p>
- * </ModalContainer>
- *
- * // Modal with custom styling
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- *   className="custom-modal"
- * >
- *   <div className="modal-content">
- *     <h2>Confirmation</h2>
- *     <p>Are you sure you want to proceed?</p>
- *   </div>
- * </ModalContainer>
- *
- * // Complete modal example
- * function ModalExample() {
- *   const [isModalOpen, setIsModalOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsModalOpen(true)}>
- *         Open Modal
- *       </button>
- *
- *       <ModalContainer
- *         isVisible={isModalOpen}
- *         makeInvisible={() => setIsModalOpen(false)}
- *       >
- *         <div className="modal-dialog">
- *           <header>
- *             <h2>Modal Title</h2>
- *           </header>
- *
- *           <main>
- *             <p>This is the modal content.</p>
- *           </main>
- *
- *           <footer>
- *             <button onClick={() => setIsModalOpen(false)}>
- *               Close
- *             </button>
- *           </footer>
- *         </div>
- *       </ModalContainer>
- *     </>
- *   );
- * }
- * ```
- */
-
-function ModalContainer(args: ModalContainerProps) {
-  const {
-    isVisible,
-    makeInvisible,
-    children,
-    className: baseClassName = "",
-    ...rest
-  } = args;
-
-  useScrollLock(isVisible);
-
-  const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-  const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
-
-  return (
-    <ModalProvider makeInvisible={makeInvisible}>
-      <AnimatePresence>
-        {isVisible && (
-          <aside className={className.trim()} {...rest}>
-            <motion.div
-              className="arkynModalContainerOverlay"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={makeInvisible}
-            />
-
-            <motion.div
-              className="arkynModalContainerContent"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0, scale: 0.75 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0 }}
-            >
-              {children}
-            </motion.div>
-          </aside>
-        )}
-      </AnimatePresence>
-    </ModalProvider>
-  );
-}
-
-export { ModalContainer };

package/src/components/modal/modalContainer/styles.css

@@ -1,37 +0,0 @@
-.arkynModalContainer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  display: flex;
-  align-items: start;
-  justify-content: center;
-
-  padding: 10vh 0;
-  padding-bottom: 2rem;
-  overflow: auto;
-
-  z-index: 9999;
-}
-
-.arkynModalContainerOverlay {
-  position: fixed;
-  z-index: 9997;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.arkynModalContainerOverlay:hover {
-  cursor: pointer;
-}
-
-.arkynModalContainerContent {
-  z-index: 9999;
-  border-radius: 8px;
-  background: var(--card);
-}

package/src/components/modal/modalContext.tsx

@@ -1,26 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-type ModalContextProps = {
-  makeInvisible: () => void;
-};
-
-type ModalProviderProps = {
-  children: ReactNode;
-  makeInvisible: () => void;
-};
-
-const modalContext = createContext({} as ModalContextProps);
-
-function ModalProvider(props: ModalProviderProps) {
-  return (
-    <modalContext.Provider value={{ makeInvisible: props.makeInvisible }}>
-      {props.children}
-    </modalContext.Provider>
-  );
-}
-
-function useModal() {
-  return useContext(modalContext);
-}
-
-export { ModalProvider, useModal };

package/src/components/modal/modalFooter/index.tsx

@@ -1,80 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type ModalFooterProps = HTMLAttributes<HTMLElement> & {
-  alignment?: "left" | "center" | "right" | "between" | "around";
-};
-
-/**
- * ModalFooter component - footer section for modals with flexible alignment options
- *
- * @param props - ModalFooter component properties
- * @param props.alignment - Content alignment within the footer. Default: "right"
- *
- * **...Other valid HTML properties for footer element**
- *
- * @returns ModalFooter JSX element
- *
- * @example
- * ```tsx
- * // Basic footer with right alignment (default)
- * <ModalFooter>
- *   <button>Cancel</button>
- *   <button>Save</button>
- * </ModalFooter>
- *
- * // Left aligned footer
- * <ModalFooter alignment="left">
- *   <button>Delete</button>
- * </ModalFooter>
- *
- * // Center aligned footer
- * <ModalFooter alignment="center">
- *   <button>OK</button>
- * </ModalFooter>
- *
- * // Space between buttons
- * <ModalFooter alignment="between">
- *   <button>Cancel</button>
- *   <button>Confirm</button>
- * </ModalFooter>
- *
- * // Space around buttons
- * <ModalFooter alignment="around">
- *   <button>Previous</button>
- *   <button>Next</button>
- *   <button>Finish</button>
- * </ModalFooter>
- *
- * // Complete modal example
- * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <header>
- *       <h2>Confirm Action</h2>
- *     </header>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter alignment="right">
- *       <button onClick={() => setIsOpen(false)}>
- *         Cancel
- *       </button>
- *       <button onClick={handleDelete}>
- *         Delete
- *       </button>
- *     </ModalFooter>
- *   </div>
- * </ModalContainer>
- * ```
- */
-
-function ModalFooter(args: ModalFooterProps) {
-  const { alignment = "right", className: baseClassName, ...rest } = args;
-  const className = `arkynModalFooter ${alignment} ${baseClassName}`;
-
-  return <footer className={className.trim()} {...rest} />;
-}
-
-export { ModalFooter };

package/src/components/modal/modalFooter/styles.css

@@ -1,27 +0,0 @@
-.arkynModalFooter {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.arkynModalFooter.left {
-  justify-content: flex-start;
-}
-
-.arkynModalFooter.right {
-  justify-content: flex-end;
-}
-
-.arkynModalFooter.center {
-  justify-content: center;
-}
-
-.arkynModalFooter.between {
-  justify-content: space-between;
-}
-
-.arkynModalFooter.around {
-  justify-content: space-around;
-}

package/src/components/modal/modalHeader/index.tsx

@@ -1,99 +0,0 @@
-import { X } from "lucide-react";
-import { HTMLAttributes } from "react";
-
-import { useModal } from "../modalContext";
-import "./styles.css";
-
-type ModalHeaderProps = HTMLAttributes<HTMLElement> & {
-  showCloseButton?: boolean;
-};
-
-/**
- * ModalHeader component - header section for modals with optional close button
- *
- * @param props - ModalHeader component properties
- * @param props.showCloseButton - Shows close button in header. Default: true
- *
- * **...Other valid HTML properties for header element**
- *
- * @returns ModalHeader JSX element
- *
- * @example
- * ```tsx
- * // Basic modal header with close button
- * <ModalHeader>
- *   <h2>Modal Title</h2>
- * </ModalHeader>
- *
- * // Header without close button
- * <ModalHeader showCloseButton={false}>
- *   <h2>Important Notice</h2>
- * </ModalHeader>
- *
- * // Header with subtitle
- * <ModalHeader>
- *   <div>
- *     <h2>Settings</h2>
- *     <p>Manage your preferences</p>
- *   </div>
- * </ModalHeader>
- *
- * // Complete modal example
- * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <ModalHeader>
- *       <h2>Confirm Delete</h2>
- *       <p>This action cannot be undone</p>
- *     </ModalHeader>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter>
- *       <button onClick={() => setIsOpen(false)}>Cancel</button>
- *       <button onClick={handleDelete}>Delete</button>
- *     </ModalFooter>
- *   </div>
- * </ModalContainer>
- *
- * // Custom styled header
- * <ModalHeader className="custom-header">
- *   <div className="header-content">
- *     <img src="/icon.png" alt="Icon" />
- *     <h1>Welcome</h1>
- *   </div>
- * </ModalHeader>
- * ```
- */
-
-function ModalHeader(args: ModalHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = args;
-
-  const { makeInvisible } = useModal();
-  const className = `arkynModalHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close modal button"
-          className="arkynModalHeaderCloseButton"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { ModalHeader };

package/src/components/modal/modalHeader/styles.css

@@ -1,38 +0,0 @@
-.arkynModalHeader {
-  display: flex;
-  align-items: center;
-
-  height: 56px;
-  padding: 16px;
-
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 20px;
-
-  color: var(--text-heading);
-
-  border-bottom: 1px solid var(--border);
-}
-
-.arkynModalHeaderCloseButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  margin-left: auto;
-
-  padding: 2px;
-  border-radius: 4px;
-
-  border: none;
-  background: none;
-
-  color: var(--text-body);
-  background-color: var(--card);
-  transition: all 0.15s ease-out;
-}
-
-.arkynModalHeaderCloseButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}