@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-3NGE6NE6.js

@@ -0,0 +1,47 @@
+import {
+  darken,
+  decomposeColor,
+  getContrastRatio,
+  getLuminance,
+  hslToRgb,
+  lighten,
+  recomposeColor
+} from "./chunk-F5H2ZXST.js";
+
+// src/tokens/field-edge.core.ts
+var MIN_UI_CONTRAST = 3;
+var STEP = 0.05;
+var MAX_STEPS = 20;
+function channels(colour) {
+  const decomposed = decomposeColor(colour);
+  const rgb = decomposed.type.startsWith("hsl") ? decomposeColor(hslToRgb(colour)) : decomposed;
+  const [r, g, b, a] = rgb.values;
+  return [r ?? 0, g ?? 0, b ?? 0, a ?? 1];
+}
+function flatten(colour, surface) {
+  const [r, g, b, alpha] = channels(colour);
+  if (alpha >= 1) return recomposeColor({ type: "rgb", values: [r, g, b] });
+  const [baseR, baseG, baseB] = channels(surface);
+  const blend = (fg, bg) => Math.round(alpha * fg + (1 - alpha) * bg);
+  return recomposeColor({
+    type: "rgb",
+    values: [blend(r, baseR), blend(g, baseG), blend(b, baseB)]
+  });
+}
+function resolveFieldEdge(divider, surface) {
+  const ground = flatten(surface, "#FFFFFF");
+  const seed = flatten(divider, ground);
+  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
+  const away = getLuminance(ground) > 0.5 ? darken : lighten;
+  for (let step = 1; step <= MAX_STEPS; step += 1) {
+    const candidate = away(seed, step * STEP);
+    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
+  }
+  return getLuminance(ground) > 0.5 ? "#000000" : "#FFFFFF";
+}
+
+export {
+  MIN_UI_CONTRAST,
+  resolveFieldEdge
+};
+//# sourceMappingURL=chunk-3NGE6NE6.js.map

package/dist/chunk-3S44O3WI.js

