@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/cjs/layouts/sidebar.native.js

@@ -39,40 +39,81 @@ function Sidebar(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var onAccent = (0, import_theme.useReadableTextOn)("$accentBackground");
+  var rowPad = knobProps.panelPadding.padding;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     width,
-    borderRightWidth: 1,
     borderColor: "$borderColor",
+    // Logical end edge so the divider mirrors in RTL; tamagui
+    // borderEndWidth does not compile to working CSS on web (SB-M-1215).
+    // Hairline: panel edge is a divider, not a control border (Axiom 15).
+    ...(import_tamagui.isWeb ? {
+      borderInlineEndWidth: import_theme.hairlineWidth,
+      borderInlineEndStyle: "solid",
+      className: "mp-hairline-ie"
+    } : {
+      borderEndWidth: import_theme.hairlineWidth
+    }),
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
         ...knobProps.panelPadding,
+        paddingHorizontal: 0,
         ...knobProps.gapLg,
         children: sections.map(function (section, sectionIdx) {
+          var _section_title;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
             ...knobProps.gap,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            children: [section.title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+              size: knobProps.sizeToken,
               fontSize: "$2",
               fontWeight: "600",
               textTransform: "uppercase",
               color: import_componentColors.componentColors.text.muted,
-              paddingHorizontal: "$2",
-              size: knobProps.sizeToken,
+              // Align with row text (LC-02): the inset rides as MARGIN so
+              // the caption's box starts at the shared row text edge —
+              // padding-based insets left the box at the panel edge, which
+              // is the exact anti-pattern the rule's origin fixed. Drop the
+              // size-derived control height — a section caption should not
+              // consume a 44px row.
+              paddingHorizontal: 0,
+              marginHorizontal: rowPad,
+              height: "auto",
+              lineHeight: "$1",
               children: section.title
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Group, {
+            }) : null,
+            /* Section group seam follows the radius knob (radius channel
+            only): tamagui Group's built-in $4 default held a 9px arc
+            at borderRadius:none (UX-P06 "Sidebar GroupFrames br=9"). */
+            /* @__PURE__ */
+            (0, import_jsx_runtime.jsx)(import_tamagui.Group, {
+              borderRadius: knobProps.borderRadius.borderRadius,
               children: section.items.map(function (item, itemIdx) {
                 return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Group.Item, {
-                  children: [itemIdx > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+                  children: [itemIdx > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+                    ...import_theme.hairline.line
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
                     title: item.label,
                     subTitle: item.subTitle,
                     icon: item.icon,
                     iconAfter: item.count !== void 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                      color: import_componentColors.componentColors.text.muted,
+                      color: item.active && onAccent ? onAccent : import_componentColors.componentColors.text.muted,
                       fontSize: "$2",
                       children: ["(", item.count, ")"]
                     }) : void 0,
                     size: knobProps.sizeToken,
+                    // SP-EDGE: the row owns its inset (space knob), on top
+                    // of a full-panel-width frame.
+                    paddingHorizontal: rowPad,
+                    // Item rows are R-SCALE (spec Sidebar): the hover /
+                    // active row surface rounds with the radius knob.
+                    borderRadius: knobProps.borderRadius.borderRadius,
                     theme: item.active ? "active" : void 0,
                     backgroundColor: item.active ? "$accentBackground" : "transparent",
+                    // Label rides the accent fill: luminance-computed fg
+                    // (ListItem shares `color` with its title via context).
+                    ...(item.active && onAccent ? {
+                      color: onAccent
+                    } : void 0),
                     hoverStyle: {
                       backgroundColor: import_componentColors.componentColors.surface.background
                     },
@@ -80,12 +121,31 @@ function Sidebar(param) {
                       backgroundColor: import_componentColors.componentColors.interactive.background
                     },
                     cursor: item.onPress ? "pointer" : "default",
-                    onPress: item.onPress
+                    onPress: item.onPress,
+                    ...(item.onPress ? {
+                      role: "button",
+                      tabIndex: 0,
+                      focusVisibleStyle: {
+                        outlineColor: "$outlineColor",
+                        outlineWidth: 2,
+                        outlineStyle: "solid",
+                        outlineOffset: -2
+                      },
+                      onKeyDown: function onKeyDown(e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                          var _item_onPress;
+                          e.preventDefault();
+                          (_item_onPress = item.onPress) === null || _item_onPress === void 0 ? void 0 : _item_onPress.call(item);
+                        }
+                      }
+                    } : void 0)
                   })]
                 }, item.label);
               })
