@servicetitan/anvil2 1.44.2 → 1.45.1

package/dist/components/Avatar/internal/AvatarBase.d.ts

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps, Size } from '../../../types';
+/**
+ * Props for the AvatarBase component
+ * @extends ComponentPropsWithoutRef<"span">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type AvatarBaseProps = ComponentPropsWithoutRef<"span"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * Full name
+     * @accessibility This is used for alt text and Screenreader
+     */
+    name: string;
+    /**
+     * Custom color of the AvatarBase
+     */
+    color?: string;
+    /**
+     * Image source to be used for AvatarBase
+     */
+    image?: string;
+    /**
+     * Initials to display if no image is provided
+     */
+    initials?: string;
+    /**
+     * @default medium
+     */
+    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
+    /**
+     * Online status of the AvatarBase
+     */
+    status?: "online" | "offline";
+};
+/**
+ * Base Avatar component that handles the core avatar functionality.
+ *
+ * Features:
+ * - Renders user avatars with images or initials
+ * - Supports custom colors with accessible contrast
+ * - Shows online/offline status indicator
+ * - Handles image loading errors gracefully
+ * - Supports light and dark themes
+ * - Fully accessible with screen reader support
+ *
+ * @example
+ * <AvatarBase name="John Doe" size="medium" status="online" />
+ */
+export declare const AvatarBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * Full name
+     * @accessibility This is used for alt text and Screenreader
+     */
+    name: string;
+    /**
+     * Custom color of the AvatarBase
+     */
+    color?: string;
+    /**
+     * Image source to be used for AvatarBase
+     */
+    image?: string;
+    /**
+     * Initials to display if no image is provided
+     */
+    initials?: string;
+    /**
+     * @default medium
+     */
+    size?: Extract<Size, "xsmall" | "small" | "medium" | "large">;
+    /**
+     * Online status of the AvatarBase
+     */
+    status?: "online" | "offline";
+} & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.d.ts

@@ -1,14 +1,27 @@
-import { BadgeProps as CoreBadgeProps } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
 /**
  * Props for the Badge component
- * @property {Object} [offset] - Optional offset configuration for badge positioning
- * @property {string} [offset.x] - Horizontal offset from the default position
- * @property {string} [offset.y] - Vertical offset from the default position
  * @extends ComponentPropsWithoutRef<"sup">
  * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
- * @extends DataTrackingId
  */
-export type BadgeProps = CoreBadgeProps;
+export type BadgeProps = ComponentPropsWithoutRef<"sup"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * Optional offset configuration for badge positioning
+     */
+    offset?: {
+        /**
+         * Horizontal offset from the default position
+         * @default "0px"
+         */
+        x?: string;
+        /**
+         * Vertical offset from the default position
+         * @default "0px"
+         */
+        y?: string;
+    };
+};
 /**
  * Badge component for displaying small status indicators or counts.
  *
@@ -19,7 +32,6 @@ export type BadgeProps = CoreBadgeProps;
  * - Empty state styling when no content
  * - Supports layout utilities for positioning
  * - Accessible with proper ARIA roles
- * - Automatic tracking ID generation for analytics
  *
  * @example
  * <Button>
@@ -27,9 +39,20 @@ export type BadgeProps = CoreBadgeProps;
  *   <Badge aria-label="3 new messages">3</Badge>
  * </Button>
  */
-export declare const Badge: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+export declare const Badge: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * Optional offset configuration for badge positioning
+     */
     offset?: {
+        /**
+         * Horizontal offset from the default position
+         * @default "0px"
+         */
         x?: string;
+        /**
+         * Vertical offset from the default position
+         * @default "0px"
+         */
         y?: string;
     };
 } & import('react').RefAttributes<HTMLScriptElement>>;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,16 +1,23 @@
-import { BreadcrumbsLinkProps as CoreBreadcrumbsLinkProps, BreadcrumbsProps as CoreBreadcrumbsProps } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { LayoutUtilProps } from '../../types';
+import { BreadcrumbsLinkProps } from './BreadcrumbsLink';
 /**
  * Props for the Breadcrumbs component
- * @property {ReactElement<BreadcrumbsLinkProps> | ReactElement<BreadcrumbsLinkProps>[]} children - Breadcrumb links to display. The last child will be rendered as non-clickable text.
  * @extends ComponentPropsWithoutRef<"nav">
  * @extends LayoutUtilProps
  */
