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

package/src/components/textarea/styles.css

@@ -0,0 +1,93 @@
+/* BASE */
+.arkynTextarea {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 16px;
+  gap: 8px;
+  border-radius: 8px;
+
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+}
+
+.arkynTextarea:hover {
+  cursor: text;
+}
+
+.arkynTextarea textarea {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  resize: none;
+}
+
+.arkynTextarea textarea {
+  color: var(--text-heading);
+}
+
+.arkynTextarea textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.arkynTextarea.opacityTrue {
+  opacity: 0.5;
+}
+
+/* VARIANTS */
+.arkynTextarea.solid {
+  border-color: var(--border);
+  background-color: rgba(var(--spotlight-secondary), 1);
+}
+
+.arkynTextarea.solid.errorTrue {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynTextarea:not(.opacityTrue).solid.focusedTrue {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynTextarea.outline {
+  border-color: var(--border);
+}
+
+.arkynTextarea.outline.errorTrue {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynTextarea:not(.opacityTrue).outline.focusedTrue {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+
+/* SIZE */
+.arkynTextarea.md textarea {
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
+.arkynTextarea.md textarea::placeholder {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.arkynTextarea.lg textarea {
+  line-height: 16px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.arkynTextarea.lg textarea::placeholder {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+}

package/src/components/tooltip/index.tsx

@@ -0,0 +1,172 @@
+import {
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import "./styles.css";
+
+type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  text: string;
+  children: ReactNode;
+  orientation?: "top" | "right" | "bottom" | "left";
+  size?: "md" | "lg";
+};
+
+/**
+ * Tooltip component - displays contextual information on hover with smart positioning
+ *
+ * @param props - Tooltip component properties
+ * @param props.text - Text content to display in the tooltip
+ * @param props.children - Element that triggers the tooltip on hover
+ * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
+ * @param props.size - Tooltip size variant. Default: "lg"
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Tooltip JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip text="This is a helpful tip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * // Tooltip with different orientations
+ * <Tooltip text="Left tooltip" orientation="left">
+ *   <span>Hover for left tooltip</span>
+ * </Tooltip>
+ *
+ * <Tooltip text="Right tooltip" orientation="right">
+ *   <span>Hover for right tooltip</span>
+ * </Tooltip>
+ *
+ * // Different sizes
+ * <Tooltip text="Small tooltip" size="md">
+ *   <button>Small tooltip</button>
+ * </Tooltip>
+ *
+ * <Tooltip text="Large tooltip" size="lg">
+ *   <button>Large tooltip</button>
+ * </Tooltip>
+ *
+ * // Smart positioning - automatically adjusts if doesn't fit
+ * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
+ *   <button className="near-edge">Smart positioning</button>
+ * </Tooltip>
+ *
+ * // Complete example with custom styling
+ * <Tooltip
+ *   text="Save your changes before proceeding"
+ *   orientation="bottom"
+ *   size="lg"
+ *   className="custom-tooltip"
+ * >
+ *   <IconButton icon={SaveIcon} />
+ * </Tooltip>
+ *
+ * // Multiple tooltips on same page
+ * <div className="toolbar">
+ *   <Tooltip text="Create new file" orientation="bottom">
+ *     <IconButton icon={PlusIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Open existing file" orientation="bottom">
+ *     <IconButton icon={FolderIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Delete selected file" orientation="bottom">
+ *     <IconButton icon={TrashIcon} />
+ *   </Tooltip>
+ * </div>
+ * ```
+ */
+
+function Tooltip(props: TooltipProps) {
+  const {
+    text,
+    size = "lg",
+    children,
+    orientation = "top",
+    className: baseClassName = "",
+    ...rest
+  } = props;
+
+  const tooltipId = useId();
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [adjustedOrientation, setAdjustedOrientation] = useState(orientation);
+
+  useEffect(() => {
+    const checkTooltipPosition = () => {
+      if (!tooltipRef.current) return;
+      const tooltipText = document.getElementById(tooltipId) as HTMLElement;
+      if (!tooltipText) return;
+
+      setAdjustedOrientation(orientation);
+
+      requestAnimationFrame(() => {
+        const rect = tooltipText.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        let newOrientation = orientation;
+
+        if (orientation === "left" && rect.left < 0) {
+          newOrientation = "right";
+        } else if (orientation === "right" && rect.right > viewportWidth) {
+          newOrientation = "left";
+        } else if (orientation === "top" && rect.top < 0) {
+          newOrientation = "bottom";
+        } else if (orientation === "bottom" && rect.bottom > viewportHeight) {
+          newOrientation = "top";
+        }
+
+        if (newOrientation === "right" && rect.right > viewportWidth) {
+          newOrientation = "left";
+        } else if (newOrientation === "left" && rect.left < 0) {
+          newOrientation = "right";
+        } else if (
+          newOrientation === "bottom" &&
+          rect.bottom > viewportHeight
+        ) {
+          newOrientation = "top";
+        } else if (newOrientation === "top" && rect.top < 0) {
+          newOrientation = "bottom";
+        }
+
+        setAdjustedOrientation(newOrientation);
+      });
+    };
+
+    const tooltip = tooltipRef.current;
+    if (!tooltip) return;
+
+    const handleMouseEnter = () => {
+      setTimeout(checkTooltipPosition, 1);
+    };
+
+    tooltip.addEventListener("mouseenter", handleMouseEnter);
+    window.addEventListener("resize", checkTooltipPosition);
+
+    return () => {
+      tooltip.removeEventListener("mouseenter", handleMouseEnter);
+      window.removeEventListener("resize", checkTooltipPosition);
+    };
+  }, [orientation, tooltipId]);
+
+  const className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;
+
+  return (
+    <div className={className.trim()} {...rest} ref={tooltipRef}>
+      {children}
+      <div className="arkynTooltipText" id={tooltipId}>
+        {text}
+      </div>
+    </div>
+  );
+}
+
+export { Tooltip };

package/src/hooks/useForm.ts

@@ -0,0 +1,55 @@
+import { useContext } from "react";
+import { formContext } from "../providers/formProvider";
+
+/**
+ * useForm hook - provides access to form context data including field errors
+ *
+ * @returns Form context object containing:
+ * - `fieldErrors`: Object with field validation errors indexed by field name
+ *
+ * @example
+ * ```tsx
+ * // Basic usage in a component
+ * function MyComponent() {
+ *   const { fieldErrors } = useForm();
+ *
+ *   return (
+ *     <Input
+ *       name="email"
+ *       errorMessage={fieldErrors?.email}
+ *     />
+ *   );
+ * }
+ *
+ * // Usage with FormProvider
+ * function App() {
+ *   const errors = { email: "Invalid email format" };
+ *
+ *   return (
+ *     <FormProvider fieldErrors={errors}>
+ *       <MyForm />
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ * // Checking for specific field errors
+ * function FormField() {
+ *   const { fieldErrors } = useForm();
+ *   const hasError = !!fieldErrors?.username;
+ *
+ *   return (
+ *     <div>
+ *       <Input name="username" />
+ *       {hasError && <span>Error: {fieldErrors.username}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+function useForm() {
+  const context = useContext(formContext);
+  return context;
+}
+
+export { useForm };

package/src/hooks/useScopedParams.ts

@@ -1,10 +1,90 @@
-import { useLocation } from "react-router";
-
 type ParamsType = Record<string, string | number | boolean | undefined>;
 
-function useScopedParams(scope: string = "") {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
+/**
+ * Utility function to manage URL search parameters with optional scoping.
+ * Provides functionality to get parameters and generate updated search strings
+ * while maintaining existing parameters.
+ *
+ * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
+ * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
+ *
+ * @returns Object containing parameter management functions:
+ * @returns getParam - Function to get a parameter value by key (considers scope if provided)
+ * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
+ *
+ * @example
+ * ```tsx
+ * // Basic usage without scope
+ * const searchString = "page=1&filter=active";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString);
+ *
+ * // Get a parameter value
+ * const page = getParam('page'); // Returns "1"
+ * const filter = getParam('filter'); // Returns "active"
+ *
+ * // Generate search string with new/updated parameters
+ * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
+ * // Result: "?page=2&filter=active&sort=name"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with scope
+ * const searchString = "filters:status=active&filters:category=tech&page=1";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
+ *
+ * // Get a scoped parameter value
+ * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
+ * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
+ *
+ * // Generate search string with scoped parameters
+ * const newSearch = getScopedSearch({
+ *   status: 'inactive',
+ *   category: 'sports',
+ *   price: 100,
+ *   discount: undefined // This will remove 'filters:discount' from URL if it exists
+ * });
+ * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Real-world usage with React Router
+ * import { useLocation, useNavigate } from 'react-router-dom';
+ *
+ * function ProductFilter() {
+ *   const location = useLocation();
+ *   const navigate = useNavigate();
+ *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
+ *
+ *   const handleFilterChange = (newFilters: Record<string, any>) => {
+ *     const searchString = getScopedSearch(newFilters);
+ *     navigate({ search: searchString });
+ *   };
+ *
+ *   const currentCategory = getParam('category');
+ *   const currentPrice = getParam('price');
+ *
+ *   return (
+ *     <div>
+ *       <p>Current category: {currentCategory || 'All'}</p>
+ *       <p>Current price filter: {currentPrice || 'None'}</p>
+ *
+ *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
+ *         Electronics
+ *       </button>
+ *
+ *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
+ *         Clear Filters
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+function useScopedParams(searchString: string, scope: string = "") {
+  const searchParams = new URLSearchParams(searchString);
   const prefix = scope ? `${scope}:` : "";
 
   const updateSearchParams = (params: ParamsType) => {

package/src/hooks/useScrollLock.ts

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+
+/**
+ * useScrollLock hook - manages body scroll blocking for overlays
+ *
+ * @param isLocked - Whether the body scroll should be locked
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [isModalOpen, setIsModalOpen] = useState(false);
+ * useScrollLock(isModalOpen);
+ *
+ * // In a modal component
+ * function Modal({ isVisible }) {
+ *   useScrollLock(isVisible);
+ *
+ *   return isVisible ? (
+ *     <div className="modal">
+ *       <div className="modal-content">
+ *         Modal content
+ *       </div>
+ *     </div>
+ *   ) : null;
+ * }
+ *
+ * // In a drawer component
+ * function Drawer({ isOpen }) {
+ *   useScrollLock(isOpen);
+ *
+ *   return (
+ *     <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
+ *       Drawer content
+ *     </aside>
+ *   );
+ * }
+ * ```
+ */
+
+function useScrollLock(isLocked: boolean): void {
+  useEffect(() => {
+    if (isLocked) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isLocked]);
+}
+
+export { useScrollLock };

package/src/hooks/useSlider.ts

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+type UseSliderReturnProps = [number, (number: number) => void];
+
+/**
+ * useSlider hook - manages slider value state with boundary validation
+ *
+ * @param defaultValue - Initial value for the slider (0-100). Default: 0
+ *
+ * @returns Array containing current slider value and setter function
+ * - [0]: Current slider value (number between 0-100)
+ * - [1]: Function to update slider value with boundary validation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [value, setValue] = useSlider();
+ *
+ * // With default value
+ * const [value, setValue] = useSlider(50);
+ *
+ * // Usage in component
+ * function SliderComponent() {
+ *   const [sliderValue, changeSliderValue] = useSlider(25);
+ *
+ *   return (
+ *     <Slider value={sliderValue} onChange={changeSliderValue} />
+ *   );
+ * }
+ * ```
+ */
+
+function useSlider(defaultValue?: number): UseSliderReturnProps {
+  function getDefaultValue() {
+    if (!defaultValue) return 0;
+    if (defaultValue <= 0) return 0;
+    if (defaultValue >= 100) return 100;
+    return defaultValue;
+  }
+
+  const [sliderValue, setSliderValue] = useState(getDefaultValue());
+
+  function changeSliderValue(value: number) {
+    if (value <= 0) return setSliderValue(0);
+    if (value >= 100) return setSliderValue(100);
+    return setSliderValue(value);
+  }
+
+  return [sliderValue, changeSliderValue];
+}
+
+export { useSlider };

package/src/index.ts

@@ -1,80 +1,44 @@
-// Data Display
-export {
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "./components/Alert";
-export { Badge } from "./components/Badge";
-export { Card } from "./components/Card";
-export { Divider } from "./components/Divider";
-export { Skeleton } from "./components/Skeleton";
-export {
-  TableBody,
-  TableCaption,
-  TableContainer,
-  TableFooter,
-  TableHeader,
-} from "./components/Table";
+// components
+export { AlertContainer } from "./components/alert/alertContainer";
+export { AlertContent } from "./components/alert/alertContent";
+export { AlertDescription } from "./components/alert/alertDescription";
+export { AlertIcon } from "./components/alert/alertIcon";
+export { AlertTitle } from "./components/alert/alertTitle";
+export { AudioPlayer } from "./components/audioPlayer";
+export { Badge } from "./components/badge";
+export { Button } from "./components/button";
+export { CardTabButton } from "./components/cardTab/cardTabButton";
+export { CardTabContainer } from "./components/cardTab/cardTabContainer";
+export { Checkbox } from "./components/checkbox";
+export { CurrencyInput } from "./components/currencyInput";
+export { Divider } from "./components/divider";
+export { DrawerContainer } from "./components/drawer/drawerContainer";
+export { DrawerHeader } from "./components/drawer/drawerHeader";
+export { FieldError } from "./components/fieldError";
+export { FieldLabel } from "./components/fieldLabel";
+export { FieldWrapper } from "./components/fieldWrapper";
+export { IconButton } from "./components/iconButton";
+export { Input } from "./components/input";
+export { MaskedInput } from "./components/maskedInput";
+export { ModalContainer } from "./components/modal/modalContainer";
+export { ModalFooter } from "./components/modal/modalFooter";
+export { ModalHeader } from "./components/modal/modalHeader";
+export { MultiSelect } from "./components/multiSelect";
+export { PhoneInput } from "./components/phoneInput";
+export { RadioBox } from "./components/radio/radioBox";
+export { RadioGroup } from "./components/radio/radioGroup";
+export { Slider } from "./components/slider";
+export { Switch } from "./components/switch";
+export { TabButton } from "./components/tab/tabButton";
+export { TabContainer } from "./components/tab/tabContainer";
+export { Textarea } from "./components/textarea";
+export { Tooltip } from "./components/tooltip";
 
-// Form
-export { AudioUpload } from "./components/AudioUpload";
-export { Button } from "./components/Button";
-export { Checkbox } from "./components/Checkbox";
-export { FileUpload } from "./components/FileUpload";
-export { FormController, FormError, FormLabel } from "./components/Form";
-export { IconButton } from "./components/IconButton";
-export { ImageUpload } from "./components/ImageUpload";
-export { Input } from "./components/Input";
-export { MultiSelect } from "./components/MultiSelect";
-export { PhoneInput } from "./components/PhoneInput";
-export { RadioBox, RadioGroup } from "./components/Radio";
-export { RichText } from "./components/RichText";
-export { Select } from "./components/Select";
-export { Slider } from "./components/Slider";
-export { Switch } from "./components/Switch";
-export { Textarea } from "./components/Textarea";
-
-// Navigation
-export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
-export { Pagination } from "./components/Pagination";
-export { TabButton, TabContainer } from "./components/Tabs";
-
-// Overlay
-export { DrawerContainer, DrawerHeader } from "./components/Drawer";
-export { ModalContainer, ModalFooter, ModalHeader } from "./components/Modal";
-export { Popover } from "./components/Popover";
-export { Toast } from "./components/Toast";
-export { Tooltip } from "./components/Tooltip";
-
-// Hooks
-export { useFormController } from "./components/Form/FormController";
-export { useAutomation } from "./hooks/useAutomation";
-export { useDrawer } from "./hooks/useDrawer";
-export { useFieldErrors } from "./hooks/useFieldErrors";
-export { useFormKey } from "./hooks/useFormKey";
-export { useHydrated } from "./hooks/useHydrated";
-export { useModal } from "./hooks/useModal";
+// hooks
+export { useForm } from "./hooks/useForm";
 export { useScopedParams } from "./hooks/useScopedParams";
-export { useToast } from "./hooks/useToast";
-
-// Providers
-export { DrawerProvider } from "./provider/DrawerProvider";
-export { FormKeyProvider } from "./provider/FormKeyProvider";
-export { GoogleProvider } from "./provider/GoogleProvider";
-export { ModalProvider } from "./provider/ModalProvider";
-export { ToastProvider } from "./provider/ToastProvider";
-
-// Others
-export { ClientOnly } from "./components/ClientOnly";
-export { FacebookPixel } from "./components/FacebookPixel";
-export { GoogleMap } from "./components/GoogleMap";
-export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
-export { GoogleTagManager } from "./components/GoogleTagManager";
+export { useScrollLock } from "./hooks/useScrollLock";
+export { useSlider } from "./hooks/useSlider";
 
-// Services
-export { getHtmlFromRichTextValue } from "./services/getHtmlFromRichTextValue";
-export { getRichTextValueFromHtml } from "./services/getRichTextValueFromHtml";
-export { isHtml } from "./services/isHtml";
-export { morpheme } from "./services/morpheme";
+// providers
+export { FormProvider } from "./providers/formProvider";