@persona/design-system 0.1.5-pre.4

package/dist/Button-C_3p5Xfi.d.cts

@@ -0,0 +1,101 @@
+import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import * as _$styled_components0 from "styled-components";
+import { LinkProps } from "react-router-dom";
+
+//#region components/Button/Button.d.ts
+interface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {
+  $isPending: boolean;
+  $onSecondaryBackground?: boolean;
+}
+declare const StyledButton: _$styled_components0.StyledComponent<"button", any, ButtonPropsWithTransientProps, never>;
+type WithPendingProps = Pick<ButtonProps, 'isPending'>;
+declare const ButtonChildren: _$styled_components0.StyledComponent<"div", any, {
+  "aria-hidden": boolean | undefined;
+} & WithPendingProps, "aria-hidden">;
+declare const SuffixIconContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+type MaybePromise = ((e: MouseEvent<HTMLButtonElement>) => void) | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);
+interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {
+  /**
+   * Visual style of the button.
+   *
+   * - `primary` – filled brand colour, for the primary action on a surface.
+   * - `basic` – subtle grey fill, for secondary actions.
+   * - `outline` – transparent with a border, alternative secondary style.
+   * - `text` – no background or border, for tertiary / inline actions.
+   * - `inverse` – inverted fill for use on dark/coloured backgrounds.
+   * - `danger` – red fill, for destructive actions.
+   *
+   * @defaultValue 'primary'
+   */
+  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';
+  /**
+   * Shows a loading spinner and disables the button. Also triggers automatically
+   * when `onClick` returns a Promise, clearing once the promise settles.
+   */
+  isPending?: boolean;
+  /**
+   * Icon rendered to the left of the button label.
+   * Import from `@persona-id/icons`.
+   */
+  prefixIcon?: ReactNode;
+  /**
+   * Controls how the prefix icon inherits sizing.
+   *
+   * - `basic` – icon is rendered inside a fixed-size container.
+   * - `inherit` – icon stretches to fill the surrounding element's dimensions.
+   *
+   * @defaultValue 'basic'
+   */
+  prefixIconType?: 'basic' | 'inherit';
+  /**
+   * Icon rendered to the right of the button label.
+   * Import from `@persona-id/icons`.
+   */
+  suffixIcon?: ReactNode;
+  /**
+   * Height and typography scale of the button.
+   *
+   * @defaultValue 'md'
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Changes the button into a link.
+   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute
+   * `https://` URL to render an `<a>` tag that opens in a new tab.
+   */
+  to?: LinkProps['to'];
+  /**
+   * Overrides the target of the link if `to` is provided and is an external link.
+   */
+  target?: LinkProps['target'];
+  /**
+   * Note: we may want to default this to 'button' in the future, but many instances of this Button component
+   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form
+   * so we'll have to comb through and manually add the type='submit' prop.
+   */
+  type?: 'button' | 'reset' | 'submit';
+  /**
+   * Controls the width of the button.
+   *
+   * - `full` – stretches to fill its container (`width: 100%`).
+   * - `auto` – shrinks to fit its content.
+   * - `button` – a fixed medium element width (from design tokens).
+   * - `icon` – square, sized to match the button height; use for icon-only buttons.
+   *
+   * @defaultValue 'full'
+   */
+  width?: 'full' | 'auto' | 'button' | 'icon';
+  onClick?: MaybePromise;
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * In some cases we render a button on a secondary background, which needs an adjustment
+   * for certain variants.
+   */
+  onSecondaryBackground?: boolean;
+}
+declare const Button: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuffixIconContainer as a, StyledButton as i, ButtonChildren as n, ButtonProps as r, Button as t };
+//# sourceMappingURL=Button-C_3p5Xfi.d.cts.map

package/dist/Button-DqDLGURJ.d.mts

