@krapwoo/ds-viewer 0.1.1 → 0.3.0

package/starter-kit/components/TopNav/TopNav.tsx

@@ -0,0 +1,77 @@
+import React, { isValidElement, type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { DS_SEMANTIC, DS_SPACING, DS_TYPOGRAPHY, DS_A11Y_MIN_TOUCH_TARGET } from '../../tokens';
+import { Button, type ButtonProps } from '../Button';
+
+// Both slots reserve this width whether populated or empty, so the title stays centered
+// regardless of which side(s) actually have content.
+const SLOT_SIZE = DS_A11Y_MIN_TOUCH_TARGET;
+
+/** Dev-time consistency check (same policy as ButtonGroup's `checkConsistency`) — a nav bar's own
+ *  leading/trailing actions read as one quiet, uniform family (back arrow, close, overflow menu),
+ *  never as a prominent CTA. Warns (never throws) if a slot's Button doesn't follow that: `small`
+ *  size, and not `ghost` (which reads as an inline text action, not a nav icon — see Button's own
+ *  variant-choice doc). */
+function checkSlotButton(node: ReactNode, slotName: 'leading' | 'trailing'): void {
+  if (!isValidElement(node) || node.type !== Button) return;
+  const props = node.props as ButtonProps;
+  if (props.size && props.size !== 'small') {
+    console.warn(`[TopNav] ${slotName} button uses size="${props.size}" — TopNav slot buttons should use size="small".`);
+  }
+  if (props.variant === 'ghost') {
+    console.warn(
+      `[TopNav] ${slotName} button uses variant="ghost" — that reads as an inline text action, not a nav icon. Use variant="secondary" (TopNav's default) instead.`,
+    );
+  }
+}
+
+export interface TopNavProps {
+  /** Centered title text. Ignored when `center` is set. */
+  title?: string;
+  /** Custom content overriding the centered title — e.g. a search field or segmented toggle. */
+  center?: ReactNode;
+  /** Leading slot — typically a back/close icon Button. Keep it `size="small"` and
+   *  `variant="secondary"` (TopNav's default) unless there's a specific reason to deviate — never
+   *  `ghost`, which reads as an inline text action rather than a nav icon. */
+  leading?: ReactNode;
+  /** Trailing slot — typically an action icon Button. Same size/variant guidance as `leading`. */
+  trailing?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A screen's top bar: fixed-width leading/trailing slots flanking a centered title (or custom
+ *  `center` content). Slots reserve their layout space even when empty, so the title stays
+ *  centered whether one, both, or neither side has content. */
+export function TopNav({ title, center, leading, trailing, style }: TopNavProps) {
+  checkSlotButton(leading, 'leading');
+  checkSlotButton(trailing, 'trailing');
+  return (
+    <View style={[styles.row, style]}>
+      <View style={styles.slot}>{leading}</View>
+      <View style={styles.center}>
+        {center ?? (title != null && (
+          <Text style={styles.title} numberOfLines={1} accessibilityRole="header">
+            {title}
+          </Text>
+        ))}
+      </View>
+      <View style={[styles.slot, styles.slotTrailing]}>{trailing}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: DS_SPACING[800],
+    paddingTop: DS_SPACING[800],
+    paddingBottom: DS_SPACING[400],
+    backgroundColor: DS_SEMANTIC.surface.white,
+  },
+  slot: { width: SLOT_SIZE, height: SLOT_SIZE, alignItems: 'flex-start', justifyContent: 'center' },
+  slotTrailing: { alignItems: 'flex-end' },
+  center: { flex: 1, alignItems: 'center' },
+  title: { ...DS_TYPOGRAPHY.labelMd, color: DS_SEMANTIC.text.regular },
+});

package/starter-kit/components/TopNav/index.ts

@@ -0,0 +1,2 @@
+export { TopNav } from './TopNav';
+export type { TopNavProps } from './TopNav';

package/starter-kit/components/UnderlineTabs/UnderlineTabs.catalog.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { defineCatalogPage } from '@krapwoo/ds-viewer';
+import { UnderlineTabs } from './UnderlineTabs';
+
+function UnderlineTabsDemo() {
+  const [value, setValue] = useState('all');
+  return (
+    <UnderlineTabs
+      value={value}
+      onChange={setValue}
+      options={[
+        { value: 'all', label: 'All' },
+        // Leading-icon tab — the layout every other option (icon-less) would otherwise hide.
+        { value: 'nearby', label: 'Nearby', iconName: 'pin' },
+        { value: 'favorites', label: 'Favorites', badge: 2 },
+      ]}
+    />
+  );
+}
+
+export default defineCatalogPage({
+  component: 'UnderlineTabs',
+  group: 'Selection',
+  // Phone width plus a small phone, where long labels truncate.
+  previewWidths: [402, 320],
+  description: 'A quieter tab switcher — left-aligned labels over a hairline rule, with a sliding underline indicator. Same options/value/onChange API as SegmentedToggle.',
+  whenToUse: "Quiet, secondary navigation within a screen that already has a clear primary focus. For a prominent, primary choice, use SegmentedToggle.",
+  a11y: 'Each tab is a Pressable label; the underline is a visual indicator only, so selection is also conveyed by the active label weight.',
+  render: () => <UnderlineTabsDemo />,
+});