-            }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-          }, section.title);
+            }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+              ...import_theme.hairline.line
+            })]
+          }, (_section_title = section.title) !== null && _section_title !== void 0 ? _section_title : sectionIdx);
         })
       })
     })

package/dist/cjs/layouts/sidebar.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","sidebar_exports","__export","Sidebar","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","param","sections","width","knobProps","useResolvedKnobs","jsx","YStack","borderRightWidth","borderColor","children","ScrollView","panelPadding","gapLg","map","section","sectionIdx","jsxs","gap","Label","fontSize","fontWeight","textTransform","color","componentColors","text","muted","paddingHorizontal","size","sizeToken","title","Group","items","item","itemIdx","Item","Separator","ListItem","label","subTitle","icon","iconAfter","count","Text"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,eAAA;AAAAC,QAAA,CAAAD,eAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAiC,CAAAK,eAAA;AAEjC,IAAAK,kBAA4E,GAAAC,OAAA;AAC5E,IAAAC,YAAA,GAAAD,OAAA,2BAAgC;AA+BlB,IAAAE,cAAA,GAAAF,OAAA;AARP,IAAAG,sBAAmB,GAAUH,OAAA,CAAQ,8BAAqB;AAC/D,SAAMJ,OAAEA,CAAAQ,KAAU;EAClB;IAAAC,QACE;IAAAC,KAAA;EAAA,IAAAF,KAAA;EAKU;IAAAG;EAAA,QAAAN,YAAA,CAAAO,gBAAA;EAAA,OAAC,mBAAAT,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAQ,MAAA;IAAAJ,KAAA;IAAAK,gBACU;IAAAC,WACT,gBAAW;IAAAC,QACX,iBAAc,IAAAd,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAY,UAAA;MAAAD,QACd,EAAO,mBAAAd,kBAAgB,CAAAU,GAAA,EAAKP,cAAA,CAAAQ,MAAA;QAC5B,GAAAH,SAAA,CAAAQ,YAAkB;QAClB,GAAAR,SAAM,CAAAS,KAAU;QAEfH,QAAA,EAAAR,QAAQ,CAAAY,GAAA,WAAAC,OAAA,EAAAC,UAAA;UAAA,0BAAApB,kBAAA,CAAAqB,IAAA,EAAAlB,cAAA,CAAAQ,MAAA;YACX,GAAAH,SAAA,CAAAc,GAAA;YAEAR,QAAA,GAGO,eAAe,IAAAd,kBAAA,CAAAU,GAAA,EAAAP,cAAC,CAAAoB,KAAA;cACjBC,QAAA;cAACC,UAAA;cAAAC,aAAA;cACCC,KAAO,EAAKvB,sBAAA,CAAAwB,eAAA,CAAAC,IAAA,CAAAC,KAAA;cACZC,iBAAe;cACTC,IAAA,EAAKxB,SAAA,CAAAyB,SAAA;cACXnB,QACE,EAAKK,OAAA,CAAAe;YACoD,IACnD,eAAK,IAAAlC,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAgC,KAAA;cAAMrB,QAAA,EAAAK,OAAA,CAAAiB,KAAA,CAAAlB,GAAA,WAAAmB,IAAA,EAAAC,OAAA;gBAEb,0BAAAtC,kBAAA,CAAAqB,IAAA,EAAAlB,cAAA,CAAAgC,KAAA,CAAAI,IAAA;kBAEAzB,QAAU,GACJwB,OAAA,GAAS,oBAAW,IAAAtC,kBAAA,CAAAU,GAAA,EAAAP,cAAA,CAAAqC,SAAA,OAChC,eAAsB,IAASxC,kBAAA,CAAAU,GAAsB,EAAAP,cAAA,CAAAsC,QAAA;oBACvCP,KAAA,EAAAG,IAAA,CAAAK,KAAiB;oBACjBC,QAAA,EAAAN,IAAA,CAAAM,QAAiB;oBAClBC,IAAA,EAAAP,IAAU,CAAAO,IAAA;oBACTC,SAAA,EAAAR,IAAA,CAAAS,KAAA,iCAAA9C,kBAAA,CAAAqB,IAAA,EAAAlB,cAAA,CAAA4C,IAAA;sBAAApB,KAAA,EAAAvB,sBAAA,CAAAwB,eAAA,CAAAC,IAAA,CAAAC,KAAA;sBAChBN,QAAA;sBAGNV,QAAA,GAEuB,KAI/BuB,IACF,CAAAS,KAAA,EAEJ","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","sidebar_exports","__export","Sidebar","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","param","sections","width","knobProps","useResolvedKnobs","onAccent","useReadableTextOn","rowPad","panelPadding","padding","jsx","YStack","borderColor","isWeb","borderInlineEndWidth","hairlineWidth","borderInlineEndStyle","className","borderEndWidth","children","ScrollView","paddingHorizontal","gapLg","map","section","sectionIdx","_section_title","jsxs","gap","title","Label","size","sizeToken","fontSize","fontWeight","textTransform","color","componentColors","text","muted","marginHorizontal","height","lineHeight","Group","borderRadius","items","item","itemIdx","Item","Separator","hairline","line","ListItem","label","subTitle","icon","iconAfter","count","Text","active","theme","backgroundColor"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,eAAA;AAAAC,QAAA,CAAAD,eAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAKO,CAAAK,eAAA;AAEP,IAAAK,kBAAmF,GAAAC,OAAA;AACnF,IAAAC,YAAA,GAAAD,OAAA,2BAAgC;AA0DhB,IAAAE,cAAA,GAAAF,OAAA;AA/BT,IAAAG,sBAAmB,GAAUH,OAAA,CAAQ,8BAAqB;AAC/D,SAAMJ,OAAEA,CAAAQ,KAAU;EAKlB;IAAMC,QAAA;IAAAC,KAAW;EAAA,IAAAF,KAAA;EAIjB;IAAMG;EAAS,QAAAN,YAAU,CAAAO,gBAAa;EACtC,IAAAC,QACE,OAAAR,YAAA,CAAAS,iBAAA;EAAA,IAACC,MAAA,GAAAJ,SAAA,CAAAK,YAAA,CAAAC,OAAA;EAAA,0BAAAd,kBAAA,CAAAe,GAAA,EAAAZ,cAAA,CAAAa,MAAA;IAAAT,KACC;IAAAU,WACA,gBAAY;IAAA;IAKR;IACwB;IACA,IAAAd,cACX,CAAAe,KAAA;MACbC,oBACE,EAAgBjB,YAAA,CAAAkB,aAAA;MAEtBC,oBAAA;MAISC,SAAA,EAAQ;IACP;MAACC,cAAA,EAAArB,YAAA,CAAAkB;IAAA;IACiBI,QAChB,iBAAS,IAAAxB,kBAAA,CAAAe,GAAA,EAAAZ,cAAA,CAAAsB,UAAA;MAAAD,QACT,iBAAW,IAAAxB,kBAAA,CAAAe,GAAA,EAAAZ,cAAA,CAAAa,MAAA;QAAA,GAAAR,SACX,CAAAK,YAAc;QAAAa,iBACP;QAAqB,GAAAlB,SAO5B,CAAAmB,KAAA;QAAmBH,QACnB,EAAAlB,QAAA,CAAAsB,GAAkB,WAAAC,OAAA,EAAAC,UAAA;UAAA,IAClBC,cAAO;UAAA,OACP,eAAW,IAAA/B,kBAAA,CAAAgC,IAAA,EAAA7B,cAAA,CAAAa,MAAA;YAEV,GAAAR,SAAA,CAAAyB,GAAA;YAAQT,QAAA,GAETK,OAAA,CAAAK,KAAA,sBAAAlC,kBAAA,CAAAe,GAAA,EAAAZ,cAAA,CAAAgC,KAAA;cAKJC,IAAA,EAAA5B,SAAA,CAAA6B,SAAA;cAGOC,QAAU,EAAK;cAChBC,UAAA;cAACC,aAAA;cAAAC,KAAA,EAAArC,sBAAA,CAAAsC,eAAA,CAAAC,IAAA,CAAAC,KAAA;cACC;cACA;cACA;cACA;cAEK;cAAA;cAAAlB,iBACa;cAAqDmB,gBACxD,EAAAjC,MAAA;cAAAkC,MACV;cAAAC,UAAA;cAAAvB,QACG,EAAKK,OAAA,CAAAK;YAAA,SAAM;YAAA;AAAA;AAAA;YAInB;YAAgB,IAAAlC,kBAAA,CAAAe,GAAA,EAAAZ,cAAA,CAAA6C,KAAA;cAGhBC,YAAA,EAAAzC,SAAmB,CAAAyC,YAAA,CAAAA,YAAA;cAGnBzB,QAAA,EAAAK,OAAc,CAAAqB,KAAU,CAAAtB,GAAA,WAAauB,IAAA,EAAAC,OAAA;gBACrC,OAAO,eAAc,IAAApD,kBAAW,CAAAgC,IAAA,EAAA7B,cAAA,CAAA6C,KAAA,CAAAK,IAAA;kBAChC7B,QAAA,GAGU4B,OAAA,GAAU,oBAAoB,IAAApD,kBAAa,CAAAe,GAAA,EAAAZ,cAAA,CAAAmD,SAAA;oBACrD,GAAYpD,YAAE,CAAAqD,QAAiB,CAAAC;kBAC/B,IACQ,eAAe,IAAAxD,kBAAY,CAAAe,GAAA,EAAAZ,cAAA,CAAAsD,QAAA;oBAC1BvB,KAAK,EAAAiB,IAAA,CAAAO,KAAA;oBACJC,QACN,EAAAR,IAAA,CAAAQ,QAAA;oBACQC,IAAA,EAAAT,IAAA,CAAAS,IAAA;oBACNC,SAAU,EAAAV,IAAA,CAAAW,KAAA,iCAAA9D,kBAAA,CAAAgC,IAAA,EAAA7B,cAAA,CAAA4D,IAAA;sBACVtB,KAAA,EAAAU,IAAmB,CAAAa,MAAA,IAAAtD,QAAA,GAAAA,QAAA,GAAAN,sBAAA,CAAAsC,eAAA,CAAAC,IAAA,CAAAC,KAAA;sBACjBN,QAAc;sBACdd,QAAc,GACd,KACA2B,IAAA,CAAeW,KAAA,EACjB;oBAEQ,UAAQ;oBACV1B,IAAA,EAAA5B,SAAe,CAAA6B,SAAA;oBACjB;oBACF;oBACFX,iBAAA,EAAAd,MAAA;oBAEF;oBAAA;oBACNqC,YAAA,EAAAzC,SAAA,CAAAyC,YAAA,CAAAA,YAAA;oBAEHgB,KACH,EAAAd,IAAA,CAAAa,MAAA;oBAEcE,eAAkB,EAAAf,IAAK,CAAAa,MAAA,sCAAC;oBAnFnB;oBAuF3B;oBACF,IAAAb,IAAA,CAAAa,MAAA,IAAAtD,QAAA;sBAEJ+B,KAAA,EAAA/B","ignoreList":[]}

