@bloomreach/react-banana-ui 1.14.0 → 1.16.0

package/dist/components/data-display/index.d.ts

@@ -10,3 +10,4 @@ export * from './table-row';
 export * from './table-sort-label';
 export * from './table';
 export * from './tag-group';
+export * from './typography';

package/dist/components/data-display/typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Typography } from './typography';
+export type { TypographyProps } from './typography.types';

package/dist/components/data-display/typography/typography.d.ts

@@ -0,0 +1,4 @@
+import type { TypographyComponent } from './typography.types';
+import './typography.scss';
+declare const _default: TypographyComponent;
+export default _default;

package/dist/components/data-display/typography/typography.qa.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './typography.stories';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: Story;
+export declare const AllVariants: Story;
+export declare const AllColors: Story;

package/dist/components/data-display/typography/typography.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Typography from './typography';
+declare const meta: Meta<typeof Typography>;
+export default meta;
+export type Story = StoryObj<typeof Typography>;
+export declare const Basic: Story;
+export declare const AllVariants: Story;
+export declare const AllColors: Story;

package/dist/components/data-display/typography/typography.types.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { PolymorphicComponentPropsWithRef, ResolveRoot, VariantMapping } from '../../../utils';
+interface TypographyInternalProps<Variant extends keyof TypographyVariantMapping | undefined> {
+    /**
+     * Color of typography element.
+     * If `undefined`, the CSS color value will be inherited.
+     */
+    color?: 'body' | 'subtl' | 'link' | 'success' | 'warning' | 'negative';
+    /**
+     * Variant of typography.
+     * If `undefined`, the CSS font value will be inherited.
+     */
+    variant?: Variant;
+}
+export type TypographyVariantMapping = VariantMapping<'p'> & {
+    link: 'a';
+    'link-small': 'a';
+    'heading-xl': 'h1';
+    'heading-1': 'h1';
+    'heading-2': 'h2';
+    'heading-3': 'h3';
+    'heading-4': 'h4';
+    'heading-5': 'h5';
+    text: 'p';
+    'text-bold': 'p';
+    'text-small': 'p';
+    'text-small-bold': 'p';
+    'text-mono': 'code';
+    'text-mono-small': 'code';
+};
+export type TypographyProps<RootElement extends React.ElementType | undefined, Variant extends keyof TypographyVariantMapping | undefined> = PolymorphicComponentPropsWithRef<ResolveRoot<RootElement, Variant, TypographyVariantMapping>, TypographyInternalProps<Variant>>;
+export type TypographyComponent = {
+    /**
+     * When `as` prop is defined.
+     */
+    <RootElement extends React.ElementType>(props: {
+        as: RootElement;
+    } & PolymorphicComponentPropsWithRef<RootElement, TypographyInternalProps<keyof TypographyVariantMapping>>): JSX.Element | null;
+    /**
+     * When `as` prop is not defined.
+     */
+    <Variant extends keyof TypographyVariantMapping | undefined>(props: PolymorphicComponentPropsWithRef<Variant extends keyof TypographyVariantMapping ? TypographyVariantMapping[Variant] : TypographyVariantMapping['default'], TypographyInternalProps<Variant>>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: any;
+};
+export {};

package/dist/components/navigation/index.d.ts

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './tabs';

package/dist/components/navigation/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tab';
+export * from './tab-list';
+export * from './tab-panel';
+export * from './tabs';

package/dist/components/navigation/tabs/tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tab } from './tab';
+export type { TabProps } from './tab.types';

package/dist/components/navigation/tabs/tab/tab.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { TabProps } from './tab.types';
+import './tab.scss';
+/**
+ * The tab element itself.
+ * Clicking on a tab displays its corresponding panel.
+ *
+ * ### Usages
+ *
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <Tabs>
+ *       <TabList>
+ *         <Tab value="tab-1">Tab 1</Tab>
+ *         <Tab value="tab-2" disabled>Tab 2</Tab>
+ *         <Tab value="tab-3" startIcon={<SomeIcon />}>Tab 3</Tab>
+ *       </TabList>
+ *       <TabPanel value="tab-1">Tab 1 content</TabPanel>
+ *       <TabPanel value="tab-2">Tab 2 content</TabPanel>
+ *       <TabPanel value="tab-3">Tab 3 content</TabPanel>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<Element>>;
+export default Tab;

package/dist/components/navigation/tabs/tab/tab.types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export interface TabProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * If true, the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * You can provide your own value.
+     * Otherwise, it falls back to the child position index.
+     */
+    value?: number | string;
+    /**
+     * Callback fired when the tab is clicked.
+     */
+    onClick?: (event: React.MouseEvent<Element, MouseEvent>, value?: number | string) => void;
+    /**
+     * Icon displayed before the content
+     */
+    startIcon?: ReactNode;
+}

