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

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

package/src/utils/phoneInputUtilities.ts

@@ -1,138 +0,0 @@
-import { countries } from "@arkyn/templates";
-
-type CountryType = {
-  name: string;
-  code: string;
-  iso: string;
-  prefix: null | string;
-  flag: string;
-  mask: string;
-};
-
-function clear(value: string) {
-  return value && value.replace(/[^0-9]/g, "");
-}
-
-const TYPES = {
-  EIGHT: "(99) 9999-9999",
-  NINE: "(99) 99999-9999",
-};
-
-function applyMask(value: string, maskPattern: string) {
-  let result = "";
-  let digitIndex = 0;
-
-  for (let i = 0; i < maskPattern.length; i++) {
-    if (maskPattern[i] === "9") {
-      if (digitIndex < value.length) {
-        result += value[digitIndex];
-        digitIndex++;
-      } else {
-        break;
-      }
-    } else {
-      if (digitIndex < value.length) {
-        result += maskPattern[i];
-      } else {
-        break;
-      }
-    }
-  }
-
-  return result;
-}
-
-function getMask(value: string): "NINE" | "EIGHT" {
-  const mask = value.length > 10 ? "NINE" : "EIGHT";
-  return mask;
-}
-
-const MAX_LENGTH = clear(TYPES.NINE).length;
-
-function formatPhoneNumber(phoneNumber: string, country: CountryType) {
-  if (country.code === "+55") {
-    let value = clear(phoneNumber);
-    const mask = getMask(value);
-
-    let nextLength = value.length;
-    if (nextLength > MAX_LENGTH) return;
-
-    value = applyMask(value, TYPES[mask] as "EIGHT" | "NINE");
-    return value;
-  }
-
-  const mask = country.mask;
-  let formattedNumber = mask;
-
-  if (country.prefix) {
-    const prefixRegex = /\$+/g;
-    formattedNumber = formattedNumber.replace(prefixRegex, country.prefix);
-  }
-
-  for (
-    let i = 0, j = 0;
-    i < formattedNumber.length && j < phoneNumber.length;
-    i++
-  ) {
-    if (formattedNumber[i] === "_") {
-      formattedNumber =
-        formattedNumber.substring(0, i) +
-        phoneNumber[j] +
-        formattedNumber.substring(i + 1);
-      j++;
-    }
-  }
-
-  return formattedNumber;
-}
-
-function getCountryWithPrefixCode(countryCode: string, prefix: string) {
-  const country = countries.find(
-    (country) => country.code === countryCode && country.prefix === prefix
-  );
-  if (!country) return null;
-  return country;
-}
-
-function getCountryWithoutPrefixCode(countryCode: string) {
-  const country = countries.find((country) => country.code === countryCode);
-  if (!country) return null;
-  return country;
-}
-
-function getDefaultFormatPhoneNumber(defaultValue: string) {
-  const countryCode = defaultValue.split(" ")[0].split("-")[0];
-  const prefixCode = defaultValue.split(" ")[0].split("-")[1];
-  const phoneNumber = defaultValue.split(" ")[1];
-
-  if (!countryCode || !phoneNumber) {
-    return { country: null, formattedNumber: "" };
-  }
-
-  if (prefixCode) {
-    const country = getCountryWithPrefixCode(countryCode, prefixCode);
-    if (!country) return { country: null, formattedNumber: "" };
-
-    const formattedNumber = formatPhoneNumber(phoneNumber, country);
-    const response = { country, formattedNumber };
-
-    return response;
-  }
-
-  const country = getCountryWithoutPrefixCode(countryCode);
-  if (!country) return { country: null, formattedNumber: "" };
-
-  const formattedNumber = formatPhoneNumber(phoneNumber, country);
-  const response = { country, formattedNumber };
-
-  return response;
-}
-
-export {
-  getDefaultFormatPhoneNumber,
-  applyMask,
-  clear,
-  getMask,
-  MAX_LENGTH,
-  TYPES,
-};

package/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/.server/**/*.ts",
-    "**/.server/**/*.tsx",
-    "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
-  ],
-  "exclude": ["node_modules", "dist"],
-  "compilerOptions": {
-    "outDir": "./dist",
-    "composite": false,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": false,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "preserveWatchOutput": true,
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "module": "ESNext",
-    "target": "ESNext",
-    "paths": {
-      "@components": ["./src/index.ts"],
-      "@components/*": ["./src/*"]
-    }
-  }
-}

package/variables.css

@@ -1,41 +0,0 @@
-:root {
-  /* background */
-  --background: #f1f5f9;
-  --background-foreground: #ffffff;
-
-  /* modal, drawer, popover... */
-  --card: #ffffff;
-  --card-foreground-primary: #f8fafc;
-  --card-foreground-secondary: #f1f5f9;
-  --card-foreground-third: #e2e8f0;
-
-  /* skeleton */
-  --skeleton: #f8fafc;
-  --skeleton-foreground: #f1f5f9;
-
-  /* text */
-  --text-heading: #0f172a;
-  --text-body: #475569;
-  --text-muted: #94a3b8;
-
-  /* border */
-  --border: #e2e8f0;
-
-  /* tooltip */
-  --tooltip-text: #f1f5f9;
-  --tooltip-background: #0f172a;
-
-  /* spotlight */
-  --spotlight-primary: 17, 109, 220; /* #116ddc */
-  --spotlight-secondary: 248, 250, 252; /* #f8fafc */
-  --spotlight-success: 16, 185, 129; /* #10b981 */
-  --spotlight-danger: 244, 63, 94; /* #f43f5e */
-  --spotlight-info: 14, 165, 233; /* #0ea5e9 */
-  --spotlight-warning: 249, 115, 22; /* #f97316 */
-
-  /* toast */
-  --toast-success: 16, 185, 129; /* #10B981 */
-  --toast-danger: 225, 29, 72; /* #E11D48 */
-  --toast-info: 14, 165, 233; /* #0EA5E9 */
-  --toast-warning: 251, 146, 60; /* #FB923C */
-}

package/vite.config.ts

@@ -1,31 +0,0 @@
-import react from "@vitejs/plugin-react";
-import { resolve } from "path";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: "automatic",
-    }),
-  ],
-  build: {
-    minify: true,
-    outDir: "./dist",
-    rollupOptions: {
-      external: [
-        "@react-input/mask",
-        "framer-motion",
-        "lucide-react",
-        "react",
-        "react-dom",
-        "react/jsx-runtime",
-      ],
-      output: { format: "esm" },
-    },
-    lib: {
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "@arkyn/components",
-      fileName: "bundle",
-    },
-  },
-});

package/vitest.config.ts

@@ -1,5 +0,0 @@
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  resolve: { mainFields: ["module"] },
-});