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

package/src/components/badge/index.tsx

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

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

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

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

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

@@ -0,0 +1,30 @@
+.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));
+}