Separator

import * as React from "react";
import { Image, Pressable, View } from "react-native";
import { BAND_STAGGER, SwitchOn } from "@lumioui/core";
import { Separator } from "../separator";
import { Text } from "../../text/text";

const FARE: [string, string][] = [
  ["Trip fare · 7.8 mi, 22 min", "$17.40"],
  ["Booking fee", "$2.35"],
  ["Airport surcharge", "$4.00"],
];
const TIPS = [0, 2, 3, 5];

/** SeparatorReceipt — hairline rules grouping a ride receipt: who drove,
 *  what it cost, how it was paid. The receipt prints as structure switching
 *  on: each band lights 120ms after the last and each rule draws from its
 *  leading edge in its band slot; a perforated tear line sets off the stub.
 *  The tip row is live, so the total under the last rule updates. Neutral ink. */
export function SeparatorReceipt() {
  const [tip, setTip] = React.useState(3);
  const total = 17.4 + 2.35 + 4 + tip;
  return (
    <View className="w-full gap-4 rounded-3xl bg-card p-5">
      <SwitchOn className="flex-row items-center gap-3">
        <Image
          source={{ uri: "https://i.pravatar.cc/150?img=60" }}
          className="h-12 w-12 rounded-full bg-muted"
          accessibilityIgnoresInvertColors
        />
        <View className="flex-1">
          <Text className="text-[17px] font-semibold">Ride with Kwame</Text>
          <Text variant="muted">Grey hybrid · 7KJR 204 · Tue 6:42 PM</Text>
        </View>
      </SwitchOn>

      <Separator draw drawDelay={BAND_STAGGER} />

      <SwitchOn delay={BAND_STAGGER} className="gap-3">
        {FARE.map(([label, amt]) => (
          <View key={label} className="flex-row justify-between gap-3">
            <Text className="flex-1 text-[15px] text-muted-foreground">{label}</Text>
            <Text className="text-[15px] tabular-nums">{amt}</Text>
          </View>
        ))}
        <View className="flex-row items-center justify-between gap-3">
          <Text className="text-[15px] text-muted-foreground">Tip</Text>
          <View className="flex-row gap-1">
            {TIPS.map((t) => (
              <Pressable
                key={t}
                onPress={() => setTip(t)}
                hitSlop={6}
                accessibilityRole="button"
                accessibilityLabel={t === 0 ? "No tip" : `Tip $${t}`}
                accessibilityState={{ selected: tip === t }}
                className={`h-8 min-w-[48px] items-center justify-center rounded-full px-3 ${
                  tip === t ? "bg-primary" : "bg-secondary"
                }`}
              >
                <Text
                  className={`text-sm font-medium tabular-nums ${
                    tip === t ? "text-primary-foreground" : "text-secondary-foreground"
                  }`}
                >
                  {t === 0 ? "None" : `$${t}`}
                </Text>
              </Pressable>
            ))}
          </View>
        </View>
      </SwitchOn>

      <Separator draw drawDelay={BAND_STAGGER * 2} />

      <SwitchOn delay={BAND_STAGGER * 2} className="flex-row items-baseline justify-between">
        <Text className="text-[17px] font-semibold">Total</Text>
        <Text className="text-3xl font-semibold tracking-tight tabular-nums">${total.toFixed(2)}</Text>
      </SwitchOn>

      <Separator perforated draw drawDelay={BAND_STAGGER * 3} className="my-1" />

      <SwitchOn delay={BAND_STAGGER * 3}>
        <Text variant="muted">Charged to card •• 7731 · Receipt sent to your email</Text>
      </SwitchOn>
    </View>
  );
}

import * as React from "react";
import { Pressable, View } from "react-native";
import { ROW_STAGGER, useHaptic } from "@lumioui/core";
import { Separator } from "../separator";
import { Icon, type IconName } from "../../icon/icon";
import { Text } from "../../text/text";