@@ -0,0 +1,181 @@
+import {
+  DeleteViewDialog
+} from "./chunk-NZZ2BTIK.js";
+import {
+  DataViewsGrid
+} from "./chunk-DSDZIBLQ.js";
+import {
+  viewStateKey
+} from "./chunk-ZOLAYP2D.js";
+import {
+  ViewDialogs,
+  ViewMutationErrorAlert
+} from "./chunk-5XZEGI35.js";
+import {
+  useSavedViewsController
+} from "./chunk-HR7YTBR7.js";
+
+// src/components/data-display/DataViews/DataViewsTableBase.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useUrlSyncState(server, initialState) {
+  const isServerMode = server !== void 0;
+  return useMemo(
+    () => isServerMode && initialState ? {
+      search: initialState.search,
+      pills: initialState.pills,
+      ranges: initialState.ranges,
+      sortBy: initialState.sortBy,
+      // The scope belongs in the URL-driven slice alongside them: a
+      // `?view=recusados`-style deep link and browser back/forward must
+      // move the tab strip, and they must do it WITHOUT resetting the
+      // user's hidden columns — which is the whole reason this is a
+      // merging `syncState` and not a replacing `appliedState`.
+      scope: initialState.scope
+    } : void 0,
+    [isServerMode, initialState]
+  );
+}
+function resolveInitialView(views, requestedId) {
+  const requested = requestedId ? views.find((view) => view.id === requestedId) : void 0;
+  return requested ?? views.find((view) => view.isDefault);
+}
+function buildDisplayView({
+  ctl,
+  views,
+  activeView,
+  dirty,
+  onRequestDelete
+}) {
+  return {
+    activeViewName: ctl.activeViewName,
+    dirty,
+    onReset: () => activeView ? ctl.applyView(activeView) : ctl.selectMain(),
+    // Only offer "Atualizar" when there IS a view to update — otherwise the
+    // single footer button is a plain "Salvar visão".
+    onUpdate: activeView ? () => ctl.openEdit(activeView) : void 0,
+    onSaveAs: ctl.openCreate,
+    // The views themselves, not a dropdown: the panel renders them in its own
+    // body (see `data-views-view-nav`), so there is no second popover to clip
+    // the row actions.
+    nav: {
+      views,
+      activeViewId: activeView?.id ?? null,
+      onSelectView: (id) => {
+        const next = id === null ? null : views.find((view) => view.id === id);
+        if (next) ctl.applyView(next);
+        else ctl.selectMain();
+      },
+      onEditView: ctl.openEdit,
+      onPatchView: (view, changes) => void ctl.patchView(view, changes),
+      onDeleteView: onRequestDelete
+    }
+  };
+}
+function useDirtyTracking(ctl) {
+  const [dirty, setDirty] = useState(false);
+  const [savedAt, setSavedAt] = useState(0);
+  const baseline = useRef(null);
+  const appliedKey = JSON.stringify(ctl.applied ?? null);
+  useEffect(() => {
+    baseline.current = null;
+    setDirty(false);
+  }, [appliedKey, savedAt]);
+  return {
+    dirty,
+    noteState: (state) => {
+      ctl.currentRef.current = state;
+      const key = viewStateKey(state);
+      if (baseline.current === null) {
+        baseline.current = key;
+        setDirty(false);
+        return;
+      }
+      const next = key !== baseline.current;
+      setDirty((prev) => prev === next ? prev : next);
+    },
+    markSaved: () => setSavedAt((tick) => tick + 1)
+  };
+}
+function DataViewsTableBase(props) {
+  const {
+    initialViewId = null,
+    persistence,
+    router,
+    columns,
+    fields,
+    testIdPrefix = "table",
+    views,
+    server,
+    initialState
+  } = props;
+  const initialView = resolveInitialView(views, initialViewId);
+  const columnIds = columns.map((col) => col.id);
+  const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
+  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const activeView = views.find((view) => view.name === ctl.activeViewName);
+  const displayView = buildDisplayView({
+    ctl,
+    views,
+    activeView,
+    dirty,
+    onRequestDelete: setPendingDelete
+  });
+  const syncState = useUrlSyncState(server, initialState);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ViewMutationErrorAlert, { error: ctl.mutationError, onClose: ctl.clearMutationError, testIdPrefix }),
+    /* @__PURE__ */ jsx(
+      DataViewsGrid,
+      {
+        ...props,
+        testIdPrefix,
+        appliedState: ctl.applied,
+        syncState,
+        onStateChange: noteState,
+        displayView
+      }
+    ),
+    renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved),
+    /* @__PURE__ */ jsx(
+      DeleteViewDialog,
+      {
+        view: pendingDelete,
+        onClose: () => setPendingDelete(null),
+        onConfirm: (view) => {
+          void ctl.handleDelete(view);
+          setPendingDelete(null);
+        },
+        testIdPrefix
+      }
+    )
+  ] });
+}
+function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
+  return /* @__PURE__ */ jsx(
+    ViewDialogs,
+    {
+      saveOpen: ctl.saveOpen,
+      onCloseSave: ctl.closeSave,
+      currentState: ctl.editing ? ctl.editing.state : ctl.currentRef.current,
+      fields,
+      columns,
+      editing: ctl.editing,
+      onSave: async (payload) => {
+        await ctl.handleSave(payload);
+        onSaved();
+      },
+      manageOpen: ctl.manageOpen,
+      onCloseManage: () => ctl.setManageOpen(false),
+      views,
+      onEditFromManage: ctl.editFromManage,
+      onDelete: (view) => void ctl.handleDelete(view),
+      testIdPrefix
+    }
+  );
+}
+
+export {
+  DataViewsTableBase
+};
+//# sourceMappingURL=chunk-3S44O3WI.js.map

package/dist/chunk-3UQMIFPA.js

