@psnext/design-system 1.1.0 → 1.2.0

package/dist/patterns/index.d.ts

@@ -1,410 +1,7 @@
-import { o as Text, r as ThemeProduct, u as HeadingProps } from "../ThemeProvider.js";
-import * as React from "react";
-import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { VariantProps } from "class-variance-authority";
-import { Column, ColumnDef } from "@tanstack/react-table";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
-
-//#region src/patterns/DataTable/DataTable.d.ts
-type DataTableProps<TData, TValue> = {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  /** Zebra-stripe the rows (default true). */
-  striped?: boolean;
-  /** Client-side pagination + page size (default true, 10). */
-  enablePagination?: boolean;
-  pageSize?: number;
-};
-declare function DataTable<TData, TValue>({
-  columns,
-  data,
-  striped,
-  enablePagination,
-  pageSize
-}: DataTableProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
-declare function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className
-}: {
-  column: Column<TData, TValue>;
-  title: string;
-  className?: string;
-}): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/patterns/Footer/Footer.d.ts
-declare const footerBackgrounds: {
-  readonly none: "";
-  readonly muted: "bg-muted";
-  readonly glass: "bg-[var(--glass-light)] backdrop-blur-[var(--glass-blur)]";
-};
-declare function Footer({
-  className,
-  bordered,
-  background,
-  ...props
-}: React.ComponentProps<"footer"> & {
-  /** Add a subtle top border separating the footer from page content. */
-  bordered?: boolean;
-  /** Surface fill. `glass` is a translucent, blurred panel over the page background. */
-  background?: keyof typeof footerBackgrounds;
-}): react_jsx_runtime0.JSX.Element;
-declare function FooterStart({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-declare function FooterCenter({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-declare function FooterEnd({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-declare function FooterPoweredBy({
-  className,
-  label,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  /** Override the default "Powered by" label. */
-  label?: React.ReactNode;
-}): react_jsx_runtime0.JSX.Element;
-declare function FooterSeparator({
-  className,
-  ...props
-}: React.ComponentProps<"span">): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/patterns/Header/types.d.ts
-/** A node in the project hierarchy returned by the projects API. */
-interface ProjectNode {
-  id: string;
-  name: string;
-  children: ProjectNode[];
-  /** Ancestor context node — shown for orientation but not selectable. */
-  isContextOnly?: boolean;
-}
-/** Fully-qualified API endpoints. Built from `apiBaseUrl`; individually overridable. */
-interface HeaderEndpoints {
-  token: string;
-  me: string;
-  logout: string;
-  projects: (clientId: string) => string;
-  credits: string;
-}
-/** A fetch-compatible function, so hosts/tests can inject their own (e.g. mocks). */
-type Fetcher = typeof fetch;
-interface HeaderProps {
-  /** API base URL with full domain, e.g. `https://dev.abc.com`. Studio-auth API host. */
-  apiBaseUrl: string;
-  /**
-   * Environment id used to read the session cookie `{environmentId}-sessionId`
-   * (a JWT) — the header decodes it to determine whether the user is logged in.
-   */
-  environmentId: string;
-  /** Logo to show. Defaults to the active product from ThemeProvider. */
-  logoType?: ThemeProduct;
-  /** Show the read-only organisation pill. */
-  showOrg?: boolean;
-  /** Show the project picker (and the first-run selection overlay). */
-  showProjectDropdown?: boolean;
-  /** Show the profile menu (user email + logout). */
-  showProfile?: boolean;
-  /** Show the light/dark theme toggle. */
-  showThemeSwitcher?: boolean;
-  /** Show the remaining-credits pill (logged-in users only). */
-  showCredits?: boolean;
-  /** Page title shown next to the logo. Omitted when not provided. */
-  pageTitle?: string;
-  /**
-   * URL for the feedback action (message-square-share icon). When omitted the
-   * icon is hidden; when set, the icon renders and links here.
-   */
-  feedbackUrl?: string;
-  /** Active org id from the host session; overrides the value from `/me`. */
-  clientId?: string;
-  /**
-   * ESCAPE HATCH — avoid. Inject a pre-resolved access token to skip the header's
-   * own token fetch. The header is designed to resolve its own token from the
-   * session cookie; only reach for this when the host has *already* fetched a
-   * token and a duplicate round-trip is genuinely unacceptable. Misuse couples
-   * the header to host token lifecycle/refresh and can serve stale auth.
-   */
-  _dangerouslyInjectAccessToken?: string;
-  /** Called when the user picks a project. */
-  onProjectChange?: (id: string) => void;
-  /** Called when the user closes the selection overlay. */
-  onCloseProjectOverlay?: () => void;
-  /** Node rendered between the logo and the project picker. */
-  logoAddon?: ReactNode;
-  className?: string;
-  /** Override individual endpoint paths (defaults derive from `apiBaseUrl`). */
-  endpoints?: Partial<Omit<HeaderEndpoints, "projects">> & {
-    projects?: (clientId: string) => string;
-  };
-  /** Custom fetch implementation (defaults to global `fetch`). Useful for tests/Storybook. */
-  fetcher?: Fetcher;
-  /** How long fetched data stays fresh before refetch, in ms. Default 5 min. */
-  staleTime?: number;
-  /** How long unused data is cached, in ms. Default 10 min. */
-  gcTime?: number;
-}
-//# sourceMappingURL=types.d.ts.map
-//#endregion
-//#region src/patterns/Header/Header.d.ts
-/** The header bar shell — a sticky glass strip. */
-declare function HeaderBar({
-  className,
-  ...props
-}: React.ComponentProps<"header">): react_jsx_runtime0.JSX.Element;
-/** Product logo linking to its home, with a Suspense-safe fallback. */
-declare function HeaderLogo({
-  brand
-}: {
-  brand: ThemeProduct;
-}): react_jsx_runtime0.JSX.Element;
-/** Read-only organisation pill. */
-declare function OrgPill({
-  name,
-  loading
-}: {
-  name?: string;
-  loading?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
-/** Light/dark toggle — defers to ThemeProvider. */
-declare function ThemeToggle(): react_jsx_runtime0.JSX.Element;
-/** Profile menu — avatar trigger with email + logout. */
-declare function ProfileMenu({
-  email,
-  onLogout
-}: {
-  email?: string;
-  onLogout: () => void;
-}): react_jsx_runtime0.JSX.Element;
-/** Drop-in global header. Must be rendered inside a <ThemeProvider>. */
-declare function Header(props: HeaderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Header.d.ts.map
-//#endregion
-//#region src/patterns/Header/ProjectPicker.d.ts
-interface ProjectPickerProps {
-  projectsTree: ProjectNode[];
-  selectedProjectId: string;
-  selectedProjectName?: string;
-  onSelect: (id: string) => void;
-  projectLabel: string;
-  projectPlaceholder: string;
-  searchPlaceholder: string;
-  emptyStateText: string;
-  isLoading?: boolean;
-}
-declare function ProjectPicker({
-  projectsTree,
-  selectedProjectId,
-  selectedProjectName,
-  onSelect,
-  projectLabel,
-  projectPlaceholder,
-  searchPlaceholder,
-  emptyStateText,
-  isLoading
-}: Readonly<ProjectPickerProps>): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/patterns/Header/use-global-header.d.ts
-/** Window event other modules can dispatch to show/hide the project dropdown. */
-declare const TOGGLE_PROJECT_DROPDOWN_EVENT = "toggle-project-dropdown";
-interface ToggleProjectDropdownDetail {
-  show: boolean;
-}
-interface GlobalHeaderState {
-  /** Whether a valid session cookie exists — when false, hide all user content. */
-  isAuthenticated: boolean;
-  userEmail: string | undefined;
-  organizationName: string | undefined;
-  projectsTree: ProjectNode[];
-  selectedProjectId: string;
-  selectedProjectName: string | undefined;
-  isProjectsLoading: boolean;
-  isOrgLoading: boolean;
-  /** Remaining credits for the user (undefined until loaded / when disabled). */
-  credits: number | undefined;
-  /** Where the credits pill links to (studio-auth `/user/activity`). */
-  creditsHref: string;
-  projectDropdownVisible: boolean;
-  /** True when the dropdown is on, the user is in, but no project is chosen yet. */
-  showOverlay: boolean;
-  selectProject: (id: string) => void;
-  logout: () => void;
-}
-type UseGlobalHeaderArgs = Pick<HeaderProps, "apiBaseUrl" | "environmentId" | "clientId" | "_dangerouslyInjectAccessToken" | "showProjectDropdown" | "showProfile" | "showOrg" | "showCredits" | "endpoints" | "fetcher" | "staleTime" | "gcTime" | "onProjectChange">;
-declare function useGlobalHeader({
-  apiBaseUrl,
-  environmentId,
-  clientId,
-  _dangerouslyInjectAccessToken: injectedToken,
-  showProjectDropdown,
-  showProfile,
-  showOrg,
-  showCredits,
-  endpoints: endpointOverrides,
-  fetcher: fetcherProp,
-  staleTime,
-  gcTime,
-  onProjectChange
-}: UseGlobalHeaderArgs): GlobalHeaderState;
-//#endregion
-//#region src/patterns/Header/header-store.d.ts
-interface HeaderSelection {
-  selectedProjectId: string;
-  selectedProjectName: string;
-  organizationName: string | undefined;
-  /** Remaining credits for the logged-in user (read-only here; set by the Header). */
-  credits: number | undefined;
-  /** Client/org the current selection + org belong to (for cross-org invalidation). */
-  clientId: string | undefined;
-}
-interface UseHeaderProjectResult {
-  selectedProjectId: string;
-  selectedProjectName: string | undefined;
-  organizationName: string | undefined;
-  /** Set the active project from outside the Header (by id). */
-  setProject: (id: string) => void;
-  /** Clear the active project (e.g. to re-prompt selection). */
-  clearProject: () => void;
-}
-/**
- * Read the current project/org and change the project from anywhere in the app —
- * no need to be inside the <Header>. Reflects user selections made in the header
- * and updates the header when changed here.
- */
-declare function useHeaderProject(): UseHeaderProjectResult;
-/** Read the logged-in user's remaining credits (read-only; the Header owns it). */
-declare function useHeaderCredits(): number | undefined;
-//# sourceMappingURL=header-store.d.ts.map
-//#endregion
-//#region src/patterns/Header/session.d.ts
-/** Read the raw session JWT from the `{environmentId}-sessionId` cookie. */
-declare function getSessionToken(environmentId: string): string | null;
-/** Decode a JWT payload without verifying the signature (display/expiry only). */
-
-/** True when a valid, unexpired session cookie exists for the environment. */
-declare function isSessionValid(environmentId: string): boolean;
-//#endregion
-//#region src/patterns/Header/api.d.ts
-declare function buildEndpoints(apiBaseUrl: string, overrides?: HeaderProps["endpoints"]): HeaderEndpoints;
-//#endregion
-//#region src/patterns/Header/labels.d.ts
-/** Default UI strings. Spread-override via the Header `labels` prop if needed. */
-declare const DEFAULT_LABELS: {
-  readonly orgLabel: "Org";
-  readonly projectLabel: "Project";
-  readonly projectPlaceholder: "Select project...";
-  readonly searchPlaceholder: "Search project";
-  readonly emptyStateText: "No projects found";
-  readonly profileMenuLabel: "Profile menu";
-  readonly logoutLabel: "Logout";
-  readonly overlayTitle: "Select a Project";
-  readonly overlayDescription: "Choose a project to get started. You can change it anytime from the header.";
-};
-type Labels = typeof DEFAULT_LABELS;
-//# sourceMappingURL=labels.d.ts.map
-//#endregion
-//#region src/patterns/MediaObject/MediaObject.d.ts
-type MediaObjectProps = React.ComponentProps<"article"> & {
-  /** Add a CSS hover lift + shadow (no JS state). */
-  interactive?: boolean;
-};
-declare function MediaObject({
-  className,
-  interactive,
-  ...props
-}: MediaObjectProps): react_jsx_runtime0.JSX.Element;
-type MediaObjectImageProps = React.ComponentProps<"img"> & {
-  alt: string;
-};
-declare function MediaObjectImage({
-  className,
-  alt,
-  ...props
-}: MediaObjectImageProps): react_jsx_runtime0.JSX.Element;
-declare function MediaObjectIcon({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-declare function MediaObjectContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
-  /** Heading size step passthrough (defaults to "4"). */
-  size?: HeadingProps["size"];
-};
-declare function MediaObjectTitle({
-  size,
-  ...props
-}: MediaObjectTitleProps): react_jsx_runtime0.JSX.Element;
-declare function MediaObjectText({
-  ...props
-}: React.ComponentProps<typeof Text>): react_jsx_runtime0.JSX.Element;
-declare function MediaObjectActions({
-  className,
-  ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
-declare const mediaObjectGroupVariants: (props?: ({
-  columns?: 3 | 1 | 2 | 4 | null | undefined;
-  gap?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-type MediaObjectGroupProps = React.ComponentProps<"div"> & VariantProps<typeof mediaObjectGroupVariants>;
-declare function MediaObjectGroup({
-  className,
-  columns,
-  gap,
-  ...props
-}: MediaObjectGroupProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/patterns/SectionCard/SectionCard.d.ts
-type SectionCardProps = Omit<React.ComponentProps<"div">, "title"> & {
-  /** Section title rendered in the header. */
-  title: React.ReactNode;
-  /** Optional right-aligned action slot (e.g. a Button). */
-  action?: React.ReactNode;
-};
-declare function SectionCard({
-  title,
-  action,
-  className,
-  children,
-  ...props
-}: SectionCardProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/patterns/SectionHeading/SectionHeading.d.ts
-type SectionHeadingProps = Omit<React.ComponentProps<"div">, "title"> & {
-  /** The main heading content. */
-  title: React.ReactNode;
-  /** Optional supporting copy rendered below the heading. */
-  subtitle?: React.ReactNode;
-  /** Optional small label rendered above the heading. */
-  eyebrow?: React.ReactNode;
-  /** Horizontal alignment of the block. Defaults to `center`. */
-  align?: "center" | "left";
-  /** Render the title with the brand gradient fill. */
-  gradient?: boolean;
-  /** Visual size of the title (Heading scale). Defaults to `1`. */
-  titleSize?: HeadingProps["size"];
-  /** Semantic element for the title. Defaults to `h2`. */
-  titleAs?: React.ElementType;
-};
-declare function SectionHeading({
-  title,
-  subtitle,
-  eyebrow,
-  align,
-  gradient,
-  titleSize,
-  titleAs,
-  className,
-  ...props
-}: SectionHeadingProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { type ColumnDef, DEFAULT_LABELS, DataTable, DataTableColumnHeader, Fetcher, Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart, GlobalHeaderState, Header, HeaderBar, HeaderEndpoints, HeaderLogo, HeaderProps, HeaderSelection, Labels, MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, type MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, type MediaObjectImageProps, type MediaObjectProps, MediaObjectText, MediaObjectTitle, type MediaObjectTitleProps, OrgPill, ProfileMenu, ProjectNode, ProjectPicker, SectionCard, type SectionCardProps, SectionHeading, type SectionHeadingProps, TOGGLE_PROJECT_DROPDOWN_EVENT, ThemeToggle, ToggleProjectDropdownDetail, UseHeaderProjectResult, buildEndpoints, getSessionToken, isSessionValid, mediaObjectGroupVariants, useGlobalHeader, useHeaderCredits, useHeaderProject };
-//# sourceMappingURL=index.d.ts.map
+import { ColumnDef, DataTable, DataTableColumnHeader } from "./DataTable/index.js";
+import { Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart } from "./Footer/index.js";
+import { C as HeaderProps, S as HeaderEndpoints, _ as HeaderLogo, a as isSessionValid, b as ThemeToggle, c as useHeaderCredits, d as TOGGLE_PROJECT_DROPDOWN_EVENT, f as ToggleProjectDropdownDetail, g as HeaderBar, h as Header, i as getSessionToken, l as useHeaderProject, m as ProjectPicker, n as Labels, o as HeaderSelection, p as useGlobalHeader, r as buildEndpoints, s as UseHeaderProjectResult, t as DEFAULT_LABELS, u as GlobalHeaderState, v as OrgPill, w as ProjectNode, x as Fetcher, y as ProfileMenu } from "../index70.js";
+import { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, MediaObjectImageProps, MediaObjectProps, MediaObjectText, MediaObjectTitle, MediaObjectTitleProps, mediaObjectGroupVariants } from "./MediaObject/index.js";
+import { SectionCard, SectionCardProps } from "./SectionCard/index.js";
+import { SectionHeading, SectionHeadingProps } from "./SectionHeading/index.js";
+export { ColumnDef, DEFAULT_LABELS, DataTable, DataTableColumnHeader, Fetcher, Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart, GlobalHeaderState, Header, HeaderBar, HeaderEndpoints, HeaderLogo, HeaderProps, HeaderSelection, Labels, MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, MediaObjectImageProps, MediaObjectProps, MediaObjectText, MediaObjectTitle, MediaObjectTitleProps, OrgPill, ProfileMenu, ProjectNode, ProjectPicker, SectionCard, SectionCardProps, SectionHeading, SectionHeadingProps, TOGGLE_PROJECT_DROPDOWN_EVENT, ThemeToggle, ToggleProjectDropdownDetail, UseHeaderProjectResult, buildEndpoints, getSessionToken, isSessionValid, mediaObjectGroupVariants, useGlobalHeader, useHeaderCredits, useHeaderProject };