package/dist/cjs/layouts/tags.cjs

@@ -39,8 +39,11 @@ module.exports = __toCommonJS(tags_exports);
 var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
+var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
+var import_Chip = require("../Chip/index.cjs");
 var import_componentColors = require("../componentColors.cjs");
+var import_t = require("../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Tags({
   tags,
@@ -56,12 +59,16 @@ function Tags({
   enableAdd = true,
   enableRemove = true,
   compact = false,
-  variant = "filled",
+  variant = "subtle",
   theme: chipTheme,
   labels = {},
-  placeholder = "Add tag...",
+  placeholder: placeholderProp,
   ...stackProps
 }) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const placeholder = placeholderProp ?? t("Add tag...");
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -70,14 +77,16 @@ function Tags({
   const [inputValue, setInputValue] = (0, import_react2.useState)("");
   const [isPopoverOpen, setIsPopoverOpen] = (0, import_react2.useState)(false);
   const {
-    addTag: addTagLabel = "Add Tag",
-    noTags: noTagsLabel = "No tags",
-    clickToAdd: clickToAddLabel = "Click + to add tags",
-    suggestions: suggestionsLabel = "Suggestions",
-    noAvailableTags: noAvailableTagsLabel = "No available tags",
-    createTag: createTagLabel = value => `Create "${value}"`
+    addTag: addTagLabel = t("Add Tag"),
+    noTags: noTagsLabel = t("No tags"),
+    clickToAdd: clickToAddLabel = t("Click + to add tags"),
+    suggestions: suggestionsLabel = t("Suggestions"),
+    noAvailableTags: noAvailableTagsLabel = t("No available tags"),
+    createTag: createTagLabel = value => (0, import_t.withInterp)(t('Create "{{value}}"'), {
+      value
+    })
   } = labels;
-  const appliedTagNames = (0, import_react2.useMemo)(() => new Set(tags.map(t => t.label.toLowerCase())), [tags]);
+  const appliedTagNames = (0, import_react2.useMemo)(() => new Set(tags.map(tag => tag.label.toLowerCase())), [tags]);
   const availableSuggestions = (0, import_react2.useMemo)(() => {
     const searchTerm = inputValue.toLowerCase().trim();
     return suggestions.filter(tag => {
@@ -138,79 +147,33 @@ function Tags({
       children: noTagsLabel
     })]
   });
-  const getVariantStyles = v => {
-    switch (v) {
-      case "outlined":
-        return {
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.hover
-          }
-        };
-      case "ghost":
-        return {
-          backgroundColor: "transparent",
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.hover
-          }
-        };
-      case "filled":
-        return {
-          ...knobProps.surface,
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.active
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.surface.border
-          }
-        };
-    }
-  };
+  const chipVariant = variant === "filled" ? "solid" : variant === "outlined" ? "outline" : variant === "ghost" ? "subtle" : variant;
+  const chipColor = ["gray", "red", "green", "blue", "yellow", "orange", "purple"].includes(chipTheme) ? chipTheme : "gray";
   const renderTagItem = tag => {
     const actions = {
       onRemove: () => onRemove?.(tag)
     };
-    const variantStyles = getVariantStyles(variant);
-    const defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+    const chip = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {
       size: chipSize,
-      theme: chipTheme,
-      ...variantStyles,
-      ...knobProps.borderRadius,
-      borderRadius: "$10",
-      ...{
-        animation: "quick"
-      },
-      onPress: () => onTagClick?.(tag),
-      cursor: onTagClick ? "pointer" : "default",
-      iconAfter: enableRemove && !disabled && onRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        focusable: true,
-        hitSlop: 8,
-        padding: "$1",
-        borderRadius: "$10",
-        hoverStyle: {
-          backgroundColor: import_componentColors.componentColors.surface.border
-        },
-        cursor: "pointer",
-        onPress: e => {
-          e.stopPropagation();
-          actions.onRemove();
-        },
-        "aria-label": `Remove ${tag.label}`,
-        accessibilityRole: "button",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-          size: compact ? 12 : 14
-        })
-      }) : void 0,
+      variant: chipVariant,
+      color: chipColor,
+      disabled,
+      onDismiss: enableRemove && !disabled && onRemove ? actions.onRemove : void 0,
       children: tag.label
