@servicetitan/anvil2 1.44.2 → 1.45.1

package/dist/components/Card/Card.d.ts

@@ -1,30 +1,40 @@
-import { CardProps as CoreCardProps } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps, Size } from '../../types';
 /**
  * Props for the Card component
- * @property {"strong" | "stronger"} [background] - The background variant of the card
- * @property {"0" | "xsmall" | "small" | "medium" | "large"} [padding] - The padding size of the card
- * @extends CoreCardProps
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
  */
-export type CardProps = CoreCardProps;
+export type CardProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /**
+     * The background variant of the card.
+     * @default undefined
+     */
+    background?: "strong" | "stronger";
+    /**
+     * The padding size of the card.
+     * @default "medium"
+     */
+    padding?: Extract<Size, "0" | "xsmall" | "small" | "medium" | "large">;
+};
 /**
  * Card component for displaying content in a contained, elevated container.
  *
- * Features:
- * - Configurable padding sizes (0, xsmall, small, medium, large)
- * - Background variants (strong, stronger) for visual emphasis
- * - Responsive design with automatic layout utilities
- * - Consistent border radius and styling
- * - Support for all standard div props
- * - Layout utility props for positioning and spacing
- * - Data tracking integration for analytics
- *
  * @example
  * <Card padding="large" background="strong">
  *   <h2>Card Title</h2>
  *   <p>Card content goes here</p>
  * </Card>
  */
-export declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
+export declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * The background variant of the card.
+     * @default undefined
+     */
     background?: "strong" | "stronger";
-    padding?: Extract<import('@servicetitan/hammer-react').Size, "0" | "xsmall" | "small" | "medium" | "large">;
+    /**
+     * The padding size of the card.
+     * @default "medium"
+     */
+    padding?: Extract<Size, "0" | "xsmall" | "small" | "medium" | "large">;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
-import { CheckboxProps as CoreCheckboxProps, CheckboxGroupProps as CoreCheckboxGroupProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { CheckboxProps as CoreCheckboxProps } from './internal/Checkbox';
+import { DataTrackingId } from '../../types';
 /**
  * Props for the Checkbox component
  * @property {boolean} [checked] - Controlled state
@@ -15,32 +15,6 @@ import { DataTrackingId } from '../../types/DataTrackingId';
  * @extends DataTrackingId
  */
 export type CheckboxProps = Omit<CoreCheckboxProps, "hideCheckbox"> & DataTrackingId;
-export type CheckboxGroupProps = CoreCheckboxGroupProps;
-/**
- * CheckboxGroup component for grouping related checkboxes together.
- *
- * Features:
- * - Groups multiple checkboxes with a common legend
- * - Supports required field indication
- * - Optional helper text and descriptions
- * - Full accessibility support with fieldset/legend
- * - Focus management for keyboard navigation
- * - Layout utility props for positioning and spacing
- * - Flexible layout direction (row/column)
- * - Screen reader support with hidden labels
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <CheckboxGroup legend="Select your interests" required>
- *   <Checkbox label="Technology" />
- *   <Checkbox label="Sports" />
- *   <Checkbox label="Music" />
- * </CheckboxGroup>
- */
-export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
-    required?: boolean;
-    legend: string | import('react').ReactElement;
-} & import('react').RefAttributes<HTMLFieldSetElement>>;
 /**
  * Checkbox component for selecting one or more options from a list.
  *
@@ -84,7 +58,7 @@ export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<Co
      *   <Checkbox label="Music" />
      * </CheckboxGroup>
      */
-    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
+    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('..').LayoutUtilProps & Omit<import('../../internal/types').FieldLabelProps, "labelProps"> & {
         required?: boolean;
         legend: string | import('react').ReactElement;
     } & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { LayoutUtilProps } from '../../types';
