aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/layout/GlassSeparator.js

@@ -0,0 +1,128 @@
+'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';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+
+const GlassSeparator = /*#__PURE__*/forwardRef(({
+  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
+  orientation = 'horizontal',
+  variant = 'default',
+  size = 'md',
+  length,
+  decorative = true,
+  content,
+  spacing = 'md',
+  respectMotionPreference = true,
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}, ref) => {
+  const sizeConfig = {
+    sm: {
+      thickness: orientation === 'horizontal' ? 'h-px' : 'w-px',
+      contentGap: 'glass-gap-2',
+      contentPadding: 'glass-px-2'
+    },
+    md: {
+      thickness: orientation === 'horizontal' ? 'h-0.5' : 'w-0.5',
+      contentGap: 'glass-gap-3',
+      contentPadding: 'glass-px-3'
+    },
+    lg: {
+      thickness: orientation === 'horizontal' ? 'h-1' : 'w-1',
+      contentGap: 'glass-gap-4',
+      contentPadding: 'glass-px-4'
+    }
+  };
+  const spacingConfig = {
+    sm: 'glass-gap-2 glass-px-2',
+    md: 'glass-gap-3 glass-px-3',
+    lg: 'glass-gap-4 glass-px-4'
+  };
+  const variantStyles = {
+    default: 'bg-border/20',
+    gradient: 'bg-gradient-to-r from-transparent via-border/20 to-transparent',
+    dashed: 'border-dashed border-t border-border/20 bg-transparent',
+    dotted: 'border-dotted border-t border-border/20 bg-transparent',
+    glow: cn('bg-gradient-to-r from-transparent via-primary/30 to-transparent', 'shadow-lg shadow-primary/20 glass-backdrop-blur-md')
+  };
+  const config = sizeConfig[size];
+  const separatorId = useA11yId();
+  const {
+    prefersReducedMotion
+  } = useMotionPreferenceContext();
+  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
+  // Handle separator with content
+  if (content && orientation === 'horizontal') {
+    return jsxs("div", {
+      ref: ref,
+      id: separatorId,
+      className: cn('glass-separator-with-content', 'flex items-center w-full', spacingConfig[spacing],
+      // Motion preferences
+      shouldRespectMotion && 'motion-safe:transition-all motion-reduce:transition-none', className),
+      role: decorative ? 'presentation' : 'separator',
+      "aria-orientation": orientation,
+      "aria-label": ariaLabel || (content ? `Separator with content: ${content}` : undefined),
+      ...props,
+      children: [jsx("div", {
+        className: cn('flex-1', config.thickness, variantStyles[variant])
+      }), jsx("div", {
+        className: cn('glass-separator-content', 'flex items-center justify-center shrink-0', 'glass-text-secondary glass-text-sm font-medium', config.contentPadding),
+        children: content
+      }), jsx("div", {
+        className: cn('flex-1', config.thickness, variantStyles[variant])
+      })]
+    });
+  }
+  // Standard separator
+  return jsx("div", {
+    ref: ref,
+    id: separatorId,
+    className: cn('glass-separator',
+    // Orientation and size
+    orientation === 'horizontal' ? cn('w-full', config.thickness) : cn('h-full', config.thickness),
+    // Length override
+    length && (orientation === 'horizontal' ? `w-[${typeof length === 'number' ? `${length}px` : length}]` : `h-[${typeof length === 'number' ? `${length}px` : length}]`),
+    // Variant styles
+    variantStyles[variant],
+    // Special handling for dashed/dotted
+    (variant === 'dashed' || variant === 'dotted') && [orientation === 'horizontal' ? 'border-t' : 'border-l', config.thickness.replace('h-', 'border-t-').replace('w-', 'border-l-')],
+    // Motion preferences
+    shouldRespectMotion && 'motion-safe:transition-all motion-reduce:transition-none', className),
+    role: decorative ? 'presentation' : 'separator',
+    "aria-orientation": orientation,
+    "aria-label": ariaLabel || `${orientation} separator`,
+    ...props
+  });
+});
+GlassSeparator.displayName = 'GlassSeparator';
+// Utility components for common patterns
+const GlassHorizontalSeparator = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassSeparator, {
+  ref: ref,
+  orientation: "horizontal",
+  ...props
+}));
+const GlassVerticalSeparator = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassSeparator, {
+  ref: ref,
+  orientation: "vertical",
+  ...props
+}));
+const GlassGradientSeparator = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassSeparator, {
+  ref: ref,
+  variant: "gradient",
+  ...props
+}));
+const GlassGlowSeparator = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassSeparator, {
+  ref: ref,
+  variant: "glow",
+  ...props
+}));
+GlassHorizontalSeparator.displayName = 'GlassHorizontalSeparator';
+GlassVerticalSeparator.displayName = 'GlassVerticalSeparator';
+GlassGradientSeparator.displayName = 'GlassGradientSeparator';
+GlassGlowSeparator.displayName = 'GlassGlowSeparator';
+
+export { GlassGlowSeparator, GlassGradientSeparator, GlassHorizontalSeparator, GlassSeparator, GlassVerticalSeparator, GlassSeparator as default };
+//# sourceMappingURL=GlassSeparator.js.map

