@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-EOW2ECB3.js

@@ -0,0 +1,107 @@
+import {
+  StepRow
+} from "./chunk-R75DZ3AK.js";
+import {
+  resolveWorkflowStepProps,
+  withDerivedStatus
+} from "./chunk-V5KKBMAT.js";
+
+// src/components/utility/WorkflowStep/WorkflowStep.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var StepContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "variant"].includes(prop)
+})(({ theme, orientation, variant }) => ({
+  display: "flex",
+  flexDirection: orientation === "vertical" ? "column" : "row",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  gap: orientation === "vertical" ? theme.spacing(2) : theme.spacing(1),
+  width: "100%",
+  position: "relative",
+  // Variant-specific styles
+  ...variant === "minimal" && {
+    gap: orientation === "vertical" ? theme.spacing(1) : theme.spacing(0.5)
+  }
+}));
+var WorkflowStep = forwardRef((rawProps, ref) => {
+  const {
+    steps,
+    currentStep,
+    variant,
+    orientation,
+    color,
+    size,
+    showProgress,
+    animated,
+    interactive,
+    showNumbers,
+    showIcons,
+    completedIcon,
+    errorIcon,
+    onStepClick,
+    disabled,
+    className,
+    style,
+    "data-testid": dataTestId,
+    ...other
+  } = resolveWorkflowStepProps(rawProps);
+  const handleStepClick = useCallback((stepIndex, step) => {
+    if (onStepClick && !disabled && !step.disabled) {
+      onStepClick(stepIndex, step);
+    }
+  }, [onStepClick, disabled]);
+  const stepsWithStatus = useMemo(
+    () => withDerivedStatus(steps, currentStep),
+    [steps, currentStep]
+  );
+  return /* @__PURE__ */ jsx(
+    StepContainer,
+    {
+      ref,
+      orientation,
+      variant,
+      className,
+      style,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": steps.length - 1,
+      "aria-valuenow": currentStep,
+      "aria-valuetext": `Step ${currentStep + 1} of ${steps.length}: ${steps[currentStep]?.title}`,
+      "data-testid": dataTestId,
+      ...other,
+      children: stepsWithStatus.map((step, index) => /* @__PURE__ */ jsx(
+        StepRow,
+        {
+          step,
+          index,
+          isLast: index === steps.length - 1,
+          orientation,
+          variant,
+          color,
+          size,
+          showNumbers,
+          showIcons,
+          showProgress,
+          completedIcon,
+          errorIcon,
+          interactive,
+          animated,
+          disabled,
+          onClick: handleStepClick,
+          dataTestId
+        },
+        index
+      ))
+    }
+  );
+});
+WorkflowStep.displayName = "WorkflowStep";
+var WorkflowStep_default = WorkflowStep;
+
+export {
+  WorkflowStep,
+  WorkflowStep_default
+};
+//# sourceMappingURL=chunk-EOW2ECB3.js.map

package/dist/chunk-EXZSHZRS.js

@@ -0,0 +1,39 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Select
+} from "./chunk-JCBIPBGZ.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-2HVNPWFV.js";
+
+// src/components/form/total-form/Fields/SelectField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectField({ name, options, label, placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        options,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, String(event.target.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  SelectField
+};
+//# sourceMappingURL=chunk-EXZSHZRS.js.map

package/dist/chunk-F5KEWLZK.js

@@ -0,0 +1,68 @@
+import {
+  ErrorState
+} from "./chunk-DZHN5FFX.js";
+import {
+  LoadingState
+} from "./chunk-QO6QWBDI.js";
+import {
+  EmptyState
+} from "./chunk-MZMGQKT3.js";
+
+// src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StateBox = ({ state, className, dataTestId, children }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    "data-testid": dataTestId || "async-state-container",
+    "data-state": state,
+    children
+  }
+);
+var errorMessageOf = (error) => {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  return "An unexpected error occurred";
+};
+var pickNode = (node, render, fallback) => node || render?.() || fallback;
+var AsyncStateContainer = React.memo(
+  ({
+    isLoading = false,
+    error,
+    isEmpty = false,
+    children,
+    loadingComponent,
+    renderLoading,
+    errorComponent,
+    renderError,
+    emptyComponent,
+    emptyTitle,
+    renderEmpty,
+    className,
+    dataTestId
+  }) => {
+    const box = { className, dataTestId };
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "loading", ...box, children: pickNode(loadingComponent, renderLoading, /* @__PURE__ */ jsx(LoadingState, {})) });
+    }
+    if (error) {
+      const message = errorMessageOf(error);
+      return /* @__PURE__ */ jsx(StateBox, { state: "error", ...box, children: errorComponent || renderError?.(message) || /* @__PURE__ */ jsx(ErrorState, { message }) });
+    }
+    if (isEmpty) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "empty", ...box, children: pickNode(emptyComponent, renderEmpty, /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle })) });
+    }
+    return /* @__PURE__ */ jsx(StateBox, { state: "success", ...box, children });
+  }
+);
+AsyncStateContainer.displayName = "AsyncStateContainer";
+var AsyncStateContainer_default = AsyncStateContainer;
+
+export {
+  AsyncStateContainer,
+  AsyncStateContainer_default
+};
+//# sourceMappingURL=chunk-F5KEWLZK.js.map

