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

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

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

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

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

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

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

@@ -0,0 +1,312 @@
+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 };