@hyphen/hyphen-components 7.3.1 → 7.3.3

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

@@ -1,9 +0,0 @@
-import { Heading } from './Heading';
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: Meta<typeof Heading>;
-export default meta;
-export declare const Levels: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const ResponsiveSizes: () => React.JSX.Element;
-export declare const Colors: () => React.JSX.Element;

package/dist/components/HelpText/HelpText.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface HelpTextProps {
-    /**
-     * Contents of the help text.
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional class names to add.
-     */
-    className?: string;
-}
-export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Icon/Icon.d.ts

@@ -1,22 +0,0 @@
-import { FontColor, FontSize, IconName, ResponsiveProp } from '../../types';
-import { FC } from 'react';
-export interface IconProps {
-    className?: string;
-    /**
-     * A color token identifier to use for the text color.
-     */
-    color?: FontColor | ResponsiveProp<FontColor>;
-    /**
-     * A [font size token](/?path=/docs/design-tokens-design-tokens--page#font-size) identifier
-     */
-    size?: FontSize | ResponsiveProp<FontSize>;
-    /**
-     * Name of the icon
-     */
-    name: IconName;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const Icon: FC<IconProps>;

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

@@ -1,10 +0,0 @@
-import { Icon } from './Icon';
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: Meta<typeof Icon>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const Colors: () => React.JSX.Element;
-export declare const UnknownIcon: () => React.JSX.Element;
-export declare const AvailableIcons: () => React.JSX.Element;

package/dist/components/InputValidationMessage/InputValidationMessage.d.ts

@@ -1,9 +0,0 @@
-import { FC, ReactNode } from 'react';
-/**
- * Used by form inputs such as TextInput, to display a validation message for an invalid input.
- */
-export interface InputValidationMessageProps {
-    children: ReactNode;
-    size?: 'xs' | 'sm' | 'md';
-}
-export declare const InputValidationMessage: FC<InputValidationMessageProps>;

package/dist/components/Modal/Modal.d.ts

@@ -1,83 +0,0 @@
-import React, { ReactNode, RefObject } from 'react';
-import { BackgroundColor, CssOverflowValue } from '../../types';
-import { BoxProps } from '../Box/Box';
-import { ModalFooter, ModalHeader, ModalBody } from './components';
-export interface ModalProps {
-    /**
-     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
-     */
-    allowPinchZoom?: boolean;
-    /**
-     * Each modal needs to be properly labeled to provide context for users with
-     * assistive technology such as screen readers. If a modal is announced to
-     * the user without a label, it can be confusing and difficult to navigate.
-     */
-    ariaLabel?: string;
-    /**
-     * The id of the element that should be used as the Modal's label by assistive
-     * technologies like screen readers. Usually the id is set on the `Modal.Header`
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Contents of the dialog.
-     */
-    children?: ReactNode;
-    /**
-     * Additional ClassNames to add to dialog.
-     */
-    className?: string;
-    /**
-     * The ref of the container where the dialog will be inserted into the DOM.
-     * By default, Modals are inserted in the document.body, but if need be they can
-     * be scoped as necessary.
-     */
-    containerRef?: React.RefObject<Node>;
-    /**
-     * At mobile viewport widths, the modal will take up the fullscreen
-     */
-    fullScreenMobile?: boolean;
-    /**
-     * Background color for the modal content using design tokens
-     */
-    background?: BackgroundColor;
-    /**
-     * By default the first focusable element will receive focus when the dialog
-     * opens but you can provide a ref to focus instead.
-     *
-     * @see Docs https://reach.tech/dialog#dialog-initialfocusref
-     */
-    initialFocusRef?: RefObject<HTMLDivElement>;
-    /**
-     * Whether the modal is visible or not
-     */
-    isOpen: boolean;
-    /**
-     * Max width for modal content. Uses the same maxWidth prop as the `Box` component,
-     * and as such can be responsive as well.
-     */
-    maxWidth?: BoxProps['maxWidth'];
-    /**
-     * Function that is called whenever the user hits "Escape" key or clicks outside the modal.
-     */
-    onDismiss: (event?: React.SyntheticEvent) => void;
-    /**
-     * The css overflow behavior of the Modal
-     */
-    overflow?: CssOverflowValue;
-    /**
-     * Inline styles for the modal container
-     */
-    style?: React.CSSProperties;
-    /**
-     * Allows spread props
-     */
-    [x: string]: any;
-}
-export declare const ModalBaseComponent: React.FC<ModalProps>;
-export interface ModalStatic {
-    Body: typeof ModalBody;
-    Header: typeof ModalHeader;
-    Footer: typeof ModalFooter;
-}
-export type ModalWithStaticComponents = typeof ModalBaseComponent & ModalStatic;
-export declare const Modal: ModalWithStaticComponents;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Modal } from './Modal';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta<typeof Modal>;
-export default meta;
-type Story = StoryObj<typeof Modal>;
-export declare const BasicUsage: () => React.JSX.Element;
-export declare const OpenModal: Story;
-export declare const BodyAndFooter: () => React.JSX.Element;
-export declare const CloseButton: () => React.JSX.Element;
-export declare const WithoutHeader: () => React.JSX.Element;
-export declare const FullscreenMobile: () => React.JSX.Element;
-export declare const MaxWidth: () => React.JSX.Element;

