@multiplatform.one/components 6.6.0 → 7.0.0

package/src/layouts/Tags.stories.tsx

@@ -1,3 +1,4 @@
+import { useState, type ComponentProps } from "react";
 import { YStack, Text } from "tamagui";
 import { Tags, type TagItem } from "./tags";
 
@@ -10,7 +11,7 @@ export default {
     docs: {
       description: {
         component:
-          "A generic tag management component for adding and removing tags with autocomplete support.",
+          "Token-field tags (Polariss Combobox + GitHub TokenInput): chips live in one input-surface, type/Enter/comma to add, Backspace removes the last tag.",
       },
     },
   },
@@ -36,19 +37,31 @@ const allSuggestions: TagItem[] = [
   { id: "sug-4", label: "bug" },
 ];
 
-export const Default = () => (
-  <Tags
-    tags={sampleTags}
-    suggestions={allSuggestions}
-    onAdd={(name) => console.log("Add:", name)}
-    onRemove={(tag) => console.log("Remove:", tag.id)}
-  />
-);
+function TagsPlayground({
+  initialTags = sampleTags,
+  ...props
+}: Partial<ComponentProps<typeof Tags>> & { initialTags?: TagItem[] }) {
+  const [tags, setTags] = useState<TagItem[]>(initialTags);
+  return (
+    <Tags
+      tags={tags}
+      suggestions={allSuggestions}
+      onAdd={(name) => {
+        const id = `tag-${name.toLowerCase().replace(/\s+/g, "-")}-${tags.length}`;
+        setTags((prev) => [...prev, { id, label: name }]);
+      }}
+      onRemove={(tag) => setTags((prev) => prev.filter((item) => item.id !== tag.id))}
+      {...props}
+    />
+  );
+}
+
+export const Default = () => <TagsPlayground />;
 Default.storyName = "Main";
 Default.parameters = {
   docs: {
     description: {
-      story: "Basic tag display with add and remove functionality.",
+      story: "Token field with add, remove, and suggestion listbox.",
     },
   },
 };
@@ -62,14 +75,7 @@ ReadOnly.parameters = {
   },
 };
 
