@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.1-rc.e248cf2a

package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexSuiteAIDetailsPlaylist.content.d.ts","sourceRoot":"","sources":["../../../../../src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.ts"],"names":[],"mappings":"AAAA,KAAK,qCAAqC,GAAG;IAC3C,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,sCAAsC,GAAG;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,KAAK,wCAAwC,GAAG;IAC9C,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,sCAAsC,EAAE,CAAA;CACjD,CAAA;AAED,MAAM,MAAM,iCAAiC,GAAG;IAC9C,MAAM,EAAE;QACN,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,EAAE,CAAA;KAChB,CAAA;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAA;QACrB,eAAe,EAAE,MAAM,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;QACrB,aAAa,EAAE,MAAM,CAAA;QACrB,iBAAiB,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,SAAS,EAAE,CAAC,wCAAwC,EAAE,wCAAwC,CAAC,CAAA;IAC/F,SAAS,EAAE;QACT,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,qCAAqC,EAAE,CAAA;KAC/C,CAAA;IACD,GAAG,EAAE;QACH,aAAa,EAAE,MAAM,CAAA;QACrB,eAAe,EAAE,MAAM,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,MAAM,CAAA;KACtB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,wCAAwC,EAAE,iCA4FtD,CAAA;AAED,KAAK,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;AAExC,wBAAgB,6CAA6C,CAAC,CAAC,EAAE,SAAS,GAAG,iCAAiC,CAqG7G"}

package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.d.ts