+import { FieldLabelProps } from '../../internal/types';
+/**
+ * Props for the CheckboxGroup component
+ * @extends ComponentPropsWithoutRef<"fieldset">
+ * @extends LayoutUtilProps
+ * @extends Omit<FieldLabelProps, "labelProps">
+ */
+export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+    /**
+     * required flag for label
+     * @accessibility This does not enforce error when nothing is selected.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * legend for the fieldset
+     */
+    legend: string | ReactElement;
+};
+/**
+ * CheckboxGroup component for grouping related checkboxes together.
+ *
+ * Features:
+ * - Groups multiple checkboxes with a common legend
+ * - Supports required field indication
+ * - Optional helper text and descriptions
+ * - Full accessibility support with fieldset/legend
+ * - Focus management for keyboard navigation
+ * - Layout utility props for positioning and spacing
+ * - Flexible layout direction (row/column)
+ * - Screen reader support with hidden labels
+ *
+ * @example
+ * <CheckboxGroup legend="Select your interests" required>
+ *   <Checkbox label="Technology" />
+ *   <Checkbox label="Sports" />
+ *   <Checkbox label="Music" />
+ * </CheckboxGroup>
+ */
+export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+    /**
+     * required flag for label
+     * @accessibility This does not enforce error when nothing is selected.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * legend for the fieldset
+     */
+    legend: string | ReactElement;
+} & import('react').RefAttributes<HTMLFieldSetElement>>;

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

@@ -1,2 +1,4 @@
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export { Checkbox as default } from './Checkbox';
+export { type CheckboxState } from './types';

package/dist/components/Checkbox/internal/Checkbox.d.ts