-export type BreadcrumbsProps = CoreBreadcrumbsProps;
-export type BreadcrumbsLinkProps = CoreBreadcrumbsLinkProps;
-export declare const BreadcrumbsElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
-    children: import('react').ReactElement<CoreBreadcrumbsLinkProps> | import('react').ReactElement<CoreBreadcrumbsLinkProps>[];
-} & import('react').RefAttributes<HTMLScriptElement>>;
-export declare const BreadcrumbsLink: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export type BreadcrumbsProps = ComponentPropsWithoutRef<"nav"> & LayoutUtilProps & {
+    /**
+     * Breadcrumb links to display. The last child will be rendered as non-clickable text.
+     */
+    children: ReactElement<BreadcrumbsLinkProps> | ReactElement<BreadcrumbsLinkProps>[];
+};
+export declare const BreadcrumbsElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * Breadcrumb links to display. The last child will be rendered as non-clickable text.
+     */
+    children: ReactElement<BreadcrumbsLinkProps> | ReactElement<BreadcrumbsLinkProps>[];
+} & import('react').RefAttributes<HTMLElement>>;
 /**
  * Breadcrumbs component for displaying navigation hierarchy.
  *
@@ -21,7 +28,6 @@ export declare const BreadcrumbsLink: import('react').ForwardRefExoticComponent<
  * - Supports layout utilities for positioning and spacing
  * - Uses chevron icons as visual separators between links
  * - Responsive design with flexbox layout
- * - Automatic tracking ID generation for analytics
  *
  * @example
  * <Breadcrumbs>
@@ -30,9 +36,12 @@ export declare const BreadcrumbsLink: import('react').ForwardRefExoticComponent<
  *   <Breadcrumbs.Link href="/electronics">Electronics</Breadcrumbs.Link>
  * </Breadcrumbs>
  */
-export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
-    children: import('react').ReactElement<CoreBreadcrumbsLinkProps> | import('react').ReactElement<CoreBreadcrumbsLinkProps>[];
-} & import('react').RefAttributes<HTMLScriptElement>> & {
+export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * Breadcrumb links to display. The last child will be rendered as non-clickable text.
+     */
+    children: ReactElement<BreadcrumbsLinkProps> | ReactElement<BreadcrumbsLinkProps>[];
+} & import('react').RefAttributes<HTMLElement>> & {
     /**
      * BreadcrumbsLink component for individual breadcrumb navigation items.
      *
@@ -42,10 +51,10 @@ export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<Omit
      * - Includes layout utilities for positioning and spacing
      * - Uses small text size for consistent styling
      * - Fully accessible with proper focus management
-     * - Automatic tracking ID generation for analytics
+     * - Automatically applies secondary link styling
      *
      * @example
      * <Breadcrumbs.Link href="/dashboard">Dashboard</Breadcrumbs.Link>
      */
-    Link: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    Link: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & LayoutUtilProps & import('react').RefAttributes<HTMLAnchorElement>>;
 };

package/dist/components/Breadcrumbs/BreadcrumbsLink.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the BreadcrumbsLink component
+ * @extends ComponentPropsWithoutRef<"a">
+ * @extends LayoutUtilProps
+ */
+export type BreadcrumbsLinkProps = ComponentPropsWithoutRef<"a"> & LayoutUtilProps;
+/**
+ * BreadcrumbsLink component for individual breadcrumb navigation items.
+ *
+ * Features:
+ * - Renders as a clickable link with secondary appearance
+ * - Supports all standard anchor element props
+ * - Includes layout utilities for positioning and spacing
+ * - Uses small text size for consistent styling
+ * - Fully accessible with proper focus management
+ * - Automatically applies secondary link styling
+ *
+ * @example
+ * <BreadcrumbsLink href="/dashboard">Dashboard</BreadcrumbsLink>
+ */
+export declare const BreadcrumbsLink: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & LayoutUtilProps & import('react').RefAttributes<HTMLAnchorElement>>;

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

@@ -1,2 +1,3 @@
 export * from './Breadcrumbs';
+export * from './BreadcrumbsLink';
 export { Breadcrumbs as default } from './Breadcrumbs';

package/dist/components/Button/Button.d.ts

