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

package/src/components/iconButton/index.tsx

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

@@ -0,0 +1,166 @@
+/* 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

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

package/src/components/input/style.css

@@ -0,0 +1,226 @@
+/* BASE */
+.arkynInput {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: 8px;
+
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+}
+
+.arkynInput:hover {
+  cursor: text;
+}
+
+.arkynInput input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+
+  line-height: 100%;
+}
+
+.arkynInput input {
+  color: var(--text-heading);
+}
+
+.arkynInput .prefix,
+.arkynInput .suffix {
+  color: var(--text-body);
+  background: var(--border);
+  font-weight: 400;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+
+  line-height: 100%;
+}
+
+.arkynInput .prefix {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: calc(8px - 1px) 0 0 calc(8px - 1px);
+  border-right: 1px solid var(--border);
+}
+
+.arkynInput .suffix {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 0 calc(8px - 1px) calc(8px - 1px) 0;
+  border-left: 1px solid var(--border);
+}
+
+.arkynInput input::placeholder {
+  color: var(--text-muted);
+  line-height: 100%;
+}
+
+.arkynInput svg {
+  color: var(--text-muted);
+}
+
+.arkynInput.errored svg {
+  color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynInput:not(.opacity).focused svg {
+  color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynInput.opacity {
+  opacity: 0.5;
+}
+
+/* VARIANTS */
+.arkynInput.solid {
+  border-color: var(--border);
+  background-color: rgba(var(--spotlight-secondary), 1);
+}
+
+.arkynInput.solid.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynInput:not(.opacity).solid.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynInput.outline {
+  border-color: var(--border);
+}
+
+.arkynInput.outline.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynInput:not(.opacity).outline.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynInput.underline {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  outline: none;
+  border-color: var(--border);
+}
+
+.arkynInput.underline .suffix,
+.arkynInput.underline .prefix {
+  display: none;
+}
+
+.arkynInput.underline::before {
+  content: " ";
+  position: absolute;
+  height: 1px;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  background: transparent;
+}
+
+.arkynInput.underline.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynInput.underline.errored::before {
+  background: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynInput:not(.opacity).underline.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynInput:not(.opacity).underline.focused::before {
+  background: rgba(var(--spotlight-primary), 1);
+}
+
+/* SIZE */
+.arkynInput.md input {
+  min-height: 40px;
+  max-height: 40px;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
+.arkynInput.md input::placeholder {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.arkynInput.md.hasPrefix {
+  padding-left: 60px;
+}
+
+.arkynInput.md.hasSuffix {
+  padding-right: 60px;
+}
+
+.arkynInput.md .prefix,
+.arkynInput.md .suffix {
+  height: 40px;
+  width: 44px;
+  font-size: 14px;
+}
+
+.arkynInput.lg input {
+  min-height: 44px;
+  max-height: 44px;
+  line-height: 16px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.arkynInput.lg input::placeholder {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.arkynInput.lg .prefix,
+.arkynInput.lg .suffix {
+  height: 44px;
+  width: 48px;
+  font-size: 16px;
+}
+
+.arkynInput.lg.hasPrefix {
+  padding-left: 64px;
+}
+
+.arkynInput.lg.hasSuffix {
+  padding-right: 64px;
+}
+
+/* SPIN */
+.arkynInput .spinner {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}