@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-UOPQOBQZ.js

@@ -0,0 +1,191 @@
+import {
+  RangeBounds
+} from "./chunk-XEE7PLDR.js";
+import {
+  isRangeSet
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-4T6W43TO.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/data-views-more-fields.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INLINE_OPTION_LIMIT = 2;
+function OverflowPill({
+  field,
+  values,
+  onToggle,
+  onClear,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const options = field.pill?.options ?? [];
+  if (options.length > INLINE_OPTION_LIMIT) {
+    return /* @__PURE__ */ jsx(
+      MultiSelectDropdown,
+      {
+        extraOptionsHeading: copy.filters.optionsHeading,
+        clearText: copy.filters.clear,
+        clearLabel: copy.filters.clearRange(field.label),
+        label: field.pill?.label ?? field.label,
+        options,
+        selected: new Set(values),
+        onToggle,
+        onClear,
+        allLabel: copy.filters.allOption,
+        searchable: options.length > 6 ? true : void 0,
+        searchPlaceholder: copy.filters.optionSearchPlaceholder,
+        noResultsLabel: copy.filters.optionsEmpty,
+        layout: "pill",
+        "data-testid": `${testIdPrefix}-more-${field.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: (field.pill?.options ?? []).map((option) => {
+    const checked = values.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      default2,
+      {
+        component: "label",
+        "data-testid": `${testIdPrefix}-more-${field.id}-${option.value}`,
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.25,
+          pr: 1,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: checked ? "primary.main" : "divider",
+          bgcolor: checked ? "action.selected" : "transparent",
+          borderRadius: 5,
+          cursor: "pointer",
+          fontSize: "0.8125rem",
+          color: checked ? "primary.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              inputProps: { "aria-label": `${field.label}: ${option.label}` }
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function OverflowRange({
+  field,
+  value,
+  onChange,
+  testIdPrefix
+}) {
+  if (!field.range) return null;
+  return /* @__PURE__ */ jsx(
+    RangeBounds,
+    {
+      field: field.range,
+      value,
+      onChange,
+      testId: `${testIdPrefix}-more-${field.id}`
+    }
+  );
+}
+function fieldClearing({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange
+}) {
+  if (field.group === "range") {
+    return {
+      applied: isRangeSet(ranges[field.id] ?? {}),
+      clear: () => onChangeRange(field.id, {})
+    };
+  }
+  const values = pills[field.id] ?? [];
+  return {
+    applied: values.length > 0,
+    clear: () => values.forEach((value) => onTogglePill(field.id, value, false))
+  };
+}
+function MoreGroup({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });
+  return /* @__PURE__ */ jsxs(default2, { sx: { mb: 1.5, "&:last-of-type": { mb: 0 } }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { color: "text.secondary" }, children: [
+        field.label,
+        field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " \u2022" : ""
+      ] }) }),
+      applied && /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "button",
+          type: "button",
+          onClick: clear,
+          "data-testid": `${testIdPrefix}-more-${field.id}-clear`,
+          sx: {
+            ml: "auto",
+            border: 0,
+            p: 0,
+            bgcolor: "transparent",
+            cursor: "pointer",
+            font: "inherit",
+            fontSize: "0.75rem",
+            color: "primary.main",
+            "&:hover": { textDecoration: "underline" }
+          },
+          children: copy.filters.clear
+        }
+      )
+    ] }),
+    field.group === "pill" ? /* @__PURE__ */ jsx(
+      OverflowPill,
+      {
+        field,
+        values: pills[field.id] ?? [],
+        onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+        onClear: () => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false)),
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(
+      OverflowRange,
+      {
+        field,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  fieldClearing,
+  MoreGroup
+};
+//# sourceMappingURL=chunk-UOPQOBQZ.js.map

package/dist/chunk-V5P5Q6HM.js

@@ -0,0 +1,108 @@
+import {
+  MapCoordinates,
+  MapMarkers
+} from "./chunk-FRW4SYZD.js";
+import {
+  MapLayers
+} from "./chunk-SHDIZSN5.js";
+import {
+  StaticMapView
+} from "./chunk-WBKWIFXA.js";
+import {
+  glassStyles,
+  resolveMapPreviewProps
+} from "./chunk-ACZH2NUW.js";
+import {
+  useMapPreview
+} from "./chunk-AGYGNNOM.js";
+
+// src/components/data-display/MapPreview/MapPreview.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MapContainer = styled(Paper)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  borderRadius: theme.shape.borderRadius * 2,
+  overflow: "hidden",
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+}));
+var MapWrapper = styled(Box)(({ height }) => ({
+  width: "100%",
+  height,
+  position: "relative"
+}));
+var cursorFor = (grabbing, interactive) => {
+  if (grabbing) return "grabbing";
+  return interactive ? "grab" : "default";
+};
+var MapPreview = (componentProps) => {
+  const props = resolveMapPreviewProps(componentProps);
+  const theme = useTheme();
+  const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
+  const height = controls.isFullscreen ? "100vh" : props.height;
+  const grabbing = pointer.isDragging || pointer.isPanning;
+  return /* @__PURE__ */ jsx(
+    MapContainer,
+    {
+      ref: containerRef,
+      elevation: props.variant === "glass" ? 0 : 2,
+      "data-testid": "map-preview-container",
+      role: "img",
+      "aria-label": `Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`,
+      tabIndex: 0,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      sx: glassStyles(props.variant, theme),
+      children: /* @__PURE__ */ jsxs(
+        MapWrapper,
+        {
+          height,
+          onClick: handleMapClick,
+          onMouseDown: pointer.handleMouseDown,
+          onMouseMove: pointer.handleMouseMove,
+          onMouseUp: pointer.handleMouseUp,
+          onMouseLeave: pointer.handleMouseUp,
+          style: {
+            cursor: cursorFor(grabbing, props.interactive),
+            transition: props.animated ? "all 0.3s ease" : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              StaticMapView,
+              {
+                height,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                marker: props.marker && props.markers.length === 0,
+                markerPosition: view.markerPosition,
+                panOffset: view.panOffset
+              }
+            ),
+            /* @__PURE__ */ jsx(MapMarkers, { markers: props.markers, centre: view.markerPosition, animated: props.animated }),
+            /* @__PURE__ */ jsx(
+              MapLayers,
+              {
+                settings: props,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                search,
+                controls
+              }
+            ),
+            /* @__PURE__ */ jsx(MapCoordinates, { position: view.markerPosition, zoom: view.zoom })
+          ]
+        }
+      )
+    }
+  );
+};
+var MapPreview_default = MapPreview;
+
+export {
+  MapPreview,
+  MapPreview_default
+};
+//# sourceMappingURL=chunk-V5P5Q6HM.js.map

package/dist/chunk-VIK3HAUQ.js

@@ -0,0 +1,337 @@
+import {
+  usePhoneInput
+} from "./chunk-BGYLL467.js";
+import {
+  countries
+} from "./chunk-3JDP5OUR.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+
+// src/components/form/PhoneInput/PhoneInput.tsx
+import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import PhoneIcon from "@mui/icons-material/Phone";
+import Box from "@mui/material/Box/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } 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"
+    }
+  },
+  "& .MuiInputLabel-root": {
+    "&.Mui-focused": {
+      color: theme.palette.primary.main
+    }
+  }
+}));
+var CountrySelector = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  transition: theme.transitions.create(["background-color"]),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  }
+}));
+var CountryMenu = styled(Menu)(({ theme }) => ({
+  "& .MuiPaper-root": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    maxHeight: 400
+  }
+}));
+var PhoneField = ({
+  TextFieldComponent,
+  copy,
+  variant,
+  label,
+  placeholder,
+  value,
+  validation,
+  disabled,
+  required,
+  fullWidth,
+  icon,
+  isValid,
+  selectedCountry,
+  anchorEl,
+  onChange,
+  onFocus,
+  onBlur,
+  onCountryOpen,
+  onCountryOpenViaKeyboard
+}) => /* @__PURE__ */ jsx(
+  TextFieldComponent,
+  {
+    variant: variant === "glass" ? "outlined" : variant,
+    label,
+    placeholder,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    error: validation.hasError,
+    helperText: validation.helperText,
+    disabled,
+    required,
+    fullWidth,
+    type: "tel",
+    "data-testid": "phone-input-field",
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(
+        CountryAdornment,
+        {
+          selectCountryLabel: copy.selectCountry,
+          country: selectedCountry,
+          menuOpen: Boolean(anchorEl),
+          onOpen: onCountryOpen,
+          onOpenViaKeyboard: onCountryOpenViaKeyboard
+        }
+      ),
+      endAdornment: /* @__PURE__ */ jsx(ValidityAdornment, { icon, isValid })
+    },
+    sx: {
+      "& input": {
+        letterSpacing: "0.5px"
+      }
+    }
+  }
+);
+var PHONE_INPUT_DEFAULTS = {
+  variant: "outlined",
+  label: "Phone Number",
+  placeholder: "Enter phone number",
+  icon: /* @__PURE__ */ jsx(PhoneIcon, {}),
+  defaultValue: "",
+  countryCode: "US",
+  floating: false,
+  error: false,
+  disabled: false,
+  required: false,
+  fullWidth: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var CountryAdornment = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => /* @__PURE__ */ jsx(InputAdornment, { position: "start", "data-testid": "phone-input-start-adornment", children: /* @__PURE__ */ jsxs(
+  CountrySelector,
+  {
+    onClick: onOpen,
+    role: "button",
+    "aria-label": selectCountryLabel,
+    "aria-expanded": menuOpen,
+    tabIndex: 0,
+    "data-testid": "country-selector",
+    onKeyDown: (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      onOpenViaKeyboard(e.currentTarget);
+    },
+    children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", sx: { mr: 0.5 }, "data-testid": "country-flag", children: country?.flag }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: { mr: 0.5 },
+          "data-testid": "country-dial-code",
+          children: country?.dial
+        }
+      ),
+      /* @__PURE__ */ jsx(ArrowDropDown, { fontSize: "small", "data-testid": "country-dropdown-icon" })
+    ]
+  }
+) });
+var ValidityAdornment = ({
+  icon,
+  isValid
+}) => {
+  const theme = useTheme();
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", "data-testid": "phone-input-end-adornment", children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        color: isValid ? theme.palette.success.main : theme.palette.text.secondary,
+        transition: "color 0.3s ease"
+      },
+      "data-testid": "phone-input-icon",
+      children: icon
+    }
+  ) });
+};
+var CountryPicker = ({ anchorEl, selectedCode, onClose, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    CountryMenu,
+    {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      "data-testid": "country-menu",
+      children: countries.map((country) => /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          onClick: () => onSelect(country),
+          selected: country.code === selectedCode,
+          "data-testid": `country-option-${country.code}`,
+          sx: {
+            "&:hover": {
+              background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "span", children: country.flag }) }),
+            /* @__PURE__ */ jsx(
+              ListItemText,
+              {
+                primary: country.name,
+                secondary: country.dial,
+                primaryTypographyProps: { fontSize: "0.9rem" },
+                secondaryTypographyProps: { fontSize: "0.8rem" }
+              }
+            )
+          ]
+        },
+        country.code
+      ))
+    }
+  );
+};
+var resolveValidation = ({
+  error,
+  errorMessage,
+  isValid,
+  value,
+  isFocused,
+  helper,
+  countryName,
+  copy
+}) => {
+  const looksInvalid = !isValid && value !== "" && !isFocused;
+  return {
+    hasError: error || looksInvalid,
+    helperText: errorMessage || (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper)
+  };
+};
+var PhoneInput = (props) => {
+  const { copy } = props;
+  const {
+    variant,
+    label,
+    placeholder,
+    icon,
+    defaultValue,
+    countryCode: initialCountryCode,
+    floating,
+    onChange,
+    helper,
+    error,
+    errorMessage,
+    disabled,
+    required,
+    fullWidth
+  } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
+  const {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    handleCountryClick,
+    handleCountryClose,
+    handleCountrySelect,
+    handleChange,
+    handleBlur
+  } = usePhoneInput({ defaultValue, initialCountryCode, onChange });
+  const validation = resolveValidation({
+    error,
+    errorMessage,
+    isValid,
+    value,
+    isFocused,
+    helper,
+    countryName: selectedCountry?.name,
+    copy
+  });
+  const TextFieldComponent = variant === "glass" ? GlassTextField : TextField;
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "phone-input-container", children: [
+    /* @__PURE__ */ jsx(
+      PhoneField,
+      {
+        copy,
+        TextFieldComponent,
+        variant,
+        label: floating ? void 0 : label,
+        placeholder,
+        value,
+        validation,
+        disabled,
+        required,
+        fullWidth,
+        icon,
+        isValid,
+        selectedCountry,
+        anchorEl,
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: handleBlur,
+        onCountryOpen: handleCountryClick,
+        onCountryOpenViaKeyboard: setAnchorEl
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CountryPicker,
+      {
+        anchorEl,
+        selectedCode: selectedCountry?.code,
+        onClose: handleCountryClose,
+        onSelect: handleCountrySelect
+      }
+    )
+  ] });
+};
+var PhoneInput_default = PhoneInput;
+
+export {
+  PhoneInput,
+  PhoneInput_default
+};
+//# sourceMappingURL=chunk-VIK3HAUQ.js.map

package/dist/chunk-VPHOSIPB.js

@@ -0,0 +1,33 @@
+import {
+  ToggleField
+} from "./chunk-LYMAMKJT.js";
+import {
+  TextField
+} from "./chunk-B3BK2SNS.js";
+import {
+  SelectField
+} from "./chunk-JDMYD6QC.js";
+import {
+  CepField
+} from "./chunk-TPIBJP4S.js";
+import {
+  CategoryField
+} from "./chunk-OOGEYCJH.js";
+import {
+  __export
+} from "./chunk-PZ5AY32C.js";
+
+// src/components/form/total-form/Fields/index.ts
+var Fields_exports = {};
+__export(Fields_exports, {
+  CategoryField: () => CategoryField,
+  CepField: () => CepField,
+  SelectField: () => SelectField,
+  TextField: () => TextField,
+  ToggleField: () => ToggleField
+});
+
+export {
+  Fields_exports
+};
+//# sourceMappingURL=chunk-VPHOSIPB.js.map

package/dist/chunk-VR5HDUBK.js

@@ -0,0 +1,34 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Pagination
+} from "./chunk-W2UTDN4T.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-pagination.tsx
+import { jsx } from "react/jsx-runtime";
+function DataViewsPagination({
+  c,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!c.serverMode || c.serverPageCount <= 1) return null;
+  return /* @__PURE__ */ jsx(default2, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      pageSizeLabel: copy.nav.pageSize,
+      page: c.serverPage,
+      count: c.serverPageCount,
+      onChange: (_event, page) => c.changePage(page),
+      dataTestId: `${testIdPrefix}-pagination`
+    }
+  ) });
+}
+
+export {
+  DataViewsPagination
+};
+//# sourceMappingURL=chunk-VR5HDUBK.js.map