aura-glass/dist/esm/components/navigation/GlassTabItem.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';

/**
 * Glass Tab Item Component
 */
const GlassTabItem = /*#__PURE__*/forwardRef(({
  children,
  label,
  value,
  active = false,
  disabled = false,
  icon,
  badge,
  onClick,
  className = "",
  style = {},
  href,
  target
}, ref) => {
  const prefersReducedMotion = useReducedMotion();
  const handleClick = () => {
    if (!disabled && onClick) {
      onClick(value);
    }
  };
  const handleKeyDown = e => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleClick();
    }
  };
  const tabStyles = {
    position: "relative",
    display: "inline-flex",
    alignItems: "center",
    gap: "8px",
    padding: "12px 20px",
    border: "none",
    borderRadius: "8px",
    background: active ? "var(--aura-glass-bg-active, rgba(255, 255, 255, 0.15))" : "transparent",
    // Use createGlassStyle() instead,
    color: active ? "var(--aura-text-primary, #ffffff)" : "var(--aura-text-secondary, rgba(255, 255, 255, 0.7))",
    fontSize: "14px",
    fontWeight: active ? 600 : 400,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.5 : 1,
    transition: prefersReducedMotion ? "none" : "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
    textDecoration: "none",
    userSelect: "none",
    ...style
  };
  const Component = href ? "a" : "button";
  return jsxs(Component, {
    ref: ref,
    className: `glass-tab-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${className}`,
    style: tabStyles,
    onClick: href ? undefined : handleClick,
    onKeyDown: href ? undefined : handleKeyDown,
    disabled: href ? undefined : disabled,
    href: href,
    target: target,
    role: href ? "tab" : "tab",
    "aria-selected": active,
    "aria-disabled": disabled,
    tabIndex: disabled ? -1 : 0,
    children: [icon && jsx("span", {
      className: "glass-tab-item-icon",
      "aria-hidden": "true",
      children: icon
    }), jsx("span", {
      className: "glass-tab-item-label",
      children: children || label
    }), badge !== undefined && jsx("span", {
      className: "glass-tab-item-badge",
      style: {
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        minWidth: "20px",
        height: "20px",
        padding: "0 6px",
        borderRadius: "10px",
        background: "var(--aura-accent-color, #00d4ff)",
        color: "var(--aura-text-on-accent, #000000)",
        fontSize: "11px",
        fontWeight: 600
      },
      children: badge
    }), active && !prefersReducedMotion && jsx("span", {
      className: "glass-tab-item-indicator",
      style: {
        position: "absolute",
        bottom: 0,
        left: "50%",
        transform: "translateX(-50%)",
        width: "80%",
        height: "2px",
        background: "var(--aura-accent-color, #00d4ff)",
        borderRadius: "2px 2px 0 0"
      },
      "aria-hidden": "true"
    }), jsx("style", {
      children: `
          .glass-tab-item:hover:not(.disabled) {
            background: var(
              --aura-glass-bg-hover,
              rgba(255, 255, 255, 0.08)
            ) !important;
            transform: translateY(-1px);
          }

          .glass-tab-item:active:not(.disabled) {
            transform: translateY(0);
          }

          .glass-tab-item:focus-visible {
            outline: 2px solid var(--aura-accent-color, #00d4ff);
            outline-offset: 2px;
          }

          .glass-tab-item-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
          }

          @media (prefers-reduced-motion: reduce) {
            .glass-tab-item,
            .glass-tab-item-indicator {
              transition: none !important;
              animation: none !important;
            }
            .glass-tab-item:hover:not(.disabled) {
              transform: none !important;
            }
          }
        `
    })]
  });
});
GlassTabItem.displayName = "GlassTabItem";

export { GlassTabItem };
//# sourceMappingURL=GlassTabItem.js.map