@shipengine/elements 0.15.0 → 0.16.1

package/components/add-funds-form/add-funds-form.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type AddFundsFormProvider = {
+    isCustomAmount?: boolean;
+    isSubmitted?: boolean;
+    isSubmitting?: boolean;
+    isValid?: boolean;
+    selectedAmount?: number;
+    submit?: () => void;
+};
+export type AddFundsFormProps = {
+    carrierId: string;
+    children?: (addFundsForm: AddFundsFormProvider) => React.ReactElement;
+    minimumAmount?: number;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+};
+/**
+ * Form for adding funds to a carrier's account.
+ *
+ * If a render child is provided, external control is assumed and the cancel / submit buttons are hidden.
+ */
+export declare const AddFundsForm: ({ carrierId, children, onCancel, onSuccess, minimumAmount, }: AddFundsFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/add-funds-form/add-funds-form.styles.d.ts

@@ -0,0 +1,6 @@
+type GetStylesProps = {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+export declare const getStyles: ({ isDisabled, isSelected }?: GetStylesProps) => Record<"chip" | "chipList" | "fundsInput", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;
+export {};

package/components/add-funds-form/add-funds-schema.d.ts

@@ -0,0 +1,37 @@
+import { z } from "zod";
+export declare const getAddFundsSchema: (minimumAmount?: number) => z.ZodEffects<z.ZodObject<{
+    funds: z.ZodObject<z.extendShape<{
+        amount: z.ZodNumber;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
+    }, {
+        amount: z.ZodNumber;
+    }>, "strip", z.ZodTypeAny, {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    }, {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    }>;
+}, "strip", z.ZodTypeAny, {
+    funds: {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    };
+}, {
+    funds: {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    };
+}>, {
+    amount: number;
+    currency: import("@shipengine/api").Currency;
+}, {
+    funds: {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    };
+}>;
+type AddFundsFormSchema = ReturnType<typeof getAddFundsSchema>;
+export type AddFundsFormFields = z.input<AddFundsFormSchema>;
+export type AddFundsFormPayload = z.output<AddFundsFormSchema>;
+export {};

package/components/add-funds-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./add-funds-form";
+export * from "./add-funds-schema";

package/components/auto-funding-form/auto-funding-form.d.ts

@@ -0,0 +1,8 @@
+export type AutoFundingFormProps = {
+    carrierId: string;
+};
+/**
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding settings in ShipEngine API.
+ */
+export declare const AutoFundingForm: ({ carrierId }: AutoFundingFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/auto-funding-form/auto-funding-form.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: Record<"form", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/{organisms/auto-funding-form → auto-funding-form}/auto-funding-schema.d.ts

@@ -3,50 +3,50 @@ export declare const autoFundingSchema: z.ZodObject<{
     isEnabled: z.ZodBoolean;
     lowBalancePurchaseThreshold: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
-        currency: z.ZodNativeEnum<typeof import("dist/shipengine-types/src").Currency>;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
     }, {
         amount: z.ZodNumber;
     }>, "strip", z.ZodTypeAny, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }>;
     maximumPurchasesPerDay: z.ZodNumber;
     purchaseAmount: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
-        currency: z.ZodNativeEnum<typeof import("dist/shipengine-types/src").Currency>;
+        currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
     }, {
         amount: z.ZodNumber;
     }>, "strip", z.ZodTypeAny, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }, {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     }>;
 }, "strip", z.ZodTypeAny, {
     isEnabled: boolean;
     lowBalancePurchaseThreshold: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
     maximumPurchasesPerDay: number;
     purchaseAmount: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }, {
     isEnabled: boolean;
     lowBalancePurchaseThreshold: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
     maximumPurchasesPerDay: number;
     purchaseAmount: {
         amount: number;
-        currency: import("dist/shipengine-types/src").Currency;
+        currency: import("@shipengine/api").Currency;
     };
 }>;
 export type AutoFundingFormFields = z.input<typeof autoFundingSchema>;

package/components/auto-funding-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./auto-funding-form";
+export * from "./auto-funding-schema";

package/components/carrier-balance/carrier-balance.d.ts