@@ -0,0 +1,101 @@
+import { t as PseudoClassProps } from "./PseudoClassProps-mZgO_iZJ.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import { LinkProps } from "react-router-dom";
+
+//#region components/Button/Button.d.ts
+interface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {
+  $isPending: boolean;
+  $onSecondaryBackground?: boolean;
+}
+declare const StyledButton: _$styled_components0.StyledComponent<"button", any, ButtonPropsWithTransientProps, never>;
+type WithPendingProps = Pick<ButtonProps, 'isPending'>;
+declare const ButtonChildren: _$styled_components0.StyledComponent<"div", any, {
+  "aria-hidden": boolean | undefined;
+} & WithPendingProps, "aria-hidden">;
+declare const SuffixIconContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+type MaybePromise = ((e: MouseEvent<HTMLButtonElement>) => void) | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);
+interface ButtonProps extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {
+  /**
+   * Visual style of the button.
+   *
+   * - `primary` – filled brand colour, for the primary action on a surface.
+   * - `basic` – subtle grey fill, for secondary actions.
+   * - `outline` – transparent with a border, alternative secondary style.
+   * - `text` – no background or border, for tertiary / inline actions.
+   * - `inverse` – inverted fill for use on dark/coloured backgrounds.
+   * - `danger` – red fill, for destructive actions.
+   *
+   * @defaultValue 'primary'
+   */
+  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';
+  /**
+   * Shows a loading spinner and disables the button. Also triggers automatically
+   * when `onClick` returns a Promise, clearing once the promise settles.
+   */
+  isPending?: boolean;
+  /**
+   * Icon rendered to the left of the button label.
+   * Import from `@persona-id/icons`.
+   */
+  prefixIcon?: ReactNode;
+  /**
+   * Controls how the prefix icon inherits sizing.
+   *
+   * - `basic` – icon is rendered inside a fixed-size container.
+   * - `inherit` – icon stretches to fill the surrounding element's dimensions.
+   *
+   * @defaultValue 'basic'
+   */
+  prefixIconType?: 'basic' | 'inherit';
+  /**
+   * Icon rendered to the right of the button label.
+   * Import from `@persona-id/icons`.
+   */
+  suffixIcon?: ReactNode;
+  /**
+   * Height and typography scale of the button.
+   *
+   * @defaultValue 'md'
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Changes the button into a link.
+   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute
+   * `https://` URL to render an `<a>` tag that opens in a new tab.
+   */
+  to?: LinkProps['to'];
+  /**
+   * Overrides the target of the link if `to` is provided and is an external link.
+   */
+  target?: LinkProps['target'];
+  /**
+   * Note: we may want to default this to 'button' in the future, but many instances of this Button component
+   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form
+   * so we'll have to comb through and manually add the type='submit' prop.
+   */
+  type?: 'button' | 'reset' | 'submit';
+  /**
+   * Controls the width of the button.
+   *
+   * - `full` – stretches to fill its container (`width: 100%`).
+   * - `auto` – shrinks to fit its content.
+   * - `button` – a fixed medium element width (from design tokens).
+   * - `icon` – square, sized to match the button height; use for icon-only buttons.
+   *
+   * @defaultValue 'full'
+   */
+  width?: 'full' | 'auto' | 'button' | 'icon';
+  onClick?: MaybePromise;
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * In some cases we render a button on a secondary background, which needs an adjustment
+   * for certain variants.
+   */
+  onSecondaryBackground?: boolean;
+}
+declare const Button: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SuffixIconContainer as a, StyledButton as i, ButtonChildren as n, ButtonProps as r, Button as t };
+//# sourceMappingURL=Button-DqDLGURJ.d.mts.map

package/dist/Button.d.cts

@@ -0,0 +1,2 @@
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-C_3p5Xfi.cjs";
+export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/Button.d.mts

@@ -0,0 +1,2 @@
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "./Button-DqDLGURJ.mjs";
+export { ButtonChildren, ButtonProps, StyledButton, SuffixIconContainer, Button as default };

package/dist/ButtonGroup.d.cts

