@commercelayer/app-elements 1.0.1 → 1.2.0

package/dist/ui/forms/InputCheckboxGroup/HookedInputCheckboxGroup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type InputCheckboxGroupProps } from './InputCheckboxGroup';
+export interface HookedInputCheckboxGroupProps extends Omit<InputCheckboxGroupProps, 'onChange' | 'defaultValues'> {
+    /**
+     * field name to match hook-form state
+     */
+    name: string;
+}
+/**
+ * `InputCheckboxGroupProps` component ready to be used with the `react-hook-form` context.
+ * @see InputCheckboxGroupProps
+ */
+export declare const HookedInputCheckboxGroup: React.FC<HookedInputCheckboxGroupProps>;

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentProps } from 'react';
+import { type InputCheckboxGroupOption } from './InputCheckboxGroupItem';
+export interface SelectedItem {
+    /**
+     * Item identifier, should be one of the options
+     */
+    value: string;
+    /**
+     * Selected quantity for the checked item
+     */
+    quantity?: number;
+}
+/**
+ * Renders a group of checkbox items. Each item can be selected/unselected.
+ * The title will be automatically computed with the number of selected items.
+ *
+ * Each item can also be associated with a quantity input, when quantity is changed the new value
+ * will be available in the onChange callback.
+ * The total number of select items in the title will be automatically computed with the sum of all selected quantities.
+ * <span type="info">Quantity for each option item has a min/max range, to prevent selecting less or more than the allowed number.</span>
+ */
+export declare const InputCheckboxGroup: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    title?: string | undefined;
+    options: InputCheckboxGroupOption[];
+    defaultValues?: SelectedItem[] | undefined;
+    onChange: (selected: SelectedItem[]) => void;
+    feedback?: Omit<import("../InputFeedback").InputFeedbackProps, "className"> | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export type InputCheckboxGroupProps = ComponentProps<typeof InputCheckboxGroup>;

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroupItem.d.ts

@@ -0,0 +1,55 @@
+import { type InputCheckboxProps } from '../../forms/InputCheckbox';
+import { type ComponentProps } from 'react';
+export interface InputCheckboxGroupOption extends Pick<InputCheckboxProps, 'icon' | 'checked'> {
+    /**
+     * Input name, will be used to set the html name for checkbox and the quantity inputs.
+     * If not provided, the value will be used instead.
+     */
+    name?: string;
+    /**
+     * Item identifier, must be unique and will be used for the onChange callback.
+     */
+    value: string;
+    /**
+     * Item content to be displayed in the central section of the row.
+     */
+    content: React.ReactNode;
+    /**
+     * Quantity range to be used in the InputSpinner.
+     * If not provided the quantity input spinner will not be displayed.
+     */
+    quantity?: {
+        min: number;
+        max: number;
+    };
+}
+export interface Props extends InputCheckboxGroupOption {
+    /**
+     * Callback triggered when the user checks/unchecks an option or changes the quantity.
+     * New quantity is returned only if `quantity` is part of the option (`InputCheckboxGroupOption`).
+     */
+    onChange: (value: string, newQuantity?: number) => void;
+    /**
+     * Quantity to be used as default value for the InputSpinner.
+     */
+    defaultQuantity?: number;
+}
+/**
+ * Internal component to render the single item of the InputCheckboxGroup.
+ */
+export declare const InputCheckboxGroupItem: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    onChange: (value: string, newQuantity?: number) => void;
+    defaultQuantity?: number | undefined;
+    name?: string | undefined;
+    value: string;
+    content: React.ReactNode;
+    quantity?: {
+        min: number;
+        max: number;
+    } | undefined;
+    icon?: JSX.Element | undefined;
+    checked?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export type InputCheckboxGroupItemProps = ComponentProps<typeof InputCheckboxGroupItem>;

package/dist/ui/forms/InputCheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputCheckboxGroup, type HookedInputCheckboxGroupProps } from './HookedInputCheckboxGroup';
+export { InputCheckboxGroup, type InputCheckboxGroupProps } from './InputCheckboxGroup';