package/starter-kit/components/UnderlineTabs/UnderlineTabs.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, Animated, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { DS_SEMANTIC, DS_SPACING, DS_RADIUS, DS_TYPOGRAPHY, DS_ICON_SIZE, DS_A11Y_MIN_TOUCH_TARGET } from '../../tokens';
+import { Icon } from '../../icons/Icon.native';
+import type { IconName } from '../../icons';
+import { useSlideAnim } from '../SegmentedToggle/useSlideAnim';
+
+export interface UnderlineTabOption {
+  value: string;
+  label: string;
+  /** Optional leading icon (16px) shown before the label. */
+  iconName?: IconName;
+  /** Optional count shown in a circular badge after the label (hidden when 0/undefined). */
+  badge?: number;
+}
+
+export interface UnderlineTabsProps {
+  /** The tabs. */
+  options: UnderlineTabOption[];
+  /** The currently-selected option `value`. */
+  value: string;
+  /** Selection handler. */
+  onChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const INDICATOR_HEIGHT = 2;
+
+/**
+ * Low-prominence tab switcher — left-aligned text labels over a hairline rule, with a thin underline
+ * indicator that slides to the selected tab. A quieter stand-in for SegmentedToggle: same
+ * options/value/onChange API, but no filled track or lifted thumb. Two or more options.
+ */
+export function UnderlineTabs({ options, value, onChange, style }: UnderlineTabsProps) {
+  // -1 when `value` matches no option (e.g. stale state after the options list changed). The
+  // indicator is hidden entirely in that case — clamping to tab 0 would underline a tab whose own
+  // label doesn't render as selected, a visibly contradictory state.
+  const matchedIndex = options.findIndex(o => o.value === value);
+  const hasSelection = matchedIndex !== -1;
+  const selectedIndex = Math.max(0, matchedIndex);
+  // Per-tab measured geometry (x offset + width within the row), so the indicator can size and slide to
+  // each variable-width label.
+  const [layouts, setLayouts] = useState<Record<number, { x: number; width: number }>>({});
+  // Which tab currently holds keyboard focus (null = none).
+  const [focusedValue, setFocusedValue] = useState<string | null>(null);
+  // translateX + width animate together; width can't use the native driver, so neither does.
+  const anim = useSlideAnim(selectedIndex, false);
+  const measured = options.every((_, i) => layouts[i] != null);
+
+  // Unlike SegmentedToggle's analytically-computed thumb position, this indicator slides to each
+  // tab's real measured `x` (from onLayout) — already RTL-correct as-is, since onLayout reports actual
+  // post-mirroring screen position, not an index-based LTR assumption.
+  const indices = options.map((_, i) => i);
+  const indicatorX = measured
+    ? anim.interpolate({ inputRange: indices, outputRange: indices.map(i => layouts[i].x) })
+    : 0;
+  const indicatorW = measured
+    ? anim.interpolate({ inputRange: indices, outputRange: indices.map(i => layouts[i].width) })
+    : 0;
+
+  return (
+    <View style={[styles.row, style]} accessibilityRole="tablist">
+      {options.map((opt, i) => {
+        const selected = opt.value === value;
+        const color = selected ? DS_SEMANTIC.text.regular : DS_SEMANTIC.text.muted;
+        return (
+          <Pressable
+            key={opt.value}
+            onPress={() => onChange(opt.value)}
+            onLayout={e => {
+              const { x, width } = e.nativeEvent.layout;
+              setLayouts(prev =>
+                prev[i] && prev[i].x === x && prev[i].width === width ? prev : { ...prev, [i]: { x, width } },
+              );
+            }}
+            onFocus={() => setFocusedValue(opt.value)}
+            onBlur={() => setFocusedValue(prev => (prev === opt.value ? null : prev))}
+            accessibilityRole="tab"
+            accessibilityLabel={opt.badge != null && opt.badge > 0 ? `${opt.label}, ${opt.badge}` : opt.label}
+            accessibilityState={{ selected }}
+            // Keyboard focus shows the same highlight as a press (same policy as SegmentedToggle/ListItem).
+            style={({ pressed }) => [styles.tab, (pressed || focusedValue === opt.value) && styles.tabPressed]}
+          >
+            {opt.iconName && <Icon name={opt.iconName} size={DS_ICON_SIZE.sm} color={color} />}
+            <Text style={[styles.label, { color }]}>{opt.label}</Text>
+            {opt.badge != null && opt.badge > 0 && (
+              <View style={[styles.badge, { backgroundColor: color }]}>
+                <Text style={[styles.badgeText, { color: DS_SEMANTIC.surface.white }]}>{opt.badge}</Text>
+              </View>
+            )}
+          </Pressable>
+        );
+      })}
+      {measured && hasSelection && (
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.indicator, { width: indicatorW, transform: [{ translateX: indicatorX }] }]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: DS_SPACING[800],
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: DS_SEMANTIC.element.divider,
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: DS_SPACING[200],
+    paddingTop: DS_SPACING[400],
+    paddingBottom: DS_SPACING[600],
+    // A fixed floor (not a spacing token — this is an accessibility guideline number, not a design
+    // choice) so the tab's compact visual padding still guarantees a touch target.
+    minHeight: DS_A11Y_MIN_TOUCH_TARGET,
+  },
+  tabPressed: {
+    backgroundColor: DS_SEMANTIC.interaction.pressed,
+    borderRadius: DS_RADIUS.small,
+  },
+  label: {
+    // Matches the section-header label size (labelXs) it stands in for.
+    ...DS_TYPOGRAPHY.labelXs,
+    // Pin the line box to the badge height (18) so a tab is the same height with or without a count
+    // badge — otherwise the taller badged tab grows the row and shifts the divider/content below it.
+    lineHeight: 18,
+  },
+  // The sliding underline, sat on the hairline rule beneath the selected tab.
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    bottom: -StyleSheet.hairlineWidth,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_HEIGHT / 2,
+    backgroundColor: DS_SEMANTIC.text.regular,
+  },
+  // Fixed-diameter circle so the count badge stays round. 18 doesn't match a DS_SPACING/DS_ICON_SIZE
+  // step (16/20 are the neighbors) — sized to comfortably fit a 1-2 digit count at labelXs.
+  badge: {
+    width: 18,
+    height: 18,
+    borderRadius: DS_RADIUS.round,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: {
+    ...DS_TYPOGRAPHY.labelXs,
+    // Pinned to the badge's own 18px diameter (above) so the count sits centered in the circle.
+    lineHeight: 18,
+  },
+});

package/starter-kit/components/UnderlineTabs/index.ts

@@ -0,0 +1,2 @@
+export { UnderlineTabs } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabOption } from './UnderlineTabs';

