@12-apps/ui 6.21.0 → 6.22.0

package/dist/native/data-display/EmptyState.js

@@ -1,29 +1,29 @@
 import {
   Button
-} from "../chunks/chunk-RJVM5YDE.js";
-import {
-  MUI_FONT_WEIGHT_MEDIUM,
-  MUI_TYPE,
-  muiTypeStyle
-} from "../chunks/chunk-HSIND52T.js";
+} from "../chunks/chunk-ATS7STZJ.js";
 import {
   webAria
 } from "../chunks/chunk-T6BJPP3E.js";
 import "../chunks/chunk-5GJ5OG5R.js";
 import {
   Icon
-} from "../chunks/chunk-D4EYAXNG.js";
+} from "../chunks/chunk-QYUD3S6F.js";
+import "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-QZAUOHDQ.js";
-import "../chunks/chunk-5WLOVHKK.js";
+} from "../chunks/chunk-AR5O4BEY.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
+} from "../chunks/chunk-GWGIWQO7.js";
 import {
   alpha
-} from "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/EmptyState/EmptyState.native.tsx
 import * as React from "react";

package/dist/native/data-display/ErrorState.js

@@ -1,27 +1,27 @@
 import {
   Button
-} from "../chunks/chunk-RJVM5YDE.js";
-import {
-  MUI_FONT_WEIGHT_MEDIUM,
-  MUI_TYPE,
-  muiTypeStyle
-} from "../chunks/chunk-HSIND52T.js";
+} from "../chunks/chunk-ATS7STZJ.js";
 import {
   webAria
 } from "../chunks/chunk-T6BJPP3E.js";
 import "../chunks/chunk-5GJ5OG5R.js";
 import {
   Icon
-} from "../chunks/chunk-D4EYAXNG.js";
+} from "../chunks/chunk-QYUD3S6F.js";
+import "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-QZAUOHDQ.js";
-import "../chunks/chunk-5WLOVHKK.js";
+} from "../chunks/chunk-AR5O4BEY.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
-import "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-GWGIWQO7.js";
+import "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/ErrorState/ErrorState.native.tsx
 import * as React from "react";

package/dist/native/data-display/LoadingState.js

@@ -1,19 +1,19 @@
 import {
-  muiTypeStyle
-} from "../chunks/chunk-HSIND52T.js";
+  SIZE_VALUES
+} from "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-QZAUOHDQ.js";
+} from "../chunks/chunk-AR5O4BEY.js";
 import {
-  SIZE_VALUES
-} from "../chunks/chunk-5WLOVHKK.js";
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
+} from "../chunks/chunk-GWGIWQO7.js";
 import {
   alpha
-} from "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/LoadingState/LoadingState.native.tsx
 import * as React from "react";

package/dist/native/data-display/Progress.js

@@ -3,15 +3,15 @@ import {
 } from "../chunks/chunk-MLQIOKQZ.js";
 import {
   MUI_TYPE
-} from "../chunks/chunk-HSIND52T.js";
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
+} from "../chunks/chunk-GWGIWQO7.js";
 import {
   GREY,
   alpha,
   contrastText
-} from "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/Progress/Progress.native.tsx
 import * as React from "react";

package/dist/native/feedback/Dialog.js

