@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-UO3NDN45.js

@@ -1,125 +0,0 @@
-import {
-  Input
-} from "./chunk-UPCH5QOX.js";
-import {
-  FormControl,
-  FormLabel,
-  FormMessage
-} from "./chunk-D6KL74KI.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-UO3NDN45.js.map

package/dist/chunk-UOQ4AF2N.js

@@ -1,55 +0,0 @@
-import {
-  SectionNavBar
-} from "./chunk-VYWCBG3I.js";
-import {
-  SectionNavRail
-} from "./chunk-WM4KYIYQ.js";
-
-// src/components/navigation/SectionNav/SectionNav.tsx
-import { jsx } from "react/jsx-runtime";
-function SectionNav({
-  layout,
-  label,
-  destinations,
-  primary,
-  more,
-  back,
-  heading,
-  linkComponent,
-  copy,
-  dataTestId = "section-nav"
-}) {
-  if (layout === "rail") {
-    return /* @__PURE__ */ jsx(
-      SectionNavRail,
-      {
-        label,
-        destinations,
-        primary,
-        more,
-        back,
-        heading,
-        linkComponent,
-        copy,
-        dataTestId
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    SectionNavBar,
-    {
-      label,
-      destinations,
-      primary,
-      more,
-      linkComponent,
-      copy,
-      dataTestId
-    }
-  );
-}
-
-export {
-  SectionNav
-};
-//# sourceMappingURL=chunk-UOQ4AF2N.js.map

package/dist/chunk-UPCH5QOX.js

@@ -1,140 +0,0 @@
-import {
-  filledStyles,
-  floatingLabelStyles,
-  glowStyles,
-  inputBaseStyles,
-  inputRadiusStyles,
-  outlinedStyles,
-  pulseStyles
-} from "./chunk-IIQEAN77.js";
-import {
-  TextFieldSlim
-} from "./chunk-SL6454K7.js";
-import {
-  INPUT_LOADING,
-  SIZE_MAP,
-  muiVariantFor
-} from "./chunk-JU3FRRO2.js";
-import {
-  splitTestId
-} from "./chunk-TYJR4GOF.js";
-import {
-  fieldControlStyles
-} from "./chunk-2TZ6X265.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/form/Input/Input.tsx
-import CircularProgress from "@mui/material/CircularProgress/index.js";
-import InputAdornment from "@mui/material/InputAdornment/index.js";
-import { styled, useTheme } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var StyledTextField = styled(TextFieldSlim, {
-  shouldForwardProp: (prop) => !["customVariant", "fieldSize", "floating", "glow", "pulse", "loading"].includes(prop)
-})(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({
-  position: "relative",
-  // The theme's field height for this size (outlined family, one line).
-  ...fieldControlStyles(theme, fieldSize),
-  opacity: loading ? INPUT_LOADING.opacity : 1,
-  ...glow ? glowStyles(theme) : {},
-  ...pulse ? pulseStyles(theme, fieldSize) : {},
-  ...floating ? floatingLabelStyles(theme) : {},
-  "& .MuiInputBase-root": {
-    transition: "all 0.3s ease",
-    ...inputRadiusStyles(theme, customVariant),
-    ...inputBaseStyles(theme, customVariant)
-  },
-  "& .MuiOutlinedInput-root": outlinedStyles(theme),
-  "& .MuiFilledInput-root": filledStyles(theme)
-}));
-var EndAdornment = ({
-  loading,
-  endAdornment
-}) => {
-  const theme = useTheme();
-  if (loading) {
-    return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, INPUT_LOADING.spinnerSize) }) });
-  }
-  if (!endAdornment) return null;
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment });
-};
-var interactionProps = (loading, onClick, disabled) => ({
-  disabled: loading || disabled,
-  onClick: loading ? void 0 : onClick
-});
-function inputAriaOf(a) {
-  const describedBy = [a.helperText ? `${a.id}-helper-text` : void 0, a.describedBy].filter(Boolean).join(" ");
-  return {
-    ...a.label === void 0 ? {} : { "aria-label": a.label },
-    ...a.describedBy === void 0 ? {} : { "aria-describedby": describedBy },
-    ...a.busy === void 0 ? {} : { "aria-busy": a.busy }
-  };
-}
-var Input = React.forwardRef(
-  ({
-    variant = "outlined",
-    size = "md",
-    label,
-    error,
-    helperText,
-    startAdornment,
-    endAdornment,
-    fullWidth = true,
-    floating = false,
-    glow = false,
-    pulse = false,
-    loading = false,
-    onClick,
-    onFocus,
-    onBlur,
-    "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedBy,
-    "aria-busy": ariaBusy,
-    inputProps,
-    ...rest
-  }, ref) => {
-    const { testId: dataTestId, rest: props } = splitTestId(rest);
-    const generatedId = React.useId();
-    const id = props.id ?? generatedId;
-    return /* @__PURE__ */ jsx(
-      StyledTextField,
-      {
-        ref,
-        variant: muiVariantFor(variant),
-        customVariant: variant,
-        fieldSize: size,
-        floating,
-        glow,
-        pulse,
-        loading,
-        label,
-        error,
-        helperText,
-        fullWidth,
-        ...interactionProps(loading, onClick, props.disabled),
-        onFocus,
-        onBlur,
-        inputProps: {
-          "data-testid": dataTestId,
-          ...inputProps,
-          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy })
-        },
-        InputProps: {
-          startAdornment: startAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }),
-          endAdornment: /* @__PURE__ */ jsx(EndAdornment, { loading, endAdornment })
-        },
-        ...SIZE_MAP[size],
-        ...props,
-        id
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
-export {
-  Input
-};
-//# sourceMappingURL=chunk-UPCH5QOX.js.map

