@arkyn/components 3.0.1-beta.17 → 3.0.1-beta.170

package/src/components/tooltip/styles.css

@@ -1,112 +0,0 @@
-.arkynTooltip {
-  position: relative;
-  display: block;
-}
-
-.arkynTooltipText {
-  visibility: hidden;
-
-  opacity: 0;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  transition: 0.15s all ease-out;
-
-  border-radius: 4px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-weight: 400;
-  color: var(--tooltip-text);
-  background-color: var(--tooltip-background);
-
-  z-index: 9999;
-}
-
-.arkynTooltip.lg .arkynTooltipText {
-  font-size: 14px;
-  line-height: 14px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip.md .arkynTooltipText {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip:hover .arkynTooltipText {
-  opacity: 1;
-  visibility: visible;
-}
-
-.arkynTooltip.top .arkynTooltipText {
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.top .arkynTooltipText::before {
-  content: "";
-  top: 100%;
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 6px 6px 0 6px;
-  bottom: 20px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText {
-  top: 50%;
-  right: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText::before {
-  content: "";
-  top: 50%;
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 0 6px 6px;
-  left: 100%;
-  position: absolute;
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText {
-  top: 50%;
-  left: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 6px 6px 0;
-  top: 50%;
-  left: 0;
-  transform: translate(-100%, -50%);
-  position: absolute;
-}
-
-.arkynTooltip.bottom .arkynTooltipText {
-  top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.bottom .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 0 6px 6px 6px;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  position: absolute;
-}

package/src/hooks/useForm.ts

@@ -1,55 +0,0 @@
-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,111 +0,0 @@
-type ParamsType = Record<string, string | number | boolean | undefined>;
-
-/**
- * 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) => {
-    Object.entries(params).forEach(([key, value]) => {
-      if (value === undefined) {
-        searchParams.delete(`${prefix}${key}`);
-      } else {
-        searchParams.set(`${prefix}${key}`, String(value));
-      }
-    });
-  };
-
-  return {
-    getParam: (key: string) => searchParams.get(`${prefix}${key}`),
-    getScopedSearch: (params: ParamsType) => {
-      updateSearchParams(params);
-      let search = searchParams.toString();
-      if (search) search = "?" + search;
-      return search;
-    },
-  };
-}
-
-export { useScopedParams };

package/src/hooks/useScrollLock.ts

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

@@ -1,52 +0,0 @@
-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,44 +0,0 @@
-// 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";
-
-// hooks
-export { useForm } from "./hooks/useForm";
-export { useScopedParams } from "./hooks/useScopedParams";
-export { useScrollLock } from "./hooks/useScrollLock";
-export { useSlider } from "./hooks/useSlider";
-
-// providers
-export { FormProvider } from "./providers/formProvider";

package/src/providers/formProvider.tsx

@@ -1,88 +0,0 @@
-import { ReactNode, createContext, cloneElement, isValidElement } from "react";
-
-type FormContextProps = {
-  fieldErrors: { [x: string]: any };
-};
-
-type FormProviderProps = {
-  children: ReactNode;
-  fieldErrors?: any;
-  form?: React.ReactElement;
-};
-
-const formContext = createContext({} as FormContextProps);
-
-/**
- * FormProvider component - provides form context including field errors to child components
- *
- * @param props - FormProvider component properties
- * @param props.children - React elements that will have access to the form context
- * @param props.fieldErrors - Object containing validation errors indexed by field name
- * @param props.form - Optional form element to wrap the children with
- *
- * @returns FormProvider JSX element that wraps children with form context
- *
- * @example
- * ```tsx
- * // Basic form provider with field errors
- * function App() {
- *   const errors = {
- *     email: "Invalid email format",
- *     password: "Password is required"
- *   };
- *
- *   return (
- *     <FormProvider fieldErrors={errors}>
- *       <Input name="email" label="Email" />
- *       <Input name="password" label="Password" type="password" />
- *     </FormProvider>
- *   );
- * }
- *
- * // Form provider with custom form element
- * function FormWithValidation() {
- *   const [errors, setErrors] = useState({});
- *
- *   const handleSubmit = (e) => {
- *     e.preventDefault();
- *     // validation logic
- *   };
- *
- *   return (
- *     <FormProvider
- *       fieldErrors={errors}
- *       form={<form onSubmit={handleSubmit} />}
- *     >
- *       <Input name="username" label="Username" />
- *       <Button type="submit">Submit</Button>
- *     </FormProvider>
- *   );
- * }
- *
- * // Using with useForm hook
- * function FormField() {
- *   const { fieldErrors } = useForm();
- *
- *   return (
- *     <Input
- *       name="email"
- *       label="Email"
- *       errorMessage={fieldErrors?.email}
- *     />
- *   );
- * }
- * ```
- */
-
-function FormProvider(props: FormProviderProps) {
-  const { children, fieldErrors, form } = props;
-
-  return (
-    <formContext.Provider value={{ fieldErrors }}>
-      {!form && children}
-      {form && cloneElement(form, form.props, children)}
-    </formContext.Provider>
-  );
-}
-
-export { formContext, FormProvider };

package/src/services/iconRenderer.tsx

@@ -1,23 +0,0 @@
-import { LucideIcon } from "lucide-react";
-
-type IconRendererProps = {
-  iconSize: number;
-  className?: string;
-  icon?: LucideIcon | string;
-  show?: boolean;
-};
-
-function IconRenderer(props: IconRendererProps) {
-  const { iconSize, icon: Icon, className, show = true } = props;
-
-  if (!show) return <></>;
-  if (!Icon) return <></>;
-
-  if (typeof Icon === "string") {
-    return <p className={className}>{Icon}</p>;
-  }
-
-  return <Icon size={iconSize} className={className} strokeWidth={2.5} />;
-}
-
-export { IconRenderer };

package/src/services/maskCurrencyValues.ts

@@ -1,54 +0,0 @@
-import { formatToCurrency, removeNonNumeric } from "@arkyn/shared";
-
-type Locale =
-  | "USD"
-  | "EUR"
-  | "JPY"
-  | "GBP"
-  | "AUD"
-  | "CAD"
-  | "CHF"
-  | "CNY"
-  | "SEK"
-  | "NZD"
-  | "BRL"
-  | "INR"
-  | "RUB"
-  | "ZAR"
-  | "MXN"
-  | "SGD"
-  | "HKD"
-  | "NOK"
-  | "KRW"
-  | "TRY"
-  | "IDR"
-  | "THB";
-
-function normalizeValue(number: string | number) {
-  let safeNumber = number;
-
-  if (typeof number === "string") {
-    safeNumber = +removeNonNumeric(number);
-    if (safeNumber % 1 !== 0) safeNumber = safeNumber.toFixed(2);
-  } else {
-    safeNumber = Number.isInteger(number)
-      ? Number(number) * 10 ** 2
-      : number.toFixed(2);
-  }
-
-  return +removeNonNumeric(String(safeNumber)) / 10 ** 2;
-}
-
-function maskCurrencyValues(
-  inputFieldValue: string | number | undefined,
-  locale: Locale
-): [number, string] {
-  if (!inputFieldValue) return [0, formatToCurrency(0, locale)];
-
-  const value = normalizeValue(inputFieldValue);
-  const maskedValue = formatToCurrency(value, locale);
-
-  return [value, maskedValue];
-}
-
-export { maskCurrencyValues };