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

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

package/src/components/tab/tabContext.tsx

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

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

package/src/components/textarea/styles.css

@@ -1,93 +0,0 @@
-/* BASE */
-.arkynTextarea {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  padding: 16px;
-  gap: 8px;
-  border-radius: 8px;
-
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-}
-
-.arkynTextarea:hover {
-  cursor: text;
-}
-
-.arkynTextarea textarea {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  resize: none;
-}
-
-.arkynTextarea textarea {
-  color: var(--text-heading);
-}
-
-.arkynTextarea textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.arkynTextarea.opacityTrue {
-  opacity: 0.5;
-}
-
-/* VARIANTS */
-.arkynTextarea.solid {
-  border-color: var(--border);
-  background-color: rgba(var(--spotlight-secondary), 1);
-}
-
-.arkynTextarea.solid.errorTrue {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynTextarea:not(.opacityTrue).solid.focusedTrue {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynTextarea.outline {
-  border-color: var(--border);
-}
-
-.arkynTextarea.outline.errorTrue {
-  border-color: rgba(var(--spotlight-danger), 1);
-  outline-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynTextarea:not(.opacityTrue).outline.focusedTrue {
-  border-color: rgba(var(--spotlight-primary), 1);
-  outline-color: rgba(var(--spotlight-primary), 1);
-}
-
-/* SIZE */
-.arkynTextarea.md textarea {
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-.arkynTextarea.md textarea::placeholder {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.arkynTextarea.lg textarea {
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.arkynTextarea.lg textarea::placeholder {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-}

package/src/components/tooltip/index.tsx

@@ -1,172 +0,0 @@
-import {
-  HTMLAttributes,
-  ReactNode,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
-import "./styles.css";
-
-type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
-  text: string;
-  children: ReactNode;
-  orientation?: "top" | "right" | "bottom" | "left";
-  size?: "md" | "lg";
-};
-
-/**
- * Tooltip component - displays contextual information on hover with smart positioning
- *
- * @param props - Tooltip component properties
- * @param props.text - Text content to display in the tooltip
- * @param props.children - Element that triggers the tooltip on hover
- * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
- * @param props.size - Tooltip size variant. Default: "lg"
- *
- * **...Other valid HTML properties for div element**
- *
- * @returns Tooltip JSX element
- *
- * @example
- * ```tsx
- * // Basic tooltip
- * <Tooltip text="This is a helpful tip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * // Tooltip with different orientations
- * <Tooltip text="Left tooltip" orientation="left">
- *   <span>Hover for left tooltip</span>
- * </Tooltip>
- *
- * <Tooltip text="Right tooltip" orientation="right">
- *   <span>Hover for right tooltip</span>
- * </Tooltip>
- *
- * // Different sizes
- * <Tooltip text="Small tooltip" size="md">
- *   <button>Small tooltip</button>
- * </Tooltip>
- *
- * <Tooltip text="Large tooltip" size="lg">
- *   <button>Large tooltip</button>
- * </Tooltip>
- *
- * // Smart positioning - automatically adjusts if doesn't fit
- * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
- *   <button className="near-edge">Smart positioning</button>
- * </Tooltip>
- *
- * // Complete example with custom styling
- * <Tooltip
- *   text="Save your changes before proceeding"
- *   orientation="bottom"
- *   size="lg"
- *   className="custom-tooltip"
- * >
- *   <IconButton icon={SaveIcon} />
- * </Tooltip>
- *
- * // Multiple tooltips on same page
- * <div className="toolbar">
- *   <Tooltip text="Create new file" orientation="bottom">
- *     <IconButton icon={PlusIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Open existing file" orientation="bottom">
- *     <IconButton icon={FolderIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Delete selected file" orientation="bottom">
- *     <IconButton icon={TrashIcon} />
- *   </Tooltip>
- * </div>
- * ```
- */
-
-function Tooltip(props: TooltipProps) {
-  const {
-    text,
-    size = "lg",
-    children,
-    orientation = "top",
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const tooltipId = useId();
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const [adjustedOrientation, setAdjustedOrientation] = useState(orientation);
-
-  useEffect(() => {
-    const checkTooltipPosition = () => {
-      if (!tooltipRef.current) return;
-      const tooltipText = document.getElementById(tooltipId) as HTMLElement;
-      if (!tooltipText) return;
-
-      setAdjustedOrientation(orientation);
-
-      requestAnimationFrame(() => {
-        const rect = tooltipText.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        let newOrientation = orientation;
-
-        if (orientation === "left" && rect.left < 0) {
-          newOrientation = "right";
-        } else if (orientation === "right" && rect.right > viewportWidth) {
-          newOrientation = "left";
-        } else if (orientation === "top" && rect.top < 0) {
-          newOrientation = "bottom";
-        } else if (orientation === "bottom" && rect.bottom > viewportHeight) {
-          newOrientation = "top";
-        }
-
-        if (newOrientation === "right" && rect.right > viewportWidth) {
-          newOrientation = "left";
-        } else if (newOrientation === "left" && rect.left < 0) {
-          newOrientation = "right";
-        } else if (
-          newOrientation === "bottom" &&
-          rect.bottom > viewportHeight
-        ) {
-          newOrientation = "top";
-        } else if (newOrientation === "top" && rect.top < 0) {
-          newOrientation = "bottom";
-        }
-
-        setAdjustedOrientation(newOrientation);
-      });
-    };
-
-    const tooltip = tooltipRef.current;
-    if (!tooltip) return;
-
-    const handleMouseEnter = () => {
-      setTimeout(checkTooltipPosition, 1);
-    };
-
-    tooltip.addEventListener("mouseenter", handleMouseEnter);
-    window.addEventListener("resize", checkTooltipPosition);
-
-    return () => {
-      tooltip.removeEventListener("mouseenter", handleMouseEnter);
-      window.removeEventListener("resize", checkTooltipPosition);
-    };
-  }, [orientation, tooltipId]);
-
-  const className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;
-
-  return (
-    <div className={className.trim()} {...rest} ref={tooltipRef}>
-      {children}
-      <div className="arkynTooltipText" id={tooltipId}>
-        {text}
-      </div>
-    </div>
-  );
-}
-
-export { Tooltip };