@@ -1,15 +1,49 @@
-import { ButtonProps as CoreButtonProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ButtonAppearance, Size, DataTrackingId, LayoutUtilProps } from '../../types';
+import { ComponentPropsWithoutRef } from 'react';
+import { IconProps } from '../Icon';
 /**
  * Props for the Button component
- * @property {ButtonAppearance} [appearance] - The visual variant of the button
- * @property {"small" | "medium" | "large"} [size] - The size of the button
- * @property {boolean} [loading] - The loading state of the button
- * @property {IconProps["svg"] | { after: IconProps["svg"] } | { before: IconProps["svg"] }} [icon] - The icons of the button
- * @extends CoreButtonProps
- * @extends DataTrackingId
+ * @extends Omit<ComponentPropsWithoutRef<"button">, "children">
+ * @extends LayoutUtilProps
  */
-export type ButtonProps = CoreButtonProps & DataTrackingId;
+export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & LayoutUtilProps & {
+    /**
+     * The visual variant of the button.
+     * @default secondary
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * The size of the button.
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * The loading state of the button.
+     * If true, it will show infinite state of the loading.
+     * @default false
+     */
+    loading?: boolean;
+} & ({
+    children?: ComponentPropsWithoutRef<"button">["children"];
+    /**
+     * The icons of the button.
+     */
+    icon?: IconProps["svg"] | {
+        after: IconProps["svg"];
+    } | {
+        before: IconProps["svg"];
+    };
+} | {
+    children?: never;
+    /**
+     * The icon of the icon only button.
+     */
+    icon?: IconProps["svg"];
+}) & 
+/**
+ * Data tracking id
+ */
+DataTrackingId;
 /**
  * Button component for triggering actions and user interactions.
  *

package/dist/components/ButtonCompound/ButtonCompound.d.ts

@@ -1,12 +1,21 @@
-import { ButtonCompoundProps as CoreButtonCompoundProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ComponentPropsWithoutRef } from 'react';
+import { DataTrackingId, LayoutUtilProps } from '../../types';
 /**
  * Props for the ButtonCompound component
- * @property {"pill" | "circular" | "rounded"} [shape] - The shape of the compound button
- * @extends CoreButtonCompoundProps
- * @extends DataTrackingId
+ * @extends LayoutUtilProps
+ * @extends ComponentPropsWithoutRef<"button">
  */
-export type ButtonCompoundProps = CoreButtonCompoundProps & DataTrackingId;
+export type ButtonCompoundProps = LayoutUtilProps & ComponentPropsWithoutRef<"button"> & {
+    /**
+     * The shape of the compound button.
+     * @default rounded
+     */
+    shape?: "pill" | "circular" | "rounded";
+} & 
+/**
+ * Data tracking id
+ */
+DataTrackingId;
 /**
  * ButtonCompound component for creating compound button layouts.
  *
@@ -25,6 +34,10 @@ export type ButtonCompoundProps = CoreButtonCompoundProps & DataTrackingId;
  *   <Avatar name="John Doe" />
  * </ButtonCompound>
  */
-export declare const ButtonCompound: import('react').ForwardRefExoticComponent<import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+export declare const ButtonCompound: import('react').ForwardRefExoticComponent<LayoutUtilProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /**
+     * The shape of the compound button.
+     * @default rounded
+     */
     shape?: "pill" | "circular" | "rounded";
 } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonLink/ButtonLink.d.ts

@@ -1,15 +1,46 @@
-import { ButtonLinkProps as CoreButtonLinkProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ComponentPropsWithoutRef } from 'react';
+import { DataTrackingId, ButtonAppearance, LayoutUtilProps, Size } from '../../types';
+import { IconProps } from '../Icon';
 /**
  * Props for the ButtonLink component
- * @property {ButtonAppearance} [appearance] - The visual variant of the button link
- * @property {"small" | "medium" | "large"} [size] - The size of the button link
- * @property {IconProps["svg"] | { after: IconProps["svg"] } | { before: IconProps["svg"] }} [icon] - The icons of the button link
- * @property {boolean} [loading] - The loading state of the button link
- * @extends CoreButtonLinkProps
- * @extends DataTrackingId
+ * @extends LayoutUtilProps
+ * @extends ComponentPropsWithoutRef<"a">
  */