@@ -0,0 +1,220 @@
+import {
+  EN_US_SOCIAL_LOGIN_COPY
+} from "./chunk-INGPH3YQ.js";
+import {
+  Heading
+} from "./chunk-63D2UYRJ.js";
+import {
+  Separator
+} from "./chunk-RWXYND4H.js";
+import {
+  Card,
+  CardContent
+} from "./chunk-J2QIICWP.js";
+import {
+  Button
+} from "./chunk-JE6FNSQV.js";
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  uiInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/social-login-button/social-login-button.tsx
+import * as React from "react";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var logoStyle = (theme) => ({ width: rem(theme, 20), height: rem(theme, 20) });
+var GoogleIcon = () => {
+  const theme = useTheme();
+  const logo = uiInk(theme).socialBrand.googleLogo;
+  return /* @__PURE__ */ jsxs("svg", { style: logoStyle(theme), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+        fill: logo.blue
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+        fill: logo.green
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+        fill: logo.yellow
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+        fill: logo.red
+      }
+    )
+  ] });
+};
+var FacebookIcon = () => {
+  const theme = useTheme();
+  const { logo } = uiInk(theme).socialBrand.facebook;
+  return /* @__PURE__ */ jsx("svg", { style: logoStyle(theme), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z",
+      fill: logo
+    }
+  ) });
+};
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { style: logoStyle(useTheme()), viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+var GOOGLE_LOGO_WHEN_DISABLED_SX = {
+  "&.Mui-disabled .MuiButton-startIcon": {
+    filter: "brightness(0)",
+    opacity: (theme) => theme.palette.action.disabledOpacity
+  }
+};
+var FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {
+  "& .MuiButton-startIcon path": { fill: "currentColor" }
+};
+var brand = (pick) => (theme) => pick(uiInk(theme).socialBrand);
+var providerConfig = {
+  google: {
+    Icon: GoogleIcon,
+    variant: "outline",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.google.background),
+      color: brand((c) => c.google.text),
+      borderColor: brand((c) => c.google.border),
+      "&:hover": {
+        backgroundColor: brand((c) => c.google.hover),
+        borderColor: brand((c) => c.google.hoverBorder)
+      },
+      ...GOOGLE_LOGO_WHEN_DISABLED_SX
+    }
+  },
+  facebook: {
+    Icon: FacebookIcon,
+    variant: "solid",
+    color: "primary",
+    sx: {
+      backgroundColor: brand((c) => c.facebook.background),
+      color: brand((c) => c.facebook.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.facebook.hover)
+      },
+      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX
+    }
+  },
+  apple: {
+    Icon: AppleIcon,
+    variant: "solid",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.apple.background),
+      color: brand((c) => c.apple.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.apple.hover)
+      }
+    }
+  }
+};
+var ICON_ONLY_SX = {
+  justifyContent: "center",
+  gap: 0,
+  "& .MuiButton-startIcon": { margin: 0 }
+};
+var SocialLoginButton = React.forwardRef(
+  ({
+    provider,
+    onClick,
+    loading = false,
+    disabled = false,
+    fullWidth = true,
+    copy = EN_US_SOCIAL_LOGIN_COPY,
+    dataTestId,
+    iconOnly = false
+  }, ref) => {
+    const config = providerConfig[provider];
+    const label = copy[provider];
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: config.variant,
+        color: config.color,
+        size: "lg",
+        loading,
+        disabled,
+        onClick,
+        icon: /* @__PURE__ */ jsx(config.Icon, {}),
+        dataTestId,
+        fullWidth,
+        ...iconOnly ? { "aria-label": label, title: label } : {},
+        sx: {
+          minHeight: sxRem(48),
+          justifyContent: "flex-start",
+          gap: 2,
+          ...iconOnly ? ICON_ONLY_SX : {},
+          ...config.sx
+        },
+        children: iconOnly ? void 0 : label
+      }
+    );
+  }
+);
+SocialLoginButton.displayName = "SocialLoginButton";
+function cardMaxWidth(theme, value) {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+}
+function SocialLoginContainer({
+  children,
+  title = "Sign in to continue",
+  subtitle,
+  showDivider = false,
+  dividerText = "or",
+  maxWidth
+}) {
+  const theme = useTheme();
+  return (
+    // `width: 100%` is what makes the cap below mean anything. Every caller
+    // centres this card in a flex column (`Container variant="centered"` does),
+    // and a flex item under `align-items: center` sizes to its CONTENT — so the
+    // card sat at whatever the longest label happened to need, ~267px, at every
+    // viewport from 390 to 1280. The 400 was never reached, which is why raising
+    // it would have changed nothing; the card had no width to cap.
+    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth: cardMaxWidth(theme, maxWidth ?? 400) }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
+      title && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { spacing: 2, children }),
+      showDivider && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: dividerText }),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] })
+    ] }) }) })
+  );
+}
+
+export {
+  GoogleIcon,
+  FacebookIcon,
+  AppleIcon,
+  SocialLoginButton,
+  SocialLoginContainer
+};
+//# sourceMappingURL=chunk-3UQMIFPA.js.map

package/dist/chunk-3WIA25YQ.js

