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

package/src/components/currencyInput/style.css

@@ -1,226 +0,0 @@
-/* BASE */
-.arkynCurrencyInput {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  padding: 0 16px;
-  gap: 8px;
-  border-radius: 8px;
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-}
-
-.arkynCurrencyInput:hover {
-  cursor: text;
-}
-
-.arkynCurrencyInput input {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-
-  line-height: 100%;
-}
-
-.arkynCurrencyInput input {
-  color: var(--text-heading);
-}
-
-.arkynCurrencyInput .prefix,
-.arkynCurrencyInput .suffix {
-  color: var(--text-body);
-  background: var(--border);
-  font-weight: 400;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-
-  line-height: 100%;
-}
-
-.arkynCurrencyInput .prefix {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: calc(8px - 1px) 0 0 calc(8px - 1px);
-  border-right: 1px solid var(--border);
-}
-
-.arkynCurrencyInput .suffix {
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 0 calc(8px - 1px) calc(8px - 1px) 0;
-  border-left: 1px solid var(--border);
-}
-
-.arkynCurrencyInput input::placeholder {
-  color: var(--text-muted);
-  line-height: 100%;
-}
-
-.arkynCurrencyInput svg {
-  color: var(--text-muted);
-}
-
-.arkynCurrencyInput.errored svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynCurrencyInput:not(.opacity).focused svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynCurrencyInput.opacity {
-  opacity: 0.5;
-}
-
-/* VARIANTS */
-.arkynCurrencyInput.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--spotlight-secondary), 1);
-}
-
-.arkynCurrencyInput.solid.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynCurrencyInput:not(.opacity).solid.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynCurrencyInput.outline {
-  border-color: var(--border);
-}
-
-.arkynCurrencyInput.outline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynCurrencyInput:not(.opacity).outline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynCurrencyInput.underline {
-  border-radius: 0;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  outline: none;
-  border-color: var(--border);
-}
-
-.arkynCurrencyInput.underline .suffix,
-.arkynCurrencyInput.underline .prefix {
-  display: none;
-}
-
-.arkynCurrencyInput.underline::before {
-  content: " ";
-  position: absolute;
-  height: 1px;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  background: transparent;
-}
-
-.arkynCurrencyInput.underline.errored {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynCurrencyInput.underline.errored::before {
-  background: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynCurrencyInput:not(.opacity).underline.focused {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynCurrencyInput:not(.opacity).underline.focused::before {
-  background: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynCurrencyInput.md input {
-  min-height: 40px;
-  max-height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.arkynCurrencyInput.md input::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkynCurrencyInput.md.hasPrefix {
-  padding-left: 60px;
-}
-
-.arkynCurrencyInput.md.hasSuffix {
-  padding-right: 60px;
-}
-
-.arkynCurrencyInput.md .prefix,
-.arkynCurrencyInput.md .suffix {
-  height: 40px;
-  width: 44px;
-  font-size: 14px;
-}
-
-.arkynCurrencyInput.lg input {
-  min-height: 44px;
-  max-height: 44px;
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.arkynCurrencyInput.lg input::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}
-
-.arkynCurrencyInput.lg .prefix,
-.arkynCurrencyInput.lg .suffix {
-  height: 44px;
-  width: 48px;
-  font-size: 16px;
-}
-
-.arkynCurrencyInput.lg.hasPrefix {
-  padding-left: 64px;
-}
-
-.arkynCurrencyInput.lg.hasSuffix {
-  padding-right: 64px;
-}
-
-/* SPIN */
-.arkynCurrencyInput .spinner {
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/divider/index.tsx

@@ -1,58 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type DividerProps = HTMLAttributes<HTMLDivElement> & {
-  orientation?: "horizontal" | "vertical";
-};
-
-/**
- * Divider component - used to visually separate content sections
- *
- * @param props - Divider component properties
- * @param props.orientation - Divider orientation. Default: "horizontal"
- *
- * **...Other valid HTML properties for div**
- *
- * @returns Divider JSX element
- *
- * @example
- * ```tsx
- * // Basic horizontal divider
- * <Divider />
- *
- * // Explicit horizontal divider
- * <Divider orientation="horizontal" />
- *
- * // Vertical divider
- * <Divider orientation="vertical" />
- *
- * // Custom styled divider
- * <Divider
- *   orientation="horizontal"
- *   className="my-custom-divider"
- * />
- *
- * // Usage in layout
- * <div>
- *   <h2>Section 1</h2>
- *   <p>Content for section 1</p>
- *   <Divider />
- *   <h2>Section 2</h2>
- *   <p>Content for section 2</p>
- * </div>
- * ```
- */
-
-function Divider(props: DividerProps) {
-  const {
-    className: baseClassName,
-    orientation = "horizontal",
-    ...rest
-  } = props;
-
-  const className = `arkynDivider ${orientation} ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { Divider };

package/src/components/divider/styles.css

@@ -1,17 +0,0 @@
-.arkynDivider {
-  display: block;
-  flex: 1;
-  background-color: var(--border);
-}
-
-.arkynDivider.horizontal {
-  width: 100%;
-  min-height: 1px;
-  max-height: 1px;
-}
-
-.arkynDivider.vertical {
-  height: 100%;
-  min-width: 1px;
-  max-width: 1px;
-}

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);
-}