type Tool = { icon: IconName; label: string; toggle?: boolean };

const GROUPS: Tool[][] = [
  [
    { icon: "type", label: "Text style" },
    { icon: "list", label: "Bulleted list", toggle: true },
    { icon: "check-circle", label: "Checklist", toggle: true },
  ],
  [
    { icon: "image", label: "Insert photo" },
    { icon: "paperclip", label: "Attach file" },
  ],
  [{ icon: "mic", label: "Dictate", toggle: true }],
];

function ToolButton({ tool, on, onPress }: { tool: Tool; on: boolean; onPress: () => void }) {
  return (
    <Pressable
      onPress={onPress}
      className={`h-11 w-11 items-center justify-center rounded-xl ${on ? "bg-secondary" : ""}`}
      accessibilityRole="button"
      accessibilityLabel={tool.label}
      accessibilityState={tool.toggle ? { selected: on } : undefined}
    >
      <Icon name={tool.icon} size="md" color={on ? "foreground" : "mutedForeground"} />
    </Pressable>
  );
}

/** SeparatorVertical — vertical rules splitting a note editor's formatting
 *  bar into groups (format · insert · voice), the notes keyboard-bar
 *  idiom. The group rules draw top-down as the bar arrives, 40ms apart.
 *  List and checklist are mutually exclusive toggles. */
export function SeparatorVertical() {
  const haptics = useHaptic();
  const [active, setActive] = React.useState<string[]>(["Checklist"]);
  const press = (t: Tool) => {
    haptics.selection();
    if (!t.toggle) return;
    setActive((a) => {
      if (a.includes(t.label)) return a.filter((x) => x !== t.label);
      const rest = a.filter((x) => x !== "Bulleted list" && x !== "Checklist");
      return t.label === "Dictate" ? [...a, t.label] : [...rest, t.label];
    });
  };
  const checklist = active.includes("Checklist");
  const bullets = active.includes("Bulleted list");
  const items = ["Confirm caterer headcount (34)", "Book the Ridgeline cabins", "Print name badges"];
  return (
    <View className="w-full overflow-hidden rounded-3xl bg-card">
      <View className="gap-3 p-5">
        <Text className="text-2xl font-bold tracking-tight">Team offsite</Text>
        <Text variant="muted">Edited just now</Text>
        <View className="gap-2 pt-1">
          {items.map((it, i) => (
            <View key={it} className="flex-row items-center gap-3">
              {checklist ? (
                <View
                  className={`h-5 w-5 items-center justify-center rounded-full ${
                    i === 0 ? "bg-primary" : "border border-input"
                  }`}
                >
                  {i === 0 ? <Icon name="check" size="sm" color="primaryForeground" strokeWidth={3} /> : null}
                </View>
              ) : bullets ? (
                <View className="mx-2 h-1 w-1 rounded-full bg-foreground" />
              ) : null}
              <Text
                className={`flex-1 text-base ${checklist && i === 0 ? "text-muted-foreground line-through" : ""}`}
              >
                {it}
              </Text>
            </View>
          ))}
        </View>
        {active.includes("Dictate") ? (
          <Text className="text-sm text-primary-text">Listening…</Text>
        ) : null}
      </View>

      <View className="flex-row items-center gap-1 border-t border-border px-2 py-1">
        {GROUPS.map((group, gi) => (
          <React.Fragment key={gi}>
            {gi > 0 ? <Separator orientation="vertical" draw drawDelay={gi * ROW_STAGGER} className="mx-1 h-6" /> : null}
            {group.map((t) => (
              <ToolButton key={t.label} tool={t} on={active.includes(t.label)} onPress={() => press(t)} />
            ))}
          </React.Fragment>
        ))}
        <View className="flex-1" />
        <ToolButton tool={{ icon: "chevron-down", label: "Hide keyboard" }} on={false} onPress={() => haptics.light()} />
      </View>
    </View>
  );
}