@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/layouts/pageHeadingScope.mjs

@@ -0,0 +1,48 @@
+import { devWarn } from "@multiplatform.one/theme";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const PageHeadingScopeContext = createContext(null);
+function PageHeadingScope({
+  children,
+  name = "Screen"
+}) {
+  const h1CountRef = useRef(0);
+  const value = useMemo(() => ({
+    registerH1: detail => {
+      h1CountRef.current += 1;
+      if (h1CountRef.current > 1) {
+        devWarn("multiple-h1", {
+          component: name,
+          id: detail?.component,
+          value: detail?.label,
+          count: h1CountRef.current
+        });
+      }
+      return () => {
+        h1CountRef.current -= 1;
+      };
+    }
+  }), [name]);
+  return /* @__PURE__ */jsx(PageHeadingScopeContext.Provider, {
+    value,
+    children
+  });
+}
+function useRegisterPageHeading(args) {
+  const registry = useContext(PageHeadingScopeContext);
+  const {
+    level,
+    component,
+    label,
+    enabled = true
+  } = args;
+  useEffect(() => {
+    if (!enabled || level !== 1 || !registry) return;
+    return registry.registerH1({
+      component,
+      label
+    });
+  }, [enabled, level, registry, component, label]);
+}
+export { PageHeadingScope, useRegisterPageHeading };
+//# sourceMappingURL=pageHeadingScope.mjs.map

package/dist/esm/layouts/pageHeadingScope.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["devWarn","createContext","useContext","useEffect","useMemo","useRef","jsx","PageHeadingScopeContext","PageHeadingScope","children","name","h1CountRef","value","registerH1","detail","current","component","id","label","count","Provider","useRegisterPageHeading","args","registry","level","enabled"],"sources":["../../../src/layouts/pageHeadingScope.tsx"],"sourcesContent":[null],"mappings":"AAeA,SAASA,OAAA,QAAe;AAExB,SAASC,aAAA,EAAeC,UAAA,EAAYC,SAAA,EAAWC,OAAA,EAASC,MAAA,QAAc;AA6ClE,SAAAC,GAAA;AAnCJ,MAAMC,uBAAA,GAA0BN,aAAA,CAA0C,IAAI;AAavE,SAASO,iBAAiB;EAAEC,QAAA;EAAUC,IAAA,GAAO;AAAS,GAA0B;EACrF,MAAMC,UAAA,GAAaN,MAAA,CAAO,CAAC;EAC3B,MAAMO,KAAA,GAAQR,OAAA,CACZ,OAAO;IACLS,UAAA,EAAaC,MAAA,IAAW;MACtBH,UAAA,CAAWI,OAAA,IAAW;MACtB,IAAIJ,UAAA,CAAWI,OAAA,GAAU,GAAG;QAC1Bf,OAAA,CAAQ,eAAe;UACrBgB,SAAA,EAAWN,IAAA;UACXO,EAAA,EAAIH,MAAA,EAAQE,SAAA;UACZJ,KAAA,EAAOE,MAAA,EAAQI,KAAA;UACfC,KAAA,EAAOR,UAAA,CAAWI;QACpB,CAAC;MACH;MACA,OAAO,MAAM;QACXJ,UAAA,CAAWI,OAAA,IAAW;MACxB;IACF;EACF,IACA,CAACL,IAAI,CACP;EACA,OACE,eAAAJ,GAAA,CAACC,uBAAA,CAAwBa,QAAA,EAAxB;IAAiCR,KAAA;IAAeH;EAAA,CAAS;AAE9D;AAOO,SAASY,uBAAuBC,IAAA,EAQ9B;EACP,MAAMC,QAAA,GAAWrB,UAAA,CAAWK,uBAAuB;EACnD,MAAM;IAAEiB,KAAA;IAAOR,SAAA;IAAWE,KAAA;IAAOO,OAAA,GAAU;EAAK,IAAIH,IAAA;EACpDnB,SAAA,CAAU,MAAM;IACd,IAAI,CAACsB,OAAA,IAAWD,KAAA,KAAU,KAAK,CAACD,QAAA,EAAU;IAC1C,OAAOA,QAAA,CAASV,UAAA,CAAW;MAAEG,SAAA;MAAWE;IAAM,CAAC;EACjD,GAAG,CAACO,OAAA,EAASD,KAAA,EAAOD,QAAA,EAAUP,SAAA,EAAWE,KAAK,CAAC;AACjD","ignoreList":[]}

