@12-apps/ui 6.54.1 → 6.55.0

package/dist/native/chunks/chunk-MU5EIZSP.js

@@ -0,0 +1,326 @@
+import {
+  resolveFieldEdge
+} from "./chunk-3JBZE4I6.js";
+import {
+  ABSOLUTE_INK,
+  NEUTRAL_RAMP
+} from "./chunk-ZRQHLTYG.js";
+import {
+  renderTextChildren
+} from "./chunk-5GJ5OG5R.js";
+import {
+  childTestId,
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-AR5O4BEY.js";
+import {
+  useUiTheme
+} from "./chunk-ZYSOBULX.js";
+import {
+  FIELD_BORDER_WIDTH,
+  alpha,
+  darken,
+  fieldHeightPx,
+  lighten
+} from "./chunk-DNTO2D5M.js";
+
+// src/components/form/Button/Button.native.tsx
+import * as React from "react";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+
+// src/components/form/Button/Button.helpers.ts
+var BUTTON_DEFAULTS = {
+  variant: "solid",
+  color: "primary",
+  size: "md",
+  loading: false,
+  iconPosition: "left",
+  glow: false,
+  pulse: false,
+  ripple: true,
+  active: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveButtonProps = (props) => ({ ...BUTTON_DEFAULTS, ...definedProps(props) });
+
+// src/components/form/Button/Button.metrics.ts
+var BUTTON_SIZES = {
+  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },
+  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },
+  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },
+  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 }
+};
+var BUTTON_FONT_WEIGHT = 500;
+var BUTTON_ICON_GAP_UNITS = 0.5;
+var BUTTON_SPINNER_SIZE = 16;
+var BUTTON_LINE_HEIGHT = 1.75;
+var BUTTON_WASH_ALPHA = 0.1;
+var GLASS_BACKGROUND_ALPHA = 0.1;
+var GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLOW_INNER_ALPHA = 0.6;
+var GLOW_RADIUS = 20;
+var PULSE_ALPHA = 0.3;
+var PULSE_DURATION_MS = 2e3;
+var PULSE_SPREAD = 15;
+function buttonPalette(theme, color) {
+  if (color === "neutral") {
+    return {
+      main: NEUTRAL_RAMP[700],
+      dark: NEUTRAL_RAMP[800],
+      light: NEUTRAL_RAMP[500],
+      contrastText: ABSOLUTE_INK.white
+    };
+  }
+  return theme.palette[color];
+}
+var quietInk = (theme, palette) => theme.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
+function gradientStops(theme, color, palette) {
+  switch (color) {
+    case "primary":
+      return [theme.palette.primary.main, theme.palette.secondary.main];
+    case "secondary":
+      return [theme.palette.secondary.main, theme.palette.primary.main];
+    case "success":
+    case "warning":
+      return [theme.palette[color].light, theme.palette[color].dark];
+    case "danger":
+      return [theme.palette.danger.light, theme.palette.danger.dark];
+    default:
+      return [palette.main, palette.dark];
+  }
+}
+
+// src/components/form/Button/Button.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_WIDTH = 64;
+function paintFor(theme, variant, color, palette, active) {
+  const wash = alpha(palette.main, BUTTON_WASH_ALPHA);
+  switch (variant) {
+    case "outline":
+      return {
+        // A neutral outline rests on the one field border, as on the web.
+        container: {
+          backgroundColor: "transparent",
+          borderWidth: FIELD_BORDER_WIDTH,
+          borderColor: color === "neutral" ? resolveFieldEdge(theme.palette.divider, theme.palette.background.paper) : palette.main
+        },
+        pressed: { backgroundColor: wash, borderColor: palette.dark },
+        label: { color: palette.main }
+      };
+    case "ghost":
+      return {
+        container: { backgroundColor: "transparent" },
+        pressed: { backgroundColor: wash },
+        label: { color: quietInk(theme, palette) }
+      };
+    case "text":
+      return {
+        container: { backgroundColor: active ? wash : "transparent" },
+        pressed: { backgroundColor: wash },
+        label: { color: quietInk(theme, palette) }
+      };
+    case "glass":
+      return {
+        container: {
+          backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA),
+          borderWidth: 1,
+          borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA)
+        },
+        pressed: { backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_PRESSED) },
+        label: { color: palette.main }
+      };
+    case "gradient": {
+      const [from, to] = gradientStops(theme, color, palette);
+      return {
+        container: { backgroundColor: from },
+        pressed: { backgroundColor: to },
+        label: { color: "#fff" }
+      };
+    }
+    default:
+      return {
+        container: { backgroundColor: palette.main },
+        pressed: { backgroundColor: palette.dark },
+        label: { color: palette.contrastText || "#fff" }
+      };
+  }
+}
+function disabledPaint(theme, variant) {
+  const filled = variant === "solid" || variant === "gradient" || variant === "glass";
+  return {
+    container: filled ? { backgroundColor: theme.palette.action.disabledBackground, borderWidth: 0 } : variant === "outline" ? { backgroundColor: "transparent", borderWidth: 1, borderColor: theme.palette.action.disabledBackground } : { backgroundColor: "transparent" },
+    pressed: {},
+    label: { color: theme.palette.action.disabled }
+  };
+}
+function sizeStyle(theme, size, iconOnly, hasIcon) {
+  const metrics = BUTTON_SIZES[size];
+  const height = fieldHeightPx(theme.fieldHeight, size);
+  if (iconOnly) {
+    return { padding: 0, minWidth: height, minHeight: height };
+  }
+  return {
+    minHeight: height,
+    paddingVertical: 0,
+    paddingHorizontal: metrics.paddingHorizontal,
+    minWidth: MIN_WIDTH,
+    gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : void 0
+  };
+}
+function glowStyle(palette) {
+  return Platform.select({
+    android: { elevation: 8 },
+    default: {
+      shadowColor: palette.main,
+      shadowOpacity: GLOW_INNER_ALPHA,
+      shadowRadius: GLOW_RADIUS,
+      shadowOffset: { width: 0, height: 0 }
+    }
+  });
+}
+function Pulse({ color, radius, testID }) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: PULSE_DURATION_MS,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: Platform.OS !== "web"
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [progress]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID,
+      "aria-hidden": true,
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: "none",
+          borderRadius: radius,
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE_ALPHA, 0, 0] }),
+          transform: [
+            { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, 1 + PULSE_SPREAD / 40, 1] }) }
+          ]
+        }
+      ]
+    }
+  );
+}
+function buttonLook(theme, props) {
+  const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;
+  const palette = buttonPalette(theme, color);
+  const iconOnly = !loading && icon != null && children == null;
+  const inactive = Boolean(disabled) || loading;
+  const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);
+  const radius = theme.radius.field;
+  const metrics = BUTTON_SIZES[size];
+  const overflow = pulse || glow ? "visible" : "hidden";
+  const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);
+  const glowing = glow && !inactive ? glowStyle(palette) : null;
+  return {
+    inactive,
+    palette,
+    radius,
+    label: {
+      fontFamily: theme.typography.fontFamily,
+      fontSize: metrics.fontSize,
+      lineHeight: metrics.fontSize * BUTTON_LINE_HEIGHT,
+      fontWeight: String(BUTTON_FONT_WEIGHT),
+      textAlign: "center",
+      ...paint.label
+    },
+    container: (state) => [
+      styles.base,
+      { borderRadius: radius, overflow },
+      sized,
+      paint.container,
+      state.pressed && !inactive ? paint.pressed : null,
+      glowing,
+      style
+    ]
+  };
+}
+function Spinner({ color, testID }) {
+  return /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      size: Platform.OS === "ios" ? "small" : BUTTON_SPINNER_SIZE,
+      color,
+      testID,
+      accessibilityLabel: "loading"
+    }
+  );
+}
+var Button = React.forwardRef((rawProps, ref) => {
+  const resolved = resolveButtonProps(rawProps);
+  const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;
+  const theme = useUiTheme();
+  const look = buttonLook(theme, resolved);
+  const testId = resolveTestId(others, "button");
+  const idFor = (suffix) => childTestId(others, suffix, "button");
+  const rest = withoutTestIdProps(others);
+  const { variant: _v, color: _c, size: _s, glow: _g, active: _a, disabled: _d, style: _st, ...pressable } = rest;
+  const handlePress = (event) => {
+    onClick?.(event);
+    onPress?.(event);
+  };
+  const iconNode = !loading && icon ? /* @__PURE__ */ jsx(View, { style: styles.icon, testID: idFor("icon"), children: icon }) : null;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      role: "button",
+      "aria-disabled": look.inactive,
+      "aria-busy": loading,
+      disabled: look.inactive,
+      onPress: handlePress,
+      android_ripple: ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : void 0,
+      style: look.container,
+      testID: testId,
+      ...pressable,
+      children: [
+        pulse && !look.inactive ? /* @__PURE__ */ jsx(Pulse, { color: look.palette.main, radius: look.radius, testID: idFor("pulse") }) : null,
+        iconPosition === "left" ? iconNode : null,
+        loading ? /* @__PURE__ */ jsx(Spinner, { color: look.label.color, testID: idFor("loading") }) : renderTextChildren(children, look.label, 1),
+        iconPosition === "right" ? iconNode : null
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    position: "relative"
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-MU5EIZSP.js.map

package/dist/native/chunks/chunk-RJOHCM2O.js

@@ -0,0 +1,295 @@
+import {
+  Button
+} from "./chunk-MU5EIZSP.js";
+import {
+  ELEVATION_SHADOWS
+} from "./chunk-ZRQHLTYG.js";
+import {
+  webAria
+} from "./chunk-DN73KYIZ.js";
+import {
+  Icon
+} from "./chunk-4JAP6O2Y.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "./chunk-2UFNPDYT.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-AR5O4BEY.js";
+import {
+  useUiTheme
+} from "./chunk-ZYSOBULX.js";
+import {
+  alpha
+} from "./chunk-DNTO2D5M.js";
+
+// src/components/data-display/EmptyState/EmptyState.native.tsx
+import * as React from "react";
+import {
+  Linking,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  useWindowDimensions,
+  View
+} from "react-native";
+
+// src/components/data-display/EmptyState/EmptyState.helpers.ts
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
+var actionsOf = (props, refreshLabel, createLabel) => {
+  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
+  const specs = [];
+  if (primaryAction) {
+    specs.push({
+      key: "primary-action",
+      variant: "contained",
+      onClick: primaryAction.onClick,
+      label: primaryAction.label
+    });
+  }
+  if (onCreate) {
+    specs.push({
+      key: "create-button",
+      variant: "contained",
+      onClick: onCreate,
+      label: createLabel,
+      icon: "Add"
+    });
+  }
+  if (secondaryAction) {
+    specs.push({
+      key: "secondary-action",
+      variant: "outlined",
+      onClick: secondaryAction.onClick,
+      label: secondaryAction.label
+    });
+  }
+  if (onRefresh) {
+    specs.push({
+      key: "refresh-button",
+      variant: "outlined",
+      onClick: onRefresh,
+      label: refreshLabel,
+      icon: "Refresh"
+    });
+  }
+  return specs;
+};
+
+// src/components/data-display/EmptyState/EmptyState.metrics.ts
+var EMPTY_STATE_PADDING_UNITS = 6;
+var EMPTY_STATE_MIN_HEIGHT = 200;
+var EMPTY_STATE_GAP_UNITS = 3;
+var ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 };
+var ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 };
+var illustrationMaxWidth = (variant) => variant === "illustrated" ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;
+var illustrationOpacity = (variant) => variant === "minimal" ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;
+var CONTENT_GAP_UNITS = 2;
+var TITLE_MAX_WIDTH = 400;
+var DESCRIPTION_MAX_WIDTH = 480;
+var DESCRIPTION_LINE_HEIGHT = 1.6;
+var ACTIONS_MARGIN_TOP_UNITS = 2;
+var ACTIONS_GAP_UNITS = 2;
+var ACTIONS_ROW_FROM = 600;
+var ACTION_MIN_WIDTH = 120;
+var ACTION_BUTTON = {
+  contained: { paddingVertical: 6, paddingHorizontal: 16 },
+  outlined: { paddingVertical: 5, paddingHorizontal: 15 },
+  iconSize: 20,
+  outlinedBorderAlpha: 0.5
+};
+var MUI_CONTAINED_SHADOW = ELEVATION_SHADOWS[2];
+var HELP_LINK_MARGIN_TOP_UNITS = 1;
+var EXTERNAL_LINK_MARK = " \u2197";
+
+// src/components/data-display/EmptyState/EmptyState.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function titleStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "h6"),
+    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,
+    color: theme.palette.text.primary,
+    maxWidth: TITLE_MAX_WIDTH,
+    textAlign: "center"
+  };
+}
+function descriptionStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "body2"),
+    lineHeight: MUI_TYPE.body2.fontSize * DESCRIPTION_LINE_HEIGHT,
+    color: theme.palette.text.secondary,
+    maxWidth: DESCRIPTION_MAX_WIDTH,
+    textAlign: "center"
+  };
+}
+function helpLinkStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "body1"),
+    color: theme.palette.primary.main,
+    textDecorationLine: "none",
+    marginTop: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
+    textAlign: "center"
+  };
+}
+function illustrationStyle(variant) {
+  return {
+    maxWidth: illustrationMaxWidth(variant),
+    width: "100%",
+    opacity: illustrationOpacity(variant),
+    display: variant === "minimal" ? "none" : "flex"
+  };
+}
+function actionStyle(theme, variant) {
+  const padding = ACTION_BUTTON[variant];
+  return {
+    minWidth: ACTION_MIN_WIDTH,
+    borderRadius: theme.radius.md,
+    paddingVertical: padding.paddingVertical,
+    paddingHorizontal: padding.paddingHorizontal,
+    ...variant === "contained" ? { boxShadow: MUI_CONTAINED_SHADOW, overflow: "visible" } : { borderColor: alpha(theme.palette.primary.main, ACTION_BUTTON.outlinedBorderAlpha) }
+  };
+}
+var actionsDirection = (windowWidth) => windowWidth >= ACTIONS_ROW_FROM ? "row" : "column";
+function anchorProps(href, external) {
+  if (Platform.OS !== "web") return {};
+  return { href, hrefAttrs: external ? { target: "_blank", rel: "noopener noreferrer" } : void 0 };
+}
+function ActionButton({ spec, testID }) {
+  const theme = useUiTheme();
+  const contained = spec.variant === "contained";
+  const glyph = spec.icon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: spec.icon,
+      size: ACTION_BUTTON.iconSize,
+      color: contained ? theme.palette.primary.contrastText : "primary"
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: contained ? "solid" : "outline",
+      color: "primary",
+      size: "sm",
+      icon: glyph,
+      onClick: spec.onClick,
+      testID,
+      style: actionStyle(theme, spec.variant),
+      children: spec.label
+    }
+  );
+}
+function Actions({ specs, testId }) {
+  const theme = useUiTheme();
+  const { width } = useWindowDimensions();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.actions,
+        {
+          flexDirection: actionsDirection(width),
+          gap: theme.spacing(ACTIONS_GAP_UNITS),
+          marginTop: theme.spacing(ACTIONS_MARGIN_TOP_UNITS)
+        }
+      ],
+      children: specs.map((spec) => /* @__PURE__ */ jsx(ActionButton, { spec, testID: testId(spec.key) }, spec.key))
+    }
+  );
+}
+function HelpLink({ helpLink, testId }) {
+  const theme = useUiTheme();
+  const external = helpLink.external === true;
+  const open = Platform.OS === "web" ? void 0 : () => void Linking.openURL(helpLink.href);
+  return /* @__PURE__ */ jsxs(RNText, { role: "link", testID: testId, style: helpLinkStyle(theme), onPress: open, ...anchorProps(helpLink.href, external), children: [
+    helpLink.label,
+    external ? EXTERNAL_LINK_MARK : null
+  ] });
+}
+function Content({ title, description, titleId, testId, actions, showActions, helpLink }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [styles.content, { gap: theme.spacing(CONTENT_GAP_UNITS) }], children: [
+    /* @__PURE__ */ jsx(RNText, { id: titleId, role: "heading", ...webAria({ "aria-level": 3 }), testID: testId("title"), style: titleStyle(theme), children: title }),
+    description ? /* @__PURE__ */ jsx(RNText, { testID: testId("description"), style: descriptionStyle(theme), children: description }) : null,
+    showActions ? /* @__PURE__ */ jsx(Actions, { specs: actions, testId }) : null,
+    helpLink ? /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") }) : null
+  ] });
+}
+var EmptyState = React.memo(function EmptyState2(props) {
+  const {
+    variant = "default",
+    title,
+    description,
+    illustration,
+    helpLink,
+    refreshLabel = "Refresh",
+    createLabel = "Create New",
+    primaryAction: _primary,
+    secondaryAction: _secondary,
+    onCreate: _onCreate,
+    onRefresh: _onRefresh,
+    style,
+    ...others
+  } = props;
+  const theme = useUiTheme();
+  const titleId = React.useId();
+  const dataTestId = resolveTestId(others);
+  const testId = makeTestId(dataTestId);
+  const rest = withoutTestIdProps(others);
+  const actions = actionsOf(props, refreshLabel, createLabel);
+  const showActions = variant === "action" || actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      testID: dataTestId || "empty-state",
+      style: [
+        styles.root,
+        {
+          padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
+          minHeight: EMPTY_STATE_MIN_HEIGHT,
+          gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        illustration ? /* @__PURE__ */ jsx(View, { testID: testId("icon"), style: illustrationStyle(variant), children: illustration }) : null,
+        /* @__PURE__ */ jsx(
+          Content,
+          {
+            title,
+            description,
+            titleId,
+            testId,
+            actions,
+            showActions,
+            helpLink
+          }
+        )
+      ]
+    }
+  );
+});
+EmptyState.displayName = "EmptyState";
+var styles = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    alignItems: "center"
+  },
+  actions: {
+    alignItems: "center"
+  }
+});
+
+export {
+  EmptyState
+};
+//# sourceMappingURL=chunk-RJOHCM2O.js.map