@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/cjs/ProgressSteps/index.cjs

@@ -0,0 +1,239 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ProgressSteps_exports = {};
+__export(ProgressSteps_exports, {
+  ProgressSteps: () => ProgressSteps
+});
+module.exports = __toCommonJS(ProgressSteps_exports);
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_t = require("../shared/t.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const markerSizeMap = {
+  $3: 22,
+  $4: 28,
+  $5: 34
+};
+const markerIconSizeMap = {
+  $3: 12,
+  $4: 14,
+  $5: 16
+};
+const markerTextSizeMap = {
+  $3: "$1",
+  $4: "$2",
+  $5: "$3"
+};
+const labelSizeMap = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
+};
+const stepGapMap = {
+  small: {
+    step: "$1.5",
+    markerLabel: "$2"
+  },
+  medium: {
+    step: "$2",
+    markerLabel: "$3"
+  },
+  large: {
+    step: "$3",
+    markerLabel: "$4"
+  }
+};
+const StepsRoot = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  name: "ProgressSteps",
+  width: "100%"
+});
+const Marker = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ProgressStepMarker",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 1e3,
+  borderWidth: 2,
+  flexShrink: 0
+});
+function stepState(index, current, forcedCompleted) {
+  if (forcedCompleted || index < current) return "completed";
+  if (index === current) return "current";
+  return "upcoming";
+}
+function ProgressSteps({
+  steps,
+  current,
+  onStepChange,
+  orientation = "horizontal",
+  allowJump = true,
+  compact = false,
+  ...props
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "ProgressSteps",
+    compact
+  });
+  const markerSize = markerSizeMap[knobProps.sizeToken] ?? 28;
+  const markerIconSize = markerIconSizeMap[knobProps.sizeToken] ?? 14;
+  const markerTextSize = markerTextSizeMap[knobProps.sizeToken] ?? "$2";
+  const labelSize = labelSizeMap[knobProps.sizeToken] ?? "$3";
+  const gaps = stepGapMap[knobProps.space] ?? stepGapMap.medium;
+  const connectorThickness = 2;
+  const interactive = !!onStepChange && allowJump;
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepsRoot, {
+    role: "list",
+    "aria-label": t("Progress"),
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      flexDirection: horizontal ? "row" : "column",
+      alignItems: horizontal ? "flex-start" : "stretch",
+      width: "100%",
+      gap: horizontal ? 0 : gaps.step,
+      children: steps.map((step, index) => {
+        const state = stepState(index, current, step.completed);
+        const isLast = index === steps.length - 1;
+        const canActivate = interactive && !step.disabled && state !== "current";
+        const markerBg = state === "completed" ? import_componentColors.componentColors.indicator.completed : state === "current" ? import_componentColors.componentColors.indicator.current : import_componentColors.componentColors.interactive.background;
+        const markerBorder = state === "upcoming" ? import_componentColors.componentColors.indicator.track : markerBg;
+        const markerFg = state === "upcoming" ? import_componentColors.componentColors.text.muted : "$color1";
+        const marker = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Marker, {
+          width: markerSize,
+          height: markerSize,
+          backgroundColor: markerBg,
+          borderColor: markerBorder,
+          ...(state === "current" ? {
+            "aria-current": "step"
+          } : void 0),
+          children: state === "completed" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+            size: markerIconSize,
+            color: "white",
+            weight: "bold"
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            fontSize: markerTextSize,
+            fontWeight: "600",
+            color: state === "current" ? "$color1" : markerFg,
+            children: index + 1
+          })
+        });
+        const labelBlock = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$0.5",
+          flexShrink: 1,
+          ...(horizontal ? {
+            alignItems: "center",
+            marginTop: gaps.step,
+            maxWidth: 140
+          } : {
+            flexGrow: 1,
+            justifyContent: "center"
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.body,
+            fontSize: labelSize,
+            fontWeight: state === "current" ? "600" : "500",
+            color: state === "upcoming" ? import_componentColors.componentColors.text.muted : import_componentColors.componentColors.text.primary,
+            textAlign: horizontal ? "center" : void 0,
+            children: step.label
+          }), step.description != null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            fontSize: "$1",
+            color: import_componentColors.componentColors.text.muted,
+            textAlign: horizontal ? "center" : void 0,
+            children: step.description
+          }) : null]
+        });
+        const connector = !isLast && horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flexGrow: 1,
+          height: connectorThickness,
+          backgroundColor: index < current ? import_componentColors.componentColors.indicator.completed : import_componentColors.componentColors.indicator.track,
+          marginTop: (markerSize - connectorThickness) / 2,
+          marginHorizontal: gaps.step,
+          minWidth: 16
+        }) : !isLast && !horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: connectorThickness,
+          height: 20,
+          backgroundColor: index < current ? import_componentColors.componentColors.indicator.completed : import_componentColors.componentColors.indicator.track,
+          marginInlineStart: (markerSize - connectorThickness) / 2,
+          marginVertical: 2
+        }) : null;
+        const body = horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          role: "listitem",
+          alignItems: "center",
+          flexShrink: 0,
+          opacity: step.disabled ? 0.45 : 1,
+          children: [marker, labelBlock]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          role: "listitem",
+          alignItems: "flex-start",
+          gap: gaps.markerLabel,
+          opacity: step.disabled ? 0.45 : 1,
+          children: [marker, labelBlock]
+        });
+        const wrapped = canActivate ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          role: "button",
+          tabIndex: 0,
+          cursor: "pointer",
+          flexGrow: horizontal ? 0 : void 0,
+          flexShrink: horizontal ? 0 : void 0,
+          "aria-label": (0, import_t.withInterp)(t("Go to step {{number}}: {{label}}"), {
+            number: index + 1,
+            label: typeof step.label === "string" ? step.label : index + 1
+          }),
+          onPress: () => onStepChange?.(index),
+          focusVisibleStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineOffset: 2
+          },
+          ...{
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault?.();
+                onStepChange?.(index);
+              }
+            }
+          },
+          children: body
+        }, step.id ?? index) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flexShrink: horizontal ? 0 : void 0,
+          children: body
+        }, step.id ?? index);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          flexDirection: horizontal ? "row" : "column",
+          alignItems: horizontal ? "flex-start" : "stretch",
+          flexGrow: horizontal ? 1 : void 0,
+          flexBasis: horizontal ? 0 : void 0,
+          children: [wrapped, connector]
+        }, `row-${step.id ?? index}`);
+      })
+    })
+  });
+}

