@local-civics/hub-ui 0.1.209 → 0.1.211

package/dist/index.d.ts

@@ -166,7 +166,7 @@ type BadgeActivityProps = {
 /**
  * CriterionProps
  */
-type CriterionProps$1 = {
+type CriterionProps$2 = {
     criterionId?: string;
     displayName?: string;
     namespace?: string;
@@ -183,7 +183,7 @@ type BadgeCardProps = {
     imageURL?: string;
     level?: number;
     summary?: string;
-    criteria?: CriterionProps$1[];
+    criteria?: CriterionProps$2[];
     choices?: BadgeActivityProps[];
     canSubmit?: boolean;
     finishedAt?: string;
@@ -214,7 +214,7 @@ declare const Badge: (props: BadgeProps) => JSX.Element;
 /**
  * CriterionProps
  */
-type CriterionProps = {
+type CriterionProps$1 = {
     criterionId?: string;
     displayName?: string;
     namespace?: string;
@@ -225,7 +225,7 @@ type CriterionProps = {
  * BadgeActivityMenuProps
  */
 type BadgeActivityMenuProps = {
-    criteria?: CriterionProps[];
+    criteria?: CriterionProps$1[];
     onBack?: () => void;
 };
 /**
@@ -274,6 +274,65 @@ type BadgeSuccessDialogProps = {
  */
 declare const BadgeSuccessDialog: (props: BadgeSuccessDialogProps) => JSX.Element;
 
+/**
+ * BadgesListProps
+ */
+type BadgesListProps = {
+    badges: BadgeProps[];
+    isLoading?: boolean;
+    list?: boolean;
+    onToggleLayout?: (next: boolean) => void;
+};
+/**
+ * The full-page "My Badges" grid — the expanded sibling of the Home page's `BadgesCard` widget.
+ * Purely presentational, same as `BadgesCard`: each card's `onOpen` (already supplied by
+ * `useBadges` in the hub app) is expected to navigate to the existing badge detail page, which
+ * already drills into the existing lesson page — this component only needs to get the grid right.
+ * Grid/list toggle mirrors `PathwaysCard`/`BadgesCard`'s existing controlled/uncontrolled `list`
+ * prop pattern. List rows omit the mockup's progress bar and points figure — both are sourced
+ * from lesson-level data that isn't available at this list's data granularity.
+ * @param props
+ * @constructor
+ */
+declare const BadgesList: (props: BadgesListProps) => JSX.Element;
+
+/**
+ * CriterionProps
+ */
+type CriterionProps = {
+    criterionId?: string;
+    displayName?: string;
+    namespace?: string;
+    options?: BadgeActivityProps[];
+};
+/**
+ * BadgeDetailProps
+ */
+type BadgeDetailProps = {
+    icon?: IconName$1;
+    iconURL?: string;
+    imageURL?: string;
+    displayName?: string;
+    level?: number;
+    summary?: string;
+    criteria?: CriterionProps[];
+    choices?: BadgeActivityProps[];
+    canSubmit?: boolean;
+    finishedAt?: string;
+    onBack?: () => void;
+    onSubmit?: () => void;
+};
+/**
+ * The full-page single-badge detail — the mockup's "Badge Detail" screen. Data-wiring (criteria/
+ * choice cross-reference, Start/Continue/Review button state, Submit gating) mirrors the existing
+ * `BadgeCard` verbatim; only the markup/styling is new. Each criterion row's button reuses
+ * `choice.onClick`, already wired (in the hub app's `useBadge`/`withLessons`) to navigate to the
+ * matching lesson — this component doesn't need to know about that.
+ * @param props
+ * @constructor
+ */
+declare const BadgeDetail: (props: BadgeDetailProps) => JSX.Element;
+
 /**
  * List of icons available
  */
@@ -812,7 +871,7 @@ type ProgressProps = {
     start: number;
     end: number;
     rounded?: boolean;
-    color?: "green" | "sky-blue";
+    color?: "green" | "sky-blue" | "mint" | "gold";
 };
 /**
  * A component for displaying progress.
@@ -884,40 +943,6 @@ type LogServiceButtonProps = {
  */
 declare const LogServiceButton: (props: LogServiceButtonProps) => JSX.Element;
 
-/**
- * The name of a sidebar tab.
- */
-type SidebarTabName = "profile" | "pathways" | "badges" | "file-locker" | "transcript" | "portfolio";
-/**
- * A tab's live destination. Tabs with no entry here render disabled.
- */
-type SidebarLinks = Partial<Record<SidebarTabName, {
-    href: string;
-}>>;
-/**
- * The signed-in student shown above the nav.
- */
-type SidebarIdentity = {
-    avatarURL?: string;
-    name: string;
-    subtitle?: string;
-};
-/**
- * The properties for the sidebar.
- */
-type SidebarProps = {
-    active?: SidebarTabName;
-    links: SidebarLinks;
-    identity?: SidebarIdentity;
-    settingsHref?: string;
-    disabled?: boolean;
-    onLogout?: () => void;
-};
-/**
- * A component for navigating between the student's home page sections.
- */
-declare const Sidebar: (props: SidebarProps) => JSX.Element;
-
 /**
  * StopwatchProps
  */
@@ -1124,6 +1149,243 @@ type PathwayButtonProps = {
 };
 declare const PathwayButton: (props: PathwayButtonProps) => JSX.Element;
 
+/**
+ * A single pathway as rendered by the dashboard - the same shape `PathwaySection` already
+ * consumes (see `usePathways` in the hub app), so this is a drop-in replacement for the data.
+ */
+type PathwayItem = PathwayCardProps & {
+    pathwayId?: string;
+    onClick?: () => void;
+};
+/**
+ * PathwaysCardProps
+ */
+type PathwaysCardProps = {
+    pathways: PathwayItem[];
+    isLoading?: boolean;
+    list?: boolean;
+    onToggleLayout?: (next: boolean) => void;
+};
+/**
+ * The student dashboard's "My Pathways & Seals" card - a presentational replacement for
+ * `PathwaySection` scoped to the Home page. Keeps the same list/grid-toggle behavior; the
+ * in-progress/completed/available/locked grouping isn't reproduced because `PathwaySection`'s
+ * own grouping is currently stubbed (everything lands in "in progress"), so a flat grid is
+ * behaviorally equivalent to what ships today.
+ * @param props
+ * @constructor
+ */
+declare const PathwaysCard: (props: PathwaysCardProps) => JSX.Element;
+
+/**
+ * PathwaysListProps
+ */
+type PathwaysListProps = {
+    pathways: PathwayItem[];
+};
+/**
+ * The full-page "My Pathways & Seals" list — the expanded, grid-of-large-cards sibling of the
+ * Home page's `PathwaysCard` widget. Purely presentational, same as `PathwaysCard`: each card's
+ * `onClick` (already supplied by `usePathways` in the hub app) is expected to navigate to the
+ * existing pathway detail page, not open an in-page detail view.
+ * @param props
+ * @constructor
+ */
+declare const PathwaysList: (props: PathwaysListProps) => JSX.Element;
+
+/**
+ * PathwayDetailProps
+ */
+type PathwayDetailProps = PathwayCardProps & {
+    onBack?: () => void;
+};
+/**
+ * The full-page single-pathway detail — the mockup's "Pathway Detail" screen. Data-wiring
+ * (category progress/filter, badge checklist Start/Continue/Review state) mirrors the existing
+ * `PathwayOverview` verbatim; only the markup/styling is new. Each badge row's button reuses the
+ * badge's own `onClick`, already wired (in the hub app's `usePathway`/`withBadges`) to navigate to
+ * the matching badge detail page — this component doesn't need to know about that.
+ * @param props
+ * @constructor
+ */
+declare const PathwayDetail: (props: PathwayDetailProps) => JSX.Element;
+
+declare const PathwayTranscript: (props: PathwayCardProps) => JSX.Element;
+
+/**
+ * The accent cycled across dashboard pills.
+ */
+type PillAccent = "cyan" | "mint" | "gold" | "slate";
+/**
+ * PillProps
+ */
+type PillProps = {
+    label: string;
+    accent?: PillAccent;
+};
+/**
+ * A small accent-tinted label used for level/XP style tags across the student dashboard.
+ * @param props
+ * @constructor
+ */
+declare const Pill: (props: PillProps) => JSX.Element;
+
+/**
+ * The accent cycled across dashboard stat tiles.
+ */
+type StatTileAccent = "cyan" | "mint" | "gold" | "slate";
+/**
+ * StatTileProps
+ */
+type StatTileProps = {
+    icon: IconName;
+    value: string | number;
+    label: string;
+    accent?: StatTileAccent;
+};
+/**
+ * A single icon + number + label stat tile, meant to appear in a StatTileRow.
+ * @param props
+ * @constructor
+ */
+declare const StatTile: (props: StatTileProps) => JSX.Element;
+/**
+ * StatTileRowProps
+ */
+type StatTileRowProps = {
+    children: React.ReactNode;
+};
+/**
+ * A row layout for a set of StatTiles.
+ * @param props
+ * @constructor
+ */
+declare const StatTileRow: (props: StatTileRowProps) => JSX.Element;
+
+/**
+ * ProfileHeroCardProps
+ */
+type ProfileHeroCardProps = {
+    isLoading?: boolean;
+    avatarURL?: string;
+    givenName?: string;
+    familyName?: string;
+    createdAt?: string;
+    online?: boolean;
+    impactStatement?: string;
+    placeName?: string;
+    communityName?: string;
+    level?: number;
+    xp?: number;
+    nextXP?: number;
+    onEdit?: () => void;
+};
+/**
+ * The student dashboard's profile summary: avatar/name/meta (formerly `ProfileWidget`), bio and
+ * place/community (formerly `AboutWidget`), and level/XP progress (formerly `ImpactWidget`)
+ * consolidated into a single card, matching Mockup I's layout and color treatment.
+ * @param props
+ * @constructor
+ */
+declare const ProfileHeroCard: (props: ProfileHeroCardProps) => JSX.Element;
+
+/**
+ * BadgesCardProps
+ */
+type BadgesCardProps = {
+    badges: BadgeProps[];
+    isLoading?: boolean;
+    list?: boolean;
+    onToggleLayout?: (next: boolean) => void;
+};
+/**
+ * The student dashboard's "Badges" card - a presentational replacement for `BadgeSection`
+ * scoped to the Home page. Ports `BadgeSection`'s real state classification (in
+ * progress/completed/available/locked, driven by `finishedAt`/`isLocked`/`startedAt`) and its
+ * grid/list toggle, but shows one state at a time via a single-select tab strip
+ * (`Board`'s `Tab` `secondary` variant) to match the mockup's tab look, rather than
+ * `BadgeSection`'s original multi-select filter pills.
+ * @param props
+ * @constructor
+ */
+declare const BadgesCard: (props: BadgesCardProps) => JSX.Element;
+
+/**
+ * DashboardShellProps
+ */
+type DashboardShellProps = {
+    sidebar: React.ReactNode;
+    topBar?: React.ReactNode;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * The student-facing app's page shell: a full-height row with the sidebar and content pane as
+ * siblings, so the content pane (with its own top bar) can scroll independently of the sidebar.
+ * Used across the student side of the app (Home, Pathway/Badge detail pages, etc.) in place of
+ * bare `AuthLayout` usage — `AuthLayout` itself is untouched, still used for non-student surfaces.
+ * Renders the shared `Footer` at the bottom of the scrollable content, pinned to the viewport
+ * bottom on short pages and pushed below content on long ones (standard sticky-footer behavior).
+ * @param props
+ * @constructor
+ */
+declare const DashboardShell: (props: DashboardShellProps) => JSX.Element;
+
+/**
+ * The name of a dashboard sidebar tab.
+ */
+type DashboardSidebarTabName = "profile" | "pathways" | "badges" | "file-locker" | "transcript" | "portfolio" | "comments";
+/**
+ * A tab's live destination. Tabs with no entry here render disabled.
+ */
+type DashboardSidebarLinks = Partial<Record<DashboardSidebarTabName, {
+    href: string;
+}>>;
+/**
+ * The signed-in student shown above the nav.
+ */
+type DashboardSidebarIdentity = {
+    avatarURL?: string;
+    name: string;
+    subtitle?: string;
+    online?: boolean;
+};
+/**
+ * The properties for the dashboard sidebar.
+ */
+type DashboardSidebarProps = {
+    active?: DashboardSidebarTabName;
+    links: DashboardSidebarLinks;
+    identity?: DashboardSidebarIdentity;
+    disabled?: boolean;
+    onSwitchAccount?: () => void;
+    onLogout?: () => void;
+};
+/**
+ * The single left nav used across the whole student side of the app (Home, Pathway/Badge detail
+ * pages, and any future page that adopts `DashboardShell`) — never render a page-specific copy of
+ * this. Tabs with no matching `links` entry render disabled, which is how not-yet-built
+ * destinations (File Locker, Transcript, Portfolio, Comments) show up today.
+ */
+declare const DashboardSidebar: (props: DashboardSidebarProps) => JSX.Element;
+
+/**
+ * DashboardTopBarProps
+ */
+type DashboardTopBarProps = {
+    eyebrow?: string;
+    title: string;
+    children?: React.ReactNode;
+    onNotifications?: () => void;
+};
+/**
+ * The persistent bar above the dashboard's scrollable content: a page heading on the left,
+ * notifications and a primary action slot (e.g. LogServiceButton) on the right.
+ * @param props
+ * @constructor
+ */
+declare const DashboardTopBar: (props: DashboardTopBarProps) => JSX.Element;
+
 /**
  * AuthLayoutProps
  */
@@ -1171,24 +1433,4 @@ type HomeLayoutProps = {
  */
 declare const HomeLayout: (props: HomeLayoutProps) => JSX.Element;
 
-/**
- * SidebarLayoutProps
- */
-type SidebarLayoutProps = Omit<AuthLayoutProps, "sidebar" | "children" | "topNav" | "page" | "onProfile"> & {
-    active?: SidebarTabName;
-    links: SidebarLinks;
-    identity?: SidebarIdentity;
-    settingsHref?: string;
-    sidebarExtra?: React__default.ReactNode;
-};
-/**
- * SidebarLayout
- *
- * AuthLayout with the student home-page Sidebar pre-wired into its sidebar slot.
- * Reused by every page that adopts the new left nav, not just one page - the
- * caller still supplies header/subheader/main the same way it would for AuthLayout directly.
- * @constructor
- */
-declare const SidebarLayout: (props: SidebarLayoutProps) => JSX.Element;
-
-export { AboutWidget, AboutWidgetProps, AchievementWidget, AchievementWidgetProps, ActivityCard, ActivityCardProps, ActivityItem, ActivityItemProps, ActivityList, ActivityListProps, ActivityReflection, ActivityReflectionProps, AuthLayout, AuthLayoutProps, Badge, BadgeActivityMenu, BadgeActivityMenuProps, BadgeFilterOption, BadgeProps, BadgeSection, BadgeSectionProps, BadgeSuccessDialog, BadgeSuccessDialogProps, Board, BoardProps, Button, ButtonBorder, ButtonColor, ButtonFilter, ButtonJustify, ButtonProps, ButtonSize, ButtonSpacing, ButtonTheme, Card, CardProps, CtaListProps, DateSelection, DateSelectionProps, DaySelectionOptionProps, EventItem, EventItemProps, EventList, EventListProps, Footer, Home, HomeLayout, HomeLayoutProps, Icon, IconName, IconProps, ImpactWidget, ImpactWidgetProps, LearningForm, LearningFormProps, Loader, LoaderProps, LogServiceButton, LogServiceButtonProps, Logo, Modal, ModalProps, NavBar, NavBarProps, NavLink, NavLinkName, NavLinkProps, NotFound, NotFoundProps, Onboarding, OnboardingProps, Overlay, OverlayProps, Pathway, PathwayButton, PathwayButtonProps, PathwayFilter, PathwayFilterOption, PathwayFilterProps, PathwayProgress, PathwayProgressHeight, PathwayProgressProps, PathwayProps, PathwaySection, PathwaySectionProps, PathwayWidget, PathwayWidgetProps, ProfileWidget, Progress, ProgressProps, ResidentWidgetProps, Search, SearchButton, SearchButtonProps, SearchProps, SearchResult, SearchResultProps, SettingsCard, SettingsCardProps, Sidebar, SidebarIdentity, SidebarLayout, SidebarLayoutProps, SidebarLinks, SidebarProps, SidebarTabName, Stopwatch, StopwatchProps, Tab, TabProps, TagFilter, TagFilterProps, TaskItem, TaskItemProps, TaskList, TaskListProps, Widget, WidgetBody, WidgetBodyProps, WidgetHeader, WidgetHeaderLink, WidgetHeaderLinkProps, WidgetHeaderProps, WidgetProps, WidgetTitle, WidgetTitleProps };
+export { AboutWidget, AboutWidgetProps, AchievementWidget, AchievementWidgetProps, ActivityCard, ActivityCardProps, ActivityItem, ActivityItemProps, ActivityList, ActivityListProps, ActivityReflection, ActivityReflectionProps, AuthLayout, AuthLayoutProps, Badge, BadgeActivityMenu, BadgeActivityMenuProps, BadgeDetail, BadgeDetailProps, BadgeFilterOption, BadgeProps, BadgeSection, BadgeSectionProps, BadgeSuccessDialog, BadgeSuccessDialogProps, BadgesCard, BadgesCardProps, BadgesList, BadgesListProps, Board, BoardProps, Button, ButtonBorder, ButtonColor, ButtonFilter, ButtonJustify, ButtonProps, ButtonSize, ButtonSpacing, ButtonTheme, Card, CardProps, CtaListProps, DashboardShell, DashboardShellProps, DashboardSidebar, DashboardSidebarIdentity, DashboardSidebarLinks, DashboardSidebarProps, DashboardSidebarTabName, DashboardTopBar, DashboardTopBarProps, DateSelection, DateSelectionProps, DaySelectionOptionProps, EventItem, EventItemProps, EventList, EventListProps, Footer, Home, HomeLayout, HomeLayoutProps, Icon, IconName, IconProps, ImpactWidget, ImpactWidgetProps, LearningForm, LearningFormProps, Loader, LoaderProps, LogServiceButton, LogServiceButtonProps, Logo, Modal, ModalProps, NavBar, NavBarProps, NavLink, NavLinkName, NavLinkProps, NotFound, NotFoundProps, Onboarding, OnboardingProps, Overlay, OverlayProps, Pathway, PathwayButton, PathwayButtonProps, PathwayDetail, PathwayDetailProps, PathwayFilter, PathwayFilterOption, PathwayFilterProps, PathwayItem, PathwayProgress, PathwayProgressHeight, PathwayProgressProps, PathwayProps, PathwaySection, PathwaySectionProps, PathwayTranscript, PathwayWidget, PathwayWidgetProps, PathwaysCard, PathwaysCardProps, PathwaysList, PathwaysListProps, Pill, PillAccent, PillProps, ProfileHeroCard, ProfileHeroCardProps, ProfileWidget, Progress, ProgressProps, ResidentWidgetProps, Search, SearchButton, SearchButtonProps, SearchProps, SearchResult, SearchResultProps, SettingsCard, SettingsCardProps, StatTile, StatTileAccent, StatTileProps, StatTileRow, StatTileRowProps, Stopwatch, StopwatchProps, Tab, TabProps, TagFilter, TagFilterProps, TaskItem, TaskItemProps, TaskList, TaskListProps, Widget, WidgetBody, WidgetBodyProps, WidgetHeader, WidgetHeaderLink, WidgetHeaderLinkProps, WidgetHeaderProps, WidgetProps, WidgetTitle, WidgetTitleProps };