@@ -0,0 +1,20 @@
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroupMultipleProps, ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+
+//#region components/ButtonGroup/ButtonGroup.d.ts
+interface ButtonGroupProps {
+  id?: string;
+  className?: string;
+  fullWidth?: boolean;
+}
+declare const ButtonGroup: ({
+  children,
+  fullWidth,
+  ...props
+}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => _$react_jsx_runtime0.JSX.Element;
+declare const ButtonGroupItem: _$react.ForwardRefExoticComponent<ToggleGroupPrimitive.ToggleGroupItemProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ButtonGroup, ButtonGroup as default, ButtonGroupItem, ButtonGroupProps };
+//# sourceMappingURL=ButtonGroup.d.cts.map

package/dist/ButtonGroup.d.mts

@@ -0,0 +1,20 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroupMultipleProps, ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+
+//#region components/ButtonGroup/ButtonGroup.d.ts
+interface ButtonGroupProps {
+  id?: string;
+  className?: string;
+  fullWidth?: boolean;
+}
+declare const ButtonGroup: ({
+  children,
+  fullWidth,
+  ...props
+}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => _$react_jsx_runtime0.JSX.Element;
+declare const ButtonGroupItem: _$react.ForwardRefExoticComponent<ToggleGroupPrimitive.ToggleGroupItemProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ButtonGroup, ButtonGroup as default, ButtonGroupItem, ButtonGroupProps };
+//# sourceMappingURL=ButtonGroup.d.mts.map

package/dist/Calendar.d.cts

@@ -0,0 +1,11 @@
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { AriaCalendarProps, DateValue } from "react-aria";
+
+//#region components/DatePicker/Calendar/Calendar.d.ts
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+  calendarRef?: Ref<HTMLDivElement>;
+}
+declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
+export = Calendar;
+//# sourceMappingURL=Calendar.d.cts.map

package/dist/Calendar.d.mts

@@ -0,0 +1,12 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Ref } from "react";
+import { AriaCalendarProps, DateValue } from "react-aria";
+
+//#region components/DatePicker/Calendar/Calendar.d.ts
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+  calendarRef?: Ref<HTMLDivElement>;
+}
+declare const Calendar: (props: CalendarProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Calendar as default };
+//# sourceMappingURL=Calendar.d.mts.map

package/dist/CalendarBase.d.mts

@@ -0,0 +1,12 @@
+import { n as IconButtonProps } from "./IconButton-DsXbc3nQ.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DatePicker/Calendar/CalendarBase.d.ts
+declare const CalendarContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const CalendarHeader: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const CalendarHeading: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const CalendarButton: (props: IconButtonProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CalendarButton, CalendarContainer, CalendarHeader, CalendarHeading };
+//# sourceMappingURL=CalendarBase.d.mts.map

package/dist/CalendarCell.d.mts

@@ -0,0 +1,18 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { CalendarState, RangeCalendarState } from "react-stately";
+import { CalendarDate, DateValue } from "@internationalized/date";
+
+//#region components/DatePicker/Calendar/CalendarCell.d.ts
+interface CalendarCellProps {
+  state: CalendarState | RangeCalendarState;
+  date: CalendarDate;
+  currentMonth: DateValue;
+}
+declare const CalendarCell: ({
+  state,
+  date,
+  currentMonth
+}: CalendarCellProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CalendarCell as default };
+//# sourceMappingURL=CalendarCell.d.mts.map

package/dist/CalendarGrid.d.mts

@@ -0,0 +1,18 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { CalendarState, RangeCalendarState } from "react-stately";
+import { DateDuration } from "@internationalized/date";
+
+//#region components/DatePicker/Calendar/CalendarGrid.d.ts
+interface CalendarGridProps {
+  state: CalendarState | RangeCalendarState;
+  offset?: DateDuration;
+  skipFromTabOrder?: boolean;
+}
+declare const CalendarGrid: ({
+  state,
+  offset,
+  skipFromTabOrder
+}: CalendarGridProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CalendarGrid as default };
+//# sourceMappingURL=CalendarGrid.d.mts.map

package/dist/Card-CcU9cKCd.d.mts

