@chromatic-com/tetra 3.0.0--canary.106.e65baac.0 → 3.0.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _emotion_react from '@emotion/react';
 import * as React from 'react';
-import React__default, { FC, ReactNode, ElementType, FunctionComponent } from 'react';
+import React__default, { FC, ReactNode, ElementType, ComponentType, FunctionComponent } from 'react';
 import * as _emotion_styled from '@emotion/styled';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 
@@ -407,6 +407,8 @@ declare const icons: {
     readonly youtube: JSX.Element;
     readonly linkedin: JSX.Element;
     readonly vscode: JSX.Element;
+    readonly bluesky: JSX.Element;
+    readonly photostabilize: JSX.Element;
 };
 
 type Icons = keyof typeof icons;
@@ -513,12 +515,13 @@ interface ButtonProps {
     size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'outline';
     color?: 'blue' | 'white' | 'slate';
+    inverted?: boolean;
     leftIcon?: Icons;
     rightIcon?: Icons;
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     onClick?: () => void;
-    as?: 'button' | 'a';
+    as?: 'button' | 'a' | 'span';
 }
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
@@ -555,30 +558,11 @@ declare const DropdownMenuItem: _emotion_styled.StyledComponent<RadixDropdownMen
     theme?: _emotion_react.Theme | undefined;
 }, {}, {}>;
 
-interface FooterItem {
-    title: string;
-    href: string;
-    LinkWrapper?: any;
-}
-interface FooterColumn {
-    title: string;
-    links: FooterItem[];
-}
-interface FooterSocialItem extends FooterItem {
-    icon: IconProps['name'];
-}
-interface HomeItem {
-    href: string;
-    LinkWrapper?: any;
-}
-
 interface FooterProps {
     theme: 'light' | 'dark';
-    columns: FooterColumn[];
-    socialLinks: FooterSocialItem[];
-    homeLink: HomeItem;
+    LinkWrapper: ElementType;
 }
