@k8ordo/ui 1.0.0 → 2.0.0

package/README.md

@@ -1,8 +1,13 @@
 # @k8ordo/ui
 
-A modern React UI component library built with TypeScript, Tailwind CSS, and accessibility in mind.
+React components from [k8ordo](https://ordo.k8o.me) — semantic design
+tokens, built-in Japanese/English wording, and adapters that let an LLM generate
+on-brand UIs.
 
-- **Documentation**: https://ordo.k8o.me
+Like every k8ordo package it assumes React 19 and Server Components, uses only
+what has reached Baseline, and ships no polyfills or legacy fallbacks.
+
+- **Documentation**: https://ordo.k8o.me/ui
 - **Storybook**: https://main--687a213c85e2e4589d8db1bb.chromatic.com
 
 ## Installation
@@ -17,17 +22,35 @@ yarn add @k8ordo/ui
 
 ## Peer Dependencies
 
-Make sure you have the following peer dependencies installed:
+Only React is required:
 
 ```bash
-npm install react react-dom typescript
+npm install react react-dom
 ```
 
-Required versions:
-
-- React ≥19.0.0
-- TypeScript ≥6.0.0
-- Tailwind CSS ≥4.0.0 — **optional**, only if you import the `tailwind.css` entry (see below)
+| Package     | Version |
+| ----------- | ------- |
+| `react`     | ≥19.2.6 |
+| `react-dom` | ≥19.2.6 |
+
+Everything else is an optional peer, needed only for the entry point that uses
+it. Install one when you import the entry it belongs to.
+
+| Package                                   | Version  | Needed for                                                                    |
+| ----------------------------------------- | -------- | ----------------------------------------------------------------------------- |
+| `typescript`                              | ≥7.0.2   | the shipped type declarations                                                 |
+| `@types/react`                            | ≥19.2.18 | the shipped type declarations                                                 |
+| `@types/react-dom`                        | ≥19.2.4  | the shipped type declarations                                                 |
+| `tailwindcss`                             | ≥4.3.3   | the `tailwind.css` entry (see [Imports & Bundle Size](#imports--bundle-size)) |
+| `zod`                                     | ≥4.4.3   | generative-UI schemas                                                         |
+| `@json-render/core`, `@json-render/react` | ≥0.19.0  | `@k8ordo/ui/json-render`                                                      |
+| `@openuidev/lang-core`                    | ≥0.2.10  | `@k8ordo/ui/openui`                                                           |
+| `@openuidev/react-lang`                   | ≥0.2.9   | `@k8ordo/ui/openui`                                                           |
+| `ai`                                      | ≥7.0.51  | `@k8ordo/ui/ai-sdk`                                                           |
+| `streamdown`                              | ≥2.5.0   | `@k8ordo/ui/ai/response`                                                      |
+
+The `styles.css` entry needs no peer at all — it is prebuilt CSS, so CSS Modules
+and plain-CSS projects can use the components without Tailwind.
 
 ## Quick Start
 
@@ -225,6 +248,8 @@ stories and rendered props rather than relying on trained knowledge:
 
 ### Layout
 
+- **Grid** - CSS grid with token-based gaps and responsive auto-fill/auto-fit columns
+- **Stack** - Flex layout with token-based gaps
 - **ScrollLinked** - Scroll progress indicator
 - **Separator** - Visual content divider
 
@@ -318,7 +343,7 @@ All components and hooks ship from a single ESM entry point — there are no per
 
 ```tsx
 // Named imports from the root entry — unused exports are tree-shaken away
-import { Button, Card, useClickAway, useLocalStorage } from '@k8ordo/ui';
+import { Button, Card, useClickAway, useDisclosure } from '@k8ordo/ui';
 ```
 
 Optional features live behind dedicated subpath exports:
@@ -551,11 +576,9 @@ The library includes several useful hooks:
 - **useDebouncedTransition** - Rate-limited transition with `AbortSignal`
 - **useDeferredDebounce** - `useDeferredValue` with pending flag
 - **useDisclosure** - Open/close/toggle disclosure state
-- **useHash** - URL hash management
 - **useHover** - Element hover detection
 - **useIntersectionObserver** / **useInView** - Element visibility
 - **useInterval** - Interval timer management
-- **useLocalStorage** / **useSessionStorage** - Web Storage with React state
 - **useResize** - Element resize detection (ResizeObserver)
 - **useScrollDirection** - Scroll direction detection
 - **useScrollLock** - Body/element scroll lock
@@ -565,6 +588,8 @@ The library includes several useful hooks:
 - **useWindowSize** - Window size tracking
 - **useWritingMode** - Detect horizontal/vertical `writing-mode`
 
+State that lives in a place — the URL, a history entry, localStorage, memory — is [`@k8ordo/state`](https://www.npmjs.com/package/@k8ordo/state)'s job (`defineLocalState` and friends), not a hook here: a package that owned it twice would give an app two answers.
+
 ## Accessibility
 
 All components follow WCAG accessibility guidelines:

package/dist/components/ai/conversation/conversation.d.mts

@@ -1,18 +1,16 @@
 import { FC, ReactNode } from "react";
 //#region src/components/ai/conversation/conversation.d.ts
+declare const Root: FC<{
+  children: ReactNode;
+}>;
 type MessagesProps = {
   label?: string;
   isStreaming?: boolean;
   children: ReactNode;
 };
-declare const Conversation: {
-  readonly Root: FC<{
-    children: ReactNode;
-  }>;
-  readonly Messages: FC<MessagesProps>;
-  readonly ScrollButton: FC<{
-    label?: string;
-  }>;
-};
+declare const Messages: FC<MessagesProps>;
+declare const ScrollButton: FC<{
+  label?: string;
+}>;
 //#endregion
-export { Conversation };
+export { Messages, Root, ScrollButton };

package/dist/components/ai/conversation/conversation.mjs

@@ -102,10 +102,5 @@ const ScrollButton = ({ label }) => {
 		})
 	});
 };
