@gsk_poc/untitled-ui-base 0.1.18 → 0.1.20

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import react__default, { FC, ReactNode, ComponentPropsWithRef, Ref, CSSProperties, HTMLAttributes, SVGProps, ComponentProps, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, MouseEventHandler, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, ComponentType } from 'react';
+import react__default, { FC, ReactNode, ComponentPropsWithRef, Ref, CSSProperties, HTMLAttributes, SVGProps, ComponentProps, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, MouseEventHandler, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, ComponentType, SelectHTMLAttributes } from 'react';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 import { FileIcon } from '@untitledui/file-icons';
 import * as react_aria_components from 'react-aria-components';
-import { DialogProps as DialogProps$1, ModalOverlayProps, ModalRenderProps, DialogTrigger, TableProps, TableBody, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabListProps, TabProps, TabRenderProps, TabPanel as TabPanel$1, Tabs as Tabs$1, ToggleButtonGroupProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, MenuTrigger, PopoverProps, MenuProps, MenuItemProps, SeparatorProps, Form as Form$1, RadioProps, RadioGroupProps as RadioGroupProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxProps, ListBoxItemProps, SelectProps as SelectProps$1, Key, SliderProps as SliderProps$1, TagGroupProps as TagGroupProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps as TextFieldProps$2, SwitchProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1 } from 'react-aria-components';
+import { DialogProps as DialogProps$1, ModalOverlayProps, ModalRenderProps, DialogTrigger, TableProps, TableBody, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabListProps, TabProps, TabRenderProps, TabPanel as TabPanel$1, Tabs as Tabs$1, ToggleButtonGroupProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, MenuTrigger, PopoverProps, MenuProps, MenuItemProps, SeparatorProps, Form as Form$1, RadioProps, RadioGroupProps as RadioGroupProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxProps, ListBoxItemProps, SelectProps as SelectProps$1, Key, SliderProps as SliderProps$1, TagGroupProps as TagGroupProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps as TextFieldProps$2, SwitchProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, TextProps } from 'react-aria-components';
 import { OTPInput } from 'input-otp';
 import { ListData } from 'react-stately';
 import { RefObject } from '@react-types/shared';
@@ -1358,6 +1358,10 @@ interface InputBaseProps extends TextFieldProps {
     /** Icon component to display on the left side of the input. */
     icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
 }