package/dist/ui/forms/InputCheckboxGroup/reducer.d.ts

@@ -0,0 +1,25 @@
+import { type SelectedItem } from './InputCheckboxGroup';
+import { type InputCheckboxGroupOption } from './InputCheckboxGroupItem';
+export type InternalState = Array<{
+    value: string;
+    quantity?: number;
+    isSelected: boolean;
+}>;
+type Action = {
+    type: 'updateQuantity';
+    payload: {
+        value: string;
+        quantity: number;
+    };
+} | {
+    type: 'toggleSelection';
+    payload: {
+        value: string;
+    };
+};
+export declare const reducer: (state: InternalState, action: Action) => InternalState;
+export declare function makeInitialState({ options, defaultValues }: {
+    options: InputCheckboxGroupOption[];
+    defaultValues: SelectedItem[];
+}): InternalState;
+export {};

package/dist/{src/ui → ui}/forms/InputCurrency/HookedInputCurrency.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputCurrencyProps } from './InputCurrency';
-interface Props extends Omit<InputCurrencyProps, 'onChange' | 'onBlur' | 'cents'> {
+export interface HookedInputCurrencyProps extends Omit<InputCurrencyProps, 'onChange' | 'onBlur' | 'cents'> {
     /**
      * field name to match hook-form state
      */
@@ -11,8 +11,7 @@ interface Props extends Omit<InputCurrencyProps, 'onChange' | 'onBlur' | 'cents'
  * Value is stored in form state as cents.
  * @see InputCurrency
  */
-export declare function HookedInputCurrency({ name, ...props }: Props): JSX.Element;
+export declare function HookedInputCurrency({ name, ...props }: HookedInputCurrencyProps): JSX.Element;
 export declare namespace HookedInputCurrency {
     var displayName: string;
 }
-export {};

package/dist/ui/forms/InputCurrency/index.d.ts

@@ -0,0 +1,4 @@
+export { HookedInputCurrency, type HookedInputCurrencyProps } from './HookedInputCurrency';
+export { InputCurrency, type InputCurrencyProps } from './InputCurrency';
+export type { CurrencyCode } from './currencies';
+export { formatCentsToCurrency } from './utils';

package/dist/{src/ui → ui}/forms/InputDate/HookedInputDate.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputDateProps } from './InputDateComponent';
-interface Props extends Omit<InputDateProps, 'onChange'> {
+export interface HookedInputDateProps extends Omit<InputDateProps, 'onChange'> {
     /**
      * field name to match hook-form state
      */
@@ -11,8 +11,7 @@ interface Props extends Omit<InputDateProps, 'onChange'> {
  * Value is stored in form state as iso date string (example: `"2023-08-01T22:00:00.000Z"` ).
  * @see InputDate
  */
-export declare function HookedInputDate({ name, ...props }: Props): JSX.Element;
+export declare function HookedInputDate({ name, ...props }: HookedInputDateProps): JSX.Element;
 export declare namespace HookedInputDate {
     var displayName: string;
 }
-export {};

package/dist/ui/forms/InputDate/index.d.ts

@@ -0,0 +1,3 @@
+export { HookedInputDate, type HookedInputDateProps } from './HookedInputDate';
+export { InputDate } from './InputDate';
+export type { InputDateProps } from './InputDateComponent';

package/dist/{src/ui → ui}/forms/InputDateRange/HookedInputDateRange.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputDateRangeProps } from './InputDateRange';
-interface Props extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
+export interface HookedInputDateRangeProps extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
     /**
      * field name to match hook-form state
      */
@@ -12,8 +12,7 @@ interface Props extends Omit<InputDateRangeProps, 'onChange' | 'value'> {
  * (example: `["2023-08-01T22:00:00.000Z", "2023-08-14T22:00:00.000Z"]` ).
  * @see InputDateRange
  */
-export declare function HookedInputDateRange({ name, ...props }: Props): JSX.Element;
+export declare function HookedInputDateRange({ name, ...props }: HookedInputDateRangeProps): JSX.Element;
 export declare namespace HookedInputDateRange {
     var displayName: string;
 }
-export {};

package/dist/ui/forms/InputDateRange/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputDateRange, type HookedInputDateRangeProps } from './HookedInputDateRange';
+export { InputDateRange, type InputDateRangeProps } from './InputDateRange';

package/dist/{src/ui → ui}/forms/InputFeedback.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type FeedbackVariant = 'danger' | 'success' | 'warning';
+type FeedbackVariant = 'danger' | 'success' | 'warning';
 export interface InputFeedbackProps {
     message: string;
     variant?: FeedbackVariant;
@@ -9,3 +9,4 @@ export declare function InputFeedback({ className, message, variant, ...rest }:
 export declare namespace InputFeedback {
     var displayName: string;
 }
+export {};

package/dist/{src/ui → ui}/forms/InputFile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
-interface InputFileProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+export interface InputFileProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
      * The title is shown within the input.
      */
@@ -11,4 +11,3 @@ interface InputFileProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttr
     progress?: number;
 }
 export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/{src/ui → ui}/forms/InputRadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export interface OptionItem {
+interface OptionItem {
     /**
      * Item identifier, must be unique and will be used for the onChange callback
      */
@@ -51,3 +51,4 @@ export declare const InputRadioGroup: import('../atoms/SkeletonTemplate').Skelet
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;
+export {};

package/dist/{src/ui → ui}/forms/InputReadonly.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
-interface InputReadonlyProps extends InputWrapperBaseProps {
+export interface InputReadonlyProps extends InputWrapperBaseProps {
     /**
      * Controlled value
      */
@@ -22,4 +22,3 @@ export declare function InputReadonly({ value, wrapperClassName, inputClassName,
 export declare namespace InputReadonly {
     var displayName: string;
 }
-export {};

package/dist/{src/ui → ui}/forms/InputResourceGroup/HookedInputResourceGroup.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputResourceGroupProps } from './InputResourceGroup';
-interface Props extends Omit<InputResourceGroupProps, 'onChange' | 'defaultValues'> {
+export interface HookedInputResourceGroupProps extends Omit<InputResourceGroupProps, 'onChange' | 'defaultValues'> {
     /**
      * field name to match hook-form state
      */
@@ -11,5 +11,4 @@ interface Props extends Omit<InputResourceGroupProps, 'onChange' | 'defaultValue
  * Since it will perform api requests to fetch list of options, it also needs to access `CoreSdkProvider` context.
  * @see InputResourceGroup
  */
-export declare const HookedInputResourceGroup: React.FC<Props>;
-export {};
+export declare const HookedInputResourceGroup: React.FC<HookedInputResourceGroupProps>;

package/dist/ui/forms/InputResourceGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputResourceGroup, type HookedInputResourceGroupProps } from './HookedInputResourceGroup';
+export { InputResourceGroup, type InputResourceGroupProps } from './InputResourceGroup';

package/dist/ui/forms/InputResourceGroup/utils.d.ts

@@ -0,0 +1,36 @@
+import { type CommerceLayerClient } from '@commercelayer/sdk';
+import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+export declare function useToggleCheckboxValues(defaultValues: string[]): {
+    values: string[];
+    toggleValue: (value: string) => void;
+    setValues: (values: string[]) => void;
+};
+/**
+ * Simple helper to add the counter for selected options to a label
+ * or just the total of available options when nothing is selected
+ * @param options
+ * @returns string
+ *
+ * @example
+ * "Markets · 2 of 4"
+ * "Markets · 4"
+ */
+export declare function computeLabelWithSelected({ label, selectedCount, totalCount }: {
+    label: string;
+    selectedCount: number;
+    totalCount?: number;
+}): string;
+type Resource = Awaited<ReturnType<CommerceLayerClient[ListableResourceType]['list']>>[number];
+/**
+ * Helper to prepare the options for the checkbox group or mocked info to be used for skeleton.
+ */
+export declare function prepareCheckboxItemOrMock({ resource, isLoading, fieldForLabel, fieldForValue }: {
+    resource?: Resource;
+    isLoading?: boolean;
+    fieldForValue: string;
+    fieldForLabel: string;
+}): {
+    value: string;
+    label: string;
+};
+export {};

package/dist/{src/ui → ui}/forms/InputSelect/AsyncComponent.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { type StylesConfig } from 'react-select';
 import { type SetRequired } from 'type-fest';
-import { type InputSelectProps, type SelectValue } from './InputSelect';
+import { type InputSelectProps, type InputSelectValue } from './InputSelect';
 interface AsyncSelectComponentProps extends Omit<SetRequired<InputSelectProps, 'loadAsyncValues'>, 'label' | 'hint'> {
-    styles: StylesConfig<SelectValue>;
+    styles: StylesConfig<InputSelectValue>;
 }
 export declare const AsyncSelectComponent: React.FC<AsyncSelectComponentProps>;
 export {};

package/dist/{src/ui → ui}/forms/InputSelect/HookedInputSelect.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputSelectProps } from './InputSelect';
-interface Props extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
+export interface HookedInputSelectProps extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
     /**
      * field name to match hook-form state
      */
@@ -27,5 +27,4 @@ interface Props extends Omit<InputSelectProps, 'onSelect' | 'defaultValue'> {
  * Value to be stored in the field can be controlled from the `pathToValue` prop.
  * @see InputSelect
  */
-export declare const HookedInputSelect: React.FC<Props>;
-export {};
+export declare const HookedInputSelect: React.FC<HookedInputSelectProps>;

package/dist/{src/ui → ui}/forms/InputSelect/InputSelect.d.ts

@@ -3,23 +3,23 @@ import { type FocusEventHandler } from 'react';
 import { type MultiValue, type Options, type SingleValue } from 'react-select';
 export type GroupedSelectValues = Array<{
     label: string;
-    options: SelectValue[];
+    options: InputSelectValue[];
 }>;
-export interface SelectValue {
+export interface InputSelectValue {
     value: string | number;
     label: string;
     meta?: Record<string, any>;
 }
-export type PossibleSelectValue = MultiValue<SelectValue> | SingleValue<SelectValue>;
+export type PossibleSelectValue = MultiValue<InputSelectValue> | SingleValue<InputSelectValue>;
 export interface InputSelectProps extends InputWrapperBaseProps {
     /**
      * Initial values to populate the select options. It can be a flat array of values or a grouped array.
      */
-    initialValues: GroupedSelectValues | SelectValue[];
+    initialValues: GroupedSelectValues | InputSelectValue[];
     /**
      * Selected value or values, in case of `isMulti`
      */
-    defaultValue?: SelectValue | SelectValue[];
+    defaultValue?: InputSelectValue | InputSelectValue[];
     /**
      * Placeholder text to display when no value is selected
      */
@@ -51,7 +51,7 @@ export interface InputSelectProps extends InputWrapperBaseProps {
     /**
      * Custom rule to disable an option
      */
-    isOptionDisabled?: (option: SelectValue, selectValue: Options<SelectValue>) => boolean;
+    isOptionDisabled?: (option: InputSelectValue, selectValue: Options<InputSelectValue>) => boolean;
     /**
      * Callback triggered when a value is selected.
      */
@@ -79,7 +79,7 @@ export interface InputSelectProps extends InputWrapperBaseProps {
     /**
      * Function to load async values on search
      */
-    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | SelectValue[]>;
+    loadAsyncValues?: (inputValue: string) => Promise<GroupedSelectValues | InputSelectValue[]>;
     /**
      * Debounce time in milliseconds for async search.
      * It only works when `loadAsyncValues` is provided

package/dist/{src/ui → ui}/forms/InputSelect/SelectComponent.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { type StylesConfig } from 'react-select';
-import { type InputSelectProps, type SelectValue } from './InputSelect';
+import { type InputSelectProps, type InputSelectValue } from './InputSelect';
 interface SelectComponentProps extends Omit<InputSelectProps, 'loadAsyncValues' | 'label' | 'hint'> {
-    styles: StylesConfig<SelectValue>;
+    styles: StylesConfig<InputSelectValue>;
 }
 export declare const SelectComponent: React.FC<SelectComponentProps>;
 export {};

package/dist/ui/forms/InputSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { HookedInputSelect, type HookedInputSelectProps } from './HookedInputSelect';
+export { InputSelect, type InputSelectProps, type InputSelectValue } from './InputSelect';
+export { flatSelectValues, getDefaultValueFromFlatten, isGroupedSelectValues, isMultiValueSelected, isSingleValueSelected } from './utils';

package/dist/{src/ui → ui}/forms/InputSelect/overrides.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type GroupBase, type MultiValueGenericProps, type MultiValueRemoveProps } from 'react-select';
-import { type SelectValue } from '.';
-declare function DropdownIndicator(props: DropdownIndicatorProps<SelectValue>): JSX.Element;
-declare function ClearIndicator(props: ClearIndicatorProps<SelectValue>): JSX.Element;
-declare function MultiValueContainer(props: MultiValueGenericProps<MultiValueGenericProps<SelectValue, boolean, GroupBase<SelectValue>>>): JSX.Element;
-declare function MultiValueLabel(props: MultiValueGenericProps<MultiValueGenericProps<SelectValue, boolean, GroupBase<SelectValue>>>): string;
-declare function MultiValueRemove(props: MultiValueRemoveProps<SelectValue>): JSX.Element;
+import { type InputSelectValue } from '.';
+declare function DropdownIndicator(props: DropdownIndicatorProps<InputSelectValue>): JSX.Element;
+declare function ClearIndicator(props: ClearIndicatorProps<InputSelectValue>): JSX.Element;
+declare function MultiValueContainer(props: MultiValueGenericProps<MultiValueGenericProps<InputSelectValue, boolean, GroupBase<InputSelectValue>>>): JSX.Element;
+declare function MultiValueLabel(props: MultiValueGenericProps<MultiValueGenericProps<InputSelectValue, boolean, GroupBase<InputSelectValue>>>): string;
+declare function MultiValueRemove(props: MultiValueRemoveProps<InputSelectValue>): JSX.Element;
 declare const selectComponentOverrides: {
     DropdownIndicator: typeof DropdownIndicator;
     IndicatorSeparator: () => null;

package/dist/{src/ui → ui}/forms/InputSelect/styles.d.ts

@@ -1,4 +1,4 @@
 import { type InputFeedbackProps } from '../../forms/InputFeedback';
 import { type StylesConfig } from 'react-select';
-import { type SelectValue } from '.';
-export declare const getSelectStyles: (feedbackVariant?: InputFeedbackProps['variant']) => StylesConfig<SelectValue>;
+import { type InputSelectValue } from '.';
+export declare const getSelectStyles: (feedbackVariant?: InputFeedbackProps['variant']) => StylesConfig<InputSelectValue>;

package/dist/{src/ui → ui}/forms/InputSelect/utils.d.ts

@@ -1,20 +1,20 @@
-import { type GroupedSelectValues, type PossibleSelectValue, type SelectValue } from './InputSelect';
+import { type GroupedSelectValues, type InputSelectValue, type PossibleSelectValue } from './InputSelect';
 /**
  * Helper function to understand and refine type of a single selected value
  * @param selectedValue possible value returned from select component
  * @returns true if selected value is single, from this point TypeScript will treat this as `SelectValue` type
  */
-export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue;
+export declare function isSingleValueSelected(selectedValue: PossibleSelectValue): selectedValue is InputSelectValue;
 /**
  * Helper function to understand and refine type of a set of selected values
  * @param selectedValue possible value returned from select component
  * @returns true if selected value is an array of selected values, from this point TypeScript will treat this as `SelectValue[]` type
  */
-export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is SelectValue[];
+export declare function isMultiValueSelected(selectedValue: PossibleSelectValue): selectedValue is InputSelectValue[];
 /**
  * Type-guard to check if prop `initialValues` is a GroupedSelectValues or SelectValue
  */
-export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | SelectValue[]): initialValues is GroupedSelectValues;
+export declare function isGroupedSelectValues(initialValues?: GroupedSelectValues | InputSelectValue[]): initialValues is GroupedSelectValues;
 /**
  * Helper function to extract only a specific property from the `SelectValue`
  * @param selectedValue possible value returned from select component
@@ -43,6 +43,6 @@ export declare function flatSelectValues(selectedValue: PossibleSelectValue, pat
  */
 export declare function getDefaultValueFromFlatten({ currentValue, initialValues, pathToValue }: {
     currentValue?: string | Array<string | number> | null;
-    initialValues?: GroupedSelectValues | SelectValue[];
+    initialValues?: GroupedSelectValues | InputSelectValue[];
     pathToValue?: string;
-}): SelectValue | SelectValue[] | undefined;
+}): InputSelectValue | InputSelectValue[] | undefined;

package/dist/{src/ui → ui}/forms/InputSimpleSelect/HookedInputSimpleSelect.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputSimpleSelectProps } from './InputSimpleSelect';
-interface Props extends InputSimpleSelectProps {
+export interface HookedInputSimpleSelectProps extends InputSimpleSelectProps {
     /**
      * field name to match hook-form state
      */
@@ -14,8 +14,7 @@ interface Props extends InputSimpleSelectProps {
  * `InputToggleListBox` component ready to be used with the `react-hook-form` context.
  * @see InputSimpleSelect
  */
-export declare function HookedInputSimpleSelect({ name, showValidation, ...props }: Props): JSX.Element;
+export declare function HookedInputSimpleSelect({ name, showValidation, ...props }: HookedInputSimpleSelectProps): JSX.Element;
 export declare namespace HookedInputSimpleSelect {
     var displayName: string;
 }
-export {};

package/dist/{src/ui → ui}/forms/InputSimpleSelect/InputSimpleSelect.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
-export interface InputSimpleSelectOption {
+interface InputSimpleSelectOption {
     value: string;
     label: string;
 }
@@ -10,3 +10,4 @@ export interface InputSimpleSelectProps extends InputWrapperBaseProps, Omit<Reac
     className?: string;
 }
 export declare const InputSimpleSelect: import("react").ForwardRefExoticComponent<InputSimpleSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/ui/forms/InputSimpleSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputSimpleSelect, type HookedInputSimpleSelectProps } from './HookedInputSimpleSelect';
+export { InputSimpleSelect, type InputSimpleSelectProps } from './InputSimpleSelect';

package/dist/{src/ui → ui}/forms/InputSpinner/HookedInputSpinner.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputSpinnerProps } from './InputSpinner';
-interface Props extends Omit<InputSpinnerProps, 'onChange' | 'defaultValues'> {
+export interface HookedInputSpinnerProps extends Omit<InputSpinnerProps, 'onChange' | 'defaultValues'> {
     /**
      * field name to match hook-form state
      */
@@ -10,8 +10,7 @@ interface Props extends Omit<InputSpinnerProps, 'onChange' | 'defaultValues'> {
  * `InputSpinner` component ready to be used with the `react-hook-form` context.
  * @see InputSpinner
  */
-export declare function HookedInputSpinner({ name, ...props }: Props): JSX.Element;
+export declare function HookedInputSpinner({ name, ...props }: HookedInputSpinnerProps): JSX.Element;
 export declare namespace HookedInputSpinner {
     var displayName: string;
 }
-export {};

package/dist/ui/forms/InputSpinner/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputSpinner, type HookedInputSpinnerProps } from './HookedInputSpinner';
+export { InputSpinner, type InputSpinnerProps } from './InputSpinner';

package/dist/{src/ui → ui}/forms/InputSwitch/HookedInputSwitch.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputSwitchProps } from './InputSwitch';
-interface Props extends InputSwitchProps {
+export interface HookedInputSwitchProps extends InputSwitchProps {
     /**
      * field name to match hook-form state
      */
@@ -14,8 +14,7 @@ interface Props extends InputSwitchProps {
  * `InputToggleBox` component ready to be used with the `react-hook-form` context.
  * @see InputSwitch
  */
-export declare function HookedInputSwitch({ name, showValidation, ...props }: Props): JSX.Element;
+export declare function HookedInputSwitch({ name, showValidation, ...props }: HookedInputSwitchProps): JSX.Element;
 export declare namespace HookedInputSwitch {
     var displayName: string;
 }
-export {};

package/dist/ui/forms/InputSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputSwitch, type HookedInputSwitchProps } from './HookedInputSwitch';
+export { InputSwitch, type InputSwitchProps } from './InputSwitch';

package/dist/{src/ui → ui}/forms/InputTextArea.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
-interface InputTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, InputWrapperBaseProps {
+export interface InputTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, InputWrapperBaseProps {
 }
 export declare const InputTextArea: import("react").ForwardRefExoticComponent<InputTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export {};

package/dist/{src/ui → ui}/forms/InputToggleButton/HookedInputToggleButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type InputToggleButtonProps } from './InputToggleButton';
-type Props = Omit<InputToggleButtonProps, 'value' | 'onChange'> & {
+export type HookedInputToggleButtonProps = Omit<InputToggleButtonProps, 'value' | 'onChange'> & {
     /**
      * field name to match hook-form state
      */
@@ -11,8 +11,7 @@ type Props = Omit<InputToggleButtonProps, 'value' | 'onChange'> & {
  * Stored value will be a string when used as `mode="single"` or an array of strings when `mode="multiple"`.
  * @see InputToggleButton
  */
-export declare function HookedInputToggleButton({ name, ...props }: Props): JSX.Element;
+export declare function HookedInputToggleButton({ name, ...props }: HookedInputToggleButtonProps): JSX.Element;
 export declare namespace HookedInputToggleButton {
     var displayName: string;
 }
-export {};

package/dist/{src/ui → ui}/forms/InputToggleButton/InputToggleButton.d.ts

@@ -2,7 +2,7 @@
 import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
 import { type Simplify } from 'type-fest';
 type ToggleButtonValue = string | boolean | number;
-export interface ToggleButtonOption {
+interface ToggleButtonOption {
     label: string;
     value: ToggleButtonValue;
     isDisabled?: boolean;

package/dist/ui/forms/InputToggleButton/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputToggleButton, type HookedInputToggleButtonProps } from './HookedInputToggleButton';
+export { InputToggleButton, type InputToggleButtonProps } from './InputToggleButton';

package/dist/{src/ui → ui}/forms/Label.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-interface Props extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     gap?: boolean;
 }
 /**
  * The Label component represents a caption for an item in a user interface.
  */
-export declare function Label({ gap, children, className, ...rest }: Props): JSX.Element;
+export declare function Label({ gap, children, className, ...rest }: LabelProps): JSX.Element;
 export declare namespace Label {
     var displayName: string;
 }
-export {};

package/dist/{src/ui → ui}/forms/Legend.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface Props extends React.HTMLAttributes<HTMLLegendElement> {
+export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
     gap?: boolean;
 }
 /**
@@ -7,8 +7,7 @@ interface Props extends React.HTMLAttributes<HTMLLegendElement> {
  *
  * It is styled exactly like the `<Label>` component.
  */
-export declare function Legend({ gap, children, className, ...rest }: Props): JSX.Element;
+export declare function Legend({ gap, children, className, ...rest }: LegendProps): JSX.Element;
 export declare namespace Legend {
     var displayName: string;
 }
-export {};