package/dist/components/navigation/tabs/tab-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TabList } from './tab-list';
+export type { TabListProps } from './tab-list.types';

package/dist/components/navigation/tabs/tab-list/tab-list.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { TabListProps } from './tab-list.types';
+import './tab-list.scss';
+/**
+ * The container that houses the tabs.
+ * Responsible for handling focus and keyboard navigation between tabs.
+ *
+ * ### Usages
+ *
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <Tabs>
+ *       <TabList variant='primary'>
+ *         <Tab value="tab-1">Tab 1</Tab>
+ *         <Tab value="tab-2">Tab 2</Tab>
+ *         <Tab value="tab-3">Tab 3</Tab>
+ *       </TabList>
+ *       <TabPanel value="tab-1">Tab 1 content</TabPanel>
+ *       <TabPanel value="tab-2">Tab 2 content</TabPanel>
+ *       <TabPanel value="tab-3">Tab 3 content</TabPanel>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ */
+declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TabList;

package/dist/components/navigation/tabs/tab-list/tab-list.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface TabListProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Variant of tab.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+}

package/dist/components/navigation/tabs/tab-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TabPanel } from './tab-panel';
+export type { TabPanelProps } from './tab-panel.types';

package/dist/components/navigation/tabs/tab-panel/tab-panel.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TabPanelProps } from './tab-panel.types';
+import './tab-panel.scss';
+/**
+ * The card that hosts the content associated with a tab.
+ *
+ * ### Usages
+ *
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <Tabs>
+ *       <TabList>
+ *         <Tab value="tab-1">Tab 1</Tab>
+ *         <Tab value="tab-2">Tab 2</Tab>
+ *         <Tab value="tab-3">Tab 3</Tab>
+ *       </TabList>
+ *       <TabPanel value="tab-1" keepMounted>Tab 1 content</TabPanel>
+ *       <TabPanel value="tab-2">Tab 2 content</TabPanel>
+ *       <TabPanel value="tab-3">Tab 3 content</TabPanel>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ */
+declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLElement>>;
+export default TabPanel;

package/dist/components/navigation/tabs/tab-panel/tab-panel.types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface TabPanelProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     * If not provided, it will fall back to the index of the panel.
+     * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered.
+     */
+    value?: number | string;
+    /**
+     * Whether to mount the tab panel in the DOM even when it is not currently selected.
+     * Inactive tab panels are inert and cannot be interacted with.
+     * This prop can be useful in SEO situation or when you want to maximize
+     * the responsiveness of the Tab.
+     * @default false
+     */
+    keepMounted?: boolean;
+}

package/dist/components/navigation/tabs/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './tabs';
+export type { TabsProps } from './tabs.types';

package/dist/components/navigation/tabs/tabs/tabs.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { TabsProps } from './tabs.types';
+import './tabs.scss';
+/**
+ * The top-level component that wraps the Tabs List and Tab Panel components
+ * so that tabs and their panels can communicate with one another.
+ *
+ * ### Usages
+ *
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <Tabs defaultValue="tab-1">
+ *       <TabList>
+ *         <Tab value="tab-1">Tab 1</Tab>
+ *         <Tab value="tab-2">Tab 2</Tab>
+ *         <Tab value="tab-3">Tab 3</Tab>
+ *       </TabList>
+ *       <TabPanel value="tab-1">Tab 1 content</TabPanel>
+ *       <TabPanel value="tab-2">Tab 2 content</TabPanel>
+ *       <TabPanel value="tab-3">Tab 3 content</TabPanel>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ */
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tabs;

package/dist/components/navigation/tabs/tabs/tabs.types.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export interface TabsProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: number | string;
+    /**
+     * The value of the currently selected Tab.
+     * Use when the component is controlled.
+     * If you don't want any selected Tab, you can set this prop to null.
+     */
+    value?: number | string | null;
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element> | React.SyntheticEvent<Element, Event> | null, value: string | number | null) => void;
+    /**
+     * If true the selected tab changes on focus.
+     * Otherwise it only changes on activation.
+     * @default false
+     */
+    selectionFollowsFocus?: boolean;
+}

package/dist/components/navigation/tabs/tabs.qa.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './tabs.stories';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: Story;
+export declare const DifferentVariants: Story;

package/dist/components/navigation/tabs/tabs.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+export type Story = StoryObj<typeof Tabs>;
+export declare const Basic: Story;
+export declare const Controlled: Story;
+export declare const PrimaryTab: Story;
+export declare const SecondaryTab: Story;
+export declare const keepMounted: Story;