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

package/src/components/fieldLabel/index.tsx

@@ -1,52 +0,0 @@
-import { LabelHTMLAttributes } from "react";
-import "./styles.css";
-
-type FieldLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
-  showAsterisk?: boolean;
-};
-
-/**
- * FieldLabel component - used to display labels for form fields with optional required indicator
- *
- * @param props - FieldLabel component properties
- * @param props.showAsterisk - Whether to display an asterisk (*) to indicate required field. Default: false
- *
- * **...Other valid HTML properties for label element**
- *
- * @returns FieldLabel JSX element
- *
- * @example
- * ```tsx
- * // Basic field label
- * <FieldLabel htmlFor="username">Username</FieldLabel>
- *
- * // Required field label with asterisk
- * <FieldLabel htmlFor="email" showAsterisk>
- *   Email Address
- * </FieldLabel>
- *
- * // Label with custom styling
- * <FieldLabel
- *   htmlFor="password"
- *   className="custom-label"
- *   showAsterisk
- * >
- *   Password
- * </FieldLabel>
- * ```
- */
-
-function FieldLabel(props: FieldLabelProps) {
-  const {
-    showAsterisk = false,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynFieldLabel ${show} ${baseClassName}`;
-
-  return <label className={className.trim()} {...rest} />;
-}
-
-export { FieldLabel };

package/src/components/fieldLabel/styles.css

@@ -1,15 +0,0 @@
-.arkynFieldLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynFieldLabel.asteriskTrue::before {
-  content: "* ";
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16.34px;
-  text-align: left;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/fieldWrapper/index.tsx

@@ -1,54 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-
-type FieldWrapperProps = HTMLAttributes<HTMLElement> & {
-  children: ReactNode;
-};
-
-/**
- * FieldWrapper component - used as a container wrapper for a single form field and its related elements
- *
- * @param props - FieldWrapper component properties
- * @param props.children - React elements that compose a single field (label, input, error message, etc.)
- *
- * **...Other valid HTML properties for section element**
- *
- * @returns FieldWrapper JSX element
- *
- * @example
- * ```tsx
- * // Basic field container
- * <FieldWrapper>
- *   <FieldLabel>Username</FieldLabel>
- *   <Input name="username" />
- *   <FieldError>This field is required</FieldError>
- * </FieldWrapper>
- *
- * // Field container with custom styling
- * <FieldWrapper className="custom-spacing">
- *   <FieldLabel>Email</FieldLabel>
- *   <Input name="email" type="email" />
- * </FieldWrapper>
- *
- * // Complete field with all elements
- * <FieldWrapper>
- *   <FieldLabel showAsterisk>Password</FieldLabel>
- *   <Input name="password" type="password" />
- *   <FieldError>Password must be at least 8 characters</FieldError>
- * </FieldWrapper>
- * ```
- */
-
-function FieldWrapper(props: FieldWrapperProps) {
-  const { children, className: baseClassName, ...rest } = props;
-
-  const className = `arkynFieldWrapper ${baseClassName}`;
-
-  return (
-    <section className={className.trim()} {...rest}>
-      {children}
-    </section>
-  );
-}
-
-export { FieldWrapper };

package/src/components/fieldWrapper/styles.css

@@ -1,7 +0,0 @@
-.arkynFieldWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  height: max-content;
-}

package/src/components/iconButton/index.tsx

@@ -1,83 +0,0 @@
-import { Loader2, LucideIcon } from "lucide-react";
-import { ButtonHTMLAttributes } from "react";
-
-import "./styles.css";
-
-type IconButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "aria-label"
-> & {
-  icon: LucideIcon;
-  "aria-label": string;
-
-  isLoading?: boolean;
-  size?: "xs" | "sm" | "md" | "lg";
-  variant?: "solid" | "outline" | "ghost" | "invisible";
-  scheme?: "primary" | "success" | "warning" | "danger" | "info";
-};
-
-/**
- * IconButton component - compact button that renders only an icon
- *
- * @param props - IconButton component properties
- * @param props.icon - Icon to render inside the button (LucideIcon). Required
- * @param props.aria-label - Accessible label for screen readers. Required
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Button size. Default: "md"
- * @param props.variant - Visual variant of the button. Default: "solid"
- * @param props.scheme - Button color scheme. Default: "primary"
- *
- * **...Other valid HTML properties for button element (children not supported)**
- *
- * @returns IconButton JSX element
- *
- * @example
- * ```tsx
- * // Basic icon button
- * <IconButton icon={Plus} aria-label="Add" />
- *
- * // Different color scheme and variant
- * <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
- *
- * // Loading state
- * <IconButton icon={Save} aria-label="Saving" isLoading />
- *
- * // Sizes
- * <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
- * ```
- */
-
-function IconButton(props: IconButtonProps) {
-  const {
-    isLoading = false,
-    scheme = "primary",
-    variant = "solid",
-    size = "md",
-    icon: Icon,
-    disabled,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
-  const loading = isLoading ? "loadingTrue" : "loadingFalse";
-  const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
-
-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={className.trim()}
-      {...rest}
-    >
-      <div className="arkynIconButtonSpinner">
-        <Loader2 size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-
-      <div className="arkynIconButtonContent">
-        <Icon size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-    </button>
-  );
-}
-
-export { IconButton };

package/src/components/iconButton/styles.css

@@ -1,166 +0,0 @@
-/* BASE */
-.arkynIconButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-html.dark .arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynIconButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynIconButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* VARIANTS */
-.arkynIconButton.solid {
-  color: #fff;
-}
-.arkynIconButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynIconButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynIconButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-.arkynIconButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-.arkynIconButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.outline {
-  background-color: var(--card-foreground-primary);
-  border-color: var(--border);
-}
-.arkynIconButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynIconButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynIconButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynIconButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynIconButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.ghost:hover {
-  filter: brightness(0.8);
-}
-.arkynIconButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-.arkynIconButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-.arkynIconButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-.arkynIconButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-.arkynIconButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynIconButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynIconButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynIconButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynIconButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynIconButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* SIZE */
-.arkynIconButton.lg {
-  border-radius: 6px;
-  height: 44px;
-  width: 44px;
-}
-
-.arkynIconButton.md {
-  border-radius: 6px;
-  height: 40px;
-  width: 40px;
-}
-
-.arkynIconButton.sm {
-  border-radius: 6px;
-  height: 32px;
-  width: 32px;
-}
-
-.arkynIconButton.xs {
-  border-radius: 4px;
-  height: 24px;
-  width: 24px;
-}
-
-/* SPIN */
-.arkynIconButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-.arkynIconButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynIconButton.loadingTrue .arkynIconButtonSpinner {
-  opacity: 1;
-}
-.arkynIconButton.loadingTrue .arkynIconButtonContent {
-  opacity: 0;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/input/index.tsx

@@ -1,233 +0,0 @@
-import { Loader2, LucideIcon } from "lucide-react";
-import {
-  InputHTMLAttributes,
-  useId,
-  useRef,
-  useState,
-  type FocusEvent,
-} from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-
-import "./style.css";
-
-type InputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "prefix" | "name"
-> & {
-  name: string;
-
-  label?: string;
-  errorMessage?: string;
-  isLoading?: boolean;
-
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "underline";
-
-  prefix?: string | LucideIcon;
-  suffix?: string | LucideIcon;
-  showAsterisk?: boolean;
-
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
-};
-
-/**
- * Input component - used for text input fields with support for labels, validation, icons, and loading states
- *
- * @param props - Input component properties
- * @param props.name - Required field name for form handling
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- *
- * **...Other valid HTML properties for input element**
- *
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic input
- * <Input name="username" placeholder="Enter username" />
- *
- * // Input with label and validation
- * <Input
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   showAsterisk
- *   errorMessage="Please enter a valid email"
- * />
- *
- * // Input with icons and loading state
- * <Input
- *   name="search"
- *   label="Search"
- *   leftIcon={SearchIcon}
- *   rightIcon={FilterIcon}
- *   isLoading
- * />
- *
- * // Input with prefix/suffix
- * <Input
- *   name="website"
- *   label="Website"
- *   prefix="https://"
- *   suffix=".com"
- *   variant="outline"
- * />
- *
- * // Large input with underline variant
- * <Input
- *   name="title"
- *   label="Article Title"
- *   size="lg"
- *   variant="underline"
- *   placeholder="Enter article title"
- * />
- * ```
- */
-
-function Input(props: InputProps) {
-  const {
-    name,
-    disabled,
-    title,
-    style,
-    variant = "solid",
-    label,
-    className: baseClassName = "",
-    prefix,
-    suffix,
-    isLoading = false,
-    leftIcon,
-    readOnly,
-    onFocus,
-    onBlur,
-    errorMessage: baseErrorMessage,
-    showAsterisk,
-    rightIcon,
-    type = "text",
-    size = "md",
-    id,
-    ...rest
-  } = props;
-
-  const { fieldErrors } = useForm();
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  const loadingPosition = rightIcon ? "right" : "left";
-
-  const showLeftSpinner = loadingPosition === "left" && isLoading;
-  const showRightSpinner = loadingPosition === "right" && isLoading;
-
-  function handleSectionClick() {
-    if (disabled || !inputRef?.current) return;
-    setIsFocused(true);
-    inputRef.current.focus();
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur(e: FocusEvent<HTMLInputElement>) {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  }
-
-  if (type === "hidden") {
-    return (
-      <input
-        style={{ display: "none" }}
-        readOnly
-        type="text"
-        ref={inputRef}
-        {...rest}
-      />
-    );
-  }
-
-  const hasPrefix = !!prefix ? "hasPrefix" : "";
-  const hasSuffix = !!suffix ? "hasSuffix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkynInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-
-  return (
-    <FieldWrapper>
-      {label && (
-        <FieldLabel showAsterisk={showAsterisk} htmlFor={inputId}>
-          {label}
-        </FieldLabel>
-      )}
-
-      <section
-        title={title}
-        style={style}
-        onClick={handleSectionClick}
-        className={className}
-      >
-        <IconRenderer iconSize={iconSize} icon={prefix} className="prefix" />
-
-        <IconRenderer
-          show={showLeftSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />
-
-        <input
-          disabled={disabled || isLoading}
-          readOnly={readOnly}
-          ref={inputRef}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          type={type}
-          id={inputId}
-          {...rest}
-        />
-
-        <IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />
-
-        <IconRenderer
-          show={showRightSpinner}
-          iconSize={iconSize}
-          className="spinner"
-          icon={Loader2}
-        />
-
-        <IconRenderer iconSize={iconSize} icon={suffix} className="suffix" />
-      </section>
-
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { Input };