package/starter-kit/components/index.ts

@@ -0,0 +1,36 @@
+/** Barrel for the React Native component tree. */
+export * from './AnimatedChevron';
+export * from './Avatar';
+export * from './Badge';
+export * from './Banner';
+export * from './BottomSheet';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './Card';
+export * from './Checkbox';
+export * from './Dialog';
+export * from './Divider';
+export * from './Dock';
+export * from './Dropdown';
+export * from './EmptyState';
+export * from './FieldContainer';
+export * from './InputClearButton';
+export * from './InputField';
+export * from './List';
+export * from './ListItem';
+export * from './Loading';
+export * from './Pill';
+export * from './PillRow';
+export * from './ProgressDots';
+export * from './Radio';
+export * from './SearchField';
+export * from './SectionHeader';
+export * from './SegmentedToggle';
+export * from './Shimmer';
+export * from './Surface';
+export * from './Switch';
+export * from './TextArea';
+export * from './Toast';
+export * from './Tooltip';
+export * from './TopNav';
+export * from './UnderlineTabs';

package/starter-kit/components/statusColors.ts

@@ -0,0 +1,27 @@
+import { DS_SEMANTIC } from '../tokens';
+
+/**
+ * The one shared status→color lookup behind every status-tinted component (Badge, Banner): a light
+ * tinted fill (`shade`) paired with a saturated foreground (`emphasis`), so a badge and a banner of
+ * the same status always read as the same color identity. Previously each component maintained its
+ * own identical copy of this map — one place to change now keeps them matched by construction.
+ * (Toast's variant map lives separately: its variant names differ (`success`/`informational`) and it
+ * bundles per-variant icons, so it's a different shape, not a third copy of this one.)
+ */
+export type StatusVariant = 'neutral' | 'info' | 'positive' | 'warning' | 'negative';
+
+export const STATUS_BG: Record<StatusVariant, string> = {
+  neutral: DS_SEMANTIC.shade.neutral,
+  info: DS_SEMANTIC.shade.info,
+  positive: DS_SEMANTIC.shade.positive,
+  warning: DS_SEMANTIC.shade.warning,
+  negative: DS_SEMANTIC.shade.negative,
+};
+
+export const STATUS_FG: Record<StatusVariant, string> = {
+  neutral: DS_SEMANTIC.emphasis.neutral,
+  info: DS_SEMANTIC.emphasis.info,
+  positive: DS_SEMANTIC.emphasis.positive,
+  warning: DS_SEMANTIC.emphasis.warning,
+  negative: DS_SEMANTIC.emphasis.negative,
+};

