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

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

package/src/components/tooltip/styles.css

@@ -1,112 +0,0 @@
-.arkynTooltip {
-  position: relative;
-  display: block;
-}
-
-.arkynTooltipText {
-  visibility: hidden;
-
-  opacity: 0;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  transition: 0.15s all ease-out;
-
-  border-radius: 4px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-weight: 400;
-  color: var(--tooltip-text);
-  background-color: var(--tooltip-background);
-
-  z-index: 9999;
-}
-
-.arkynTooltip.lg .arkynTooltipText {
-  font-size: 14px;
-  line-height: 14px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip.md .arkynTooltipText {
-  font-size: 12px;
-  line-height: 12px;
-  padding: 8px 12px;
-}
-
-.arkynTooltip:hover .arkynTooltipText {
-  opacity: 1;
-  visibility: visible;
-}
-
-.arkynTooltip.top .arkynTooltipText {
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.top .arkynTooltipText::before {
-  content: "";
-  top: 100%;
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 6px 6px 0 6px;
-  bottom: 20px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText {
-  top: 50%;
-  right: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.left .arkynTooltipText::before {
-  content: "";
-  top: 50%;
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 0 6px 6px;
-  left: 100%;
-  position: absolute;
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText {
-  top: 50%;
-  left: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.arkynTooltip.right .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: transparent var(--tooltip-background);
-  border-width: 6px 6px 6px 0;
-  top: 50%;
-  left: 0;
-  transform: translate(-100%, -50%);
-  position: absolute;
-}
-
-.arkynTooltip.bottom .arkynTooltipText {
-  top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.arkynTooltip.bottom .arkynTooltipText::before {
-  content: "";
-  border-style: solid;
-  border-color: var(--tooltip-background) transparent;
-  border-width: 0 6px 6px 6px;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  position: absolute;
-}

package/src/hooks/useForm.ts

@@ -1,55 +0,0 @@
-import { useContext } from "react";
-import { formContext } from "../providers/formProvider";
-
-/**
- * useForm hook - provides access to form context data including field errors
- *
- * @returns Form context object containing:
- * - `fieldErrors`: Object with field validation errors indexed by field name
- *
- * @example
- * ```tsx
- * // Basic usage in a component
- * function MyComponent() {
- *   const { fieldErrors } = useForm();
- *
- *   return (
- *     <Input
- *       name="email"
- *       errorMessage={fieldErrors?.email}
- *     />
- *   );
- * }
- *
- * // Usage with FormProvider
- * function App() {
- *   const errors = { email: "Invalid email format" };
- *
- *   return (
- *     <FormProvider fieldErrors={errors}>
- *       <MyForm />
- *     </FormProvider>
- *   );
- * }
- *
- * // Checking for specific field errors
- * function FormField() {
- *   const { fieldErrors } = useForm();
- *   const hasError = !!fieldErrors?.username;
- *
- *   return (
- *     <div>
- *       <Input name="username" />
- *       {hasError && <span>Error: {fieldErrors.username}</span>}
- *     </div>
- *   );
- * }
- * ```
- */
-
-function useForm() {
-  const context = useContext(formContext);
-  return context;
-}
-
-export { useForm };