@zenkigen-inc/component-ui 1.16.3 → 1.18.0

package/README.md

@@ -1,5 +1,14 @@
 # @zenkigen-inc/component-ui
 
+## 目次
+
+- [インストール](#インストール)
+- [利用方法](#利用方法)
+- [開発者向け](#開発者向け)
+  - [コンポーネントの雛形を生成する](#コンポーネントの雛形を生成する)
+  - [実装したコンポーネントを export する](#実装したコンポーネントを-export-する)
+- [ライセンス](#ライセンス)
+
 ## インストール
 
 ```bash

package/dist/index.d.mts

@@ -1,23 +1,25 @@
 import * as react from 'react';
-import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, InputHTMLAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
+import { tokens } from '@zenkigen-inc/component-config';
+import { useFloating } from '@floating-ui/react';
 
-type Props$w = {
+type Props$z = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$w): react.JSX.Element;
+declare function Avatar({ size, ...props }: Props$z): react.JSX.Element;
 
 declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
 declare namespace Breadcrumb {
     var Item: ({ children }: PropsWithChildren) => react.JSX.Element;
 }
 
-type Size$2 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -25,20 +27,22 @@ type AsProp<T extends ElementAs> = {
     elementAs?: T;
 };
 type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
-type Props$v<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
-    size?: Size$2;
+type BaseProps$1<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
+    size?: Size$3;
     width?: CSSProperties['width'];
     isSelected?: boolean;
     isDisabled?: boolean;
-    variant?: Variant$1;
     before?: ReactNode;
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
     justifyContent?: JustifyContent;
 }>;
-declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$v<T>) => react.JSX.Element;
+type PublicProps<T extends ElementAs> = BaseProps$1<T> & {
+    variant?: Variant$1;
+};
+declare const Button: <T extends ElementAs = "button">(props: PublicProps<T>) => react.JSX.Element;
 
-type Props$u = {
+type Props$y = {
     name?: string;
     value?: string;
     id?: string;
@@ -49,13 +53,13 @@ type Props$u = {
     label?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$u): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$y): react.JSX.Element;
 
-type Props$t = {
+type Props$x = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$t>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$x>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -66,15 +70,15 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$s = {
+type Props$w = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;
     verticalPosition?: DropdownVerticalPosition;
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$s>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$w>): false | react.JSX.Element;
 
-type Props$r = {
+type Props$v = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'text' | 'outline';
     title?: string;
@@ -90,28 +94,73 @@ type Props$r = {
     label: string;
     icon?: IconName;
 });
-declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$r>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$v>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$q = {
+type Props$u = {
     value: number;
     isEditable?: boolean;
     onChangeRating?: (newRating: number) => void | null;
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$q): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$u): react.JSX.Element;
+
+type Size$2 = 'small' | 'medium' | 'large';
+declare const ERROR_TYPES: {
+    readonly SIZE_TOO_LARGE: "SIZE_TOO_LARGE";
+    readonly UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT";
+};
+type FileInputErrorType = (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES];
+type FileInputError = {
+    type: FileInputErrorType;
+    message: string;
+};
+type BaseFileInputProps = {
+    /** input要素のID（外部のlabel要素との連携用） */
+    id?: string;
+    /** 許可するファイル形式（MIMEタイプ） */
+    accept?: string;
+    /** 最大ファイルサイズ（バイト単位） */
+    maxSize?: number;
+    /** 無効化状態 */
+    isDisabled?: boolean;
+    /** エラー状態 */
+    isError?: boolean;
+    /** ファイル選択時のコールバック */
+    onSelect?: (file: File | null) => void;
+    /** エラー時のコールバック */
+    onError?: (errors: FileInputError[]) => void;
+    /** エラーメッセージリスト */
+    errorMessages?: string[];
+};
+type ButtonFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'button';
+    /** サイズ */
+    size?: Size$2;
+};
+type DropzoneFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'dropzone';
+};
+type FileInputProps = ButtonFileInputProps | DropzoneFileInputProps;
+type FileInputRef = {
+    /** ファイル選択状態をリセット */
+    reset: () => void;
+};
+declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<FileInputRef>>;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$p = {
+type Props$t = {
     level: Level;
     before?: ReactNode;
     after?: ReactNode;
     children?: ReactNode;
 };
-declare function Heading(props: Props$p): react.JSX.Element;
+declare function Heading(props: Props$t): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
@@ -129,20 +178,72 @@ type UseRovingFocusReturn = {
 };
 declare const useRovingFocus: ({ values, defaultFocusedValue, isDisabled, }: UseRovingFocusProps) => UseRovingFocusReturn;
 
+type UserColorToken = keyof typeof tokens.user;
+type TextColorToken = keyof typeof tokens.tokens.text;
+type LinkColorToken = keyof typeof tokens.tokens.link;
+type BackgroundColorToken = keyof typeof tokens.tokens.background;
+type BorderColorToken = keyof typeof tokens.tokens.border;
+type IconColorToken = keyof typeof tokens.tokens.icon;
+type InteractiveColorToken = keyof typeof tokens.tokens.interactive;
+type FieldColorToken = keyof typeof tokens.tokens.field;
+type FocusColorToken = keyof typeof tokens.tokens.focus;
+type HoverColorToken = keyof typeof tokens.tokens.hover;
+type ActiveColorToken = keyof typeof tokens.tokens.active;
+type SelectedColorToken = keyof typeof tokens.tokens.selected;
+type DisabledColorToken = keyof typeof tokens.tokens.disabled;
+type SupportColorToken = keyof typeof tokens.tokens.support;
+type BlueColorStep = keyof typeof tokens.colors.blue;
+type GrayColorStep = keyof typeof tokens.colors.gray;
+type RedColorStep = keyof typeof tokens.colors.red;
+type YellowColorStep = keyof typeof tokens.colors.yellow;
+type GreenColorStep = keyof typeof tokens.colors.green;
+type PurpleColorStep = keyof typeof tokens.colors.purple;
+type BlueGreenColorStep = keyof typeof tokens.colors.blueGreen;
+type BaseColorToken = `blue-${BlueColorStep}` | `gray-${GrayColorStep}` | `red-${RedColorStep}` | `yellow-${YellowColorStep}` | `green-${GreenColorStep}` | `purple-${PurpleColorStep}` | `blueGreen-${BlueGreenColorStep}` | 'black' | 'white';
+declare const _tailwindColors: {
+    readonly slate: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly gray: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly zinc: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly neutral: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly stone: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly red: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly orange: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly amber: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly yellow: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly lime: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly green: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly emerald: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly teal: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly cyan: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly sky: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly blue: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly indigo: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly violet: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly purple: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly fuchsia: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly pink: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+    readonly rose: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+};
+type TailwindColorName = keyof typeof _tailwindColors;
+type TailwindColorShade = (typeof _tailwindColors)[TailwindColorName][number];
+type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transparent' | 'current' | 'inherit';
+type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
+
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$o = {
+type Props$s = {
     name: IconName;
     size?: Size$1;
     color?: Color;
+    accentColor?: ColorToken;
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$o) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$s) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$n = {
+type Props$r = {
     /** 表示するアイコン名 */
     icon: IconName;
     /** ボタンのサイズ */
@@ -161,30 +262,29 @@ type Props$n = {
     target?: HTMLAnchorElement['target'];
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
-    onClick?: () => void;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$n): react.JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$r): react.JSX.Element;
 
-type Props$m = {
+type Props$q = {
     size?: 'small' | 'medium' | 'large';
     position?: 'fixed' | 'absolute' | 'static';
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$m): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$q): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$l = {
+type Props$p = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$l>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$p>): react__default.JSX.Element;
 
-type Props$k = {
+type Props$o = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$k>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$o>): react.JSX.Element;
 
-type Props$j = {
+type Props$n = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -192,14 +292,14 @@ type Props$j = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$j>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$n>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$i = {
+type Props$m = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     size?: 'small' | 'medium';
     children?: ReactNode;
@@ -209,9 +309,9 @@ type Props$i = {
     showClose: true;
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$i): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$m): react.JSX.Element;
 
-type Props$h = {
+type Props$l = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -221,9 +321,9 @@ type Props$h = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$h): react.JSX.Element;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$l): react.JSX.Element;
 
-type Props$g = {
+type Props$k = {
     /** トータル件数 */
     totalSize: number;
     /** ページあたり件数 */
@@ -243,7 +343,97 @@ type Props$g = {
     /** Selectが切り替わった時のイベントハンドラ */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$g): react.JSX.Element;
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$k): react.JSX.Element;
+
+declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: "medium" | "large";
+    value: string;
+    isError?: boolean;
+    onClickClearButton?: () => void;
+} & {
+    /** 入力欄の末尾に表示する要素。例: アイコンやテキスト（内部実装用） */
+    after?: ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type Props$j = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
+declare const PasswordInput: react.ForwardRefExoticComponent<Props$j & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Popoverが閉じられる理由を定義する型
+ */
+type CloseReason = 'outside-click' | 'escape-key-down';
+/**
+ * Popoverのクローズイベントの型定義
+ */
+type PopoverCloseEvent = {
+    /** 閉じられた理由 */
+    reason: CloseReason;
+};
+/**
+ * Popoverの配置位置を定義する型
+ */
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+/**
+ * Popover Context の値の型定義
+ */
+type PopoverContextValue = {
+    isOpen: boolean;
+    triggerRef: react.RefObject<HTMLElement | null>;
+    anchorRef?: react.RefObject<HTMLElement | null>;
+    floating: ReturnType<typeof useFloating>;
+    contentId: string;
+    panelId: string;
+    onClose?: (event: PopoverCloseEvent) => void;
+};
+
+type Props$i = {
+    isOpen: boolean;
+    placement?: PopoverPlacement;
+    offset?: number;
+    onClose?: (event: PopoverCloseEvent) => void;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+};
+declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$i>): react.JSX.Element;
+declare namespace Popover {
+    var Trigger: react.ForwardRefExoticComponent<{
+        children: React.ReactElement;
+    } & react.RefAttributes<HTMLElement>>;
+    var Content: react.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+}
+
+type PopoverContentProps = {
+    children?: react.ReactNode;
+};
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+
+type PopoverTriggerProps = {
+    children: react.ReactElement;
+};
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLElement>>;
+
+declare function PopupBody({ children }: PropsWithChildren): react.JSX.Element;
+
+declare function PopupFooter({ children }: PropsWithChildren): react__default.JSX.Element;
+
+type Props$h = PropsWithChildren<{
+    before?: ReactNode;
+}>;
+declare function PopupHeader({ children, before }: Props$h): react.JSX.Element;
+
+type Props$g = {
+    isOpen?: boolean;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    onClose?: () => void;
+};
+declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$g>): react.JSX.Element | null;
+declare namespace Popup {
+    var Body: typeof PopupBody;
+    var Header: typeof PopupHeader;
+    var Footer: typeof PopupFooter;
+}
 
 type Props$f = {
     name?: string;
@@ -445,13 +635,6 @@ type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 });
 declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
 
-declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    size?: "medium" | "large";
-    value: string;
-    isError?: boolean;
-    onClickClearButton?: () => void;
-} & react.RefAttributes<HTMLInputElement>>;
-
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$2 = {
@@ -501,4 +684,4 @@ type Props = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };