@primer/react-brand 0.0.0-20250819085603 → 0.0.0-20250819152121

package/lib/Tabs/Tabs.d.ts

@@ -0,0 +1,47 @@
+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';
+export type TabsProps = {
+    align?: 'start' | 'center';
+    children: ReactNode;
+    value?: string;
+    onChange?: (activeTab: string) => void;
+    variant?: 'default' | 'accent' | 'underline';
+    className?: string;
+    'aria-label': string;
+} & BaseProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type TabsItemProps = {
+    children: ReactNode;
+    value?: string;
+    disabled?: boolean;
+    className?: string;
+    isActive?: boolean;
+    variant?: 'default' | 'accent';
+    'data-value'?: string;
+};
+export type TabsPanelProps = {
+    children: ReactNode;
+    value?: string;
+    activeValue?: string | number;
+    className?: string;
+    animation?: (typeof AnimationVariants)[number] | false;
+};
+/**
+ * Use Tabs to display a list of tabs with associated content panels.
+ * @see https://primer.style/brand/components/Tabs
+ */
+export declare const Tabs: React.NamedExoticComponent<TabsProps> & {
+    Item: React.ForwardRefExoticComponent<TabsItemProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.NamedExoticComponent<TabsPanelProps>;
+    testIds: {
+        root: string;
+        readonly tab: string;
+        readonly panel: string;
+    };
+};
+export default Tabs;

package/lib/Tabs/index.d.ts

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