@primer/react-brand 0.57.3-rc.b0c8b6c3 → 0.58.0-rc.14dba7c6

package/lib/Tabs/Tabs.d.ts

@@ -0,0 +1,181 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { BaseProps } from '../component-helpers';
+import { AnimationVariants } from '../animation';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css';
+/**
+ * Accessible label for the entire tabs component, used by screen readers to describe the tab group.
+ * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.
+ */
+type LabelOrLabelledBy = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+export type TabsProps = {
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: 'default' | 'accent' | 'underline';
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: 'start' | 'center';
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & LabelOrLabelledBy & BaseProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type TabsItemProps = {
+    children: ReactNode;
+    className?: string;
+    isActive?: boolean;
+    variant?: 'default' | 'accent';
+    /**
+     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+     * relationships between tabs and panels.
+     * @see https://primer.style/brand/components/Tabs/#custom-panels
+     */
+    id?: string;
+} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>;
+export type TabsPanelProps = {
+    children: ReactNode;
+    className?: string;
+    animation?: (typeof AnimationVariants)[number] | false;
+    hidden?: boolean;
+    /**
+     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+     * relationships between tabs and panels.
+     * @see https://primer.style/brand/components/Tabs/#custom-panels
+     */
+    id?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>;
+/**
+ * Use Tabs to display a list of tabs with associated content panels.
+ * @see https://primer.style/brand/components/Tabs
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<(Omit<{
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: "default" | "accent" | "underline";
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: "start" | "center";
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "ref"> | Omit<{
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: "default" | "accent" | "underline";
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: "start" | "center";
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "ref">) & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<{
+        children: ReactNode;
+        className?: string;
+        isActive?: boolean;
+        variant?: "default" | "accent";
+        /**
+         * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+         * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+         * relationships between tabs and panels.
+         * @see https://primer.style/brand/components/Tabs/#custom-panels
+         */
+        id?: string;
+    } & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "id"> & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.NamedExoticComponent<TabsPanelProps>;
+    testIds: {
+        root: string;
+        readonly tab: string;
+        readonly panel: string;
+        readonly indicators: string;
+    };
+};
+export {};

package/lib/Tabs/Tabs.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Tabs/index.d.ts

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