@indico-data/design-system 3.0.10 → 3.2.0

package/.storybook/main.ts

@@ -34,5 +34,8 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 export default config;

package/lib/components/badge/types.d.ts

@@ -1,7 +1,11 @@
 export type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface BadgeProps {
+    /** Additional classes for the badge component */
     className?: string;
+    /** The content of the badge (superseded by the string prop) */
     children?: React.ReactNode;
+    /** The string to display in the badge. (supersedes children prop) */
     string?: string;
+    /** The size of the badge */
     size?: BadgeSizes;
 }

package/lib/components/button/types.d.ts

@@ -3,20 +3,70 @@ export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destruct
 export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 export interface ButtonProps {
+    /**
+     * The class name to apply to the button
+     */
     className?: string;
+    /**
+     * The aria-label to apply to the button
+     */
     ariaLabel: string;
+    /**
+     * The children to apply to the button
+     */
     children?: React.ReactNode | React.ReactNode[];
+    /**
+     * The function to call when the mouse enters the button
+     */
     onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The function to call when the mouse exits the button
+     */
     onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    isLoading?: boolean;
+    /**
+     * The function to call when the button is clicked
+     */
     onClick?: (...args: any[]) => void;
+    /**
+     * The function to call when the button is pressed
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Determines the visual style and emphasis level of the button
+     */
     variant?: ButtonVariants;
+    /**
+     * Disables the button and shows a load spinner on the left hand side of the button children by default.
+     * If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
+     * If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.
+     */
+    isLoading?: boolean;
+    /**
+     * Makes the button round, pill-shaped when true
+     */
     isPill?: boolean;
+    /**
+     * The icon to display on the left hand side of the button
+     */
     iconLeft?: IconName;
+    /**
+     * The icon to display on the right hand side of the button
+     */
     iconRight?: IconName;
+    /**
+     * Controls the button's padding and text size
+     */
     size?: ButtonSizes;
+    /**
+     * The type of the button
+     */
     type?: ButtonTypes;
+    /**
+     * URL destination for the button when it needs to function as a link
+     */
     href?: string;
+    /**
+     * Disables the button
+     */
     isDisabled?: boolean;
 }

package/lib/components/card/Card.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 type Props = {
+    /** Additional classes for the card component */
     className?: string;
+    /** The content of the card */
     children: React.ReactNode;
+    /** The title of the card */
     title?: string;
+    /** The subtitle of the card */
     subtitle?: string;
+    /** Adds a box shadow to the card */
     hasBoxShadow?: boolean;
 };
 export declare const Card: React.FC<Props>;

package/lib/components/floatUI/types.d.ts

