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

package/src/components/slider/styles.css

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

@@ -0,0 +1,156 @@
+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/tab/tabButton/index.tsx

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

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

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

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

package/src/components/tab/tabContext.tsx

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

package/src/components/textarea/index.tsx

@@ -0,0 +1,193 @@
+import {
+  FocusEvent,
+  TextareaHTMLAttributes,
+  useId,
+  useRef,
+  useState,
+} from "react";
+
+import { useForm } from "../../hooks/useForm";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+
+import "./styles.css";
+
+type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "name"
+> & {
+  name: string;
+
+  label?: string;
+  showAsterisk?: boolean;
+  errorMessage?: string;
+
+  size?: "md" | "lg";
+  variant?: "solid" | "outline";
+};
+
+/**
+ * Textarea component - used for multi-line text input with customizable styling and validation
+ *
+ * @param props - Textarea component properties
+ * @param props.name - Required field name for form handling and textarea identification
+ * @param props.label - Optional label text to display above the textarea
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the textarea
+ * @param props.size - Size variant of the textarea. Default: "md"
+ * @param props.variant - Visual variant of the textarea. Default: "solid"
+ *
+ * **...Other valid HTML properties for textarea element (except name)**
+ *
+ * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea name="description" placeholder="Enter description..." />
+ *
+ * // Textarea with label and validation
+ * <Textarea
+ *   name="bio"
+ *   label="Biography"
+ *   showAsterisk
+ *   placeholder="Tell us about yourself"
+ *   errorMessage="Biography is required"
+ * />
+ *
+ * // Large textarea with outline variant
+ * <Textarea
+ *   name="comments"
+ *   label="Comments"
+ *   size="lg"
+ *   variant="outline"
+ *   placeholder="Enter your comments here..."
+ *   rows={6}
+ * />
+ *
+ * // Textarea with character limit and custom styling
+ * <Textarea
+ *   name="feedback"
+ *   label="Feedback"
+ *   placeholder="Share your feedback (max 500 characters)"
+ *   maxLength={500}
+ *   rows={4}
+ *   className="feedback-textarea"
+ * />
+ *
+ * // Read-only textarea for display
+ * <Textarea
+ *   name="terms"
+ *   label="Terms and Conditions"
+ *   value={termsContent}
+ *   readOnly
+ *   rows={10}
+ *   variant="outline"
+ * />
+ *
+ * // Disabled textarea
+ * <Textarea
+ *   name="disabled_field"
+ *   label="Disabled Field"
+ *   value="This field is disabled"
+ *   disabled
+ *   placeholder="Cannot edit this field"
+ * />
+ *
+ * // Textarea with controlled value and change handler
+ * <Textarea
+ *   name="message"
+ *   label="Message"
+ *   value={message}
+ *   onChange={(e) => setMessage(e.target.value)}
+ *   placeholder="Type your message..."
+ *   rows={5}
+ *   showAsterisk
+ * />
+ *
+ * // Textarea with resize control
+ * <Textarea
+ *   name="notes"
+ *   label="Notes"
+ *   placeholder="Enter your notes..."
+ *   style={{ resize: 'vertical' }}
+ *   rows={3}
+ *   cols={50}
+ * />
+ * ```
+ */
+
+function Textarea(props: TextareaProps) {
+  const {
+    variant = "solid",
+    size = "md",
+    className: baseClassName,
+    errorMessage: baseErrorMessage,
+    disabled = false,
+    readOnly = false,
+    label,
+    showAsterisk,
+    name,
+    onFocus,
+    onBlur,
+    title,
+    style,
+    id,
+    ...rest
+  } = props;
+
+  const { fieldErrors } = useForm();
+  const [isFocused, setIsFocused] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaId = id || useId();
+
+  const errorMessage = baseErrorMessage || fieldErrors?.[name];
+  const isError = !!errorMessage;
+
+  const errorClass = isError ? "errorTrue" : "errorFalse";
+  const opacityClass = disabled || readOnly ? "opacityTrue" : "opacityFalse";
+  const focusedClass = isFocused ? "focusedTrue" : "focusedFalse";
+
+  const className = `arkynTextarea ${variant} ${size} ${opacityClass} ${errorClass} ${focusedClass} ${baseClassName}`;
+
+  function handleSectionClick() {
+    if (disabled || !textareaRef?.current) return;
+    setIsFocused(true);
+    textareaRef.current.focus();
+  }
+
+  function handleFocus(e: FocusEvent<HTMLTextAreaElement>) {
+    setIsFocused(true);
+    if (onFocus) onFocus(e);
+  }
+
+  function handleBlur(e: FocusEvent<HTMLTextAreaElement>) {
+    setIsFocused(false);
+    if (onBlur) onBlur(e);
+  }
+
+  return (
+    <FieldWrapper>
+      {label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}
+      <section
+        title={title}
+        style={style}
+        onClick={handleSectionClick}
+        className={className}
+      >
+        <textarea
+          id={textareaId}
+          disabled={disabled}
+          readOnly={readOnly}
+          ref={textareaRef}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...rest}
+        />
+      </section>
+      {errorMessage && <FieldLabel>{errorMessage}</FieldLabel>}
+    </FieldWrapper>
+  );
+}
+
+export { Textarea };