package/dist/chunk-UVFZQCC7.js

@@ -1,300 +0,0 @@
-import {
-  onMedia,
-  sheen,
-  uiInk
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem,
-  rems
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
-import Box from "@mui/material/Box/index.js";
-import Tooltip from "@mui/material/Tooltip/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 phaseColors = (theme) => {
-  const phases = uiInk(theme).timingPhases;
-  return {
-    dns: phases.dns,
-    connect: phases.connect,
-    ssl: phases.tls,
-    request: phases.request,
-    response: phases.response
-  };
-};
-var formatTime = (ms) => {
-  if (ms < 1e3) return `${ms}ms`;
-  return `${(ms / 1e3).toFixed(2)}s`;
-};
-var colorOf = (theme, phase) => phaseColors(theme)[phase.key];
-var widthOf = (percentages, phase) => percentages[phase.key] ?? 0;
-var withTooltip = (phase, enabled, element) => enabled ? /* @__PURE__ */ jsx(
-  Tooltip,
-  {
-    title: `${phase.label}: ${formatTime(phase.value)}`,
-    placement: "top",
-    role: "tooltip",
-    "aria-describedby": `tooltip-${phase.key}`,
-    children: element
-  },
-  phase.key
-) : element;
-var WaterfallContainer = styled(Box)(({ theme }) => ({
-  position: "relative",
-  width: "100%",
-  marginTop: theme.spacing(2)
-}));
-var WaterfallBar = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "offset", "widthPct", "animated"].includes(prop)
-})(({ theme, phaseColor, offset, widthPct, animated }) => ({
-  position: "absolute",
-  height: rem(theme, 32),
-  left: `${offset}%`,
-  width: `${widthPct}%`,
-  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
-  borderRadius: theme.shape.borderRadius,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: theme.palette.getContrastText(phaseColor),
-  fontSize: rem(theme, 12),
-  fontWeight: 500,
-  boxShadow: `${rems(theme, 0, 2, 8)} ${alpha(phaseColor, 0.3)}`,
-  transition: animated ? "all 0.5s ease" : "none",
-  animation: animated ? "slideIn 0.5s ease" : "none",
-  "@keyframes slideIn": {
-    from: {
-      transform: `translateX(${rem(theme, -20)})`,
-      opacity: 0
-    },
-    to: {
-      transform: "translateX(0)",
-      opacity: 1
-    }
-  },
-  "&:hover": {
-    transform: `translateY(${rem(theme, -2)})`,
-    boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(phaseColor, 0.5)}`,
-    zIndex: 10
-  }
-}));
-var TimelineAxis = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  marginTop: theme.spacing(1),
-  paddingTop: theme.spacing(1),
-  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
-}));
-var TimeLabel = styled(Typography)(({ theme }) => ({
-  fontSize: rem(theme, 11.2),
-  color: theme.palette.text.secondary,
-  fontWeight: 500
-}));
-var WaterfallView = ({
-  phases,
-  percentages,
-  data,
-  animated,
-  showLabels,
-  showTooltips,
-  plotHeightPx
-}) => {
-  const theme = useTheme();
-  let offset = 0;
-  return /* @__PURE__ */ jsxs(WaterfallContainer, { style: { height: rem(theme, plotHeightPx + 40) }, "data-variant": "waterfall", children: [
-    phases.map((phase, index) => {
-      const width = widthOf(percentages, phase);
-      const currentOffset = offset;
-      offset += width;
-      return withTooltip(
-        phase,
-        showTooltips,
-        /* @__PURE__ */ jsx(
-          WaterfallBar,
-          {
-            "data-testid": `timing-segment-${phase.key}`,
-            phaseColor: colorOf(theme, phase),
-            offset: currentOffset,
-            widthPct: width,
-            animated,
-            "data-animated": animated.toString(),
-            style: {
-              top: rem(theme, index * 8),
-              width: `${width}%`,
-              left: `${currentOffset}%`
-            },
-            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
-          },
-          phase.key
-        )
-      );
-    }),
-    /* @__PURE__ */ jsxs(TimelineAxis, { style: { marginTop: rem(theme, plotHeightPx) }, children: [
-      /* @__PURE__ */ jsx(TimeLabel, { children: "0ms" }),
-      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total / 2) }),
-      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total) })
-    ] })
-  ] });
-};
-var StackedBar = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "animated"
-})(({ theme, animated }) => ({
-  display: "flex",
-  width: "100%",
-  height: rem(theme, 40),
-  borderRadius: theme.shape.borderRadius,
-  overflow: "hidden",
-  boxShadow: theme.shadows[2],
-  ...animated && {
-    "& > div": {
-      animation: "expandWidth 0.8s ease"
-    },
-    "@keyframes expandWidth": {
-      from: { width: 0 },
-      to: { width: "100%" }
-    }
-  }
-}));
-var StackedSegment = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "widthPct"].includes(prop)
-})(({ theme, phaseColor, widthPct }) => ({
-  width: `${widthPct}%`,
-  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: onMedia(theme),
-  fontSize: rem(theme, 11.2),
-  fontWeight: 600,
-  position: "relative",
-  transition: "all 0.3s ease",
-  "&:hover": {
-    filter: "brightness(1.1)",
-    zIndex: 1
-  }
-}));
-var StackedView = ({
-  phases,
-  percentages,
-  data,
-  copy,
-  animated,
-  showLabels,
-  showTooltips
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Box, { "data-variant": "stacked", children: [
-    /* @__PURE__ */ jsx(StackedBar, { animated, "data-animated": animated.toString(), children: phases.map((phase) => {
-      const width = widthOf(percentages, phase);
-      return withTooltip(
-        phase,
-        showTooltips,
-        /* @__PURE__ */ jsx(
-          StackedSegment,
-          {
-            "data-testid": `timing-segment-${phase.key}`,
-            phaseColor: colorOf(theme, phase),
-            widthPct: width,
-            style: { width: `${width}%` },
-            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
-          },
-          phase.key
-        )
-      );
-    }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: copy.total(formatTime(data.total)) })
-    ] })
-  ] });
-};
-var HorizontalBar = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing(1),
-  marginTop: theme.spacing(2)
-}));
-var HorizontalSegment = styled(Box, {
-  shouldForwardProp: (prop) => !["phaseColor", "widthPct", "animated"].includes(prop)
-})(({ theme, phaseColor, animated }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(2),
-  "& .label": {
-    minWidth: rem(theme, 80),
-    fontSize: rem(theme, 13.6),
-    fontWeight: 500,
-    color: theme.palette.text.secondary
-  },
-  "& .bar": {
-    flex: 1,
-    height: rem(theme, 24),
-    borderRadius: theme.shape.borderRadius,
-    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
-    position: "relative",
-    overflow: "hidden",
-    boxShadow: `${rems(theme, 0, 2, 6)} ${alpha(phaseColor, 0.25)}`,
-    ...animated && {
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: `linear-gradient(90deg, transparent 0%, ${sheen(theme, 0.3)} 50%, transparent 100%)`,
-        animation: "shimmer 2s infinite"
-      },
-      "@keyframes shimmer": {
-        from: { transform: "translateX(-100%)" },
-        to: { transform: "translateX(100%)" }
-      }
-    }
-  },
-  "& .value": {
-    minWidth: rem(theme, 60),
-    textAlign: "right",
-    fontSize: rem(theme, 13.6),
-    fontWeight: 600,
-    color: phaseColor
-  }
-}));
-var HorizontalView = ({
-  phases,
-  percentages,
-  data,
-  copy,
-  animated
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(HorizontalBar, { "data-variant": "horizontal", children: [
-    phases.map((phase) => /* @__PURE__ */ jsxs(
-      HorizontalSegment,
-      {
-        "data-testid": `timing-segment-${phase.key}`,
-        phaseColor: colorOf(theme, phase),
-        widthPct: widthOf(percentages, phase),
-        animated,
-        "data-animated": animated.toString(),
-        children: [
-          /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label }),
-          /* @__PURE__ */ jsx(Box, { className: "bar", style: { width: `${percentages[phase.key]}%` } }),
-          /* @__PURE__ */ jsx(Typography, { className: "value", "data-testid": "timing-label", children: formatTime(phase.value) })
-        ]
-      },
-      phase.key
-    )),
-    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: copy.totalTime(formatTime(data.total)) }) })
-  ] });
-};
-
-export {
-  phaseColors,
-  formatTime,
-  WaterfallView,
-  StackedView,
-  HorizontalView
-};
-//# sourceMappingURL=chunk-UVFZQCC7.js.map