@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-6BDYC4RA.js

@@ -0,0 +1,175 @@
+import {
+  BreadcrumbEntry
+} from "./chunk-5W4BLTDI.js";
+import {
+  breadcrumbsBarStyles,
+  sizeIconMap
+} from "./chunk-6CTPDNNX.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import { useTheme, styled } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled(MuiBreadcrumbs, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "color" && prop !== "visualStyle" && prop !== "elevation"
+})(
+  ({ theme, size, color, visualStyle, elevation = 0 }) => ({
+    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation })
+  })
+);
+var AnimatedSeparator = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.6,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  }
+}));
+var getSeparator = (separatorType) => {
+  const separatorContent = (() => {
+    switch (separatorType) {
+      case "slash":
+        return "/";
+      case "arrow":
+        return /* @__PURE__ */ jsx(NavigateNext, { fontSize: "small" });
+      case "chevron":
+        return /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" });
+      case "dot":
+        return "\u2022";
+      case "pipe":
+        return "|";
+      default:
+        return /* @__PURE__ */ jsx(ArrowForwardIos, { sx: { fontSize: sxRem(12) } });
+    }
+  })();
+  return /* @__PURE__ */ jsx(AnimatedSeparator, { children: separatorContent });
+};
+var collapseItems = ({
+  items,
+  effectiveMaxItems,
+  collapseBehavior
+}) => {
+  if (items.length <= effectiveMaxItems) {
+    return { displayItems: items, collapsedItems: [] };
+  }
+  if (collapseBehavior === "menu") {
+    const firstItem = items[0];
+    const tail = items.slice(-(effectiveMaxItems - 2));
+    return {
+      displayItems: firstItem ? [firstItem, ...tail] : tail,
+      collapsedItems: items.slice(1, -(effectiveMaxItems - 2))
+    };
+  }
+  if (collapseBehavior === "ellipsis") {
+    const half = Math.floor(effectiveMaxItems / 2);
+    return {
+      displayItems: [
+        ...items.slice(0, half),
+        { label: "...", href: "#", isEllipsis: true },
+        ...items.slice(-half)
+      ],
+      collapsedItems: []
+    };
+  }
+  return { displayItems: items, collapsedItems: [] };
+};
+var BREADCRUMBS_DEFAULTS = {
+  variant: "default",
+  separatorType: "default",
+  maxItems: 8,
+  showHomeIcon: true,
+  size: "md",
+  color: "neutral",
+  elevation: 1,
+  collapseBehavior: "menu",
+  mobileMaxItems: 3
+};
+var resolveProps = (props) => ({
+  ...BREADCRUMBS_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var Breadcrumbs = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      separatorType,
+      items,
+      separator,
+      maxItems,
+      showHomeIcon,
+      size,
+      color,
+      elevation,
+      collapseBehavior,
+      mobileMaxItems,
+      ariaLabel,
+      copy,
+      dataTestId,
+      ...props
+    } = resolveProps(componentProps);
+    const theme = useTheme();
+    const finalSeparator = separator || getSeparator(separatorType);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const iconSize = sizeIconMap[size];
+    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;
+    const shouldCollapse = items.length > effectiveMaxItems;
+    const { displayItems, collapsedItems } = collapseItems({
+      items,
+      effectiveMaxItems,
+      collapseBehavior
+    });
+    return /* @__PURE__ */ jsx(
+      StyledBreadcrumbs,
+      {
+        ref,
+        separator: finalSeparator,
+        maxItems: shouldCollapse ? void 0 : effectiveMaxItems,
+        size,
+        color,
+        visualStyle: variant,
+        elevation,
+        "aria-label": ariaLabel || "breadcrumb navigation",
+        role: "navigation",
+        "data-testid": dataTestId || "breadcrumbs",
+        ...props,
+        children: displayItems.map((item, index) => /* @__PURE__ */ jsx(
+          BreadcrumbEntry,
+          {
+            copy,
+            item,
+            index,
+            itemCount: displayItems.length,
+            collapsedItems,
+            collapseBehavior,
+            separator: finalSeparator,
+            showHomeIcon,
+            iconSize,
+            size,
+            variant,
+            dataTestId
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=chunk-6BDYC4RA.js.map

package/dist/chunk-6CTPDNNX.js

@@ -0,0 +1,194 @@
+import {
+  modeInk,
+  shadowInk,
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  EFFECT_GLOW
+} from "./chunk-N3GAFIXG.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0.4)};
+  }
+  70% {
+    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.brandIndigo, 0)};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.brandIndigo, 0)};
+  }
+`;
+var BAR_VARIANTS = {
+  glass: (theme, elevation) => ({
+    background: theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.7) : sheen(theme, 0.7),
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(modeInk(theme), 0.1)}`,
+    boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.3)}, inset 0 1px 0 ${sheen(theme, 0.1)}` : `0 ${elevation * 4}px ${elevation * 8}px ${shadowInk(theme, 0.08)}, inset 0 1px 0 ${sheen(theme, 0.8)}`
+  }),
+  elevated: (theme, elevation) => ({
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[elevation] || theme.shadows[1],
+    borderRadius: theme.spacing(1.5)
+  }),
+  outlined: (theme, _elevation) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.spacing(1)
+  })
+};
+var separatorStyles = (theme, size, color, _visualStyle) => ({
+  "& .MuiBreadcrumbs-separator": {
+    marginLeft: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    marginRight: theme.spacing(size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1),
+    opacity: 0.6,
+    transition: "all 0.2s ease",
+    ...color === "primary" && {
+      color: theme.palette.primary.main
+    },
+    ...color === "secondary" && {
+      color: theme.palette.secondary.main
+    }
+  }
+});
+var barVariantStyles = (theme, visualStyle, elevation) => visualStyle ? BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {} : {};
+var breadcrumbsBarStyles = ({
+  theme,
+  size,
+  color,
+  visualStyle,
+  elevation = 0
+}) => ({
+  padding: theme.spacing(size === "sm" ? 0.75 : size === "lg" ? 1.5 : 1, 2),
+  borderRadius: theme.spacing(visualStyle === "glass" ? 2 : 1),
+  ...barVariantStyles(theme, visualStyle, elevation),
+  animation: `${slideIn} 0.3s ease-out`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  position: "relative",
+  // Glass morphism effect
+  // Elevated variant
+  // Outlined variant
+  "& .MuiBreadcrumbs-ol": {
+    alignItems: "center",
+    flexWrap: "nowrap",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+      gap: theme.spacing(0.5)
+    }
+  },
+  ...separatorStyles(theme, size, color, visualStyle),
+  "&:hover": {
+    ...visualStyle === "glass" && {
+      background: theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.85) : sheen(theme, 0.85),
+      boxShadow: theme.palette.mode === "dark" ? `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.4)}` : `0 ${elevation * 6}px ${elevation * 12}px ${shadowInk(theme, 0.12)}`
+    }
+  }
+});
+var linkGlassIdleStyles = (theme) => ({
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    opacity: 0,
+    transition: "opacity 0.3s ease",
+    borderRadius: "inherit"
+  }
+});
+var linkActiveStyles = (theme, visualStyle) => ({
+  pointerEvents: "none",
+  cursor: "default",
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    animation: `${pulse} 2s infinite`
+  }
+});
+var linkHoverStyles = (theme, visualStyle) => ({
+  '&:hover, &[data-hover="true"]': {
+    color: theme.palette.primary.main,
+    backgroundColor: alpha(theme.palette.primary.main, visualStyle === "glass" ? 0.1 : 0.08),
+    transform: "translateY(-1px)",
+    "&::before": {
+      opacity: 1
+    },
+    "& .breadcrumb-icon": {
+      transform: "scale(1.1)"
+    }
+  }
+});
+var breadcrumbLinkStyles = ({
+  theme,
+  size,
+  active,
+  visualStyle
+}) => ({
+  ...visualStyle === "glass" && !active ? linkGlassIdleStyles(theme) : {},
+  ...active ? linkActiveStyles(theme, visualStyle) : {},
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textDecoration: "none",
+  fontSize: rem(theme, size === "sm" ? 14 : size === "lg" ? 18 : 16),
+  fontWeight: active ? 600 : 400,
+  color: active ? theme.palette.text.primary : theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  overflow: "hidden",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  // Add subtle background for glass variant
+  ...linkHoverStyles(theme, visualStyle),
+  "&:active": {
+    transform: "translateY(0)",
+    backgroundColor: alpha(theme.palette.primary.main, 0.12)
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04)
+  },
+  "& .breadcrumb-icon": {
+    transition: "transform 0.2s ease"
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: rem(theme, size === "lg" ? 16 : size === "sm" ? 12 : 14),
+    padding: theme.spacing(0.375, 0.5)
+  }
+});
+var sizeIconMap = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+
+export {
+  slideIn,
+  pulse,
+  breadcrumbsBarStyles,
+  breadcrumbLinkStyles,
+  sizeIconMap
+};
+//# sourceMappingURL=chunk-6CTPDNNX.js.map

package/dist/chunk-6GRZ77IS.js

@@ -0,0 +1,173 @@
+import {
+  EFFECT_GLOW
+} from "./chunk-N3GAFIXG.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var pulseGlow = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0.4)};
+  }
+  70% {
+    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.muiBlue, 0)};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0)};
+  }
+`;
+var SIZE_STYLES = {
+  sm: (theme) => ({
+    padding: theme.spacing(1, 1.5),
+    fontSize: rem(theme, 14),
+    "& .MuiListItemIcon-root": { transform: "scale(0.85)" }
+  }),
+  lg: (theme) => ({
+    padding: theme.spacing(2, 2.5),
+    fontSize: rem(theme, 18),
+    "& .MuiListItemIcon-root": { transform: "scale(1.15)" }
+  })
+};
+var horizontalStyles = (theme) => ({
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(0, 0.5),
+  background: alpha(theme.palette.background.paper, 0.6),
+  backdropFilter: "blur(8px)",
+  border: `none`
+  // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+});
+var collapsedStyles = () => ({
+  justifyContent: "center",
+  minHeight: 56,
+  "& .MuiListItemIcon-root": {
+    margin: 0
+  }
+});
+var activeStyles = (theme, _variant) => ({
+  color: theme.palette.primary.main,
+  cursor: "default",
+  "& .MuiListItemIcon-root": {
+    color: theme.palette.primary.main
+  },
+  "&::before": {
+    opacity: 1,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
+  },
+  "&:hover": {
+    background: "none",
+    transform: "none",
+    boxShadow: "none",
+    "&::before": {
+      opacity: 1
+    },
+    "& .MuiListItemIcon-root": {
+      transform: "none"
+    },
+    "& .MuiListItemText-primary": {
+      transform: "none"
+    }
+  }
+});
+var navDecorationStyles = (theme) => ({
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
+    opacity: 0,
+    transition: "opacity 0.3s ease"
+  },
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    height: "100%",
+    background: `radial-gradient(circle, ${alpha(theme.palette.primary.main, 0.3)} 0%, transparent 70%)`,
+    transform: "translate(-50%, -50%) scale(0)",
+    transition: "transform 0.6s ease",
+    borderRadius: "50%"
+  }
+});
+var navInteractionStyles = (theme, minimal, collapsed, size) => ({
+  "&:hover": minimal ? {
+    // Simple hover for minimal variant
+    backgroundColor: alpha(theme.palette.action.hover, 0.08),
+    color: theme.palette.primary.main,
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main
+    }
+  } : {
+    // Fancy hover for non-minimal variant
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
+    color: theme.palette.primary.main,
+    boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04),
+    "&::before": {
+      opacity: 1
+    },
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main,
+      transform: collapsed ? "scale(1.1)" : size === "sm" ? "scale(0.95) rotate(-5deg)" : size === "lg" ? "scale(1.25) rotate(-5deg)" : "scale(1.1) rotate(-5deg)",
+      transition: "all 0.3s ease"
+    },
+    "& .MuiListItemText-primary": {
+      transform: "translateX(4px)",
+      transition: "transform 0.3s ease"
+    }
+  },
+  "&:active": minimal ? {
+    // Simple active state for minimal variant
+    opacity: 0.7
+  } : {
+    // Fancy active state for non-minimal variant
+    transform: "scale(0.98)",
+    "&::after": {
+      transform: "translate(-50%, -50%) scale(2)"
+    }
+  }
+});
+var navItemButtonStyles = ({
+  theme,
+  variant,
+  active,
+  size,
+  collapsed,
+  minimal
+}) => ({
+  ...size ? SIZE_STYLES[size]?.(theme) ?? {} : {},
+  ...variant === "horizontal" ? horizontalStyles(theme) : {},
+  ...collapsed ? collapsedStyles() : {},
+  ...active ? activeStyles(theme, variant) : {},
+  ...navDecorationStyles(theme),
+  ...navInteractionStyles(theme, minimal, collapsed, size),
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(0.5),
+  position: "relative",
+  overflow: "hidden",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  transformStyle: "preserve-3d"
+});
+
+export {
+  slideIn,
+  pulseGlow,
+  navItemButtonStyles
+};
+//# sourceMappingURL=chunk-6GRZ77IS.js.map

