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

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

package/src/components/button/styles.css

@@ -1,208 +0,0 @@
-/* base css */
-.arkynButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-html.dark .arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynButton .arkynButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-/* variants */
-.arkynButton.solid {
-  color: #fff;
-}
-.arkynButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.outline {
-  background-color: var(--card-foreground-primary);
-  border-color: var(--border);
-}
-.arkynButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.ghost:hover {
-  filter: brightness(0.8);
-}
-.arkynButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-.arkynButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-.arkynButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-.arkynButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-.arkynButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* sizes */
-.arkynButton.lg {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-  border-radius: 6px;
-  padding: 0px 20px;
-  height: 44px;
-}
-.arkynButton.lg .arkynButtonContent,
-.arkynButton.lg .arkynButtonSpinner {
-  gap: 16px;
-}
-
-.arkynButton.md {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-  border-radius: 6px;
-  gap: 16px;
-  padding: 0px 16px;
-  height: 40px;
-}
-.arkynButton.md .arkynButtonContent,
-.arkynButton.md .arkynButtonSpinner {
-  gap: 14px;
-}
-
-.arkynButton.sm {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-  border-radius: 6px;
-  padding: 0px 16px;
-  height: 32px;
-}
-.arkynButton.sm .arkynButtonContent,
-.arkynButton.sm .arkynButtonSpinner {
-  gap: 12px;
-}
-
-.arkynButton.xs {
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 10px;
-  border-radius: 4px;
-  padding: 0px 16px;
-  height: 24px;
-}
-.arkynButton.xs .arkynButtonContent,
-.arkynButton.xs .arkynButtonSpinner {
-  gap: 8px;
-}
-
-/* loader spin */
-.arkynButton .arkynButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  white-space: nowrap;
-  opacity: 0;
-}
-
-.arkynButton .arkynButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynButton.loadingTextFalse .arkynButtonSpinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arkynButton.loadingTextTrue .arkynButtonSpinner {
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonContent {
-  opacity: 0;
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonSpinner {
-  opacity: 1;
-  max-height: unset;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/cardTab/cardTabButton/index.tsx

@@ -1,114 +0,0 @@
-import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
-
-import { useCardTab } from "../cardTabContext";
-import "./styles.css";
-
-type CardTabButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "value" | "type"
-> & {
-  children: ReactNode;
-  value: string;
-};
-
-/**
- * CardTabButton component - used as interactive buttons within a CardTabContainer for tab navigation
- *
- * @param props - CardTabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by CardTabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns CardTabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within CardTabContainer
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <CardTabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <CardTabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <CardTabContainer>
- *   <CardTabButton value="available">Available</CardTabButton>
- *   <CardTabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <CardTabContainer defaultValue="dashboard">
- *   <CardTabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="reports">Reports</CardTabButton>
- * </CardTabContainer>
- * ```
- */
-
-function CardTabButton(props: CardTabButtonProps) {
-  const {
-    children,
-    disabled: rawDisabled = false,
-    className: baseClassName = "",
-    onClick,
-    value,
-    ...rest
-  } = props;
-
-  const { disabled, currentTab, changeCurrentTab } = useCardTab();
-
-  const isDisabled = disabled || rawDisabled;
-
-  const disabledClass = isDisabled ? "isDisabled" : "";
-  const activeClass = currentTab === value && value ? "isActive" : "";
-  const className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-
-  function handleClick(event: MouseEvent<HTMLButtonElement>) {
-    changeCurrentTab(value);
-    onClick && onClick(event);
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className={className.trim()}
-      {...rest}
-      disabled={isDisabled}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-}
-
-export { CardTabButton };

package/src/components/cardTab/cardTabButton/styles.css

@@ -1,30 +0,0 @@
-.arkynCardTabButton {
-  padding: 8px 16px;
-  font-size: 14px;
-
-  font-weight: 600;
-  letter-spacing: 0%;
-  border: none;
-  color: var(--text-muted);
-  background-color: var(--background);
-  cursor: pointer;
-}
-
-.arkynCardTabButton.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
-.arkynCardTabButton:hover:not(:disabled) {
-  background-color: var(--background-foreground);
-  color: rgb(var(--spotlight-primary));
-}
-
-.arkynCardTabButton:not(:last-child) {
-  border-right: 2px solid var(--border);
-}
-
-.arkynCardTabButton.isActive {
-  background-color: var(--background-foreground);
-  color: rgb(var(--spotlight-primary));
-}