package/dist/components/Modal/components/ModalBody/ModalBody.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { BoxProps } from '../../../Box/Box';
-export type ModalBodyProps = BoxProps;
-export declare const ModalBody: FC<ModalBodyProps>;

package/dist/components/Modal/components/ModalFooter/ModalFooter.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { BoxProps } from '../../../Box/Box';
-export type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
-export declare const ModalFooter: FC<ModalFooterProps>;

package/dist/components/Modal/components/ModalHeader/ModalHeader.d.ts

@@ -1,21 +0,0 @@
-import React, { FC } from 'react';
-import { BoxProps } from '../../../Box/Box';
-export type ModalHeaderProps = Omit<BoxProps, 'as' | 'radius' | 'justifyContent'> & {
-    /**
-     * id of the element containing the title, used by the Modal `aria-labelledby` prop
-     */
-    id: string;
-    /**
-     * Modal's header title
-     */
-    title?: string;
-    /**
-     * Additional content to render in the modal header, displayed alongside the title.
-     */
-    children?: React.ReactNode;
-    /**
-     * If defined, will render a 'x' close button on the right side of the ModalHeader
-     */
-    onDismiss?: (event?: React.SyntheticEvent) => void;
-};
-export declare const ModalHeader: FC<ModalHeaderProps>;

package/dist/components/Modal/components/index.d.ts

@@ -1,4 +0,0 @@
-import { ModalFooter } from './ModalFooter/ModalFooter';
-import { ModalHeader } from './ModalHeader/ModalHeader';
-import { ModalBody } from './ModalBody/ModalBody';
-export { ModalFooter, ModalHeader, ModalBody };

package/dist/components/Pagination/Pagination.d.ts

@@ -1,51 +0,0 @@
-import { FC, ReactNode } from 'react';
-export interface PaginationProps {
-    /**
-     * The current page number being displayed.
-     */
-    activePage: number;
-    /**
-     * The number of list items contained in a page.
-     */
-    itemsPerPage: number;
-    /**
-     * Callback fired when the user clicks a page or prev/next button.
-     */
-    onChange: (pageNumber: number) => void;
-    /**
-     * The total number of items in the list
-     */
-    totalItemsCount: number;
-    /**
-     * Boolean to determine if individual page buttons (or dropdown are visible). Takes a `ResponsiveProp`
-     * if you want to render it differently at different breakpoints
-     */
-    arePagesVisible?: boolean;
-    /**
-     * Custom class to pass down to the pagination container.
-     */
-    className?: string;
-    /**
-     * Pass true to render a version of Pagination with smaller buttons.
-     */
-    isCompact?: boolean;
-    /**
-     * Boolean to determine if the list totals (and current range) are visible.
-     * NOTE: these are hidden on mobile regardless of this prop value.
-     */
-    isTotalVisible?: boolean;
-    /**
-     * The text (or react node) to pass to the NEXT page button.
-     */
-    nextPageText?: string | ReactNode;
-    /**
-     * Number of pages shown in paginator, not including navigation blocks (prev, next), as well as first, last pages.
-     * In other words the number of pages displayed 'in the middle', that the user can navigate to.
-     */
-    numberOfPagesDisplayed?: number;
-    /**
-     * The text (or react node) to pass to the PREVIOUS page button.
-     */
-    prevPageText?: string | ReactNode;
-}
-export declare const Pagination: FC<PaginationProps>;

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

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

package/dist/components/Pagination/Pagination.utilities.d.ts

@@ -1,10 +0,0 @@
-export interface Page {
-    isPage: boolean;
-    pageNumber: number;
-}
-export declare const generatePages: (pageTotal: number, activePage: number, numberOfPagesDisplayed: number) => Page[];
-export declare const generatePageTotal: (totalItemsCount: number, itemsPerPage: number) => number;
-export declare const generateActiveListRange: (activePage: number, totalItemsCount: number, itemsPerPage: number) => {
-    first: number;
-    last: number;
-};

