@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-SQV3HPTZ.js

@@ -0,0 +1,249 @@
+import {
+  tabsRootStyles
+} from "./chunk-EWSGWLHN.js";
+import {
+  CustomTabPanel
+} from "./chunk-7UZ2TFIK.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import MuiTab from "@mui/material/Tab/index.js";
+import MuiTabs from "@mui/material/Tabs/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledTabs = styled(MuiTabs, {
+  shouldForwardProp: (prop) => !["customVariant", "size", "showDividers"].includes(prop)
+})(
+  ({ theme, customVariant, size, showDividers }) => ({
+    ...tabsRootStyles({ theme, customVariant, size, showDividers })
+  })
+);
+var CloseButton = styled(Box)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  padding: theme.spacing(0.25),
+  width: 20,
+  height: 20,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  color: theme.palette.action.active,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.error.main, 0.1),
+    color: theme.palette.error.main
+  }
+}));
+var BadgeWrapper = styled(Badge)(() => ({
+  "& .MuiBadge-badge": {
+    right: -6,
+    top: 4,
+    fontSize: "0.75rem",
+    minWidth: 16,
+    height: 16,
+    padding: 0
+  }
+}));
+var TABS_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  fullWidth: false,
+  orientation: "horizontal",
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: "auto",
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false
+};
+var OWN_PROPS = /* @__PURE__ */ new Set([
+  "items",
+  "closeTabLabel",
+  "color",
+  "size",
+  "fullWidth",
+  "scrollable",
+  "scrollButtons",
+  "sticky",
+  "stickyOffset",
+  "animateContent",
+  "animationDuration",
+  "persistContent",
+  "tabPanelProps",
+  "loading",
+  "loadingComponent"
+]);
+var domPassthrough = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled
+}) => ({
+  ...fullWidth && { width: "100%" },
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...sticky && {
+    position: "sticky",
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: "background.default",
+    borderBottom: 1,
+    borderColor: "divider"
+  },
+  ...indicatorColor && {
+    "& .MuiTabs-indicator": { backgroundColor: indicatorColor }
+  },
+  ...disabled && { opacity: 0.6, pointerEvents: "none" }
+});
+var TabLabel = ({ item, closeTabLabel, onClose }) => {
+  const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.closable && /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        onClick: (e) => onClose(e, item.id),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": closeTabLabel,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          onClose(e, item.id);
+        },
+        children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+      }
+    )
+  ] });
+  if (item.badge === void 0) return content;
+  return /* @__PURE__ */ jsx(BadgeWrapper, { badgeContent: item.badge, color: "error", children: content });
+};
+var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => /* @__PURE__ */ jsx(
+  StyledTabs,
+  {
+    ...rest,
+    value,
+    onChange,
+    customVariant: p.variant,
+    size: p.size,
+    showDividers: p.showDividers,
+    orientation: p.orientation,
+    centered: p.centered,
+    variant: p.scrollable ? "scrollable" : "standard",
+    "data-testid": dataTestId ? `${dataTestId}-list` : "tabs-list",
+    scrollButtons: resolveScrollButtons(p.scrollable),
+    allowScrollButtonsMobile: p.scrollable,
+    textColor: p.color,
+    indicatorColor: p.color,
+    sx: buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: p.stickyOffset,
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled
+    }),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      MuiTab,
+      {
+        value: item.id,
+        label: /* @__PURE__ */ jsx(TabLabel, { closeTabLabel: p.closeTabLabel, item, onClose: onCloseTab }),
+        disabled: item.disabled || p.disabled,
+        className: item.className,
+        id: `tab-${item.id}`,
+        "aria-controls": `tabpanel-${item.id}`,
+        "aria-disabled": item.disabled || p.disabled,
+        "data-testid": dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`
+      },
+      item.id
+    ))
+  }
+);
+var TabsPanels = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: variant === "enclosed" ? 0 : 2 }, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  CustomTabPanel,
+  {
+    id: item.id,
+    value,
+    animate: animateContent,
+    animationDuration,
+    persist: persistContent,
+    loading,
+    loadingComponent,
+    className: tabPanelProps?.className,
+    dataTestId,
+    index,
+    children: item.content
+  },
+  item.id
+)) });
+var Tabs = React.forwardRef(
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) };
+    const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
+      value: _value,
+      onChange,
+      onTabClose,
+      className,
+      disabled,
+      showDividers,
+      variant,
+      dataTestId,
+      ...rest
+    } = resolved;
+    const handleChange = (event, newValue) => {
+      if (!disabled) onChange(event, newValue);
+    };
+    const handleTabClose = (event, tabId) => {
+      event.stopPropagation();
+      onTabClose?.(tabId);
+    };
+    return /* @__PURE__ */ jsxs(Box, { className, ref, "data-testid": dataTestId || "tabs", children: [
+      /* @__PURE__ */ jsx(
+        TabsBar,
+        {
+          ...resolved,
+          rest: domPassthrough(rest),
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-SQV3HPTZ.js.map

package/dist/chunk-T3WHW7ZC.js

@@ -0,0 +1,74 @@
+import {
+  getOverflowStyle,
+  getVariantStyles
+} from "./chunk-L7SFH3ED.js";
+
+// src/components/layout/ScrollArea/ScrollViewport.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var ScrollViewport = ({
+  regionLabel,
+  children,
+  height,
+  maxHeight,
+  orientation,
+  scrollbarSize,
+  scrollbarColor,
+  scrollbarTrackColor,
+  contentPadding,
+  variant,
+  disabled,
+  loading,
+  smoothScroll,
+  shouldShowScrollbar,
+  setScrollRef,
+  onScroll
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: setScrollRef,
+      onScroll,
+      role: "region",
+      "aria-label": regionLabel,
+      "aria-busy": loading,
+      tabIndex: disabled ? -1 : 0,
+      sx: {
+        width: "100%",
+        height: "100%",
+        // Use an explicit maxHeight when height is 'auto', else inherit.
+        maxHeight: height === "auto" && maxHeight ? maxHeight : "100%",
+        padding: contentPadding,
+        opacity: loading ? 0.5 : 1,
+        pointerEvents: disabled || loading ? "none" : "auto",
+        transition: "opacity 0.3s ease",
+        "&:focus": {
+          outline: "none",
+          "&:focus-visible": {
+            outline: `2px solid ${theme.palette.primary.main}`,
+            outlineOffset: -2
+          }
+        },
+        ...getOverflowStyle({ disabled, orientation }),
+        ...getVariantStyles({
+          theme,
+          variant,
+          orientation,
+          scrollbarSize,
+          scrollbarColor,
+          scrollbarTrackColor,
+          shouldShowScrollbar
+        })
+      },
+      style: { scrollBehavior: smoothScroll ? "smooth" : "auto" },
+      children
+    }
+  );
+};
+
+export {
+  ScrollViewport
+};
+//# sourceMappingURL=chunk-T3WHW7ZC.js.map

package/dist/chunk-T7LTL7OC.js

@@ -0,0 +1,127 @@
+import {
+  SwitchControl,
+  SwitchHelper,
+  SwitchRow
+} from "./chunk-V26IDPL4.js";
+import {
+  switchIds
+} from "./chunk-SZS7VZJN.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Switch/Switch.tsx
+import Box from "@mui/material/Box/index.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  glow: false,
+  glass: false,
+  gradient: false,
+  labelPosition: "end",
+  error: false,
+  animated: true,
+  loading: false,
+  ripple: false,
+  pulse: false
+};
+var Switch = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    description,
+    glow,
+    glass,
+    gradient,
+    labelPosition,
+    onIcon,
+    offIcon,
+    onText,
+    offText,
+    error,
+    helperText,
+    trackWidth,
+    trackHeight,
+    checked,
+    onChange,
+    animated,
+    loading,
+    ripple,
+    pulse,
+    id,
+    inputProps,
+    ...others
+  } = withDefaults(props, DEFAULTS);
+  const { testId: dataTestId, rest } = splitTestId(others);
+  const containerTestId = dataTestId ? `${dataTestId}-container` : "switch-container";
+  const { inputId, descriptionId, helperId, describedBy } = switchIds({
+    generated: useId(),
+    id,
+    inputProps,
+    description,
+    helperText,
+    callerDescribedBy: rest["aria-describedby"]
+  });
+  const control = /* @__PURE__ */ jsx(
+    SwitchControl,
+    {
+      customVariant: variant,
+      customColor: color,
+      customSize: size,
+      glow,
+      glass,
+      gradient,
+      trackWidth,
+      trackHeight,
+      onText,
+      offText,
+      loading,
+      ripple,
+      pulse,
+      checked,
+      onChange,
+      onIcon,
+      offIcon,
+      animated,
+      size,
+      dataTestId,
+      switchRef: ref,
+      inputId,
+      inputProps,
+      describedBy,
+      rest
+    }
+  );
+  const helper = /* @__PURE__ */ jsx(SwitchHelper, { helperText, error, dataTestId, id: helperId });
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsx(
+      SwitchRow,
+      {
+        label,
+        description,
+        labelPosition,
+        error,
+        dataTestId,
+        htmlFor: inputId,
+        descriptionId,
+        disabled: Boolean(rest.disabled) || loading,
+        control
+      }
+    ),
+    helper
+  ] });
+});
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-T7LTL7OC.js.map

package/dist/chunk-TAB6AIPN.js

@@ -0,0 +1,132 @@
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-2XGGHYEA.js";
+import {
+  CellConfigProvider,
+  cellTracks
+} from "./chunk-6VP2L3DJ.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/list-card-rails.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+function metaRail(columns) {
+  return `minmax(max-content, ${Math.max(columns, 1)}fr)`;
+}
+function contentRails(metaColumns) {
+  return metaColumns > 0 ? { caption: "minmax(0, auto)", meta: metaRail(metaColumns) } : { caption: "minmax(0, 1fr)", meta: "auto" };
+}
+var DEFAULT_RAILS = {
+  disclose: "auto",
+  drag: "auto",
+  select: "auto",
+  leading: "auto",
+  // Two is the canonical row (a date and a method); a list carrying a different
+  // number says so with `metaColumns`, and a standalone card counts its own.
+  ...contentRails(2),
+  // `max-content` on the value, so the rail is as wide as the widest amount in
+  // the list and no wider — a fixed px guess is either clipping or dead space.
+  // NOT an `fr`: the value's whole promise is a fixed right edge, and a rail
+  // that grows with the spare width moves that edge on every list.
+  value: "max-content",
+  actions: "auto"
+};
+var ListRailsContext = createContext(null);
+function useListRails() {
+  return useContext(ListRailsContext);
+}
+function railsTemplate(rails) {
+  return [
+    rails.disclose,
+    rails.drag,
+    rails.select,
+    rails.leading,
+    rails.caption,
+    rails.meta,
+    rails.value,
+    rails.actions
+  ].filter((rail) => rail != null).join(" ");
+}
+var RAIL_GAP = 3;
+var RAIL_GAP_PX = RAIL_GAP * 8;
+function railsTemplateFor(gutters, metaColumns) {
+  return railsTemplate({
+    ...DEFAULT_RAILS,
+    // Standalone, the card can simply COUNT its pairs — no `metaColumns` to be
+    // told, and no guess.
+    ...contentRails(metaColumns),
+    ...gutters.disclose ? {} : { disclose: null },
+    ...gutters.drag ? {} : { drag: null },
+    ...gutters.select ? {} : { select: null }
+  });
+}
+var RAIL_COUNT = 8;
+var CELL_FIXED_RAILS = 4;
+function cellRailsTemplate(cells) {
+  return [
+    DEFAULT_RAILS.disclose,
+    DEFAULT_RAILS.drag,
+    DEFAULT_RAILS.select,
+    DEFAULT_RAILS.leading,
+    ...cells,
+    DEFAULT_RAILS.actions
+  ].join(" ");
+}
+function cellRailCount(cells) {
+  return CELL_FIXED_RAILS + cells + 1;
+}
+function ListCardGroup({
+  children,
+  density = "cozy",
+  cells,
+  metaColumns,
+  rails,
+  reserveGutters = true,
+  gap,
+  dataTestId
+}) {
+  const resolved = {
+    ...DEFAULT_RAILS,
+    ...metaColumns == null ? {} : contentRails(metaColumns),
+    ...rails
+  };
+  const configured = cells != null && cells.length > 0;
+  const template = configured ? cellRailsTemplate(cellTracks(cells)) : railsTemplate(resolved);
+  const railCount = configured ? cellRailCount(cells.length) : RAIL_COUNT;
+  return /* @__PURE__ */ jsx(ListRailsContext.Provider, { value: { density, reserveGutters, railCount }, children: /* @__PURE__ */ jsx(CellConfigProvider, { cells, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        // The query container for every row inside it — a row cannot be one
+        // itself and a subgrid at the same time (containment drops subgrid).
+        // Every row in a list is the same width anyway, so the group is the
+        // honest place to ask the question.
+        containerType: "inline-size",
+        display: "grid",
+        gridTemplateColumns: template,
+        alignItems: "center",
+        rowGap: gap ?? DENSITY_ROW_PADDING[density]
+      },
+      children
+    }
+  ) }) });
+}
+
+export {
+  metaRail,
+  contentRails,
+  DEFAULT_RAILS,
+  useListRails,
+  railsTemplate,
+  RAIL_GAP,
+  RAIL_GAP_PX,
+  railsTemplateFor,
+  RAIL_COUNT,
+  cellRailsTemplate,
+  cellRailCount,
+  ListCardGroup
+};
+//# sourceMappingURL=chunk-TAB6AIPN.js.map