{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "opsinjs", "homepage": "https://opsinjs.pensievelabs.org", "items": [ { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Sections that expand one at a time.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/accordion.tsx", "type": "registry:ui", "target": "@ui/accordion.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Accordion installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/accordion before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "navigation", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "disclosure", "expander", "collapsible" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/accordion", "markdown": "https://opsinjs.pensievelabs.org/components/accordion.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "alert-banner", "type": "registry:ui", "title": "AlertBanner", "description": "A prominent message about something that needs the reader's attention now.", "categories": [ "health-communication" ], "registryDependencies": [ "@opsinjs/status-pill", "@opsinjs/button", "@opsinjs/relative-time", "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/alert-banner.tsx", "type": "registry:ui", "target": "@ui/alert-banner.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "AlertBanner installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/alert-banner before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "warning banner", "notification banner", "inline alert", "warning", "notification", "alert", "banner" ], "governedBy": [ "two-colour-axes", "clinical-status-semantics", "alarm-fatigue", "motion-in-health-ui", "emergency-and-escalation", "notifications-and-off-screen-alerts", "crisis-and-self-harm", "delivering-difficult-results" ], "usedIn": [ "alert-escalation", "choose-a-component", "forms/error-summaries", "offline-and-stale-data", "result-disclosure", "results-screen", "staged-alert" ], "docs": "https://opsinjs.pensievelabs.org/components/alert-banner", "markdown": "https://opsinjs.pensievelabs.org/components/alert-banner.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "status" ] } } }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A picture or initials standing for a person.", "categories": [ "utility" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/bases/base/avatar.tsx", "type": "registry:ui", "target": "@ui/avatar.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Avatar installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/avatar before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "utility", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "profile picture", "initials", "user image" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/avatar", "markdown": "https://opsinjs.pensievelabs.org/components/avatar.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A small label attached to something else.", "categories": [ "data-display" ], "files": [ { "path": "registry/bases/base/badge.tsx", "type": "registry:ui", "target": "@ui/badge.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Badge installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/badge before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "counter", "label chip" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/badge", "markdown": "https://opsinjs.pensievelabs.org/components/badge.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "body-map", "type": "registry:ui", "title": "BodyMap", "description": "A diagram of a body for pointing at where something hurts.", "categories": [ "health-input" ], "files": [ { "path": "registry/bases/base/body-map.tsx", "type": "registry:ui", "target": "@ui/body-map.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "BodyMap installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/body-map before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "pain map", "anatomy diagram", "where does it hurt" ], "governedBy": [ "two-colour-axes" ], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/body-map", "markdown": "https://opsinjs.pensievelabs.org/components/body-map.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "The control that makes something happen.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/button.tsx", "type": "registry:ui", "target": "@ui/button.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Button installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/button before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "cta", "action", "submit", "primary button" ], "governedBy": [], "usedIn": [ "consent-and-permissions", "consent-flow", "daily-log-entry", "daily-log-screen", "diabetes-medicines-app", "empty-and-first-use", "forms/error-summaries", "forms/question-pages", "health-metric-card", "onboarding-and-first-run", "onboarding-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/button", "markdown": "https://opsinjs.pensievelabs.org/components/button.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "callout", "type": "registry:ui", "title": "Callout", "description": "A short piece of set-apart information that helps you understand what you are reading without claiming anything about your health, whether it is a note, a tip or a caveat.", "categories": [ "feedback" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/bases/base/callout.tsx", "type": "registry:ui", "target": "@ui/callout.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Callout installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/callout before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "admonition", "note box", "info box", "tip", "note", "aside" ], "governedBy": [], "usedIn": [ "alert-escalation", "choose-a-component", "consent-and-permissions", "consent-flow", "diabetes-medicines-app", "empty-and-first-use", "forms/error-summaries", "offline-and-stale-data", "onboarding-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/callout", "markdown": "https://opsinjs.pensievelabs.org/components/callout.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A bounded block of related content.", "categories": [ "surfaces" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/surface" ], "files": [ { "path": "registry/bases/base/card.tsx", "type": "registry:ui", "target": "@ui/card.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Card installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/card before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "surfaces", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "panel", "container", "content box", "box", "tile group" ], "governedBy": [], "usedIn": [ "choose-a-component", "daily-log-screen", "diabetes-medicines-app", "health-metric-card", "onboarding-screen", "results-screen", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/card", "markdown": "https://opsinjs.pensievelabs.org/components/card.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "materials", "neutral" ] } } }, { "name": "care-card", "type": "registry:ui", "title": "CareCard", "description": "A card saying what to do next, and how urgently.", "categories": [ "health-communication" ], "registryDependencies": [ "@opsinjs/card", "@opsinjs/button", "@opsinjs/status-pill", "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/care-card.tsx", "type": "registry:ui", "target": "@ui/care-card.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "CareCard installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/care-card before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "what to do next", "action card", "advice card", "next steps", "guidance card", "what to do", "advice" ], "governedBy": [ "two-colour-axes", "clinical-status-semantics", "alarm-fatigue", "clinical-interaction-guidelines", "emergency-and-escalation" ], "usedIn": [ "alert-escalation", "ask-users-for/contact-details", "ask-users-for/symptoms", "choose-a-component", "consent-and-permissions", "diabetes-medicines-app", "empty-and-first-use", "offline-and-stale-data", "onboarding-and-first-run", "onboarding-screen", "result-disclosure", "results-screen", "sharing-with-a-clinician", "staged-alert" ], "docs": "https://opsinjs.pensievelabs.org/components/care-card", "markdown": "https://opsinjs.pensievelabs.org/components/care-card.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "A box for choosing any number of options, including none.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/checkbox.tsx", "type": "registry:ui", "target": "@ui/checkbox.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Checkbox installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/checkbox before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "tick box", "multi select" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/checkbox", "markdown": "https://opsinjs.pensievelabs.org/components/checkbox.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A text input that filters a list as you type.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/combobox.tsx", "type": "registry:ui", "target": "@ui/combobox.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Combobox installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/combobox before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "autocomplete", "typeahead", "search select" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/combobox", "markdown": "https://opsinjs.pensievelabs.org/components/combobox.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "consent-sheet", "type": "registry:ui", "title": "ConsentSheet", "description": "A sheet that asks permission for one specific thing, and records the answer.", "categories": [ "health-communication" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/sheet", "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/consent-sheet.tsx", "type": "registry:ui", "target": "@ui/consent-sheet.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ConsentSheet installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/consent-sheet before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "consent", "permission", "opt in", "data sharing", "agree" ], "governedBy": [ "consent-and-disclosure", "clinical-interaction-guidelines", "crisis-and-self-harm", "regulatory-context" ], "usedIn": [ "ask-users-for/contact-details", "consent-and-permissions", "consent-before-collection", "consent-flow", "diabetes-medicines-app", "forms/required-and-optional", "onboarding-and-first-run", "onboarding-screen", "sharing-with-a-clinician" ], "docs": "https://opsinjs.pensievelabs.org/components/consent-sheet", "markdown": "https://opsinjs.pensievelabs.org/components/consent-sheet.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A window that interrupts, for the one decision that cannot wait.", "categories": [ "surfaces" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [ "@opsinjs/surface", "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/dialog.tsx", "type": "registry:ui", "target": "@ui/dialog.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Dialog installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/dialog before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "surfaces", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "modal", "alert dialog", "confirm", "popup" ], "governedBy": [], "usedIn": [ "alert-escalation", "consent-flow", "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/dialog", "markdown": "https://opsinjs.pensievelabs.org/components/dialog.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "materials", "neutral" ] } } }, { "name": "disclaimer-note", "type": "registry:ui", "title": "DisclaimerNote", "description": "The standing note about what this information is and is not.", "categories": [ "health-communication" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/disclaimer-note.tsx", "type": "registry:ui", "target": "@ui/disclaimer-note.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "DisclaimerNote installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/disclaimer-note before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "disclaimer", "not medical advice", "legal note", "small print", "safety note" ], "governedBy": [ "regulatory-context", "clinical-interaction-guidelines", "safety-review-checklist" ], "usedIn": [ "ask-users-for/ethnicity", "ask-users-for/height-and-weight", "ask-users-for/medications", "ask-users-for/sex-and-gender", "ask-users-for/symptoms", "choose-a-component", "consent-and-permissions", "consent-flow", "diabetes-medicines-app", "onboarding-and-first-run", "onboarding-screen", "result-disclosure", "results-screen", "sharing-with-a-clinician", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/disclaimer-note", "markdown": "https://opsinjs.pensievelabs.org/components/disclaimer-note.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "divider", "type": "registry:ui", "title": "Divider", "description": "A line separating two groups of content.", "categories": [ "layout" ], "files": [ { "path": "registry/bases/base/divider.tsx", "type": "registry:ui", "target": "@ui/divider.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Divider installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/divider before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "layout", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "separator", "rule" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/divider", "markdown": "https://opsinjs.pensievelabs.org/components/divider.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "dose-tracker", "type": "registry:ui", "title": "DoseTracker", "description": "A record of medicine doses taken and missed.", "categories": [ "health-input" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/relative-time" ], "files": [ { "path": "registry/bases/base/dose-tracker.tsx", "type": "registry:ui", "target": "@ui/dose-tracker.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "DoseTracker installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/dose-tracker before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "medication", "pill tracker", "dose", "adherence tracker" ], "governedBy": [ "clinical-interaction-guidelines", "uncertainty-and-staleness", "regulatory-context" ], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/dose-tracker", "markdown": "https://opsinjs.pensievelabs.org/components/dose-tracker.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "empty-state", "type": "registry:ui", "title": "EmptyState", "description": "What a screen shows when there is nothing to show, and what to do about it.", "categories": [ "feedback" ], "registryDependencies": [ "@opsinjs/button", "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/empty-state.tsx", "type": "registry:ui", "target": "@ui/empty-state.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "EmptyState installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/empty-state before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "no data", "nothing here", "zero state", "blank slate" ], "governedBy": [], "usedIn": [ "choose-a-component", "consent-flow", "daily-log-screen", "daily-logging", "diabetes-medicines-app", "empty-and-first-use", "onboarding-and-first-run", "onboarding-screen", "results-screen", "trend-review", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/empty-state", "markdown": "https://opsinjs.pensievelabs.org/components/empty-state.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "A labelled input with its help text, its error, and the wiring that connects them.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/field.tsx", "type": "registry:ui", "target": "@ui/field.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Field installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/field before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "form field", "input wrapper", "form control", "validation message", "label", "error message", "hint" ], "governedBy": [], "usedIn": [ "ask-users-for/contact-details", "ask-users-for/date-of-birth", "ask-users-for/ethnicity", "ask-users-for/height-and-weight", "ask-users-for/medications", "ask-users-for/name", "ask-users-for/sex-and-gender", "ask-users-for/symptoms", "consent-before-collection", "daily-log-entry", "daily-log-screen", "daily-logging", "diabetes-medicines-app", "forms/autocomplete-and-input-types", "forms/error-summaries", "forms/question-pages", "forms/required-and-optional", "forms/units-and-numeric-entry", "forms/validation-timing", "onboarding-and-first-run", "onboarding-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/field", "markdown": "https://opsinjs.pensievelabs.org/components/field.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "goal-ring", "type": "registry:ui", "title": "GoalRing", "description": "Progress towards a daily goal, drawn as a closing ring.", "categories": [ "health-data-display" ], "files": [ { "path": "registry/bases/base/goal-ring.tsx", "type": "registry:ui", "target": "@ui/goal-ring.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "GoalRing installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/goal-ring before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "activity ring", "close your rings", "daily goal" ], "governedBy": [ "two-colour-axes", "category-identity", "numbers-units-precision", "motion-in-health-ui" ], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/goal-ring", "markdown": "https://opsinjs.pensievelabs.org/components/goal-ring.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "neutral" ] } } }, { "name": "icon-button", "type": "registry:ui", "title": "IconButton", "description": "A button whose only visible content is an icon.", "categories": [ "actions-and-forms" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/icon-button.tsx", "type": "registry:ui", "target": "@ui/icon-button.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "IconButton installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/icon-button before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "glyph button", "round button" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/icon-button", "markdown": "https://opsinjs.pensievelabs.org/components/icon-button.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "link", "type": "registry:ui", "title": "Link", "description": "Navigation to somewhere else.", "categories": [ "actions-and-forms" ], "registryDependencies": [ "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/link.tsx", "type": "registry:ui", "target": "@ui/link.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Link installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/link before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "anchor", "hyperlink" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/link", "markdown": "https://opsinjs.pensievelabs.org/components/link.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "log-sheet", "type": "registry:ui", "title": "LogSheet", "description": "A form for writing down what happened today, in as few taps as possible.", "categories": [ "health-input" ], "registryDependencies": [ "@opsinjs/sheet", "@opsinjs/field", "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/log-sheet.tsx", "type": "registry:ui", "target": "@ui/log-sheet.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "LogSheet installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/log-sheet before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "log", "diary", "journal", "daily entry", "capture", "quick entry", "bottom sheet entry" ], "governedBy": [ "numbers-units-precision", "unit-systems", "consent-and-disclosure" ], "usedIn": [ "ask-users-for/height-and-weight", "ask-users-for/medications", "ask-users-for/symptoms", "daily-log-entry", "daily-log-screen", "daily-logging", "diabetes-medicines-app", "forms/autocomplete-and-input-types", "forms/question-pages", "forms/required-and-optional", "forms/units-and-numeric-entry", "forms/validation-timing" ], "docs": "https://opsinjs.pensievelabs.org/components/log-sheet", "markdown": "https://opsinjs.pensievelabs.org/components/log-sheet.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "neutral" ] } } }, { "name": "menu", "type": "registry:ui", "title": "Menu", "description": "A list of actions opened from a button.", "categories": [ "overlay" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/menu.tsx", "type": "registry:ui", "target": "@ui/menu.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Menu installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/menu before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "overlay", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "dropdown menu", "context menu", "overflow menu" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/menu", "markdown": "https://opsinjs.pensievelabs.org/components/menu.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "metric-tile", "type": "registry:ui", "title": "MetricTile", "description": "A compact tile showing one reading, its unit and when it was taken.", "categories": [ "health-data-display" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/surface", "@opsinjs/value", "@opsinjs/status-pill", "@opsinjs/relative-time" ], "files": [ { "path": "registry/bases/base/metric-tile.tsx", "type": "registry:ui", "target": "@ui/metric-tile.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "MetricTile installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/metric-tile before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "stat", "kpi", "vitals", "summary tile", "steps", "resting heart rate", "spo2", "tile" ], "governedBy": [ "category-identity", "clinical-interaction-guidelines", "clinical-status-semantics", "data-provenance-and-device-accuracy", "numbers-units-precision", "on-screen-privacy", "reference-ranges", "trends-and-change", "two-colour-axes", "uncertainty-and-staleness", "unit-systems" ], "usedIn": [ "alert-escalation", "choose-a-component", "daily-log-screen", "empty-and-first-use", "health-metric-card", "offline-and-stale-data", "results-screen", "trend-review", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/metric-tile", "markdown": "https://opsinjs.pensievelabs.org/components/metric-tile.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "materials", "neutral" ] } } }, { "name": "number-field", "type": "registry:ui", "title": "NumberField", "description": "An input for a number, with steppers.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/number-field.tsx", "type": "registry:ui", "target": "@ui/number-field.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "NumberField installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/number-field before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "stepper input", "quantity input" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/number-field", "markdown": "https://opsinjs.pensievelabs.org/components/number-field.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A small panel anchored to the control that opened it.", "categories": [ "overlay" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/popover.tsx", "type": "registry:ui", "target": "@ui/popover.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Popover installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/popover before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "overlay", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "anchored panel", "flyout" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/popover", "markdown": "https://opsinjs.pensievelabs.org/components/popover.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "How far through something the reader is.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/progress.tsx", "type": "registry:ui", "target": "@ui/progress.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Progress installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/progress before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "progress bar", "completion" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/progress", "markdown": "https://opsinjs.pensievelabs.org/components/progress.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "questionnaire", "type": "registry:ui", "title": "Questionnaire", "description": "A multi-question form for a validated instrument such as a symptom score.", "categories": [ "health-input" ], "files": [ { "path": "registry/bases/base/questionnaire.tsx", "type": "registry:ui", "target": "@ui/questionnaire.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Questionnaire installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/questionnaire before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "survey", "assessment", "phq", "screening form" ], "governedBy": [ "clinical-interaction-guidelines", "regulatory-context", "evidence-and-references", "who-this-is-for" ], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/questionnaire", "markdown": "https://opsinjs.pensievelabs.org/components/questionnaire.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "radio-group", "type": "registry:ui", "title": "RadioGroup", "description": "A set of options where exactly one can be chosen.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/radio-group.tsx", "type": "registry:ui", "target": "@ui/radio-group.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "RadioGroup installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/radio-group before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "radio buttons", "single choice" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/radio-group", "markdown": "https://opsinjs.pensievelabs.org/components/radio-group.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "range-bar", "type": "registry:ui", "title": "RangeBar", "description": "A bar showing where one reading sits against the range it is compared with.", "categories": [ "health-data-display" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/value", "@opsinjs/status-pill" ], "files": [ { "path": "registry/bases/base/range-bar.tsx", "type": "registry:ui", "target": "@ui/range-bar.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "RangeBar installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/range-bar before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "reference range", "normal range", "in range", "range indicator", "gauge bar" ], "governedBy": [ "two-colour-axes", "reference-ranges", "numbers-units-precision", "unit-systems" ], "usedIn": [ "choose-a-component", "result-disclosure", "results-screen", "trend-review", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/range-bar", "markdown": "https://opsinjs.pensievelabs.org/components/range-bar.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "neutral", "status" ] } } }, { "name": "range-legend", "type": "registry:ui", "title": "RangeLegend", "description": "The key explaining what the bands on a range mean.", "categories": [ "health-data-display" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/bases/base/range-legend.tsx", "type": "registry:ui", "target": "@ui/range-legend.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "RangeLegend installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/range-legend before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "key", "chart legend", "band legend" ], "governedBy": [ "reference-ranges", "two-colour-axes" ], "usedIn": [ "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/range-legend", "markdown": "https://opsinjs.pensievelabs.org/components/range-legend.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "status" ] } } }, { "name": "reading-input", "type": "registry:ui", "title": "ReadingInput", "description": "An input for typing in a measurement, with the unit shown and switchable beside the number.", "categories": [ "health-input" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/field" ], "files": [ { "path": "registry/bases/base/reading-input.tsx", "type": "registry:ui", "target": "@ui/reading-input.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ReadingInput installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/reading-input before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "enter a reading", "measurement input", "numeric entry", "manual entry", "numeric input", "unit switch" ], "governedBy": [ "numbers-units-precision", "unit-systems", "uncertainty-and-staleness" ], "usedIn": [ "ask-users-for/date-of-birth", "ask-users-for/height-and-weight", "ask-users-for/medications", "daily-log-entry", "daily-log-screen", "daily-logging", "forms/autocomplete-and-input-types", "forms/question-pages", "forms/units-and-numeric-entry", "forms/validation-timing", "onboarding-and-first-run", "onboarding-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/reading-input", "markdown": "https://opsinjs.pensievelabs.org/components/reading-input.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "relative-time", "type": "registry:ui", "title": "RelativeTime", "description": "When a reading was taken, said the way a person would say it.", "categories": [ "health-formatting" ], "files": [ { "path": "registry/bases/base/relative-time.tsx", "type": "registry:ui", "target": "@ui/relative-time.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "RelativeTime installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/relative-time before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-formatting", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "time ago", "timestamp", "last updated", "date display", "ago", "freshness", "staleness" ], "governedBy": [ "uncertainty-and-staleness", "numbers-units-precision" ], "usedIn": [ "choose-a-component", "daily-log-screen", "daily-logging", "diabetes-medicines-app", "health-metric-card", "offline-and-stale-data", "results-screen", "sharing-with-a-clinician", "trend-review", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/relative-time", "markdown": "https://opsinjs.pensievelabs.org/components/relative-time.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "result-card", "type": "registry:ui", "title": "ResultCard", "description": "One test result, showing the number, what it is compared against, and what it means.", "categories": [ "health-data-display" ], "registryDependencies": [ "@opsinjs/status-pill", "@opsinjs/value", "@opsinjs/range-bar", "@opsinjs/relative-time", "@opsinjs/button", "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/result-card.tsx", "type": "registry:ui", "target": "@ui/result-card.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ResultCard installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/result-card before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "results", "lab result", "test result", "report card", "blood pressure", "a1c" ], "governedBy": [ "two-colour-axes", "reference-ranges", "numbers-units-precision", "uncertainty-and-staleness", "clinical-status-semantics", "data-provenance-and-device-accuracy", "delivering-difficult-results", "on-screen-privacy" ], "usedIn": [ "choose-a-component", "health-metric-card", "result-disclosure", "results-screen", "sharing-with-a-clinician", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/result-card", "markdown": "https://opsinjs.pensievelabs.org/components/result-card.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "healthCategory": "labs", "contrastScopes": [ "category", "neutral" ] } } }, { "name": "scale-input", "type": "registry:ui", "title": "ScaleInput", "description": "A one-to-ten scale for rating something like pain or mood.", "categories": [ "health-input" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/scale-input.tsx", "type": "registry:ui", "target": "@ui/scale-input.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ScaleInput installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/scale-input before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "pain scale", "rating scale", "likert" ], "governedBy": [ "clinical-interaction-guidelines", "numbers-units-precision", "who-this-is-for" ], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/scale-input", "markdown": "https://opsinjs.pensievelabs.org/components/scale-input.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "score-dial", "type": "registry:ui", "title": "ScoreDial", "description": "A single composite number drawn as a ring, with the words that say what it counts.", "categories": [ "health-data-display" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/value", "@opsinjs/status-pill" ], "files": [ { "path": "registry/bases/base/score-dial.tsx", "type": "registry:ui", "target": "@ui/score-dial.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ScoreDial installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/score-dial before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "dial", "ring", "gauge", "score", "index", "bmi" ], "governedBy": [ "reference-ranges", "risk-and-statistics", "numbers-units-precision", "two-colour-axes", "motion-in-health-ui", "category-identity" ], "usedIn": [ "choose-a-component", "health-metric-card", "results-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/score-dial", "markdown": "https://opsinjs.pensievelabs.org/components/score-dial.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "neutral", "status" ] } } }, { "name": "scroll-area", "type": "registry:ui", "title": "ScrollArea", "description": "A scrolling region with styled scrollbars.", "categories": [ "layout" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/scroll-area.tsx", "type": "registry:ui", "target": "@ui/scroll-area.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "ScrollArea installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/scroll-area before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "layout", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "scroller", "overflow container" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/scroll-area", "markdown": "https://opsinjs.pensievelabs.org/components/scroll-area.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "segmented-control", "type": "registry:ui", "title": "SegmentedControl", "description": "A small row of mutually exclusive options.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/segmented-control.tsx", "type": "registry:ui", "target": "@ui/segmented-control.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "SegmentedControl installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/segmented-control before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "navigation", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "segmented buttons", "toggle group" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/segmented-control", "markdown": "https://opsinjs.pensievelabs.org/components/segmented-control.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Choosing one option from a list.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/select.tsx", "type": "registry:ui", "target": "@ui/select.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Select installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/select before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "dropdown", "picker" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/select", "markdown": "https://opsinjs.pensievelabs.org/components/select.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A panel that slides over the screen and can be dismissed by dragging.", "categories": [ "surfaces" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [ "@opsinjs/surface", "@opsinjs/button" ], "files": [ { "path": "registry/bases/base/sheet.tsx", "type": "registry:ui", "target": "@ui/sheet.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Sheet installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/sheet before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "surfaces", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "bottom sheet", "drawer", "side panel", "slide over", "modal sheet", "detent" ], "governedBy": [], "usedIn": [ "alert-escalation", "consent-and-permissions", "consent-flow", "daily-log-entry", "daily-log-screen", "daily-logging", "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/sheet", "markdown": "https://opsinjs.pensievelabs.org/components/sheet.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "materials", "neutral" ] } } }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "The shape of content that has not arrived yet.", "categories": [ "feedback" ], "files": [ { "path": "registry/bases/base/skeleton.tsx", "type": "registry:ui", "target": "@ui/skeleton.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Skeleton installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/skeleton before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "loading placeholder", "shimmer", "ghost", "loading state", "placeholder" ], "governedBy": [], "usedIn": [ "choose-a-component", "daily-log-screen", "empty-and-first-use", "offline-and-stale-data", "results-screen", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/skeleton", "markdown": "https://opsinjs.pensievelabs.org/components/skeleton.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Choosing a value by dragging along a track.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/slider.tsx", "type": "registry:ui", "target": "@ui/slider.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Slider installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/slider before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "range input", "drag to set" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/slider", "markdown": "https://opsinjs.pensievelabs.org/components/slider.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "source-citation", "type": "registry:ui", "title": "SourceCitation", "description": "Where a piece of health information came from, and when it was last checked.", "categories": [ "health-communication" ], "registryDependencies": [ "@opsinjs/link" ], "files": [ { "path": "registry/bases/base/source-citation.tsx", "type": "registry:ui", "target": "@ui/source-citation.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "SourceCitation installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/source-citation before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "citation", "evidence link", "reviewed by" ], "governedBy": [ "data-provenance-and-device-accuracy", "evidence-and-references" ], "usedIn": [ "diabetes-medicines-app", "results-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/source-citation", "markdown": "https://opsinjs.pensievelabs.org/components/source-citation.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "spinner", "type": "registry:ui", "title": "Spinner", "description": "An indeterminate loading indicator.", "categories": [ "feedback" ], "files": [ { "path": "registry/bases/base/spinner.tsx", "type": "registry:ui", "target": "@ui/spinner.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Spinner installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/spinner before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "loader", "busy indicator", "activity indicator" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/spinner", "markdown": "https://opsinjs.pensievelabs.org/components/spinner.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "status-pill", "type": "registry:ui", "title": "StatusPill", "description": "A short label saying what a reading means and what, if anything, to do about it.", "categories": [ "health-data-display" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/bases/base/status-pill.tsx", "type": "registry:ui", "target": "@ui/status-pill.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "StatusPill installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/status-pill before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "chip", "status chip", "status badge", "status label", "traffic light" ], "governedBy": [ "clinical-status-semantics", "two-colour-axes", "alarm-fatigue", "category-identity" ], "usedIn": [ "alert-escalation", "choose-a-component", "health-metric-card", "offline-and-stale-data", "result-disclosure", "results-screen", "staged-alert", "trend-review", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/status-pill", "markdown": "https://opsinjs.pensievelabs.org/components/status-pill.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "status" ] } } }, { "name": "stepper", "type": "registry:ui", "title": "Stepper", "description": "Progress through a sequence of steps.", "categories": [ "navigation" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/bases/base/stepper.tsx", "type": "registry:ui", "target": "@ui/stepper.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Stepper installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/stepper before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "navigation", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "wizard", "step indicator", "multi step" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/stepper", "markdown": "https://opsinjs.pensievelabs.org/components/stepper.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "surface", "type": "registry:ui", "title": "Surface", "description": "The base panel every other surface is built from, at one of six material rungs.", "categories": [ "surfaces" ], "files": [ { "path": "registry/bases/base/surface.tsx", "type": "registry:ui", "target": "@ui/surface.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Surface installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/surface before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "surfaces", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "material", "glass", "blur", "elevation", "layer", "translucency", "vibrancy" ], "governedBy": [], "usedIn": [ "choose-a-component", "daily-log-screen", "diabetes-medicines-app", "health-metric-card", "onboarding-screen", "results-screen", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/surface", "markdown": "https://opsinjs.pensievelabs.org/components/surface.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "materials", "neutral" ] } } }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "An on-or-off control that takes effect immediately.", "categories": [ "actions-and-forms" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/switch.tsx", "type": "registry:ui", "target": "@ui/switch.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Switch installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/switch before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "toggle" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/switch", "markdown": "https://opsinjs.pensievelabs.org/components/switch.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "symptom-picker", "type": "registry:ui", "title": "SymptomPicker", "description": "A picker for choosing symptoms from a controlled list.", "categories": [ "health-input" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/symptom-picker.tsx", "type": "registry:ui", "target": "@ui/symptom-picker.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "SymptomPicker installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/symptom-picker before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-input", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "symptoms", "how are you feeling", "symptom checker" ], "governedBy": [ "clinical-interaction-guidelines", "regulatory-context", "who-this-is-for" ], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/symptom-picker", "markdown": "https://opsinjs.pensievelabs.org/components/symptom-picker.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "tab-bar", "type": "registry:ui", "title": "TabBar", "description": "The persistent bar of top-level destinations at the bottom of the screen.", "categories": [ "navigation" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "@opsinjs/surface" ], "files": [ { "path": "registry/bases/base/tab-bar.tsx", "type": "registry:ui", "target": "@ui/tab-bar.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "TabBar installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/tab-bar before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "navigation", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "bottom navigation", "nav bar" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/tab-bar", "markdown": "https://opsinjs.pensievelabs.org/components/tab-bar.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "materials", "neutral" ] } } }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Rows and columns of data.", "categories": [ "data-display" ], "files": [ { "path": "registry/bases/base/table.tsx", "type": "registry:ui", "target": "@ui/table.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Table installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/table before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "data table", "grid", "rows and columns" ], "governedBy": [], "usedIn": [ "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/table", "markdown": "https://opsinjs.pensievelabs.org/components/table.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Switching between views that occupy the same space.", "categories": [ "navigation" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/tabs.tsx", "type": "registry:ui", "target": "@ui/tabs.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Tabs installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/tabs before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "navigation", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "tab list", "view switcher" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/tabs", "markdown": "https://opsinjs.pensievelabs.org/components/tabs.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "term", "type": "registry:ui", "title": "Term", "description": "A clinical word with its everyday meaning attached, so a sentence can be read without leaving it.", "categories": [ "health-communication" ], "files": [ { "path": "registry/bases/base/term.tsx", "type": "registry:ui", "target": "@ui/term.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Term installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/term before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-communication", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "glossary term", "jargon", "plain word", "definition", "plain english", "tooltip term" ], "governedBy": [ "who-this-is-for", "clinical-interaction-guidelines" ], "usedIn": [ "ask-users-for/ethnicity", "ask-users-for/medications", "ask-users-for/sex-and-gender", "ask-users-for/symptoms", "choose-a-component", "consent-and-permissions", "consent-flow", "diabetes-medicines-app", "onboarding-screen", "result-disclosure", "results-screen", "trends-screen", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/term", "markdown": "https://opsinjs.pensievelabs.org/components/term.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "A multi-line text input.", "categories": [ "actions-and-forms" ], "files": [ { "path": "registry/bases/base/textarea.tsx", "type": "registry:ui", "target": "@ui/textarea.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Textarea installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/textarea before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "actions-and-forms", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "long text", "notes input" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/textarea", "markdown": "https://opsinjs.pensievelabs.org/components/textarea.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "timeline-entry", "type": "registry:ui", "title": "TimelineEntry", "description": "One dated event in a vertical history.", "categories": [ "health-data-display" ], "registryDependencies": [ "@opsinjs/relative-time", "@opsinjs/status-pill" ], "files": [ { "path": "registry/bases/base/timeline-entry.tsx", "type": "registry:ui", "target": "@ui/timeline-entry.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "TimelineEntry installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/timeline-entry before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "history item", "event list", "activity feed" ], "governedBy": [ "uncertainty-and-staleness", "trends-and-change" ], "usedIn": [ "daily-log-screen", "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/timeline-entry", "markdown": "https://opsinjs.pensievelabs.org/components/timeline-entry.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "A brief message that appears and disappears on its own.", "categories": [ "feedback" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "files": [ { "path": "registry/bases/base/toast.tsx", "type": "registry:ui", "target": "@ui/toast.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Toast installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/toast before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "feedback", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "design", "aliases": [ "snackbar", "transient message", "notification toast" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/toast", "markdown": "https://opsinjs.pensievelabs.org/components/toast.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A short label that appears on hover or focus.", "categories": [ "overlay" ], "dependencies": [ "@base-ui/react" ], "files": [ { "path": "registry/bases/base/tooltip.tsx", "type": "registry:ui", "target": "@ui/tooltip.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Tooltip installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/tooltip before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "overlay", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "hover label" ], "governedBy": [], "usedIn": [], "docs": "https://opsinjs.pensievelabs.org/components/tooltip", "markdown": "https://opsinjs.pensievelabs.org/components/tooltip.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral", "materials" ] } } }, { "name": "trend-sparkline", "type": "registry:ui", "title": "TrendSparkline", "description": "A small chart of one reading over time, with an honest caption saying what changed.", "categories": [ "health-data-display" ], "registryDependencies": [ "@opsinjs/status-pill", "@opsinjs/value" ], "files": [ { "path": "registry/bases/base/trend-sparkline.tsx", "type": "registry:ui", "target": "@ui/trend-sparkline.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "TrendSparkline installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/trend-sparkline before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-data-display", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "clinical", "aliases": [ "sparkline", "trend", "over time", "mini chart", "line chart", "chart", "graph" ], "governedBy": [ "trends-and-change", "numbers-units-precision", "uncertainty-and-staleness", "category-identity" ], "usedIn": [ "choose-a-component", "sharing-with-a-clinician", "trend-review", "trend-with-a-caption", "trends-screen" ], "docs": "https://opsinjs.pensievelabs.org/components/trend-sparkline", "markdown": "https://opsinjs.pensievelabs.org/components/trend-sparkline.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "category", "neutral" ] } } }, { "name": "value", "type": "registry:ui", "title": "Value", "description": "One number and its unit, formatted the same way everywhere in the product.", "categories": [ "health-formatting" ], "files": [ { "path": "registry/bases/base/value.tsx", "type": "registry:ui", "target": "@ui/value.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "Value installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/value before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "health-formatting", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "content", "aliases": [ "number", "unit", "format a number", "numeric display", "figure", "format", "formatted number" ], "governedBy": [ "numbers-units-precision", "unit-systems", "clinical-interaction-guidelines", "data-provenance-and-device-accuracy", "on-screen-privacy", "reference-ranges", "risk-and-statistics", "safety-review-checklist", "uncertainty-and-staleness", "who-this-is-for" ], "usedIn": [ "ask-users-for/height-and-weight", "choose-a-component", "daily-log-screen", "daily-logging", "diabetes-medicines-app", "forms/units-and-numeric-entry", "health-metric-card", "onboarding-screen", "results-screen", "sharing-with-a-clinician", "trend-review", "trends-screen", "value-against-a-range" ], "docs": "https://opsinjs.pensievelabs.org/components/value", "markdown": "https://opsinjs.pensievelabs.org/components/value.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } }, { "name": "visually-hidden", "type": "registry:ui", "title": "VisuallyHidden", "description": "Content that screen readers announce and eyes do not see.", "categories": [ "utility" ], "files": [ { "path": "registry/bases/base/visually-hidden.tsx", "type": "registry:ui", "target": "@ui/visually-hidden.tsx" }, { "path": "lib/opsinjs.ts", "type": "registry:lib", "target": "@lib/opsinjs.ts" }, { "path": "lib/status.ts", "type": "registry:lib", "target": "@lib/status.ts" } ], "docs": "VisuallyHidden installs real source. It has been audited against WCAG 2.2 AA by its authors, not independently reviewed, and has had no clinical review, so it is not for a production health surface. Read the page at https://opsinjs.pensievelabs.org/components/visually-hidden before you depend on it; it names the clinical contract and the accessibility bar this component has to clear.", "meta": { "opsinjs": { "implemented": true, "status": "shipped", "category": "utility", "base": "base", "style": "base-lyra", "since": "unreleased", "owner": "engineering", "aliases": [ "sr only", "screen reader only", "clip" ], "governedBy": [], "usedIn": [ "diabetes-medicines-app" ], "docs": "https://opsinjs.pensievelabs.org/components/visually-hidden", "markdown": "https://opsinjs.pensievelabs.org/components/visually-hidden.md", "catalogue": "https://opsinjs.pensievelabs.org/r/index.json", "contrastScopes": [ "neutral" ] } } } ] }