-const Conversation = {
-	Root,
-	Messages,
-	ScrollButton
-};
 //#endregion
-export { Conversation };
+export { Messages, Root, ScrollButton };

package/dist/components/ai/conversation/index.d.mts

@@ -1,2 +1,16 @@
-import { Conversation } from "./conversation.mjs";
+//#region src/components/ai/conversation/index.d.ts
+declare const Conversation: {
+  readonly Root: import("react").FC<{
+    children: import("react").ReactNode;
+  }>;
+  readonly Messages: import("react").FC<{
+    label?: string;
+    isStreaming?: boolean;
+    children: import("react").ReactNode;
+  }>;
+  readonly ScrollButton: import("react").FC<{
+    label?: string;
+  }>;
+};
+//#endregion
 export { Conversation };

package/dist/components/ai/conversation/index.mjs

@@ -1,2 +1,9 @@
-import { Conversation } from "./conversation.mjs";
+import { Messages, Root, ScrollButton } from "./conversation.mjs";
+//#region src/components/ai/conversation/index.ts
+const Conversation = {
+	Root,
+	Messages,
+	ScrollButton
+};
+//#endregion
 export { Conversation };

package/dist/components/ai/index.d.mts

@@ -1,14 +1,10 @@
-import { Conversation } from "./conversation/conversation.mjs";
-import "./conversation/index.mjs";
-import { Message } from "./message/message.mjs";
-import "./message/index.mjs";
-import { ChatStatus, ToolState } from "./types.mjs";
-import { PromptInput } from "./prompt-input/prompt-input.mjs";
-import "./prompt-input/index.mjs";
+import { Conversation } from "./conversation/index.mjs";
+import { Message } from "./message/index.mjs";
+import { PromptInput } from "./prompt-input/index.mjs";
 import { Reasoning } from "./reasoning/reasoning.mjs";
 import "./reasoning/index.mjs";
