@12-apps/ui 6.54.0 → 6.55.0

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

@@ -0,0 +1,136 @@
+import {
+  resolveTestId
+} from "./chunk-AR5O4BEY.js";
+import {
+  useUiTheme
+} from "./chunk-ZYSOBULX.js";
+
+// src/components/layout/Box/Box.base.ts
+var BOX_BASE_KEYS = [
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "gap",
+  "direction",
+  "align",
+  "justify",
+  "wrap",
+  "flex",
+  "bg",
+  "radius",
+  "bordered",
+  "width",
+  "height",
+  "testID",
+  "dataTestId"
+];
+
+// src/components/layout/Box/box-layout.ts
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function background(theme, bg) {
+  if (bg === "transparent") return "transparent";
+  if (bg === "default" || bg === "paper") return theme.palette.background[bg];
+  return theme.palette[bg].main;
+}
+var SIDES = [
+  ["paddingTop", ["pt", "py", "p"]],
+  ["paddingRight", ["pr", "px", "p"]],
+  ["paddingBottom", ["pb", "py", "p"]],
+  ["paddingLeft", ["pl", "px", "p"]],
+  ["marginTop", ["mt", "my", "m"]],
+  ["marginRight", ["mr", "mx", "m"]],
+  ["marginBottom", ["mb", "my", "m"]],
+  ["marginLeft", ["ml", "mx", "m"]]
+];
+function spacingLayout(props, theme) {
+  const layout = {};
+  for (const [key, sources] of SIDES) {
+    const units = sources.map((source) => props[source]).find((value) => value !== void 0);
+    if (typeof units === "number") layout[key] = theme.spacing(units);
+  }
+  return layout;
+}
+function flexLayout(props, theme) {
+  const layout = {};
+  const isFlex = [props.direction, props.align, props.justify, props.gap].some((value) => value !== void 0) || props.wrap === true;
+  if (!isFlex) return layout;
+  layout.display = "flex";
+  layout.flexDirection = props.direction ?? "column";
+  if (props.gap !== void 0) layout.gap = theme.spacing(props.gap);
+  if (props.align !== void 0) layout.alignItems = ALIGN[props.align];
+  if (props.justify !== void 0) layout.justifyContent = JUSTIFY[props.justify];
+  if (props.wrap) layout.flexWrap = "wrap";
+  return layout;
+}
+function surfaceLayout(props, theme) {
+  const layout = {};
+  if (props.flex !== void 0) layout.flex = props.flex;
+  if (props.bg !== void 0) layout.backgroundColor = background(theme, props.bg);
+  if (props.radius !== void 0) layout.borderRadius = theme.radius[props.radius];
+  if (props.bordered) {
+    layout.borderWidth = 1;
+    layout.borderStyle = "solid";
+    layout.borderColor = theme.palette.divider;
+  }
+  if (props.width !== void 0) layout.width = props.width;
+  if (props.height !== void 0) layout.height = props.height;
+  return layout;
+}
+function resolveBoxLayout(props, theme) {
+  return { ...spacingLayout(props, theme), ...flexLayout(props, theme), ...surfaceLayout(props, theme) };
+}
+function splitBoxProps(props) {
+  const layout = {};
+  const rest = {};
+  const own = /* @__PURE__ */ new Set([...BOX_BASE_KEYS, "data-testid"]);
+  for (const [key, value] of Object.entries(props)) {
+    (own.has(key) ? layout : rest)[key] = value;
+  }
+  return {
+    layout,
+    rest
+  };
+}
+
+// src/components/layout/Box/Box.native.tsx
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = React.forwardRef(({ children, style, ...props }, ref) => {
+  const theme = useUiTheme();
+  const { layout, rest } = splitBoxProps(props);
+  const resolved = resolveBoxLayout(layout, theme);
+  return /* @__PURE__ */ jsx(View, { ref, style: [resolved, style], testID: resolveTestId(layout), ...rest, children });
+});
+Box.displayName = "Box";
+
+export {
+  resolveBoxLayout,
+  Box
+};
+//# sourceMappingURL=chunk-F4NDP3G5.js.map

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

