@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-UMDXGIRZ.js

@@ -1,243 +0,0 @@
-import {
-  glowAnimation,
-  rippleAnimation,
-  scaleAnimation,
-  slideAnimation
-} from "./chunk-65CEXQ4L.js";
-import {
-  fieldEdge
-} from "./chunk-MLOWPVVW.js";
-
-// src/components/form/RadioGroup/RadioGroup.styles.ts
-import { alpha } from "@mui/material/styles/index.js";
-var neutralPalette = (theme) => ({
-  main: theme.palette.grey?.[700] || "#616161",
-  dark: theme.palette.grey?.[800] || "#424242",
-  light: theme.palette.grey?.[500] || "#9e9e9e",
-  contrastText: "#fff"
-});
-var namedPalette = (theme, color) => {
-  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
-  };
-  return colorMap[color] || theme.palette.primary;
-};
-var getColorFromTheme = (theme, color) => {
-  if (color === "neutral") {
-    return neutralPalette(theme);
-  }
-  const palette = namedPalette(theme, color);
-  const { primary } = theme.palette;
-  return {
-    main: palette.main || primary.main,
-    dark: palette.dark || palette.main || primary.dark,
-    light: palette.light || palette.main || primary.light,
-    contrastText: palette.contrastText || "#fff"
-  };
-};
-var pickSize = (map, size) => map[size] ?? map.md;
-var CARD_SIZES = {
-  xs: { padding: "8px", minHeight: "60px" },
-  sm: { padding: "12px", minHeight: "70px" },
-  md: { padding: "16px", minHeight: "80px" },
-  lg: { padding: "20px", minHeight: "90px" },
-  xl: { padding: "24px", minHeight: "100px" }
-};
-var BUTTON_SIZES = {
-  xs: { padding: "6px 12px", fontSize: "0.75rem", minHeight: "32px" },
-  sm: { padding: "8px 16px", fontSize: "0.875rem", minHeight: "36px" },
-  md: { padding: "10px 20px", fontSize: "1rem", minHeight: "40px" },
-  lg: { padding: "12px 24px", fontSize: "1.125rem", minHeight: "44px" },
-  xl: { padding: "14px 28px", fontSize: "1.25rem", minHeight: "48px" }
-};
-var SEGMENT_SIZES = {
-  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 formLabelSx = (theme, glass, error) => ({
-  marginBottom: theme.spacing(2),
-  fontWeight: 600,
-  color: error ? theme.palette.error.main : theme.palette.text.primary,
-  ...glass && {
-    backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(10px)",
-    padding: "8px 12px",
-    borderRadius: "8px",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    display: "inline-block"
-  }
-});
-var cardBase = (theme, flags, palette) => {
-  const { selected, animated, customSize = "md" } = flags;
-  return {
-    cursor: "pointer",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
-    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
-    position: "relative",
-    overflow: "hidden",
-    ...animated && { animation: `${slideAnimation} 0.4s ease-out` },
-    // A radial wash that grows from the centre as the card is selected or hovered.
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      width: selected ? "100%" : "0",
-      height: selected ? "100%" : "0",
-      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,
-      transform: "translate(-50%, -50%)",
-      transition: "all 0.5s ease",
-      borderRadius: "50%"
-    },
-    "&:hover": {
-      borderColor: palette.main,
-      backgroundColor: alpha(palette.main, 0.02),
-      transform: "translateY(-2px) scale(1.02)",
-      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,
-      "&::before": { width: "120%", height: "120%" }
-    },
-    "&:active": { transform: "scale(0.98)" },
-    ...pickSize(CARD_SIZES, customSize)
-  };
-};
-var radioCardSx = (theme, flags) => {
-  const { selected, customColor = "primary", glass, gradient, glow } = flags;
-  const palette = getColorFromTheme(theme, customColor);
-  return {
-    ...cardBase(theme, flags, palette),
-    ...glass && {
-      backgroundColor: selected ? alpha(palette.main, 0.1) : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
-    },
-    ...gradient && selected && {
-      background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,
-      borderColor: palette.main
-    },
-    ...glow && selected && {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`
-    }
-  };
-};
-var buttonBase = (theme, flags, palette) => {
-  const { selected, animated, customSize = "md" } = flags;
-  return {
-    borderRadius: theme.spacing(1),
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    fontWeight: 500,
-    border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
-    backgroundColor: selected ? palette.main : "transparent",
-    color: selected ? palette.contrastText || "#fff" : theme.palette.text.primary,
-    position: "relative",
-    overflow: "hidden",
-    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
-    // Sized to zero until pressed, when the ripple keyframes expand it.
-    "&::after": {
-      content: '""',
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      width: 0,
-      height: 0,
-      borderRadius: "50%",
-      backgroundColor: alpha(palette.contrastText || "#fff", 0.3),
-      transform: "translate(-50%, -50%)",
-      pointerEvents: "none"
-    },
-    "&:active::after": {
-      animation: `${rippleAnimation} 0.6s ease-out`,
-      width: "100%",
-      height: "100%"
-    },
-    "&:hover": {
-      borderColor: palette.main,
-      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
-      transform: "translateY(-1px) scale(1.02)",
-      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`
-    },
-    "&:active": { transform: "scale(0.98)" },
-    ...pickSize(BUTTON_SIZES, customSize)
-  };
-};
-var buttonRadioSx = (theme, flags) => {
-  const { selected, customColor = "primary", glass, gradient } = flags;
-  const palette = getColorFromTheme(theme, customColor);
-  return {
-    ...buttonBase(theme, flags, palette),
-    ...glass && {
-      backgroundColor: selected ? alpha(palette.main, 0.8) : alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: "blur(20px)",
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
-    },
-    ...gradient && selected && {
-      background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,
-      border: "none"
-    }
-  };
-};
-var segmentContainerSx = (theme, glass, customColor = "primary") => {
-  const palette = getColorFromTheme(theme, customColor);
-  return {
-    padding: "4px",
-    borderRadius: theme.spacing(1.5),
-    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : alpha(palette.main, 0.05),
-    backdropFilter: glass ? "blur(20px)" : "none",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    display: "flex",
-    gap: "2px"
-  };
-};
-var segmentUnderline = (color, selected) => ({
-  content: '""',
-  position: "absolute",
-  bottom: 0,
-  left: selected ? 0 : "50%",
-  width: selected ? "100%" : 0,
-  height: "2px",
-  backgroundColor: color,
-  transition: "all 0.3s ease",
-  transform: selected ? "translateX(0)" : "translateX(-50%)"
-});
-var segmentButtonSx = (theme, flags) => {
-  const { selected, customColor = "primary", customSize = "md", animated } = flags;
-  const palette = getColorFromTheme(theme, customColor);
-  return {
-    flex: 1,
-    borderRadius: theme.spacing(1),
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    fontWeight: 500,
-    backgroundColor: selected ? theme.palette.background.paper : "transparent",
-    color: selected ? palette.main : theme.palette.text.secondary,
-    boxShadow: selected ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}` : "none",
-    position: "relative",
-    overflow: "hidden",
-    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
-    "&::before": segmentUnderline(palette.main, Boolean(selected)),
-    "&:hover": {
-      backgroundColor: selected ? theme.palette.background.paper : alpha(theme.palette.action.hover, 0.08),
-      color: palette.main,
-      "&::before": { width: "100%", left: 0, transform: "translateX(0)" }
-    },
-    "&:active": { transform: "scale(0.98)" },
-    ...pickSize(SEGMENT_SIZES, customSize)
-  };
-};
-
-export {
-  formLabelSx,
-  radioCardSx,
-  buttonRadioSx,
-  segmentContainerSx,
-  segmentButtonSx
-};
-//# sourceMappingURL=chunk-UMDXGIRZ.js.map

package/dist/chunk-UNF65XZW.js

@@ -1,134 +0,0 @@
-import {
-  DragHandle
-} from "./chunk-JCJGJX7V.js";
-import {
-  useDataViewsCopy
-} from "./chunk-KHG57NAE.js";
-import {
-  Checkbox
-} from "./chunk-BJ3J6FTN.js";
-import {
-  default as default2
-} from "./chunk-6DPAWXZ3.js";
-
-// src/components/data-display/DataViews/base-list-card-gutters.tsx
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import IconButton from "@mui/material/IconButton/index.js";
-import { jsx } from "react/jsx-runtime";
-var CHECKBOX_PAD = "-9px";
-function DragSlot({
-  drag,
-  reserve,
-  testId
-}) {
-  if (!drag.draggable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "drag" }) : null;
-  return (
-    // display:flex, as on the checkbox below: the grip is an inline-grid, and in
-    // a block parent an inline box sits on the text baseline — the line box adds
-    // descender leading under it (21px glyph in a 31px slot) and drops the grip
-    // 5px below the row's centre. A flex parent has no baseline to sit on.
-    /* @__PURE__ */ jsx(
-      default2,
-      {
-        "data-slot": "drag",
-        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
-        children: /* @__PURE__ */ jsx(
-          DragHandle,
-          {
-            handleProps: drag.handleProps,
-            gated: drag.handleProps !== void 0,
-            testId
-          }
-        )
-      }
-    )
-  );
-}
-function SelectSlot({
-  selectable,
-  selected,
-  reserve,
-  onToggleSelect,
-  testId
-}) {
-  const copy = useDataViewsCopy();
-  if (!selectable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "select" }) : null;
-  return (
-    // z-index 1: above the stretched link, or the anchor swallows the click.
-    /* @__PURE__ */ jsx(
-      default2,
-      {
-        "data-slot": "select",
-        sx: { position: "relative", zIndex: 1, mx: CHECKBOX_PAD, display: "flex" },
-        children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: selected,
-            onChange: () => onToggleSelect?.(),
-            onClick: (event) => {
-              event.stopPropagation();
-              onToggleSelect?.(event);
-            },
-            size: "small",
-            "data-testid": testId,
-            "aria-label": copy.selection.selectRow
-          }
-        )
-      }
-    )
-  );
-}
-function DiscloseSlot({
-  expandable,
-  expanded,
-  reserve,
-  onToggle,
-  controls,
-  testId
-}) {
-  const copy = useDataViewsCopy();
-  if (!expandable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "disclose" }) : null;
-  return (
-    // z-index 1 and flex for the same reasons the other two gutters use them:
-    // above a stretched link that would otherwise swallow the click, and out of
-    // a baseline that would drop the glyph below the row's centre.
-    /* @__PURE__ */ jsx(
-      default2,
-      {
-        "data-slot": "disclose",
-        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
-        children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            "aria-expanded": expanded,
-            "aria-controls": expanded ? controls : void 0,
-            "aria-label": expanded ? copy.selection.collapseRow : copy.selection.expandRow,
-            "data-testid": testId,
-            onClick: (event) => {
-              event.stopPropagation();
-              onToggle();
-            },
-            onKeyDown: (event) => event.stopPropagation(),
-            sx: {
-              p: 0.25,
-              transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-              transition: "transform 150ms ease",
-              // Honour a reduced-motion preference: the state is carried by the
-              // angle, not by the animation, so dropping the tween loses nothing.
-              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
-            },
-            children: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { fontSize: "small" })
-          }
-        )
-      }
-    )
-  );
-}
-
-export {
-  DragSlot,
-  SelectSlot,
-  DiscloseSlot
-};
-//# sourceMappingURL=chunk-UNF65XZW.js.map

package/dist/chunk-URWGRPL7.js

@@ -1,34 +0,0 @@
-import {
-  fieldEdge
-} from "./chunk-MLOWPVVW.js";
-
-// src/components/form/AddressAutocomplete/AddressTextField.tsx
-import TextField from "@mui/material/TextField/index.js";
-import { alpha, styled } from "@mui/material/styles/index.js";
-import { jsx } from "react/jsx-runtime";
-var GlassTextField = styled(TextField)(({ theme }) => ({
-  "& .MuiOutlinedInput-root": {
-    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
-    backdropFilter: "blur(10px)",
-    WebkitBackdropFilter: "blur(10px)",
-    border: `1px solid ${fieldEdge(theme)}`,
-    transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
-    "&:hover": {
-      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,
-      borderColor: theme.palette.primary.main
-    },
-    "&.Mui-focused": {
-      background: theme.palette.background.paper,
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`
-    },
-    "& fieldset": {
-      border: "none"
-    }
-  }
-}));
-var AddressTextField = ({ addressVariant, ...props }) => addressVariant === "glass" ? /* @__PURE__ */ jsx(GlassTextField, { variant: "outlined", ...props }) : /* @__PURE__ */ jsx(TextField, { variant: addressVariant, ...props });
-
-export {
-  AddressTextField
-};
-//# sourceMappingURL=chunk-URWGRPL7.js.map