-declare const Footer: ({ theme, columns, socialLinks, homeLink, ...props }: FooterProps) => JSX.Element;
+declare const Footer: ({ theme, LinkWrapper, ...props }: FooterProps) => JSX.Element;
 
 interface ColumnProps {
     children: ReactNode;
@@ -601,55 +585,32 @@ declare const Grid: FC<GridProps> & {
     Column: FC<ColumnProps>;
 };
 
-interface HeaderMobileSection {
-    name?: string;
-    maxItems?: number;
-    collapsible?: boolean;
-    content: {
-        title: string;
-        href: string;
-        linkWrapper?: any;
-        icon?: Icons;
-        iconColor?: keyof typeof color;
-        customIcon?: ReactNode;
-    }[];
-}
-interface HeaderDesktopItemContent {
-    type: 'link' | 'separator';
+interface HeaderLink {
     title: string;
-    description?: string;
-    href?: string;
-    linkWrapper?: any;
     icon?: Icons;
     iconColor?: keyof typeof color;
-    customIcon?: ReactNode;
-}
-interface HeaderDesktopItem {
-    id: string;
-    name: string;
-    href?: string;
+    customIcon?: React__default.ReactNode;
+    href: string;
     linkWrapper?: any;
-    leftPosition?: number;
-    menu?: {
-        content: HeaderDesktopItemContent[];
-        backgroundColor?: keyof typeof color;
-    }[];
 }
+type HeaderLinks = Record<LinkKeys, HeaderLink>;
+
 interface HeaderProps {
     theme?: 'light' | 'dark';
-    logo?: 'chromatic' | 'storybook';
-    logoHref?: string;
     logoLinkWrapper?: any;
-    desktopData: HeaderDesktopItem[];
-    desktopRight?: ReactNode;
     desktopActiveId?: string;
-    mobileData: HeaderMobileSection[];
-    mobileTop?: ReactNode;
-    mobileBottom?: ReactNode;
     fullWidth?: boolean;
+    loggedIn?: boolean;
+    maintenanceMode?: boolean;
+    isSticky?: boolean;
+    links: HeaderLinks;
+    TrackSignUp: ComponentType<{
+        children: ReactNode;
+    }>;
 }
+type LinkKeys = 'signin' | 'signup' | 'uiTest' | 'visualTest' | 'interactionTest' | 'accessibilityTest' | 'storybook' | 'playwright' | 'cypress' | 'turboSnap' | 'uiReview' | 'publish' | 'figmaPlugin' | 'frontendTeams' | 'designSystems' | 'digitalAgencies' | 'aboutChromatic' | 'careers' | 'security' | 'enterprise' | 'netlify' | 'monday' | 'collective' | 'ezcater' | 'blog' | 'changelog' | 'frontendTestingGuide' | 'docs' | 'pricing' | 'sales' | 'steadySnap';
 
-declare const Header: FC<HeaderProps>;
+declare const Header: ({ theme, links, logoLinkWrapper, desktopActiveId, fullWidth, loggedIn, maintenanceMode, isSticky, TrackSignUp, }: HeaderProps) => JSX.Element;
 
 declare const CollectiveIcon: () => JSX.Element;
 
@@ -678,6 +639,7 @@ interface LinkProps {
     children: React__default.ReactNode;
     size?: 'default' | 'sm' | 'md' | 'lg';
     color?: keyof typeof color;
+    inverted?: boolean;
     leftIcon?: Icons;
     rightIcon?: Icons;
     href?: string;
@@ -693,6 +655,7 @@ interface LinkWithWrapperProps extends React__default.AnchorHTMLAttributes<HTMLA
     LinkWrapper?: ElementType;
     children: ReactNode;
     href: string;
+    noAnchor?: boolean;
 }
 /**
  * Optionally replace anchor tags with a wrapper component
@@ -844,4 +807,4 @@ declare const Text: FC<TextProps>;
 
 declare const cssVariables: string;
 
-export { Accordion, Avatar, BBCIcon, Button, CollectiveIcon, Container, CustomerStoryHero, CypressIcon, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuItem, EzCaterIcon, FigmaIcon, Footer, FooterProps, FullWidthContainer, Grid, HStack, Header, HeaderProps, Icon, Icons, IntegrationImage, Link, LinkWithWrapper, ListTypes, Logo, MondayIcon, NavDropdownMenu, NetlifyIcon, NormalizeArea, PlaywrightIcon, Stack, Stat, SubNav, Testimonial, Text, VStack, animations, breakpoint, color, cssVariables, fontFamily, fontSize, fontWeight, lineHeight, max2xl, maxLg, maxMd, maxSm, maxXl, min2xl, minBase, minLg, minMd, minSm, minXl, spacing, t, typography, useMediaQuery };
+export { Accordion, Avatar, BBCIcon, Button, CollectiveIcon, Container, CustomerStoryHero, CypressIcon, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuItem, EzCaterIcon, FigmaIcon, Footer, type FooterProps, FullWidthContainer, Grid, HStack, Header, type HeaderProps, Icon, type Icons, IntegrationImage, Link, LinkWithWrapper, type ListTypes, Logo, MondayIcon, NavDropdownMenu, NetlifyIcon, NormalizeArea, PlaywrightIcon, Stack, Stat, SubNav, Testimonial, Text, VStack, animations, breakpoint, color, cssVariables, fontFamily, fontSize, fontWeight, lineHeight, max2xl, maxLg, maxMd, maxSm, maxXl, min2xl, minBase, minLg, minMd, minSm, minXl, spacing, t, typography, useMediaQuery };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react from '@emotion/react';
 import * as React from 'react';
-import React__default, { FC, ReactNode, ElementType, FunctionComponent } from 'react';
+import React__default, { FC, ReactNode, ElementType, ComponentType, FunctionComponent } from 'react';
 import * as _emotion_styled from '@emotion/styled';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 
@@ -407,6 +407,8 @@ declare const icons: {
     readonly youtube: JSX.Element;
     readonly linkedin: JSX.Element;
     readonly vscode: JSX.Element;
+    readonly bluesky: JSX.Element;
+    readonly photostabilize: JSX.Element;
 };
 
 type Icons = keyof typeof icons;
@@ -513,12 +515,13 @@ interface ButtonProps {
     size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'outline';
     color?: 'blue' | 'white' | 'slate';
+    inverted?: boolean;
     leftIcon?: Icons;
     rightIcon?: Icons;
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     onClick?: () => void;
-    as?: 'button' | 'a';
+    as?: 'button' | 'a' | 'span';
 }
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
@@ -555,30 +558,11 @@ declare const DropdownMenuItem: _emotion_styled.StyledComponent<RadixDropdownMen
     theme?: _emotion_react.Theme | undefined;
 }, {}, {}>;
 
-interface FooterItem {
-    title: string;
-    href: string;
-    LinkWrapper?: any;
-}
-interface FooterColumn {
-    title: string;
-    links: FooterItem[];
-}
-interface FooterSocialItem extends FooterItem {
-    icon: IconProps['name'];
-}
-interface HomeItem {
-    href: string;
-    LinkWrapper?: any;
-}
-
 interface FooterProps {
     theme: 'light' | 'dark';
-    columns: FooterColumn[];
-    socialLinks: FooterSocialItem[];
-    homeLink: HomeItem;
+    LinkWrapper: ElementType;
 }
-declare const Footer: ({ theme, columns, socialLinks, homeLink, ...props }: FooterProps) => JSX.Element;
+declare const Footer: ({ theme, LinkWrapper, ...props }: FooterProps) => JSX.Element;
 
 interface ColumnProps {
     children: ReactNode;
@@ -601,55 +585,32 @@ declare const Grid: FC<GridProps> & {
     Column: FC<ColumnProps>;
 };
 
-interface HeaderMobileSection {
-    name?: string;
-    maxItems?: number;
-    collapsible?: boolean;
-    content: {
-        title: string;
-        href: string;
-        linkWrapper?: any;
-        icon?: Icons;
-        iconColor?: keyof typeof color;
-        customIcon?: ReactNode;
-    }[];
-}
-interface HeaderDesktopItemContent {
-    type: 'link' | 'separator';
+interface HeaderLink {
     title: string;
-    description?: string;
-    href?: string;
-    linkWrapper?: any;
     icon?: Icons;
     iconColor?: keyof typeof color;
-    customIcon?: ReactNode;
-}
-interface HeaderDesktopItem {
-    id: string;
-    name: string;
-    href?: string;
+    customIcon?: React__default.ReactNode;
+    href: string;
     linkWrapper?: any;
-    leftPosition?: number;
-    menu?: {
-        content: HeaderDesktopItemContent[];
-        backgroundColor?: keyof typeof color;
-    }[];
 }
+type HeaderLinks = Record<LinkKeys, HeaderLink>;
+
 interface HeaderProps {
     theme?: 'light' | 'dark';
-    logo?: 'chromatic' | 'storybook';
-    logoHref?: string;
     logoLinkWrapper?: any;
-    desktopData: HeaderDesktopItem[];
-    desktopRight?: ReactNode;
     desktopActiveId?: string;
-    mobileData: HeaderMobileSection[];
-    mobileTop?: ReactNode;
-    mobileBottom?: ReactNode;
     fullWidth?: boolean;
+    loggedIn?: boolean;
+    maintenanceMode?: boolean;
+    isSticky?: boolean;
+    links: HeaderLinks;
+    TrackSignUp: ComponentType<{
+        children: ReactNode;
+    }>;
 }
+type LinkKeys = 'signin' | 'signup' | 'uiTest' | 'visualTest' | 'interactionTest' | 'accessibilityTest' | 'storybook' | 'playwright' | 'cypress' | 'turboSnap' | 'uiReview' | 'publish' | 'figmaPlugin' | 'frontendTeams' | 'designSystems' | 'digitalAgencies' | 'aboutChromatic' | 'careers' | 'security' | 'enterprise' | 'netlify' | 'monday' | 'collective' | 'ezcater' | 'blog' | 'changelog' | 'frontendTestingGuide' | 'docs' | 'pricing' | 'sales' | 'steadySnap';
 
-declare const Header: FC<HeaderProps>;
+declare const Header: ({ theme, links, logoLinkWrapper, desktopActiveId, fullWidth, loggedIn, maintenanceMode, isSticky, TrackSignUp, }: HeaderProps) => JSX.Element;
 
 declare const CollectiveIcon: () => JSX.Element;
 
@@ -678,6 +639,7 @@ interface LinkProps {
     children: React__default.ReactNode;
     size?: 'default' | 'sm' | 'md' | 'lg';
     color?: keyof typeof color;
+    inverted?: boolean;
     leftIcon?: Icons;
     rightIcon?: Icons;
     href?: string;
@@ -693,6 +655,7 @@ interface LinkWithWrapperProps extends React__default.AnchorHTMLAttributes<HTMLA
     LinkWrapper?: ElementType;
     children: ReactNode;
     href: string;
+    noAnchor?: boolean;
 }
 /**
  * Optionally replace anchor tags with a wrapper component
@@ -844,4 +807,4 @@ declare const Text: FC<TextProps>;
 
 declare const cssVariables: string;
 
-export { Accordion, Avatar, BBCIcon, Button, CollectiveIcon, Container, CustomerStoryHero, CypressIcon, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuItem, EzCaterIcon, FigmaIcon, Footer, FooterProps, FullWidthContainer, Grid, HStack, Header, HeaderProps, Icon, Icons, IntegrationImage, Link, LinkWithWrapper, ListTypes, Logo, MondayIcon, NavDropdownMenu, NetlifyIcon, NormalizeArea, PlaywrightIcon, Stack, Stat, SubNav, Testimonial, Text, VStack, animations, breakpoint, color, cssVariables, fontFamily, fontSize, fontWeight, lineHeight, max2xl, maxLg, maxMd, maxSm, maxXl, min2xl, minBase, minLg, minMd, minSm, minXl, spacing, t, typography, useMediaQuery };
+export { Accordion, Avatar, BBCIcon, Button, CollectiveIcon, Container, CustomerStoryHero, CypressIcon, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuItem, EzCaterIcon, FigmaIcon, Footer, type FooterProps, FullWidthContainer, Grid, HStack, Header, type HeaderProps, Icon, type Icons, IntegrationImage, Link, LinkWithWrapper, type ListTypes, Logo, MondayIcon, NavDropdownMenu, NetlifyIcon, NormalizeArea, PlaywrightIcon, Stack, Stat, SubNav, Testimonial, Text, VStack, animations, breakpoint, color, cssVariables, fontFamily, fontSize, fontWeight, lineHeight, max2xl, maxLg, maxMd, maxSm, maxXl, min2xl, minBase, minLg, minMd, minSm, minXl, spacing, t, typography, useMediaQuery };