@twentyfirstmedia/elements 0.6.0 → 0.7.0

package/dist/elements.d.ts

@@ -2982,6 +2982,328 @@ export interface QrCodeProps extends BaseProps {
   label?: string;
 }
 
+/* ── Life: wellbeing, health, goals, AI insights, consent ── */
+export interface Habit {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  /** One entry per day, oldest first, today last: true done, false missed, null no data. */
+  days: (boolean | null)[];
+  /** Days in a row (shown as "12-day streak"). */
+  streak?: number;
+  /** A short target, e.g. "8 glasses" or "3× a week". */
+  goal?: string;
+}
+export interface HabitTrackerProps extends BaseProps {
+  habits: Habit[];
+  /** Labels of the day columns, oldest first (default: weekday initials ending today). */
+  dayLabels?: string[];
+  /** Today's box of a habit was toggled. */
+  onToggle?: (id: string, done: boolean) => void;
+  /** Accessible name of the list (default "Habits"). */
+  label?: string;
+}
+export type MoodLevel = 1 | 2 | 3 | 4 | 5;
+export interface MoodPickerProps extends BaseProps {
+  value?: MoodLevel | null;
+  defaultValue?: MoodLevel | null;
+  onChange?: (mood: MoodLevel) => void;
+  /** The question (default "How are you feeling?"). */
+  label?: ReactNode;
+  /** Words for the five levels, lowest first (default Awful, Low, Okay, Good, Great). */
+  levels?: [string, string, string, string, string];
+  /** Only the faces; the words stay as accessible names. */
+  compact?: boolean;
+}
+export interface VitalTileProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  label: string;
+  value: number;
+  unit?: string;
+  icon?: IconName;
+  /** The healthy range [low, high]; the tile says whether the value is below, in or above it. */
+  normal?: [number, number];
+  /** The whole scale of the band [min, max] (default: the normal range with room on both sides). */
+  scale?: [number, number];
+  /** Recent values, oldest first, drawn as a sparkline. */
+  trend?: number[];
+  /** Under the value: when it was measured, the source … */
+  caption?: ReactNode;
+  /** Digits after the decimal point (default 0). */
+  digits?: number;
+}
+export interface ActivityRing {
+  label: string;
+  value: number;
+  goal: number;
+  unit?: string;
+  tint?: Tint;
+}
+export interface ActivityRingsProps extends BaseProps {
+  /** Outer ring first. */
+  rings: ActivityRing[];
+  /** Diameter of the rings (default 132). */
+  size?: number;
+  /** Hide the legend beside the rings. */
+  legend?: boolean;
+  /** Accessible name (default "Activity"). */
+  label?: string;
+}
+export type SleepStage = "awake" | "rem" | "light" | "deep";
+export interface SleepSegment {
+  stage: SleepStage;
+  start: Date | string | number;
+  end: Date | string | number;
+}
+export interface SleepChartProps extends BaseProps {
+  /** The night in order, from falling asleep to getting up. */
+  segments: SleepSegment[];
+  /** Accessible name (default "Sleep stages"). */
+  label?: string;
+  /** Hide the totals per stage under the chart. */
+  summary?: boolean;
+}
+export interface MedicationItem {
+  id: string;
+  name: string;
+  dose?: string;
+  /** When, as shown ("08:00", "With breakfast"). */
+  time: string;
+  /** Set by the app, which knows the clock: default "taken" when `taken`, else "due". */
+  status?: "taken" | "due" | "missed" | "upcoming";
+  taken?: boolean;
+  note?: string;
+  icon?: IconName;
+}
+export interface MedicationListProps extends BaseProps {
+  items: MedicationItem[];
+  /** "Mark as taken" was pressed. */
+  onTake?: (id: string) => void;
+  /** Accessible name (default "Medication"). */
+  label?: string;
+}
+export interface JournalEntryProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  date: Date | string | number;
+  title?: string;
+  mood?: MoodLevel;
+  tags?: string[];
+  children?: ReactNode;
+  /** Buttons at the end (edit, share …). */
+  actions?: ReactNode;
+}
+export interface GoalCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  value: number;
+  target: number;
+  /** How to show value and target (default number). */
+  format?: "number" | "money" | "percent";
+  /** Unit after numbers ("km", "books"). */
+  unit?: string;
+  currency?: string;
+  due?: Date | string | number;
+  icon?: IconName;
+  tint?: Tint;
+  milestones?: { label: string; done?: boolean }[];
+  /** A note under the progress ("€250 a month keeps you on track"). */
+  note?: ReactNode;
+}
+export interface InsightCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  children?: ReactNode;
+  icon?: IconName;
+  tone?: "info" | "success" | "warning" | "highlight";
+  /** Above the title: area and time ("Money · 2 h ago"). */
+  meta?: ReactNode;
+  /** Where the insight comes from, as chips (like chat sources). */
+  sources?: Source[];
+  /** Why the assistant shows it; folded away behind "Why am I seeing this?". */
+  why?: ReactNode;
+  onAccept?: () => void;
+  acceptLabel?: string;
+  onSnooze?: () => void;
+  onDismiss?: () => void;
+}
+export interface ConsentScope {
+  id: string;
+  label: string;
+  description?: string;
+  granted: boolean;
+  /** Needed for the connection to work at all: shown, not switchable. */
+  required?: boolean;
+}
+export interface ConsentConnector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  /** What the assistant uses it for. */
+  purpose?: ReactNode;
+  scopes: ConsentScope[];
+  lastUsed?: Date | string | number;
+}
+export interface ConsentListProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  connectors: ConsentConnector[];
+  onScopeChange?: (connectorId: string, scopeId: string, granted: boolean) => void;
+  onRevoke?: (connectorId: string) => void;
+  /** Accessible name (default "Data access"). */
+  label?: string;
+}
+
+/* ── Life: money, insurance, deadlines, documents ── */
+export interface BudgetCategory {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  spent: number;
+  limit: number;
+}
+export interface BudgetListProps extends BaseProps {
+  categories: BudgetCategory[];
+  currency?: string;
+  /** A category was picked (to show its transactions). */
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Budgets"). */
+  label?: string;
+}
+export interface Subscription {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  amount: number;
+  period: "week" | "month" | "year";
+  /** Next charge. */
+  next?: Date | string | number;
+  status?: "active" | "trial" | "cancelled";
+  category?: string;
+}
+export interface SubscriptionListProps extends BaseProps {
+  items: Subscription[];
+  currency?: string;
+  /** "Manage" on a subscription (cancel, change plan …). */
+  onManage?: (id: string) => void;
+  /** Hide the monthly and yearly totals. */
+  totals?: boolean;
+  /** Accessible name (default "Subscriptions"). */
+  label?: string;
+}
+export interface NetWorthCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  assets: { label: string; value: number; icon?: IconName }[];
+  liabilities?: { label: string; value: number; icon?: IconName }[];
+  /** Net worth over time, oldest first. */
+  history?: number[];
+  /** Change over `changeLabel` (e.g. +1,240 "since October"). */
+  change?: number;
+  changeLabel?: string;
+  currency?: string;
+  title?: string;
+}
+export interface DeadlineItem {
+  id: string;
+  title: string;
+  /** What kind: "Contract", "ID card", "Tax" … */
+  kind?: string;
+  icon?: IconName;
+  date: Date | string | number;
+  amount?: number;
+  done?: boolean;
+  note?: string;
+}
+export interface DeadlineListProps extends BaseProps {
+  items: DeadlineItem[];
+  /** The day to count from (default: now). Set it for server rendering and stable output. */
+  today?: Date | string | number;
+  /** Days ahead that count as soon (default 14). */
+  soon?: number;
+  currency?: string;
+  onDone?: (id: string) => void;
+  /** Accessible name (default "Deadlines"). */
+  label?: string;
+}
+export interface PolicyCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  /** The kind of insurance: "Household contents", "Liability" … */
+  type: string;
+  insurer: string;
+  icon?: IconName;
+  tint?: Tint;
+  policyNumber?: string;
+  /** Show only the last four characters of the policy number. */
+  maskNumber?: boolean;
+  /** Sum insured: a number (money) or text ("unlimited"). */
+  coverage?: number | ReactNode;
+  premium?: { amount: number; period: "month" | "quarter" | "year" };
+  deductible?: number;
+  renews?: Date | string | number;
+  status?: "active" | "pending" | "expiring" | "lapsed";
+  currency?: string;
+  /** Buttons at the foot (documents, report a claim …). */
+  actions?: ReactNode;
+}
+export interface CoverageRow {
+  id: string;
+  risk: string;
+  status: "covered" | "partial" | "none";
+  note?: ReactNode;
+  /** Which policy covers it. */
+  policy?: string;
+}
+export interface CoverageMatrixProps extends BaseProps {
+  rows: CoverageRow[];
+  /** Accessible name and caption (default "Coverage"). */
+  label?: string;
+}
+export interface ClaimStep {
+  label: string;
+  date?: Date | string | number;
+  state: "done" | "current" | "todo" | "failed";
+  note?: ReactNode;
+}
+export interface ClaimTimelineProps extends BaseProps {
+  title: string;
+  /** Reference and insurer under the title. */
+  meta?: ReactNode;
+  amount?: number;
+  currency?: string;
+  steps: ClaimStep[];
+}
+export interface LifeDocument {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: IconName;
+  holder?: string;
+  expires?: Date | string | number;
+  /** "PDF · 240 KB" */
+  meta?: string;
+}
+export interface DocumentListProps extends BaseProps {
+  documents: LifeDocument[];
+  /** The day to count expiry from (default: now). */
+  today?: Date | string | number;
+  /** Days ahead that count as expiring soon (default 60). */
+  soon?: number;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Documents"). */
+  label?: string;
+}
+
 export interface IconProps {
   name: IconName;
   /** Pixel size (default 16; 14 in chips and badges, 20 in navigation). */
@@ -3045,6 +3367,42 @@ export type TfTwoFactorSetupElement = TfElement<TwoFactorSetupProps>;
 export type TfColorFieldElement = TfElement<ColorFieldProps>;
 /** `<tf-qr-code>`: A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service. */
 export type TfQrCodeElement = TfElement<QrCodeProps>;
+/** `<tf-habit-tracker>`: Habits with their last days as a row of marks: done, missed or no entry, today's mark a toggle. */
+export type TfHabitTrackerElement = TfElement<HabitTrackerProps>;
+/** `<tf-mood-picker>`: A five-step mood scale with faces and words, as a radio group. */
+export type TfMoodPickerElement = TfElement<MoodPickerProps>;
+/** `<tf-vital-tile>`: One health value with its healthy range: the value, a band with the normal zone and a marker, a status in words (in range, below, above) and an optional trend. */
+export type TfVitalTileElement = TfElement<VitalTileProps>;
+/** `<tf-activity-rings>`: Concentric progress rings for daily goals (move, exercise, stand, steps, water) with a legend. */
+export type TfActivityRingsElement = TfElement<ActivityRingsProps>;
+/** `<tf-sleep-chart>`: A night as sleep stages over time, one lane per stage (awake, REM, light, deep), with the time asleep and the time per stage. */
+export type TfSleepChartElement = TfElement<SleepChartProps>;
+/** `<tf-medication-list>`: Today's doses in order, each with its time, name, dose, a status in words and a "taken" button. */
+export type TfMedicationListElement = TfElement<MedicationListProps>;
+/** `<tf-journal-entry>`: A journal or diary entry: the date, the mood of the day, a title, the text and tags, with room for actions such as edit or share. */
+export type TfJournalEntryElement = TfElement<JournalEntryProps>;
+/** `<tf-goal-card>`: A goal with its progress toward a target, a due date, milestones and a note. */
+export type TfGoalCardElement = TfElement<GoalCardProps>;
+/** `<tf-insight-card>`: Something the assistant noticed: what, where it comes from, why it is shown and what to do. */
+export type TfInsightCardElement = TfElement<InsightCardProps>;
+/** `<tf-consent-list>`: What each connected source lets the assistant read or do: one card per source with its purpose, last use and a switch per scope, plus "Revoke access". */
+export type TfConsentListElement = TfElement<ConsentListProps>;
+/** `<tf-budget-list>`: Spending per category against its limit: spent and limit, a bar, and what is left or over in words. */
+export type TfBudgetListElement = TfElement<BudgetListProps>;
+/** `<tf-subscription-list>`: Recurring payments with their next charge, trial and cancelled states, and what they cost together a month and a year. */
+export type TfSubscriptionListElement = TfElement<SubscriptionListProps>;
+/** `<tf-net-worth-card>`: What you own minus what you owe: the total, its change and trend, and the assets and liabilities behind it. */
+export type TfNetWorthCardElement = TfElement<NetWorthCardProps>;
+/** `<tf-deadline-list>`: Bills, renewals, notice periods and expiring documents in date order, each with "Today", "In 12 days" or "Overdue by 3 days" in words. */
+export type TfDeadlineListElement = TfElement<DeadlineListProps>;
+/** `<tf-policy-card>`: One insurance policy: type and insurer, sum insured, premium, deductible, policy number, renewal date and status (active, pending, expiring, lapsed), with room for actions. */
+export type TfPolicyCardElement = TfElement<PolicyCardProps>;
+/** `<tf-coverage-matrix>`: Life risks and whether a policy covers them: covered, partly or not covered, with the policy and a note, and a count of each above the table. */
+export type TfCoverageMatrixElement = TfElement<CoverageMatrixProps>;
+/** `<tf-claim-timeline>`: An insurance claim from report to payout: steps that are done, current, still to come or failed, with dates and notes, and the amount claimed. */
+export type TfClaimTimelineElement = TfElement<ClaimTimelineProps>;
+/** `<tf-document-list>`: Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031". */
+export type TfDocumentListElement = TfElement<DocumentListProps>;
 /** `<tf-agent-card>`: One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails). */
 export type TfAgentCardElement = TfElement<AgentCardProps>;
 /** `<tf-agent-details>`: The AgentDetails component as a custom element. */
@@ -3459,6 +3817,24 @@ declare global {
     "tf-two-factor-setup": TfTwoFactorSetupElement;
     "tf-color-field": TfColorFieldElement;
     "tf-qr-code": TfQrCodeElement;
+    "tf-habit-tracker": TfHabitTrackerElement;
+    "tf-mood-picker": TfMoodPickerElement;
+    "tf-vital-tile": TfVitalTileElement;
+    "tf-activity-rings": TfActivityRingsElement;
+    "tf-sleep-chart": TfSleepChartElement;
+    "tf-medication-list": TfMedicationListElement;
+    "tf-journal-entry": TfJournalEntryElement;
+    "tf-goal-card": TfGoalCardElement;
+    "tf-insight-card": TfInsightCardElement;
+    "tf-consent-list": TfConsentListElement;
+    "tf-budget-list": TfBudgetListElement;
+    "tf-subscription-list": TfSubscriptionListElement;
+    "tf-net-worth-card": TfNetWorthCardElement;
+    "tf-deadline-list": TfDeadlineListElement;
+    "tf-policy-card": TfPolicyCardElement;
+    "tf-coverage-matrix": TfCoverageMatrixElement;
+    "tf-claim-timeline": TfClaimTimelineElement;
+    "tf-document-list": TfDocumentListElement;
     "tf-agent-card": TfAgentCardElement;
     "tf-agent-details": TfAgentDetailsElement;
     "tf-chat-list": TfChatListElement;