@hubspot/ui-extensions 0.1.0 → 0.2.0

package/README.md

@@ -4,6 +4,7 @@ React components and utilities for extending HubSpot's UI.
 
 ## TOC
 
+- [Accordion](#accordion)
 - [Alert](#alert)
 - [Button](#button)
 - [ButtonRow](#buttonrow)
@@ -26,6 +27,7 @@ React components and utilities for extending HubSpot's UI.
 - [Statistics](#statistics)
   - [StatisticsItem](#statisticsitem)
   - [StatisticsTrend](#statisticstrend)
+- [StepIndicator](#StepIndicator)
 - [Table](#table)
   - [TableBody](#tablebody)
   - [TableCell](#tablecell)
@@ -41,6 +43,64 @@ React components and utilities for extending HubSpot's UI.
 
 ## Components
 
+### Accordion
+
+##### Import
+
+```javascript
+import { Accordion } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+The Accordion component accepts the following props:
+
+```typescript
+export interface AccordionProps {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  open?: boolean;
+  onClick?: () => void;
+  size?:
+    | 'small'
+    | 'extra-small'
+    | 'medium'
+    | 'xs'
+    | 'sm'
+    | 'md';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `N/A` | The title text for the accordion. |
+| `children` | `ReactNode(optional)` | `N/A` | The main content of the accordion when it opens. |
+| `defaultOpen` | `boolean(optional)` | `false` | If `true`, the accordion will be open by default. |
+| `disabled` | `boolean(optional)` | `false` | If `true`, users cannot change the open state of the accordion. |
+| `open` | `boolean(optional)` | `N/A` | Use it when you want to control the open state programatically. If true, the accordion will open. |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the title is clicked. It receives no arguments and it's return value is ignored. |
+| `size` | `'extra-small' \| 'small' \| 'medium' \| 'xs' \| 'sm' \| 'md'` | `'small'` | The size of the accordion title.|
+
+
+##### Usage
+
+```javascript
+function Extension() {
+  return (
+    <>
+      <Accordion title="Item One">
+        <Text>first inner text</Text>
+      </Accordion>
+      <Accordion title="Item Two">
+        <Text>second inner text</Text>
+      </Accordion>
+    </>
+  );
+}
+```
+
 ### Alert
 
 ##### Import
@@ -679,6 +739,7 @@ export interface LinkProps {
   variant?: 'primary' | 'destructive' | 'light' | 'dark';
   children: ReactNode;
   onClick?: () => void;
+  preventDefault?: boolean;
 }
 ```
 
@@ -688,6 +749,7 @@ export interface LinkProps {
 | `variant` | `'primary' \| 'light' \| 'dark' \| 'destructive'` `(optional)` | `'primary'` | Sets the color variation of the link |
 | `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. |
 | `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the link is clicked. It receives no arguments and it's return value is ignored |
+| `preventDefault` | `boolean(optional)` | `false` | If set to `true` `event.preventDefault()` will be invoked before your `onClick` function is called, preventing automatic navigation to the anchor's href url. |
 
 ##### Usage
 
@@ -817,6 +879,7 @@ import { ProgressBar } from '@hubspot/ui-extensions';
 ```typescript
 export interface ProgressBarProps {
   title?: string;
+  aria-label?: string;
   showPercentage?: boolean;
   value?: number;
   valueMax?: number;
@@ -833,6 +896,7 @@ export interface ProgressBarProps {
 | `valueMax` | `number(optional)` | `100` | The maximum value of the progress. |
 | `valueDescription` | `string(optional)` | `N/A` | Text that explains the current state of the `value` prop. Renders to the right of `title`. **Example: "10,000 of 7,500"** |
 | `variant` | `'success' \| 'danger' \| 'warning'` | `'success'` | The type of progressbar to display. Defaults to success. |
+| `aria-label` | `string(optional)` | `N/A` | Indicates the content of the ProgressBar to screen readers. Should be used if there's no title. |
 
 ##### Usage
 
@@ -1095,6 +1159,63 @@ const Extension = () => {
 };
 ```
 
+
+### StepIndicator
+
+##### Import
+
+```javascript
+import { StepIndicator } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface StepIndicatorProps {
+  stepNames: string[];
+  direction?: 'horizontal' | 'vertical';
+  onClick?: (stepIndex: number) => void;
+  circleSize?: AllSizes;
+  currentStep?: number;
+  variant?: 'default' | 'compact' | 'flush';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `stepNames` | `Array<string>` | `N/A` | Sets the name of the available steps. |
+| `direction` | `'horizontal' \| 'vertical'` `(optional)` | `N/A` | Determines whether the step indicator is laid out on a horizontal or vertical axis. |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when a step is clicked. It receives the current step index as an argument(zero based). Use this to update the active step.|
+| `circleSize` | `'extra-small' \| 'small' \| 'medium' \| 'large'\| 'extra-large'` `(optional)` | `'small'` | Determines the size of the circle of an individual step. |
+| `currentStep` | `number(optional)` | `N/A` | Determines which step is visually active in the step indicator. |
+| `variant` | `'default' \| 'compact' \| 'flush'` `(optional)` | `'default'` | Changes the visual styling of the component. compact only shows the title of the active step. flush does the same thing, but also removes the left and right margins. |
+
+##### Usage
+
+```javascript
+    function Extension() {
+      const [currentStep, setCurrentStep] = useState(0);
+
+      return (
+        <Stack>
+          <StepIndicator
+            currentStep={currentStep}
+            stepNames={['First', 'Second', 'Third']}
+          />
+          <Stack>
+            <Button onClick={() => setCurrentStep(currentStep - 1)}>
+              Previous
+            </Button>
+            <Button onClick={() => setCurrentStep(currentStep + 1)}>
+              Next
+            </Button>
+          </Stack>
+        </Stack>
+      );
+    }
+```
+
+
 ### Table
 
 ##### Import

package/dist/coreComponents.d.ts

@@ -1,177 +1,186 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, ToggleGroupProps, LinkProps, NumberInputProps, BoxProps } from './types';
-declare const Alert: "Alert" & {
+import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, ToggleGroupProps, LinkProps, NumberInputProps, BoxProps, StepIndicatorProps, AccordionProps } from './types';
+export declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
     readonly props?: AlertProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", AlertProps, true>>;
-declare const Button: "Button" & {
+export declare const Button: "Button" & {
     readonly type?: "Button" | undefined;
     readonly props?: ButtonProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", ButtonProps, true>>;
-declare const ButtonRow: "ButtonRow" & {
+export declare const ButtonRow: "ButtonRow" & {
     readonly type?: "ButtonRow" | undefined;
     readonly props?: ButtonRowProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", ButtonRowProps, true>>;
-declare const Card: "Card" & {
+export declare const Card: "Card" & {
     readonly type?: "Card" | undefined;
     readonly props?: CardProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", CardProps, true>>;
-declare const DescriptionList: "DescriptionList" & {
+export declare const DescriptionList: "DescriptionList" & {
     readonly type?: "DescriptionList" | undefined;
     readonly props?: DescriptionListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", DescriptionListProps, true>>;
-declare const DescriptionListItem: "DescriptionListItem" & {
+export declare const DescriptionListItem: "DescriptionListItem" & {
     readonly type?: "DescriptionListItem" | undefined;
     readonly props?: DescriptionListItemProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", DescriptionListItemProps, true>>;
-declare const Divider: "Divider" & {
+export declare const Divider: "Divider" & {
     readonly type?: "Divider" | undefined;
     readonly props?: DividerProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", DividerProps, true>>;
-declare const EmptyState: "EmptyState" & {
+export declare const EmptyState: "EmptyState" & {
     readonly type?: "EmptyState" | undefined;
     readonly props?: EmptyStateProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", EmptyStateProps, true>>;
-declare const ErrorState: "ErrorState" & {
+export declare const ErrorState: "ErrorState" & {
     readonly type?: "ErrorState" | undefined;
     readonly props?: ErrorStateProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", ErrorStateProps, true>>;
-declare const Form: "Form" & {
+export declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
     readonly props?: FormProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", FormProps, true>>;
-declare const Heading: "Heading" & {
+export declare const Heading: "Heading" & {
     readonly type?: "Heading" | undefined;
     readonly props?: HeadingProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", HeadingProps, true>>;
-declare const Image: "Image" & {
+export declare const Image: "Image" & {
     readonly type?: "Image" | undefined;
     readonly props?: ImageProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", ImageProps, true>>;
-declare const Input: "Input" & {
+export declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
     readonly props?: InputProps<string> | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps<string>, true>>;
-declare const Textarea: "Textarea" & {
+export declare const Textarea: "Textarea" & {
     readonly type?: "Textarea" | undefined;
     readonly props?: TextareaProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", TextareaProps, true>>;
-declare const LoadingSpinner: "LoadingSpinner" & {
+export declare const Link: "Link" & {
+    readonly type?: "Link" | undefined;
+    readonly props?: LinkProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
+export declare const LoadingSpinner: "LoadingSpinner" & {
     readonly type?: "LoadingSpinner" | undefined;
     readonly props?: LoadingSpinnerProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", LoadingSpinnerProps, true>>;
-declare const ProgressBar: "ProgressBar" & {
+export declare const ProgressBar: "ProgressBar" & {
     readonly type?: "ProgressBar" | undefined;
     readonly props?: ProgressBarProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", ProgressBarProps, true>>;
-declare const Select: "Select" & {
+export declare const Select: "Select" & {
     readonly type?: "Select" | undefined;
     readonly props?: SelectProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", SelectProps, true>>;
-declare const Tag: "Tag" & {
+export declare const Tag: "Tag" & {
     readonly type?: "Tag" | undefined;
     readonly props?: TagProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", TagProps, true>>;
-declare const Text: "Text" & {
+export declare const Text: "Text" & {
     readonly type?: "Text" | undefined;
     readonly props?: TextProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", TextProps, true>>;
-declare const Tile: "Tile" & {
+export declare const Tile: "Tile" & {
     readonly type?: "Tile" | undefined;
     readonly props?: TileProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", TileProps, true>>;
-declare const ToggleGroup: "ToggleGroup" & {
-    readonly type?: "ToggleGroup" | undefined;
-    readonly props?: ToggleGroupProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", ToggleGroupProps, true>>;
-declare const Stack: "Stack" & {
+export declare const Stack: "Stack" & {
     readonly type?: "Stack" | undefined;
     readonly props?: StackProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", StackProps, true>>;
-declare const StatisticsItem: "StatisticsItem" & {
+export declare const ToggleGroup: "ToggleGroup" & {
+    readonly type?: "ToggleGroup" | undefined;
+    readonly props?: ToggleGroupProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", ToggleGroupProps, true>>;
+export declare const StatisticsItem: "StatisticsItem" & {
     readonly type?: "StatisticsItem" | undefined;
     readonly props?: StatisticsItemProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", StatisticsItemProps, true>>;
-declare const Statistics: "Statistics" & {
+export declare const Statistics: "Statistics" & {
     readonly type?: "Statistics" | undefined;
     readonly props?: StatisticsProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", StatisticsProps, true>>;
-declare const StatisticsTrend: "StatisticsTrend" & {
+export declare const StatisticsTrend: "StatisticsTrend" & {
     readonly type?: "StatisticsTrend" | undefined;
     readonly props?: StatisticsTrendProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", StatisticsTrendProps, true>>;
-declare const Table: "Table" & {
+export declare const Table: "Table" & {
     readonly type?: "Table" | undefined;
     readonly props?: TableProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", TableProps, true>>;
-declare const TableFooter: "TableFooter" & {
+export declare const TableFooter: "TableFooter" & {
     readonly type?: "TableFooter" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", TableElementProps, true>>;
-declare const TableCell: "TableCell" & {
+export declare const TableCell: "TableCell" & {
     readonly type?: "TableCell" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", TableElementProps, true>>;
-declare const TableRow: "TableRow" & {
+export declare const TableRow: "TableRow" & {
     readonly type?: "TableRow" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", TableElementProps, true>>;
-declare const TableBody: "TableBody" & {
+export declare const TableBody: "TableBody" & {
     readonly type?: "TableBody" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", TableElementProps, true>>;
-declare const TableHeader: "TableHeader" & {
+export declare const TableHeader: "TableHeader" & {
     readonly type?: "TableHeader" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", TableElementProps, true>>;
-declare const TableHead: "TableHead" & {
+export declare const TableHead: "TableHead" & {
     readonly type?: "TableHead" | undefined;
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", TableElementProps, true>>;
-declare const Link: "Link" & {
-    readonly type?: "Link" | undefined;
-    readonly props?: LinkProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
-declare const NumberInput: "NumberInput" & {
+export declare const NumberInput: "NumberInput" & {
     readonly type?: "NumberInput" | undefined;
     readonly props?: NumberInputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", NumberInputProps, true>>;
-declare const Box: "Box" & {
+export declare const Box: "Box" & {
     readonly type?: "Box" | undefined;
     readonly props?: BoxProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", BoxProps, true>>;
-export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };
+export declare const StepIndicator: "StepIndicator" & {
+    readonly type?: "StepIndicator" | undefined;
+    readonly props?: StepIndicatorProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", StepIndicatorProps, true>>;
+export declare const Accordion: "Accordion" & {
+    readonly type?: "Accordion" | undefined;
+    readonly props?: AccordionProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", AccordionProps, true>>;

package/dist/coreComponents.js

@@ -1,37 +1,38 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
-const Alert = createRemoteReactComponent('Alert');
-const Button = createRemoteReactComponent('Button');
-const ButtonRow = createRemoteReactComponent('ButtonRow');
-const Card = createRemoteReactComponent('Card');
-const DescriptionList = createRemoteReactComponent('DescriptionList');
-const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
-const Divider = createRemoteReactComponent('Divider');
-const EmptyState = createRemoteReactComponent('EmptyState');
-const ErrorState = createRemoteReactComponent('ErrorState');
-const Form = createRemoteReactComponent('Form');
-const Heading = createRemoteReactComponent('Heading');
-const Image = createRemoteReactComponent('Image');
-const Input = createRemoteReactComponent('Input');
-const Textarea = createRemoteReactComponent('Textarea');
-const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
-const ProgressBar = createRemoteReactComponent('ProgressBar');
-const Select = createRemoteReactComponent('Select');
-const Tag = createRemoteReactComponent('Tag');
-const Text = createRemoteReactComponent('Text');
-const Tile = createRemoteReactComponent('Tile');
-const ToggleGroup = createRemoteReactComponent('ToggleGroup');
-const Stack = createRemoteReactComponent('Stack');
-const StatisticsItem = createRemoteReactComponent('StatisticsItem');
-const Statistics = createRemoteReactComponent('Statistics');
-const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
-const Table = createRemoteReactComponent('Table');
-const TableFooter = createRemoteReactComponent('TableFooter');
-const TableCell = createRemoteReactComponent('TableCell');
-const TableRow = createRemoteReactComponent('TableRow');
-const TableBody = createRemoteReactComponent('TableBody');
-const TableHeader = createRemoteReactComponent('TableHeader');
-const TableHead = createRemoteReactComponent('TableHead');
-const Link = createRemoteReactComponent('Link');
-const NumberInput = createRemoteReactComponent('NumberInput');
-const Box = createRemoteReactComponent('Box');
-export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };
+export const Alert = createRemoteReactComponent('Alert');
+export const Button = createRemoteReactComponent('Button');
+export const ButtonRow = createRemoteReactComponent('ButtonRow');
+export const Card = createRemoteReactComponent('Card');
+export const DescriptionList = createRemoteReactComponent('DescriptionList');
+export const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
+export const Divider = createRemoteReactComponent('Divider');
+export const EmptyState = createRemoteReactComponent('EmptyState');
+export const ErrorState = createRemoteReactComponent('ErrorState');
+export const Form = createRemoteReactComponent('Form');
+export const Heading = createRemoteReactComponent('Heading');
+export const Image = createRemoteReactComponent('Image');
+export const Input = createRemoteReactComponent('Input');
+export const Textarea = createRemoteReactComponent('Textarea');
+export const Link = createRemoteReactComponent('Link');
+export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
+export const ProgressBar = createRemoteReactComponent('ProgressBar');
+export const Select = createRemoteReactComponent('Select');
+export const Tag = createRemoteReactComponent('Tag');
+export const Text = createRemoteReactComponent('Text');
+export const Tile = createRemoteReactComponent('Tile');
+export const Stack = createRemoteReactComponent('Stack');
+export const ToggleGroup = createRemoteReactComponent('ToggleGroup');
+export const StatisticsItem = createRemoteReactComponent('StatisticsItem');
+export const Statistics = createRemoteReactComponent('Statistics');
+export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
+export const Table = createRemoteReactComponent('Table');
+export const TableFooter = createRemoteReactComponent('TableFooter');
+export const TableCell = createRemoteReactComponent('TableCell');
+export const TableRow = createRemoteReactComponent('TableRow');
+export const TableBody = createRemoteReactComponent('TableBody');
+export const TableHeader = createRemoteReactComponent('TableHeader');
+export const TableHead = createRemoteReactComponent('TableHead');
+export const NumberInput = createRemoteReactComponent('NumberInput');
+export const Box = createRemoteReactComponent('Box');
+export const StepIndicator = createRemoteReactComponent('StepIndicator');
+export const Accordion = createRemoteReactComponent('Accordion');

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, } from './coreComponents';
+export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, } from './coreComponents';
 export { hubspot } from './hubspot';
 export * from './types';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, } from './coreComponents';
+export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, } from './coreComponents';
 export { hubspot } from './hubspot';
 export * from './types';

package/dist/types.d.ts

@@ -92,6 +92,7 @@ export interface NumberInputProps extends InputProps<number> {
 }
 export interface ProgressBarProps {
     title?: string;
+    'aria-label'?: string;
     showPercentage?: boolean;
     value?: number;
     valueMax?: number;
@@ -453,6 +454,7 @@ export interface LinkProps {
     href: string;
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
     onClick?: () => void;
+    preventDefault?: boolean;
 }
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
@@ -471,4 +473,21 @@ interface TShirtSizes {
 }
 export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
 export type AllDistances = 'flush' | AllSizes;
+export interface StepIndicatorProps {
+    stepNames: string[];
+    direction?: 'horizontal' | 'vertical';
+    onClick?: (stepIndex: number) => void;
+    circleSize?: AllSizes;
+    currentStep?: number;
+    variant?: 'default' | 'compact' | 'flush';
+}
+export interface AccordionProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    onClick?: () => void;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "abac5960e6277af827714dcd4150ad7606e6a481"
+  "gitHead": "ab7ad192e9d98163d2613d77f68677e3b48898aa"
 }