-export type ButtonLinkProps = CoreButtonLinkProps & DataTrackingId;
+export type ButtonLinkProps = LayoutUtilProps & ComponentPropsWithoutRef<"a"> & {
+    /**
+     * The disabled state of the button link.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The visual variant of the button link.
+     * @default secondary
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * The size of the button link.
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * The icons of the button link.
+     */
+    icon?: IconProps["svg"] | {
+        after: IconProps["svg"];
+    } | {
+        before: IconProps["svg"];
+    };
+    /**
+     * The loading state of the button link.
+     * If true, it will show infinite state of the loading.
+     * @default false
+     */
+    loading?: boolean;
+} & 
+/**
+ * Data tracking id
+ */
+DataTrackingId;
 /**
  * ButtonLink component for creating clickable links that look like buttons.
  *
@@ -31,14 +62,34 @@ export type ButtonLinkProps = CoreButtonLinkProps & DataTrackingId;
  *   Go to Dashboard
  * </ButtonLink>
  */
-export declare const ButtonLink: import('react').ForwardRefExoticComponent<import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+export declare const ButtonLink: import('react').ForwardRefExoticComponent<LayoutUtilProps & Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    /**
+     * The disabled state of the button link.
+     * @default false
+     */
     disabled?: boolean;
-    appearance?: import('@servicetitan/hammer-react').ButtonAppearance;
-    size?: Extract<import('@servicetitan/hammer-react').Size, "small" | "medium" | "large">;
-    icon?: import('@servicetitan/hammer-react').IconProps["svg"] | {
-        after: import('@servicetitan/hammer-react').IconProps["svg"];
+    /**
+     * The visual variant of the button link.
+     * @default secondary
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * The size of the button link.
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * The icons of the button link.
+     */
+    icon?: IconProps["svg"] | {
+        after: IconProps["svg"];
     } | {
-        before: import('@servicetitan/hammer-react').IconProps["svg"];
+        before: IconProps["svg"];
     };
+    /**
+     * The loading state of the button link.
+     * If true, it will show infinite state of the loading.
+     * @default false
+     */
     loading?: boolean;
 } & DataTrackingId & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/ButtonToggle/ButtonToggle.d.ts

@@ -1,15 +1,37 @@
-import { ButtonToggleProps as CoreButtonToggleProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { KeyboardEvent, MouseEvent } from 'react';
+import { DataTrackingId } from '../../types';
+import { ButtonProps } from '../Button/Button';
+export type ButtonToggleState = {
+    pressed: boolean;
+    value?: string;
+};
 /**
  * Props for the ButtonToggle component
- * @property {boolean} [defaultChecked] - The default pressed(selected) state of the toggle button
- * @property {boolean} [checked] - The controlled pressed(selected) state of the toggle button
- * @property {string} [value] - The value of the toggle button
- * @property {(e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, state: ButtonToggleState) => void} [onChange] - Callback for when pressed(selected) changes
- * @extends CoreButtonToggleProps
- * @extends DataTrackingId
+ * @extends Omit<ButtonProps, "appearance" | "loading">
+ */
+export type ButtonToggleProps = Omit<ButtonProps, "appearance" | "loading"> & {
+    /**
+     * The default pressed(selected) state of the toggle button.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled pressed(selected) state of the toggle button.
+     */
+    checked?: boolean;
+    /**
+     * The value of the toggle button.
+     */
+    value?: string;
+    /**
+     * Callback for when pressed(selected) changes.
+     */
+    onChange?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, state: ButtonToggleState) => void;
+} & 
+/**
+ * Data tracking id
  */
-export type ButtonToggleProps = CoreButtonToggleProps & DataTrackingId;
+DataTrackingId;
 /**
  * ButtonToggle component for creating toggleable button states.
  *
@@ -33,9 +55,22 @@ export type ButtonToggleProps = CoreButtonToggleProps & DataTrackingId;
  *   Toggle Me
  * </ButtonToggle>
  */
-export declare const ButtonToggle: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "appearance" | "loading"> & {
+export declare const ButtonToggle: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "appearance" | "loading"> & {
+    /**
+     * The default pressed(selected) state of the toggle button.
+     * @default false
+     */
     defaultChecked?: boolean;
+    /**
+     * The controlled pressed(selected) state of the toggle button.
+     */
     checked?: boolean;
+    /**
+     * The value of the toggle button.
+     */
     value?: string;
-    onChange?: (e: import('react').MouseEvent<HTMLButtonElement> | import('react').KeyboardEvent<HTMLButtonElement>, state: import('@servicetitan/hammer-react/dist/components/Button/ButtonToggle').ButtonToggleState) => void;
+    /**
+     * Callback for when pressed(selected) changes.
+     */
+    onChange?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, state: ButtonToggleState) => void;
 } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;