package/dist/chunk-F7HQVKIR.js

@@ -0,0 +1,223 @@
+import {
+  ClearAllControl,
+  CloseSearchControl
+} from "./chunk-X4F32GUB.js";
+import {
+  PillControl
+} from "./chunk-SN2YMCTL.js";
+import {
+  MoreFilters
+} from "./chunk-VR3U4QA5.js";
+import {
+  RangePill
+} from "./chunk-Y2E73IG2.js";
+import {
+  CollapsedSearch,
+  InlineKeyword
+} from "./chunk-Z35J5B6D.js";
+
+// src/components/data-display/DataViews/data-views-inline-bar.tsx
+import Box from "@mui/material/Box/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SearchSlot({
+  search,
+  onSearchChange,
+  collapsed,
+  expanded,
+  fill,
+  onOpen,
+  onEscape,
+  testIdPrefix
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(CollapsedSearch, { active: search !== "", onOpen, testId: `${testIdPrefix}-search-all` });
+  }
+  return /* @__PURE__ */ jsx(
+    InlineKeyword,
+    {
+      value: search,
+      onChange: onSearchChange,
+      testId: `${testIdPrefix}-search-all`,
+      autoFocus: expanded,
+      onEscape,
+      fill
+    }
+  );
+}
+function InlineControl({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  onOpenChange,
+  testIdPrefix
+}) {
+  if (field.group === "pill" && field.pill) {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field.pill,
+        selected: pills[field.id] ?? [],
+        onTogglePill,
+        onClearField,
+        onOpenChange,
+        testIdPrefix
+      }
+    );
+  }
+  if (field.group === "range" && field.range) {
+    return /* @__PURE__ */ jsx(
+      RangePill,
+      {
+        field: field.range,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        onOpenChange,
+        testIdPrefix
+      }
+    );
+  }
+  return null;
+}
+function useSearchMode(split) {
+  const [searchOpen, setSearchOpen] = useState(false);
+  return {
+    showBox: !split.searchCollapsed || searchOpen,
+    expanded: searchOpen,
+    fill: split.searchCollapsed && searchOpen,
+    takesOver: searchOpen && split.searchTakeover,
+    open: () => setSearchOpen(true),
+    close: () => setSearchOpen(false)
+  };
+}
+function InlineFilterControls({
+  testIdPrefix,
+  pills,
+  ranges,
+  search,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  split,
+  onClearAll,
+  activeFilterCount,
+  onControlOpenChange
+}) {
+  const { inline, overflow, compactControls, clearAllHidden } = split;
+  const { showBox, expanded, fill, takesOver, open, close } = useSearchMode(split);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-inline-filters`,
+      sx: {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        gap: 1,
+        minWidth: 0,
+        // No squeezing: if the estimate over-packs, the row must overflow (and
+        // the next measure sheds a control), not shrink labels to an ellipsis.
+        "& > *": { flexShrink: 0 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchSlot,
+          {
+            search,
+            onSearchChange,
+            collapsed: !showBox,
+            expanded,
+            fill,
+            onOpen: open,
+            onEscape: close,
+            testIdPrefix
+          }
+        ),
+        takesOver && /* @__PURE__ */ jsx(CloseSearchControl, { onClose: close, testIdPrefix }),
+        !takesOver && /* @__PURE__ */ jsx(
+          FilterSlots,
+          {
+            inline,
+            overflow,
+            pills,
+            ranges,
+            onTogglePill,
+            onChangeRange,
+            onClearField,
+            onClearAll,
+            onControlOpenChange,
+            activeFilterCount,
+            compactControls,
+            clearAllHidden,
+            testIdPrefix
+          }
+        )
+      ]
+    }
+  );
+}
+function FilterSlots({
+  inline,
+  overflow,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  onClearAll,
+  onControlOpenChange,
+  activeFilterCount,
+  compactControls,
+  clearAllHidden,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inline.map((field) => /* @__PURE__ */ jsx(
+      InlineControl,
+      {
+        field,
+        onOpenChange: onControlOpenChange,
+        pills,
+        ranges,
+        onTogglePill,
+        onChangeRange,
+        onClearField,
+        testIdPrefix
+      },
+      field.id
+    )),
+    /* @__PURE__ */ jsx(
+      MoreFilters,
+      {
+        onOpenChange: onControlOpenChange,
+        onClearAll,
+        anyApplied: activeFilterCount > 0,
+        compact: compactControls,
+        fields: overflow,
+        pills,
+        ranges,
+        onTogglePill,
+        onChangeRange,
+        testIdPrefix
+      }
+    ),
+    activeFilterCount > 0 && !clearAllHidden && /* @__PURE__ */ jsx(
+      ClearAllControl,
+      {
+        onClearAll,
+        compact: compactControls,
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  InlineFilterControls
+};
+//# sourceMappingURL=chunk-F7HQVKIR.js.map

package/dist/chunk-FQ6UW7IY.js

@@ -0,0 +1,91 @@
+import {
+  alpha
+} from "./chunk-6JAIFIPW.js";
+import {
+  ATTENTION_INK,
+  CELEBRATION_GRADIENTS,
+  CODE_EDITOR_CHROME,
+  DATA_VIZ_NEON,
+  EFFECT_GLOW,
+  GLASS_SLATE,
+  HIGHLIGHT_MARK,
+  MAP_SURFACE,
+  NEUTRAL_RAMP,
+  PANEL_SHADOW_INK,
+  SOCIAL_BRAND,
+  TIMING_PHASES
+} from "./chunk-N3GAFIXG.js";
+
+// src/tokens/ink.ts
+var DEFAULT_UI_INK = {
+  dataVizNeon: DATA_VIZ_NEON,
+  timingPhases: TIMING_PHASES,
+  mapSurface: MAP_SURFACE,
+  codeEditor: CODE_EDITOR_CHROME,
+  socialBrand: SOCIAL_BRAND,
+  celebration: CELEBRATION_GRADIENTS,
+  attention: ATTENTION_INK,
+  highlightMark: HIGHLIGHT_MARK,
+  glassSlate: GLASS_SLATE,
+  panelShadowInk: PANEL_SHADOW_INK,
+  effectGlow: EFFECT_GLOW
+};
+function uiInk(theme) {
+  return { ...DEFAULT_UI_INK, ...theme.uiInk };
+}
+var scrim = (theme, opacity) => alpha(theme.palette.common.black, opacity);
+var shadowInk = (theme, opacity = 1) => alpha(theme.palette.common.black, opacity);
+var sheen = (theme, opacity = 1) => alpha(theme.palette.common.white, opacity);
+var onMedia = (theme) => theme.palette.common.white;
+var absoluteInk = (theme) => ({
+  black: theme.palette.common.black,
+  white: theme.palette.common.white
+});
+var modeInk = (theme) => theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
+var step = (theme, n) => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];
+function neutralTones(theme) {
+  return {
+    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */
+    inverseSurface: step(theme, 900),
+    /** A raised dark panel. */
+    raised: step(theme, 800),
+    /** A neutral control's fill. */
+    strong: step(theme, 700),
+    /** A neutral accent: a badge, a strong scrollbar thumb. */
+    emphasis: step(theme, 600),
+    /** A quiet mark: an offline dot, a secondary icon. */
+    muted: step(theme, 500),
+    /** An idle connector, a light scrollbar thumb. */
+    subtle: step(theme, 400),
+    /** An idle track, a placeholder fill. */
+    track: step(theme, 300),
+    /** A faint track, a light scrollbar channel. */
+    faint: step(theme, 200),
+    /** A light code block, a light card. */
+    surface: step(theme, 100),
+    /** The lightest ground. */
+    canvas: step(theme, 50)
+  };
+}
+function controlNeutral(theme) {
+  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };
+}
+function softNeutral(theme) {
+  const main = step(theme, 500);
+  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };
+}
+
+export {
+  DEFAULT_UI_INK,
+  uiInk,
+  scrim,
+  shadowInk,
+  sheen,
+  onMedia,
+  absoluteInk,
+  modeInk,
+  neutralTones,
+  controlNeutral,
+  softNeutral
+};
+//# sourceMappingURL=chunk-FQ6UW7IY.js.map

package/dist/chunk-FQ6UW7IY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/ink.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { alpha } from './color';\nimport {\n  ATTENTION_INK,\n  CELEBRATION_GRADIENTS,\n  CODE_EDITOR_CHROME,\n  DATA_VIZ_NEON,\n  EFFECT_GLOW,\n  GLASS_SLATE,\n  HIGHLIGHT_MARK,\n  MAP_SURFACE,\n  NEUTRAL_RAMP,\n  PANEL_SHADOW_INK,\n  SOCIAL_BRAND,\n  TIMING_PHASES,\n} from './ink.core';\n\n/**\n * EVERY COLOUR A COMPONENT DRAWS, BY ROLE (FUT-2593, under FUT-2585).\n *\n * A component never writes a hex, an `rgba()`, a named colour or a step on the\n * grey ramp; it asks for a ROLE, and the role reads the theme:\n *\n * - the palette's own roles, straight — `text.secondary`, `divider`,\n *   `action.hover`, a semantic `main` and its `contrastText`;\n * - the INK roles below, over the palette's two absolutes — a scrim behind a\n *   modal, a shadow's ink, a glass sheen, the ink on a photo;\n * - the NEUTRAL tones, over the grey ramp, named by what they do rather than by\n *   their step, so a host that re-greys the ramp re-greys every one;\n * - `uiInk(theme)`, the colours with no palette role at all (`./ink.core.ts`),\n *   which a host can replace through `theme.uiInk`.\n *\n * Every default is the value the component drew before, so moving a component\n * onto these changed nothing on screen. `scripts/ui-tokens-gate.mjs` refuses a\n * raw colour or a ramp step in a component from here on.\n */\n\nexport interface UiInk {\n  dataVizNeon: { series: readonly string[]; ground: string; accent: string };\n  timingPhases: Record<keyof typeof TIMING_PHASES, string>;\n  mapSurface: Record<keyof typeof MAP_SURFACE, string>;\n  codeEditor: { light: Record<keyof typeof CODE_EDITOR_CHROME.light, string>; dark: Record<keyof typeof CODE_EDITOR_CHROME.dark, string> };\n  socialBrand: typeof SOCIAL_BRAND;\n  celebration: { mint: readonly [string, string]; violet: readonly [string, string] };\n  attention: { from: string; to: string; glow: string };\n  highlightMark: string;\n  glassSlate: string;\n  panelShadowInk: string;\n  effectGlow: { muiBlue: string; brandIndigo: string };\n}\n\nexport const DEFAULT_UI_INK: UiInk = {\n  dataVizNeon: DATA_VIZ_NEON,\n  timingPhases: TIMING_PHASES,\n  mapSurface: MAP_SURFACE,\n  codeEditor: CODE_EDITOR_CHROME,\n  socialBrand: SOCIAL_BRAND,\n  celebration: CELEBRATION_GRADIENTS,\n  attention: ATTENTION_INK,\n  highlightMark: HIGHLIGHT_MARK,\n  glassSlate: GLASS_SLATE,\n  panelShadowInk: PANEL_SHADOW_INK,\n  effectGlow: EFFECT_GLOW,\n};\n\ndeclare module '@mui/material/styles' {\n  interface Theme {\n    /** Colours with no palette role, by name. See `@12-apps/ui/tokens`' `uiInk`. */\n    uiInk?: Partial<UiInk>;\n  }\n  interface ThemeOptions {\n    /**\n     * Replace any of the named colour sets `@12-apps/ui` draws with. Each set is\n     * replaced WHOLE (the merge is one level deep): to change `codeEditor.dark`,\n     * pass `codeEditor` with both `light` and `dark`.\n     */\n    uiInk?: Partial<UiInk>;\n  }\n}\n\n/** The named colour sets, with the host's `theme.uiInk` layered over the defaults. */\nexport function uiInk(theme: Theme): UiInk {\n  return { ...DEFAULT_UI_INK, ...theme.uiInk };\n}\n\n/* ── Ink roles over the palette's two absolutes ───────────────────────────── */\n\n/** The dim laid behind a modal, a lightbox, a spotlight. */\nexport const scrim = (theme: Theme, opacity: number): string => alpha(theme.palette.common.black, opacity);\n\n/** The colour of a drop shadow or a glow's dark half. */\nexport const shadowInk = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.black, opacity);\n\n/** A highlight: a glass edge, a shimmer, a pressed-in light. */\nexport const sheen = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.white, opacity);\n\n/** Ink that sits ON a photo, a gradient or a scrim — never on the page. */\nexport const onMedia = (theme: Theme): string => theme.palette.common.white;\n\n/**\n * The palette's two absolutes, for the places the hue must be exactly black or\n * white: a CSS mask's opaque stop, the black `dark` tooltip.\n */\nexport const absoluteInk = (theme: Theme): { black: string; white: string } => ({\n  black: theme.palette.common.black,\n  white: theme.palette.common.white,\n});\n\n/** The absolute that CONTRASTS with the mode's page: black in light mode, white in dark. */\nexport const modeInk = (theme: Theme): string =>\n  theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;\n\n/* ── Neutral tones over the grey ramp ─────────────────────────────────────── */\n\nconst step = (theme: Theme, n: keyof typeof NEUTRAL_RAMP): string => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];\n\n/**\n * The neutral scale by ROLE. The names say what a tone is for, so a component\n * reads `neutralTones(theme).track` rather than \"grey 300\", and a host that\n * re-greys the ramp moves every one of them together.\n */\nexport function neutralTones(theme: Theme) {\n  return {\n    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */\n    inverseSurface: step(theme, 900),\n    /** A raised dark panel. */\n    raised: step(theme, 800),\n    /** A neutral control's fill. */\n    strong: step(theme, 700),\n    /** A neutral accent: a badge, a strong scrollbar thumb. */\n    emphasis: step(theme, 600),\n    /** A quiet mark: an offline dot, a secondary icon. */\n    muted: step(theme, 500),\n    /** An idle connector, a light scrollbar thumb. */\n    subtle: step(theme, 400),\n    /** An idle track, a placeholder fill. */\n    track: step(theme, 300),\n    /** A faint track, a light scrollbar channel. */\n    faint: step(theme, 200),\n    /** A light code block, a light card. */\n    surface: step(theme, 100),\n    /** The lightest ground. */\n    canvas: step(theme, 50),\n  };\n}\n\n/** The four-stop accent a component's `neutral` colour resolves to. */\nexport interface NeutralAccent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\n/**\n * The neutral the CONTROLS draw with — grey 700, pressed 800, soft 500, white\n * ink — for `Button`, `Toggle`, `RadioGroup`, `Switch`, `Slider`, `Textarea`,\n * `InputOTP`. Not `accentFor(theme, 'neutral')` (600/400/800, a badge's): the\n * controls have always been one step darker.\n */\nexport function controlNeutral(theme: Theme): NeutralAccent {\n  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };\n}\n\n/** The softer neutral a notice or a progress track draws with — 500 on a 300 ground, 700 pressed. */\nexport function softNeutral(theme: Theme): NeutralAccent {\n  const main = step(theme, 500);\n  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoDO,IAAM,iBAAwB;AAAA,EACnC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AACd;AAkBO,SAAS,MAAM,OAAqB;AACzC,SAAO,EAAE,GAAG,gBAAgB,GAAG,MAAM,MAAM;AAC7C;AAKO,IAAM,QAAQ,CAAC,OAAc,YAA4B,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,YAAY,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,QAAQ,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAG9F,IAAM,UAAU,CAAC,UAAyB,MAAM,QAAQ,OAAO;AAM/D,IAAM,cAAc,CAAC,WAAoD;AAAA,EAC9E,OAAO,MAAM,QAAQ,OAAO;AAAA,EAC5B,OAAO,MAAM,QAAQ,OAAO;AAC9B;AAGO,IAAM,UAAU,CAAC,UACtB,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO;AAIpF,IAAM,OAAO,CAAC,OAAc,MAAyC,MAAM,QAAQ,KAAK,CAAC,KAAK,aAAa,CAAC;AAOrG,SAAS,aAAa,OAAc;AACzC,SAAO;AAAA;AAAA,IAEL,gBAAgB,KAAK,OAAO,GAAG;AAAA;AAAA,IAE/B,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,UAAU,KAAK,OAAO,GAAG;AAAA;AAAA,IAEzB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,SAAS,KAAK,OAAO,GAAG;AAAA;AAAA,IAExB,QAAQ,KAAK,OAAO,EAAE;AAAA,EACxB;AACF;AAgBO,SAAS,eAAe,OAA6B;AAC1D,SAAO,EAAE,MAAM,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,OAAO,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,OAAO,MAAM;AAC7H;AAGO,SAAS,YAAY,OAA6B;AACvD,QAAM,OAAO,KAAK,OAAO,GAAG;AAC5B,SAAO,EAAE,MAAM,OAAO,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,gBAAgB,IAAI,EAAE;AACpH;","names":[]}

package/dist/chunk-FXNYV5Z6.js

@@ -0,0 +1,125 @@
+import {
+  Input
+} from "./chunk-IBGX6H4J.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-2HVNPWFV.js";
+
+// src/components/form/CepField/CepField.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cepDigits, formatCep, isValidCep } from "@12-apps/forms-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useCepLookup({
+  digits,
+  complete,
+  disabled,
+  debounceMs,
+  onLookup,
+  onResolved,
+  onNotFound
+}) {
+  const [status, setStatus] = useState("idle");
+  const lastQueriedRef = useRef("");
+  const seqRef = useRef(0);
+  const lookupRef = useRef(onLookup);
+  const resolvedRef = useRef(onResolved);
+  const notFoundRef = useRef(onNotFound);
+  lookupRef.current = onLookup;
+  resolvedRef.current = onResolved;
+  notFoundRef.current = onNotFound;
+  useEffect(() => {
+    if (!complete || disabled || !lookupRef.current) {
+      seqRef.current += 1;
+      setStatus("idle");
+      lastQueriedRef.current = "";
+      return;
+    }
+    if (lastQueriedRef.current === digits) return;
+    const mySeq = seqRef.current += 1;
+    const handle = setTimeout(() => {
+      lastQueriedRef.current = digits;
+      setStatus("loading");
+      void (async () => {
+        const address = await Promise.resolve().then(() => lookupRef.current?.(digits)).catch(() => null);
+        if (seqRef.current !== mySeq) return;
+        setStatus(address ? "found" : "notfound");
+        if (address) resolvedRef.current?.(address);
+        else notFoundRef.current?.();
+      })();
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [digits, complete, disabled, debounceMs]);
+  return status;
+}
+function CepStatus({
+  status,
+  testId,
+  suppressed,
+  copy
+}) {
+  const visible = !suppressed && status !== "idle";
+  return /* @__PURE__ */ jsx("span", { id: `${testId}-status`, role: "status", "aria-live": "polite", children: visible && /* @__PURE__ */ jsx(FormMessage, { error: status === "notfound", dataTestId: `${testId}-${status}`, children: copy[status] }) });
+}
+function CepField({
+  value,
+  onChange,
+  onLookup,
+  onResolved,
+  onNotFound,
+  label = "CEP",
+  placeholder = "00000-000",
+  error,
+  disabled = false,
+  debounceMs = 500,
+  name = "postalCode",
+  dataTestId,
+  copy
+}) {
+  const testId = dataTestId ?? `cep-field-${name}`;
+  const status = useCepLookup({
+    digits: cepDigits(value),
+    complete: isValidCep(value),
+    disabled,
+    debounceMs,
+    onLookup,
+    onResolved,
+    onNotFound
+  });
+  const handleChange = useCallback(
+    (event) => onChange(formatCep(event.target.value)),
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "postal-code",
+        placeholder,
+        value,
+        error: Boolean(error),
+        disabled,
+        loading: status === "loading",
+        onChange: handleChange,
+        "data-testid": testId,
+        "aria-describedby": `${testId}-status`,
+        "aria-busy": status === "loading"
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error }),
+    /* @__PURE__ */ jsx(CepStatus, { status, testId, suppressed: Boolean(error), copy })
+  ] });
+}
+var CepField_default = CepField;
+
+export {
+  CepField,
+  CepField_default
+};
+//# sourceMappingURL=chunk-FXNYV5Z6.js.map