@@ -0,0 +1,339 @@
+import {
+  resolveFieldEdge
+} from "./chunk-3JBZE4I6.js";
+import {
+  ABSOLUTE_INK
+} from "./chunk-ZRQHLTYG.js";
+import {
+  SIZE_VALUES
+} from "./chunk-5WLOVHKK.js";
+import {
+  DEFAULT_FIELD_HEIGHT,
+  alpha,
+  decomposeColor,
+  fieldHeightPx,
+  recomposeColor
+} from "./chunk-DNTO2D5M.js";
+
+// src/components/form/Input/Input.metrics.ts
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "underline":
+      return "standard";
+    case "glass":
+    case "gradient":
+      return "outlined";
+    default:
+      return variant;
+  }
+};
+var INPUT_MUI_SIZE = {
+  xs: "small",
+  sm: "small",
+  md: "small",
+  lg: "medium",
+  xl: "medium"
+};
+var INPUT_SIZE_OVERRIDES = {
+  xs: { vertical: 6, horizontal: 10 },
+  lg: { vertical: 16, horizontal: 14 },
+  xl: { vertical: 20, horizontal: 16 }
+};
+var MUI_INPUT_PADDING = {
+  outlined: {
+    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },
+    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 }
+  },
+  filled: {
+    small: { top: 21, right: 12, bottom: 4, left: 12 },
+    medium: { top: 25, right: 12, bottom: 8, left: 12 }
+  },
+  standard: {
+    small: { top: 1, right: 0, bottom: 5, left: 0 },
+    medium: { top: 4, right: 0, bottom: 5, left: 0 }
+  }
+};
+var AT_FIELD_HEIGHT = {
+  outlined: true,
+  glass: true,
+  gradient: true,
+  filled: false,
+  underline: false
+};
+function inputPadding(variant, size, fieldHeight = DEFAULT_FIELD_HEIGHT) {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  if (AT_FIELD_HEIGHT[variant]) {
+    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;
+    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;
+    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+  }
+  if (override) {
+    return {
+      top: override.vertical,
+      right: override.horizontal,
+      bottom: override.vertical,
+      left: override.horizontal
+    };
+  }
+  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];
+}
+var INPUT_FONT_SIZE = 16;
+var INPUT_LINE_HEIGHT = 23;
+var PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 };
+function placeholderInk(theme) {
+  const opacity = theme.mode === "dark" ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;
+  const { type, values } = decomposeColor(theme.palette.text.primary);
+  const [first = 0, second = 0, third = 0, own = 1] = values;
+  return recomposeColor({
+    type: type.startsWith("hsl") ? "hsla" : "rgba",
+    values: [first, second, third, own * opacity]
+  });
+}
+var INPUT_BORDER = { rest: 1, focused: 2 };
+var UNDERLINE_COLOR = {
+  light: alpha(ABSOLUTE_INK.black, 0.42),
+  dark: alpha(ABSOLUTE_INK.white, 0.7)
+};
+var INPUT_LABEL = { scale: 0.75, gap: 4 };
+var HELPER_TEXT = {
+  fontSize: 12,
+  lineHeight: 1.66,
+  marginTop: 3,
+  marginTopSmall: 4,
+  marginHorizontal: 14
+};
+var ADORNMENT_GAP = 8;
+var INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 };
+var INPUT_GLOW = {
+  rest: { blur: 15, alpha: 0.3 },
+  focused: { blur: 20, alpha: 0.5 }
+};
+var INPUT_PULSE = {
+  opacity: 0.3,
+  ms: 2e3,
+  spread: 10
+};
+var INPUT_GLASS = {
+  background: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  blur: 20,
+  hoverBorderAlpha: 0.3,
+  focusRing: { width: 2, alpha: 0.1 }
+};
+var INPUT_GRADIENT = {
+  angleDeg: 135,
+  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },
+  borderWidth: 2
+};
+var FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 };
+var sizeProps = (size) => {
+  const override = INPUT_SIZE_OVERRIDES[size];
+  return {
+    size: INPUT_MUI_SIZE[size],
+    ...override ? {
+      sx: {
+        "& .MuiInputBase-input": {
+          paddingLeft: `${override.horizontal}px`,
+          paddingRight: `${override.horizontal}px`
+        }
+      }
+    } : {}
+  };
+};
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, sizeProps(size)])
+);
+
+// src/components/form/field-pulse.native.tsx
+import * as React from "react";
+import { Animated, Easing, Platform, StyleSheet } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function FieldPulse({
+  color,
+  radius,
+  height,
+  testID
+}) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: INPUT_PULSE.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: [
+        styles.pulse,
+        {
+          height,
+          borderRadius: radius,
+          backgroundColor: color,
+          opacity: progress.interpolate({
+            inputRange: [0, 0.7, 1],
+            outputRange: [INPUT_PULSE.opacity, 0, 0]
+          }),
+          transform: [
+            { translateY: -height / 2 },
+            {
+              scale: progress.interpolate({
+                inputRange: [0, 0.7, 1],
+                outputRange: [1, 1 + INPUT_PULSE.spread / height, 1]
+              })
+            }
+          ]
+        }
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  pulse: {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    pointerEvents: "none"
+  }
+});
+
+// src/components/form/Input/Input.look.native.ts
+var BORDER_SIDES = {
+  outlined: "all",
+  glass: "all",
+  gradient: "all",
+  filled: "bottom",
+  underline: "bottom"
+};
+var BORDER_IS_FREE = {
+  outlined: true,
+  filled: true,
+  underline: true,
+  glass: false,
+  gradient: false
+};
+function borderWidthFor(variant, focused) {
+  if (variant === "gradient") return INPUT_GRADIENT.borderWidth;
+  if (variant === "glass") return INPUT_BORDER.rest;
+  return focused ? INPUT_BORDER.focused : INPUT_BORDER.rest;
+}
+function horizontalBorderInset(variant, focused) {
+  if (BORDER_SIDES[variant] !== "all" || !BORDER_IS_FREE[variant]) return 0;
+  return borderWidthFor(variant, focused);
+}
+function borderColorFor(theme, variant, state) {
+  if (state.disabled) return theme.palette.action.disabled;
+  if (state.error) return theme.palette.danger.main;
+  if (variant === "gradient") {
+    return state.focused ? theme.palette.primary.dark : theme.palette.primary.main;
+  }
+  if (state.focused) return theme.palette.primary.main;
+  if (variant === "filled") {
+    return theme.mode === "dark" ? UNDERLINE_COLOR.dark : UNDERLINE_COLOR.light;
+  }
+  return resolveFieldEdge(theme.palette.divider, theme.palette.background.paper);
+}
+function backgroundFor(theme, variant, state) {
+  switch (variant) {
+    case "filled":
+      return alpha(theme.palette.action.hover, state.focused ? FILLED_WASH.focused : FILLED_WASH.rest);
+    case "glass":
+      return alpha(
+        theme.palette.background.paper,
+        state.focused ? INPUT_GLASS.background.focused : INPUT_GLASS.background.rest
+      );
+    case "gradient":
+      return alpha(
+        theme.palette.primary.main,
+        state.focused ? INPUT_GRADIENT.fill.focused : INPUT_GRADIENT.fill.rest
+      );
+    default:
+      return void 0;
+  }
+}
+function radiusFor(theme, variant) {
+  if (variant === "underline") return {};
+  if (variant === "filled") {
+    return { borderTopLeftRadius: theme.radius.field, borderTopRightRadius: theme.radius.field };
+  }
+  return { borderRadius: theme.radius.field };
+}
+function borderStyle(variant, width, color, state) {
+  const style = state.disabled && BORDER_SIDES[variant] === "bottom" ? "dotted" : "solid";
+  const sides = BORDER_SIDES[variant] === "bottom" ? { borderBottomWidth: width } : { borderWidth: width };
+  return { ...sides, borderColor: color, borderStyle: style };
+}
+function fieldLook(theme, variant, size, state) {
+  const padding = inputPadding(variant, size, theme.fieldHeight);
+  const width = borderWidthFor(variant, state.focused);
+  const inset = BORDER_IS_FREE[variant] ? width : 0;
+  const sides = BORDER_SIDES[variant];
+  const horizontal = sides === "all" ? inset : 0;
+  return {
+    box: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: padding.left - horizontal,
+      paddingRight: padding.right - horizontal,
+      backgroundColor: backgroundFor(theme, variant, state),
+      ...radiusFor(theme, variant),
+      ...borderStyle(variant, width, borderColorFor(theme, variant, state), state)
+    },
+    value: {
+      flex: 1,
+      minWidth: 0,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: INPUT_FONT_SIZE,
+      lineHeight: INPUT_LINE_HEIGHT,
+      color: state.disabled ? theme.palette.text.disabled : theme.palette.text.primary,
+      paddingTop: padding.top - (sides === "all" ? inset : 0),
+      paddingBottom: padding.bottom - inset,
+      paddingHorizontal: 0
+    },
+    placeholder: placeholderInk(theme)
+  };
+}
+function labelStyle(theme, variant, size, state) {
+  const ink = state.disabled ? theme.palette.text.disabled : state.error ? theme.palette.danger.main : state.focused ? theme.palette.primary.main : theme.palette.text.secondary;
+  return {
+    color: ink,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: INPUT_FONT_SIZE * INPUT_LABEL.scale,
+    marginBottom: INPUT_LABEL.gap,
+    // Aligned with the value it names: the web's floating label and the input
+    // share one left inset (14px outlined, 12px filled, 0 standard).
+    marginLeft: inputPadding(variant, size, theme.fieldHeight).left
+  };
+}
+function helperStyle(theme, variant, size, state) {
+  return {
+    color: state.disabled ? theme.palette.text.disabled : state.error ? theme.palette.danger.main : theme.palette.text.secondary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: HELPER_TEXT.fontSize,
+    lineHeight: HELPER_TEXT.fontSize * HELPER_TEXT.lineHeight,
+    marginTop: INPUT_MUI_SIZE[size] === "small" ? HELPER_TEXT.marginTopSmall : HELPER_TEXT.marginTop,
+    marginHorizontal: variant === "underline" ? 0 : HELPER_TEXT.marginHorizontal
+  };
+}
+
+export {
+  INPUT_FONT_SIZE,
+  INPUT_LINE_HEIGHT,
+  ADORNMENT_GAP,
+  INPUT_LOADING,
+  INPUT_GLOW,
+  FieldPulse,
+  horizontalBorderInset,
+  fieldLook,
+  labelStyle,
+  helperStyle
+};
+//# sourceMappingURL=chunk-GYK6HLEE.js.map