@arkyn/components 3.0.1-beta.21 → 3.0.1-beta.23

package/src/components/drawer/drawerContainer/index.tsx

@@ -1,123 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { HTMLAttributes } from "react";
-
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { DrawerProvider } from "../drawerContext";
-import "./styles.css";
-
-type DrawerContainerProps = HTMLAttributes<HTMLElement> & {
-  isVisible: boolean;
-  makeInvisible: () => void;
-  orientation?: "left" | "right";
-};
-
-/**O
- * DrawerContainer component - animated slide-out panel for navigation or content
- *
- * @param props - DrawerContainer component properties
- * @param props.isVisible - Controls drawer visibility state
- * @param props.makeInvisible - Callback function to hide the drawer
- * @param props.orientation - Side from which drawer slides (left, right). Default: "left"
- *
- * **...Other valid HTML properties for aside element**
- *
- * @returns DrawerContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic drawer from left
- * const [isOpen, setIsOpen] = useState(false);
- * <DrawerContainer
- *   isVisible={isOpen}
- *   makeInvisible={setIsOpen}
- * >
- *   <p>Drawer content</p>
- * </DrawerContainer>
- *
- * // Right-side drawer
- * <DrawerContainer
- *   isVisible={isOpen}
- *   makeInvisible={setIsOpen}
- *   orientation="right"
- * >
- *   <nav>Navigation items</nav>
- * </DrawerContainer>
- *
- * // Complete drawer example
- * function DrawerExample() {
- *   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsDrawerOpen(true)}>
- *         Open Menu
- *       </button>
- *
- *       <DrawerContainer
- *         isVisible={isDrawerOpen}
- *         makeInvisible={setIsDrawerOpen}
- *         orientation="right"
- *       >
- *         <div className="drawer-content">
- *           <h2>Menu</h2>
- *           <ul>
- *             <li>Home</li>
- *             <li>About</li>
- *             <li>Contact</li>
- *           </ul>
- *         </div>
- *       </DrawerContainer>
- *     </>
- *   );
- * }
- * ```
- */
-
-function DrawerContainer(props: DrawerContainerProps) {
-  const {
-    isVisible,
-    makeInvisible,
-    orientation = "left",
-    children,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  useScrollLock(isVisible);
-
-  const translateX = orientation === "left" ? "-100%" : "100%";
-
-  const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-  const className = `arkynDrawerContainer ${orientation} ${visibleClass} ${baseClassName}`;
-
-  return (
-    <DrawerProvider makeInvisible={makeInvisible}>
-      <AnimatePresence>
-        {isVisible && (
-          <aside className={className.trim()} {...rest}>
-            <motion.div
-              className="arkynDrawerContainerOverlay"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={makeInvisible}
-            />
-
-            <motion.div
-              className="arkynDrawerContainerContent"
-              transition={{ ease: "easeOut", duration: 0.15 }}
-              initial={{ transform: `translateX(${translateX})` }}
-              animate={{ transform: "translateX(0px)" }}
-              exit={{ transform: `translateX(${translateX})` }}
-            >
-              {children}
-            </motion.div>
-          </aside>
-        )}
-      </AnimatePresence>
-    </DrawerProvider>
-  );
-}
-
-export { DrawerContainer };

package/src/components/drawer/drawerContainer/styles.css

@@ -1,46 +0,0 @@
-.arkynDrawerContainer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  overflow: auto;
-  z-index: 9999;
-}
-
-.arkynDrawerContainerOverlay {
-  position: fixed;
-  z-index: 9997;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.arkynDrawerContainerOverlay:hover {
-  cursor: pointer;
-}
-
-.arkynDrawerContainerContent {
-  z-index: 9999;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: max-content;
-  background: var(--card);
-
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  height: 100vh;
-}
-
-.arkynDrawerContainer.left > .arkynDrawerContainerContent {
-  left: 0;
-}
-
-.arkynDrawerContainer.right > .arkynDrawerContainerContent {
-  right: 0;
-}

package/src/components/drawer/drawerContext.tsx

@@ -1,26 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-type DrawerContextProps = {
-  makeInvisible: () => void;
-};
-
-type DrawerProviderProps = {
-  children: ReactNode;
-  makeInvisible: () => void;
-};
-
-const drawerContext = createContext({} as DrawerContextProps);
-
-function DrawerProvider(props: DrawerProviderProps) {
-  return (
-    <drawerContext.Provider value={{ makeInvisible: props.makeInvisible }}>
-      {props.children}
-    </drawerContext.Provider>
-  );
-}
-
-function useDrawer() {
-  return useContext(drawerContext);
-}
-
-export { DrawerProvider, useDrawer };

package/src/components/drawer/drawerHeader/index.tsx

@@ -1,88 +0,0 @@
-import { X } from "lucide-react";
-import { HTMLAttributes } from "react";
-
-import { useDrawer } from "../drawerContext";
-import "./styles.css";
-
-type DrawerHeaderProps = HTMLAttributes<HTMLElement> & {
-  showCloseButton?: boolean;
-};
-
-/**
- * DrawerHeader component - header section for drawer with optional close button
- *
- * @param props - DrawerHeader component properties
- * @param props.showCloseButton - Shows close button in header. Default: true
- *
- * **...Other valid HTML properties for header element**
- *
- * @returns DrawerHeader JSX element
- *
- * @example
- * ```tsx
- * // Basic drawer header with close button
- * <DrawerHeader>
- *   <h2>Menu</h2>
- * </DrawerHeader>
- *
- * // Header without close button
- * <DrawerHeader showCloseButton={false}>
- *   <h2>Settings</h2>
- * </DrawerHeader>
- *
- * // Complete drawer example
- * <DrawerContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <DrawerHeader>
- *     <h2>Navigation</h2>
- *     <p>Welcome to our app</p>
- *   </DrawerHeader>
- *
- *   <div className="drawer-content">
- *     <nav>
- *       <a href="/home">Home</a>
- *       <a href="/about">About</a>
- *       <a href="/contact">Contact</a>
- *     </nav>
- *   </div>
- * </DrawerContainer>
- *
- * // Custom styled header
- * <DrawerHeader className="custom-header">
- *   <div className="header-content">
- *     <img src="/logo.png" alt="Logo" />
- *     <h1>My App</h1>
- *   </div>
- * </DrawerHeader>
- * ```
- */
-
-function DrawerHeader(props: DrawerHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = props;
-
-  const { makeInvisible } = useDrawer();
-  const className = `arkynDrawerHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          className="arkynDrawerHeaderCloseButton"
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close drawer"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { DrawerHeader };

package/src/components/drawer/drawerHeader/styles.css

@@ -1,38 +0,0 @@
-.arkynDrawerHeader {
-  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);
-}
-
-.arkynDrawerHeaderCloseButton {
-  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;
-}
-
-.arkynDrawerHeaderCloseButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}

package/src/components/fieldError/index.tsx

@@ -1,43 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type FieldErrorProps = HTMLAttributes<HTMLElement>;
-
-/**
- * FieldError component - used to display error messages for form fields
- *
- * @param props - FieldError component properties
- *
- * **...Other valid HTML properties for strong element**
- *
- * @returns FieldError JSX element or empty fragment if no children
- *
- * @example
- * ```tsx
- * // Basic field error
- * <FieldError>This field is required</FieldError>
- *
- * // Field error with custom styling
- * <FieldError className="custom-error">
- *  Invalid email format
- * </FieldError>
- *
- * // Conditional field error
- * {error && <FieldError>{error}</FieldError>}
- * ```
- */
-
-function FieldError(props: FieldErrorProps) {
-  const { children, className: baseClassName, ...rest } = props;
-  const className = `arkynFieldError ${baseClassName}`;
-
-  if (!children) return <></>;
-
-  return (
-    <strong className={className.trim()} {...rest}>
-      {children}
-    </strong>
-  );
-}
-
-export { FieldError };

package/src/components/fieldError/styles.css

@@ -1,6 +0,0 @@
-.arkynFieldError {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 600;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/fieldLabel/index.tsx

@@ -1,52 +0,0 @@
-import { LabelHTMLAttributes } from "react";
-import "./styles.css";
-
-type FieldLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
-  showAsterisk?: boolean;
-};
-
-/**
- * FieldLabel component - used to display labels for form fields with optional required indicator
- *
- * @param props - FieldLabel component properties
- * @param props.showAsterisk - Whether to display an asterisk (*) to indicate required field. Default: false
- *
- * **...Other valid HTML properties for label element**
- *
- * @returns FieldLabel JSX element
- *
- * @example
- * ```tsx
- * // Basic field label
- * <FieldLabel htmlFor="username">Username</FieldLabel>
- *
- * // Required field label with asterisk
- * <FieldLabel htmlFor="email" showAsterisk>
- *   Email Address
- * </FieldLabel>
- *
- * // Label with custom styling
- * <FieldLabel
- *   htmlFor="password"
- *   className="custom-label"
- *   showAsterisk
- * >
- *   Password
- * </FieldLabel>
- * ```
- */
-
-function FieldLabel(props: FieldLabelProps) {
-  const {
-    showAsterisk = false,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynFieldLabel ${show} ${baseClassName}`;
-
-  return <label className={className.trim()} {...rest} />;
-}
-
-export { FieldLabel };

package/src/components/fieldLabel/styles.css

@@ -1,15 +0,0 @@
-.arkynFieldLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynFieldLabel.asteriskTrue::before {
-  content: "* ";
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16.34px;
-  text-align: left;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/fieldWrapper/index.tsx

@@ -1,54 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-
-type FieldWrapperProps = HTMLAttributes<HTMLElement> & {
-  children: ReactNode;
-};
-
-/**
- * FieldWrapper component - used as a container wrapper for a single form field and its related elements
- *
- * @param props - FieldWrapper component properties
- * @param props.children - React elements that compose a single field (label, input, error message, etc.)
- *
- * **...Other valid HTML properties for section element**
- *
- * @returns FieldWrapper JSX element
- *
- * @example
- * ```tsx
- * // Basic field container
- * <FieldWrapper>
- *   <FieldLabel>Username</FieldLabel>
- *   <Input name="username" />
- *   <FieldError>This field is required</FieldError>
- * </FieldWrapper>
- *
- * // Field container with custom styling
- * <FieldWrapper className="custom-spacing">
- *   <FieldLabel>Email</FieldLabel>
- *   <Input name="email" type="email" />
- * </FieldWrapper>
- *
- * // Complete field with all elements
- * <FieldWrapper>
- *   <FieldLabel showAsterisk>Password</FieldLabel>
- *   <Input name="password" type="password" />
- *   <FieldError>Password must be at least 8 characters</FieldError>
- * </FieldWrapper>
- * ```
- */
-
-function FieldWrapper(props: FieldWrapperProps) {
-  const { children, className: baseClassName, ...rest } = props;
-
-  const className = `arkynFieldWrapper ${baseClassName}`;
-
-  return (
-    <section className={className.trim()} {...rest}>
-      {children}
-    </section>
-  );
-}
-
-export { FieldWrapper };

package/src/components/fieldWrapper/styles.css

@@ -1,7 +0,0 @@
-.arkynFieldWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  height: max-content;
-}

package/src/components/iconButton/index.tsx

@@ -1,83 +0,0 @@
-import { Loader2, LucideIcon } from "lucide-react";
-import { ButtonHTMLAttributes } from "react";
-
-import "./styles.css";
-
-type IconButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "aria-label"
-> & {
-  icon: LucideIcon;
-  "aria-label": string;
-
-  isLoading?: boolean;
-  size?: "xs" | "sm" | "md" | "lg";
-  variant?: "solid" | "outline" | "ghost" | "invisible";
-  scheme?: "primary" | "success" | "warning" | "danger" | "info";
-};
-
-/**
- * IconButton component - compact button that renders only an icon
- *
- * @param props - IconButton component properties
- * @param props.icon - Icon to render inside the button (LucideIcon). Required
- * @param props.aria-label - Accessible label for screen readers. Required
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Button size. Default: "md"
- * @param props.variant - Visual variant of the button. Default: "solid"
- * @param props.scheme - Button color scheme. Default: "primary"
- *
- * **...Other valid HTML properties for button element (children not supported)**
- *
- * @returns IconButton JSX element
- *
- * @example
- * ```tsx
- * // Basic icon button
- * <IconButton icon={Plus} aria-label="Add" />
- *
- * // Different color scheme and variant
- * <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
- *
- * // Loading state
- * <IconButton icon={Save} aria-label="Saving" isLoading />
- *
- * // Sizes
- * <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
- * ```
- */
-
-function IconButton(props: IconButtonProps) {
-  const {
-    isLoading = false,
-    scheme = "primary",
-    variant = "solid",
-    size = "md",
-    icon: Icon,
-    disabled,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
-  const loading = isLoading ? "loadingTrue" : "loadingFalse";
-  const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
-
-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={className.trim()}
-      {...rest}
-    >
-      <div className="arkynIconButtonSpinner">
-        <Loader2 size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-
-      <div className="arkynIconButtonContent">
-        <Icon size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-    </button>
-  );
-}
-
-export { IconButton };