package/dist/components/Popover/Popover.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
-declare const PopoverPortal: React.FC<PopoverPrimitive.PopoverPortalProps>;
-declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverAnchor, PopoverPortal, PopoverContent, };

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

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

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,75 +0,0 @@
-import React, { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
-import { RadioInputProps } from './RadioInput/RadioInput';
-export interface RadioGroupProps {
-    /**
-     * Radio group name.
-     */
-    name: string;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Options for radio group.
-     */
-    options: {
-        id: string;
-        value: string;
-        label: ReactNode;
-        disabled?: boolean | null;
-    }[];
-    /**
-     * Additional classes to add.
-     */
-    className?: string;
-    /**
-     * Description to be displayed below the title, and above the RadioGroup.
-     */
-    description?: ReactNode;
-    /**
-     * Whether the radios should be aligned in a row or in a column
-     */
-    direction?: 'row' | 'column';
-    /**
-     * Mark the radio group as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: ReactNode;
-    /**
-     * If the radio group should be disabled and not focusable.
-     */
-    isDisabled?: boolean;
-    /**
-     * If the radio group is required or not
-     */
-    isRequired?: boolean;
-    /**
-     * Callback function to call on blur event.
-     */
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function to call on focus event.
-     */
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Visual indicator that the field is required, that gets appended to the label
-     */
-    requiredIndicator?: React.ReactNode;
-    /**
-     * Size of the radio icons in the group.
-     */
-    size?: RadioInputProps['size'];
-    /**
-     * Title to be displayed above the RadioGroup.
-     */
-    title?: ReactNode;
-    /**
-     * The value of selected radio input.
-     */
-    value?: string;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const RadioGroup: FC<RadioGroupProps>;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { RadioGroup } from './RadioGroup';
-import type { Meta } from '@storybook/react-vite';
-declare const meta: Meta<typeof RadioGroup>;
-export default meta;
-export declare const Default: () => React.JSX.Element;
-export declare const Title: () => React.JSX.Element;
-export declare const TitleAndDescription: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const CustomRequiredIndicator: () => React.JSX.Element;
-export declare const PreSelectedOption: () => React.JSX.Element;
-export declare const DisabledOption: () => React.JSX.Element;
-export declare const DisabledGroup: () => React.JSX.Element;
-export declare const Error: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const HorizontallyAligned: () => React.JSX.Element;

package/dist/components/RadioGroup/RadioInput/RadioInput.d.ts

@@ -1,57 +0,0 @@
-import React, { ChangeEvent, FocusEvent, ReactNode } from 'react';
-import { ResponsiveProp } from '../../../types';
-type BaseSize = 'sm' | 'md' | 'lg';
-export type RadioSize = BaseSize | ResponsiveProp<BaseSize>;
-export interface RadioInputProps {
-    /**
-     * Radio input name.
-     */
-    name: string;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Options for radio group.
-     */
-    option: {
-        id: string;
-        value: string;
-        label: ReactNode;
-        disabled?: boolean | null;
-    };
-    /**
-     * Additional classes to add.
-     */
-    className?: string;
-    /**
-     * If the radio group should be disabled and not focusable.
-     */
-    isDisabled?: boolean;
-    /**
-     * If the radio input should be hidden to make way for a custom radio.
-     */
-    isHidden?: boolean;
-    /**
-     * The required and aria-required attributes
-     */
-    isRequired?: boolean;
-    /**
-     * If the radio group should be disabled and not focusable.
-     */
-    isSelected?: boolean;
-    /**
-     * 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 size of the radio icon.
-     */
-    size: RadioSize;
-}
-export declare const RadioInput: React.ForwardRefExoticComponent<RadioInputProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/RadioGroup/RadioInput/RadioInputIcon.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import { BoxProps } from '../../Box/Box';
-import { RadioInputProps } from './RadioInput';
-import { RadioGroupProps } from '../RadioGroup';
-export interface RadioIconProps extends BoxProps {
-    /**
-     * Custom className to be applied to root node of component.
-     */
-    className?: string;
-    /**
-     * Whether the input is in an error state. The icon will visually change accordingly.
-     */
-    error?: RadioGroupProps['error'];
-    /**
-     * Whether the radio is selected.
-     */
-    isSelected?: RadioInputProps['isSelected'];
-    /**
-     * If the input should be disabled and not focusable.
-     */
-    isDisabled?: RadioInputProps['isDisabled'];
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const RadioInputIcon: React.FC<RadioIconProps>;

package/dist/components/RangeInput/RangeInput.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { FC } from 'react';
-export interface InputRangeProps {
-    /**
-     * The input's id attribute.
-     */
-    id: string;
-    /**
-     * The value of the range.
-     */
-    value: number;
-    /**
-     * The maximum value of the range.
-     */
-    max: number;
-    /**
-     * Callback function to call on change event.
-     */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Custom class to be added to standard input classes.
-     */
-    className?: string;
-    /**
-     * If the input should be disabled and not focusable.
-     */
-    isDisabled?: boolean;
-}
-export declare const RangeInput: FC<InputRangeProps>;

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

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

package/dist/components/ResponsiveProvider/ResponsiveProvider.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export interface ResponsiveContextShape {
-    isCreated: boolean;
-    innerWidth?: number;
-    innerHeight?: number;
-    outerWidth?: number;
-    outerHeight?: number;
-}
-export declare const ResponsiveContext: React.Context<ResponsiveContextShape>;
-export interface ResponsiveProviderProps {
-    children?: React.ReactNode;
-    /**
-     * Time (in milliseconds) to delay execution of resize handler. Default is 50.
-     */
-    throttle?: number;
-}
-export declare const ResponsiveProvider: React.FC<ResponsiveProviderProps>;

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

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