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

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

import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { cn } from '../../lib/utilsComprehensive.js';
import styles from './GlassTabBar.module.css.js';

const BLUR_MAP = {
  none: "0px",
  light: "var(--glass-blur-sm, 6px)",
  standard: "var(--glass-blur-md, 12px)",
  heavy: "var(--glass-blur-lg, 20px)"
};
const toDimension = value => {
  if (value === undefined) return undefined;
  return typeof value === "number" ? `${value}px` : value;
};
const TabBarContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    className,
    style,
    $orientation = "horizontal",
    $variant = "default",
    $glassVariant,
    $blurStrength = "standard",
    $elevated = false,
    $background = true,
    $color,
    $width,
    $height,
    $borderRadius,
    $iconPosition,
    $verticalDisplayMode,
    $placement,
    $isResponsive,
    ...rest
  } = props;
  const inlineStyle = {
    width: toDimension($width),
    height: toDimension($height),
    ...(typeof $borderRadius !== "undefined" ? {
      borderRadius: toDimension($borderRadius)
    } : {}),
    ...style
  };
  inlineStyle["--ag-tabbar-blur"] = BLUR_MAP[$blurStrength] || BLUR_MAP.standard;
  if ($background === false) {
    inlineStyle.background = "transparent";
    inlineStyle.boxShadow = "none";
    inlineStyle.border = "none";
  }
  const containerClassName = cn(styles.container, $orientation === "vertical" ? styles.vertical : styles.horizontal, $elevated && styles.elevated, $background === false && styles.noBackground, className);
  return jsx(OptimizedGlassCore, {
    ref: ref,
    intent: "neutral",
    elevation: $elevated ? "level2" : "level1",
    tier: "medium",
    border: "subtle",
    className: containerClassName,
    "data-orientation": $orientation,
    "data-variant": $variant,
    "data-glass-variant": $glassVariant,
    "data-icon-position": $iconPosition,
    "data-display-mode": $verticalDisplayMode,
    "data-placement": $placement,
    "data-responsive": $isResponsive ? "true" : "false",
    "data-color": $color,
    style: inlineStyle,
    ...rest,
    children: children
  });
});
TabBarContainer.displayName = "TabBarContainer";
const TabSelector = /*#__PURE__*/forwardRef(({
  left,
  top,
  width,
  height,
  variant = "pills",
  orientation = "horizontal",
  disableAnimation = false,
  offset,
  className,
  style,
  ...rest
}, ref) => {
  const selectorStyle = {
    left,
    top,
    width,
    height,
    ...(offset ? {
      transform: `translate3d(${offset.x}px, ${offset.y}px, 0)`
    } : {}),
    ...(disableAnimation ? {
      transition: "none"
    } : {}),
    ...style
  };
  selectorStyle["--ag-selector-blur"] = "var(--ag-tabbar-blur, var(--glass-blur-md, 12px))";
  if (variant === "underline") {
    selectorStyle.borderRadius = "9999px";
    if (orientation === "horizontal") {
      selectorStyle.height = Math.max(height, 2);
    } else {
      selectorStyle.width = Math.max(width, 2);
    }
  }
  return jsx("div", {
    ref: ref,
    role: "presentation",
    "aria-hidden": "true",
    className: cn(styles.selectorBase, variant === "underline" && styles.selectorUnderline, className),
    style: selectorStyle,
    ...rest
  });
});
TabSelector.displayName = "TabSelector";

export { TabBarContainer, TabSelector };
//# sourceMappingURL=styled.js.map