package/starter-kit/icons/Icon.native.tsx

@@ -0,0 +1,90 @@
+/**
+ * react-native-svg renderer for the shared icon data (`./paths`).
+ *
+ * Reads `ICON_PATHS[name]` and maps each primitive to the matching RN-SVG element. Stroke icons
+ * get round caps/joins in the Lucide style; fill icons render solid. Per-primitive `fill`/`stroke`
+ * overrides (used by the transit icons) win over the def-level mode.
+ */
+import React from 'react';
+import Svg, { Path, Rect, Circle, Line, Polyline, Polygon } from 'react-native-svg';
+import { DS_SEMANTIC, DS_ICON_SIZE } from '../tokens';
+import { ICON_PATHS, type IconPrimitive } from './paths';
+import type { IconRenderProps } from './types';
+
+export type IconProps = IconRenderProps & { accessibilityLabel?: string };
+
+/** Resolve a primitive's `'color' | 'none'` sentinel against the active icon color. */
+function resolvePaint(value: 'color' | 'none' | undefined, color: string): string | undefined {
+  if (value === undefined) return undefined;
+  return value === 'color' ? color : 'none';
+}
+
+export function Icon({
+  name,
+  size = DS_ICON_SIZE.sm,
+  color = DS_SEMANTIC.text.regular,
+  strokeWidth,
+  accessibilityLabel,
+}: IconProps) {
+  const def = ICON_PATHS[name];
+  if (!def) return null;
+
+  const isStroke = def.mode === 'stroke';
+  const defStrokeWidth = strokeWidth ?? def.strokeWidth ?? 2;
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={def.viewBox}
+      fill="none"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {def.primitives.map((p, i) => {
+        // Per-primitive override wins; otherwise fall back to the def mode.
+        const fill = resolvePaint(p.fill, color) ?? (isStroke ? 'none' : color);
+        const stroke = resolvePaint(p.stroke, color) ?? (isStroke ? color : undefined);
+        const hasStroke = stroke !== undefined && stroke !== 'none';
+
+        const common: Record<string, unknown> = { fill, fillRule: p.fillRule };
+        if (hasStroke) {
+          common.stroke = stroke;
+          common.strokeWidth = p.strokeWidth ?? defStrokeWidth;
+          // Round caps/joins are the Lucide house style; only apply for stroke-mode icons.
+          if (isStroke) {
+            common.strokeLinecap = 'round';
+            common.strokeLinejoin = 'round';
+          }
+        }
+        // A `transform` string (not `translateX`/`translateY` props) — react-native-svg's web
+        // shim only folds `translateX`/`translateY` into the SVG `transform` attribute, it does not
+        // strip the original props first, so they would otherwise also reach the DOM unchanged and
+        // React would warn "does not recognize the `translateX` prop on a DOM element".
+        if (p.translateX !== undefined || p.translateY !== undefined) {
+          common.transform = `translate(${p.translateX ?? 0}, ${p.translateY ?? 0})`;
+        }
+
+        return renderPrimitive(p, common, i);
+      })}
+    </Svg>
+  );
+}
+
+function renderPrimitive(p: IconPrimitive, common: Record<string, unknown>, key: number): React.ReactElement | null {
+  switch (p.tag) {
+    case 'path':
+      return <Path key={key} {...common} d={p.d} />;
+    case 'rect':
+      return <Rect key={key} {...common} x={p.x} y={p.y} width={p.width} height={p.height} rx={p.rx} ry={p.ry} />;
+    case 'circle':
+      return <Circle key={key} {...common} cx={p.cx} cy={p.cy} r={p.r} />;
+    case 'line':
+      return <Line key={key} {...common} x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} />;
+    case 'polyline':
+      return <Polyline key={key} {...common} points={p.points} />;
+    case 'polygon':
+      return <Polygon key={key} {...common} points={p.points} />;
+    default:
+      return null;
+  }
+}

package/starter-kit/icons/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared icon layer barrel.
+ *
+ * Exposes the platform-neutral data + types only. Consumers import the renderer explicitly as
+ * `../icons/Icon.native` (the only renderer today — see the repo README for how a future platform
+ * port would add its own `Icon.<platform>.tsx` alongside it without touching this data).
+ */
+export { ICON_PATHS } from './paths';
+export type { IconPrimitive, IconDef } from './paths';
+export type { IconName, IconRenderProps } from './types';