package/dist/esm/components/layout/GlassSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassSeparator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/GlassSplitPane.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useA11yId } from '../../utils/a11y.js';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+
+/**
+ * GlassSplitPane component
+ * Resizable split pane with glassmorphism styling
+ */
+const GlassSplitPane = /*#__PURE__*/forwardRef(({
+  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
+  direction = "horizontal",
+  initial = 50,
+  min = 20,
+  max = 80,
+  left,
+  right,
+  respectMotionPreference = true,
+  "aria-label": ariaLabel = "Split pane",
+  onSplitChange,
+  className,
+  ...props
+}, ref) => {
+  const [pct, setPct] = React.useState(initial);
+  const dragging = React.useRef(false);
+  const splitPaneId = useA11yId();
+  const separatorId = useA11yId();
+  const splitPaneLabelId = useA11yId("split-pane-label");
+  const leftPaneLabelId = useA11yId("split-pane-left");
+  const rightPaneLabelId = useA11yId("split-pane-right");
+  const {
+    prefersReducedMotion
+  } = useMotionPreferenceContext();
+  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
+  const onDown = () => dragging.current = true;
+  const onUp = () => dragging.current = false;
+  const onMove = React.useCallback(e => {
+    if (!dragging.current) return;
+    let newPct;
+    if (direction === "horizontal") {
+      newPct = e.clientX / window.innerWidth * 100;
+    } else {
+      newPct = e.clientY / window.innerHeight * 100;
+    }
+    const clampedPct = Math.max(min, Math.min(max, newPct));
+    setPct(clampedPct);
+    onSplitChange?.(clampedPct);
+  }, [direction, min, max, onSplitChange]);
+  React.useEffect(() => {
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [onMove]);
+  // Keyboard support for separator
+  const handleKeyDown = e => {
+    const step = 5; // 5% steps
+    let newPct = pct;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        newPct = Math.max(min, pct - step);
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        newPct = Math.min(max, pct + step);
+        break;
+      case "Home":
+        newPct = min;
+        break;
+      case "End":
+        newPct = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    setPct(newPct);
+    onSplitChange?.(newPct);
+  };
+  return jsxs("div", {
+    ref: ref,
+    id: splitPaneId,
+    className: cn("relative w-full h-full", direction === "horizontal" ? "grid grid-cols-[var(--a)_12px_1fr]" : "grid grid-rows-[var(--a)_12px_1fr]",
+    // Motion preferences
+    shouldRespectMotion && "motion-safe:transition-all motion-reduce:transition-none", className),
+    style: {
+      // @ts-ignore custom var
+      ["--a"]: `${pct}%`
+    },
+    role: "group",
+    "aria-labelledby": splitPaneLabelId,
+    ...props,
+    children: [jsx("span", {
+      id: splitPaneLabelId,
+      className: "sr-only",
+      children: ariaLabel
+    }), jsxs("div", {
+      className: 'glass-min-w-0 glass-min-h-0 overflow-auto',
+      role: "region",
+      "aria-labelledby": leftPaneLabelId,
+      children: [jsx("span", {
+        id: leftPaneLabelId,
+        className: "sr-only",
+        children: direction === "horizontal" ? "Left pane" : "Top pane"
+      }), left]
+    }), jsx("div", {
+      id: separatorId,
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuenow": pct,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-label": `Resize ${direction === "horizontal" ? "vertical" : "horizontal"} split. Currently at ${Math.round(pct)}%`,
+      onMouseDown: onDown,
+      onKeyDown: handleKeyDown,
+      className: cn("select-none glass-radius-full focus:outline-none focus:ring-2 focus:ring-primary/50", direction === "horizontal" ? "w-3 h-full cursor-col-resize" : "h-3 w-full cursor-row-resize", "bg-white/10", shouldRespectMotion ? "hover:bg-white/20 transition-colors duration-200" : "hover:bg-white/20", dragging.current && "bg-white/30")
+    }), jsxs("div", {
+      className: 'glass-min-w-0 glass-min-h-0 overflow-auto',
+      role: "region",
+      "aria-labelledby": rightPaneLabelId,
+      children: [jsx("span", {
+        id: rightPaneLabelId,
+        className: "sr-only",
+        children: direction === "horizontal" ? "Right pane" : "Bottom pane"
+      }), right]
+    })]
+  });
+});
+GlassSplitPane.displayName = "GlassSplitPane";
+
+export { GlassSplitPane, GlassSplitPane as default };
+//# sourceMappingURL=GlassSplitPane.js.map

package/dist/esm/components/layout/GlassSplitPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassSplitPane.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/GlassStack.js

@@ -0,0 +1,170 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React, { forwardRef } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useA11yId } from '../../utils/a11y.js';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+
+/**
+ * GlassStack component
+ * Layout component for stacking items with consistent spacing
+ */
+const GlassStack = /*#__PURE__*/forwardRef(({
+  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
+  direction = "vertical",
+  responsive,
+  space = "md",
+  spacing,
+  responsiveSpace,
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  divider,
+  renderDivider,
+  respectMotionPreference = true,
+  "aria-label": ariaLabel,
+  role,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const spaceClasses = {
+    none: "glass-gap-0",
+    xs: "glass-gap-1",
+    sm: "glass-gap-2",
+    md: "glass-gap-4",
+    lg: "glass-gap-6",
+    xl: "gap-8",
+    "2xl": "glass-gap-12"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+  };
+  const directionClasses = {
+    vertical: "flex-col",
+    horizontal: "flex-row"
+  };
+  const responsiveDirectionClasses = responsive ? [responsive.sm && `sm:${directionClasses[responsive.sm]}`, responsive.md && `md:${directionClasses[responsive.md]}`, responsive.lg && `lg:${directionClasses[responsive.lg]}`, responsive.xl && `xl:${directionClasses[responsive.xl]}`, responsive["2xl"] && `2xl:${directionClasses[responsive["2xl"]]}`].filter(Boolean) : [];
+  const responsiveSpaceClasses = responsiveSpace ? [responsiveSpace.sm && `sm:${spaceClasses[responsiveSpace.sm]}`, responsiveSpace.md && `md:${spaceClasses[responsiveSpace.md]}`, responsiveSpace.lg && `lg:${spaceClasses[responsiveSpace.lg]}`, responsiveSpace.xl && `xl:${spaceClasses[responsiveSpace.xl]}`, responsiveSpace["2xl"] && `2xl:${spaceClasses[responsiveSpace["2xl"]]}`].filter(Boolean) : [];
+  // Process children to add dividers
+  const processedChildren = React.Children.toArray(children).filter(Boolean);
+  const childrenWithDividers = divider || renderDivider ? processedChildren.reduce((acc, child, index) => {
+    acc.push(child);
+    // Add divider between items (not after the last item)
+    if (index < processedChildren.length - 1) {
+      const dividerElement = renderDivider ? renderDivider(index) : divider;
+      if (dividerElement) {
+        acc.push(jsx("div", {
+          className: "glass-flex-shrink-0",
+          children: dividerElement
+        }, `divider-${index}`));
+      }
+    }
+    return acc;
+  }, []) : processedChildren;
+  const stackId = useA11yId();
+  const {
+    prefersReducedMotion
+  } = useMotionPreferenceContext();
+  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
+  const a11yProps = {
+    ...(ariaLabel && {
+      "aria-label": ariaLabel,
+      id: stackId
+    }),
+    ...(role && {
+      role
+    })
+  };
+  return jsx("div", {
+    ref: ref,
+    className: cn("flex", directionClasses[direction], ...responsiveDirectionClasses, spaceClasses[spacing ?? space], ...responsiveSpaceClasses, alignClasses[align], justifyClasses[justify], wrap && "flex-wrap",
+    // Motion preferences
+    shouldRespectMotion && "motion-safe:transition-all motion-reduce:transition-none", className),
+    ...a11yProps,
+    ...props,
+    children: childrenWithDividers
+  });
+});
+GlassStack.displayName = "GlassStack";
+/**
+ * GlassStackItem component
+ * Individual item within a stack with flex control
+ */
+const GlassStackItem = /*#__PURE__*/forwardRef(({
+  grow = false,
+  shrink = true,
+  alignSelf = "auto",
+  respectMotionPreference = true,
+  "aria-label": ariaLabel,
+  role,
+  className,
+  ...props
+}, ref) => {
+  const alignSelfClasses = {
+    auto: "self-auto",
+    start: "self-start",
+    center: "self-center",
+    end: "self-end",
+    stretch: "self-stretch",
+    baseline: "self-baseline"
+  };
+  const itemId = useA11yId();
+  const {
+    prefersReducedMotion
+  } = useMotionPreferenceContext();
+  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
+  const a11yProps = {
+    ...(ariaLabel && {
+      "aria-label": ariaLabel,
+      id: itemId
+    }),
+    ...(role && {
+      role
+    })
+  };
+  return jsx("div", {
+    ref: ref,
+    className: cn(grow && "flex-grow", !shrink && "flex-shrink-0", alignSelfClasses[alignSelf],
+    // Motion preferences
+    shouldRespectMotion && "motion-safe:transition-all motion-reduce:transition-none", className),
+    ...a11yProps,
+    ...props
+  });
+});
+GlassStackItem.displayName = "GlassStackItem";
+/**
+ * VStack component
+ * Vertical stack (shorthand for GlassStack with direction="vertical")
+ */
+const VStack = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassStack, {
+  ref: ref,
+  direction: "vertical",
+  ...props
+}));
+VStack.displayName = "VStack";
+/**
+ * HStack component
+ * Horizontal stack (shorthand for GlassStack with direction="horizontal")
+ */
+const HStack = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassStack, {
+  ref: ref,
+  direction: "horizontal",
+  ...props
+}));
+HStack.displayName = "HStack";
+
+export { GlassStack, GlassStackItem, HStack, VStack };
+//# sourceMappingURL=GlassStack.js.map

package/dist/esm/components/layout/GlassStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassStack.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/HStack.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+import { forwardRef } from 'react';
+import { GlassStack } from './GlassStack.js';
+
+/**
+ * Horizontal Stack component
+ * Wrapper around GlassStack with direction set to horizontal
+ */
+const HStack = /*#__PURE__*/forwardRef(({
+  spacing,
+  space,
+  respectMotionPreference = true,
+  'aria-label': ariaLabel,
+  role,
+  ...props
+}, ref) => {
+  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
+  const {
+    prefersReducedMotion
+  } = useMotionPreferenceContext();
+  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
+  const ariaLabelledBy = props['aria-labelledby'];
+  const resolvedRole = role ?? (ariaLabel || ariaLabelledBy ? 'group' : undefined);
+  return jsx(GlassStack, {
+    ref: ref,
+    direction: "horizontal",
+    space: spacing || space,
+    respectMotionPreference: shouldRespectMotion,
+    "aria-label": ariaLabel,
+    role: resolvedRole,
+    ...props
+  });
+});
+HStack.displayName = 'HStack';
+
+export { HStack };
+//# sourceMappingURL=HStack.js.map

package/dist/esm/components/layout/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}