-    }, tag.id);
+    });
+    const defaultContent = onTagClick ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      cursor: "pointer",
+      onPress: () => onTagClick(tag),
+      role: "button",
+      "aria-label": tag.label,
+      hoverStyle: {
+        opacity: 0.85
+      },
+      pressStyle: {
+        opacity: 0.7
+      },
+      children: chip
+    }, tag.id) : chip;
     if (renderTag) {
       return renderTag(tag, defaultContent, actions);
     }
@@ -241,7 +204,7 @@ function Tags({
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$1",
         color: import_componentColors.componentColors.text.muted,
-        paddingLeft: "$1",
+        paddingInlineStart: "$1",
         children: suggestionsLabel
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
         maxHeight: 150,
@@ -294,19 +257,54 @@ function Tags({
         open: isPopoverOpen,
         onOpenChange: setIsPopoverOpen,
         placement: "bottom-start",
+        offset: 4,
+        stayInFrame: true,
+        allowFlip: true,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
           asChild: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-            size: chipSize,
-            variant: "outlined",
-            ...{
-              animation: "quick"
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            role: "button",
+            "aria-label": addTagLabel,
+            tabIndex: 0,
+            cursor: "pointer",
+            alignItems: "center",
+            justifyContent: "center",
+            ...(0, import_theme.pressTargetStyle)(),
+            minWidth: void 0,
+            paddingHorizontal: 3,
+            marginHorizontal: -3,
+            focusVisibleStyle: {
+              outlineColor: "$outlineColor",
+              outlineWidth: 2,
+              outlineStyle: "solid"
+            },
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsPopoverOpen(true);
+              }
             },
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-              size: compact ? 14 : 16
-            }),
-            circular: compact,
-            children: !compact && addTagLabel
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Chip.ChipFrame, {
+              size: chipSize,
+              variant: "outline",
+              backgroundColor: "transparent",
+              ...knobProps.borderRadius,
+              borderColor: import_componentColors.componentColors.interactive.border,
+              gap: compact ? 0 : "$1",
+              hoverStyle: {
+                backgroundColor: import_componentColors.componentColors.interactive.hover
+              },
+              pressStyle: {
+                backgroundColor: import_componentColors.componentColors.interactive.active
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                size: (0, import_Chip.chipIconSize)(chipSize)
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.ChipText, {
+                size: chipSize,
+                color: import_componentColors.componentColors.text.secondary,
+                children: compact ? "\u200B" : addTagLabel
+              })]
+            })
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
           borderWidth: 1,