+declare const InputBase: {
+    ({ ref, tooltip, shortcut, groupRef, size, isInvalid, isDisabled, icon: Icon, placeholder, wrapperClassName, tooltipClassName, inputClassName, iconClassName, isRequired: _isRequired, ...inputProps }: Omit<InputBaseProps, "label" | "hint">): react.JSX.Element;
+    displayName: string;
+};
 interface BaseProps {
     /** Label text for the input */
     label?: string;
@@ -1367,6 +1371,10 @@ interface BaseProps {
 interface TextFieldProps extends BaseProps, TextFieldProps$2, Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName"> {
     ref?: Ref<HTMLDivElement>;
 }
+declare const TextField: {
+    ({ className, ...props }: TextFieldProps): react.JSX.Element;
+    displayName: string;
+};
 interface InputProps extends InputBaseProps, BaseProps {
     /** Whether to hide required indicator from label */
     hideRequiredIndicator?: boolean;
@@ -1384,6 +1392,7 @@ interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
     /** Indicates that the prefix is disabled. */
     isDisabled?: boolean;
 }
+declare const InputPrefix: ({ isDisabled, children, ...props }: InputPrefixProps) => react.JSX.Element;
 interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
     /** A prefix text that is displayed in the same box as the input.*/
     prefix?: string;
@@ -1414,4 +1423,54 @@ declare const Label: {
     displayName: string;
 };
 
-export { Avatar, type AvatarProps, Badge, type BadgeColor, BadgeGroup, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, Button, ButtonGroup, type ButtonProps, Carousel, CarouselContext, Checkbox, ComboBox, type CommonProps$1 as CommonProps, Dialog, Dropdown, EmptyState, FeaturedIcon$1 as FeaturedIcon, FileListItemProgressBar, FileListItemProgressFill, type FileListItemProps, FileUpload, FileUploadDropZone, Form, HeaderNavigationBase, Input, InputGroup, Label, LoadingIndicator, Modal, Dialog$1 as ModalDialog, ModalOverlay, MultiSelect, PaginationButtonGroup, PaginationCardDefault, PaginationCardMinimal, PaginationDot, PaginationLine, PaginationPageDefault, PaginationPageMinimalCenter, PinInput, ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps, type Props, RadioButton, RadioButtonBase, type RadioButtonBaseProps, RadioGroup, type RadioGroupContextType, RatingBadge, RatingStars, _Select as Select, SlideoutMenu, Slider, StarIcon, Tab, TabList, TabPanel, Table, TableCard, TableRowActionsDropdown, Tabs, Tag, TagGroup, type TagItem, TagList, TextArea, TextAreaBase, Toggle, ToggleBase, Tooltip, TooltipTrigger, Wreath, cx, filledColors, getReadableFileSize, getStarProgress, isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent, sortCx, styles$1 as styles, useActiveItem, useBreakpoint, useCarousel, useClipboard, usePinInputContext, useResizeObserver };
+interface HintTextProps extends TextProps {
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+declare const HintText: {
+    ({ isInvalid, className, ...props }: HintTextProps): react.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Format the card number in groups of 4 digits (i.e. 1234 5678 9012 3456).
+ */
+declare const formatCardNumber: (number: string) => string;
+interface PaymentInputProps extends Omit<InputBaseProps, "icon"> {
+}
+declare const PaymentInput: {
+    ({ onChange, value, defaultValue, className, maxLength, label, hint, ...props }: PaymentInputProps): react.JSX.Element;
+    displayName: string;
+};
+
+declare const AmexIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ApplePayIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const DiscoverIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MastercardIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const VisaIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PayPalIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const StripeIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const UnionPayIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    hint?: string;
+    selectClassName?: string;
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+}
+declare const NativeSelect: ({ label, hint, options, className, selectClassName, ...props }: NativeSelectProps) => react.JSX.Element;
+
+export { AmexIcon, ApplePayIcon, Avatar, type AvatarProps, Badge, type BadgeColor, BadgeGroup, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, Button, ButtonGroup, type ButtonProps, Carousel, CarouselContext, Checkbox, ComboBox, type CommonProps$1 as CommonProps, Dialog, DiscoverIcon, Dropdown, EmptyState, FeaturedIcon$1 as FeaturedIcon, FileListItemProgressBar, FileListItemProgressFill, type FileListItemProps, FileUpload, FileUploadDropZone, Form, HeaderNavigationBase, HintText, Input, InputBase, type InputBaseProps, InputGroup, InputPrefix, Label, LoadingIndicator, MastercardIcon, Modal, Dialog$1 as ModalDialog, ModalOverlay, MultiSelect, NativeSelect, PaginationButtonGroup, PaginationCardDefault, PaginationCardMinimal, PaginationDot, PaginationLine, PaginationPageDefault, PaginationPageMinimalCenter, PayPalIcon, PaymentInput, PinInput, ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps, type Props, RadioButton, RadioButtonBase, type RadioButtonBaseProps, RadioGroup, type RadioGroupContextType, RatingBadge, RatingStars, _Select as Select, SlideoutMenu, Slider, StarIcon, StripeIcon, Tab, TabList, TabPanel, Table, TableCard, TableRowActionsDropdown, Tabs, Tag, TagGroup, type TagItem, TagList, TextArea, TextAreaBase, TextField, Toggle, ToggleBase, Tooltip, TooltipTrigger, UnionPayIcon, VisaIcon, Wreath, cx, filledColors, formatCardNumber, getReadableFileSize, getStarProgress, isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent, sortCx, styles$1 as styles, useActiveItem, useBreakpoint, useCarousel, useClipboard, usePinInputContext, useResizeObserver };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import react__default, { FC, ReactNode, ComponentPropsWithRef, Ref, CSSProperties, HTMLAttributes, SVGProps, ComponentProps, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, MouseEventHandler, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, ComponentType } from 'react';
+import react__default, { FC, ReactNode, ComponentPropsWithRef, Ref, CSSProperties, HTMLAttributes, SVGProps, ComponentProps, RefAttributes, TdHTMLAttributes, ThHTMLAttributes, MouseEventHandler, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, ComponentType, SelectHTMLAttributes } from 'react';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 import { FileIcon } from '@untitledui/file-icons';
 import * as react_aria_components from 'react-aria-components';
-import { DialogProps as DialogProps$1, ModalOverlayProps, ModalRenderProps, DialogTrigger, TableProps, TableBody, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabListProps, TabProps, TabRenderProps, TabPanel as TabPanel$1, Tabs as Tabs$1, ToggleButtonGroupProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, MenuTrigger, PopoverProps, MenuProps, MenuItemProps, SeparatorProps, Form as Form$1, RadioProps, RadioGroupProps as RadioGroupProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxProps, ListBoxItemProps, SelectProps as SelectProps$1, Key, SliderProps as SliderProps$1, TagGroupProps as TagGroupProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps as TextFieldProps$2, SwitchProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1 } from 'react-aria-components';
+import { DialogProps as DialogProps$1, ModalOverlayProps, ModalRenderProps, DialogTrigger, TableProps, TableBody, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabListProps, TabProps, TabRenderProps, TabPanel as TabPanel$1, Tabs as Tabs$1, ToggleButtonGroupProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, MenuTrigger, PopoverProps, MenuProps, MenuItemProps, SeparatorProps, Form as Form$1, RadioProps, RadioGroupProps as RadioGroupProps$1, ComboBoxProps as ComboBoxProps$1, ListBoxProps, ListBoxItemProps, SelectProps as SelectProps$1, Key, SliderProps as SliderProps$1, TagGroupProps as TagGroupProps$1, TagProps as TagProps$1, TextAreaProps, TextFieldProps as TextFieldProps$2, SwitchProps, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, TextProps } from 'react-aria-components';
 import { OTPInput } from 'input-otp';
 import { ListData } from 'react-stately';
 import { RefObject } from '@react-types/shared';
@@ -1358,6 +1358,10 @@ interface InputBaseProps extends TextFieldProps {
     /** Icon component to display on the left side of the input. */
     icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
 }
+declare const InputBase: {
+    ({ ref, tooltip, shortcut, groupRef, size, isInvalid, isDisabled, icon: Icon, placeholder, wrapperClassName, tooltipClassName, inputClassName, iconClassName, isRequired: _isRequired, ...inputProps }: Omit<InputBaseProps, "label" | "hint">): react.JSX.Element;
+    displayName: string;
+};
 interface BaseProps {
     /** Label text for the input */
     label?: string;
@@ -1367,6 +1371,10 @@ interface BaseProps {
 interface TextFieldProps extends BaseProps, TextFieldProps$2, Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName"> {
     ref?: Ref<HTMLDivElement>;
 }
+declare const TextField: {
+    ({ className, ...props }: TextFieldProps): react.JSX.Element;
+    displayName: string;
+};
 interface InputProps extends InputBaseProps, BaseProps {
     /** Whether to hide required indicator from label */
     hideRequiredIndicator?: boolean;
@@ -1384,6 +1392,7 @@ interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
     /** Indicates that the prefix is disabled. */
     isDisabled?: boolean;
 }
+declare const InputPrefix: ({ isDisabled, children, ...props }: InputPrefixProps) => react.JSX.Element;
 interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
     /** A prefix text that is displayed in the same box as the input.*/
     prefix?: string;
@@ -1414,4 +1423,54 @@ declare const Label: {
     displayName: string;
 };
 
-export { Avatar, type AvatarProps, Badge, type BadgeColor, BadgeGroup, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, Button, ButtonGroup, type ButtonProps, Carousel, CarouselContext, Checkbox, ComboBox, type CommonProps$1 as CommonProps, Dialog, Dropdown, EmptyState, FeaturedIcon$1 as FeaturedIcon, FileListItemProgressBar, FileListItemProgressFill, type FileListItemProps, FileUpload, FileUploadDropZone, Form, HeaderNavigationBase, Input, InputGroup, Label, LoadingIndicator, Modal, Dialog$1 as ModalDialog, ModalOverlay, MultiSelect, PaginationButtonGroup, PaginationCardDefault, PaginationCardMinimal, PaginationDot, PaginationLine, PaginationPageDefault, PaginationPageMinimalCenter, PinInput, ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps, type Props, RadioButton, RadioButtonBase, type RadioButtonBaseProps, RadioGroup, type RadioGroupContextType, RatingBadge, RatingStars, _Select as Select, SlideoutMenu, Slider, StarIcon, Tab, TabList, TabPanel, Table, TableCard, TableRowActionsDropdown, Tabs, Tag, TagGroup, type TagItem, TagList, TextArea, TextAreaBase, Toggle, ToggleBase, Tooltip, TooltipTrigger, Wreath, cx, filledColors, getReadableFileSize, getStarProgress, isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent, sortCx, styles$1 as styles, useActiveItem, useBreakpoint, useCarousel, useClipboard, usePinInputContext, useResizeObserver };
+interface HintTextProps extends TextProps {
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+declare const HintText: {
+    ({ isInvalid, className, ...props }: HintTextProps): react.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Format the card number in groups of 4 digits (i.e. 1234 5678 9012 3456).
+ */
+declare const formatCardNumber: (number: string) => string;
+interface PaymentInputProps extends Omit<InputBaseProps, "icon"> {
+}
+declare const PaymentInput: {
+    ({ onChange, value, defaultValue, className, maxLength, label, hint, ...props }: PaymentInputProps): react.JSX.Element;
+    displayName: string;
+};
+
+declare const AmexIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ApplePayIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const DiscoverIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MastercardIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const VisaIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PayPalIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const StripeIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const UnionPayIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    hint?: string;
+    selectClassName?: string;
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+}
+declare const NativeSelect: ({ label, hint, options, className, selectClassName, ...props }: NativeSelectProps) => react.JSX.Element;
+
+export { AmexIcon, ApplePayIcon, Avatar, type AvatarProps, Badge, type BadgeColor, BadgeGroup, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, Button, ButtonGroup, type ButtonProps, Carousel, CarouselContext, Checkbox, ComboBox, type CommonProps$1 as CommonProps, Dialog, DiscoverIcon, Dropdown, EmptyState, FeaturedIcon$1 as FeaturedIcon, FileListItemProgressBar, FileListItemProgressFill, type FileListItemProps, FileUpload, FileUploadDropZone, Form, HeaderNavigationBase, HintText, Input, InputBase, type InputBaseProps, InputGroup, InputPrefix, Label, LoadingIndicator, MastercardIcon, Modal, Dialog$1 as ModalDialog, ModalOverlay, MultiSelect, NativeSelect, PaginationButtonGroup, PaginationCardDefault, PaginationCardMinimal, PaginationDot, PaginationLine, PaginationPageDefault, PaginationPageMinimalCenter, PayPalIcon, PaymentInput, PinInput, ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps, type Props, RadioButton, RadioButtonBase, type RadioButtonBaseProps, RadioGroup, type RadioGroupContextType, RatingBadge, RatingStars, _Select as Select, SlideoutMenu, Slider, StarIcon, StripeIcon, Tab, TabList, TabPanel, Table, TableCard, TableRowActionsDropdown, Tabs, Tag, TagGroup, type TagItem, TagList, TextArea, TextAreaBase, TextField, Toggle, ToggleBase, Tooltip, TooltipTrigger, UnionPayIcon, VisaIcon, Wreath, cx, filledColors, formatCardNumber, getReadableFileSize, getStarProgress, isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent, sortCx, styles$1 as styles, useActiveItem, useBreakpoint, useCarousel, useClipboard, usePinInputContext, useResizeObserver };