FocusStatusChip

Code

import { FocusAvatar, FocusStatusChip, focusStateOf, usePomodoro } from "@fadymondy/nasaq/web";export function HeaderStatus({ name }: { name: string }) {  const pomodoro = usePomodoro();  const state = focusStateOf(pomodoro);  return (    <div className="flex items-center gap-3">      <FocusStatusChip state={state} seconds={pomodoro.seconds} />      <FocusAvatar name={name} state={state} />    </div>  );}

Productivity · beta

Live examples and controls: FocusStatusChip in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/focus-status.json

What a person is doing right now, in three small pieces. FocusStatusChip is the compact header chip ("In focus 12:34"). FocusAvatar is an Avatar with a presence dot at its inline end. DoNotDisturbToggle is the switch row that silences notifications. focusStateOf turns a pomodoro and the do not disturb switch into one of four states: available, focus, break, dnd.

When to useCopy Anchor Link

• Showing your own status in an app header, and your teammates' on their avatars.
• Pairing with usePomodoro so focusing updates presence by itself.

When not to useCopy Anchor Link

• A generic state in a table or list: use Status.
• Online or offline connection state: use WsStatus.

ImportCopy Anchor Link

import { DoNotDisturbToggle, FocusAvatar, FocusStatusChip, focusStateOf } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { FocusAvatar, FocusStatusChip, focusStateOf, usePomodoro } from "@fadymondy/nasaq/web";

export function HeaderStatus({ name }: { name: string }) {
  const pomodoro = usePomodoro();
  const state = focusStateOf(pomodoro);
  return (
    <div className="flex items-center gap-3">
      <FocusStatusChip state={state} seconds={pomodoro.seconds} />
      <FocusAvatar name={name} state={state} />
    </div>
  );
}

AnatomyCopy Anchor Link

FocusStatusChip                 data-slot="focus-status", data-state
├─ icon                         a different glyph per state
├─ label                        or `text`
└─ mm:ss                        while focusing or on a break
FocusAvatar                     data-slot="focus-avatar", data-state
├─ Avatar
└─ presence dot                 role="img" with the state as its name
DoNotDisturbToggle              data-slot="do-not-disturb", data-state
├─ label, description, "Until" time
└─ Switch

APICopy Anchor Link

FocusStatusChipCopy Anchor Link

FocusAvatarCopy Anchor Link

Takes every Avatar prop (name, src, size, shape) plus state, hideAvailable? (no dot when available) and labels?. Larger sizes show the state icon in the dot; small sizes show a plain dot with the same accessible name.

DoNotDisturbToggleCopy Anchor Link

focusStateOf(input, dnd?)Copy Anchor Link

(input: { phase, status } | null | undefined, dnd = false) => FocusState. Do not disturb wins. A running or paused focus is focus, a running or paused break is break, anything not started is available. A PomodoroController fits input.

ExamplesCopy Anchor Link

Task name in the chipCopy Anchor Link

<FocusStatusChip state="focus" seconds={754} text="Design review" onClick={openPomodoro} />

Team listCopy Anchor Link

{people.map((p) => (
  <li key={p.id}><FocusAvatar name={p.name} src={p.avatar} state={p.state} /> {p.name}</li>
))}

Do not disturb winsCopy Anchor Link

const [dnd, setDnd] = useState(false);
const state = focusStateOf(pomodoro, dnd);
<DoNotDisturbToggle checked={dnd} onCheckedChange={setDnd} until="6:00 PM" />

AccessibilityCopy Anchor Link

• Each state has its own icon and word, so it is not colour only. The presence dot is role="img" with the state as its name.
• The time has an aria-label such as "12:34 left".
• Localise labels for other languages.

RTL & i18nCopy Anchor Link

• The dot sits at the inline end of the avatar, so it flips in RTL. The mm:ss stays left-to-right.
• Built-in English and Arabic strings follow the Nasaq locale.

Styling & tokensCopy Anchor Link

Tokens only (bg-nq-success, bg-primary, bg-nq-warning-soft, border-background). Target data-state on each part. Pass className for layout.

Do / Don'tCopy Anchor Link

• Do show do not disturb even during focus; it is the stronger signal.
• Don't rely on the dot colour alone in your own layouts; keep the label or title.
• Don't use it for connection state.

RelatedCopy Anchor Link

• Pomodoro
• Avatar
• Status
• Countdown

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-productivity-focus-status--docs