@hyphen/hyphen-components 7.3.2 → 7.3.3

package/dist/components/TextInputInset/TextInputInset.d.ts

@@ -1,102 +0,0 @@
-import { ChangeEvent, MouseEvent, KeyboardEvent, FocusEvent, ForwardRefExoticComponent, ReactNode, HTMLProps, InputHTMLAttributes } from 'react';
-import { ResponsiveProp } from '../../types';
-import { BoxProps } from '../Box/Box';
-export type TextInputInsetSize = 'md' | 'lg';
-export interface TextInputInsetProps {
-    /**
-     * The input's id attribute. Used to programmatically tie the input with its label.
-     */
-    id: string;
-    /**
-     * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
-     */
-    label: string;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The text value of the input. Required since our Input is a controlled component.
-     */
-    value: InputHTMLAttributes<HTMLInputElement>['value'];
-    /**
-     * Automatically focus the input when the page is loaded.
-     */
-    autoFocus?: boolean;
-    /**
-     * Custom class to be added to standard input classes.
-     */
-    className?: string;
-    /**
-     * Mark the input field as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: ReactNode;
-    /**
-     * Additional clarifying text to help describe the input
-     */
-    helpText?: ReactNode;
-    /**
-     * Props passed directly to the input element of the component
-     */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
-    /**
-     * The input's disabled attribute
-     */
-    isDisabled?: boolean;
-    /**
-     * The required and aria-required attributes on the input
-     */
-    isRequired?: boolean;
-    /**
-     * The input's 'maxlength' attribute.
-     * NOTE: initializing the input with a value longer than the desired maxlength will not trim this value.
-     */
-    maxLength?: number;
-    /**
-     * The input's 'name' attribute.
-     */
-    name?: string;
-    /**
-     * Callback function to call on blur event.
-     */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function to call when input us cleared. When this is passed,
-     * the input will display an icon on the right side, for triggering this callback.
-     */
-    onClear?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
-    /**
-     * Callback function to call on focus event.
-     */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * The input placeholder attribute.
-     */
-    placeholder?: string;
-    /**
-     * An input helper rendered before the input field value
-     */
-    prefix?: ReactNode;
-    /**
-     * Visual indicator that the field is required, that gets appended to the label
-     */
-    requiredIndicator?: ReactNode;
-    /**
-     * The size of the text input.
-     */
-    size?: TextInputInsetSize | ResponsiveProp<TextInputInsetSize>;
-    /**
-     * An input helper rendered after the input field value
-     */
-    suffix?: ReactNode;
-    /**
-     * The input 'type' value. Defaults to type 'text'.
-     */
-    type?: InputHTMLAttributes<HTMLInputElement>['type'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps>;

package/dist/components/TextInputInset/TextInputInset.stories.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { TextInputInset } from './TextInputInset';
-import type { Meta } from '@storybook/react-vite';
-declare const meta: Meta<typeof TextInputInset>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const ValidationError: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const Clearable: () => React.JSX.Element;
-export declare const PrefixAndSuffix: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;

package/dist/components/TextareaInput/TextareaInput.d.ts

@@ -1,97 +0,0 @@
-import { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
-import { ResponsiveProp } from '../../types';
-import { BoxProps } from '../Box/Box';
-export type TextareaInputSize = 'sm' | 'md' | 'lg';
-export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
-    /**
-     * The input's id attribute. Used to programmatically tie the input with its label.
-     */
-    id: string;
-    /**
-     * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
-     */
-    label: string;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The text value of the input. Required since our Input is a controlled component.
-     */
-    value: string;
-    /**
-     * The input's 'autocomplete' attribute.
-     */
-    autoComplete?: boolean | string;
-    /**
-     * Automatically focus the input when the page is loaded.
-     */
-    autoFocus?: boolean;
-    /**
-     * Custom class to be added to standard input classes.
-     */
-    className?: string;
-    /**
-     * Mark the input field as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: ReactNode;
-    /**
-     * Additional clarifying text to help describe the input
-     */
-    helpText?: ReactNode;
-    /**
-     * Visually hide the label.
-     */
-    hideLabel?: boolean;
-    /**
-     * The input's disabled attribute
-     */
-    isDisabled?: boolean;
-    /**
-     * The required and aria-required attributes on the input
-     */
-    isRequired?: boolean;
-    /**
-     * The input's 'maxlength' attribute.
-     * NOTE: initializing the input with a value longer than the desired maxlength will not trim this value.
-     */
-    maxLength?: number;
-    /**
-     * The input's 'name' attribute.
-     */
-    name?: string;
-    /**
-     * Callback function to call on blur event.
-     */
-    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Callback function to call on focus event.
-     */
-    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The input placeholder attribute.
-     */
-    placeholder?: string;
-    /**
-     * Visual indicator that the field is required, that gets appended to the label
-     */
-    requiredIndicator?: ReactNode;
-    /**
-     * Textarea resize behavior
-     */
-    resize?: 'vertical' | 'horizontal' | 'none' | 'both';
-    /**
-     * number of visible text lines for the control.
-     */
-    rows?: number;
-    /**
-     * The size of the text input.
-     */
-    size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const TextareaInput: FC<TextareaInputProps>;

package/dist/components/TextareaInput/TextareaInput.stories.d.ts

@@ -1,23 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-import { TextareaInput } from './TextareaInput';
-declare const meta: Meta<typeof TextareaInput>;
-export default meta;
-export declare const Basic: () => React.JSX.Element;
-export declare const Default: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const CustomRequiredIndicator: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const Resize: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const Placeholder: () => React.JSX.Element;
-export declare const Autofocus: () => React.JSX.Element;
-export declare const HiddenLabel: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const DisabledWithValue: () => React.JSX.Element;
-export declare const DisabledWithPlaceholder: () => React.JSX.Element;
-export declare const MaxLength: () => React.JSX.Element;
-export declare const RequiredWithError: () => React.JSX.Element;
-export declare const RequiredWithErrorAndValidationMessage: () => React.JSX.Element;
-export declare const NotRequiredWithErrorAndValidationMessage: () => React.JSX.Element;
-export declare const ErrorWithHiddenLabel: () => React.JSX.Element;

package/dist/components/TextareaInputInset/TextareaInputInset.d.ts

@@ -1,105 +0,0 @@
-import { ChangeEvent, FocusEvent, ForwardRefExoticComponent, ReactNode, HTMLProps, InputHTMLAttributes } from 'react';
-import { ResponsiveProp } from '../../types';
-import { BoxProps } from '../Box/Box';
-export type TextareaInputInsetSize = 'md' | 'lg';
-export interface TextareaInputInsetProps {
-    /**
-     * The input's id attribute. Used to programmatically tie the input with its label.
-     */
-    id: string;
-    /**
-     * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
-     */
-    label: string;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The text value of the input. Required since our Input is a controlled component.
-     */
-    value: InputHTMLAttributes<HTMLInputElement>['value'];
-    /**
-     * Automatically focus the input when the page is loaded.
-     */
-    autoFocus?: boolean;
-    /**
-     * Custom class to be added to standard input classes.
-     */
-    className?: string;
-    /**
-     * Mark the input field as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: ReactNode;
-    /**
-     * Additional clarifying text to help describe the input
-     */
-    helpText?: ReactNode;
-    /**
-     * Props passed directly to the input element of the component
-     */
-    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
-    /**
-     * The input's disabled attribute
-     */
-    isDisabled?: boolean;
-    /**
-     * The required and aria-required attributes on the input
-     */
-    isRequired?: boolean;
-    /**
-     * The input's 'maxlength' attribute.
-     * NOTE: initializing the input with a value longer than the desired maxlength will not trim this value.
-     */
-    maxLength?: number;
-    /**
-     * The input's 'name' attribute.
-     */
-    name?: string;
-    /**
-     * Callback function to call on blur event.
-     */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function to call on focus event.
-     */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * The input placeholder attribute.
-     */
-    placeholder?: string;
-    /**
-     * An input helper rendered before the input field value
-     */
-    prefix?: ReactNode;
-    /**
-     * Visual indicator that the field is required, that gets appended to the label
-     */
-    requiredIndicator?: ReactNode;
-    /**
-     * Textarea resize behavior
-     */
-    resize?: 'vertical' | 'horizontal' | 'none' | 'both';
-    /**
-     * number of visible text lines for the control.
-     */
-    rows?: number;
-    /**
-     * The size of the text input.
-     */
-    size?: TextareaInputInsetSize | ResponsiveProp<TextareaInputInsetSize>;
-    /**
-     * An input helper rendered after the input field value
-     */
-    suffix?: ReactNode;
-    /**
-     * The input 'type' value. Defaults to type 'text'.
-     */
-    type?: InputHTMLAttributes<HTMLInputElement>['type'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetProps>;

package/dist/components/TextareaInputInset/TextareaInputInset.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-import { TextareaInputInset } from './TextareaInputInset';
-declare const meta: Meta<typeof TextareaInputInset>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const ValidationError: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const Resize: () => React.JSX.Element;

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-export type Theme = 'dark' | 'light' | 'system';
-type ThemeProviderProps = {
-    children: React.ReactNode;
-    defaultTheme?: Theme;
-    storageKey?: string;
-};
-type ThemeProviderState = {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
-    isDarkMode?: boolean;
-};
-export declare const ThemeProviderContext: React.Context<ThemeProviderState>;
-export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): React.JSX.Element;
-export {};

package/dist/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from './ThemeProvider';
-import type { Meta } from '@storybook/react-vite';
-declare const meta: Meta<typeof ThemeProvider>;
-export default meta;
-export declare const BasicUsage: () => React.JSX.Element;

package/dist/components/TimePicker/TimePicker.d.ts

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { SelectInputProps } from '../SelectInput/SelectInput';
-export type TimePickerProps = Omit<SelectInputProps, 'options'> & {
-    /**
-     * Options to govern the display of the option labels in the select.
-     * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    dateDisplayOptions?: Intl.DateTimeFormatOptions;
-    /**
-     * End hour and minute
-     */
-    endTime?: {
-        hour: number;
-        minute: number;
-    };
-    /**
-     * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
-     */
-    interval?: number;
-    /**
-     * Locale(s) to be passed down in order to format the label values in the select.
-     * This corresponds to the first argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    locales?: string | string[];
-    /**
-     * Start hour and minute
-     */
-    startTime?: {
-        hour: number;
-        minute: number;
-    };
-};
-export declare const TimePicker: FC<TimePickerProps>;

package/dist/components/TimePicker/TimePicker.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-import { TimePicker } from './TimePicker';
-declare const meta: Meta<typeof TimePicker>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const WithASpecificInterval: () => React.JSX.Element;
-export declare const WithMinAndMaxTimes: () => React.JSX.Element;
-export declare const WithCustomDateDisplay: () => React.JSX.Element;
-export declare const WithOpenMenu: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;

package/dist/components/TimePickerNative/TimePickerNative.d.ts

@@ -1,39 +0,0 @@
-import { FC } from 'react';
-import { SelectInputNativeProps } from '../SelectInputNative/SelectInputNative';
-export interface TimePickerNativeProps extends Omit<SelectInputNativeProps, 'options'> {
-    /**
-     * Options to govern the display of the option labels in the select.
-     * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    dateDisplayOptions?: Intl.DateTimeFormatOptions;
-    /**
-     * End hour and minute
-     */
-    endTime?: {
-        hour: number;
-        minute: number;
-    };
-    /**
-     * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
-     */
-    interval?: number;
-    /**
-     * Locale(s) to be passed down in order to format the label values in the select.
-     * This corresponds to the first argument of JS `toLocaleTimeString`.
-     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-     */
-    locales?: string | string[];
-    /**
-     * Start hour and minute
-     */
-    startTime?: {
-        hour: number;
-        minute: number;
-    };
-    /**
-     *  Should be ISO timestamp as returned by `onChange`, and matching value of option object.
-     */
-    value: SelectInputNativeProps['value'];
-}
-export declare const TimePickerNative: FC<TimePickerNativeProps>;

package/dist/components/TimePickerNative/TimePickerNative.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-import { TimePickerNative } from './TimePickerNative';
-declare const meta: Meta<typeof TimePickerNative>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const WithASpecificInterval: () => React.JSX.Element;
-export declare const WithMinAndMaxTimes: () => React.JSX.Element;
-export declare const WithCustomDateDisplay: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;

package/dist/components/Toast/Toast.store.d.ts

@@ -1,36 +0,0 @@
-import { Toast, ExtendedToastOptions } from './Toast.types';
-export declare enum ToastStoreActionType {
-    ADD_TOAST = "TOAST/ADD_TOAST",
-    UPDATE_TOAST = "TOAST/UPDATE_TOAST",
-    UPSERT_TOAST = "TOAST/UPSERT_TOAST",
-    DISMISS_TOAST = "TOAST/DISMISS_TOAST",
-    REMOVE_TOAST = "TOAST/REMOVE_TOAST",
-    START_PAUSE = "TOAST/START_PAUSE",
-    END_PAUSE = "TOAST/END_PAUSE"
-}
-type GenericAction<TActionType extends PropertyKey, TPayload extends Record<string, unknown>> = {
-    type: TActionType;
-    payload: TPayload;
-};
-type ToastStoreAction = GenericAction<ToastStoreActionType.ADD_TOAST, {
-    toast: Toast;
-}> | GenericAction<ToastStoreActionType.UPSERT_TOAST, {
-    toast: Toast;
-}> | GenericAction<ToastStoreActionType.UPDATE_TOAST, {
-    toast: Partial<Toast>;
-}> | GenericAction<ToastStoreActionType.DISMISS_TOAST, {
-    toastId?: string;
-}> | GenericAction<ToastStoreActionType.REMOVE_TOAST, {
-    toastId?: string;
-}> | GenericAction<ToastStoreActionType.START_PAUSE, {
-    time: number;
-}> | GenericAction<ToastStoreActionType.END_PAUSE, {
-    time: number;
-}>;
-interface ToastState {
-    toasts: Toast[];
-    pausedAt: number | undefined;
-}
-export declare const dispatch: (action: ToastStoreAction) => void;
-export declare const useToastStore: (toastOptions?: ExtendedToastOptions) => ToastState;
-export {};

package/dist/components/Toast/Toast.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-import { ToastContainer } from './';
-declare const meta: Meta<typeof ToastContainer>;
-export default meta;
-export declare const Example: () => React.JSX.Element;
-export declare const Column: () => React.JSX.Element;
-export declare const Position: () => React.JSX.Element;
-export declare const Duration: () => React.JSX.Element;
-export declare const NotDismissible: () => React.JSX.Element;
-export declare const ProgrammaticDismiss: () => React.JSX.Element;
-export declare const Compact: () => React.JSX.Element;
-export declare const BasicTypes: () => React.JSX.Element;
-export declare const AdvancedTypes: () => React.JSX.Element;

package/dist/components/Toast/Toast.types.d.ts

@@ -1,75 +0,0 @@
-import React from 'react';
-import { ValueOrFunction } from '../../types';
-export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface Toast {
-    /**
-     * Type of toast to create.
-     */
-    type: ToastType;
-    /**
-     * Unique id for the toast.
-     */
-    id: string;
-    /**
-     * Toast message
-     */
-    message: ValueOrFunction<React.ReactNode, Toast>;
-    /**
-     * Determine of toast layout is compact or default.
-     */
-    isCompact?: boolean;
-    /**
-     * Custom duration for toast.
-     */
-    duration?: number;
-    /**
-     * Amount of time the toast timeout has been paused for.
-     * When the toast timeout is paused, its auto-dismissal will be delayed.
-     */
-    pauseDuration: number;
-    /**
-     * Custom toast position, use as needed to override global position from ToastContainer.
-     */
-    position?: ToastPosition;
-    /**
-     * Accessibility options
-     */
-    ariaProps: {
-        role: 'status' | 'alert';
-        'aria-live': 'assertive' | 'off' | 'polite';
-    };
-    /**
-     * Whether the toast can be dismissed (if true, the toast will include a close button)
-     */
-    canDismiss?: boolean;
-    /**
-     * Custom styles.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Epoch timestamp
-     */
-    createdAt: number;
-    /**
-     * Whether the toast is visible at the current time.
-     * Used in order to display a proper fade-out animation before the element is fully removed from the DOM.
-     */
-    visible: boolean;
-    /**
-     * Height of element (calculated with getBoundingClientRect)
-     */
-    height?: number;
-}
-export type ToastOptions = Partial<Pick<Toast, 'id' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'canDismiss' | 'isCompact'>>;
-/**
- * Extends toast options so that you can include options for each type of toast in the options.
- * e.g: { duration: 1000, success: { duration: 2000 } }
- */
-export type ExtendedToastOptions = ToastOptions & {
-    [key in ToastType]?: ToastOptions;
-};

package/dist/components/Toast/ToastContainer.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Toast, ToastPosition, ExtendedToastOptions } from './Toast.types';
-export declare const createRectRef: (onRect: (rect: DOMRect) => void) => (el: HTMLElement | null) => void;
-export interface ToastContainerProps {
-    /**
-     * Render function for each individual toast.
-     * This can be used to render custom toasts, although we recommend using the standard version,
-     * unless absolutely necessary.
-     */
-    children?: (t: Toast) => JSX.Element;
-    /**
-     * Style object for the toast container if needed.
-     */
-    containerStyle?: React.CSSProperties;
-    /**
-     * Custom classname for toast container if needed.
-     */
-    containerClassName?: string;
-    /**
-     * The vertical gap between each toast notification when multiple toasts are on screen (in pixels).
-     */
-    gutter?: number;
-    /**
-     * Global position for all toasts in container.
-     * NOTE: This can be overwritten by the position property of each individual toast.
-     */
-    position?: ToastPosition;
-    /**
-     * Display toasts in reverse order.
-     * NOTE: Reverse order in this case means that older toasts remain close to the position origin.
-     * and newer toasts appear further away from the origin.
-     */
-    reverseOrder?: boolean;
-    /**
-     * Global options for each toast. Can be overwritten for each individual toast as needed.
-     */
-    toastOptions?: ExtendedToastOptions;
-    /**
-     * Props spread into main container.
-     */
-    [x: string]: unknown;
-}
-export declare const ToastContainer: React.FC<ToastContainerProps>;