@arkyn/components 3.0.1-beta.11 → 3.0.1-beta.13

package/src/components/currencyInput/style.css

@@ -0,0 +1,226 @@
+/* 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

@@ -0,0 +1,58 @@
+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/drawer/drawerContainer/index.tsx

@@ -0,0 +1,123 @@
+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/drawerContext.tsx

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

@@ -0,0 +1,88 @@
+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/fieldError/index.tsx

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

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

package/src/components/fieldLabel/index.tsx

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

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

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

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