@@ -329,7 +327,7 @@ function Tags({
       }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         color: import_componentColors.componentColors.text.muted,
         fontSize: compact ? "$1" : "$2",
-        marginLeft: "$1",
+        marginInlineStart: "$1",
         children: clickToAddLabel
       })]
     })]

package/dist/cjs/layouts/tags.native.js

@@ -42,8 +42,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
+var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
+var import_Chip = require("../Chip/index.native.js");
 var import_componentColors = require("../componentColors.native.js");
+var import_t = require("../shared/t.native.js");
 function Tags(param) {
   var {
     tags,
@@ -59,12 +62,16 @@ function Tags(param) {
     enableAdd = true,
     enableRemove = true,
     compact = false,
-    variant = "filled",
+    variant = "subtle",
     theme: chipTheme,
     labels = {},
-    placeholder = "Add tag...",
+    placeholder: placeholderProp,
     ...stackProps
   } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : t("Add tag...");
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -73,18 +80,20 @@ function Tags(param) {
   var [inputValue, setInputValue] = (0, import_react2.useState)("");
   var [isPopoverOpen, setIsPopoverOpen] = (0, import_react2.useState)(false);
   var {
-    addTag: addTagLabel = "Add Tag",
-    noTags: noTagsLabel = "No tags",
-    clickToAdd: clickToAddLabel = "Click + to add tags",
-    suggestions: suggestionsLabel = "Suggestions",
-    noAvailableTags: noAvailableTagsLabel = "No available tags",
+    addTag: addTagLabel = t("Add Tag"),
+    noTags: noTagsLabel = t("No tags"),
+    clickToAdd: clickToAddLabel = t("Click + to add tags"),
+    suggestions: suggestionsLabel = t("Suggestions"),
+    noAvailableTags: noAvailableTagsLabel = t("No available tags"),
     createTag: createTagLabel = function (value) {
-      return `Create "${value}"`;
+      return (0, import_t.withInterp)(t('Create "{{value}}"'), {
+        value
+      });
     }
   } = labels;
   var appliedTagNames = (0, import_react2.useMemo)(function () {
-    return new Set(tags.map(function (t) {
-      return t.label.toLowerCase();
+    return new Set(tags.map(function (tag) {
+      return tag.label.toLowerCase();
     }));
   }, [tags]);
   var availableSuggestions = (0, import_react2.useMemo)(function () {
@@ -145,83 +154,39 @@ function Tags(param) {
       children: noTagsLabel
     })]
   });
-  var getVariantStyles = function getVariantStyles2(v) {
-    switch (v) {
-      case "outlined":
-        return {
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.hover
-          }
-        };
-      case "ghost":
-        return {
-          backgroundColor: "transparent",
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.hover
-          }
-        };
-      case "filled":
-        return {
-          ...knobProps.surface,
-          hoverStyle: {
-            backgroundColor: import_componentColors.componentColors.interactive.active
-          },
-          pressStyle: {
-            backgroundColor: import_componentColors.componentColors.surface.border
-          }
-        };
-    }
-  };
+  var chipVariant = variant === "filled" ? "solid" : variant === "outlined" ? "outline" : variant === "ghost" ? "subtle" : variant;
+  var chipColor = ["gray", "red", "green", "blue", "yellow", "orange", "purple"].includes(chipTheme) ? chipTheme : "gray";
   var renderTagItem = function renderTagItem2(tag) {
     var actions = {
       onRemove: function onRemove1() {
         return onRemove === null || onRemove === void 0 ? void 0 : onRemove(tag);
       }
     };
-    var variantStyles = getVariantStyles(variant);
-    var defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+    var chip = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {
       size: chipSize,
-      theme: chipTheme,
-      ...variantStyles,
-      ...knobProps.borderRadius,
-      borderRadius: "$10",
-      ...{
-        animation: "quick"
-      },
+      variant: chipVariant,
+      color: chipColor,
+      disabled,
+      onDismiss: enableRemove && !disabled && onRemove ? actions.onRemove : void 0,
+      children: tag.label
+    });
+    var defaultContent = onTagClick ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      cursor: "pointer",
       onPress: function onPress() {
-        return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(tag);
+        return onTagClick(tag);
       },
-      cursor: onTagClick ? "pointer" : "default",
-      iconAfter: enableRemove && !disabled && onRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        focusable: true,
-        hitSlop: 8,
-        padding: "$1",
-        borderRadius: "$10",
-        hoverStyle: {
-          backgroundColor: import_componentColors.componentColors.surface.border
-        },
-        cursor: "pointer",
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onRemove();
-        },
-        "aria-label": `Remove ${tag.label}`,
-        accessibilityRole: "button",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-          size: compact ? 12 : 14
-        })
-      }) : void 0,
-      children: tag.label
-    }, tag.id);
+      // role, not accessibilityRole: the RN-only prop leaks onto the DOM
+      // <div> on web; RN maps role="button" to accessibilityRole natively.
+      role: "button",
+      "aria-label": tag.label,
+      hoverStyle: {
+        opacity: 0.85
+      },
+      pressStyle: {
+        opacity: 0.7
+      },
+      children: chip
+    }, tag.id) : chip;
     if (renderTag) {
       return renderTag(tag, defaultContent, actions);
     }