@@ -0,0 +1,7 @@
+import { type FlexSuiteAIDetailsPlaylistContent } from './FlexSuiteAIDetailsPlaylist.content';
+export type FlexSuiteAIDetailsPlaylistTemplateProps = {
+    content: FlexSuiteAIDetailsPlaylistContent;
+};
+export declare function FlexSuiteAIDetailsPlaylist(): import("react/jsx-runtime").JSX.Element;
+export declare function FlexSuiteAIDetailsPlaylistTemplate({ content }: FlexSuiteAIDetailsPlaylistTemplateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FlexSuiteAIDetailsPlaylist.d.ts.map

package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexSuiteAIDetailsPlaylist.d.ts","sourceRoot":"","sources":["../../../../../src/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAEL,KAAK,iCAAiC,EACvC,MAAM,sCAAsC,CAAA;AAI7C,MAAM,MAAM,uCAAuC,GAAG;IACpD,OAAO,EAAE,iCAAiC,CAAA;CAC3C,CAAA;AAUD,wBAAgB,0BAA0B,4CAEzC;AAED,wBAAgB,kCAAkC,CAAC,EAAC,OAAO,EAAC,EAAE,uCAAuC,2CA8JpG"}

package/esm/recipes/Flexsuite/Details/index.d.ts

@@ -0,0 +1,4 @@
+import { FlexSuiteAIDetailsPlaylist } from './FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist';
+declare const FlexSuiteDetails: typeof FlexSuiteAIDetailsPlaylist;
+export { FlexSuiteAIDetailsPlaylist, FlexSuiteDetails };
+//# sourceMappingURL=index.d.ts.map

package/esm/recipes/Flexsuite/Details/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/recipes/Flexsuite/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,0BAA0B,EAAC,MAAM,yDAAyD,CAAA;AAElG,QAAA,MAAM,gBAAgB,mCAA6B,CAAA;AAEnD,OAAO,EAAC,0BAA0B,EAAE,gBAAgB,EAAC,CAAA"}

package/esm/recipes/Flexsuite/Overview/FlexSuiteAIOverview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexSuiteAIOverview.d.ts","sourceRoot":"","sources":["../../../../src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAoC,KAAK,0BAA0B,EAAC,MAAM,+BAA+B,CAAA;AAGhH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,OAAO,EAAE,0BAA0B,CAAA;CACpC,CAAA;AAID,wBAAgB,mBAAmB,4CAElC;AAED,wBAAgB,2BAA2B,CAAC,EAAC,OAAO,EAAC,EAAE,gCAAgC,2CAsWtF"}
+{"version":3,"file":"FlexSuiteAIOverview.d.ts","sourceRoot":"","sources":["../../../../src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAoC,KAAK,0BAA0B,EAAC,MAAM,+BAA+B,CAAA;AAGhH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,OAAO,EAAE,0BAA0B,CAAA;CACpC,CAAA;AAID,wBAAgB,mBAAmB,4CAElC;AAED,wBAAgB,2BAA2B,CAAC,EAAC,OAAO,EAAC,EAAE,gCAAgC,2CAwXtF"}

package/lib/MediaPlaylist/MediaPlaylist.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};

package/lib/MediaPlaylist/index.d.ts

@@ -0,0 +1 @@
+export * from './MediaPlaylist';

package/lib/MediaPlaylist/useMediaPlaylist.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { PaginationPageType } from '../Pagination/model';
+type UseMediaPlaylistProps = {
+    children: React.ReactNode;
+    components: MediaPlaylistComponentTypes;
+    defaultSelectedIndex: number;
+    onChange?: (selectedIndex: number) => void;
+    selectedIndex?: number;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export type MediaPlaylistComponentTypes = {
+    Heading: React.ElementType;
+    Item: React.ElementType;
+    ItemHeading: React.ElementType;
+    ItemContent: React.ElementType;
+    ItemMedia: React.ElementType;
+};
+type MediaPlaylistHeadingChildProps = {
+    activeIndex?: number | null;
+    id?: string;
+    itemCount?: number;
+};
+type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
+type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
+type MediaPlaylistItemData = {
+    className?: string;
+    content: MediaPlaylistItemChild;
+    heading: MediaPlaylistItemChild;
+    media: MediaPlaylistItemChild;
+    thumbnail?: React.ReactNode;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
+    activeIndex: number | null;
+    currentItemPage: number;
+    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
+        [key: string]: string;
+    };
+    getTabListProps: (props: {
+        label: string;
+        labelledBy?: never;
+    } | {
+        labelledBy: string;
+        label?: never;
+    }) => {
+        role: "tablist";
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    getTabPanelProps: (id: string) => {
+        role: "tabpanel";
+        id: `tabs-${string}-panel-${string}`;
+        'aria-labelledby': `tabs-${string}-tab-${string}`;
+        hidden: boolean;
+        tabIndex: 0;
+    };
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
+        role: "tab";
+        id: `tabs-${string}-tab-${string}`;
+        'aria-controls': `tabs-${string}-panel-${string}`;
+        'aria-selected': boolean;
+        tabIndex: 0 | -1;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        ref: (element: HTMLElement | null) => void;
+    };
+    handlePageChange: (event: React.MouseEvent, page: number) => void;
+    hasOverflowItems: boolean;
+    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
+    isItemSelected: (index: number) => boolean;
+    items: MediaPlaylistItemData[];
+    setItemRef: (index: number, element: HTMLDivElement | null) => void;
+    tabListRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};

package/lib/Pagination/Pagination.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-/**
- * Design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+import { PaginationPageType } from './model';
 export type PaginationProps = {
     pageCount: number;
     currentPage: number;
     onPageChange?: (e: React.MouseEvent, n: number) => void;
     hrefBuilder?: (n: number) => string;
-    pageAttributesBuilder?: (n: number) => {
+    pageAttributesBuilder?: (n: number, page: PaginationPageType) => {
         [attributeName: string]: string;
     };
     marginPageCount?: number;

package/lib/Pagination/model.d.ts

@@ -1,8 +1,8 @@
-export type PageType = {
+export type PaginationPageType = {
     type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK';
     num: number;
     disabled?: boolean;
     selected?: boolean;
     precedesBreak?: boolean;
 };
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationPageType[];