aura-glass/dist/esm/components/input/GlassLabel.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 { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';

const GlassLabel = /*#__PURE__*/forwardRef(({
  size = "md",
  variant = "default",
  required = false,
  disabled = false,
  icon,
  description,
  enhanced = false,
  className,
  children,
  id,
  'data-testid': dataTestId,
  ...props
}, ref) => {
  const labelId = useA11yId("glass-label");
  const finalId = id || labelId;
  const sizeConfig = {
    xs: "glass-text-xs",
    sm: "glass-text-sm",
    md: "glass-text-sm",
    lg: "glass-text-base"
  };
  const variantConfig = {
    default: "text-foreground",
    muted: "glass-text-secondary",
    accent: "text-primary",
    success: "text-green-400",
    warning: "text-amber-400",
    error: "text-red-400"
  };
  return jsxs("div", {
    "data-glass-component": true,
    className: "glass-label-container",
    children: [jsxs("label", {
      ref: ref,
      id: finalId,
      "data-testid": dataTestId ?? 'glasslabel',
      className: cn("glass-label", "font-medium leading-none transition-colors duration-200", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
      // Size
      sizeConfig[size],
      // Variant
      variantConfig[variant],
      // Disabled state
      disabled && "opacity-50 cursor-not-allowed",
      // Icon spacing
      icon && "flex items-center glass-gap-2",
      // Enhanced styling
      enhanced && "glass-focus", className),
      ...props,
      children: [icon && jsx("span", {
        className: 'shrink-0',
        children: icon
      }), jsxs("span", {
        children: [children, required && jsx("span", {
          className: 'text-destructive glass-ml-1',
          "aria-label": "required",
          children: "*"
        })]
      })]
    }), description && jsx("p", {
      className: cn("glass-label-description glass-text-secondary glass-mt-1", size === "xs" ? "glass-text-xs" : "glass-text-sm", disabled && "opacity-50"),
      children: description
    })]
  });
});
GlassLabel.displayName = "GlassLabel";

export { GlassLabel, GlassLabel as default };
//# sourceMappingURL=GlassLabel.js.map