package/dist/chunk-6JNQLW5L.js

@@ -0,0 +1,131 @@
+import {
+  FilterChips,
+  PALETTE_CARD_SX,
+  PaletteBody,
+  PaletteInput,
+  PaletteScrollArea,
+  Paper,
+  createKeyDownHandler,
+  ghostRemainder
+} from "./chunk-YAFBUYVW.js";
+
+// src/components/form/SearchPalette/SearchPalette.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_MAX_ITEMS = 5;
+function resolveOpts(props) {
+  return {
+    maxItems: props.maxItems ?? DEFAULT_MAX_ITEMS,
+    filters: props.filters ?? [],
+    activeFilterIds: props.activeFilterIds ?? [],
+    isLoading: Boolean(props.isLoading),
+    showGhostText: props.showGhostText ?? true,
+    autoFocus: props.autoFocus ?? true
+  };
+}
+function resolveText(props) {
+  return {
+    submitAllLabel: props.submitAllLabel,
+    submitKeyLabel: props.submitKeyLabel,
+    noResultsLabel: props.noResultsLabel,
+    placeholder: props.placeholder,
+    dataTestId: props.dataTestId ?? "search-palette"
+  };
+}
+function SearchPalette(props) {
+  const opts = resolveOpts(props);
+  const text = resolveText(props);
+  const trimmed = props.value.trim();
+  const hasQuery = trimmed.length > 0;
+  const visible = props.items.slice(0, opts.maxItems);
+  const showFooter = Boolean(props.onSubmitAll) && hasQuery;
+  const rowCount = visible.length + (showFooter ? 1 : 0);
+  const footerIndex = showFooter ? visible.length : -1;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  React.useEffect(() => {
+    setActiveIndex((i) => rowCount === 0 ? 0 : Math.min(i, rowCount - 1));
+  }, [rowCount]);
+  const top = visible[0];
+  const ghost = opts.showGhostText && hasQuery && top ? ghostRemainder(props.getPrimary(top), props.value) : "";
+  const onKeyDown = createKeyDownHandler({
+    rowCount,
+    activeIndex,
+    footerIndex,
+    visible,
+    hasQuery,
+    ghost,
+    top,
+    trimmed,
+    getPrimary: props.getPrimary,
+    onChange: props.onChange,
+    onSelect: props.onSelect,
+    onSubmitAll: props.onSubmitAll,
+    onClose: props.onClose,
+    setActiveIndex
+  });
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      elevation: 8,
+      className: props.className,
+      "data-testid": text.dataTestId,
+      sx: PALETTE_CARD_SX,
+      children: [
+        /* @__PURE__ */ jsx(
+          PaletteInput,
+          {
+            value: props.value,
+            ghost,
+            isLoading: opts.isLoading,
+            autoFocus: opts.autoFocus,
+            placeholder: text.placeholder,
+            inputAriaLabel: props.inputAriaLabel,
+            hasQuery,
+            onChange: props.onChange,
+            onKeyDown
+          }
+        ),
+        opts.filters.length > 0 && /* @__PURE__ */ jsx(
+          FilterChips,
+          {
+            filters: opts.filters,
+            activeFilterIds: opts.activeFilterIds,
+            onToggleFilter: props.onToggleFilter
+          }
+        ),
+        /* @__PURE__ */ jsx(PaletteScrollArea, { children: /* @__PURE__ */ jsx(
+          PaletteBody,
+          {
+            hasQuery,
+            emptyQueryContent: props.emptyQueryContent,
+            visible,
+            isLoading: opts.isLoading,
+            noResultsLabel: text.noResultsLabel,
+            showFooter,
+            footerIndex,
+            activeIndex,
+            trimmed,
+            submitAllLabel: text.submitAllLabel,
+            submitKeyLabel: text.submitKeyLabel,
+            getKey: props.getKey,
+            getPrimary: props.getPrimary,
+            getSecondary: props.getSecondary,
+            getLead: props.getLead,
+            getTrailing: props.getTrailing,
+            onSelect: props.onSelect,
+            onSubmitAll: props.onSubmitAll,
+            setActiveIndex
+          }
+        ) })
+      ]
+    }
+  );
+}
+SearchPalette.displayName = "SearchPalette";
+var SearchPalette_default = SearchPalette;
+
+export {
+  SearchPalette,
+  SearchPalette_default
+};
+//# sourceMappingURL=chunk-6JNQLW5L.js.map