@@ -0,0 +1,4 @@
+export type CarrierBalanceProps = {
+    carrierId: string;
+};
+export declare const CarrierBalance: ({ carrierId }: CarrierBalanceProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/carrier-balance/carrier-balance.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (balance?: number) => Record<"balanceText", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/carrier-balance/index.d.ts

@@ -0,0 +1 @@
+export * from "./carrier-balance";

package/components/field/create-field-controller.d.ts

@@ -10,14 +10,17 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
     displayErrors?: boolean;
     displayLabel?: boolean;
     errors?: string[];
+    hint?: string;
     inputOnly?: boolean;
+    isOptional?: boolean;
     label: string;
     labelWeight?: FieldLabelProps["weight"];
+    nativeLabel?: boolean;
 } & Omit<FieldLabelProps, "children" | "weight"> & Omit<UseControllerProps<TFieldValues, TName>, "defaultValue"> & ControlledFormInputProps<NP>;
 type FieldControllerOptions = {
     inputOnly?: boolean;
 };
-export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, inputOnly, label, labelWeight, name, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
+export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, hint, inputOnly, isOptional, label, labelWeight, name, nativeLabel, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
 export type ControlledFieldProps = Parameters<ControlledField>[0];
 export type ControlledField<NP = object, CP = object, OK extends string = ""> = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(fieldProps: Omit<FieldControllerProps<NP, TFieldValues, TName>, "children" | OK> & CP) => JSX.Element;
 export {};

package/components/field/credit-card-input/credit-card-input.d.ts

@@ -0,0 +1,3 @@
+import { InputProps as NativeInputProps } from "@packlink/giger";
+import { ControlledField } from "../create-field-controller";
+export declare const CreditCardInput: ControlledField<NativeInputProps>;

package/components/field/credit-card-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./credit-card-input";

package/components/field/fields.d.ts

@@ -1,3 +1,4 @@
+export * from "./credit-card-input";
 export * from "./checkbox-input";
 export * from "./date-picker";
 export * from "./input-group";

package/components/field/money-input/hooks/use-utils.d.ts

@@ -1,4 +1,4 @@
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 type UseUtils = {
     getCurrencySymbol: (currency: SE.Currency) => string | undefined;
 };