@@ -0,0 +1,52 @@
+import { c as ParagraphProps, u as SpanProps } from "./Text-CnXedFut.mjs";
+import { i as HeaderProps } from "./Header-t1plnZc0.mjs";
+import { Spacing } from "@persona/design-tokens";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
+import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
+
+//#region components/Card/Card.d.ts
+interface CardProps {
+  elevated?: boolean;
+  $matchCardV2?: boolean;
+}
+interface TitleBaseProps {
+  icon?: ReactElement;
+}
+interface TitleProps extends TitleBaseProps, Pick<HeaderProps, 'actions' | 'subtitle'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {
+  $matchCardV2?: boolean;
+}
+interface SectionProps extends Pick<HeaderProps, 'subtitle' | 'actions'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}
+/**
+ * Wrapper for a full-width image to be used at the top of a card.
+ */
+interface ImageProps {
+  height: number;
+  children: ReactNode;
+}
+interface CollapsibleSectionProps {
+  id?: string;
+  defaultExpanded?: boolean;
+  title: ReactNode;
+}
+declare const _default: string & _$styled_components0.StyledComponentBase<"div", any, CardProps, never> & _$hoist_non_react_statics0.NonReactStatics<never, {}> & {
+  Title: FC<TitleProps>;
+  SectionHeader: ({
+    children,
+    ...elemProps
+  }: SectionProps) => _$react_jsx_runtime0.JSX.Element;
+  Subtitle: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps & {
+    size: string;
+  }, "size">;
+  Body: _$styled_components0.StyledComponent<"section", any, {
+    gap?: number;
+    padding?: Spacing;
+    $matchCardV2?: boolean;
+  }, never>;
+  Image: FC<ImageProps>;
+  CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>>;
+};
+//#endregion
+export { SectionProps as n, _default as r, CardProps as t };
+//# sourceMappingURL=Card-CcU9cKCd.d.mts.map

package/dist/Card-CrQL0hXm.d.cts

@@ -0,0 +1,52 @@
+import { c as ParagraphProps, u as SpanProps } from "./Text-CrGiWG2E.cjs";
+import { i as HeaderProps } from "./Header-D8oDtnIL.cjs";
+import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactElement, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Spacing } from "@persona/design-tokens";
+import * as _$hoist_non_react_statics0 from "hoist-non-react-statics";
+
+//#region components/Card/Card.d.ts
+interface CardProps {
+  elevated?: boolean;
+  $matchCardV2?: boolean;
+}
+interface TitleBaseProps {
+  icon?: ReactElement;
+}
+interface TitleProps extends TitleBaseProps, Pick<HeaderProps, 'actions' | 'subtitle'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {
+  $matchCardV2?: boolean;
+}
+interface SectionProps extends Pick<HeaderProps, 'subtitle' | 'actions'>, Omit<ComponentPropsWithoutRef<'h3'>, 'color' | 'size'> {}
+/**
+ * Wrapper for a full-width image to be used at the top of a card.
+ */
+interface ImageProps {
+  height: number;
+  children: ReactNode;
+}
+interface CollapsibleSectionProps {
+  id?: string;
+  defaultExpanded?: boolean;
+  title: ReactNode;
+}
+declare const _default: string & _$styled_components0.StyledComponentBase<"div", any, CardProps, never> & _$hoist_non_react_statics0.NonReactStatics<never, {}> & {
+  Title: FC<TitleProps>;
+  SectionHeader: ({
+    children,
+    ...elemProps
+  }: SectionProps) => _$react_jsx_runtime0.JSX.Element;
+  Subtitle: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps & {
+    size: string;
+  }, "size">;
+  Body: _$styled_components0.StyledComponent<"section", any, {
+    gap?: number;
+    padding?: Spacing;
+    $matchCardV2?: boolean;
+  }, never>;
+  Image: FC<ImageProps>;
+  CollapsibleSection: FC<PropsWithChildren<CollapsibleSectionProps>>;
+};
+//#endregion
+export { SectionProps as n, _default as r, CardProps as t };
+//# sourceMappingURL=Card-CrQL0hXm.d.cts.map