@companycam/slab-web 1.16.2-beta.3 → 1.16.2-beta.5

package/lib/Billboard/Billboard.d.ts

@@ -6,12 +6,13 @@ export type BillboardImage = {
     alt: string;
     imageContainerStyle?: CSSProperties;
 };
-type Action = Omit<ButtonProps, 'children'> & {
+type Action<C extends React.ElementType = 'button'> = ButtonProps<C> & {
     label: string;
     'data-testid'?: string;
+    children?: 'never';
 };
 type HTMLDivProps = ComponentPropsWithRef<'div'>;
-export type BillboardProps = HTMLDivProps & {
+export type BillboardProps<PrimaryActionButtonComponent extends React.ElementType = 'button', SecondaryActionButtonComponent extends React.ElementType = 'button'> = HTMLDivProps & {
     color?: BillboardIconColor;
     /** Add margin with spacing design tokens: `ccMargin="none xl l s"` */
     ccMargin?: string;
@@ -20,9 +21,9 @@ export type BillboardProps = HTMLDivProps & {
     /** Body text below the title */
     message?: string;
     /** Top button. [Button](../?path=/docs/button--docs) props. */
-    primaryAction?: Action;
+    primaryAction?: Action<PrimaryActionButtonComponent>;
     /** Bottom button - always `subtle`. [Button](../?path=/docs/button--docs) props. */
-    secondaryAction?: Action;
+    secondaryAction?: Action<SecondaryActionButtonComponent>;
     /** Heading text */
     title?: string;
     /** Image source, alt text, image container style */
@@ -35,5 +36,5 @@ export type BillboardProps = HTMLDivProps & {
  * - If the `message` is long enough, set a `max-width` by extending Billboard as a `styled-component`: `const StyledBillboard = styled(Billboard)({ maxWidth: '400px'; margin: 0 auto; });`
  * - Target the `image.imageContainerStyle` prop to style the image container to best accommodate your image's aspect ratio.
  */
-export declare const Billboard: ({ image, ccMargin, color, iconName, message, primaryAction, secondaryAction, title, ...props }: BillboardProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Billboard<PrimaryActionButtonComponent extends React.ElementType = 'button', SecondaryActionButtonComponent extends React.ElementType = 'button'>({ image, ccMargin, color, iconName, message, primaryAction, secondaryAction, title, ...props }: BillboardProps<PrimaryActionButtonComponent, SecondaryActionButtonComponent>): import("react/jsx-runtime").JSX.Element;
 export default Billboard;

package/lib/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { default as React, CSSProperties, ReactElement } from 'react';
-import { PolymorphicComponentPropsWithRef } from '../shared/types';
+import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../shared/types';
 type ButtonColor = 'destroy' | 'primary' | 'secondary' | 'subtle' | 'success';
 export type ButtonSize = 'small' | 'medium' | 'large';
 declare const ButtonDesigns: {
@@ -33,11 +33,17 @@ export type BaseButtonProps = {
 };
 export type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonProps>;
 export type ButtonAsAnchorProps = Omit<ButtonProps<'a'>, 'component' | 'href'> & {
+    component?: never;
     href: string;
 };
+declare function BaseButton<C extends React.ElementType = 'button'>(props: ButtonProps<C>, ref?: PolymorphicRef<C>): React.ReactNode;
+declare function BaseButton(props: ButtonAsAnchorProps, ref?: PolymorphicRef<'a'>): React.ReactNode;
+declare namespace BaseButton {
+    var displayName: string;
+}
 /**
  * A versatile button component that can be rendered as any HTML element or React component.
  * Automatically renders as an anchor tag when an href prop is provided.
  */
-export declare const Button: <C extends React.ElementType>(p: ButtonProps<C>) => React.ReactNode;
+export declare const Button: typeof BaseButton;
 export default Button;

package/lib/ButtonCondensed/ButtonCondensed.d.ts

@@ -1,10 +1,15 @@
 import { BaseButtonProps } from '../Button/Button';
-import { PolymorphicComponentPropsWithRef } from '../shared/types';
-type BaseButtonCondensedProps = Omit<BaseButtonProps, 'design'>;
+import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../shared/types';
+export type BaseButtonCondensedProps = Omit<BaseButtonProps, 'design'> & {
+    design?: never;
+};
 export type ButtonCondensedProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonCondensedProps>;
 export type ButtonCondensedAsAnchorProps = Omit<ButtonCondensedProps<'a'>, 'component' | 'href'> & {
+    component?: never;
     href: string;
 };
+declare function BaseButtonCondensed<C extends React.ElementType = 'button'>(props: ButtonCondensedProps<C>, ref?: PolymorphicRef<C>): React.ReactNode;
+declare function BaseButtonCondensed(props: ButtonCondensedAsAnchorProps, ref?: PolymorphicRef<'a'>): React.ReactNode;
 /**
 A minimal [Button](/docs/button--docs) with styles for situations where you don't need padding, such as inside a table cell.
 
@@ -12,5 +17,5 @@ ButtonCondensed accepts all of the same props as [Button](/docs/button--docs), b
 
 If you want to render a simple inline link within a text block, use [Link](/docs/link--docs) instead.
 */
-export declare const ButtonCondensed: <C extends React.ElementType>(p: ButtonCondensedProps<C>) => React.ReactNode;
+export declare const ButtonCondensed: typeof BaseButtonCondensed;
 export default ButtonCondensed;

package/lib/ButtonIcon/ButtonIcon.d.ts

@@ -1,19 +1,17 @@
 import { ElementType } from 'react';
 import { BaseButtonProps, IconComponentProps } from '../Button/Button';
 import { PolymorphicComponentPropsWithRef } from '../shared/types';
-type FilteredBaseButtonProps = Omit<BaseButtonProps, 'design' | 'icon' | 'size'>;
-type Size = 'small' | 'medium' | 'large';
 type Shape = 'circle' | 'square';
-export type BaseButtonIconProps<C extends ElementType> = FilteredBaseButtonProps & {
+export type BaseButtonIconProps = Omit<BaseButtonProps, 'design' | 'icon'> & {
     accessibilityLabel: string;
     iconName?: string;
     iconComponent?: IconComponentProps;
     shape?: Shape;
-    size?: Size;
     design?: 'solid' | 'minimal';
 };
-export type ButtonIconProps<C extends ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonIconProps<C>>;
+export type ButtonIconProps<C extends ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonIconProps>;
 export type ButtonIconAsAnchorProps = Omit<ButtonIconProps<'a'>, 'component' | 'href'> & {
+    component?: never;
     href: string;
 };
 /**

package/lib/ButtonIconCondensed/ButtonIconCondensed.d.ts

@@ -1,8 +1,9 @@
 import { BaseButtonIconProps } from '../ButtonIcon/ButtonIcon';
 import { PolymorphicComponentPropsWithRef } from '../shared/types';
-type BaseButtonIconCondensedProps<C extends React.ElementType = 'button'> = Omit<BaseButtonIconProps<C>, 'design'>;
-export type ButtonIconCondensedProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonIconCondensedProps<C>>;
+type BaseButtonIconCondensedProps = Omit<BaseButtonIconProps, 'design'>;
+export type ButtonIconCondensedProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, BaseButtonIconCondensedProps>;
 export type ButtonIconCondensedAsAnchorProps = Omit<ButtonIconCondensedProps<'a'>, 'component' | 'href'> & {
+    component?: never;
     href: string;
 };
 export declare const ButtonIconCondensed: <C extends React.ElementType>(p: ButtonIconCondensedProps<C>) => React.ReactNode;

package/lib/PageHeader/PageHeader.d.ts

@@ -1,13 +1,14 @@
 import { default as React, ComponentPropsWithRef } from 'react';
-import { ButtonProps } from '../Button/Button';
-type Action = Omit<ButtonProps, 'children' | 'color' | 'icon'> & {
+import { ButtonCondensedProps, BaseButtonCondensedProps } from '../ButtonCondensed/ButtonCondensed';
+type BaseAction = Omit<BaseButtonCondensedProps, 'color' | 'icon'> & {
     label: string;
     'data-testid'?: string;
 };
+type Action<C extends React.ElementType = 'button'> = ButtonCondensedProps<C> & BaseAction;
 type HTMLHeaderProps = ComponentPropsWithRef<'header'>;
-export type PageHeaderProps = HTMLHeaderProps & {
+export type PageHeaderProps<C extends React.ElementType = 'button'> = HTMLHeaderProps & {
     heading: string;
-    backAction?: Action;
+    backAction?: Action<C>;
     contentAfter?: React.ReactNode;
     contentAfterHeading?: React.ReactNode;
     hasBottomBorder?: boolean;
@@ -19,5 +20,5 @@ export type PageHeaderProps = HTMLHeaderProps & {
 - You can include an optional breadcrumb nav button above the heading with `backAction`. `backAction` gives you access to props for [Button](/docs/button--docs) and requires a `label`.
 - There's also an optional `contentAfter` prop where you can add buttons or other relevant content you may want to include at the end of the header.
 */
-export declare function PageHeader({ backAction, contentAfter, contentAfterHeading, hasBottomBorder, testId, heading, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader<BackActionComponent extends React.ElementType = 'button'>({ backAction, contentAfter, contentAfterHeading, hasBottomBorder, testId, heading, ...props }: PageHeaderProps<BackActionComponent>): import("react/jsx-runtime").JSX.Element;
 export default PageHeader;

package/lib/shared/Buttons/OverloadGenericTest.d.ts

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

package/lib/shared/Buttons/SimpleGenericTest.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.16.2-beta.3",
+  "version": "1.16.2-beta.5",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {