@hyphen/hyphen-components 2.9.0 → 2.9.2

package/dist/components/Table/TableHead/TableHead.d.ts

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { Column, EventWithColumnKey } from '../../../types';
+export interface TableHeadProps {
+    /**
+     * The table columns to be rendered
+     */
+    columns: Column[];
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Custom class to be applied to the `<thead>` element.
+     */
+    className?: string;
+    /**
+     * Whether the table has borders or not.
+     */
+    isBorderless?: boolean;
+    /**
+     * Whether the table rows have smaller padding
+     */
+    isCompact?: boolean;
+    /**
+     * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * Callback function to fire on sorting one of the table headers.
+     */
+    onSort?: (event: EventWithColumnKey) => void;
+    /**
+     * The key of the sorted column and its sort direction.
+     */
+    sortedColumn?: {
+        dataKey: string | undefined;
+        sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+    };
+    /**
+     * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+     * by passing `truncateOverflow` value on a specific Column
+     */
+    truncateOverflow?: boolean;
+}
+export declare const TableHead: FC<TableHeadProps>;

package/dist/components/Table/TableHead/TableHeaderCell/TableHeaderCell.d.ts

@@ -0,0 +1,65 @@
+import { FC, Key } from 'react';
+import { Column, EventWithColumnKey } from '../../../../types';
+export interface TableHeaderCellProps {
+    /**
+     * Title to display for the column.
+     */
+    column: Column;
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Custom class to apply to the `<th>` element.
+     */
+    className?: string;
+    /**
+     * Key of corresponding data value in the table.
+     */
+    dataKey?: Key;
+    /**
+     * Remove borders around th elements.
+     */
+    isBorderless?: boolean;
+    /**
+     * Determines if table header cells should render as compact (less padding);
+     */
+    isCompact?: boolean;
+    /**
+     * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * Boolean to mark if a column is sortable. This will show the sorting icons. Use
+     * in conjunction with the `sortDirection` prop to determine which icon is shown.
+     */
+    isSortable?: boolean;
+    /**
+     * Callback function to execute when a sortable column's header is clicked.
+     * Column can be sorted without providing an onSort method, it means that the arrows
+     * will not be clickable, but they will still represent the sort state
+     * of a column as determined by the `sortDirection` prop.
+     */
+    onSort?: (event: EventWithColumnKey) => void;
+    /**
+     * The key of the sorted column and its sort direction.
+     */
+    sortedColumn?: {
+        dataKey: string | undefined;
+        sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+    };
+    /**
+     * Will stick to either the left or right side of a table during horizontal scroll.
+     */
+    sticky?: 'left' | 'right';
+    /**
+     * Whether the text should be cut off with ellipsis if it exceeds the width of the column.
+     */
+    truncateOverflow?: boolean;
+    /**
+     * Width of the column, if using the `useFixedWidthColumns` prop is set to true.
+     */
+    width?: number;
+}
+export declare const TableHeaderCell: FC<TableHeaderCellProps>;

package/dist/components/Table/common/TableRow/TableRow.d.ts

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import { Column, EventWithColumnKey, Row } from '../../../../types';
+export interface TableRowProps {
+    /**
+     * The table columns to be rendered
+     */
+    columns: Column[];
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Custom class to be applied to `<tr>` element.
+     */
+    className?: string;
+    /**
+     * A global placeholder for empty cells. Note: can be overwriten by
+     * the same attribute passed for an individual column config object.
+     */
+    emptyCellPlaceholder?: string | number | undefined;
+    /**
+     * Whether the table has borders or not.
+     */
+    isBorderless?: boolean;
+    /**
+     * Whether the table rows have smaller padding
+     */
+    isCompact?: boolean;
+    /**
+     * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * Determine whether row is hoverable
+     */
+    isHoverable?: boolean;
+    /**
+     * Whether the row is inside the table head (thead).
+     */
+    isTableHead?: boolean;
+    /**
+     * Callback function to fire on sorting one of the table headers.
+     */
+    onSort?: (event: EventWithColumnKey) => void;
+    /**
+     * The specific row to be rendered.
+     */
+    row?: Row;
+    /**
+     * The unique key to identify a React node for each row.
+     */
+    rowIndex?: number;
+    /**
+     * The key of the sorted column and its sort direction.
+     */
+    sortedColumn?: {
+        dataKey: string | undefined;
+        sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+    };
+    /**
+     * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+     * by passing `truncateOverflow` value on a specific Column
+     */
+    truncateOverflow?: boolean;
+}
+export declare const TableRow: FC<TableRowProps>;

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,106 @@
+import { BoxProps } from '../Box/Box';
+import { ChangeEvent, FocusEvent, ForwardRefExoticComponent, HTMLProps, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { ResponsiveProp } from '../../types';
+export type TextInputSizeType = 'sm' | 'md' | 'lg';
+export interface TextInputProps {
+    /**
+     * 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;
+    /**
+     * Visually hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * 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?: TextInputSizeType | ResponsiveProp<TextInputSizeType>;
+    /**
+     * 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 TextInput: ForwardRefExoticComponent<TextInputProps>;

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

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { TextInput } from './TextInput';
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+export declare const Basic: () => React.JSX.Element;
+export declare const Examples: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const CustomRequiredIndicator: () => React.JSX.Element;
+export declare const WithHelpText: () => 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 PrefixAndSuffix: () => React.JSX.Element;
+export declare const Clearable: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const MaxLength: () => React.JSX.Element;
+export declare const ValidationError: () => React.JSX.Element;

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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextInputInset } from './TextInputInset';
+import type { Meta } from '@storybook/react';
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,23 @@
+import type { Meta } from '@storybook/react';
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+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

@@ -0,0 +1,14 @@
+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;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): React.JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export {};

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

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