package/dist/esm/layouts/pageHeadingScope.native.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { devWarn } from "@multiplatform.one/theme";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+var PageHeadingScopeContext = /* @__PURE__ */createContext(null);
+function PageHeadingScope(param) {
+  var {
+    children,
+    name = "Screen"
+  } = param;
+  var h1CountRef = useRef(0);
+  var value = useMemo(function () {
+    return {
+      registerH1: function registerH1(detail) {
+        h1CountRef.current += 1;
+        if (h1CountRef.current > 1) {
+          devWarn("multiple-h1", {
+            component: name,
+            id: detail === null || detail === void 0 ? void 0 : detail.component,
+            value: detail === null || detail === void 0 ? void 0 : detail.label,
+            count: h1CountRef.current
+          });
+        }
+        return function () {
+          h1CountRef.current -= 1;
+        };
+      }
+    };
+  }, [name]);
+  return /* @__PURE__ */_jsx(PageHeadingScopeContext.Provider, {
+    value,
+    children
+  });
+}
+function useRegisterPageHeading(args) {
+  var registry = useContext(PageHeadingScopeContext);
+  var {
+    level,
+    component,
+    label,
+    enabled = true
+  } = args;
+  useEffect(function () {
+    if (!enabled || level !== 1 || !registry) return;
+    return registry.registerH1({
+      component,
+      label
+    });
+  }, [enabled, level, registry, component, label]);
+}
+export { PageHeadingScope, useRegisterPageHeading };
+//# sourceMappingURL=pageHeadingScope.native.js.map

package/dist/esm/layouts/pageHeadingScope.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","devWarn","createContext","useContext","useEffect","useMemo","useRef","PageHeadingScopeContext","PageHeadingScope","param","children","name","h1CountRef","value","registerH1","detail","current","component","id","label","count","Provider","useRegisterPageHeading","args","registry","level","enabled"],"sources":["../../../src/layouts/pageHeadingScope.tsx"],"sourcesContent":[null],"mappings":"AAeA,SAASA,GAAA,IAAAC,IAAA,QAAe;AAExB,SAASC,OAAA,QAAe,0BAAuB;AA6C3C,SAAAC,aAAA,EAAAC,UAAA,EAAAC,SAAA,EAAAC,OAAA,EAAAC,MAAA;AAnCJ,IAAAC,uBAAM,kBAAoEL,aAAI;AAavE,SAASM,iBAAiBC,KAAE;EACjC;IAAMC,QAAA;IAAAC,IAAa;EAAQ,IAAAF,KAAA;EAC3B,IAAAG,UAAc,GAAAN,MAAA;EAAA,IACZO,KAAO,GAAAR,OAAA;IAAA,OACL;MACES,UAAA,WAAWA,UAAWA,CAAAC,MAAA;QACtBH,UAAI,CAAAI,OAAW;QACb,IAAAJ,UAAQ,CAAAI,OAAA,GAAe;UAAAf,OACrB,cAAW;YACXgB,SAAI,EAAAN,IAAQ;YACZO,EAAA,EAAAH,MAAO,KAAQ,QAAAA,MAAA,uBAAAA,MAAA,CAAAE,SAAA;YACfJ,KAAA,EAAOE,MAAA,KAAW,QAAAA,MAAA,uBAAAA,MAAA,CAAAI,KAAA;YACnBC,KAAA,EAAAR,UAAA,CAAAI;UACH;QACA;QACE,mBAAW;UACbJ,UAAA,CAAAI,OAAA;QACF;MACF;IACA,CAAC;EACH,IACAL,IAAA,CAGF;EAOO,OAAS,eAAAX,IAAA,CAAAO,uBAQP,CAAAc,QAAA;IACPR,KAAM;IACNH;EACA;AACE;AACA,SAAAY,sBAA2BA,CAAAC,IAAE;EAC/B,IAAIC,QAAA,GAASrB,UAAO,CAAAI,uBAA2B;EACjD;IAAAkB,KAAA;IAAAR,SAAA;IAAAE,KAAA;IAAAO,OAAA;EAAA,IAAAH,IAAA","ignoreList":[]}