@@ -0,0 +1,133 @@
+import { ChangeEvent, ComponentPropsWithoutRef, ReactElement, MouseEvent } from 'react';
+import { Svg, LayoutUtilProps } from '../../../types';
+import { HelperProps } from '../../../internal/components';
+import { CheckboxState } from '../types';
+export type { CheckboxState };
+/**
+ * Props for the Checkbox component
+ * @extends LayoutUtilProps
+ * @extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "onClick" | "indeterminate">
+ */
+export type CheckboxProps = LayoutUtilProps & Omit<ComponentPropsWithoutRef<"input">, "onChange" | "onClick" | "indeterminate"> & {
+    /**
+     * Controlled state
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Uncontrolled state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indeterminate state of the checkbox
+     * @accessibility Applies aria-checked="mixed"
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checkbox is changed
+     */
+    onChange?: (e?: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void;
+    /**
+     * Callback when checkbox is clicked
+     */
+    onClick?: (e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void;
+    /**
+     * label for checkbox
+     * @accessibility This should either be a string or have text content inside for accessibility
+     */
+    label?: string | ReactElement;
+    /**
+     * Error state for the checkbox
+     * @accessibility Applies aria-invalid="true"
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Icon overrides
+     */
+    icons?: {
+        checked?: Svg;
+        indeterminate?: Svg;
+        unchecked?: Svg;
+    };
+    description?: HelperProps["description"];
+    /**
+     * When `true`, hides the checkbox for visual users.
+     * @default false
+     */
+    hideCheckbox?: boolean;
+};
+/**
+ * Checkbox component for selecting one or more options from a list.
+ *
+ * Features:
+ * - Controlled and uncontrolled state management
+ * - Indeterminate state for partial selections
+ * - Customizable icons for different states
+ * - Error state with accessibility support
+ * - Optional helper text and descriptions
+ * - Hide checkbox option for visual-only interactions
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation support
+ * - Layout utility props for positioning and spacing
+ *
+ * @example
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   onChange={(e, state) => console.log('Checked:', state.checked)}
+ *   required
+ * />
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<LayoutUtilProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "onClick" | "indeterminate"> & {
+    /**
+     * Controlled state
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Uncontrolled state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indeterminate state of the checkbox
+     * @accessibility Applies aria-checked="mixed"
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checkbox is changed
+     */
+    onChange?: (e?: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void;
+    /**
+     * Callback when checkbox is clicked
+     */
+    onClick?: (e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void;
+    /**
+     * label for checkbox
+     * @accessibility This should either be a string or have text content inside for accessibility
+     */
+    label?: string | ReactElement;
+    /**
+     * Error state for the checkbox
+     * @accessibility Applies aria-invalid="true"
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Icon overrides
+     */
+    icons?: {
+        checked?: Svg;
+        indeterminate?: Svg;
+        unchecked?: Svg;
+    };
+    description?: HelperProps["description"];
+    /**
+     * When `true`, hides the checkbox for visual users.
+     * @default false
+     */
+    hideCheckbox?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,4 @@
+export type CheckboxState = {
+    checked: boolean;
+    value?: string | number | readonly string[];
+};

package/dist/components/Chip/Chip.d.ts

@@ -1,6 +1,7 @@
-import { ChipProps as CoreChipProps, IconProps as CoreIconProps, AvatarProps as CoreAvatarProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
-import { DistributiveOmit } from '../../types';
+import { ChipProps as CoreChipProps } from './internal/Chip';
+import { IconProps as CoreIconProps } from '../Icon';
+import { AvatarProps as CoreAvatarProps } from '../Avatar/internal/Avatar';
+import { DataTrackingId, DistributiveOmit } from '../../types';
 /**
  * Props for the Chip component
  * @property {string} label - The text that displays in the chip

package/dist/components/Chip/internal/Chip.d.ts

@@ -0,0 +1,108 @@
+import { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { AvatarProps } from '../../Avatar/internal/Avatar';
+import { LayoutUtilProps, Size } from '../../../types';
+/**
+ * Props for the Chip component
+ * @extends ComponentPropsWithoutRef<"span">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type ChipProps = Omit<ComponentPropsWithoutRef<"span">, "prefix"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * The text that displays in the chip.
+     */
+    label: string;
+    /**
+     * The size of the chip
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium">;
+    /**
+     * Color of the Chip
+     */
+    color?: string;
+    /**
+     * Callback for when the Chip is clicked
+     *
+     * @remarks
+     * Adding this will make Chip focusable
+     */
+    onClick?: (e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    /**
+     * Called when the component is closed. If supplied, a close button will be rendered.
+     * @returns void
+     */
+    onClose?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    /**
+     * Wraps text when it overflows
+     */
+    textWrap?: boolean;
+    /**
+     * Content displayed in the chip, before the text.
+     */
+    prefix?: ReactNode;
+    /**
+     * Image URL to display in an avatar before the chip text.
+     */
+    avatar?: AvatarProps["image"];
+};
+/**
+ * Chip component for displaying compact information or tags.
+ *
+ * Features:
+ * - Configurable sizes (small, medium)
+ * - Custom color support with automatic contrast calculation
+ * - Optional click handler for interactive chips
+ * - Optional close button for removable chips
+ * - Text wrapping support for long labels
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation (Enter to click, Delete/Backspace to close)
+ * - Theme-aware color adaptation
+ * - Layout utility props for positioning and spacing
+ *
+ * @example
+ * <Chip
+ *   label="JavaScript"
+ *   color="#f7df1e"
+ *   onClose={(e) => console.log('Chip removed')}
+ *   onClick={(e) => console.log('Chip clicked')}
+ * />
+ */
+export declare const Chip: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "prefix"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * The text that displays in the chip.
+     */
+    label: string;
+    /**
+     * The size of the chip
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium">;
+    /**
+     * Color of the Chip
+     */
+    color?: string;
+    /**
+     * Callback for when the Chip is clicked
+     *
+     * @remarks
+     * Adding this will make Chip focusable
+     */
+    onClick?: (e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    /**
+     * Called when the component is closed. If supplied, a close button will be rendered.
+     * @returns void
+     */
+    onClose?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    /**
+     * Wraps text when it overflows
+     */
+    textWrap?: boolean;
+    /**
+     * Content displayed in the chip, before the text.
+     */
+    prefix?: ReactNode;
+    /**
+     * Image URL to display in an avatar before the chip text.
+     */
+    avatar?: AvatarProps["image"];
+} & import('react').RefAttributes<HTMLSpanElement>>;