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

package/src/components/alert/alertTitle/styles.css

@@ -1,7 +0,0 @@
-.arkynAlertTitle {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 17px;
-  text-align: left;
-  color: var(--text-heading);
-}

package/src/components/audioPlayer/index.tsx

@@ -1,187 +0,0 @@
-import { Pause, Play } from "lucide-react";
-import { AudioHTMLAttributes, useEffect, useRef, useState } from "react";
-
-import { useSlider } from "../../hooks/useSlider";
-import { Slider } from "../slider";
-import "./styles.css";
-
-type AudioInformationProps = {
-  currentTime: number;
-  totalTime: number;
-  formattedCurrentTime: string;
-  formattedTotalTime: string;
-};
-
-type AudioPlayerProps = Omit<
-  AudioHTMLAttributes<HTMLAudioElement>,
-  "onEnded" | "src"
-> & {
-  src: string;
-  disabled?: boolean;
-  onPlayAudio?: (props: AudioInformationProps) => void;
-  onPauseAudio?: (props: AudioInformationProps) => void;
-};
-
-/**
- * AudioPlayer component - used to play audio files with playback controls
- *
- * @param props - AudioPlayer component properties
- * @param props.src - Audio source URL (required)
- * @param props.disabled - Whether the audio player is disabled. Default: false
- * @param props.onPlayAudio - Callback function called when audio starts playing
- * @param props.onPauseAudio - Callback function called when audio is paused
- *
- * **...Other valid HTML audio properties**
- *
- * @returns AudioPlayer JSX element
- *
- * @example
- * ```tsx
- * // Basic audio player
- * <AudioPlayer src="/audio/sample.mp3" />
- *
- * // Audio player with callbacks
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   onPlayAudio={(info) => console.log('Playing:', info)}
- *   onPauseAudio={(info) => console.log('Paused:', info)}
- * />
- *
- * // Disabled audio player
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   disabled
- * />
- *
- * // Audio player with additional HTML audio attributes
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   loop
- *   preload="metadata"
- *   onPlayAudio={(info) => {
- *     console.log(`Current: ${info.formattedCurrentTime}`);
- *     console.log(`Total: ${info.formattedTotalTime}`);
- *   }}
- * />
- * ```
- */
-
-function AudioPlayer(props: AudioPlayerProps) {
-  const { onPlayAudio, onPauseAudio, disabled, ...rest } = props;
-
-  const [sliderValue, setSliderValue] = useSlider(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const audioReference = useRef<HTMLAudioElement>(null);
-
-  const currentTime = audioReference.current?.currentTime;
-  const totalTime = audioReference.current?.duration;
-
-  const formattedCurrentTime = formatTime(currentTime);
-  const formattedTotalTime = formatTime(totalTime);
-
-  const audioInformation: AudioInformationProps = {
-    totalTime,
-    currentTime,
-    formattedCurrentTime,
-    formattedTotalTime,
-  };
-
-  function formatTime(time?: number) {
-    if (!time) return "00:00";
-
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-
-    const formattedMinutes = String(minutes).padStart(2, "0");
-    const formattedSeconds = String(seconds).padStart(2, "0");
-
-    return `${formattedMinutes}:${formattedSeconds}`;
-  }
-
-  function handlePlayAudio() {
-    const audioElement = audioReference.current;
-    if (!audioElement) return;
-    if (props.onPlayAudio) props.onPlayAudio(audioInformation);
-    audioElement.play();
-    setIsPlaying(true);
-  }
-
-  function handlePauseAudio() {
-    const audioElement = audioReference.current;
-    if (!audioElement) return;
-    if (props.onPauseAudio) props.onPauseAudio(audioInformation);
-    audioElement.pause();
-    setIsPlaying(false);
-  }
-
-  function handleToggleAudio() {
-    if (isPlaying) handlePauseAudio();
-    else handlePlayAudio();
-  }
-
-  function handleSliderChange(value: number) {
-    const audioElement = audioReference.current;
-    if (!audioElement) return;
-
-    const totalTime = audioElement.duration;
-    const currentTime = (value / 100) * totalTime;
-
-    audioElement.currentTime = currentTime;
-  }
-
-  if (isDragging || !isPlaying) {
-    audioReference.current?.pause();
-  } else if (isPlaying) {
-    audioReference.current?.play();
-  }
-
-  useEffect(() => {
-    const audioElement = audioReference.current;
-    if (!audioElement) return;
-
-    const handleTimeUpdate = () => {
-      const totalTime = audioElement.duration;
-      const currentTime = audioElement.currentTime;
-
-      const value = (currentTime / totalTime) * 100;
-      setSliderValue(value);
-    };
-
-    audioElement.addEventListener("timeupdate", handleTimeUpdate);
-
-    return () => {
-      audioElement.removeEventListener("timeupdate", handleTimeUpdate);
-    };
-  }, []);
-
-  return (
-    <div className="arkynAudioPlayer">
-      <audio
-        {...rest}
-        ref={audioReference}
-        src={props.src}
-        onEnded={handlePauseAudio}
-      />
-
-      <button type="button" disabled={disabled} onClick={handleToggleAudio}>
-        {isPlaying && <Pause />}
-        {!isPlaying && <Play />}
-      </button>
-
-      <p>{formattedCurrentTime}</p>
-
-      <Slider
-        value={sliderValue}
-        onChange={handleSliderChange}
-        onDragging={setIsDragging}
-        disabled={disabled}
-      />
-
-      <p>{formattedTotalTime}</p>
-    </div>
-  );
-}
-
-export { AudioPlayer };

package/src/components/audioPlayer/styles.css

@@ -1,50 +0,0 @@
-.arkynAudioPlayer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.arkynAudioPlayer button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: none;
-  border-radius: 50%;
-
-  min-height: 40px;
-  min-width: 40px;
-  max-height: 40px;
-  max-width: 40px;
-
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynAudioPlayer button:hover:not(:disabled) {
-  cursor: pointer;
-  background-color: rgba(var(--spotlight-primary), 0.8);
-}
-
-.arkynAudioPlayer button:disabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
-.arkynAudioPlayer button svg {
-  fill: #fff;
-  stroke: #fff;
-
-  min-height: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  max-width: 20px;
-}
-
-.arkynAudioPlayer p {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 12px;
-  text-align: left;
-  color: var(--text-body);
-  user-select: none;
-}

package/src/components/badge/index.tsx

@@ -1,80 +0,0 @@
-import { LucideIcon } from "lucide-react";
-import { HTMLAttributes } from "react";
-
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-
-type BadgeProps = HTMLAttributes<HTMLDivElement> & {
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "ghost";
-  scheme?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
-};
-
-/**
- * Badge component - used to display labels, statuses, and categorizations
- *
- * @param props - Badge component properties
- * @param props.size - Badge size. Default: "lg"
- * @param props.variant - Visual variant of the badge. Default: "ghost"
- * @param props.scheme - Badge color scheme. Default: "primary"
- * @param props.leftIcon - Optional icon to display on the left
- * @param props.rightIcon - Optional icon to display on the right
- *
- * **...Other valid HTML properties for div**
- *
- * @returns Badge JSX element
- *
- * @example
- * ```tsx
- * // Basic badge
- * <Badge>New</Badge>
- *
- * // Badge with color scheme
- * <Badge scheme="success">Approved</Badge>
- *
- * // Badge with icons
- * <Badge leftIcon={CheckIcon} scheme="success">
- *  Completed
- * </Badge>
- *
- * // Custom badge
- * <Badge
- *  size="lg"
- *  variant="solid"
- *  scheme="warning"
- *  rightIcon={AlertIcon}
- * >
- *  Warning
- * </Badge>
- * ```
- */
-
-function Badge(props: BadgeProps) {
-  const {
-    variant = "ghost",
-    scheme = "primary",
-    size = "lg",
-    leftIcon,
-    rightIcon,
-    className: baseClassName = "",
-    children,
-    ...rest
-  } = props;
-
-  const iconSizes = { md: 12, lg: 14 };
-  const iconSize = iconSizes[size];
-
-  const className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;
-
-  return (
-    <div className={className.trim()} {...rest}>
-      <IconRenderer iconSize={iconSize} icon={leftIcon} />
-      <p>{children}</p>
-      <IconRenderer iconSize={iconSize} icon={rightIcon} />
-    </div>
-  );
-}
-
-export { Badge };

package/src/components/badge/styles.css

@@ -1,145 +0,0 @@
-/* BASE */
-.arkynBadge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-
-  width: min-content;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-/* VARIANTS */
-.arkynBadge.solid {
-  color: #fff;
-}
-.arkynBadge.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynBadge.solid.secondary {
-  background-color: var(--text-muted);
-}
-.arkynBadge.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynBadge.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-.arkynBadge.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-.arkynBadge.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynBadge.outline.primary {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynBadge.outline.primary p,
-.arkynBadge.outline.primary svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynBadge.outline.secondary {
-  border-color: var(--text-muted);
-}
-.arkynBadge.outline.secondary p,
-.arkynBadge.outline.secondary svg {
-  color: var(--text-muted);
-}
-.arkynBadge.outline.danger {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynBadge.outline.danger p,
-.arkynBadge.outline.danger svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynBadge.outline.success {
-  border-color: rgba(var(--spotlight-success), 1);
-}
-.arkynBadge.outline.success p,
-.arkynBadge.outline.success svg {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynBadge.outline.warning {
-  border-color: rgba(var(--spotlight-warning), 1);
-}
-.arkynBadge.outline.warning p,
-.arkynBadge.outline.warning svg {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynBadge.outline.info {
-  border-color: rgba(var(--spotlight-info), 1);
-}
-.arkynBadge.outline.info p,
-.arkynBadge.outline.info svg {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynBadge.ghost.primary {
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-.arkynBadge.ghost.primary p,
-.arkynBadge.ghost.primary svg {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynBadge.ghost.secondary {
-  background-color: rgba(var(--spotlight-secondary), 1);
-}
-.arkynBadge.ghost.secondary p,
-.arkynBadge.ghost.secondary svg {
-  color: var(--text-muted);
-}
-.arkynBadge.ghost.danger {
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-.arkynBadge.ghost.danger p,
-.arkynBadge.ghost.danger svg {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynBadge.ghost.success {
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-.arkynBadge.ghost.success p,
-.arkynBadge.ghost.success svg {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynBadge.ghost.warning {
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-.arkynBadge.ghost.warning p,
-.arkynBadge.ghost.warning svg {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynBadge.ghost.info {
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-.arkynBadge.ghost.info p,
-.arkynBadge.ghost.info svg {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* SIZE */
-.arkynBadge.lg {
-  border-radius: 12px;
-  padding: 0px 16px;
-  height: 24px;
-}
-
-.arkynBadge.lg p {
-  line-height: 100%;
-  font-weight: 400;
-  font-size: 12px;
-}
-
-.arkynBadge.md {
-  border-radius: 10px;
-  padding: 0px 12px;
-  height: 20px;
-}
-
-.arkynBadge.md p {
-  line-height: 100%;
-  font-weight: 400;
-  font-size: 10px;
-}

package/src/components/button/index.tsx

@@ -1,104 +0,0 @@
-import { Loader2, LucideIcon } from "lucide-react";
-import { ButtonHTMLAttributes } from "react";
-
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  isLoading?: boolean;
-  loadingText?: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  variant?: "solid" | "outline" | "ghost" | "invisible";
-  scheme?: "primary" | "success" | "warning" | "danger" | "info";
-  leftIcon?: LucideIcon;
-  rightIcon?: LucideIcon;
-};
-
-/**
- * Button component - used for user interactions and form submissions
- *
- * @param props - Button component properties
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.loadingText - Text to display during loading state
- * @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"
- * @param props.leftIcon - Optional icon to display on the left
- * @param props.rightIcon - Optional icon to display on the right
- *
- * **...Other valid HTML properties for button**
- *
- * @returns Button JSX element
- *
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- *
- * // Button with color scheme
- * <Button scheme="success">Save</Button>
- *
- * // Button with loading state
- * <Button isLoading loadingText="Saving...">
- *  Save
- * </Button>
- *
- * // Button with icons
- * <Button leftIcon={SaveIcon} scheme="success">
- *  Save
- * </Button>
- *
- * // Custom button
- * <Button
- *  size="lg"
- *  variant="outline"
- *  scheme="danger"
- *  rightIcon={TrashIcon}
- * >
- *  Delete
- * </Button>
- * ```
- */
-
-function Button(props: ButtonProps) {
-  const {
-    isLoading = false,
-    scheme = "primary",
-    variant = "solid",
-    loadingText,
-    size = "md",
-    leftIcon,
-    rightIcon,
-    disabled,
-    className: baseClassName = "",
-    children,
-    ...rest
-  } = props;
-
-  const iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };
-  const iconSize = iconSizes[size];
-
-  const loadingClass = isLoading ? "loadingTrue" : "loadingFalse";
-  const loadingTextClass = !!loadingText
-    ? "loadingTextTrue"
-    : "loadingTextFalse";
-
-  const className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;
-
-  return (
-    <button className={className} disabled={disabled || isLoading} {...rest}>
-      <div className="arkynButtonSpinner">
-        <Loader2 size={iconSize} strokeWidth={2.5} />
-        {loadingText && loadingText}
-      </div>
-
-      <div className="arkynButtonContent">
-        <IconRenderer iconSize={iconSize} icon={leftIcon} />
-        {children}
-        <IconRenderer iconSize={iconSize} icon={rightIcon} />
-      </div>
-    </button>
-  );
-}
-
-export { Button };