@@ -0,0 +1,158 @@
+import {
+  CategoryPanel
+} from "./chunk-UNJMMLO7.js";
+import {
+  CategoryTrigger
+} from "./chunk-DFMLD537.js";
+import {
+  METRICS
+} from "./chunk-RCQYCDV6.js";
+import {
+  CategoryPanelSurface
+} from "./chunk-QYY37ECA.js";
+import {
+  useCategorySelect
+} from "./chunk-RZVUY2MO.js";
+import {
+  useCategoryKeyHandler
+} from "./chunk-USJPZ5Q7.js";
+import {
+  useCategoryCommit
+} from "./chunk-XHHR6G35.js";
+import {
+  categoryPath,
+  summarizeSelection
+} from "./chunk-PN4HVM43.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/CategorySelect/CategorySelect.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { useTheme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function appliedIds(props) {
+  if (props.mode === "single") return props.value ? [props.value] : [];
+  return props.value;
+}
+function draftChanged(draft, applied) {
+  return draft.size !== applied.length || applied.some((id) => !draft.has(id));
+}
+function singleLabel(groups, value) {
+  if (!value) return void 0;
+  return categoryPath(groups, value)?.join(" \u203A ");
+}
+function resolveConfig(props) {
+  const single = props.mode === "single";
+  return {
+    single,
+    placeholder: props.placeholder ?? (single ? props.copy.placeholderSingle : props.copy.placeholderMulti),
+    disabled: props.disabled ?? false,
+    loading: props.loading ?? false,
+    fullWidth: props.fullWidth ?? false,
+    showCounts: props.showCounts ?? false,
+    allowParentSelection: props.allowParentSelection ?? false,
+    dataTestId: props.dataTestId ?? "category-select"
+  };
+}
+function usePanelFocus(open, activeIndex, searchInputRef, listRef) {
+  useEffect(() => {
+    if (!open) return void 0;
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [open, searchInputRef]);
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const rows = listRef.current?.querySelectorAll('[role="option"], [role="button"]');
+    rows?.[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, listRef]);
+}
+function CategorySelect(props) {
+  const { options, label, error, onCreateCategory, copy } = props;
+  const {
+    single,
+    placeholder,
+    disabled,
+    loading,
+    fullWidth,
+    showCounts,
+    allowParentSelection,
+    dataTestId
+  } = resolveConfig(props);
+  const theme = useTheme();
+  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));
+  const applied = appliedIds(props);
+  const state = useCategorySelect({ options, selected: applied });
+  const searchInputRef = useRef(null);
+  const listRef = useRef(null);
+  usePanelFocus(state.open, state.activeIndex, searchInputRef, listRef);
+  const chips = useMemo(
+    () => summarizeSelection(state.allGroups, state.draft),
+    [state.allGroups, state.draft]
+  );
+  const rowIds = useMemo(() => state.rows.map((row) => row.id), [state.rows]);
+  const actions = useCategoryCommit({ props, state, single, allowParentSelection });
+  const onKeyDown = useCategoryKeyHandler({ state, single, allowParentSelection, actions });
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      CategoryTrigger,
+      {
+        copy,
+        placeholder,
+        selectionLabel: props.mode === "single" ? singleLabel(state.allGroups, props.value) : void 0,
+        count: single ? void 0 : applied.length,
+        open: state.open,
+        disabled,
+        fullWidth,
+        onOpen: state.openPanel,
+        onClear: applied.length > 0 ? actions.clearSelection : void 0,
+        triggerRef: state.triggerRef,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CategoryPanelSurface,
+      {
+        open: state.open,
+        sheet,
+        anchorEl: state.triggerRef.current,
+        onClose: actions.cancel,
+        children: /* @__PURE__ */ jsx(
+          CategoryPanel,
+          {
+            copy,
+            state,
+            chips,
+            rowIds,
+            changed: draftChanged(state.draft, applied),
+            single,
+            sheet,
+            loading,
+            showCounts,
+            allowParentSelection,
+            ariaLabel: label ?? placeholder,
+            onKeyDown,
+            onActivateCategory: actions.activateCategory,
+            onActivateSubcategory: actions.activateSubcategory,
+            onApply: actions.commit,
+            onCancel: actions.cancel,
+            onCreateCategory,
+            searchInputRef,
+            listRef,
+            dataTestId
+          }
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+
+export {
+  CategorySelect
+};
+//# sourceMappingURL=chunk-3WIA25YQ.js.map