package/dist/chunk-UXQW6ZIN.js

@@ -1,203 +0,0 @@
-import {
-  ACTIONS_GAP_UNITS,
-  ACTIONS_MARGIN_TOP_UNITS,
-  ACTION_MIN_WIDTH,
-  CONTENT_GAP_UNITS,
-  DESCRIPTION_LINE_HEIGHT,
-  DESCRIPTION_MAX_WIDTH,
-  EMPTY_STATE_GAP_UNITS,
-  EMPTY_STATE_MIN_HEIGHT,
-  EMPTY_STATE_PADDING_UNITS,
-  EXTERNAL_LINK_MARK,
-  HELP_LINK_MARGIN_TOP_UNITS,
-  TITLE_MAX_WIDTH,
-  illustrationMaxWidth,
-  illustrationOpacity
-} from "./chunk-RKCS6K36.js";
-import {
-  actionsOf,
-  makeTestId
-} from "./chunk-MWFSIB6K.js";
-import {
-  resolveTestId
-} from "./chunk-QLWBQQW7.js";
-
-// src/components/data-display/EmptyState/EmptyState.tsx
-import AddIcon from "@mui/icons-material/Add";
-import RefreshIcon from "@mui/icons-material/Refresh";
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import Link from "@mui/material/Link/index.js";
-import Stack from "@mui/material/Stack/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ACTION_ICONS = {
-  Add: /* @__PURE__ */ jsx(AddIcon, {}),
-  Refresh: /* @__PURE__ */ jsx(RefreshIcon, {})
-};
-var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    "data-testid": testId,
-    sx: {
-      maxWidth: illustrationMaxWidth(variant),
-      width: "100%",
-      height: "auto",
-      opacity: illustrationOpacity(variant),
-      display: variant === "minimal" ? "none" : "block"
-    },
-    children: illustration
-  }
-);
-var Actions = ({ specs, testId }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      direction: { xs: "column", sm: "row" },
-      spacing: ACTIONS_GAP_UNITS,
-      alignItems: "center",
-      sx: { mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) },
-      children: specs.map((spec) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: spec.variant,
-          onClick: spec.onClick,
-          startIcon: spec.icon && ACTION_ICONS[spec.icon],
-          "data-testid": testId(spec.key),
-          sx: { minWidth: ACTION_MIN_WIDTH },
-          children: spec.label
-        },
-        spec.key
-      ))
-    }
-  );
-};
-var HelpLink = ({ helpLink, testId }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Link,
-    {
-      href: helpLink.href,
-      target: helpLink.external ? "_blank" : void 0,
-      rel: helpLink.external ? "noopener noreferrer" : void 0,
-      "data-testid": testId,
-      sx: {
-        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-        "&:hover": {
-          textDecoration: "underline"
-        }
-      },
-      children: [
-        helpLink.label,
-        helpLink.external && EXTERNAL_LINK_MARK
-      ]
-    }
-  );
-};
-var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Stack, { spacing: CONTENT_GAP_UNITS, alignItems: "center", children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        id: titleId,
-        variant: "h6",
-        component: "h3",
-        "data-testid": testId("title"),
-        sx: {
-          fontWeight: theme.typography.fontWeightMedium,
-          color: theme.palette.text.primary,
-          maxWidth: TITLE_MAX_WIDTH
-        },
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "body2",
-        color: "text.secondary",
-        "data-testid": testId("description"),
-        sx: {
-          maxWidth: DESCRIPTION_MAX_WIDTH,
-          lineHeight: DESCRIPTION_LINE_HEIGHT
-        },
-        children: description
-      }
-    ),
-    showActions && /* @__PURE__ */ jsx(Actions, { specs: actions, testId }),
-    helpLink && /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") })
-  ] });
-};
-var EmptyState = React.memo((props) => {
-  const {
-    variant = "default",
-    title,
-    description,
-    illustration,
-    helpLink,
-    refreshLabel = "Refresh",
-    createLabel = "Create New",
-    className
-  } = props;
-  const theme = useTheme();
-  const titleId = React.useId();
-  const dataTestId = resolveTestId(props);
-  const testId = makeTestId(dataTestId);
-  const actions = actionsOf(props, refreshLabel, createLabel);
-  const showActions = variant === "action" || actions.length > 0;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "region",
-      "aria-labelledby": titleId,
-      className,
-      "data-testid": dataTestId || "empty-state",
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
-        minHeight: EMPTY_STATE_MIN_HEIGHT,
-        gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
-      },
-      children: [
-        illustration && /* @__PURE__ */ jsx(
-          Illustration,
-          {
-            illustration,
-            variant,
-            testId: testId("icon")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Content,
-          {
-            title,
-            description,
-            titleId,
-            testId,
-            actions,
-            showActions,
-            helpLink
-          }
-        )
-      ]
-    }
-  );
-});
-EmptyState.displayName = "EmptyState";
-var EmptyState_default = EmptyState;
-
-export {
-  EmptyState,
-  EmptyState_default
-};
-//# sourceMappingURL=chunk-UXQW6ZIN.js.map