-import { Suggestion } from "./suggestion/suggestion.mjs";
-import "./suggestion/index.mjs";
+import { Suggestion } from "./suggestion/index.mjs";
+import { ChatStatus, ToolState } from "./types.mjs";
 import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
 import "./tool-invocation/index.mjs";
 export { type ChatStatus, Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation, type ToolState };

package/dist/components/ai/index.mjs

@@ -1,7 +1,7 @@
-import { Conversation } from "./conversation/conversation.mjs";
-import { Message } from "./message/message.mjs";
-import { PromptInput } from "./prompt-input/prompt-input.mjs";
+import { Conversation } from "./conversation/index.mjs";
+import { Message } from "./message/index.mjs";
+import { PromptInput } from "./prompt-input/index.mjs";
 import { Reasoning } from "./reasoning/reasoning.mjs";
-import { Suggestion } from "./suggestion/suggestion.mjs";
+import { Suggestion } from "./suggestion/index.mjs";
 import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
 export { Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation };

package/dist/components/ai/message/index.d.mts

@@ -1,2 +1,13 @@
-import { Message } from "./message.mjs";
+//#region src/components/ai/message/index.d.ts
+declare const Message: {
+  readonly Root: import("react").FC<{
+    from: "assistant" | "user";
+    children: import("react").ReactNode;
+  } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "style">>;
+  readonly Content: import("react").FC<{
+    isStreaming?: boolean;
+    children: import("react").ReactNode;
+  } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "style">>;
+};
+//#endregion
 export { Message };

package/dist/components/ai/message/index.mjs

@@ -1,2 +1,8 @@
-import { Message } from "./message.mjs";
+import { Content, Root } from "./message.mjs";
+//#region src/components/ai/message/index.ts
+const Message = {
+	Root,
+	Content
+};
+//#endregion
 export { Message };

package/dist/components/ai/message/message.d.mts

@@ -5,13 +5,11 @@ type RootProps = {
   from: MessageRole;
   children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+declare const Root: FC<RootProps>;
 type ContentProps = {
   isStreaming?: boolean;
   children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-declare const Message: {
-  readonly Root: FC<RootProps>;
-  readonly Content: FC<ContentProps>;
-};
+declare const Content: FC<ContentProps>;
 //#endregion
-export { Message };
+export { Content, Root };

package/dist/components/ai/message/message.mjs

@@ -26,9 +26,5 @@ const Content = ({ isStreaming = false, children, ...rest }) => {
 		children: [children, isStreaming ? /* @__PURE__ */ jsx(StreamingCursor, {}) : null]
 	});
 };
-const Message = {
-	Root,
-	Content
-};
 //#endregion
-export { Message };
+export { Content, Root };

package/dist/components/ai/prompt-input/index.d.mts

@@ -1,2 +1,24 @@
-import { PromptInput } from "./prompt-input.mjs";
+import { ChatStatus } from "../types.mjs";
+import "../index.mjs";
+//#region src/components/ai/prompt-input/index.d.ts
+declare const PromptInput: {
+  readonly Root: import("react").FC<{
+    status?: ChatStatus;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (message: string) => void;
+    onStop?: () => void;
+    children: import("react").ReactNode;
+  }>;
+  readonly Textarea: import("react").FC<{
+    placeholder?: string;
+    ref?: import("react").Ref<HTMLTextAreaElement>;
+  } & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "defaultValue" | "onChange" | "rows" | "style" | "value">>;
+  readonly Submit: import("react").FC<{
+    sendLabel?: string;
+    stopLabel?: string;
+  }>;
+};
+//#endregion
 export { PromptInput };

package/dist/components/ai/prompt-input/index.mjs

