@local-civics/hub-ui 0.1.209 → 0.1.210

package/dist/index.d.ts

@@ -884,40 +884,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 +1090,208 @@ type PathwayButtonProps = {
 };
 declare const PathwayButton: (props: PathwayButtonProps) => 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;
+
+/**
+ * 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;
+
+/**
+ * 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 +1339,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, BadgeFilterOption, BadgeProps, BadgeSection, BadgeSectionProps, BadgeSuccessDialog, BadgeSuccessDialogProps, BadgesCard, BadgesCardProps, 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, PathwayFilter, PathwayFilterOption, PathwayFilterProps, PathwayItem, PathwayProgress, PathwayProgressHeight, PathwayProgressProps, PathwayProps, PathwaySection, PathwaySectionProps, PathwayWidget, PathwayWidgetProps, PathwaysCard, PathwaysCardProps, 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 };