@@ -1,14 +1,21 @@
 import { ReactElement } from 'react';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export type FloatUIProps = {
+    /** An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI. */
     children: [ReactElement, ReactElement];
+    /** Sets the aria-label attribute for the FloatUI. */
     ariaLabel: string;
+    /** Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options). */
     floatingOptions?: UseFloatingOptions;
+    /** Controls the visibility of the FloatUI (for controlled mode). */
     isOpen?: boolean;
     className?: string;
+    /** Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body) */
     isPortal?: boolean;
+    /** Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into. */
     portalOptions?: {
         rootId?: string;
     };
+    /** Function to toggle the visibility of the FloatUI (for controlled mode). */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/lib/components/forms/checkbox/Checkbox.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
 export interface CheckboxProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this checkbox belongs to. */
     id: string;
+    /** The label for the checkbox field */
     label: string;
+    /** The name for the checkbox field */
     name: string;
+    /** This holds the value that will be emitted when the checkbox is selected */
     value?: string;
+    /** Toggles the checked state of the checkbox field when true */
     isChecked?: boolean | undefined;
+    /** onChange event handler */
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Toggles the disabled state of the checkbox field */
     isDisabled?: boolean;
     defaultChecked?: boolean;
     className?: string;

package/lib/components/forms/date/datePicker/types.d.ts

@@ -1,16 +1,23 @@
 import { CustomComponents, DateRange, DayEventHandler, Formatters, Matcher, Mode, MonthChangeEventHandler, OnSelectHandler } from 'react-day-picker';
 export interface DatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The selected day(s). */
     selected?: Date | DateRange | undefined;
+    /** Event handler when a day is selected. */
     onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+    /** Allows you to select a single day, a range of days, or multiple days. */
     mode?: Mode;
+    /** Accepts a CSS class name */
     className?: string;
+    /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    /** Whether to show the time picker. */
     hasTimePicker?: boolean;
+    /** The time value to display in the date picker. */
     timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
@@ -21,8 +28,11 @@ export interface DatePickerProps {
     firstWeekContainsDate?: 1 | 4;
     today?: Date;
     isRequired?: any;
+    /** The minimum date that can be selected. */
     min?: number;
+    /** The maximum date that can be selected. */
     max?: number;
+    /** Callback when the time changes. */
     onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;

package/lib/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts

@@ -3,24 +3,40 @@ import { IconName, IconSizes } from '../../../icons/types';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 interface Props {
+    /** Allows you to select a single day, a range of days, or multiple days. */
     mode?: Mode;
+    /** A label for assistive technologies. */
     ariaLabel: string;
+    /** Disable dates before this date. */
     disableBeforeDate?: Date;
+    /** Disable dates after this date. */
     disableAfterDate?: Date;
+    /** Disable the date picker. */
     isDisabled?: boolean;
+    /** The id of the input field. */
     id: string;
+    /** The label for the input field. */
     label?: string;
+    /** Event handler when a day is selected. */
     onSelect?: (selected: Date | DateRange | undefined) => void;
     selected?: Date | DateRange | undefined;
+    /** The icon to use as a trigger. */
     triggerIcon: IconName;
+    /** The size of the trigger icon. */
     triggerIconSize: IconSizes;
+    /** Whether the date picker is open. */
     isOpen?: boolean;
+    /** Clear the selected date(s) when the date picker closes. */
     clearOnClose?: boolean;
+    /** Accepts a CSS class name */
     className?: string;
     initialMonth?: Date;
     'data-testid'?: string;
+    /** The portal options for the date picker. Follows floating-ui options. */
     portalOptions?: PortalOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
+    /** The floating options for the date picker. Follows floating-ui options. */
     floatingOptions?: UseFloatingOptions;
 }
 export declare const IconTriggerDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts

@@ -2,10 +2,12 @@ import type { IconName } from '../../../icons/types';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDatePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
     isDisabled?: boolean;
+    /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
     label?: string;
@@ -14,18 +16,24 @@ export interface SingleInputDatePickerProps {
     selected?: Date;
     isOpen?: boolean;
     clearOnClose?: boolean;
+    /** Accepts a CSS class name */
     className?: string;
     inputIconName?: IconName;
     isClearable?: boolean;
     inputPlaceholder?: string;
     errorMessage?: string | undefined;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
     'data-testid'?: string;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** Whether the date picker is read only. */
     isReadOnly?: boolean;
+    /** The tab index of the input field. */
     tabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 export declare function SingleInputDatePicker(props: SingleInputDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts

@@ -3,6 +3,7 @@ import { DateRange } from 'react-day-picker';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 interface InputDateRangePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -13,6 +14,7 @@ interface InputDateRangePickerProps {
     month?: Date;
     selected?: DateRange | undefined;
     isOpen?: boolean;
+    /** Whether the date picker is open. */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     className?: string;
     inputIconName?: IconName;
@@ -20,19 +22,26 @@ interface InputDateRangePickerProps {
     toErrorMessage?: string | undefined;
     fromErrorMessage?: string | undefined;
     'data-testid'?: string;
+    /** The gutter width for the date picker. */
     gutterWidth?: number;
     fromLabel?: string;
     toLabel?: string;
     closeOnSelect?: boolean;
     clearOnClose?: boolean;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** Whether the from input is read only. */
     isFromReadOnly?: boolean;
+    /** Whether the to input is read only. */
     isToReadOnly?: boolean;
     toTabIndex?: number;
+    /** The tab index of the from input field. */
     fromTabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 export declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts

@@ -2,6 +2,7 @@ import type { IconName } from '../../../icons/types';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDateTimePickerProps {
+    /** A label for assistive technologies. */
     ariaLabel: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -20,16 +21,24 @@ export interface SingleInputDateTimePickerProps {
     inputPlaceholder?: string;
     errorMessage?: string | undefined;
     'data-testid'?: string;
+    /** Whether the label is hidden. */
     hasHiddenLabel?: boolean;
+    /** The time value to display. */
     timeValue?: string;
+    /** Callback function that is called when the time is changed. */
     onTimeChange?: (time: string) => void;
+    /** Whether the date picker is read only. */
     isReadOnly?: boolean;
+    /** The ref of the input field. */
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The ref of the time picker input field. */
     timePickerRef?: React.LegacyRef<HTMLInputElement>;
     dateTabIndex?: number;
+    /** The tab index of the time input field. */
     timeTabIndex?: number;
     portalOptions?: PortalOptions;
     floatingOptions?: UseFloatingOptions;
+    /** Whether the date picker is a portal. */
     isPortal?: boolean;
 }
 export declare function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/numberInput/NumberInput.d.ts

@@ -2,9 +2,13 @@ import React from 'react';
 import { LabelProps } from '../subcomponents/Label';
 import { BaseInputProps } from '../input/Input';
 export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+    /** The value for the input field */
     value?: number | '';
+    /** The minimum value for the input field */
     min?: number;
+    /** The maximum value for the input field */
     max?: number;
+    /** The step value for the input field */
     step?: number;
 }
 declare const LabeledNumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;

package/lib/components/forms/passwordInput/PasswordInput.d.ts

@@ -10,6 +10,7 @@ export interface PasswordInputProps extends LabelProps {
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
+    /** Toggles the visibility of the password */
     hasShowPassword?: boolean;
     defaultValue?: string;
 }

package/lib/components/forms/radio/Radio.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 export interface RadioProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this radio belongs to. */
     id: string;
+    /** The label for the Radio field */
     label: string;
+    /** The name for the Radio field */
     name: string;
+    /** This holds the value that will be emitted when the radio is selected */
     value?: string;
+    /** onChange event handler */
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Toggles the disabled state of the Radio field */
     isDisabled?: boolean;
     defaultChecked?: boolean;
 }

package/lib/components/forms/select/Select.d.ts

@@ -2,10 +2,20 @@ import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import { SelectOption } from './types';
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
+    /** Options for the select component */
     options: OptionType[];
+    /** The label for the select component */
     label?: string;
+    /** The name of the select component */
     name?: string;
+    /** Toggles the visibility of the label */
     hasHiddenLabel?: boolean;
+    /** Additional CSS class for the select component */
+    className?: string;
+    /** The prefix to use for the CSS class names. Changing this will result in losing all default styles */
+    classNamePrefix?: string;
+    /** Event handler for when the selected value changes */
+    onChange?: (newValue: any, actionMeta: any) => void;
 }
 declare const LabeledSelect: React.ForwardRefExoticComponent<SelectProps<SelectOption> & import("../subcomponents/Label").LabelProps & React.RefAttributes<any>>;
 export { LabeledSelect as Select };

package/lib/components/forms/textarea/Textarea.d.ts

@@ -9,12 +9,19 @@ export interface TextareaProps extends LabelProps {
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
+    /** The number of rows for the textarea field */
     rows?: number;
+    /** Specifies the visible width of a text area */
     cols?: number;
+    /** Sets the textarea field to readonly */
     readonly?: boolean;
+    /** Sets the wrap attribute for the textarea field */
     wrap?: 'hard' | 'soft';
+    /** Specifies which form the text area belongs to */
     form?: string;
+    /** Specifies the maximum number of characters allowed in the text area */
     maxLength?: number;
+    /** Specifies that a text area should automatically get focus when the page loads */
     autofocus?: boolean;
     defaultValue?: string;
     tabIndex?: number;

package/lib/components/forms/timePicker/TimePicker.d.ts

@@ -1,9 +1,14 @@
 interface TimePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** The time value to be displayed in the input field */
     timeValue?: string;
+    /** The label for the time picker */
     label?: string;
+    /** The name of the input field */
     name?: string;
+    /** Hides the input label in an accessible way (visually hides the label) */
     hasHiddenLabel?: boolean;
+    /** returns an object with the time and errors if they exist */
     onTimeChange?: (time: string) => void;
     className?: string;
     isReadOnly?: boolean;

package/lib/components/forms/toggle/Toggle.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
 export interface ToggleProps {
     ref?: React.LegacyRef<HTMLInputElement>;
+    /** This explains what button group this toggle belongs to. */
     id: string;
+    /** The label for the toggle field */
     label?: string;
+    /** The name for the toggle field */
     name: string;
+    /** This holds the value that will be emitted when the toggle is selected */
     value?: string;
+    /** onChange event handler */
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** This disables the toggle */
     isDisabled?: boolean;
+    /** This is the state of the toggle */
     isChecked?: boolean;
     defaultChecked?: boolean;
 }

package/lib/components/icons/types.d.ts

@@ -6,9 +6,14 @@ export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IndiconName = keyof typeof indicons;
 export type IconName = IndiconName | `fa-${FAIconName}`;
 export type IconProps = PermafrostComponent & {
+    /** The name of the icon */
     name: IconName;
+    /** Accessible label for the icon */
     ariaLabel?: string;
+    /** Size of the icon */
     size?: IconSizes;
+    /** Inline styles for the icon */
     style?: CSSProperties;
+    /** Click event handler */
     onClick?: MouseEventHandler<SVGElement>;
 };

package/lib/components/loading-indicators/BarSpinner/BarSpinner.d.ts

@@ -1,8 +1,12 @@
 export declare function BarSpinner({ width, id, height, className, ...rest }: {
     'data-testid'?: string;
+    /** The width of the bar spinner */
     width?: number;
+    /** The id of the tooltip. This needs to match the element that holds it's data attribute */
     id?: string;
+    /** The height of the bar spinner */
     height?: number;
+    /** The class name of the bar spinner */
     className?: string;
     [key: string]: any;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/components/loading-indicators/CirclePulse/CirclePulse.d.ts

@@ -1,5 +1,7 @@
 interface CirclePulseProps {
+    /** The size of the circle */
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** The class name of the circle pulse */
     className?: string;
     [key: string]: any;
 }

package/lib/components/menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type MenuProps = {
     children: React.ReactNode;
+    /** The class name to apply to the Menu component. */
     className?: string;
 };
 export declare function Menu({ children, className, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/modal/types.d.ts

@@ -1,23 +1,39 @@
 import { ButtonVariants } from '../button/types';
 import { IconName } from '../icons/types';
 export interface ModalProps {
+    /** Additional classes for the badge component */
     className?: string;
+    /** The content of the badge (superseded by the string prop) */
     children?: React.ReactNode;
+    /** Whether the modal is open */
     isOpen: boolean;
+    /** Callback function to be called when the modal is closed */
     onRequestClose?: () => void;
+    /** Additional classes for the portal element */
     portalClassName?: string;
+    /** Additional classes for the overlay element */
     overlayClassName?: string;
+    /** The element to use as the app element */
     appElement?: HTMLElement;
+    /** Whether the modal should close when the overlay is clicked */
     shouldCloseOnOverlayClick?: boolean;
+    /** Whether the modal should close when the escape key is pressed */
     shouldCloseOnEsc?: boolean;
     testId?: string;
+    /** Custom content element for the modal */
     contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+    /** Custom overlay element for the modal */
     overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+    /** The position of the modal opens on the page */
     position?: 'top' | 'center';
     parentSelector?: () => HTMLElement;
+    /** The title of the modal */
     title?: string;
+    /** The subtitle of the modal */
     subtitle?: string;
+    /** The footer of the modal. It accepts a React Component */
     footer?: React.ReactNode;
+    /** The maximum width of the modal in pixels */
     maxWidthInPixels?: number;
 }
 export interface ConfirmationModalProps extends ModalProps {
@@ -25,10 +41,16 @@ export interface ConfirmationModalProps extends ModalProps {
         dontShowAgain?: boolean;
     }) => void | Promise<void> | Promise<boolean>;
     onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
+    /** Whether the modal should have a checkbox to not show again */
     hasDontShowAgainCheckbox?: boolean;
+    /** The variant of the confirmation button. */
     confirmationButtonVariant?: ButtonVariants;
+    /** The text of the confirmation button */
     confirmationButtonText?: string;
+    /** The text of the cancel button */
     cancelButtonText?: string;
+    /** The icon of the modal */
     icon?: IconName;
+    /** The status of the modal. This will determine the color of the icon. */
     status?: 'info' | 'success' | 'error';
 }

package/lib/components/pagination/types.d.ts

@@ -1,6 +1,10 @@
 export interface PaginationProps {
+    /** The total number of pages to be displayed */
     totalPages: number;
+    /** The current page displayed in the input field. */
     currentPage?: number;
+    /** The css class name for the pagination component */
     className?: string;
+    /** The callback function that is called when the page changes. */
     onChange?: (value: number) => void;
 }

package/lib/components/pill/Pill.d.ts

@@ -1,2 +1,2 @@
 import { PillProps } from './types';
-export declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pill: ({ children, className, color, size, shade, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pill/Pill.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Pill>;
 export declare const Default: Story;
 export declare const AllSizes: Story;
-export declare const AllStatuses: Story;
+export declare const AllDefaultColors: Story;
+export declare const AllShades: Story;

package/lib/components/pill/types.d.ts

@@ -1,10 +1,16 @@
-import { SemanticColor } from '../../types';
+import { ChromaticColor } from '../../types';
 import React from 'react';
 export type PillSize = 'sm' | 'md' | 'lg';
-export type PillColor = SemanticColor | 'neutral';
+export type PillColor = ChromaticColor;
+export type PillShade = 1 | 2 | 3 | 4 | 5;
 export interface PillProps {
+    /** The content displayed inside the pill */
     children: React.ReactNode | React.ReactNode[];
+    /** Applies a CSS class to change the style of the pill */
     color?: PillColor;
+    /** Applies a CSS class to change the size of the pill */
     size?: PillSize;
+    /** Applies a CSS class to change the shade of the pill */
+    shade?: PillShade;
     className?: string;
 }

package/lib/components/skeleton/Skeleton.d.ts

@@ -1,8 +1,13 @@
 type Props = {
+    /** Additional classes for the skeleton component */
     className?: string;
+    /** The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
     height?: number | string;
+    /** The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
     width?: number | string;
+    /** Sets the skeleton component to be a circle */
     isCircle?: boolean;
+    /** Sets the skeleton component to be full height */
     isFullHeight?: boolean;
 };
 export declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;