@@ -1,2 +1,9 @@
-import { PromptInput } from "./prompt-input.mjs";
+import { Root, Submit, Textarea } from "./prompt-input.mjs";
+//#region src/components/ai/prompt-input/index.ts
+const PromptInput = {
+	Root,
+	Textarea,
+	Submit
+};
+//#endregion
 export { PromptInput };

package/dist/components/ai/prompt-input/prompt-input.d.mts

@@ -10,18 +10,16 @@ type RootProps = {
   onStop?: () => void;
   children: ReactNode;
 };
+declare const Root: FC<RootProps>;
 type TextareaProps = {
   placeholder?: string;
   ref?: Ref<HTMLTextAreaElement>;
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'className' | 'style' | 'rows'>;
+declare const Textarea: FC<TextareaProps>;
 type SubmitProps = {
   sendLabel?: string;
   stopLabel?: string;
 };
-declare const PromptInput: {
-  readonly Root: FC<RootProps>;
-  readonly Textarea: FC<TextareaProps>;
-  readonly Submit: FC<SubmitProps>;
-};
+declare const Submit: FC<SubmitProps>;
 //#endregion
-export { PromptInput };
+export { Root, Submit, Textarea };

package/dist/components/ai/prompt-input/prompt-input.mjs

@@ -99,10 +99,5 @@ const Submit = ({ sendLabel, stopLabel }) => {
 		children: /* @__PURE__ */ jsx(SendIcon, { size: "sm" })
 	});
 };
-const PromptInput = {
-	Root,
-	Textarea,
-	Submit
-};
 //#endregion
-export { PromptInput };
+export { Root, Submit, Textarea };

package/dist/components/ai/suggestion/index.d.mts

@@ -1,2 +1,14 @@
-import { Suggestion } from "./suggestion.mjs";
+//#region src/components/ai/suggestion/index.d.ts
+declare const Suggestion: {
+  readonly List: import("react").FC<{
+    label?: string;
+    children: import("react").ReactNode;
+  }>;
+  readonly Item: import("react").FC<{
+    value: string;
+    onSelect?: (value: string) => void;
+    children?: import("react").ReactNode;
+  }>;
+};
+//#endregion
 export { Suggestion };

package/dist/components/ai/suggestion/index.mjs

@@ -1,2 +1,8 @@
-import { Suggestion } from "./suggestion.mjs";
+import { Item, List } from "./suggestion.mjs";
+//#region src/components/ai/suggestion/index.ts
+const Suggestion = {
+	List,
+	Item
+};
+//#endregion
 export { Suggestion };

package/dist/components/ai/suggestion/suggestion.d.mts

@@ -4,14 +4,12 @@ type ListProps = {
   label?: string;
   children: ReactNode;
 };
+declare const List: FC<ListProps>;
 type ItemProps = {
   value: string;
   onSelect?: (value: string) => void;
   children?: ReactNode;
 };
-declare const Suggestion: {
-  readonly List: FC<ListProps>;
-  readonly Item: FC<ItemProps>;
-};
+declare const Item: FC<ItemProps>;
 //#endregion
-export { Suggestion };
+export { Item, List };

package/dist/components/ai/suggestion/suggestion.mjs

@@ -21,9 +21,5 @@ const Item = ({ value, onSelect, children }) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	children: children ?? value
 });
-const Suggestion = {
-	List,
-	Item
-};
 //#endregion
-export { Suggestion };
+export { Item, List };

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -3,7 +3,7 @@ import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { chain } from "../../../helpers/chain.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
-import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
+import { Tooltip } from "../../overlays/tooltip/index.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/form/checkbox/checkbox.d.mts