package/components/field/money-input/money-input.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from "@packlink/giger";
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 import { ControlledField } from "../create-field-controller";
 export declare const transform: {
     in: ({ amount, currency }?: Partial<{

package/components/field/rate-card/cost-breakdown/cost-breakdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 export interface CostBreakdownProps {
     confirmationAmount?: SE.Money;
     insuranceAmount?: SE.Money;

package/components/form-portal/form-portal.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Interpolation, Theme } from "@emotion/react";
+declare const variants: readonly ["well"];
+type FormPortalProps = {
+    children: React.ReactNode;
+    css?: Interpolation<Theme>;
+    id: `${string}-form`;
+    onSubmit: (e: React.SyntheticEvent) => Promise<void> | void;
+    variant?: typeof variants[number];
+};
+/**
+ * A drop-in replacement for the `<form>` tag that allows nested forms.
+ *
+ * Via portals, the <form> tag is mounted as a sibling of the app root. The form's
+ * interface is then mounted back at the point of use.
+ */
+export declare const FormPortal: ({ css, children, id, onSubmit, variant }: FormPortalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/components/form-portal/index.d.ts

@@ -0,0 +1 @@
+export * from "./form-portal";

package/components/fund-and-purchase/fund-and-purchase.d.ts

@@ -0,0 +1,15 @@
+export type FundAndPurchaseProps = {
+    carrierId?: string;
+    className?: string;
+    disabled?: boolean;
+    isFundingRequired: boolean;
+    onPurchase: () => void;
+    onSave: () => Promise<void>;
+    purchaseAmount: number;
+};
+/**
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ */
+export declare const FundAndPurchase: ({ carrierId, className, disabled, isFundingRequired, onSave, purchaseAmount, onPurchase, }: FundAndPurchaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/fund-and-purchase/fund-and-purchase.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (isCustomAmount?: boolean) => Record<"balanceText" | "container" | "formExtension" | "saveRateButton", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/fund-and-purchase/index.d.ts

@@ -0,0 +1 @@
+export * from "./fund-and-purchase";

package/components/index.d.ts

@@ -1,11 +1,21 @@
 export * as Templates from "./templates";
 export * from "./accordion";
+export * from "./add-funds-form";
+export * from "./auto-funding-form";
 export * from "./button-group";
+export * from "./carrier-balance";
 export * from "./cube";
 export * from "./error-boundary";
 export * from "./field";
 export * from "./field-label";
+export * from "./form-portal";
+export * from "./fund-and-purchase";
+export * from "./inline-label";
 export * from "./items-breakdown";
+export * from "./link-action";
 export * from "./loader";
+export * from "./manage-funding";
 export * from "./portal";
 export * from "./spacer";
+export * from "./spread";
+export * from "./story-notes";

package/components/inline-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./inline-label";

package/components/inline-label/inline-label.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type InlineLabelProps = {
+    children: React.ReactElement;
+    label: string;
+};
+export declare const InlineLabel: ({ children, label }: InlineLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/items-breakdown/items-breakdown.d.ts

@@ -1,4 +1,4 @@
-import * as SE from "@shipengine/types";
+import { SE } from "@shipengine/api";
 export type Item = {
     detail: string;
     name: string;

package/components/link-action/index.d.ts

@@ -0,0 +1 @@
+export * from "./link-action";

package/components/link-action/link-action.d.ts

@@ -0,0 +1,12 @@
+import { IconNames } from "@packlink/brands";
+import { ILinkProps } from "@packlink/giger";
+declare const icons: {
+    readonly add: IconNames.ADD;
+    readonly download: IconNames.DOWNLOAD;
+};
+export type LinkActionProps = {
+    icon?: keyof typeof icons;
+    title: string;
+} & ILinkProps;
+export declare const LinkAction: ({ css, icon, isDisabled, isLoading, title, ...props }: LinkActionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/components/manage-funding/manage-funding.d.ts

@@ -0,0 +1,4 @@
+export type ManageFundingProps = {
+    carrierId: string;
+};
+export declare const ManageFunding: ({ carrierId }: ManageFundingProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/portal/portal.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type PortalProps<T> = {
     children: React.ReactNode;
-    target?: React.RefObject<T> | HTMLElement;
+    target?: React.RefObject<T> | HTMLElement | null;
 };
 /**
  * A no-frills wrapper around React.createPortal for more elegant DOM composition

package/components/settings-card/settings-card.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export type SettingsCardProps = {
+    accessoryAction?: {
+        action: () => void;
+        name: string;
+    };
     cardAction: {
         action: () => void;
         name: string;
@@ -7,5 +11,6 @@ export type SettingsCardProps = {
     children?: React.ReactNode;
     subtitle?: string;
     title: string | JSX.Element;
+    verticallyAligned?: boolean;
 };
-export declare const SettingsCard: ({ cardAction, children, subtitle, title }: SettingsCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SettingsCard: ({ accessoryAction, cardAction, children, subtitle, title, verticallyAligned, }: SettingsCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/settings-card/settings-card.styles.d.ts

@@ -1,6 +1 @@
-import { SerializedStyles } from "@emotion/react";
-import { Theme } from "@packlink/brands";
-export declare const getSettingsCardContainerStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardHeaderStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardTitleStyles: (theme: Theme) => SerializedStyles;
-export declare const getSettingsCardBodyStyles: (theme: Theme) => SerializedStyles;
+export declare const styles: Record<"body" | "container" | "header" | "title" | "verticalContainer", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/spread/index.d.ts

@@ -0,0 +1 @@
+export * from "./spread";

package/components/spread/spread.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type SpreadProps = {
+    children: [React.ReactNode, React.ReactNode];
+};
+export declare const Spread: ({ children }: SpreadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/story-notes/index.d.ts

@@ -0,0 +1 @@
+export * from "./story-notes";

package/components/story-notes/story-notes.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type StoryNotesProps = {
+    children: React.ReactNode;
+    notes: string[];
+};
+/**
+ * For relevant notes about Storybook stories
+ *
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
+ */
+export declare const StoryNotes: ({ children, notes }: StoryNotesProps) => import("@emotion/react/jsx-runtime").JSX.Element;