package/dist/cjs/ProgressSteps/index.native.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ProgressSteps_exports = {};
+__export(ProgressSteps_exports, {
+  ProgressSteps: () => ProgressSteps
+});
+module.exports = __toCommonJS(ProgressSteps_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.native.js");
+var import_t = require("../shared/t.native.js");
+var markerSizeMap = {
+  $3: 22,
+  $4: 28,
+  $5: 34
+};
+var markerIconSizeMap = {
+  $3: 12,
+  $4: 14,
+  $5: 16
+};
+var markerTextSizeMap = {
+  $3: "$1",
+  $4: "$2",
+  $5: "$3"
+};
+var labelSizeMap = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
+};
+var stepGapMap = {
+  small: {
+    step: "$1.5",
+    markerLabel: "$2"
+  },
+  medium: {
+    step: "$2",
+    markerLabel: "$3"
+  },
+  large: {
+    step: "$3",
+    markerLabel: "$4"
+  }
+};
+var StepsRoot = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  name: "ProgressSteps",
+  width: "100%"
+});
+var Marker = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ProgressStepMarker",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 1e3,
+  borderWidth: 2,
+  flexShrink: 0
+});
+function stepState(index, current, forcedCompleted) {
+  if (forcedCompleted || index < current) return "completed";
+  if (index === current) return "current";
+  return "upcoming";
+}
+function ProgressSteps(param) {
+  var {
+    steps,
+    current,
+    onStepChange,
+    orientation = "horizontal",
+    allowJump = true,
+    compact = false,
+    ...props
+  } = param;
+  var _markerSizeMap_knobProps_sizeToken, _markerIconSizeMap_knobProps_sizeToken, _markerTextSizeMap_knobProps_sizeToken, _labelSizeMap_knobProps_sizeToken, _stepGapMap_knobProps_space;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "ProgressSteps",
+    compact
+  });
+  var markerSize = (_markerSizeMap_knobProps_sizeToken = markerSizeMap[knobProps.sizeToken]) !== null && _markerSizeMap_knobProps_sizeToken !== void 0 ? _markerSizeMap_knobProps_sizeToken : 28;
+  var markerIconSize = (_markerIconSizeMap_knobProps_sizeToken = markerIconSizeMap[knobProps.sizeToken]) !== null && _markerIconSizeMap_knobProps_sizeToken !== void 0 ? _markerIconSizeMap_knobProps_sizeToken : 14;
+  var markerTextSize = (_markerTextSizeMap_knobProps_sizeToken = markerTextSizeMap[knobProps.sizeToken]) !== null && _markerTextSizeMap_knobProps_sizeToken !== void 0 ? _markerTextSizeMap_knobProps_sizeToken : "$2";
+  var labelSize = (_labelSizeMap_knobProps_sizeToken = labelSizeMap[knobProps.sizeToken]) !== null && _labelSizeMap_knobProps_sizeToken !== void 0 ? _labelSizeMap_knobProps_sizeToken : "$3";
+  var gaps = (_stepGapMap_knobProps_space = stepGapMap[knobProps.space]) !== null && _stepGapMap_knobProps_space !== void 0 ? _stepGapMap_knobProps_space : stepGapMap.medium;
+  var connectorThickness = 2;
+  var interactive = !!onStepChange && allowJump;
+  var horizontal = orientation === "horizontal";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepsRoot, {
+    role: "list",
+    "aria-label": t("Progress"),
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      flexDirection: horizontal ? "row" : "column",
+      alignItems: horizontal ? "flex-start" : "stretch",
+      width: "100%",
+      gap: horizontal ? 0 : gaps.step,
+      children: steps.map(function (step, index) {
+        var _step_id, _step_id1, _step_id2;
+        var state = stepState(index, current, step.completed);
+        var isLast = index === steps.length - 1;
+        var canActivate = interactive && !step.disabled && state !== "current";
+        var markerBg = state === "completed" ? import_componentColors.componentColors.indicator.completed : state === "current" ? import_componentColors.componentColors.indicator.current : import_componentColors.componentColors.interactive.background;
+        var markerBorder = state === "upcoming" ? import_componentColors.componentColors.indicator.track : markerBg;
+        var markerFg = state === "upcoming" ? import_componentColors.componentColors.text.muted : "$color1";
+        var marker = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Marker, {
+          width: markerSize,
+          height: markerSize,
+          backgroundColor: markerBg,
+          borderColor: markerBorder,
+          ...(state === "current" ? {
+            "aria-current": "step"
+          } : void 0),
+          children: state === "completed" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+            size: markerIconSize,
+            color: "white",
+            weight: "bold"
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            fontSize: markerTextSize,
+            fontWeight: "600",
+            color: state === "current" ? "$color1" : markerFg,
+            children: index + 1
+          })
+        });
+        var labelBlock = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$0.5",
+          flexShrink: 1,
+          ...(horizontal ? {
+            alignItems: "center",
+            marginTop: gaps.step,
+            maxWidth: 140
+          } : {
+            flexGrow: 1,
+            justifyContent: "center"
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.body,
+            fontSize: labelSize,
+            fontWeight: state === "current" ? "600" : "500",
+            color: state === "upcoming" ? import_componentColors.componentColors.text.muted : import_componentColors.componentColors.text.primary,
+            // undefined = natural start alignment, so vertical labels mirror in RTL
+            textAlign: horizontal ? "center" : void 0,
+            children: step.label
+          }), step.description != null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            fontSize: "$1",
+            color: import_componentColors.componentColors.text.muted,
+            textAlign: horizontal ? "center" : void 0,
+            children: step.description
+          }) : null]
+        });
+        var connector = !isLast && horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flexGrow: 1,
+          height: connectorThickness,
+          backgroundColor: index < current ? import_componentColors.componentColors.indicator.completed : import_componentColors.componentColors.indicator.track,
+          marginTop: (markerSize - connectorThickness) / 2,
+          marginHorizontal: gaps.step,
+          minWidth: 16
+        }) : !isLast && !horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: connectorThickness,
+          height: 20,
+          backgroundColor: index < current ? import_componentColors.componentColors.indicator.completed : import_componentColors.componentColors.indicator.track,
+          marginInlineStart: (markerSize - connectorThickness) / 2,
+          marginVertical: 2
+        }) : null;
+        var body = horizontal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          role: "listitem",
+          alignItems: "center",
+          flexShrink: 0,
+          opacity: step.disabled ? 0.45 : 1,
+          children: [marker, labelBlock]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          role: "listitem",
+          alignItems: "flex-start",
+          gap: gaps.markerLabel,
+          opacity: step.disabled ? 0.45 : 1,
+          children: [marker, labelBlock]
+        });
+        var wrapped = canActivate ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          role: "button",
+          tabIndex: 0,
+          cursor: "pointer",
+          flexGrow: horizontal ? 0 : void 0,
+          flexShrink: horizontal ? 0 : void 0,
+          "aria-label": (0, import_t.withInterp)(t("Go to step {{number}}: {{label}}"), {
+            number: index + 1,
+            label: typeof step.label === "string" ? step.label : index + 1
+          }),
+          onPress: function onPress() {
+            return onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index);
+          },
+          focusVisibleStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineOffset: 2
+          },
+          ...{
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter" || e.key === " ") {
+                var _e_preventDefault;
+                (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+                onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index);
+              }
+            }
+          },
+          children: body
+        }, (_step_id = step.id) !== null && _step_id !== void 0 ? _step_id : index) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flexShrink: horizontal ? 0 : void 0,
+          children: body
+        }, (_step_id1 = step.id) !== null && _step_id1 !== void 0 ? _step_id1 : index);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          flexDirection: horizontal ? "row" : "column",
+          alignItems: horizontal ? "flex-start" : "stretch",
+          flexGrow: horizontal ? 1 : void 0,
+          flexBasis: horizontal ? 0 : void 0,
+          children: [wrapped, connector]
+        }, `row-${(_step_id2 = step.id) !== null && _step_id2 !== void 0 ? _step_id2 : index}`);
+      })
+    })
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/ProgressSteps/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressSteps_exports","__export","ProgressSteps","module","exports","import_jsx_runtime","require","import_react","import_theme","import_react_i18next","import_tamagui","import_componentColors","import_t","markerSizeMap","$3","$4","$5","markerIconSizeMap","markerTextSizeMap","labelSizeMap","stepGapMap","small","step","markerLabel","medium","large","StepsRoot","styled","YStack","name","width","Marker","View","alignItems","justifyContent","borderRadius","borderWidth","flexShrink","stepState","index","current","forcedCompleted","param","steps","onStepChange","orientation","allowJump","compact","props","_markerSizeMap_knobProps_sizeToken","_markerIconSizeMap_knobProps_sizeToken","_markerTextSizeMap_knobProps_sizeToken","_labelSizeMap_knobProps_sizeToken","_stepGapMap_knobProps_space","t","useTranslation","knobProps","useResolvedKnobs","component","markerSize","sizeToken","markerIconSize","markerTextSize","labelSize","gaps","space","connectorThickness","interactive","horizontal","jsx","role","children","XStack","flexDirection","gap","map","_step_id","_step_id1","_step_id2","state","completed","isLast","length","canActivate","disabled","markerBg","componentColors","indicator","background","markerBorder","track","markerFg","text","muted","marker","height","backgroundColor","borderColor","CheckIcon","size","color","weight","SizableText","fontSize","fontWeight","labelBlock","jsxs","marginTop","maxWidth","flexGrow","body","primary","textAlign","label","description","connector","marginHorizontal","minWidth","marginInlineStart","marginVertical","opacity","wrapped","tabIndex","cursor","withInterp","number","onPress","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","onKeyDown","e","key","_e_preventDefault","preventDefault","call","id"],"sources":["../../../src/ProgressSteps/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA0B,CAAAK,qBAAA;AAC1B,IAAAK,kBAAiC,GAAAC,OAAA;AACjC,IAAAC,YAAA,GAAAD,OAAA,CAA+B;AAG/B,IAAAE,YAAA,GAAAF,OAA0D;AAC1D,IAAAG,oBAAA,GAAAH,OAAgC;AAChC,IAAAI,cAA2B,GAAAJ,OAAA;AAwIX,IAAAK,sBAAA,GAAAL,OAAA;AAhGhB,IAAAM,QAAM,GAAAN,OAAwC,wBAAc;AAC5D,IAAAO,aAAM;EACNC,EAAA,EAAM;EACNC,EAAA,EAAM;EAINC,EAAA,EAAM;AAAoE;AAC/B,IACzCC,iBAAgB,GAAM;EACtBH,EAAA;EACFC,EAAA;EAIAC,EAAA,EAAM;AAA2B;AACzB,IACNE,iBAAO;EACRJ,EAAA;EAEDC,EAAA,EAAM;EACJC,EAAA;AAAM;AACM,IACZG,YAAA,GAAgB;EAChBL,EAAA;EACAC,EAAA;EACAC,EAAA;AACF,CAAC;AAID,IAAAI,UAAS;EACPC,KAAI;IACJC,IAAI,QAAU;IACdC,WAAO;EACT;EASOC,MAAA,EAAS;IACdF,IAAA;IACAC,WAAA;EACA;EACAE,KAAA;IACAH,IAAA,MAAY;IACZC,WAAU;EACV;AACF;AACE,IAAAG,SAAU,OAAIhB,cAAA,CAAAiB,MAAA,EAAAjB,cAAe,CAAAkB,MAAA;EAC7BC,IAAA,EAAM,eAAY;EAClBC,KAAA,EAAM;AACN;AACA,IAAAC,MAAM,OAAArB,cAAiB,CAAAiB,MAAA,EAAAjB,cAA4B,CAAAsB,IAAA;EACnDH,IAAA,EAAM,oBAAY;EAClBI,UAAM,UAAO;EACbC,cAAM;EACNC,YAAM;EACNC,WAAM;EAENC,UACE;AACE;AAAC,SAAAC,UAAAC,KAAA,EAAAC,OAAA,EAAAC,eAAA;EAAA,IACCA,eAAe,IAAAF,KAAA,GAAAC,OAAa,EAAQ;EAAA,IACpCD,KAAA,KAAAC,OAAY,SAAa;EAAe,OACxC,UAAM;AAAA;AACsB,SAE3BtC,aAAMA,CAAAwC,KAAK;EACV;IAAAC,KAAA;IAAMH,OAAQ;IAAAI,YAAU;IAAAC,WAAgB,eAAc;IAAAC,SAAA;IAAAC,OAAA;IAAA,GAAAC;EAAA,IAAAN,KAAA;EACtD,IAAAO,kCAA+B,EAAAC,sCAAS,EAAAC,sCAAA,EAAAC,iCAAA,EAAAC,2BAAA;EACxC;IAAAC;EAAA,IAAM,IAAA7C,oBAAc,CAAA8C,cAAqB;EACzC;IAAAC;EAAM,QACJhD,YAAU,CAAAiD,gBACN;IAINC,SAAA,EAAM,eAAe;IACrBX;EAEA;EACE,IAAAY,UAAC,IAAAV,kCAAA,GAAApC,aAAA,CAAA2C,SAAA,CAAAI,SAAA,eAAAX,kCAAA,cAAAA,kCAAA;EAAA,IAAAY,cAAA,IAAAX,sCAAA,GAAAjC,iBAAA,CAAAuC,SAAA,CAAAI,SAAA,eAAAV,sCAAA,cAAAA,sCAAA;EAAA,IAAAY,cACQ,IAAAX,sCAAA,GAAAjC,iBAAA,CAAAsC,SAAA,CAAAI,SAAA,eAAAT,sCAAA,cAAAA,sCAAA;EAAA,IAAAY,SACP,IAAAX,iCAAQ,GAAAjC,YAAA,CAAAqC,SAAA,CAAAI,SAAA,eAAAR,iCAAA,cAAAA,iCAAA;EAAA,IAAAY,IAAA,GACR,CAAAX,2BAAiB,GAAAjC,UAAA,CAAAoC,SAAA,CAAAS,KAAA,eAAAZ,2BAAA,cAAAA,2BAAA,GAAAjC,UAAA,CAAAI,MAAA;EAAA,IAAA0C,kBACjB,GAAa;EAAA,IAAAC,WACR,KAAAvB,YAAU,IACVE,SAAE;EACH,IAAAsB,UAEH,GAAAvB,WAAA,KAAU,YACT;EAEA,sBAAC,IAAAxC,kBAAA,CAAAgE,GAAA,EAAA3C,SAAA;IAAA4C,IAAA;IAAA,YACC,EAAAhB,CAAA,WAAU;IAAA,GAAAN,KAAA;IACCuB,QAAA,iBACJ,IAAUlE,kBAAY,CAAAgE,GAAA,EAAY3D,cAAA,CAAA8D,MAAA;MAAAC,aAExC,EAAAL,UAAA,GAAQ;MAAAnC,UAAA,EAAAmC,UAAA;MAAAtC,KAAA,EACX;MAAA4C,GAAA,EAAAN,UAAA,OAAAJ,IAAA,CAAA1C,IAAA;MAAAiD,QAEJ,EAAA5B,KAAA,CAAAgC,GAAA,WAAArD,IAAA,EAAAiB,KAAA;QAGF,IAAAqC,QAAM,EAAAC,SACJ,EAAAC,SAAA;QAAA,IAACC,KAAA,GAAAzC,SAAA,CAAAC,KAAA,EAAAC,OAAA,EAAAlB,IAAA,CAAA0D,SAAA;QAAA,IAAAC,MAAA,GAAA1C,KAAA,KAAAI,KAAA,CAAAuC,MAAA;QAAA,IACCC,WAAI,GAAAhB,WAAA,KAAA7C,IAAA,CAAA8D,QAAA,IAAAL,KAAA;QAAA,IACJM,QAAA,GAAAN,KAAY,mBAAApE,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAAP,SAAA,GAAAD,KAAA,iBAAApE,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAA/C,OAAA,GAAA7B,sBAAA,CAAA2E,eAAA,CAAAnB,WAAA,CAAAqB,UAAA;QAAA,IACXC,YAAI,GAAAV,KACC,eAAY,GAAApE,sBAA0B,CAAA2E,eAA2B,CAAAC,SACjE,CAAAG,KAAU,GAAGL,QAAA;QAAyB,IAE5CM,QAAA,GAAAZ,KAAA,kBAAApE,sBAAA,CAAA2E,eAAA,CAAAM,IAAA,CAAAC,KAAA;QAAA,IAAAC,MAAA,sBAAAzF,kBAAA,CAAAgE,GAAA,EAAAtC,MAAA;UAAAD,KAAA,EAAC6B,UAAA;UAAAoC,MAAA,EAAApC,UAAA;UAAAqC,eACK,EAAAX,QAAU;UAAAY,WACd,EAAAR,YAAU;UAAA,IAAAV,KACV,cAAY;YAA8B,cAExC;UAAyE,SAG3E;UAAmCR,QAElC,EAAAQ,KAAA,gBAAK,sBAAA1E,kBAAA,CAAAgE,GAAA,EAAA9D,YAAA,CAAA2F,SAAA;YAAAC,IAAA,EAAAtC,cAAA;YAAAuC,KACR;YAAAC,MACC,EAAK;UACJ,oBAAC,IAAAhG,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAA4F,WAAA;YAAAC,QAAA,EAAAzC,cAAA;YAAA0C,UACC,OAAS;YAAAJ,KAAA,EACTrB,KAAA,KAAO,wBAAAY,QAAA;YAAqBpB,QAC5B,EAAAhC,KAAA,GAAW;UAAwB;QAE7B;QAAA,IAAAkE,UAEN,sBAAApG,kBAAA,CAAAqG,IAAA,EAAAhG,cAAA,CAAAkB,MAAA;UAAA8C,GAAA;UAAArC,UAAA;UACN,IAAA+B,UAAA;YAGFnC,UAAM,UACH;YACE0E,SAAA,EAAA3C,IAAA,CAAA1C,IAAA;YAAAsF,QAAA;UAAA,IACC;YACAC,QAAQ;YACR3E,cAAA;UAGgC;UAEeqC,QAC/C,GACA,eAAU,IAAAlE,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAA4F,WAAA;YAAA,GAAA9C,SAAA,CAAAsD,IAAA;YAETP,QAAA,EAAWxC,SAAA;YACbyC,UAAA,EAAAzB,KAAA;YAAAqB,KAAA,EAAArB,KAAA,kBAAApE,sBAAA,CAAA2E,eAAA,CAAAM,IAAA,CAAAC,KAAA,GAAAlF,sBAAA,CAAA2E,eAAA,CAAAM,IAAA,CAAAmB,OAAA;YACC;YACAC,SAAQ,EAAA5C,UAAA;YACRG,QAAA,EAAAjD,IAAA,CACE2F;UAIF,IACA3F,IAAA,CAAA4F,WAAgB,8BAAA7G,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAA4F,WAAA;YAAAC,QAAA;YAEhBH,KAAA,EAAAzF,sBAAA,CAAA2E,eAAA,CAAAM,IAAA,CAAAC,KAAA;YAEAmB,SAAO,EAAA5C,UACX;YAACG,QAAA,EAAAjD,IAAA,CAAA4F;UAAA;QACM;QACM,IACXC,SAAA,GAAY,CAAAlC,MAAA,IAAAb,UAAA,sBAAA/D,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAAsB,IAAA;UAAA6E,QACZ,GAAS;UAAuBd,MAE/B,EAAA7B,kBAAA;UAAA8B,eAAA,EAAAzD,KAAA,GAAAC,OAAA,GAAA7B,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAAP,SAAA,GAAArE,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAAG,KAAA;UAAAiB,SACA,GAAAhD,UAAA,GAAAO,kBAAA;UAAAkD,gBAAA,EAAApD,IAAA,CAAA1C,IAAA;UAAA+F,QAAA;QACH,KAEA,CAAApC,MAAA,KAAAb,UAAA,sBAAA/D,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAAsB,IAAA;UAACF,KAAA,EAAAoC,kBAAA;UAAA6B,MAAA;UAAAC,eACM,EAAAzD,KAAA,GAAAC,OAAA,GAAA7B,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAAP,SAAA,GAAArE,sBAAA,CAAA2E,eAAA,CAAAC,SAAA,CAAAG,KAAA;UAAA4B,iBACM,GAAA3D,UAAA,GAAAO,kBAAA;UAAAqD,cACD;QAAA,KACV;QAAgC,IAE/BT,IAAA,GAAA1C,UAAA,sBAAA/D,kBAAA,CAAAqG,IAAA,EAAAhG,cAAA,CAAAkB,MAAA;UAAA0C,IAAA;UAAArC,UACA;UAAAI,UAAA;UAAAmF,OAAA,EAAAlG,IAAA,CAAA8D,QAAA;UACHb,QAAA,GAGFuB,MAAM,EACHW,UAAA;QAAA,KAEC,eAAK,IAAApG,kBAAA,CAAAqG,IAAA,EAAAhG,cAAA,CAAA8D,MAAA;UAAAF,IACL,YAAU;UAAArC,UACH;UAAAyC,GACP,EAAAV,IAAA,CAAAzC,WAAU;UAAiBiG,OAC3B,EAAAlG,IAAA,CAAY8D,QAAA,OAAa,GAAI;UAAAb,QAC7B,GAA8DuB,MAC5D,EAAgBW,UACT;QACR;QACkC,IACnCgB,OAAA,GAAAtC,WAAmB,sBAAA9E,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAAsB,IAAA;UAAAsC,IACjB;UAAcoD,QACd;UAAcC,MACd;UAAcd,QACd,EAAAzC,UAAe;UAAA/B,UACjB,EAAA+B,UAAA;UAAA,YACK,MAAAxD,QAAA,CAAAgH,UAAA,EAAAtE,CAAA;YAAAuE,MACH,EAAAtF,KAAW,GAAC;YACV0E,KAAA,SAAM3F,IAAQ,CAAA2F,KAAA,KAAW,QAAE,GAAQ3F,IAAK,CAAA2F,KAAA,GAAA1E,KAAA;UACtC;UACAuF,OAAA,WAAAA,OAAeA,CAAA,EAAK;YAAA,OACtBlF,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAAL,KAAA;UAAA;UACFwF,iBACF;YAECC,YAAA;YAAAC,YAAA;YA1BIC,YAAW;YA6BlBC,aAAA;UAKF;UACG;YAAAC,SAAA,WAAAA,UAAAC,CAAA;cAEC,IAAAA,CAAA,CAAAC,GAAA,KAAe,WAAAD,CAAa,CAAAC,GAAA,KAAQ;gBACpC,IAAAC,iBAAyB;gBACzB,CAAAA,iBAAU,GAAaF,CAAA,CAAIG,cAAA,cAAAD,iBAAA,uBAAAA,iBAAA,CAAAE,IAAA,CAAAJ,CAAA;gBAC3BzF,YAAW,SAAa,IAAIA,YAAA,uBAAAA,YAAA,CAAAL,KAAA;cAE3B;YAAA;UAAA;UACAgC,QAAA,EAAAuC;QAAA,IAAAlC,QAAA,GAAAtD,IAAA,CAAAoH,EAAA,cAAA9D,QAAA,cAAAA,QAAA,GAAArC,KAAA,uBAAAlC,kBAAA,CAAAgE,GAAA,EAAA3D,cAAA,CAAAsB,IAAA;UAPIK,UAAO,EAAK+B,UAAM,GAAK;UAQ9BG,QAAA,EAAAuC;QAEH,IAAAjC,SAAA,GAAAvD,IAAA,CAAAoH,EAAA,cAAA7D,SAAA,cAAAA,SAAA,GAAAtC,KAAA;QAAA,0BAAAlC,kBAAA,CAAAqG,IAAA,EAAAhG,cAAA,CAAA8D,MAAA;UAELC,aAAA,EAAAL,UAAA;UAEJnC,UAAA,EAAAmC,UAAA","ignoreList":[]}