package/dist/esm/layouts/sidebar.mjs

@@ -1,5 +1,5 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Group, Label, ListItem, ScrollView, Separator, Text, YStack } from "tamagui";
+import { hairline, hairlineWidth, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Group, Label, ListItem, ScrollView, Separator, Text, YStack, isWeb } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Sidebar({
@@ -9,38 +9,58 @@ function Sidebar({
   const {
     knobProps
   } = useResolvedKnobs();
+  const onAccent = useReadableTextOn("$accentBackground");
+  const rowPad = knobProps.panelPadding.padding;
   return /* @__PURE__ */jsx(YStack, {
     width,
-    borderRightWidth: 1,
     borderColor: "$borderColor",
+    ...(isWeb ? {
+      borderInlineEndWidth: hairlineWidth,
+      borderInlineEndStyle: "solid",
+      className: "mp-hairline-ie"
+    } : {
+      borderEndWidth: hairlineWidth
+    }),
     children: /* @__PURE__ */jsx(ScrollView, {
       children: /* @__PURE__ */jsx(YStack, {
         ...knobProps.panelPadding,
+        paddingHorizontal: 0,
         ...knobProps.gapLg,
         children: sections.map((section, sectionIdx) => /* @__PURE__ */jsxs(YStack, {
           ...knobProps.gap,
-          children: [/* @__PURE__ */jsx(Label, {
+          children: [section.title ? /* @__PURE__ */jsx(Label, {
+            size: knobProps.sizeToken,
             fontSize: "$2",
             fontWeight: "600",
             textTransform: "uppercase",
             color: componentColors.text.muted,
-            paddingHorizontal: "$2",
-            size: knobProps.sizeToken,
+            paddingHorizontal: 0,
+            marginHorizontal: rowPad,
+            height: "auto",
+            lineHeight: "$1",
             children: section.title
-          }), /* @__PURE__ */jsx(Group, {
+          }) : null, /* @__PURE__ */jsx(Group, {
+            borderRadius: knobProps.borderRadius.borderRadius,
             children: section.items.map((item, itemIdx) => /* @__PURE__ */jsxs(Group.Item, {
-              children: [itemIdx > 0 && /* @__PURE__ */jsx(Separator, {}), /* @__PURE__ */jsx(ListItem, {
+              children: [itemIdx > 0 && /* @__PURE__ */jsx(Separator, {
+                ...hairline.line
+              }), /* @__PURE__ */jsx(ListItem, {
                 title: item.label,
                 subTitle: item.subTitle,
                 icon: item.icon,
                 iconAfter: item.count !== void 0 ? /* @__PURE__ */jsxs(Text, {
-                  color: componentColors.text.muted,
+                  color: item.active && onAccent ? onAccent : componentColors.text.muted,
                   fontSize: "$2",
                   children: ["(", item.count, ")"]
                 }) : void 0,
                 size: knobProps.sizeToken,
+                paddingHorizontal: rowPad,
+                borderRadius: knobProps.borderRadius.borderRadius,
                 theme: item.active ? "active" : void 0,
                 backgroundColor: item.active ? "$accentBackground" : "transparent",
+                ...(item.active && onAccent ? {
+                  color: onAccent
+                } : void 0),
                 hoverStyle: {
                   backgroundColor: componentColors.surface.background
                 },
@@ -48,11 +68,29 @@ function Sidebar({
                   backgroundColor: 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: e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      item.onPress?.();
+                    }
+                  }
+                } : void 0)
               })]
             }, item.label))
-          }), sectionIdx < sections.length - 1 && /* @__PURE__ */jsx(Separator, {})]
-        }, section.title))
+          }), sectionIdx < sections.length - 1 && /* @__PURE__ */jsx(Separator, {
+            ...hairline.line
+          })]
+        }, section.title ?? sectionIdx))
       })
     })
   });

package/dist/esm/layouts/sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useResolvedKnobs","Group","Label","ListItem","ScrollView","Separator","Text","YStack","componentColors","jsx","jsxs","Sidebar","sections","width","knobProps","borderRightWidth","borderColor","children","panelPadding","gapLg","map","section","sectionIdx","gap","fontSize","fontWeight","textTransform","color","text","muted","paddingHorizontal","size","sizeToken","title","items","item","itemIdx","Item","label","subTitle","icon","iconAfter","count","theme","active","backgroundColor","hoverStyle","surface","background","pressStyle","interactive","cursor","onPress","length"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,KAAA,EAAOC,KAAA,EAAOC,QAAA,EAAUC,UAAA,EAAYC,SAAA,EAAWC,IAAA,EAAMC,MAAA,QAAc;AAC5E,SAASC,eAAA,QAAuB;AA+BlB,SAAAC,GAAA,EAqBYC,IAAA,QArBZ;AARP,SAASC,QAAQ;EAAEC,QAAA;EAAUC,KAAA,GAAQ;AAAI,GAAiB;EAC/D,MAAM;IAAEC;EAAU,IAAId,gBAAA,CAAiB;EACvC,OACE,eAAAS,GAAA,CAACF,MAAA;IAAOM,KAAA;IAAcE,gBAAA,EAAkB;IAAGC,WAAA,EAAY;IACrDC,QAAA,iBAAAR,GAAA,CAACL,UAAA;MACCa,QAAA,iBAAAR,GAAA,CAACF,MAAA;QAAQ,GAAGO,SAAA,CAAUI,YAAA;QAAe,GAAGJ,SAAA,CAAUK,KAAA;QAC/CF,QAAA,EAAAL,QAAA,CAASQ,GAAA,CAAI,CAACC,OAAA,EAASC,UAAA,KACtB,eAAAZ,IAAA,CAACH,MAAA;UAA4B,GAAGO,SAAA,CAAUS,GAAA;UACxCN,QAAA,kBAAAR,GAAA,CAACP,KAAA;YACCsB,QAAA,EAAS;YACTC,UAAA,EAAW;YACXC,aAAA,EAAc;YACdC,KAAA,EAAOnB,eAAA,CAAgBoB,IAAA,CAAKC,KAAA;YAC5BC,iBAAA,EAAkB;YAClBC,IAAA,EAAMjB,SAAA,CAAUkB,SAAA;YAEff,QAAA,EAAAI,OAAA,CAAQY;UAAA,CACX,GAEA,eAAAxB,GAAA,CAACR,KAAA;YACEgB,QAAA,EAAAI,OAAA,CAAQa,KAAA,CAAMd,GAAA,CAAI,CAACe,IAAA,EAAMC,OAAA,KACxB,eAAA1B,IAAA,CAACT,KAAA,CAAMoC,IAAA,EAAN;cACEpB,QAAA,GAAAmB,OAAA,GAAU,KAAK,eAAA3B,GAAA,CAACJ,SAAA,IAAU,GAC3B,eAAAI,GAAA,CAACN,QAAA;gBACC8B,KAAA,EAAOE,IAAA,CAAKG,KAAA;gBACZC,QAAA,EAAUJ,IAAA,CAAKI,QAAA;gBACfC,IAAA,EAAML,IAAA,CAAKK,IAAA;gBACXC,SAAA,EACEN,IAAA,CAAKO,KAAA,KAAU,SACb,eAAAhC,IAAA,CAACJ,IAAA;kBAAKqB,KAAA,EAAOnB,eAAA,CAAgBoB,IAAA,CAAKC,KAAA;kBAAOL,QAAA,EAAS;kBAAKP,QAAA,QACnDkB,IAAA,CAAKO,KAAA,EAAM;gBAAA,CACf,IACE;gBAENX,IAAA,EAAMjB,SAAA,CAAUkB,SAAA;gBAChBW,KAAA,EAAOR,IAAA,CAAKS,MAAA,GAAS,WAAW;gBAChCC,eAAA,EAAiBV,IAAA,CAAKS,MAAA,GAAS,sBAAsB;gBACrDE,UAAA,EAAY;kBAAED,eAAA,EAAiBrC,eAAA,CAAgBuC,OAAA,CAAQC;gBAAW;gBAClEC,UAAA,EAAY;kBAAEJ,eAAA,EAAiBrC,eAAA,CAAgB0C,WAAA,CAAYF;gBAAW;gBACtEG,MAAA,EAAQhB,IAAA,CAAKiB,OAAA,GAAU,YAAY;gBACnCA,OAAA,EAASjB,IAAA,CAAKiB;cAAA,CAChB;YAAA,GApBejB,IAAA,CAAKG,KAqBtB,CACD;UAAA,CACH,GAEChB,UAAA,GAAaV,QAAA,CAASyC,MAAA,GAAS,KAAK,eAAA5C,GAAA,CAACJ,SAAA,IAAU;QAAA,GAvCrCgB,OAAA,CAAQY,KAwCrB,CACD;MAAA,CACH;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["hairline","hairlineWidth","useReadableTextOn","useResolvedKnobs","Group","Label","ListItem","ScrollView","Separator","Text","YStack","isWeb","componentColors","jsx","jsxs","Sidebar","sections","width","knobProps","onAccent","rowPad","panelPadding","padding","borderColor","borderInlineEndWidth","borderInlineEndStyle","className","borderEndWidth","children","paddingHorizontal","gapLg","map","section","sectionIdx","gap","title","size","sizeToken","fontSize","fontWeight","textTransform","color","text","muted","marginHorizontal","height","lineHeight","borderRadius","items","item","itemIdx","Item","line","label","subTitle","icon","iconAfter","count","active","theme","backgroundColor","hoverStyle","surface","background","pressStyle","interactive","cursor","onPress","role","tabIndex","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","onKeyDown","e","key","preventDefault","length"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Group, Label, ListItem, ScrollView, Separator, Text, YStack } from "tamagui";
+import { hairline, hairlineWidth, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Group, Label, ListItem, ScrollView, Separator, Text, YStack, isWeb } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
 function Sidebar(param) {
   var {
@@ -10,40 +10,81 @@ function Sidebar(param) {
   var {
     knobProps
   } = useResolvedKnobs();
+  var onAccent = useReadableTextOn("$accentBackground");
+  var rowPad = knobProps.panelPadding.padding;
   return /* @__PURE__ */_jsx(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).
+    ...(isWeb ? {
+      borderInlineEndWidth: hairlineWidth,
+      borderInlineEndStyle: "solid",
+      className: "mp-hairline-ie"
+    } : {
+      borderEndWidth: hairlineWidth
+    }),
     children: /* @__PURE__ */_jsx(ScrollView, {
       children: /* @__PURE__ */_jsx(YStack, {
         ...knobProps.panelPadding,
+        paddingHorizontal: 0,
         ...knobProps.gapLg,
         children: sections.map(function (section, sectionIdx) {
+          var _section_title;
           return /* @__PURE__ */_jsxs(YStack, {
             ...knobProps.gap,
-            children: [/* @__PURE__ */_jsx(Label, {
+            children: [section.title ? /* @__PURE__ */_jsx(Label, {
+              size: knobProps.sizeToken,
               fontSize: "$2",
               fontWeight: "600",
               textTransform: "uppercase",
               color: 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__ */_jsx(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__ */
+            _jsx(Group, {
+              borderRadius: knobProps.borderRadius.borderRadius,
               children: section.items.map(function (item, itemIdx) {
                 return /* @__PURE__ */_jsxs(Group.Item, {
-                  children: [itemIdx > 0 && /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(ListItem, {
+                  children: [itemIdx > 0 && /* @__PURE__ */_jsx(Separator, {
+                    ...hairline.line
+                  }), /* @__PURE__ */_jsx(ListItem, {
                     title: item.label,
                     subTitle: item.subTitle,
                     icon: item.icon,
                     iconAfter: item.count !== void 0 ? /* @__PURE__ */_jsxs(Text, {
-                      color: componentColors.text.muted,
+                      color: item.active && onAccent ? onAccent : 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: componentColors.surface.background
                     },
@@ -51,12 +92,31 @@ function Sidebar(param) {
                       backgroundColor: 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__ */_jsx(Separator, {})]
-          }, section.title);
+            }), sectionIdx < sections.length - 1 && /* @__PURE__ */_jsx(Separator, {
+              ...hairline.line
+            })]
+          }, (_section_title = section.title) !== null && _section_title !== void 0 ? _section_title : sectionIdx);
         })
       })
     })

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useResolvedKnobs","Group","Label","ListItem","ScrollView","Separator","Text","YStack","componentColors","Sidebar","param","sections","width","knobProps","borderRightWidth","borderColor","children","panelPadding","gapLg","map","section","sectionIdx","gap","fontSize","fontWeight","textTransform","color","text","muted","paddingHorizontal","size","sizeToken","title","items","item","itemIdx","Item","label","subTitle","icon","iconAfter","count"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAwB;AAEjC,SAASC,gBAAc,QAAU,0BAAuB;AACxD,SAASC,KAAA,EAAAC,KAAA,EAAAC,QAAA,EAAuBC,UAAA,EAAAC,SAAA,EAAAC,IAAA,EAAAC,MAAA;AA+BlB,SAAAC,eAqBY,QArBZ;AARP,SAASC,QAAQC,KAAE;EACxB;IAAMC,QAAE;IAAAC,KAAU,GAAI;EAAA,IAAAF,KAAA;EACtB;IAAAG;EACE,IAAAb,gBAAC,CAAO;EAKE,sBAAAH,IAAA,CAAAU,MAAA;IAAAK,KAAC;IAAAE,gBAAA;IAAAC,WACC,gBAAS;IAAAC,QACT,iBAAWnB,IAAA,CAAAO,UAAA;MAAAY,QACX,iBAAcnB,IAAA,CAAAU,MAAA;QACd,GAAAM,SAAO,CAAAI,YAAgB;QACvB,GAAAJ,SAAA,CAAAK,KAAA;QACAF,QAAM,EAAAL,QAAU,CAAAQ,GAAA,WAAAC,OAAA,EAAAC,UAAA;UAEf,sBAAQtB,KAAA,CAAAQ,MAAA;YAAA,GAAAM,SAAA,CAAAS,GAAA;YACXN,QAAA,GAEA,eAACnB,IACE,CAAAK,KAAA;cAEcqB,QAAK;cAChBC,UAAA;cAACC,aAAA;cAAAC,KAAA,EAAAlB,eAAA,CAAAmB,IAAA,CAAAC,KAAA;cACCC,iBAAY;cACZC,IAAU,EAAAjB,SAAK,CAAAkB,SAAA;cACTf,QAAK,EAAAI,OAAA,CAAAY;YACX,IAE2D,eAAAnC,IAAA,CAAAI,KAAA;cACnDe,QAAK,EAAAI,OAAA,CAAAa,KAAA,CAAAd,GAAA,WAAAe,IAAA,EAAAC,OAAA;gBAAM,sBAAApC,KAAA,CAAAE,KAAA,CAAAmC,IAAA;kBAEbpB,QAAA,GAEAmB,OAAU,uBAAAtC,IAAA,CAAAQ,SAAA,OACJ,eAASR,IAAW,CAAAM,QAAA;oBAChC6B,KAAiB,EAAAE,IAAK,CAAAG,KAAS;oBACjBC,QAAA,EAAAJ,IAAA,CAAAI,QAAiB;oBACjBC,IAAA,EAAAL,IAAA,CAAAK,IAAA;oBACDC,SAAU,EAAAN,IAAA,CAAAO,KAAY,6BAAA1C,KAAA,CAAAO,IAAA;sBACrBoB,KAAA,EAAAlB,eAAA,CAAAmB,IAAA,CAAAC,KAAA;sBAAAL,QAAA;sBAChBP,QAAA,GAGN,KAEuBkB,IAAA,CAAAO,KAAS,EAIxC,GACF","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","hairline","hairlineWidth","useReadableTextOn","useResolvedKnobs","Group","Label","ListItem","ScrollView","Separator","Text","YStack","isWeb","componentColors","Sidebar","param","sections","width","knobProps","onAccent","rowPad","panelPadding","padding","borderColor","borderInlineEndWidth","borderInlineEndStyle","className","borderEndWidth","children","paddingHorizontal","gapLg","map","section","sectionIdx","_section_title","gap","title","size","sizeToken","fontSize","fontWeight","textTransform","color","text","muted","marginHorizontal","height","lineHeight","borderRadius","items","item","itemIdx","Item","line","label","subTitle","icon","iconAfter","count","active","theme","backgroundColor","hoverStyle","surface","background","pressStyle","interactive"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/layouts/tags.mjs

@@ -1,8 +1,11 @@
-import { PlusIcon, TagIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon, TagIcon } from "@phosphor-icons/react";
+import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Input, Label, ListItem, Popover, ScrollView, Text, XStack, YStack } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { Button, Input, Label, ListItem, Popover, ScrollView, Text, View, XStack, YStack } from "tamagui";
+import { Chip, ChipFrame, ChipText, chipIconSize } from "../Chip/index.mjs";
 import { componentColors } from "../componentColors.mjs";
+import { withInterp } from "../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tags({
   tags,
@@ -18,12 +21,16 @@ function Tags({
   enableAdd = true,
   enableRemove = true,
   compact = false,
-  variant = "filled",
+  variant = "subtle",
   theme: chipTheme,
   labels = {},
-  placeholder = "Add tag...",
+  placeholder: placeholderProp,
   ...stackProps
 }) {
+  const {
+    t
+  } = useTranslation();
+  const placeholder = placeholderProp ?? t("Add tag...");
   const {
     knobProps
   } = useResolvedKnobs();
@@ -32,14 +39,16 @@ function Tags({
   const [inputValue, setInputValue] = useState("");
   const [isPopoverOpen, setIsPopoverOpen] = 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 => withInterp(t('Create "{{value}}"'), {
+      value
+    })
   } = labels;
-  const appliedTagNames = useMemo(() => new Set(tags.map(t => t.label.toLowerCase())), [tags]);
+  const appliedTagNames = useMemo(() => new Set(tags.map(tag => tag.label.toLowerCase())), [tags]);
   const availableSuggestions = useMemo(() => {
     const searchTerm = inputValue.toLowerCase().trim();
     return suggestions.filter(tag => {
@@ -100,79 +109,33 @@ function Tags({
       children: noTagsLabel
     })]
   });
-  const getVariantStyles = v => {
-    switch (v) {
-      case "outlined":
-        return {
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          hoverStyle: {
-            backgroundColor: componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: componentColors.interactive.hover
-          }
-        };
-      case "ghost":
-        return {
-          backgroundColor: "transparent",
-          hoverStyle: {
-            backgroundColor: componentColors.interactive.background
-          },
-          pressStyle: {
-            backgroundColor: componentColors.interactive.hover
-          }
-        };
-      case "filled":
-        return {
-          ...knobProps.surface,
-          hoverStyle: {
-            backgroundColor: componentColors.interactive.active
-          },
-          pressStyle: {
-            backgroundColor: 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__ */jsx(Button, {
+    const chip = /* @__PURE__ */jsx(Chip, {
       size: chipSize,
-      theme: chipTheme,
-      ...variantStyles,
-      ...knobProps.borderRadius,
-      borderRadius: "$10",
-      ...{
-        animation: "quick"
-      },
-      onPress: () => onTagClick?.(tag),
-      cursor: onTagClick ? "pointer" : "default",
-      iconAfter: enableRemove && !disabled && onRemove ? /* @__PURE__ */jsx(XStack, {
-        focusable: true,
-        hitSlop: 8,
-        padding: "$1",
-        borderRadius: "$10",
-        hoverStyle: {
-          backgroundColor: componentColors.surface.border
-        },
-        cursor: "pointer",
-        onPress: e => {
-          e.stopPropagation();
-          actions.onRemove();
-        },
-        "aria-label": `Remove ${tag.label}`,
-        accessibilityRole: "button",
-        children: /* @__PURE__ */jsx(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__ */jsx(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);
     }
@@ -203,7 +166,7 @@ function Tags({
       children: [/* @__PURE__ */jsx(Text, {
         fontSize: "$1",
         color: componentColors.text.muted,
-        paddingLeft: "$1",
+        paddingInlineStart: "$1",
         children: suggestionsLabel
       }), /* @__PURE__ */jsx(ScrollView, {
         maxHeight: 150,
@@ -256,19 +219,54 @@ function Tags({
         open: isPopoverOpen,
         onOpenChange: setIsPopoverOpen,
         placement: "bottom-start",
+        offset: 4,
+        stayInFrame: true,
+        allowFlip: true,
         children: [/* @__PURE__ */jsx(Popover.Trigger, {
           asChild: true,
-          children: /* @__PURE__ */jsx(Button, {
-            size: chipSize,
-            variant: "outlined",
-            ...{
-              animation: "quick"
+          children: /* @__PURE__ */jsx(View, {
+            role: "button",
+            "aria-label": addTagLabel,
+            tabIndex: 0,
+            cursor: "pointer",
+            alignItems: "center",
+            justifyContent: "center",
+            ...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__ */jsx(PlusIcon, {
-              size: compact ? 14 : 16
-            }),
-            circular: compact,
-            children: !compact && addTagLabel
+            children: /* @__PURE__ */jsxs(ChipFrame, {
+              size: chipSize,
+              variant: "outline",
+              backgroundColor: "transparent",
+              ...knobProps.borderRadius,
+              borderColor: componentColors.interactive.border,
+              gap: compact ? 0 : "$1",
+              hoverStyle: {
+                backgroundColor: componentColors.interactive.hover
+              },
+              pressStyle: {
+                backgroundColor: componentColors.interactive.active
+              },
+              children: [/* @__PURE__ */jsx(PlusIcon, {
+                size: chipIconSize(chipSize)
+              }), /* @__PURE__ */jsx(ChipText, {
+                size: chipSize,
+                color: componentColors.text.secondary,
+                children: compact ? "\u200B" : addTagLabel
+              })]
+            })
           })
         }), /* @__PURE__ */jsxs(Popover.Content, {
           borderWidth: 1,
@@ -291,7 +289,7 @@ function Tags({
       }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */jsx(Text, {
         color: componentColors.text.muted,
         fontSize: compact ? "$1" : "$2",
-        marginLeft: "$1",
+        marginInlineStart: "$1",
         children: clickToAddLabel
       })]
     })]