-export const CompactMode = () => (
-  <Tags
-    tags={sampleTags}
-    compact
-    onAdd={(name) => console.log("Add:", name)}
-    onRemove={(tag) => console.log("Remove:", tag.id)}
-  />
-);
+export const CompactMode = () => <TagsPlayground compact />;
 CompactMode.parameters = {
   docs: {
     description: {
@@ -78,32 +84,25 @@ CompactMode.parameters = {
   },
 };
 
-export const Empty = () => (
-  <Tags
-    tags={[]}
-    suggestions={allSuggestions}
-    onAdd={(name) => console.log("Add:", name)}
-    placeholder="Add your first tag..."
-  />
-);
+export const Empty = () => <TagsPlayground initialTags={[]} placeholder="Add your first tag..." />;
 Empty.parameters = {
   docs: {
     description: {
-      story: "Empty tags component ready for adding tags.",
+      story: "Empty token field ready for adding tags.",
     },
   },
 };
 
 export const AllStates = () => (
-  <YStack gap="$6">
+  <YStack gap="$6" width="100%" maxWidth={480}>
     <YStack gap="$2">
       <Text fontWeight="600">With Tags</Text>
-      <Tags tags={sampleTags} onRemove={(tag) => console.log("Remove:", tag.id)} />
+      <TagsPlayground />
     </YStack>
 
     <YStack gap="$2">
       <Text fontWeight="600">Empty</Text>
-      <Tags tags={[]} onAdd={(name) => console.log("Add:", name)} placeholder="Add tag..." />
+      <TagsPlayground initialTags={[]} placeholder="Add tag..." />
     </YStack>
 
     <YStack gap="$2">
@@ -118,14 +117,14 @@ export const AllStates = () => (
 
     <YStack gap="$2">
       <Text fontWeight="600">Compact</Text>
-      <Tags tags={sampleTags} compact />
+      <TagsPlayground compact />
     </YStack>
   </YStack>
 );
 AllStates.parameters = {
   docs: {
     description: {
-      story: "All states of the Tags component.",
+      story: "All states of the Tags token field.",
     },
   },
 };

package/src/layouts/Timeline.stories.tsx

@@ -138,7 +138,7 @@ Comments.parameters = {
   docs: {
     description: {
       story:
-        "Comment-section feed: comments show avatar + display name (emails are prettified, never rendered raw) + relative time + Reply with one-level threaded replies; system events render as compact muted rows. The inline composer at the top expands on focus and submits via onCommentSubmit(text, { parentId? }).",
+        "Desk/GitHub activity feed: comments sit in a card on a vertical spine; system events are compact badge rows on the same rail. Rows are one stacked group (LC-72) — outer corners only, hairlines between items. Composer at the top submits via onCommentSubmit(text, { parentId? }).",
     },
   },
 };
@@ -164,7 +164,7 @@ Default.storyName = "Main";
 Default.parameters = {
   docs: {
     description: {
-      story: "Timeline showing comments and version history.",
+      story: "Mixed comments and system events on the activity spine.",
     },
   },
 };

package/src/layouts/Toolbar.stories.tsx

@@ -70,3 +70,22 @@ export const FusedSegment = () => (
 );
 
 FusedSegment.storyName = "Fused Segment";
+
+export const OverflowNarrow = () => (
+  <YStack maxWidth={320} borderWidth={1} borderColor="$color6" borderStyle="dashed">
+    <Toolbar
+      primaryActions={[
+        { label: "Save", onPress: () => {}, variant: "primary" },
+        { label: "Publish", onPress: () => {} },
+        { label: "Duplicate", onPress: () => {}, variant: "outlined" },
+        { label: "Archive", onPress: () => {}, variant: "outlined" },
+      ]}
+      secondaryActions={[
+        { label: "Discard", onPress: () => {}, variant: "outlined" },
+        { label: "Delete", onPress: () => {}, variant: "destructive" },
+      ]}
+    />
+  </YStack>
+);
+
+OverflowNarrow.storyName = "Overflow Narrow";

package/src/layouts/ViewSwitcher.stories.tsx

@@ -39,15 +39,18 @@ const viewsWithIcons: ViewOption[] = [
   { type: "kanban", label: "Kanban", icon: KanbanIcon },
 ];
 
+const viewsIconsOnly: ViewOption[] = [
+  { type: "list", label: "List", icon: ListIcon, iconOnly: true },
+  { type: "grid", label: "Grid", icon: GridIcon, iconOnly: true },
+  { type: "kanban", label: "Kanban", icon: KanbanIcon, iconOnly: true },
+];
+
 function ViewSwitcherExample({ options = views }: { options?: ViewOption[] }) {
   const [current, setCurrent] = useState(options[0]?.type ?? "list");
   return (
     <YStack gap="$4" padding="$4" alignItems="flex-start">
       <ViewSwitcher views={options} currentView={current} onViewChange={setCurrent} />
       <Text>Current view: {current}</Text>
-      <Text fontSize="$2" color="$color10">
-        Segment padding tracks the size knob (~$3 at medium).
-      </Text>
     </YStack>
   );
 }
@@ -72,3 +75,8 @@ export const WithIcons: Story = {
   name: "With icons",
   render: () => <ViewSwitcherExample options={viewsWithIcons} />,
 };
+
+export const IconsOnly: Story = {
+  name: "Icons only",
+  render: () => <ViewSwitcherExample options={viewsIconsOnly} />,
+};

package/src/layouts/ViewSwitcher.tsx

@@ -1,9 +1,10 @@
 import {
-  MIN_PRESS_TARGET,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  getGroupPosition,
   keyboardFocusRingProps,
   pressTargetHitSlop,
+  stackRadiusProps,
   useAccentTintedSurface,
   useReadableTextOn,
   useResolvedKnobs,
@@ -16,10 +17,12 @@ import { Text, ToggleGroup, XStack, isWeb } from "tamagui";
 export interface ViewOption {
   /** Unique identifier for this view type */
   type: string;
-  /** Display label for this view */
+  /** Display label (also the accessible name) */
   label: string;
   /** Icon component to render */
   icon?: React.ComponentType<{ size?: number }>;
+  /** Paint the icon only; `label` remains the accessible name (Carbon icon modifier). */
+  iconOnly?: boolean;
 }
 
 export interface ViewSwitcherProps {
@@ -32,10 +35,11 @@ export interface ViewSwitcherProps {
 }
 
 /**
- * A toggle group for switching between view options.
+ * Fused segmented control for switching view modes.
  *
- * Uses Tamagui's native `ToggleGroup` for polished, accessible view switching.
- * Accepts an array of view options via props — no Frappe or DocType dependency.
+ * Apple / Polaris / Carbon consensus, mapped onto house LC-71 / LC-72:
+ * one R-OUTER frame, selected = fill (never a border on every segment),
+ * keyboard ring on the focused item only. Activation stays MANUAL.
  */
 export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherProps) {
   const { knobProps } = useResolvedKnobs();
@@ -65,25 +69,30 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
   // the segment keeps its identity. The on-tint anchor the label and icon need
   // is applied on the row below, which is not a context host.
   const selectedChip = selectedTint ? { backgroundColor: selectedTint } : undefined;
-  const sz = knobProps.sizeToken;
-  // Segment inset ~$3 at medium; size knob steps it (small→$2, large→$4).
-  // Vertical pad is floored so the segment hits DG-LAY-04 (≥44) even at small.
+  // Size recipe owns chrome (height/pad/font/icon/gap). Press floor is
+  // hitSlop, never painted minHeight. Radius stays on the radius knob.
   // SP-PAD exemption (Chip precedent): this is a control-tier segmented
-  // group — its padding is the size-derived control padding sanctioned by
-  // the SP-PAD definition, so the space knob has no separate target here
-  // (fused R-OUTER segments also carry no gap; ToggleGroup contract).
-  const padH = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
-  const padV = sz === "$3" ? ("$1.5" as const) : sz === "$5" ? ("$2.5" as const) : ("$2" as const);
-  const labelSize = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
-  const rowGap =
-    sz === "$3" ? ("$1.5" as const) : sz === "$5" ? ("$2.5" as const) : ("$2" as const);
-  const iconPx = sz === "$3" ? 14 : sz === "$5" ? 18 : 16;
-  // Pre-floor measured medium segment height was 32px.
-  const segmentHitSlop = pressTargetHitSlop(32);
+  // group — padding is the size-derived control padding, so the space knob
+  // has no separate target here (fused R-OUTER segments also carry no gap;
+  // ToggleGroup contract).
+  const segmentHitSlop = pressTargetHitSlop(knobProps.control.height);
   // DG-A11Y-01: the role=group container is a focusable tab entry point that
   // redirects focus to a segment — paint the ring synchronously while focus
   // is WITHIN (CellWrapper focusWithin pattern) and on its own :focus.
   const groupRing = ensureFocusVisibleRing();
+  const radius = knobProps.borderRadius.borderRadius;
+  const count = views.length;
+  // Tamagui Toggle paints a 1px border + −1px margin on every item (the
+  // overlapping-border button-group trick). That IS "border on every
+  // segment". Kill both; selection is fill, grouping is the frame.
+  const restSegment = {
+    borderWidth: 0,
+    borderColor: "transparent",
+    margin: 0,
+    backgroundColor: "transparent",
+  } as const;
+  const hoverWash = { backgroundColor: "$backgroundHover" as const };
+  const pressWash = { backgroundColor: "$backgroundPress" as const };
 
   return (
     <ToggleGroup
@@ -91,21 +100,38 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
       orientation="horizontal"
       flexDirection="row"
       alignSelf="flex-start"
+      gap={0}
       value={currentView}
+      disableDeactivation
       onValueChange={(val) => {
         if (val) onViewChange(val);
       }}
       {...knobProps.borderRadius}
       {...knobProps.inputSurface}
-      // R-OUTER (LC-18): the outer frame owns the radius; clip so the inner
-      // square segment seams stay square inside the rounded frame instead of
-      // poking past it at high radius (DF-09). Segment keyboard rings are
-      // inset (outlineOffset -2), so they survive the clip; the group ring is
-      // an outline (never clipped by the element's own overflow).
+      // Recessed track (Apple) so unselected segments still read as inside
+      // the control once per-item borders are gone. `$color2` is the surface
+      // tier — a step off the page, not the hover grey that used to fake
+      // selection.
+      backgroundColor="$color2"
+      // R-OUTER (LC-18 / LC-72 CONTAINER-CLIP): the outer frame owns the
+      // radius; clip so inner square seams stay square inside the rounded
+      // frame (DF-09). Segment keyboard rings are inset (outlineOffset −2),
+      // so they survive the clip.
       overflow="hidden"
       focusStyle={groupRing}
       focusVisibleStyle={groupRing}
       focusWithinStyle={groupRing}
+      // Carbon / Apple equal-width: inline style so Tamagui's flex class
+      // cannot drop `gridAutoFlow` (a Tamagui `display="grid"` prop did).
+      {...(isWeb
+        ? {
+            style: {
+              display: "grid",
+              gridAutoFlow: "column",
+              gridAutoColumns: "minmax(max-content, 1fr)",
+            },
+          }
+        : undefined)}
     >
       {views.map((view, viewIndex) => {
         const Icon = view.icon;
@@ -123,6 +149,12 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
         })();
         const isTabStop = viewIndex === anchorIndex;
         const isSelected = view.type === currentView;
+        const groupedRadius = stackRadiusProps(
+          getGroupPosition(viewIndex, count),
+          radius,
+          "horizontal",
+        );
+        const fill = isSelected && selectedChip ? selectedChip : restSegment;
         return (
           // no size prop: ToggleGroup.Item's size makes square icon-buttons
           // (fixed width) that clip text labels -- let content + pad size the item.
@@ -130,34 +162,52 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
             key={view.type}
             value={view.type}
             {...(isWeb ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
-            paddingHorizontal={padH}
-            paddingVertical={padV}
+            paddingHorizontal={knobProps.control.paddingHorizontal}
             width="auto"
-            height="auto"
-            minHeight={MIN_PRESS_TARGET}
+            height={knobProps.control.height}
             hitSlop={segmentHitSlop}
-            flexGrow={0}
+            flexGrow={1}
+            flexShrink={0}
             alignItems="center"
             justifyContent="center"
+            cursor="pointer"
+            userSelect="none"
+            aria-label={view.label}
             // LC-25: selecting a segment is a discrete jump, so the fill
             // tweens instead of snapping (undefined at animation=none).
             transition={knobProps.transition}
+            {...restSegment}
+            {...groupedRadius}
+            {...fill}
             // The selected fill is re-applied through hover/press/focus so the
             // neutral state layer never paints over the accent chip (the
             // LC-05 rule the checked Switch track already follows). `focus` is
             // not optional: selecting a segment focuses it, and ToggleFrame's
             // own active recipe carries a neutral `$backgroundActive` focus
             // fill that would otherwise grey out the chip the moment it is
-            // chosen. The remount used to hide that by discarding the node's
-            // focus state along with the node.
-            {...(isSelected && selectedChip
-              ? {
-                  ...selectedChip,
-                  hoverStyle: selectedChip,
-                  pressStyle: selectedChip,
-                  focusStyle: selectedChip,
-                }
-              : undefined)}
+            // chosen.
+            hoverStyle={{
+              ...restSegment,
+              ...groupedRadius,
+              ...(isSelected && selectedChip ? selectedChip : hoverWash),
+            }}
+            pressStyle={{
+              ...restSegment,
+              ...groupedRadius,
+              ...(isSelected && selectedChip ? selectedChip : pressWash),
+            }}
+            // Rest outline is off; the keyboard ring is merged into the
+            // focused state so ToggleFrame's focusStyle cannot zero it.
+            outlineWidth={0}
+            focusStyle={{
+              ...restSegment,
+              ...groupedRadius,
+              ...(isSelected && selectedChip ? selectedChip : {}),
+              ...(kbFocusValue === view.type ? keyboardFocusRingProps : { outlineWidth: 0 }),
+            }}
+            focusVisibleStyle={
+              kbFocusValue === view.type ? keyboardFocusRingProps : { outlineWidth: 0 }
+            }
             {...(isWeb
               ? {
                   onFocus: () => {
@@ -174,7 +224,7 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
           >
             <XStack
               alignItems="center"
-              gap={rowGap}
+              gap={knobProps.control.gap}
               flexShrink={0}
               // Icons paint `currentColor`, so the row carries the resolved
               // on-tint anchor for the glyph and the label takes it explicitly
@@ -182,14 +232,17 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
               // inheritance).
               {...(isSelected && onSelectedTint ? { color: onSelectedTint } : undefined)}
             >
-              {Icon && <Icon size={iconPx} />}
-              <Text
-                fontSize={labelSize}
-                numberOfLines={1}
-                {...(isSelected && onSelectedTint ? { color: onSelectedTint } : undefined)}
-              >
-                {view.label}
-              </Text>
+              {Icon && <Icon size={knobProps.controlIcon.width} />}
+              {!view.iconOnly && view.label ? (
+                <Text
+                  {...knobProps.controlType}
+                  numberOfLines={1}
+                  {...knobProps.body}
+                  {...(isSelected && onSelectedTint ? { color: onSelectedTint } : undefined)}
+                >
+                  {view.label}
+                </Text>
+              ) : null}
             </XStack>
           </ToggleGroup.Item>
         );