@@ -0,0 +1,496 @@
+import {
+  BLACK,
+  PulseRing,
+  halo
+} from "../chunks/chunk-NRN37A5K.js";
+import {
+  renderTextChildren
+} from "../chunks/chunk-5GJ5OG5R.js";
+import {
+  Icon
+} from "../chunks/chunk-QYUD3S6F.js";
+import "../chunks/chunk-5WLOVHKK.js";
+import {
+  childTestId,
+  resolveTestId,
+  slotTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-AR5O4BEY.js";
+import {
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-GWGIWQO7.js";
+import {
+  alpha
+} from "../chunks/chunk-LEMMXZFN.js";
+
+// src/components/feedback/Dialog/Dialog.native.tsx
+import * as React3 from "react";
+import { Modal, Pressable as Pressable2, ScrollView as ScrollView2, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/feedback/Dialog/Dialog.helpers.ts
+import * as React from "react";
+var DIALOG_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  showCloseButton: true,
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: "lg"
+};
+function withDialogDefaults(props) {
+  const merged = { ...props };
+  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
+    if (merged[key] === void 0) merged[key] = value;
+  }
+  return merged;
+}
+function hasSpacingSlot(children, slots) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (slots.includes(child.type)) return true;
+    if (child.type !== React.Fragment) return false;
+    return hasSpacingSlot(child.props.children, slots);
+  });
+}
+
+// src/components/feedback/Dialog/Dialog.metrics.ts
+var DIALOG_RADIUS_UNITS = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 3
+};
+var DIALOG_MAX_WIDTH = {
+  xs: 400,
+  sm: 600,
+  md: 800,
+  lg: 1e3,
+  xl: 1200
+};
+var DIALOG_MARGIN_UNITS = 2;
+var DIALOG_BORDER_WIDTH = 1;
+var DIALOG_PAPER_SHADOW = [
+  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: "rgba(0, 0, 0, 0.2)" },
+  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: "rgba(0, 0, 0, 0.14)" },
+  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: "rgba(0, 0, 0, 0.12)" }
+];
+var DIALOG_GLASS = {
+  backgroundAlpha: 0.1,
+  blurPx: 20,
+  borderAlpha: 0.2,
+  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 }
+};
+var DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 };
+var DIALOG_PULSE = {
+  alpha: 0.3,
+  durationMs: 2e3,
+  spread: 20,
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: 0.7,
+  zIndex: -1
+};
+var DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 };
+var DIALOG_BODY_PADDING_UNITS = {
+  horizontal: 3,
+  bottom: 2.5,
+  top: 2.5,
+  /** Tighter under a title, whose own bottom padding is most of the gap. */
+  topUnderTitle: 0.5
+};
+var DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;
+var DIALOG_TITLE = {
+  padding: { top: 16, horizontal: 24 },
+  paddingBottomUnits: { withSubtitle: 1, plain: 2 },
+  subtitleGapUnits: 0.5
+};
+var DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 };
+var DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 };
+var DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;
+var DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 };
+
+// src/components/feedback/Dialog/Dialog.look.native.ts
+function dialogRadius(theme, radius) {
+  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);
+}
+function dialogBackdrop(glass) {
+  return {
+    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain)
+  };
+}
+function glassSurface(theme) {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+    borderWidth: DIALOG_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)
+  };
+}
+function centredOverlay(theme) {
+  return {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    // The web gives the PAPER `margin: theme.spacing(2)`; an inset on the
+    // overlay is the same gap and leaves the paper free to be `100%` wide.
+    padding: theme.spacing(DIALOG_MARGIN_UNITS)
+  };
+}
+function variantPaper(theme, a, radius) {
+  switch (a.variant) {
+    case "glass":
+      return {
+        ...glassSurface(theme),
+        boxShadow: [
+          {
+            offsetX: 0,
+            offsetY: DIALOG_GLASS.shadow.offsetY,
+            blurRadius: DIALOG_GLASS.shadow.blurRadius,
+            spreadDistance: 0,
+            color: alpha(BLACK, DIALOG_GLASS.shadow.alpha)
+          }
+        ]
+      };
+    case "fullscreen":
+      return { borderRadius: 0, width: "100%", height: "100%", maxWidth: void 0 };
+    case "drawer":
+      return {
+        // SQUARE, because that is what the web paints. Two things have to fail
+        // for a drawer to have a corner there and both do: the `sx` builds
+        // `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already
+        // returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and
+        // the browser drops it; and that `sx` lands on a plain `Box` INSIDE the
+        // Drawer, whose own Paper MUI renders with `square: true`. Nothing is
+        // left to round the corners. See NATIVE-NOTES.md.
+        borderRadius: 0,
+        width: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+        maxWidth: "100%",
+        height: "100%",
+        maxHeight: void 0
+      };
+    default:
+      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};
+  }
+}
+function overlayFor(theme, variant) {
+  if (variant === "fullscreen") return { flex: 1 };
+  if (variant === "drawer") return { flex: 1, alignItems: "flex-end" };
+  return centredOverlay(theme);
+}
+function dialogLook(theme, a) {
+  const radius = dialogRadius(theme, a.borderRadius);
+  const base = {
+    position: "relative",
+    borderRadius: radius,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: DIALOG_PAPER_SHADOW,
+    width: "100%",
+    maxWidth: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+    maxHeight: "100%",
+    overflow: a.pulse || a.glow ? "visible" : "hidden"
+  };
+  return {
+    radius,
+    overlay: overlayFor(theme, a.variant),
+    paper: {
+      ...base,
+      ...a.glow ? { boxShadow: halo(DIALOG_GLOW.blurRadius, alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)) } : null,
+      ...variantPaper(theme, a, radius)
+    }
+  };
+}
+
+// src/components/feedback/Dialog/DialogParts.native.tsx
+import * as React2 from "react";
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text as RNText,
+  View
+} from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DialogTitledContext = React2.createContext(false);
+var dialogBodyTextStyle = (theme) => ({
+  ...muiTypeStyle(theme, "body1"),
+  color: theme.palette.text.primary
+});
+var dialogTitleStyle = (theme) => ({
+  ...muiTypeStyle(theme, "h6"),
+  color: theme.palette.text.primary
+});
+var dialogSubtitleStyle = (theme) => ({
+  ...muiTypeStyle(theme, "body2"),
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits)
+});
+function CloseButton({ onPress, testID }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      role: "button",
+      "aria-label": "close",
+      testID,
+      onPress,
+      style: ({ pressed }) => [
+        styles.close,
+        pressed ? { backgroundColor: theme.palette.action.hover } : null
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: "Close", size: DIALOG_CLOSE_BUTTON.iconSize, color: theme.palette.text.secondary })
+    }
+  );
+}
+function DialogHeader({
+  children,
+  title,
+  subtitle,
+  showCloseButton = true,
+  onClose,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: slotTestId(others, "header", "dialog"),
+        style: [
+          {
+            padding: theme.spacing(DIALOG_HEADER_CHILDREN_PADDING_UNITS),
+            borderBottomWidth: 1,
+            borderBottomColor: theme.palette.divider,
+            borderStyle: "solid"
+          },
+          style
+        ],
+        ...viewProps,
+        children: renderTextChildren(children, dialogBodyTextStyle(theme))
+      }
+    );
+  }
+  const paddingBottom = theme.spacing(
+    subtitle ? DIALOG_TITLE.paddingBottomUnits.withSubtitle : DIALOG_TITLE.paddingBottomUnits.plain
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: slotTestId(others, "title", "dialog"),
+      style: [styles.header, { paddingBottom }, style],
+      ...viewProps,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+          /* @__PURE__ */ jsx(RNText, { role: "heading", "aria-level": 2, style: dialogTitleStyle(theme), children: title }),
+          subtitle ? /* @__PURE__ */ jsx(RNText, { style: dialogSubtitleStyle(theme), children: subtitle }) : null
+        ] }),
+        showCloseButton && onClose ? /* @__PURE__ */ jsx(CloseButton, { onPress: onClose, testID: childTestId(others, "close", "dialog") }) : null
+      ]
+    }
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogContent({
+  children,
+  dividers = false,
+  dense = false,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const titled = React2.useContext(DialogTitledContext);
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  const padding = theme.spacing(
+    dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal
+  );
+  const paddingTop = titled ? theme.spacing(DIALOG_TITLED_BODY_PADDING_TOP_UNITS) : padding;
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      testID: slotTestId(others, "content", "dialog"),
+      style: [
+        styles.content,
+        dividers ? {
+          borderTopWidth: 1,
+          borderBottomWidth: 1,
+          borderStyle: "solid",
+          borderColor: theme.palette.divider
+        } : null,
+        style
+      ],
+      contentContainerStyle: { padding, paddingTop },
+      ...viewProps,
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+DialogContent.displayName = "DialogContent";
+var JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  "space-between": "space-between"
+};
+function DialogActions({
+  children,
+  alignment = "right",
+  spacing = DIALOG_ACTIONS.defaultSpacingUnits,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: slotTestId(others, "actions", "dialog"),
+      style: [
+        styles.actions,
+        {
+          padding: theme.spacing(DIALOG_ACTIONS.paddingUnits),
+          justifyContent: JUSTIFY[alignment],
+          gap: theme.spacing(spacing)
+        },
+        style
+      ],
+      ...viewProps,
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+DialogActions.displayName = "DialogActions";
+var styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingTop: DIALOG_TITLE.padding.top,
+    paddingHorizontal: DIALOG_TITLE.padding.horizontal
+  },
+  headerText: {
+    flexShrink: 1
+  },
+  close: {
+    padding: DIALOG_CLOSE_BUTTON.padding,
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexGrow: 0,
+    flexShrink: 0
+  }
+});
+
+// src/components/feedback/Dialog/Dialog.native.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles2 = StyleSheet2.create({
+  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */
+  rawBody: { flexGrow: 1, flexShrink: 1 }
+});
+function bodyOf(theme, children, hasTitle) {
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;
+  return /* @__PURE__ */ jsx2(
+    ScrollView2,
+    {
+      style: styles2.rawBody,
+      contentContainerStyle: {
+        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),
+        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),
+        paddingTop: theme.spacing(top)
+      },
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+function hasHeaderChild(children) {
+  return React3.Children.toArray(children).some(
+    (child) => React3.isValidElement(child) && child.type === DialogHeader
+  );
+}
+function Dialog(rawProps) {
+  const {
+    children,
+    open,
+    variant,
+    size,
+    title,
+    description,
+    showCloseButton,
+    backdrop: _backdrop,
+    persistent,
+    glass,
+    gradient: _gradient,
+    glow,
+    pulse,
+    borderRadius,
+    onClose,
+    ...others
+  } = withDialogDefaults(rawProps);
+  const theme = useUiTheme();
+  const look = dialogLook(theme, { variant, size, borderRadius, glass, glow, pulse });
+  const testID = resolveTestId(others, "dialog");
+  const { style, ...modalProps } = withoutTestIdProps(others);
+  const dismiss = persistent ? void 0 : onClose;
+  return /* @__PURE__ */ jsx2(Modal, { visible: open, transparent: true, onRequestClose: dismiss, ...modalProps, children: /* @__PURE__ */ jsxs2(View2, { style: look.overlay, children: [
+    /* @__PURE__ */ jsx2(
+      Pressable2,
+      {
+        "aria-hidden": true,
+        tabIndex: -1,
+        testID: `${testID}-backdrop`,
+        onPress: dismiss,
+        style: [StyleSheet2.absoluteFill, dialogBackdrop(glass)]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(View2, { testID, style: [look.paper, style], children: [
+      pulse ? /* @__PURE__ */ jsx2(
+        PulseRing,
+        {
+          color: theme.palette.primary.main,
+          radius: look.radius,
+          spread: DIALOG_PULSE.spread,
+          durationMs: DIALOG_PULSE.durationMs,
+          fadeAt: DIALOG_PULSE.fadeAt,
+          opacity: DIALOG_PULSE.alpha,
+          testID: `${testID}-pulse`
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs2(DialogTitledContext.Provider, { value: Boolean(title) || hasHeaderChild(children), children: [
+        title ? /* @__PURE__ */ jsx2(
+          DialogHeader,
+          {
+            title,
+            subtitle: description,
+            showCloseButton,
+            onClose,
+            dataTestId: testID
+          }
+        ) : null,
+        bodyOf(theme, children, Boolean(title))
+      ] })
+    ] })
+  ] }) });
+}
+Dialog.displayName = "Dialog";
+export {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader
+};
+//# sourceMappingURL=Dialog.js.map