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

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

package/src/components/tab/tabButton/styles.css

@@ -1,41 +0,0 @@
-.arkynTabButton {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 8px 16px;
-  background-color: transparent;
-  border: none;
-
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 100%;
-
-  color: var(--text-muted);
-}
-
-.arkynTabButton.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
-.arkynTabButton:hover {
-  cursor: pointer;
-}
-
-.arkynTabButton.isActive {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynTabButton.isActive::after {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-
-  height: 1px;
-  background-color: rgba(var(--spotlight-primary), 1);
-}

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

@@ -1,121 +0,0 @@
-import { HTMLAttributes, ReactNode, useState } from "react";
-
-import { TabProvider } from "../tabContext";
-import "./styles.css";
-
-type TabContainerProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  "onClick" | "children" | "ref"
-> & {
-  children: ReactNode;
-  disabled?: boolean;
-  defaultValue?: string;
-  onChange?: (index: string) => void;
-};
-
-/**
- * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
- *
- * @param props - TabContainer component properties
- * @param props.children - TabButton 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 TabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <TabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <TabButton value="dashboard">Dashboard</TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <TabContainer disabled>
- *   <TabButton value="tab1">Tab 1</TabButton>
- *   <TabButton value="tab2">Tab 2</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <TabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <TabButton value="profile">Profile</TabButton>
- *         <TabButton value="account">Account</TabButton>
- *         <TabButton value="notifications">Notifications</TabButton>
- *       </TabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-
-function TabContainer(props: TabContainerProps) {
-  const {
-    children,
-    onChange,
-    defaultValue,
-    disabled = false,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const [currentTab, setCurrentTab] = useState(defaultValue || "");
-
-  const className = `arkynTabContainer ${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 { TabContainer };

package/src/components/tab/tabContainer/styles.css

@@ -1,11 +0,0 @@
-.arkynTabContainer {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: start;
-
-  gap: 4px;
-
-  border-bottom: 1px solid var(--border);
-}