@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-6RGWDKUL.js

@@ -0,0 +1,223 @@
+import {
+  ClearAllControl,
+  CloseSearchControl
+} from "./chunk-5WNQJ5KS.js";
+import {
+  PillControl
+} from "./chunk-JXAYT6LX.js";
+import {
+  MoreFilters
+} from "./chunk-FINCVAAR.js";
+import {
+  RangePill
+} from "./chunk-XEE7PLDR.js";
+import {
+  CollapsedSearch,
+  InlineKeyword
+} from "./chunk-A7Q5AQVD.js";
+
+// src/components/data-display/DataViews/data-views-inline-bar.tsx
+import Box from "@mui/material/Box/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SearchSlot({
+  search,
+  onSearchChange,
+  collapsed,
+  expanded,
+  fill,
+  onOpen,
+  onEscape,
+  testIdPrefix
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(CollapsedSearch, { active: search !== "", onOpen, testId: `${testIdPrefix}-search-all` });
+  }
+  return /* @__PURE__ */ jsx(
+    InlineKeyword,
+    {
+      value: search,
+      onChange: onSearchChange,
+      testId: `${testIdPrefix}-search-all`,
+      autoFocus: expanded,
+      onEscape,
+      fill
+    }
+  );
+}
+function InlineControl({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  onOpenChange,
+  testIdPrefix
+}) {
+  if (field.group === "pill" && field.pill) {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field.pill,
+        selected: pills[field.id] ?? [],
+        onTogglePill,
+        onClearField,
+        onOpenChange,
+        testIdPrefix
+      }
+    );
+  }
+  if (field.group === "range" && field.range) {
+    return /* @__PURE__ */ jsx(
+      RangePill,
+      {
+        field: field.range,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        onOpenChange,
+        testIdPrefix
+      }
+    );
+  }
+  return null;
+}
+function useSearchMode(split) {
+  const [searchOpen, setSearchOpen] = useState(false);
+  return {
+    showBox: !split.searchCollapsed || searchOpen,
+    expanded: searchOpen,
+    fill: split.searchCollapsed && searchOpen,
+    takesOver: searchOpen && split.searchTakeover,
+    open: () => setSearchOpen(true),
+    close: () => setSearchOpen(false)
+  };
+}
+function InlineFilterControls({
+  testIdPrefix,
+  pills,
+  ranges,
+  search,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  split,
+  onClearAll,
+  activeFilterCount,
+  onControlOpenChange
+}) {
+  const { inline, overflow, compactControls, clearAllHidden } = split;
+  const { showBox, expanded, fill, takesOver, open, close } = useSearchMode(split);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-inline-filters`,
+      sx: {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        gap: 1,
+        minWidth: 0,
+        // No squeezing: if the estimate over-packs, the row must overflow (and
+        // the next measure sheds a control), not shrink labels to an ellipsis.
+        "& > *": { flexShrink: 0 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchSlot,
+          {
+            search,
+            onSearchChange,
+            collapsed: !showBox,
+            expanded,
+            fill,
+            onOpen: open,
+            onEscape: close,
+            testIdPrefix
+          }
+        ),
+        takesOver && /* @__PURE__ */ jsx(CloseSearchControl, { onClose: close, testIdPrefix }),
+        !takesOver && /* @__PURE__ */ jsx(
+          FilterSlots,
+          {
+            inline,
+            overflow,
+            pills,
+            ranges,
+            onTogglePill,
+            onChangeRange,
+            onClearField,
+            onClearAll,
+            onControlOpenChange,
+            activeFilterCount,
+            compactControls,
+            clearAllHidden,
+            testIdPrefix
+          }
+        )
+      ]
+    }
+  );
+}
+function FilterSlots({
+  inline,
+  overflow,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  onClearAll,
+  onControlOpenChange,
+  activeFilterCount,
+  compactControls,
+  clearAllHidden,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inline.map((field) => /* @__PURE__ */ jsx(
+      InlineControl,
+      {
+        field,
+        onOpenChange: onControlOpenChange,
+        pills,
+        ranges,
+        onTogglePill,
+        onChangeRange,
+        onClearField,
+        testIdPrefix
+      },
+      field.id
+    )),
+    /* @__PURE__ */ jsx(
+      MoreFilters,
+      {
+        onOpenChange: onControlOpenChange,
+        onClearAll,
+        anyApplied: activeFilterCount > 0,
+        compact: compactControls,
+        fields: overflow,
+        pills,
+        ranges,
+        onTogglePill,
+        onChangeRange,
+        testIdPrefix
+      }
+    ),
+    activeFilterCount > 0 && !clearAllHidden && /* @__PURE__ */ jsx(
+      ClearAllControl,
+      {
+        onClearAll,
+        compact: compactControls,
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  InlineFilterControls
+};
+//# sourceMappingURL=chunk-6RGWDKUL.js.map

package/dist/chunk-6WIDZGXE.js

@@ -0,0 +1,167 @@
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+
+// src/components/form/Toggle/Toggle.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var glowAnimation = keyframes`
+  0% { box-shadow: 0 0 5px currentColor; }
+  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
+  100% { box-shadow: 0 0 5px currentColor; }
+`;
+var floatAnimation = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-2px); }
+`;
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const fallback = theme.palette.primary;
+  const palette = colorMap[color] || fallback;
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, "dark", fallback),
+    light: shade(palette, "light", fallback),
+    contrastText: palette?.contrastText || "#fff"
+  };
+};
+var SIZE_MAP = {
+  xs: { padding: "4px 8px", fontSize: "0.75rem" },
+  sm: { padding: "6px 12px", fontSize: "0.875rem" },
+  md: { padding: "8px 16px", fontSize: "1rem" },
+  lg: { padding: "10px 20px", fontSize: "1.125rem" },
+  xl: { padding: "12px 24px", fontSize: "1.25rem" }
+};
+var baseStyles = (theme, colorPalette, customSize) => ({
+  textTransform: "none",
+  fontWeight: 500,
+  borderRadius: theme.spacing(1),
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  border: `2px solid ${fieldEdge(theme)}`,
+  color: theme.palette.text.primary,
+  backgroundColor: "transparent",
+  position: "relative",
+  overflow: "hidden",
+  // A zero-sized circle that grows to fill the button on hover.
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(colorPalette.main, 0.2),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.4s, height 0.4s"
+  },
+  "&:hover": {
+    backgroundColor: alpha(colorPalette.main, 0.08),
+    borderColor: colorPalette.main,
+    transform: "translateY(-1px)",
+    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    "&::before": {
+      width: "100%",
+      height: "100%"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  },
+  "&.Mui-selected": {
+    backgroundColor: colorPalette.main,
+    color: colorPalette.contrastText || "#fff",
+    borderColor: colorPalette.main,
+    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, transparent, ${alpha("#fff", 0.1)})`,
+      pointerEvents: "none"
+    },
+    "&:hover": {
+      backgroundColor: colorPalette.dark,
+      transform: "translateY(-2px) scale(1.02)",
+      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`
+    }
+  },
+  // Size wins over everything above it.
+  ...SIZE_MAP[customSize] ?? {}
+});
+var variantStyles = (customVariant, colorPalette) => {
+  switch (customVariant) {
+    case "outline":
+      return {
+        backgroundColor: "transparent",
+        border: `2px solid ${colorPalette.main}`,
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: colorPalette.main,
+          color: colorPalette.contrastText || "#fff"
+        }
+      };
+    case "soft":
+      return {
+        backgroundColor: alpha(colorPalette.main, 0.1),
+        border: "none",
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: alpha(colorPalette.main, 0.2),
+          color: colorPalette.main
+        }
+      };
+    default:
+      return {};
+  }
+};
+var effectStyles = (theme, colorPalette, { glass, gradient, glow }) => ({
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...gradient && {
+    "&.Mui-selected": {
+      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
+      backgroundSize: "200% 200%",
+      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      border: "none",
+      "&:hover": {
+        backgroundPosition: "100% 100%"
+      }
+    }
+  },
+  ...glow && {
+    "&.Mui-selected": {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`
+    }
+  }
+});
+
+export {
+  getColorFromTheme,
+  baseStyles,
+  variantStyles,
+  effectStyles
+};
+//# sourceMappingURL=chunk-6WIDZGXE.js.map

package/dist/chunk-6YLAVHV4.js

@@ -0,0 +1,240 @@
+import {
+  ScrollViewport
+} from "./chunk-C53C7C2X.js";
+import {
+  ScrollAreaContent
+} from "./chunk-4OEKIFBC.js";
+import {
+  resolveScrollAreaProps
+} from "./chunk-RHIDWUK7.js";
+
+// src/components/layout/ScrollArea/ScrollArea.tsx
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Fab from "@mui/material/Fab/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useObservedScrollRef = ({
+  externalScrollRef,
+  onResize
+}) => {
+  const internalScrollRef = useRef(null);
+  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!internalScrollRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setContainerDimensions({ width, height });
+        onResize?.({ width, height });
+      }
+    });
+    resizeObserver.observe(internalScrollRef.current);
+    return () => resizeObserver.disconnect();
+  }, [onResize]);
+  const setScrollRef = useCallback(
+    (node) => {
+      internalScrollRef.current = node;
+      if (externalScrollRef) {
+        externalScrollRef.current = node;
+      }
+    },
+    [externalScrollRef]
+  );
+  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };
+};
+var useAutoHide = ({
+  autoHide,
+  alwaysShowScrollbar,
+  autoHideDelay
+}) => {
+  const [isScrolling, setIsScrolling] = useState(false);
+  const timeoutRef = useRef(void 0);
+  const noteScroll = useCallback(() => {
+    if (!autoHide || alwaysShowScrollbar) return;
+    setIsScrolling(true);
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);
+  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);
+  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+  return { isScrolling, noteScroll };
+};
+var useScrollArea = (props) => {
+  const {
+    disabled,
+    onScroll,
+    onResize,
+    externalScrollRef,
+    autoHide,
+    autoHideDelay,
+    alwaysShowScrollbar,
+    scrollToTopButton,
+    scrollToTopThreshold,
+    smoothScroll
+  } = props;
+  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({
+    externalScrollRef,
+    onResize
+  });
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const { isScrolling, noteScroll } = useAutoHide({
+    autoHide,
+    alwaysShowScrollbar,
+    autoHideDelay
+  });
+  const handleScroll = useCallback(
+    (event) => {
+      if (disabled) return;
+      noteScroll();
+      if (scrollToTopButton && scrollRef.current) {
+        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);
+      }
+      onScroll?.(event);
+    },
+    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef]
+  );
+  const scrollToTop = useCallback(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? "smooth" : "auto" });
+  }, [smoothScroll, scrollRef]);
+  return {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  };
+};
+var LoadingOverlay = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 10
+    },
+    children: /* @__PURE__ */ jsx(CircularProgress, {})
+  }
+);
+var ScrollToTopFab = ({
+  visible,
+  glass,
+  scrollToTopLabel,
+  onClick
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Zoom, { in: visible, children: /* @__PURE__ */ jsx(
+    Fab,
+    {
+      size: "small",
+      "aria-label": scrollToTopLabel,
+      onClick,
+      sx: {
+        position: "absolute",
+        bottom: 16,
+        right: 16,
+        zIndex: 1,
+        backgroundColor: glass ? alpha(theme.palette.primary.main, 0.2) : theme.palette.primary.main,
+        backdropFilter: glass ? "blur(10px)" : "none",
+        "&:hover": {
+          backgroundColor: glass ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.dark
+        }
+      },
+      children: /* @__PURE__ */ jsx(KeyboardArrowUp, {})
+    }
+  ) });
+};
+var ScrollArea = (componentProps) => {
+  const resolved = resolveScrollAreaProps(componentProps);
+  const {
+    regionLabel,
+    scrollToTopLabel,
+    children,
+    width,
+    height,
+    maxHeight,
+    maxWidth,
+    orientation: _orientation,
+    scrollbarSize: _scrollbarSize,
+    autoHide,
+    autoHideDelay: _autoHideDelay,
+    smoothScroll: _smoothScroll,
+    variant,
+    onScroll: _onScroll,
+    scrollToTopButton,
+    scrollToTopThreshold: _scrollToTopThreshold,
+    scrollbarColor: _scrollbarColor,
+    scrollbarTrackColor: _scrollbarTrackColor,
+    contentPadding: _contentPadding,
+    alwaysShowScrollbar,
+    disabled,
+    loading,
+    emptyContent,
+    testId,
+    scrollRef: externalScrollRef,
+    onResize: _onResize,
+    sx,
+    ...props
+  } = resolved;
+  const {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  } = useScrollArea({ ...resolved, externalScrollRef });
+  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testId,
+      sx: { position: "relative", width, height, maxHeight, maxWidth, ...sx },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollViewport,
+          {
+            ...resolved,
+            regionLabel,
+            shouldShowScrollbar,
+            setScrollRef,
+            onScroll: handleScroll,
+            children: /* @__PURE__ */ jsx(
+              ScrollAreaContent,
+              {
+                emptyContent,
+                scrollRef,
+                containerWidth: containerDimensions.width,
+                children
+              }
+            )
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(LoadingOverlay, {}),
+        scrollToTopButton && scrollToTopLabel && !disabled && !loading && /* @__PURE__ */ jsx(
+          ScrollToTopFab,
+          {
+            scrollToTopLabel,
+            visible: showScrollToTop,
+            glass: variant === "glass",
+            onClick: scrollToTop
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  ScrollArea
+};
+//# sourceMappingURL=chunk-6YLAVHV4.js.map