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

package/src/components/cardTab/cardTabContainer/index.tsx

@@ -1,121 +0,0 @@
-import { HTMLAttributes, ReactNode, useState } from "react";
-
-import { TabProvider } from "../cardTabContext";
-import "./styles.css";
-
-type CardTabContainerProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  "onClick" | "children" | "ref"
-> & {
-  children: ReactNode;
-  disabled?: boolean;
-  defaultValue?: string;
-  onChange?: (index: string) => void;
-};
-
-/**
- * CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
- *
- * @param props - CardTabContainer component properties
- * @param props.children - CardTabButton components and other content (required)
- * @param props.disabled - Whether all tab buttons are disabled. Default: false
- * @param props.defaultValue - Initial tab value to be selected
- * @param props.onChange - Callback function called when tab changes, receives the tab value
- *
- * **...Other valid HTML nav properties except onClick, children, and ref**
- *
- * @returns CardTabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <CardTabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <CardTabButton value="dashboard">Dashboard</CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <CardTabContainer disabled>
- *   <CardTabButton value="tab1">Tab 1</CardTabButton>
- *   <CardTabButton value="tab2">Tab 2</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <CardTabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <CardTabButton value="profile">Profile</CardTabButton>
- *         <CardTabButton value="account">Account</CardTabButton>
- *         <CardTabButton value="notifications">Notifications</CardTabButton>
- *       </CardTabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-
-function CardTabContainer(props: CardTabContainerProps) {
-  const {
-    children,
-    onChange,
-    defaultValue,
-    disabled = false,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const [currentTab, setCurrentTab] = useState(defaultValue || "");
-
-  const className = `arkynCardTabContainer ${baseClassName || ""}`;
-
-  function changeCurrentTab(value: string) {
-    setCurrentTab(value);
-    if (onChange) onChange(value);
-  }
-
-  return (
-    <TabProvider
-      disabled={disabled}
-      currentTab={currentTab}
-      changeCurrentTab={changeCurrentTab}
-    >
-      <nav className={className.trim()} {...rest}>
-        {children}
-      </nav>
-    </TabProvider>
-  );
-}
-
-export { CardTabContainer };

package/src/components/cardTab/cardTabContainer/styles.css

@@ -1,9 +0,0 @@
-.arkynCardTabContainer {
-  display: flex;
-  align-items: center;
-
-  border: 2px solid var(--border);
-  border-radius: 8px;
-  width: max-content;
-  overflow: hidden;
-}

package/src/components/cardTab/cardTabContext.tsx

@@ -1,30 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-type CardTabContextProps = {
-  disabled: boolean;
-  currentTab: string;
-  changeCurrentTab: (tab: string) => void;
-};
-
-type TabProviderProps = {
-  children: ReactNode;
-  disabled: boolean;
-  currentTab: string;
-  changeCurrentTab: (tab: string) => void;
-};
-
-const CardTabContext = createContext({} as CardTabContextProps);
-
-function useCardTab() {
-  return useContext(CardTabContext);
-}
-
-function TabProvider(props: TabProviderProps) {
-  return (
-    <CardTabContext.Provider value={props}>
-      {props.children}
-    </CardTabContext.Provider>
-  );
-}
-
-export { TabProvider, useCardTab };

package/src/components/checkbox/index.tsx

@@ -1,158 +0,0 @@
-import { Check } from "lucide-react";
-import { ButtonHTMLAttributes, useId, useRef, useState } from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { FieldWrapper } from "../fieldWrapper";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import "./styles.css";
-
-type CheckboxProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  | "size"
-  | "prefix"
-  | "type"
-  | "name"
-  | "defaultValue"
-  | "value"
-  | "onChange"
-  | "onSelect"
-  | "onClick"
-> & {
-  label?: string;
-  errorMessage?: boolean;
-
-  size?: "md" | "lg" | "sm";
-
-  name: string;
-  value?: string;
-
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onCheck?: (value: string) => void;
-};
-
-/**
- * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
- *
- * @param props - Checkbox component properties
- * @param props.name - Required field name for form handling and hidden input identification
- * @param props.label - Optional label text to display next to the checkbox
- * @param props.errorMessage - Error state indicator to display validation errors
- * @param props.size - Size variant of the checkbox. Default: "md"
- * @param props.value - Optional value to be used when checkbox is checked. Default: "checked"
- * @param props.checked - Controlled checked state of the checkbox
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- *
- * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
- *
- * @returns Checkbox JSX element wrapped in FieldWrapper with optional label and error
- *
- * @example
- * ```tsx
- * // Basic checkbox
- * <Checkbox name="terms" label="I agree to the terms and conditions" />
- *
- * // Checkbox with custom value and validation
- * <Checkbox
- *   name="newsletter"
- *   label="Subscribe to newsletter"
- *   value="subscribed"
- *   errorMessage={errors.newsletter}
- * />
- *
- * // Large checkbox with controlled state
- * <Checkbox
- *   name="premium"
- *   label="Enable premium features"
- *   size="lg"
- *   checked={isPremium}
- *   onCheck={(value) => setIsPremium(!!value)}
- * />
- *
- * // Small checkbox with default checked state
- * <Checkbox
- *   name="remember"
- *   label="Remember me"
- *   size="sm"
- *   defaultChecked={true}
- *   value="remember_user"
- * />
- *
- * // Checkbox with custom styling and callback
- * <Checkbox
- *   name="notifications"
- *   label="Enable notifications"
- *   className="custom-checkbox"
- *   onCheck={(value) => console.log('Notification setting:', value)}
- *   disabled={isLoading}
- * />
- * ```
- */
-
-function Checkbox(props: CheckboxProps) {
-  const {
-    id,
-    name,
-    className: baseClassName = "",
-    size = "md",
-    errorMessage: baseErrorMessage,
-    defaultChecked = false,
-    label,
-    checked: baseChecked = null,
-    onCheck,
-    value,
-    ...rest
-  } = props;
-
-  const { fieldErrors } = useForm();
-
-  const checkboxRef = useRef<HTMLInputElement>(null);
-  const checkboxId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-
-  const [isChecked, setIsChecked] = useState(defaultChecked || false);
-
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  const errorClass = isError ? "errorTrue" : "errorFalse";
-  const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-
-  const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass} ${baseClassName}`;
-
-  function handleCheck() {
-    const defaultChecked = isChecked;
-    setIsChecked(!defaultChecked);
-    onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-  }
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <button
-        id={checkboxId}
-        type="button"
-        className={className}
-        onClick={handleCheck}
-        {...rest}
-      >
-        <input
-          type="hidden"
-          name={name}
-          ref={checkboxRef}
-          value={currentChecked ? value || "checked" : ""}
-        />
-
-        <Check />
-      </button>
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { Checkbox };

package/src/components/checkbox/styles.css

@@ -1,78 +0,0 @@
-.arkynCheckbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 2px solid var(--border);
-  background-color: rgba(var(--spotlight-secondary), 1);
-}
-
-.arkynCheckbox:hover {
-  cursor: pointer;
-}
-
-.arkynCheckbox > svg {
-  display: none;
-  stroke-width: 3px;
-}
-
-/* SIZE */
-.arkynCheckbox.sm {
-  min-height: 16px;
-  min-width: 16px;
-  max-height: 16px;
-  max-width: 16px;
-  border-radius: 4px;
-}
-
-.arkynCheckbox.sm > svg {
-  min-height: 12px;
-  min-width: 12px;
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynCheckbox.md {
-  min-height: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  max-width: 20px;
-  border-radius: 4px;
-}
-
-.arkynCheckbox.md > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-.arkynCheckbox.lg {
-  min-height: 24px;
-  min-width: 24px;
-  max-height: 24px;
-  max-width: 24px;
-  border-radius: 6px;
-}
-
-.arkynCheckbox.lg > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-/* CHECKED */
-.arkynCheckbox.checkedTrue {
-  background-color: rgb(var(--spotlight-primary), 1);
-  border-color: rgb(var(--spotlight-primary), 1);
-}
-
-.arkynCheckbox.checkedTrue > svg {
-  display: unset;
-  color: #fff;
-}
-
-.arkynCheckbox.errorTrue {
-  border-color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/currencyInput/index.tsx

@@ -1,312 +0,0 @@
-import { Loader2, LucideIcon } from "lucide-react";
-import {
-  ChangeEvent,
-  InputHTMLAttributes,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type FocusEvent,
-} from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-import { maskCurrencyValues } from "../../services/maskCurrencyValues";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-
-import "./style.css";
-
-type Locale =
-  | "USD"
-  | "EUR"
-  | "JPY"
-  | "GBP"
-  | "AUD"
-  | "CAD"
-  | "CHF"
-  | "CNY"
-  | "SEK"
-  | "NZD"
-  | "BRL"
-  | "INR"
-  | "RUB"
-  | "ZAR"
-  | "MXN"
-  | "SGD"
-  | "HKD"
-  | "NOK"
-  | "KRW"
-  | "TRY"
-  | "IDR"
-  | "THB";
-
-type CurrencyInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  | "size"
-  | "prefix"
-  | "name"
-  | "type"
-  | "max"
-  | "defaultValue"
-  | "value"
-  | "onChange"
-> & {
-  name: string;
-  locale: Locale;
-
-  label?: string;
-  errorMessage?: string;
-  isLoading?: boolean;
-
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "underline";
-
-  prefix?: string | LucideIcon;
-  suffix?: string | LucideIcon;
-  showAsterisk?: boolean;
-
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
-
-  max?: number;
-  value?: number;
-  defaultValue?: number | null;
-
-  onChange?: (
-    event: ChangeEvent<HTMLInputElement>,
-    originalValue: string,
-    maskedValue: string
-  ) => void;
-};
-
-/**
- * CurrencyInput component - used for currency input fields with automatic formatting based on locale
- *
- * @param props - CurrencyInput component properties
- * @param props.name - Required field name for form handling
- * @param props.locale - Currency locale for formatting (e.g., "USD", "EUR", "BRL", etc.)
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- * @param props.max - Maximum allowed value for the currency input
- * @param props.value - Controlled value (number) for the input
- * @param props.defaultValue - Default value (number) for uncontrolled usage
- * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
- *
- * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
- *
- * @returns CurrencyInput JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic currency input
- * <CurrencyInput name="price" locale="USD" placeholder="Enter price" />
- *
- * // Currency input with label and validation
- * <CurrencyInput
- *   name="salary"
- *   locale="BRL"
- *   label="Monthly Salary"
- *   showAsterisk
- *   errorMessage="Please enter a valid amount"
- * />
- *
- * // Currency input with icons and loading state
- * <CurrencyInput
- *   name="budget"
- *   locale="EUR"
- *   label="Budget"
- *   leftIcon={DollarSignIcon}
- *   rightIcon={CalculatorIcon}
- *   isLoading
- * />
- *
- * // Currency input with max value and controlled state
- * <CurrencyInput
- *   name="limit"
- *   locale="USD"
- *   label="Credit Limit"
- *   max={10000}
- *   value={creditLimit}
- *   onChange={(e, original, masked) => setCreditLimit(Number(original))}
- *   variant="outline"
- * />
- *
- * // Large currency input with prefix/suffix
- * <CurrencyInput
- *   name="investment"
- *   locale="GBP"
- *   label="Investment Amount"
- *   size="lg"
- *   variant="underline"
- *   prefix="£"
- *   suffix="GBP"
- *   placeholder="Enter investment amount"
- * />
- * ```
- */
-
-function CurrencyInput(props: CurrencyInputProps) {
-  const {
-    name,
-    disabled,
-    title,
-    style,
-    variant = "solid",
-    label,
-    className: baseClassName = "",
-    value,
-    defaultValue,
-    max,
-    locale,
-    onChange,
-    prefix,
-    suffix,
-    isLoading = false,
-    leftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    errorMessage: baseErrorMessage,
-    showAsterisk,
-    rightIcon,
-    size = "md",
-    id,
-    ...rest
-  } = props;
-
-  const { fieldErrors } = useForm();
-  const [isFocused, setIsFocused] = useState(false);
-  const [maskedValue, setMaskedValue] = useState("0");
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  const loadingPosition = rightIcon ? "right" : "left";
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !inputRef?.current) return;
-    setIsFocused(true);
-    inputRef.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  const updateValues = (originalValue: string | number) => {
-    const [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(
-      originalValue,
-      locale
-    );
-
-    if (!max || calculatedValue <= max) {
-      setMaskedValue(calculatedMaskedValue);
-      return [calculatedValue, calculatedMaskedValue];
-    }
-
-    return maskCurrencyValues(originalValue, locale);
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const [originalValue, maskedValue] = updateValues(event.target.value);
-
-    onChange && onChange(event, String(originalValue), String(maskedValue));
-  };
-
-  useEffect(() => {
-    const currentValue = value || +defaultValue || undefined;
-    const [, maskedValue] = maskCurrencyValues(currentValue, locale);
-
-    setMaskedValue(maskedValue);
-  }, [locale, defaultValue, value]);
-
-  const hasPrefix = !!prefix ? "hasPrefix" : "";
-  const hasSuffix = !!suffix ? "hasSuffix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && (
-        <FieldLabel showAsterisk={showAsterisk} htmlFor={inputId}>
-          {label}
-        </FieldLabel>
-      )}
-
-      <section
-        title={title}
-        style={style}
-        onClick={handleSectionClick}
-        className={className}
-      >
-        <IconRenderer iconSize={iconSize} icon={prefix} className="prefix" />
-
-        <IconRenderer
-          show={showLeftSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />
-
-        <input
-          value={maskedValue}
-          disabled={disabled || isLoading}
-          readOnly={readOnly}
-          ref={inputRef}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          id={inputId}
-          {...rest}
-        />
-
-        <IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />
-
-        <IconRenderer
-          show={showRightSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer iconSize={iconSize} icon={suffix} className="suffix" />
-      </section>
-
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { CurrencyInput };