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

package/src/components/radio/radioGroup/index.tsx

@@ -1,150 +0,0 @@
-import { HTMLAttributes, useState } from "react";
-
-import { FieldError } from "../../../components/fieldError";
-import { FieldLabel } from "../../../components/fieldLabel";
-import { FieldWrapper } from "../../../components/fieldWrapper";
-import { useForm } from "../../../hooks/useForm";
-
-import { RadioProvider } from "../radioContext";
-import "./styles.css";
-
-type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
-  name: string;
-  label?: string;
-  showAsterisk?: boolean;
-  errorMessage?: string;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  size?: "sm" | "md" | "lg";
-};
-
-/**
- * RadioGroup component - used for creating a group of radio button options with shared state management
- *
- * @param props - RadioGroup component properties
- * @param props.name - Required field name for form handling and radio button grouping
- * @param props.label - Optional label text to display above the radio group
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the radio group
- * @param props.value - Controlled value for the selected radio option
- * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
- * @param props.onChange - Callback function called when radio selection changes, receives the selected value
- * @param props.size - Size variant for all radio buttons in the group. Default: "md"
- *
- * **...Other valid HTML properties for div element (except onChange)**
- *
- * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
- *
- * @example
- * ```tsx
- * // Basic radio group
- * <RadioGroup name="gender">
- *   <Radio value="male" label="Male" />
- *   <Radio value="female" label="Female" />
- *   <Radio value="other" label="Other" />
- * </RadioGroup>
- *
- * // Radio group with label and validation
- * <RadioGroup
- *   name="subscription"
- *   label="Choose your plan"
- *   showAsterisk
- *   errorMessage="Please select a subscription plan"
- * >
- *   <Radio value="basic" label="Basic Plan - $9.99/month" />
- *   <Radio value="premium" label="Premium Plan - $19.99/month" />
- *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
- * </RadioGroup>
- *
- * // Controlled radio group with callback
- * <RadioGroup
- *   name="theme"
- *   label="Select Theme"
- *   value={selectedTheme}
- *   onChange={(value) => setSelectedTheme(value)}
- *   size="lg"
- * >
- *   <Radio value="light" label="Light Theme" />
- *   <Radio value="dark" label="Dark Theme" />
- *   <Radio value="auto" label="Auto (System)" />
- * </RadioGroup>
- *
- * // Radio group with default selection
- * <RadioGroup
- *   name="language"
- *   label="Preferred Language"
- *   defaultValue="en"
- *   size="sm"
- * >
- *   <Radio value="en" label="English" />
- *   <Radio value="es" label="Spanish" />
- *   <Radio value="fr" label="French" />
- *   <Radio value="pt" label="Portuguese" />
- * </RadioGroup>
- *
- * // Radio group with custom styling and onChange handler
- * <RadioGroup
- *   name="difficulty"
- *   label="Select Difficulty Level"
- *   className="custom-radio-group"
- *   onChange={(value) => console.log('Selected difficulty:', value)}
- * >
- *   <Radio value="easy" label="Easy" />
- *   <Radio value="medium" label="Medium" />
- *   <Radio value="hard" label="Hard" />
- * </RadioGroup>
- * ```
- */
-
-function RadioGroup(props: RadioGroupProps) {
-  const {
-    defaultValue = "",
-    name,
-    label,
-    showAsterisk,
-    errorMessage: baseErrorMessage,
-    value: forceValue,
-    onChange,
-    size = "md",
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const [value, setValue] = useState(defaultValue);
-  const { fieldErrors } = useForm();
-
-  function handleChange(value: string) {
-    setValue(value);
-    if (onChange) onChange(value);
-  }
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-  const className = `arkynRadioGroup ${size} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}
-      <RadioProvider
-        isError={isError}
-        size={size}
-        value={forceValue || value}
-        handleChange={handleChange}
-      >
-        <input
-          style={{ display: "none" }}
-          type="text"
-          readOnly
-          name={name}
-          value={forceValue || value}
-        />
-
-        <div className={className.trim()} {...rest} />
-      </RadioProvider>
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { RadioGroup };

package/src/components/radio/radioGroup/styles.css

@@ -1,5 +0,0 @@
-.arkynRadioGroup {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-}

package/src/components/slider/index.tsx

@@ -1,132 +0,0 @@
-import { HTMLAttributes, useEffect, useRef, useState } from "react";
-
-import "./styles.css";
-
-type SliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
-  value: number;
-  onChange: (value: number) => void;
-  disabled?: boolean;
-  onDragging?: (value: boolean) => void;
-};
-
-/**
- * Slider component - interactive range input for selecting numeric values
- *
- * @param props - Slider component properties
- * @param props.value - Current slider value (0-100)
- * @param props.onChange - Callback function called when value changes
- * @param props.disabled - Disables slider interaction. Default: false
- * @param props.onDragging - Callback function called when dragging state changes
- *
- * **...Other valid HTML properties for div element**
- *
- * @returns Slider JSX element
- *
- * @example
- * ```tsx
- * // Basic slider
- * const [value, setValue] = useState(50);
- * <Slider value={value} onChange={setValue} />
- *
- * // Disabled slider
- * <Slider value={75} onChange={() => {}} disabled />
- *
- * // Slider with dragging callback
- * const [isDragging, setIsDragging] = useState(false);
- * <Slider
- *   value={value}
- *   onChange={setValue}
- *   onDragging={setIsDragging}
- * />
- *
- * // Complete example with useSlider hook
- * function SliderExample() {
- *   const [sliderValue, setSliderValue] = useSlider(25);
- *   const [isDragging, setIsDragging] = useState(false);
- *
- *   return (
- *     <Slider
- *       value={sliderValue}
- *       onChange={setSliderValue}
- *       onDragging={setIsDragging}
- *       className="custom-slider"
- *     />
- *   );
- * }
- * ```
- */
-
-function Slider(props: SliderProps) {
-  const {
-    onChange,
-    value,
-    disabled = false,
-    onDragging,
-    className = "",
-    ...rest
-  } = props;
-
-  const [isDragging, setIsDragging] = useState(false);
-  const sliderRef = useRef<HTMLDivElement>(null);
-
-  const handleMouseDown = () => setIsDragging(true);
-  const handleMouseUp = () => setIsDragging(false);
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (disabled) return;
-    if (!isDragging || !sliderRef.current) return;
-
-    const rect = sliderRef.current.getBoundingClientRect();
-    const offsetX = event.clientX - rect.left;
-    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-
-    onChange(newValue);
-  };
-
-  const handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    if (!sliderRef.current) return;
-
-    const rect = sliderRef.current.getBoundingClientRect();
-    const offsetX = event.clientX - rect.left;
-    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-
-    onChange(newValue);
-  };
-
-  useEffect(() => {
-    if (isDragging) {
-      onDragging && onDragging(true);
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    } else {
-      onDragging && onDragging(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
-
-  const isDraggingClass = isDragging ? "isDragging" : "isNotDragging";
-  const disabledClass = disabled ? "isDisabled" : "isEnabled";
-  const sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;
-
-  return (
-    <div
-      {...rest}
-      className={sliderClassname}
-      onMouseDown={handleMouseDown}
-      onClick={handleSliderClick}
-      ref={sliderRef}
-    >
-      <div className="arkynSliderFill" style={{ width: `${value}%` }} />
-      <div className="arkynSliderThumb" style={{ left: `${value}%` }} />
-    </div>
-  );
-}
-
-export { Slider };

package/src/components/slider/styles.css

@@ -1,45 +0,0 @@
-.arkynSliderTrack {
-  width: 100%;
-  max-width: 400px;
-
-  height: 6px;
-  border: 1px solid var(--border);
-  background: rgba(var(--input-background), 1);
-  border-radius: 5px;
-  position: relative;
-  cursor: pointer;
-}
-
-.arkynSliderTrack.isDragging {
-  cursor: grabbing;
-}
-
-.arkynSliderTrack.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynSliderFill {
-  height: 100%;
-  background: rgb(var(--spotlight-primary));
-  border-radius: 5px;
-}
-
-.arkynSliderThumb {
-  width: 12px;
-  height: 12px;
-  background: rgb(var(--spotlight-primary));
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arkynSliderTrack.isEnabled .arkynSliderThumb {
-  cursor: grab;
-}
-
-.arkynSliderValue {
-  margin-top: 10px;
-  font-size: 18px;
-}

package/src/components/switch/index.tsx

@@ -1,156 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { useId, useRef, useState } from "react";
-
-import "./styles.css";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldLabel } from "../fieldLabel";
-
-type SwitchProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "onChange" | "defaultValue" | "onCheck" | "value"
-> & {
-  label?: string;
-  size?: "sm" | "md" | "lg";
-  defaultChecked?: boolean;
-  checked?: boolean;
-  value?: string;
-  unCheckedValue?: string;
-  name: string;
-  onCheck?: (value: string) => void;
-};
-
-/**
- * Switch component - used for creating toggle switches with on/off states
- *
- * @param props - Switch component properties
- * @param props.name - Required field name for form handling and input identification
- * @param props.label - Optional label text to display next to the switch
- * @param props.size - Size variant of the switch. Default: "lg"
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.checked - Controlled checked state of the switch
- * @param props.value - Value to be used when switch is checked. Default: "checked"
- * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
- * @param props.onCheck - Callback function called when switch state changes, receives the current value
- *
- * **...Other valid HTML properties for button element (except children, onChange, defaultValue, onCheck, value)**
- *
- * @returns Switch JSX element wrapped in FieldWrapper with optional label
- *
- * @example
- * ```tsx
- * // Basic switch
- * <Switch name="notifications" label="Enable notifications" />
- *
- * // Switch with custom values
- * <Switch
- *   name="theme"
- *   label="Dark mode"
- *   value="dark"
- *   unCheckedValue="light"
- *   onCheck={(value) => console.log('Theme:', value)}
- * />
- *
- * // Controlled switch with callback
- * <Switch
- *   name="autoSave"
- *   label="Auto-save documents"
- *   checked={isAutoSaveEnabled}
- *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
- *   size="md"
- * />
- *
- * // Small switch with default checked state
- * <Switch
- *   name="marketing"
- *   label="Marketing emails"
- *   size="sm"
- *   defaultChecked={true}
- *   value="subscribed"
- *   unCheckedValue="unsubscribed"
- * />
- *
- * // Switch with custom styling and disabled state
- * <Switch
- *   name="premium"
- *   label="Premium features"
- *   className="premium-switch"
- *   disabled={!isPremiumUser}
- *   onCheck={(value) => handlePremiumToggle(value)}
- * />
- *
- * // Large switch for accessibility
- * <Switch
- *   name="accessibility"
- *   label="High contrast mode"
- *   size="lg"
- *   checked={isHighContrast}
- *   onCheck={(value) => setIsHighContrast(!!value)}
- *   value="enabled"
- *   unCheckedValue="disabled"
- * />
- *
- * // Switch without label for inline usage
- * <Switch
- *   name="inline_toggle"
- *   value="on"
- *   unCheckedValue="off"
- *   onCheck={(value) => console.log('Toggle state:', value)}
- * />
- * ```
- */
-
-function Switch(props: SwitchProps) {
-  const {
-    label,
-    size = "lg",
-    defaultChecked = false,
-    checked: baseChecked = null,
-    value,
-    unCheckedValue = "",
-    name,
-    className: baseClassName = "",
-    onCheck,
-    id,
-    ...rest
-  } = props;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = id || useId();
-
-  const [isChecked, setIsChecked] = useState(defaultChecked);
-
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  function handleCheck() {
-    setIsChecked(!isChecked);
-    onCheck && onCheck(!currentChecked ? value || "checked" : unCheckedValue);
-  }
-
-  const checkedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-  const className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel>{label}</FieldLabel>}
-
-      <button
-        type="button"
-        onClick={handleCheck}
-        className={className}
-        {...rest}
-      >
-        <input
-          id={inputId}
-          type="hidden"
-          name={name}
-          ref={inputRef}
-          onClick={handleCheck}
-          value={currentChecked ? value || "checked" : unCheckedValue}
-        />
-      </button>
-    </FieldWrapper>
-  );
-}
-
-export { Switch };

package/src/components/switch/styles.css

@@ -1,90 +0,0 @@
-.arkynSwitch {
-  position: relative;
-
-  border: 1px solid transparent;
-  border-radius: 999999px;
-
-  transition: all 0.3s ease-in-out;
-}
-
-.arkynSwitch:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynSwitch::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  bottom: 2px;
-  border-radius: 50%;
-  background-color: white;
-  transition: all 0.2s;
-  transform: translateX(-2px);
-}
-
-.arkynSwitch.checkedTrue {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynSwitch.checkedFalse {
-  background-color: var(--border);
-}
-
-.arkynSwitch.checkedTrue::before {
-  transform: translateX(3px);
-}
-
-.arkynSwitch.sm {
-  min-width: 32px;
-  max-width: 32px;
-  min-height: 16px;
-  max-height: 16px;
-}
-
-.arkynSwitch.sm::before {
-  min-height: 10px;
-  max-height: 10px;
-  min-width: 10px;
-  max-width: 10px;
-}
-
-.arkynSwitch.sm.checkedFalse::before {
-  transform: translateX(-13px);
-}
-
-.arkynSwitch.md {
-  min-width: 40px;
-  max-width: 40px;
-  min-height: 20px;
-  max-height: 20px;
-}
-
-.arkynSwitch.md::before {
-  min-height: 14px;
-  max-height: 14px;
-  min-width: 14px;
-  max-width: 14px;
-}
-
-.arkynSwitch.md.checkedFalse::before {
-  transform: translateX(-17px);
-}
-
-.arkynSwitch.lg {
-  min-width: 48px;
-  max-width: 48px;
-  min-height: 24px;
-  max-height: 24px;
-}
-
-.arkynSwitch.lg::before {
-  min-height: 18px;
-  max-height: 18px;
-  min-width: 18px;
-  max-width: 18px;
-}
-
-.arkynSwitch.lg.checkedFalse::before {
-  transform: translateX(-21px);
-}

package/src/components/tab/tabButton/index.tsx

@@ -1,114 +0,0 @@
-import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
-
-import { useTab } from "../tabContext";
-import "./styles.css";
-
-type TabButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "value" | "type"
-> & {
-  children: ReactNode;
-  value: string;
-};
-
-/**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
- *
- * @param props - TabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by TabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns TabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
- * </TabContainer>
- * ```
- */
-
-function TabButton(props: TabButtonProps) {
-  const {
-    children,
-    disabled: rawDisabled = false,
-    className: baseClassName = "",
-    onClick,
-    value,
-    ...rest
-  } = props;
-
-  const { disabled, currentTab, changeCurrentTab } = useTab();
-
-  const isDisabled = disabled || rawDisabled;
-
-  const disabledClass = isDisabled ? "isDisabled" : "";
-  const activeClass = currentTab === value && value ? "isActive" : "";
-  const className = `arkynTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-
-  function handleClick(event: MouseEvent<HTMLButtonElement>) {
-    changeCurrentTab(value);
-    onClick && onClick(event);
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className={className.trim()}
-      {...rest}
-      disabled={isDisabled}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-}
-
-export { TabButton };