@multiplatform.one/components 6.6.0 → 7.0.0

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

@@ -1,44 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "@phosphor-icons/react";
-import { useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
-import { useTranslation } from "react-i18next";
-import { SizableText, View, XStack, YStack, styled } from "tamagui";
+import { CheckIcon, WarningIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, pressTargetHitSlop, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "../shared/i18n.native.js";
+import { SizableText, View, XStack, YStack, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
 import { withInterp } from "../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 = styled(YStack, {
   name: "ProgressSteps",
   width: "100%"
@@ -50,11 +17,43 @@ var Marker = styled(View, {
   borderWidth: 2,
   flexShrink: 0
 });
+var StepButton = styled(View, {
+  name: "ProgressStepButton",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  cursor: "pointer",
+  // LC-71: the button is the hit target; the ring lives on the marker.
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  }
+});
+var Connector = styled(View, {
+  name: "ProgressStepConnector",
+  flexShrink: 0
+});
 function stepState(index, current, forcedCompleted) {
   if (forcedCompleted || index < current) return "completed";
   if (index === current) return "current";
   return "upcoming";
 }
+function splitNestedControl(nested) {
+  var {
+    px,
+    hitSlop,
+    ...box
+  } = nested;
+  return {
+    px,
+    hitSlop,
+    box
+  };
+}
 function ProgressSteps(param) {
   var {
     steps,
@@ -62,159 +61,216 @@ function ProgressSteps(param) {
     onStepChange,
     orientation = "horizontal",
     allowJump = true,
+    linear = true,
     compact = false,
     ...props
   } = param;
-  var _markerSizeMap_knobProps_sizeToken, _markerIconSizeMap_knobProps_sizeToken, _markerTextSizeMap_knobProps_sizeToken, _labelSizeMap_knobProps_sizeToken, _stepGapMap_knobProps_space;
   var {
     t
   } = useTranslation();
   var {
-    knobProps
+    knobProps,
+    control,
+    disabledState
   } = useResolvedKnobs({
     component: "ProgressSteps",
     compact
   });
+  if (isWeb) ensureKeyboardModalityTracking();
+  var [kbFocusIndex, setKbFocusIndex] = useState(null);
   var onSelected = useReadableTextOn(componentColors.indicator.selected);
-  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 onCompleted = useReadableTextOn(componentColors.indicator.completed);
+  var onError = useReadableTextOn("$red9");
+  var {
+    px: markerPx,
+    hitSlop,
+    box: nestedBox
+  } = splitNestedControl(knobProps.nestedControl);
+  var markerIconSize = Math.max(12, Math.round(markerPx * 0.45));
   var markerRadius = knobProps.pointy ? 0 : 1e3;
   var connectorThickness = 2;
+  var pressOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - markerPx) / 2));
   var interactive = !!onStepChange && allowJump;
   var horizontal = orientation === "horizontal";
+  var gapToken = knobProps.gap.gap;
   return /* @__PURE__ */_jsx(StepsRoot, {
     role: "list",
     "aria-label": t("Progress"),
+    "data-density": knobProps.density,
     ...props,
     children: /* @__PURE__ */_jsx(XStack, {
       flexDirection: horizontal ? "row" : "column",
       alignItems: horizontal ? "flex-start" : "stretch",
       width: "100%",
-      gap: horizontal ? 0 : gaps.step,
+      gap: horizontal ? 0 : gapToken,
       children: steps.map(function (step, index) {
-        var _step_id, _step_id1, _step_id2;
+        var _step_description, _step_id, _step_id1;
         var state = stepState(index, current, step.completed);
+        var kind = step.error ? "error" : state;
         var isLast = index === steps.length - 1;
-        var canActivate = interactive && !step.disabled && state !== "current";
-        var markerBg = state === "completed" ? componentColors.indicator.completed : state === "current" ? componentColors.indicator.selected : componentColors.interactive.background;
-        var markerBorder = state === "upcoming" ? componentColors.indicator.track : markerBg;
-        var markerFg = state === "upcoming" ? componentColors.text.muted : "$color1";
+        var canActivate = interactive && !step.disabled && state !== "current" && (state === "completed" || !linear);
+        var isFocusable = interactive && !step.disabled && (canActivate || state === "current");
+        var markerBg = kind === "error" ? "$red9" : kind === "completed" ? componentColors.indicator.completed : kind === "current" ? componentColors.indicator.selected : "transparent";
+        var markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
+        var markerFg = kind === "upcoming" ? componentColors.text.muted : kind === "error" ? onError !== null && onError !== void 0 ? onError : "$color1" : kind === "completed" ? onCompleted !== null && onCompleted !== void 0 ? onCompleted : "$color1" : onSelected !== null && onSelected !== void 0 ? onSelected : "$color1";
+        var helper = (_step_description = step.description) !== null && _step_description !== void 0 ? _step_description : step.optional && kind !== "error" ? t("Optional") : null;
+        var connectorFill = index < current ? componentColors.indicator.completed : componentColors.indicator.track;
         var marker = /* @__PURE__ */_jsx(Marker, {
-          width: markerSize,
-          height: markerSize,
+          ...nestedBox,
           borderRadius: markerRadius,
           backgroundColor: markerBg,
           borderColor: markerBorder,
+          "data-nested-px": markerPx,
+          "data-step-state": kind,
+          transition: knobProps.transition,
           ...(state === "current" ? {
             "aria-current": "step"
           } : void 0),
-          children: state === "completed" ? /* @__PURE__ */_jsx(CheckIcon, {
+          ...(kbFocusIndex === index ? control.focusVisibleKnobProps : {
+            outlineWidth: 0
+          }),
+          ...(kind === "upcoming" ? {
+            hoverStyle: {
+              borderColor: componentColors.indicator.hover,
+              backgroundColor: componentColors.indicator.inactive
+            }
+          } : void 0),
+          children: kind === "error" ? /* @__PURE__ */_jsx(WarningIcon, {
+            size: markerIconSize,
+            color: markerFg,
+            weight: "bold"
+          }) : kind === "completed" ? /* @__PURE__ */_jsx(CheckIcon, {
             size: markerIconSize,
-            color: "white",
+            color: markerFg,
             weight: "bold"
           }) : /* @__PURE__ */_jsx(SizableText, {
-            fontSize: markerTextSize,
+            ...knobProps.label,
             fontWeight: "600",
-            color: state === "current" ? onSelected !== null && onSelected !== void 0 ? onSelected : "$color1" : markerFg,
+            color: kind === "current" ? onSelected !== null && onSelected !== void 0 ? onSelected : "$color1" : markerFg,
             children: index + 1
           })
         });
+        var markerTarget = /* @__PURE__ */_jsx(View, {
+          width: MIN_PRESS_TARGET,
+          height: MIN_PRESS_TARGET,
+          minWidth: MIN_PRESS_TARGET,
+          minHeight: MIN_PRESS_TARGET,
+          marginVertical: -pressOutset,
+          marginHorizontal: horizontal ? -pressOutset : 0,
+          alignItems: "center",
+          justifyContent: "center",
+          "data-press-min": MIN_PRESS_TARGET,
+          hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : pressTargetHitSlop(markerPx),
+          children: marker
+        });
         var labelBlock = /* @__PURE__ */_jsxs(YStack, {
           gap: "$0.5",
           flexShrink: 1,
           ...(horizontal ? {
             alignItems: "center",
-            marginTop: gaps.step,
-            maxWidth: 140
+            marginTop: gapToken,
+            maxWidth: 160
           } : {
             flexGrow: 1,
             justifyContent: "center"
           }),
           children: [/* @__PURE__ */_jsx(SizableText, {
             ...knobProps.body,
-            fontSize: labelSize,
-            fontWeight: state === "current" ? "600" : "500",
-            color: state === "upcoming" ? componentColors.text.muted : componentColors.text.primary,
-            // undefined = natural start alignment, so vertical labels mirror in RTL
+            ...knobProps.label,
+            fontWeight: state === "current" ? "600" : knobProps.body.fontWeight,
+            color: kind === "error" ? "$red11" : state === "upcoming" ? componentColors.text.muted : componentColors.text.primary,
             textAlign: horizontal ? "center" : void 0,
+            numberOfLines: 2,
             children: step.label
-          }), step.description != null ? /* @__PURE__ */_jsx(SizableText, {
+          }), helper != null ? /* @__PURE__ */_jsx(SizableText, {
+            ...knobProps.body,
             fontSize: "$1",
-            color: componentColors.text.muted,
+            color: kind === "error" ? "$red11" : componentColors.text.muted,
             textAlign: horizontal ? "center" : void 0,
-            children: step.description
+            numberOfLines: 2,
+            children: helper
           }) : null]
         });
-        var connector = !isLast && horizontal ? /* @__PURE__ */_jsx(View, {
+        var verticalConnector = !isLast ? /* @__PURE__ */_jsx(Connector, {
+          width: connectorThickness,
+          flexGrow: 1,
+          minHeight: 16,
+          backgroundColor: connectorFill,
+          marginTop: 2,
+          transition: knobProps.transition
+        }) : null;
+        var horizontalConnector = !isLast ? /* @__PURE__ */_jsx(Connector, {
           flexGrow: 1,
           height: connectorThickness,
-          backgroundColor: index < current ? componentColors.indicator.completed : componentColors.indicator.track,
-          marginTop: (markerSize - connectorThickness) / 2,
-          marginHorizontal: gaps.step,
-          minWidth: 16
-        }) : !isLast && !horizontal ? /* @__PURE__ */_jsx(View, {
-          width: connectorThickness,
-          height: 20,
-          backgroundColor: index < current ? componentColors.indicator.completed : componentColors.indicator.track,
-          marginInlineStart: (markerSize - connectorThickness) / 2,
-          marginVertical: 2
+          backgroundColor: connectorFill,
+          marginTop: (markerPx - connectorThickness) / 2,
+          marginHorizontal: gapToken,
+          minWidth: 16,
+          transition: knobProps.transition
         }) : null;
         var body = horizontal ? /* @__PURE__ */_jsxs(YStack, {
-          role: "listitem",
           alignItems: "center",
           flexShrink: 0,
-          opacity: step.disabled ? 0.45 : 1,
-          children: [marker, labelBlock]
+          children: [markerTarget, labelBlock]
         }) : /* @__PURE__ */_jsxs(XStack, {
-          role: "listitem",
-          alignItems: "flex-start",
-          gap: gaps.markerLabel,
-          opacity: step.disabled ? 0.45 : 1,
-          children: [marker, labelBlock]
+          alignItems: "stretch",
+          gap: gapToken,
+          minHeight: MIN_PRESS_TARGET,
+          children: [/* @__PURE__ */_jsxs(YStack, {
+            alignItems: "center",
+            width: MIN_PRESS_TARGET,
+            flexShrink: 0,
+            children: [markerTarget, verticalConnector]
+          }), labelBlock]
         });
-        var wrapped = canActivate ? /* @__PURE__ */_jsx(View, {
-          role: "button",
-          tabIndex: 0,
-          cursor: "pointer",
+        var stepName = typeof step.label === "string" ? step.label : index + 1;
+        var goToLabel = withInterp(t("Go to step {{number}}: {{label}}"), {
+          number: index + 1,
+          label: stepName
+        });
+        var wrapped = /* @__PURE__ */_jsx(View, {
+          role: "listitem",
           flexGrow: horizontal ? 0 : void 0,
           flexShrink: horizontal ? 0 : void 0,
-          "aria-label": 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);
+          ...(step.disabled ? disabledState.chromeKnobProps : void 0),
+          children: isFocusable ? /* @__PURE__ */_jsx(StepButton, {
+            render: "button",
+            tabIndex: 0,
+            "aria-label": canActivate ? goToLabel : String(stepName),
+            "aria-disabled": step.disabled || void 0,
+            cursor: step.disabled ? "not-allowed" : "pointer",
+            onPress: function onPress() {
+              if (canActivate) onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(index);
+            },
+            onFocus: function onFocus() {
+              if (wasKeyboardFocus()) setKbFocusIndex(index);
+            },
+            onBlur: function onBlur() {
+              return setKbFocusIndex(function (prev) {
+                return prev === index ? null : prev;
+              });
+            },
+            ...{
+              type: "button",
+              onKeyDown: function onKeyDown(e) {
+                if (!canActivate) return;
+                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__ */_jsx(View, {
-          flexShrink: horizontal ? 0 : void 0,
-          children: body
-        }, (_step_id1 = step.id) !== null && _step_id1 !== void 0 ? _step_id1 : index);
+            },
+            children: body
+          }) : body
+        }, (_step_id = step.id) !== null && _step_id !== void 0 ? _step_id : index);
         return /* @__PURE__ */_jsxs(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}`);
+          children: [wrapped, horizontal ? horizontalConnector : null]
+        }, `row-${(_step_id1 = step.id) !== null && _step_id1 !== void 0 ? _step_id1 : index}`);
       })
     })
   });

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CheckIcon","useReadableTextOn","useResolvedKnobs","useTranslation","SizableText","View","XStack","YStack","styled","componentColors","withInterp","markerSizeMap","$3","$4","$5","markerIconSizeMap","markerTextSizeMap","labelSizeMap","stepGapMap","small","step","markerLabel","medium","large","StepsRoot","name","width","Marker","alignItems","justifyContent","borderWidth","flexShrink","stepState","index","current","forcedCompleted","ProgressSteps","param","steps","onStepChange","orientation","allowJump","compact","props","_markerSizeMap_knobProps_sizeToken","_markerIconSizeMap_knobProps_sizeToken","_markerTextSizeMap_knobProps_sizeToken","_labelSizeMap_knobProps_sizeToken","_stepGapMap_knobProps_space","t","knobProps","component","onSelected","indicator","selected","markerSize","sizeToken","markerIconSize","markerTextSize","labelSize","gaps","space","markerRadius","pointy","connectorThickness","interactive","horizontal","role","children","flexDirection","gap","map","_step_id","_step_id1","_step_id2","state","completed","isLast","length","canActivate","disabled","markerBg","background","markerBorder","track","markerFg","text","muted","marker","height","borderRadius","backgroundColor","borderColor","size","color","weight","fontSize","fontWeight","labelBlock","marginTop","maxWidth","flexGrow","body","primary","textAlign","label","description","connector","marginHorizontal","minWidth","marginInlineStart","marginVertical","opacity","wrapped","tabIndex","cursor","number","onPress","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","onKeyDown","e","key","_e_preventDefault","preventDefault","call","id"],"sources":["../../../src/ProgressSteps/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CheckIcon","WarningIcon","MIN_PRESS_TARGET","ensureKeyboardModalityTracking","pressTargetHitSlop","useReadableTextOn","useResolvedKnobs","wasKeyboardFocus","useState","useTranslation","SizableText","View","XStack","YStack","isWeb","styled","componentColors","withInterp","StepsRoot","name","width","Marker","alignItems","justifyContent","borderWidth","flexShrink","StepButton","backgroundColor","cursor","outlineWidth","focusStyle","outlineStyle","focusVisibleStyle","Connector","stepState","index","current","forcedCompleted","splitNestedControl","nested","px","hitSlop","box","ProgressSteps","param","steps","onStepChange","orientation","allowJump","linear","compact","props","t","knobProps","control","disabledState","component","kbFocusIndex","setKbFocusIndex","onSelected","indicator","selected","onCompleted","completed","onError","markerPx","nestedBox","nestedControl","markerIconSize","Math","max","round","markerRadius","pointy","connectorThickness","pressOutset","ceil","interactive","horizontal","gapToken","gap","role","density","children","flexDirection","map","step","_step_description","_step_id","_step_id1","state","kind","error","isLast","length","canActivate","disabled","isFocusable","markerBg","markerBorder","track","markerFg","text","muted","helper","description","optional","connectorFill","marker","borderRadius","borderColor","transition","focusVisibleKnobProps","hoverStyle","hover","inactive","size","color","weight","label","fontWeight","markerTarget","height","minWidth","minHeight","marginVertical","marginHorizontal","labelBlock","marginTop","maxWidth","flexGrow","body","primary","textAlign","numberOfLines","fontSize","verticalConnector","horizontalConnector","stepName","goToLabel","number","wrapped","chromeKnobProps","render","tabIndex","String","onPress","onFocus","onBlur","prev","type","onKeyDown","e","key","_e_preventDefault","preventDefault","call","id","flexBasis"],"sources":["../../../src/ProgressSteps/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Quote/index.mjs

@@ -1,11 +1,36 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { SizableText, View, YStack, getTokens, isWeb, styled, useTheme } from "tamagui";
+import { SizableText, View, XStack, YStack, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
+import { wrapBareTextChildren } from "../shared/textRidesText.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-const QuoteFrame = styled(YStack, {
+const QuoteFrame = styled(XStack, {
   name: "Quote",
-  width: "100%"
+  width: "100%",
+  alignItems: "stretch"
 });
+const QuoteRail = styled(View, {
+  name: "QuoteRail",
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: "stretch",
+  backgroundColor: componentColors.indicator.track
+});
+const QuoteBody = styled(YStack, {
+  name: "QuoteBody",
+  flexGrow: 1,
+  flexShrink: 1,
+  minWidth: 0
+});
+const QuoteBlock = styled(YStack, {
+  name: "QuoteBlock",
+  margin: 0,
+  padding: 0,
+  backgroundColor: "transparent"
+});
+function quoteRailWidth(borderWidth) {
+  if (borderWidth <= 0) return 0;
+  return Math.max(4, borderWidth * 4);
+}
 function Quote({
   children,
   cite,
@@ -18,47 +43,41 @@ function Quote({
     component: "Quote",
     compact
   });
-  const theme = useTheme();
-  const padToken = compact ? "$3" : knobProps.panelPadding.padding;
-  const pad = typeof padToken === "number" ? padToken : getTokens().space?.[padToken]?.val ?? padToken;
+  const railWidth = quoteRailWidth(knobProps.borderRadius.borderWidth);
+  const citeColor = knobProps.textAccentColor === "$color" ? componentColors.text.muted : knobProps.textAccentColor;
   return /* @__PURE__ */jsxs(QuoteFrame, {
-    render: "blockquote",
+    render: "figure",
     backgroundColor: componentColors.surface.background,
+    overflow: "hidden",
     ...knobProps.containerRadius,
-    paddingVertical: compact ? "$2" : knobProps.gap.gap,
-    marginVertical: compact ? "$2" : "$3",
-    ...(isWeb ? {
-      style: {
-        borderInlineStartWidth: 4,
-        borderInlineStartStyle: "solid",
-        borderInlineStartColor: theme.color8?.val ?? theme.color8?.get() ?? "#999",
-        paddingInlineStart: pad,
-        marginInlineStart: 0,
-        marginInlineEnd: 0
-      }
-    } : {
-      borderStartWidth: 4,
-      borderStartColor: componentColors.indicator.track,
-      paddingStart: padToken
-    }),
+    marginVertical: knobProps.gap.gap,
     ...props,
-    children: [typeof children === "string" ? /* @__PURE__ */jsx(SizableText, {
-      ...knobProps.body,
-      fontSize: knobProps.sizeToken,
-      color: componentColors.text.primary,
-      fontStyle: "italic",
-      lineHeight: knobProps.sizeToken,
-      children
-    }) : children, cite != null ? /* @__PURE__ */jsx(View, {
-      marginTop: compact ? "$1.5" : "$2",
-      children: typeof cite === "string" ? /* @__PURE__ */jsxs(SizableText, {
-        render: "cite",
-        fontSize: compact ? "$1" : "$2",
-        color: componentColors.text.muted,
-        fontStyle: "normal",
-        children: ["\u2014 ", cite]
-      }) : cite
-    }) : null]
+    children: [railWidth > 0 ? /* @__PURE__ */jsx(QuoteRail, {
+      width: railWidth,
+      minWidth: railWidth,
+      "aria-hidden": true
+    }) : null, /* @__PURE__ */jsxs(QuoteBody, {
+      ...knobProps.panelPadding,
+      ...knobProps.gap,
+      children: [/* @__PURE__ */jsx(QuoteBlock, {
+        render: "blockquote",
+        children: wrapBareTextChildren(children, (label, key) => /* @__PURE__ */jsx(SizableText, {
+          ...knobProps.body,
+          color: componentColors.text.primary,
+          fontStyle: "italic",
+          children: label
+        }, key))
+      }), cite != null ? /* @__PURE__ */jsx(View, {
+        render: "figcaption",
+        children: wrapBareTextChildren(cite, (label, key) => /* @__PURE__ */jsxs(SizableText, {
+          render: "cite",
+          ...knobProps.label,
+          color: citeColor,
+          fontStyle: "normal",
+          children: ["\u2014 ", label]
+        }, key))
+      }) : null]
+    })]
   });
 }
 export { Quote };

package/dist/esm/Quote/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","SizableText","View","YStack","getTokens","isWeb","styled","useTheme","componentColors","jsx","jsxs","QuoteFrame","name","width","Quote","children","cite","compact","props","knobProps","component","theme","padToken","panelPadding","padding","pad","space","val","render","backgroundColor","surface","background","containerRadius","paddingVertical","gap","marginVertical","style","borderInlineStartWidth","borderInlineStartStyle","borderInlineStartColor","color8","get","paddingInlineStart","marginInlineStart","marginInlineEnd","borderStartWidth","borderStartColor","indicator","track","paddingStart","body","fontSize","sizeToken","color","text","primary","fontStyle","lineHeight","marginTop","muted"],"sources":["../../../src/Quote/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAGjC,SAASC,WAAA,EAAaC,IAAA,EAAMC,MAAA,EAAQC,SAAA,EAAWC,KAAA,EAAOC,MAAA,EAAQC,QAAA,QAAgB;AAC9E,SAASC,eAAA,QAAuB;AA+DxB,SAAAC,GAAA,EAiBIC,IAAA,QAjBJ;AAhDR,MAAMC,UAAA,GAAaL,MAAA,CAAOH,MAAA,EAAQ;EAChCS,IAAA,EAAM;EACNC,KAAA,EAAO;AACT,CAAC;AAQM,SAASC,MAAM;EAAEC,QAAA;EAAUC,IAAA;EAAMC,OAAA,GAAU;EAAO,GAAGC;AAAM,GAAe;EAC/E,MAAM;IAAEC;EAAU,IAAInB,gBAAA,CAAiB;IAAEoB,SAAA,EAAW;IAASH;EAAQ,CAAC;EACtE,MAAMI,KAAA,GAAQd,QAAA,CAAS;EACvB,MAAMe,QAAA,GAAYL,OAAA,GAAU,OAAOE,SAAA,CAAUI,YAAA,CAAaC,OAAA;EAC1D,MAAMC,GAAA,GACJ,OAAOH,QAAA,KAAa,WAChBA,QAAA,GACElB,SAAA,CAAU,EAAEsB,KAAA,GAAgBJ,QAAQ,GAAGK,GAAA,IAAOL,QAAA;EAEtD,OACE,eAAAZ,IAAA,CAACC,UAAA;IACCiB,MAAA,EAAO;IACPC,eAAA,EAAiBrB,eAAA,CAAgBsB,OAAA,CAAQC,UAAA;IAGxC,GAAGZ,SAAA,CAAUa,eAAA;IACdC,eAAA,EAAiBhB,OAAA,GAAU,OAAOE,SAAA,CAAUe,GAAA,CAAIA,GAAA;IAChDC,cAAA,EAAgBlB,OAAA,GAAU,OAAO;IAChC,IAAIZ,KAAA,GACD;MACE+B,KAAA,EAAO;QACLC,sBAAA,EAAwB;QACxBC,sBAAA,EAAwB;QACxBC,sBAAA,EAAwBlB,KAAA,CAAMmB,MAAA,EAAQb,GAAA,IAAON,KAAA,CAAMmB,MAAA,EAAQC,GAAA,CAAI,KAAK;QACpEC,kBAAA,EAAoBjB,GAAA;QACpBkB,iBAAA,EAAmB;QACnBC,eAAA,EAAiB;MACnB;IACF,IACA;MACEC,gBAAA,EAAkB;MAClBC,gBAAA,EAAkBtC,eAAA,CAAgBuC,SAAA,CAAUC,KAAA;MAC5CC,YAAA,EAAc3B;IAChB;IACH,GAAGJ,KAAA;IAEHH,QAAA,UAAOA,QAAA,KAAa,WACnB,eAAAN,GAAA,CAACR,WAAA;MACE,GAAGkB,SAAA,CAAU+B,IAAA;MAGdC,QAAA,EAAUhC,SAAA,CAAUiC,SAAA;MACpBC,KAAA,EAAO7C,eAAA,CAAgB8C,IAAA,CAAKC,OAAA;MAC5BC,SAAA,EAAU;MACVC,UAAA,EAAYtC,SAAA,CAAUiC,SAAA;MAErBrC;IAAA,CACH,IAEAA,QAAA,EAEDC,IAAA,IAAQ,OACP,eAAAP,GAAA,CAACP,IAAA;MAAKwD,SAAA,EAAWzC,OAAA,GAAU,SAAS;MACjCF,QAAA,SAAOC,IAAA,KAAS,WACf,eAAAN,IAAA,CAACT,WAAA;QACC2B,MAAA,EAAO;QACPuB,QAAA,EAAUlC,OAAA,GAAU,OAAO;QAC3BoC,KAAA,EAAO7C,eAAA,CAAgB8C,IAAA,CAAKK,KAAA;QAC5BH,SAAA,EAAU;QACXzC,QAAA,cACIC,IAAA;MAAA,CACL,IAEAA;IAAA,CAEJ,IACE;EAAA,CACN;AAEJ","ignoreList":[]}
+{"version":3,"names":["useResolvedKnobs","SizableText","View","XStack","YStack","styled","componentColors","wrapBareTextChildren","jsx","jsxs","QuoteFrame","name","width","alignItems","QuoteRail","flexGrow","flexShrink","alignSelf","backgroundColor","indicator","track","QuoteBody","minWidth","QuoteBlock","margin","padding","quoteRailWidth","borderWidth","Math","max","Quote","children","cite","compact","props","knobProps","component","railWidth","borderRadius","citeColor","textAccentColor","text","muted","render","surface","background","overflow","containerRadius","marginVertical","gap","panelPadding","label","key","body","color","primary","fontStyle"],"sources":["../../../src/Quote/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAGjC,SAASC,WAAA,EAAaC,IAAA,EAAMC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AAC1D,SAASC,eAAA,QAAuB;AAChC,SAASC,oBAAA,QAA4B;AA2Ed,SAAAC,GAAA,EAqBTC,IAAA,QArBS;AA5DvB,MAAMC,UAAA,GAAaL,MAAA,CAAOF,MAAA,EAAQ;EAChCQ,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,UAAA,EAAY;AACd,CAAC;AAED,MAAMC,SAAA,GAAYT,MAAA,CAAOH,IAAA,EAAM;EAC7BS,IAAA,EAAM;EACNI,QAAA,EAAU;EACVC,UAAA,EAAY;EACZC,SAAA,EAAW;EACXC,eAAA,EAAiBZ,eAAA,CAAgBa,SAAA,CAAUC;AAC7C,CAAC;AAED,MAAMC,SAAA,GAAYhB,MAAA,CAAOD,MAAA,EAAQ;EAC/BO,IAAA,EAAM;EACNI,QAAA,EAAU;EACVC,UAAA,EAAY;EACZM,QAAA,EAAU;AACZ,CAAC;AAED,MAAMC,UAAA,GAAalB,MAAA,CAAOD,MAAA,EAAQ;EAChCO,IAAA,EAAM;EACNa,MAAA,EAAQ;EACRC,OAAA,EAAS;EACTP,eAAA,EAAiB;AACnB,CAAC;AAKD,SAASQ,eAAeC,WAAA,EAA6B;EACnD,IAAIA,WAAA,IAAe,GAAG,OAAO;EAC7B,OAAOC,IAAA,CAAKC,GAAA,CAAI,GAAGF,WAAA,GAAc,CAAC;AACpC;AASO,SAASG,MAAM;EAAEC,QAAA;EAAUC,IAAA;EAAMC,OAAA,GAAU;EAAO,GAAGC;AAAM,GAAe;EAC/E,MAAM;IAAEC;EAAU,IAAInC,gBAAA,CAAiB;IAAEoC,SAAA,EAAW;IAASH;EAAQ,CAAC;EACtE,MAAMI,SAAA,GAAYX,cAAA,CAAeS,SAAA,CAAUG,YAAA,CAAaX,WAAW;EACnE,MAAMY,SAAA,GACJJ,SAAA,CAAUK,eAAA,KAAoB,WAAWlC,eAAA,CAAgBmC,IAAA,CAAKC,KAAA,GAAQP,SAAA,CAAUK,eAAA;EAElF,OACE,eAAA/B,IAAA,CAACC,UAAA;IACCiC,MAAA,EAAO;IACPzB,eAAA,EAAiBZ,eAAA,CAAgBsC,OAAA,CAAQC,UAAA;IACzCC,QAAA,EAAS;IAGR,GAAGX,SAAA,CAAUY,eAAA;IACdC,cAAA,EAAgBb,SAAA,CAAUc,GAAA,CAAIA,GAAA;IAC7B,GAAGf,KAAA;IAEHH,QAAA,GAAAM,SAAA,GAAY,IAAI,eAAA7B,GAAA,CAACM,SAAA;MAAUF,KAAA,EAAOyB,SAAA;MAAWf,QAAA,EAAUe,SAAA;MAAW,eAAW;IAAA,CAAC,IAAK,MACpF,eAAA5B,IAAA,CAACY,SAAA;MAAW,GAAGc,SAAA,CAAUe,YAAA;MAAe,GAAGf,SAAA,CAAUc,GAAA;MACnDlB,QAAA,kBAAAvB,GAAA,CAACe,UAAA;QAAWoB,MAAA,EAAO;QAKhBZ,QAAA,EAAAxB,oBAAA,CAAqBwB,QAAA,EAAU,CAACoB,KAAA,EAAOC,GAAA,KACtC,eAAA5C,GAAA,CAACP,WAAA;UAEE,GAAGkC,SAAA,CAAUkB,IAAA;UACdC,KAAA,EAAOhD,eAAA,CAAgBmC,IAAA,CAAKc,OAAA;UAC5BC,SAAA,EAAU;UAETzB,QAAA,EAAAoB;QAAA,GALIC,GAMP,CACD;MAAA,CACH,GACCpB,IAAA,IAAQ,OACP,eAAAxB,GAAA,CAACN,IAAA;QAAKyC,MAAA,EAAO;QACVZ,QAAA,EAAAxB,oBAAA,CAAqByB,IAAA,EAAM,CAACmB,KAAA,EAAOC,GAAA,KAClC,eAAA3C,IAAA,CAACR,WAAA;UAEC0C,MAAA,EAAO;UACN,GAAGR,SAAA,CAAUgB,KAAA;UACdG,KAAA,EAAOf,SAAA;UACPiB,SAAA,EAAU;UACXzB,QAAA,cACIoB,KAAA;QAAA,GANEC,GAOP,CACD;MAAA,CACH,IACE;IAAA,CACN;EAAA,CACF;AAEJ","ignoreList":[]}