@@ -1,6 +1,7 @@
 import { ChangeEvent, FC, InputHTMLAttributes, Ref } from "react";
 //#region src/components/form/checkbox/checkbox.d.ts
 type BaseProps = {
+  invalid?: boolean;
   itemValue?: string;
   label: string;
   ref?: Ref<HTMLInputElement>;

package/dist/components/form/checkbox/checkbox.mjs

@@ -7,7 +7,7 @@ import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox/checkbox.tsx
-const Checkbox = ({ name, itemValue, disabled = false, label, checked, defaultChecked, onChange, ref, ...rest }) => {
+const Checkbox = ({ name, itemValue, disabled = false, invalid = false, label, checked, defaultChecked, onChange, ref, ...rest }) => {
 	const groupContext = useCheckboxGroupContext();
 	const { pending } = useFormStatus();
 	const [internalChecked, setInternalChecked] = useControllableState({
@@ -29,6 +29,7 @@ const Checkbox = ({ name, itemValue, disabled = false, label, checked, defaultCh
 			/* @__PURE__ */ jsx("input", {
 				...rest,
 				...groupContext || isControlled ? { checked: isChecked } : { defaultChecked },
+				"aria-invalid": invalid,
 				className: "peer sr-only",
 				disabled: disabledResolved,
 				name: groupContext?.name ?? name,
@@ -45,7 +46,7 @@ const Checkbox = ({ name, itemValue, disabled = false, label, checked, defaultCh
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", FOCUS_RING_PEER, disabledResolved && "border-border-mute bg-bg-mute", isChecked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"),
+				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", FOCUS_RING_PEER, disabledResolved && "border-border-mute bg-bg-mute", isChecked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base", invalid && "border-border-error"),
 				children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
 			}),
 			/* @__PURE__ */ jsx("span", {

package/dist/components/form/checkbox-group/index.d.mts

@@ -17,6 +17,7 @@ declare const CheckboxGroup: {
     onChange?: (value: string[]) => void;
   })>;
   readonly Item: import("react").FC<{
+    invalid?: boolean;
     itemValue?: string;
     label: string;
     ref?: import("react").Ref<HTMLInputElement>;

package/dist/components/form/file-field/file-field.d.mts

@@ -9,19 +9,16 @@ type RootProps = PropsWithChildren<{
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'onChange' | 'defaultValue' | 'value' | 'children'>>;
 declare const Root: ({ children, disabled, invalid, required, multiple, maxFiles, defaultValue, onChange, webkitDirectory, ref, ...rest }: RootProps) => import("react").JSX.Element;
-declare const FileField: {
-  readonly Root: typeof Root;
-  readonly Trigger: FC<{
-    renderItem: (props: {
-      onClick: () => void;
-      disabled: boolean;
-      invalid: boolean;
-    }) => ReactElement;
-  }>;
-  readonly ItemList: FC<{
-    showWebkitRelativePath?: boolean;
-    clearable?: boolean;
-  }>;
-};
+declare const Trigger: FC<{
+  renderItem: (props: {
+    onClick: () => void;
+    disabled: boolean;
+    invalid: boolean;
+  }) => ReactElement;
+}>;
+declare const ItemList: FC<{
+  showWebkitRelativePath?: boolean;
+  clearable?: boolean;
+}>;
 //#endregion
-export { FileField };
+export { ItemList, Root, Trigger };

package/dist/components/form/file-field/file-field.mjs

@@ -120,10 +120,5 @@ const ItemList = ({ showWebkitRelativePath, clearable }) => {
 		})
 	});
 };
-const FileField = {
-	Root,
-	Trigger,
-	ItemList
-};
 //#endregion
-export { FileField };
+export { ItemList, Root, Trigger };

package/dist/components/form/file-field/index.d.mts

@@ -1,2 +1,18 @@
-import { FileField } from "./file-field.mjs";
+import { Root } from "./file-field.mjs";
+//#region src/components/form/file-field/index.d.ts
+declare const FileField: {
+  readonly Root: typeof Root;
+  readonly Trigger: import("react").FC<{
+    renderItem: (props: {
+      onClick: () => void;
+      disabled: boolean;
+      invalid: boolean;
+    }) => import("react").ReactElement;
+  }>;
+  readonly ItemList: import("react").FC<{
+    showWebkitRelativePath?: boolean;
+    clearable?: boolean;
+  }>;
+};
+//#endregion
 export { FileField };

package/dist/components/form/file-field/index.mjs

@@ -1,2 +1,9 @@
-import { FileField } from "./file-field.mjs";
+import { ItemList, Root, Trigger } from "./file-field.mjs";
+//#region src/components/form/file-field/index.ts
+const FileField = {
+	Root,
+	Trigger,
+	ItemList
+};
+//#endregion
 export { FileField };

package/dist/components/form/radio/radio.d.mts

@@ -5,6 +5,7 @@ type BaseProps = {
   'aria-labelledby': string;
   name?: string;
   disabled?: boolean;
+  invalid?: boolean;
   options: readonly Option[];
   ref?: Ref<HTMLDivElement>;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'className' | 'style' | 'children' | 'aria-labelledby' | 'onChange'>;

package/dist/components/form/radio/radio.mjs

@@ -5,7 +5,7 @@ import { useControllableState } from "../../../hooks/controllable-state/index.mj
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio/radio.tsx
-const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value, defaultValue, onChange, options, ref, ...rest }) => {
+const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, value, defaultValue, onChange, options, ref, ...rest }) => {
 	const [selectedValue, setSelectedValue] = useControllableState({
 		value,
 		defaultValue
@@ -19,6 +19,7 @@ const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value,
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
+		"aria-invalid": invalid,
 		"aria-labelledby": labelledbyId,
 		className: cn("flex cursor-pointer flex-col gap-2", disabledResolved && "cursor-not-allowed"),
 		ref,
@@ -39,7 +40,7 @@ const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value,
 				}),
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", FOCUS_RING_PEER, selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", disabledResolved && "border-border-mute bg-bg-mute"),
+					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", FOCUS_RING_PEER, selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", disabledResolved && "border-border-mute bg-bg-mute", invalid && "border-border-error"),
 					children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full transition-opacity", selectedValue === option.value ? "bg-primary-border opacity-100" : "bg-transparent opacity-0") })
 				}),
 				/* @__PURE__ */ jsx("span", { children: option.label })

package/dist/components/index.d.mts

@@ -1,8 +1,5 @@
 import { Button } from "./buttons/button/button.mjs";
 import "./buttons/button/index.mjs";
-import { Tooltip, TooltipTriggerProps } from "./overlays/tooltip/tooltip.mjs";
-import "./overlays/tooltip/index.mjs";
-import { IconButton, IconButtonTriggerProps } from "./buttons/icon-button/icon-button.mjs";
 import "./buttons/icon-button/index.mjs";
 import { Accordion } from "./data-display/accordion/index.mjs";
 import { Avatar } from "./data-display/avatar/avatar.mjs";
@@ -30,25 +27,24 @@ import { ToastProvider } from "./feedback/toast/provider.mjs";
 import "./feedback/toast/index.mjs";
 import { Autocomplete } from "./form/autocomplete/autocomplete.mjs";
 import "./form/autocomplete/index.mjs";
+import { Checkbox } from "./form/checkbox/checkbox.mjs";
+import "./form/checkbox/index.mjs";
 import { CheckboxCard, CheckboxCardOption } from "./form/checkbox-card/checkbox-card.mjs";
 import "./form/checkbox-card/index.mjs";
 import { CheckboxGroup } from "./form/checkbox-group/index.mjs";
-import { Checkbox } from "./form/checkbox/checkbox.mjs";
-import "./form/checkbox/index.mjs";
-import { FileField } from "./form/file-field/file-field.mjs";
-import "./form/file-field/index.mjs";
-import { FormControl } from "./form/form-control/form-control.mjs";
-import "./form/form-control/index.mjs";
+import { FileField } from "./form/file-field/index.mjs";
 import { Form } from "./form/form/form.mjs";
 import "./form/form/index.mjs";
+import { FormControl } from "./form/form-control/form-control.mjs";
+import "./form/form-control/index.mjs";
 import { NumberField } from "./form/number-field/number-field.mjs";
 import "./form/number-field/index.mjs";
 import { PasswordInput } from "./form/password-input/password-input.mjs";
 import "./form/password-input/index.mjs";
-import { RadioCard, RadioCardOption } from "./form/radio-card/radio-card.mjs";
-import "./form/radio-card/index.mjs";
 import { Radio } from "./form/radio/radio.mjs";
 import "./form/radio/index.mjs";
+import { RadioCard, RadioCardOption } from "./form/radio-card/radio-card.mjs";
+import "./form/radio-card/index.mjs";
 import { Select } from "./form/select/select.mjs";
 import "./form/select/index.mjs";
 import { Slider } from "./form/slider/slider.mjs";
@@ -84,23 +80,21 @@ import "./navigation/anchor/index.mjs";
 import { Breadcrumb } from "./navigation/breadcrumb/index.mjs";
 import { Pagination } from "./navigation/pagination/pagination.mjs";
 import "./navigation/pagination/index.mjs";
-import { Tabs } from "./navigation/tabs/tabs.mjs";
-import "./navigation/tabs/index.mjs";
-import { Dialog } from "./overlays/dialog/dialog.mjs";
-import "./overlays/dialog/index.mjs";
+import { Tabs } from "./navigation/tabs/index.mjs";
+import { Dialog } from "./overlays/dialog/index.mjs";
 import { Drawer } from "./overlays/drawer/drawer.mjs";
 import "./overlays/drawer/index.mjs";
-import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
-import "./overlays/dropdown-menu/index.mjs";
-import { ListBox } from "./overlays/list-box/list-box.mjs";
-import "./overlays/list-box/index.mjs";
+import { DropdownMenu } from "./overlays/dropdown-menu/index.mjs";
+import { ListBox } from "./overlays/list-box/index.mjs";
 import { Modal } from "./overlays/modal/modal.mjs";
 import "./overlays/modal/index.mjs";
 import { PopoverContentProps, PopoverTriggerProps } from "./overlays/popover/hooks.mjs";
-import { Popover } from "./overlays/popover/popover.mjs";
-import "./overlays/popover/index.mjs";
+import { Popover } from "./overlays/popover/index.mjs";
 import { Messages } from "../i18n/messages.mjs";
 import { UIProvider } from "./providers/ui-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
 import "./providers/index.mjs";
+import { TooltipTriggerProps } from "./overlays/tooltip/tooltip.mjs";
+import { Tooltip } from "./overlays/tooltip/index.mjs";
+import { IconButton, IconButtonTriggerProps } from "./buttons/icon-button/icon-button.mjs";
 export { AIIcon, AccessibilityIcon, Accordion, Alert, type AlertAction, AlertIcon, Anchor, AssistantIcon, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, type BaseIconProps, BlogIcon, BoringIcon, Breadcrumb, Button, Card, type CellAlign, CheckIcon, Checkbox, CheckboxCard, type CheckboxCardOption, CheckboxGroup, ChevronIcon, ChromeIcon, CloseIcon, Code, CodeXmlIcon, ColorContrastIcon, ColorInfoIcon, ColorScaleIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, EdgeIcon, ExternalLinkIcon, FileField, FirefoxIcon, FlaskIcon, ForkIcon, Form, FormControl, FormIcon, FullscreenIcon, type GapSize, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, type IconButtonTriggerProps, type IconRenderProps, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, LockIcon, LockOpenIcon, Logo, LogoIcon, MailIcon, type Messages, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PackageIcon, type PaddingSize, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, type PopoverContentProps, type PopoverTriggerProps, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, type RadioCardOption, RefreshIcon, SafariIcon, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SquircleIcon, Stack, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, type ToastAction, type ToastOptions, ToastProvider, Tooltip, type TooltipTriggerProps, TwitterIcon, UIProvider, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, usePortalRoot, useToast };