package/dist/cjs/Quote/index.cjs

@@ -0,0 +1,90 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Quote_exports = {};
+__export(Quote_exports, {
+  Quote: () => Quote
+});
+module.exports = __toCommonJS(Quote_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const QuoteFrame = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  name: "Quote",
+  width: "100%"
+});
+function Quote({
+  children,
+  cite,
+  compact = false,
+  ...props
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Quote",
+    compact
+  });
+  const theme = (0, import_tamagui.useTheme)();
+  const padToken = compact ? "$3" : knobProps.panelPadding.padding;
+  const pad = typeof padToken === "number" ? padToken : (0, import_tamagui.getTokens)().space?.[padToken]?.val ?? padToken;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(QuoteFrame, {
+    render: "blockquote",
+    backgroundColor: import_componentColors.componentColors.surface.background,
+    ...knobProps.containerRadius,
+    paddingVertical: compact ? "$2" : knobProps.gap.gap,
+    marginVertical: compact ? "$2" : "$3",
+    ...(import_tamagui.isWeb ? {
+      style: {
+        borderInlineStartWidth: 4,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: theme.color8?.val ?? theme.color8?.get() ?? "#999",
+        paddingInlineStart: pad,
+        marginInlineStart: 0,
+        marginInlineEnd: 0
+      }
+    } : {
+      borderStartWidth: 4,
+      borderStartColor: import_componentColors.componentColors.indicator.track,
+      paddingStart: padToken
+    }),
+    ...props,
+    children: [typeof children === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      ...knobProps.body,
+      fontSize: knobProps.sizeToken,
+      color: import_componentColors.componentColors.text.primary,
+      fontStyle: "italic",
+      lineHeight: knobProps.sizeToken,
+      children
+    }) : children, cite != null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      marginTop: compact ? "$1.5" : "$2",
+      children: typeof cite === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.SizableText, {
+        render: "cite",
+        fontSize: compact ? "$1" : "$2",
+        color: import_componentColors.componentColors.text.muted,
+        fontStyle: "normal",
+        children: ["\u2014 ", cite]
+      }) : cite
+    }) : null]
+  });
+}