@@ -255,7 +220,7 @@ function Tags(param) {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontSize: "$1",
           color: import_componentColors.componentColors.text.muted,
-          paddingLeft: "$1",
+          paddingInlineStart: "$1",
           children: suggestionsLabel
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
           maxHeight: 150,
@@ -315,20 +280,67 @@ function Tags(param) {
         open: isPopoverOpen,
         onOpenChange: setIsPopoverOpen,
         placement: "bottom-start",
+        offset: 4,
+        stayInFrame: true,
+        allowFlip: true,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
           asChild: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-            size: chipSize,
-            variant: "outlined",
-            ...{
-              animation: "quick"
+          children: (
+          /* Chip-scale visual (shares ChipFrame/ChipText size variants so its
+          height/padding/font track the Chip pills) wrapped in a
+          transparent press target floored at 44 tall (DG-LAY-04 / D-02
+          house pressTarget* channel — the pill itself stays chip-sized).
+          Horizontal slop is capped below half the $2 row gap so the
+          target never overlaps the adjacent chip / its dismiss zone. */
+          /* @__PURE__ */
+          (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            role: "button",
+            "aria-label": addTagLabel,
+            tabIndex: 0,
+            cursor: "pointer",
+            alignItems: "center",
+            justifyContent: "center",
+            ...(0, import_theme.pressTargetStyle)(),
+            minWidth: void 0,
+            paddingHorizontal: 3,
+            marginHorizontal: -3,
+            focusVisibleStyle: {
+              outlineColor: "$outlineColor",
+              outlineWidth: 2,
+              outlineStyle: "solid"
             },
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-              size: compact ? 14 : 16
-            }),
-            circular: compact,
-            children: !compact && addTagLabel
-          })
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsPopoverOpen(true);
+              }
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Chip.ChipFrame, {
+              size: chipSize,
+              variant: "outline",
+              backgroundColor: "transparent",
+              ...knobProps.borderRadius,
+              borderColor: import_componentColors.componentColors.interactive.border,
+              gap: compact ? 0 : "$1",
+              hoverStyle: {
+                backgroundColor: import_componentColors.componentColors.interactive.hover
+              },
+              pressStyle: {
+                backgroundColor: import_componentColors.componentColors.interactive.active
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                size: (0, import_Chip.chipIconSize)(chipSize)
+              }),
+              /* Compact is icon-only: a zero-width space still establishes the
+              chip text line box so the trigger height matches the pills. */
+              /* @__PURE__ */
+              (0, import_jsx_runtime.jsx)(import_Chip.ChipText, {
+                size: chipSize,
+                color: import_componentColors.componentColors.text.secondary,
+                children: compact ? "\u200B" : addTagLabel
+              })]
+            })
+          }))
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
           borderWidth: 1,
           borderColor: "$borderColor",
@@ -350,7 +362,7 @@ function Tags(param) {
       }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         color: import_componentColors.componentColors.text.muted,
         fontSize: compact ? "$1" : "$2",
-        marginLeft: "$1",
+        marginInlineStart: "$1",
         children: clickToAddLabel
       })]
     })]