@k8o/arte-odyssey 10.1.2 → 10.3.0

package/dist/components/overlays/popover/hooks.mjs

@@ -4,13 +4,6 @@ import { useClickAway } from "../../../hooks/click-away/index.mjs";
 import { useMemo, useRef } from "react";
 //#region src/components/overlays/popover/hooks.ts
 const [PopoverProvider, usePopoverContext] = createSafeContext("usePopoverContext must be used within a Popover.Root");
-const useFloatingUIContext = () => {
-	const popover = usePopoverContext();
-	return useMemo(() => popover.context, [popover]);
-};
-const usePlacement = () => {
-	return usePopoverContext().placement;
-};
 const useOpenContext = () => {
 	const popover = usePopoverContext();
 	return useMemo(() => ({
@@ -64,16 +57,16 @@ const usePopoverContent = () => {
 		ref,
 		isOpen: popover.isOpen,
 		trapFocus: popover.trapFocus,
-		context: popover.context,
-		setContentRef: popover.setContentRef,
-		contentStyles: popover.contentStyles,
+		anchorName: popover.anchorName,
+		placement: popover.placement,
+		flipDisabled: popover.flipDisabled,
 		itemProps
 	}), [
 		popover.rootId,
 		popover.isOpen,
-		popover.context,
-		popover.setContentRef,
-		popover.contentStyles,
+		popover.anchorName,
+		popover.placement,
+		popover.flipDisabled,
 		ref,
 		popover.trapFocus,
 		itemProps
@@ -145,4 +138,4 @@ const usePopoverTrigger = () => {
 	}, [popover]);
 };
 //#endregion
-export { PopoverProvider, useFloatingUIContext, useOpenContext, usePlacement, usePopoverContent, usePopoverContext, usePopoverTrigger };
+export { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };

package/dist/components/overlays/popover/popover.d.mts

@@ -1,7 +1,6 @@
+import { Placement } from "../../../types/variables.mjs";
 import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hooks.mjs";
 import { FC, PropsWithChildren, ReactElement } from "react";
-import { Placement } from "@floating-ui/react";
-import { Variants } from "motion/react";
 
 //#region src/components/overlays/popover/popover.d.ts
 declare const Popover: {
@@ -14,7 +13,7 @@ declare const Popover: {
   }>>;
   readonly Content: FC<{
     renderItem: (props: PopoverContentProps) => ReactElement;
-    motionVariants?: Variants;
+    animation?: "scale" | "fade";
   }>;
   readonly Trigger: FC<{
     renderItem: (props: PopoverTriggerProps) => ReactElement;

package/dist/components/overlays/popover/popover.mjs

@@ -2,28 +2,21 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
-import { usePortalRoot } from "../../providers/portal-root.mjs";
+import { useFocusTrap } from "../../../hooks/focus-trap/index.mjs";
+import { getContentAnchorStyle, toAnchorName } from "./anchor-positioning.mjs";
 import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger } from "./hooks.mjs";
-import { useEffect, useId } from "react";
+import { useCallback, useEffect, useId, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, useFloating } from "@floating-ui/react";
-import { AnimatePresence } from "motion/react";
-import * as motion$1 from "motion/react-client";
 //#region src/components/overlays/popover/popover.tsx
 const Root = ({ children, type = "menu", placement = "bottom-start", flipDisabled = false, closeOnClickAway = true, trapFocus = true }) => {
 	const id = useId();
 	const { isOpen, open, close, toggle } = useDisclosure();
-	const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({
-		strategy: "fixed",
-		placement,
-		open: isOpen,
-		whileElementsMounted: autoUpdate,
-		middleware: [offset(8), !flipDisabled && flip({
-			fallbackAxisSideDirection: "end",
-			padding: 8
-		})],
-		transform: false
-	});
+	const anchorName = toAnchorName(id);
+	const triggerRef = useRef(null);
+	const setTriggerRef = useCallback((node) => {
+		triggerRef.current = node;
+		if (node) node.style.setProperty("anchor-name", anchorName);
+	}, [anchorName]);
 	useEffect(() => {
 		const handleKeyDown = (e) => {
 			if (e.key === "Escape") close();
@@ -43,55 +36,34 @@ const Root = ({ children, type = "menu", placement = "bottom-start", flipDisable
 			toggleOpen: toggle,
 			onOpen: open,
 			onClose: close,
-			context,
-			placement: computedPlacement,
-			triggerRef: refs.domReference,
-			setTriggerRef: refs.setReference,
-			setContentRef: refs.setFloating,
-			contentStyles: floatingStyles
+			placement,
+			anchorName,
+			flipDisabled,
+			triggerRef,
+			setTriggerRef
 		},
 		children
 	});
 };
-const contentMotionVariants = {
-	closed: {
-		scale: 0,
-		transition: { delay: .1 }
-	},
-	open: {
-		scale: 1,
-		transition: {
-			type: "spring",
-			duration: .2
-		}
-	}
-};
-const Content = ({ renderItem, motionVariants = contentMotionVariants }) => {
-	const { isOpen, trapFocus, context, setContentRef, contentStyles, itemProps } = usePopoverContent();
+const Content = ({ renderItem, animation = "scale" }) => {
+	const { isOpen, trapFocus, anchorName, placement, flipDisabled, itemProps } = usePopoverContent();
 	const { triggerRef } = usePopoverContext();
-	const root = usePortalRoot();
-	const protalProps = root ? { root } : {};
 	const writingClass = useWritingMode(triggerRef) === "vertical" ? "writing-v" : void 0;
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
-		...protalProps,
-		children: /* @__PURE__ */ jsx(FloatingFocusManager, {
-			context,
-			disabled: !trapFocus,
-			modal: false,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn("z-overlay", writingClass),
-				ref: setContentRef,
-				style: contentStyles,
-				children: /* @__PURE__ */ jsx(motion$1.div, {
-					animate: "open",
-					exit: "closed",
-					initial: "closed",
-					variants: motionVariants,
-					children: renderItem(itemProps)
-				})
-			})
-		})
-	}) });
+	const contentWrapperRef = useRef(null);
+	useEffect(() => {
+		const el = contentWrapperRef.current;
+		if (!el) return;
+		if (isOpen && !el.matches(":popover-open")) el.showPopover();
+		else if (!isOpen && el.matches(":popover-open")) el.hidePopover();
+	}, [isOpen]);
+	useFocusTrap(contentWrapperRef, triggerRef, isOpen && trapFocus);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("z-overlay outline-hidden", animation === "fade" ? "ao-anim-fade" : "ao-anim-scale", writingClass),
+		popover: "manual",
+		ref: contentWrapperRef,
+		style: getContentAnchorStyle(anchorName, placement, flipDisabled),
+		children: renderItem(itemProps)
+	});
 };
 const Trigger = ({ renderItem }) => renderItem(usePopoverTrigger());
 const Popover = {

package/dist/components/overlays/tooltip/tooltip.d.mts

@@ -1,5 +1,5 @@
+import { Placement } from "../../../types/variables.mjs";
 import { FC, FocusEventHandler, MouseEventHandler, PropsWithChildren, ReactElement, RefCallback } from "react";
-import { Placement } from "@floating-ui/react";
 
 //#region src/components/overlays/tooltip/tooltip.d.ts
 type TooltipTriggerProps = {

package/dist/components/overlays/tooltip/tooltip.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { usePlacement, usePopoverContext } from "../popover/hooks.mjs";
+import { usePopoverContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/popover.mjs";
 import { useCallback, useMemo, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -38,31 +38,10 @@ const Root = ({ children, placement = "bottom" }) => /* @__PURE__ */ jsx(Popover
 });
 const Trigger = ({ renderItem }) => renderItem(useTooltipTriggerProps());
 const Content = ({ children }) => {
-	const placement = usePlacement();
 	const popover = usePopoverContext();
 	const canHover = useCanHover();
-	const translate = {
-		top: { translateY: 5 },
-		bottom: { translateY: -5 },
-		left: { translateX: 5 },
-		right: { translateX: -5 }
-	}[placement.includes("-") ? placement.split("-")[0] ?? "bottom" : placement];
 	return /* @__PURE__ */ jsx(Popover.Content, {
-		motionVariants: {
-			closed: {
-				...translate,
-				opacity: 0,
-				transition: { duration: .3 }
-			},
-			open: {
-				translate: 0,
-				opacity: 1,
-				transition: {
-					duration: .4,
-					ease: "easeOut"
-				}
-			}
-		},
+		animation: "fade",
 		renderItem: ({ id, ref }) => /* @__PURE__ */ jsx("div", {
 			className: "bg-bg-inverse text-fg-inverse rounded-lg px-4 py-2 shadow-md",
 			id,

package/dist/helpers/index.mjs

@@ -1,6 +1,6 @@
 import { cn } from "./cn.mjs";
-import { createSafeContext } from "./create-safe-context.mjs";
 import { chain } from "./chain.mjs";
-import { mergeRefs } from "./merge-refs.mjs";
+import { createSafeContext } from "./create-safe-context.mjs";
 import { mergeProps } from "./merge-props.mjs";
+import { mergeRefs } from "./merge-refs.mjs";
 export { chain, cn, createSafeContext, mergeProps, mergeRefs };

package/dist/hooks/focus-trap/index.d.mts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+
+//#region src/hooks/focus-trap/index.d.ts
+/**
+ * 非モーダルなポップアップのフォーカス管理。
+ *
+ * floating-ui の `<FloatingFocusManager modal={false}>` 相当を自前で再現する:
+ * - 開いたとき、ポップアップ内へ初期フォーカスを移す
+ *   （内部に roving tabindex のリストがある場合は、そのリストナビゲーション側の
+ *   フォーカスが後で上書きするため、ここではコンテナ/先頭要素に当てるだけでよい）
+ * - 閉じたとき、フォーカスがまだポップアップ内（または喪失）していればトリガーへ戻す。
+ *   外側を意図的にクリック/フォーカスした場合は奪い返さない。
+ *
+ * ハードな Tab トラップや close-on-focus-out は行わない（元実装が modal=false のため）。
+ * 外側クリック / Escape による dismiss は呼び出し側が担う。
+ */
+declare const useFocusTrap: (contentRef: RefObject<HTMLElement | null>, triggerRef: RefObject<Element | null>, enabled: boolean) => void;
+//#endregion
+export { useFocusTrap };

package/dist/hooks/focus-trap/index.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect } from "react";
+//#region src/hooks/focus-trap/index.ts
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[contenteditable=\"true\"]"
+].join(",");
+/**
+* 非モーダルなポップアップのフォーカス管理。
+*
+* floating-ui の `<FloatingFocusManager modal={false}>` 相当を自前で再現する:
+* - 開いたとき、ポップアップ内へ初期フォーカスを移す
+*   （内部に roving tabindex のリストがある場合は、そのリストナビゲーション側の
+*   フォーカスが後で上書きするため、ここではコンテナ/先頭要素に当てるだけでよい）
+* - 閉じたとき、フォーカスがまだポップアップ内（または喪失）していればトリガーへ戻す。
+*   外側を意図的にクリック/フォーカスした場合は奪い返さない。
+*
+* ハードな Tab トラップや close-on-focus-out は行わない（元実装が modal=false のため）。
+* 外側クリック / Escape による dismiss は呼び出し側が担う。
+*/
+const useFocusTrap = (contentRef, triggerRef, enabled) => {
+	useEffect(() => {
+		if (!enabled) return;
+		const content = contentRef.current;
+		if (!content) return;
+		const trigger = triggerRef.current;
+		if (!content.contains(document.activeElement)) {
+			const first = content.querySelector(FOCUSABLE_SELECTOR);
+			if (first) first.focus();
+			else {
+				content.tabIndex = -1;
+				content.focus();
+			}
+		}
+		return () => {
+			const active = document.activeElement;
+			if ((active === null || active === document.body || content.contains(active)) && trigger instanceof HTMLElement) trigger.focus();
+		};
+	}, [
+		contentRef,
+		triggerRef,
+		enabled
+	]);
+};
+//#endregion
+export { useFocusTrap };

package/dist/hooks/index.mjs

@@ -1,12 +1,10 @@
-import { useDisclosure } from "./disclosure/index.mjs";
-import { useWritingMode } from "./writing-mode/index.mjs";
-import { useTimeout } from "./timeout/index.mjs";
 import { useClickAway } from "./click-away/index.mjs";
-import { useControllableState } from "./controllable-state/index.mjs";
 import { useClient } from "./client/index.mjs";
 import { useClipboard } from "./clipboard/index.mjs";
+import { useControllableState } from "./controllable-state/index.mjs";
 import { useDebouncedTransition } from "./debounced-transition/index.mjs";
 import { useDeferredDebounce } from "./deferred-debounce/index.mjs";
+import { useDisclosure } from "./disclosure/index.mjs";
 import { useHash } from "./hash/index.mjs";
 import { useHover } from "./hover/index.mjs";
 import { useIntersectionObserver } from "./intersection-observer/use-intersection-observer.mjs";
@@ -19,6 +17,8 @@ import { useScrollDirection } from "./scroll-direction/index.mjs";
 import { useScrollLock } from "./scroll-lock/index.mjs";
 import { useSessionStorage } from "./session-storage/index.mjs";
 import { useStep } from "./step/index.mjs";
+import { useTimeout } from "./timeout/index.mjs";
 import { useWindowResize } from "./window-resize/index.mjs";
 import { useWindowSize } from "./window-size/index.mjs";
+import { useWritingMode } from "./writing-mode/index.mjs";
 export { useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useWindowResize, useWindowSize, useWritingMode };

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import { Button } from "./components/buttons/button/button.mjs";
+import { Direction, Option, Status } from "./types/variables.mjs";
 import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
 import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
 import { Accordion } from "./components/data-display/accordion/index.mjs";
@@ -9,7 +10,6 @@ import { Card } from "./components/data-display/card/card.mjs";
 import { Code } from "./components/data-display/code/code.mjs";
 import { Heading } from "./components/data-display/heading/heading.mjs";
 import { Table } from "./components/data-display/table/table.mjs";
-import { Direction, Option, Status } from "./types/variables.mjs";
 import { Alert } from "./components/feedback/alert/alert.mjs";
 import { Progress } from "./components/feedback/progress/progress.mjs";
 import { Skeleton } from "./components/feedback/skeleton/skeleton.mjs";
@@ -35,7 +35,7 @@ import { Textarea } from "./components/form/textarea/textarea.mjs";
 import { ArteOdyssey } from "./components/icons/arte-odyssey.mjs";
 import { GitHubIcon } from "./components/icons/github-mark.mjs";
 import { Logo, LogoIcon } from "./components/icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FlaskIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PackageIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SquircleIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
 import { QiitaIcon } from "./components/icons/qiita.mjs";
 import { TwitterIcon } from "./components/icons/twitter.mjs";
 import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
@@ -84,4 +84,4 @@ import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
 import { WritingMode, useWritingMode } from "./hooks/writing-mode/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, type DebouncedAction, Dialog, DifficultIcon, type Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, type Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, type Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, type WritingMode, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, type DebouncedAction, Dialog, DifficultIcon, type Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FlaskIcon, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, type Option, PackageIcon, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SquircleIcon, Stack, type StackProps, type Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, type WritingMode, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/index.mjs

@@ -1,44 +1,17 @@
 import { cn } from "./helpers/cn.mjs";
 import { Spinner } from "./components/feedback/spinner/spinner.mjs";
 import { Button } from "./components/buttons/button/button.mjs";
-import { useDisclosure } from "./hooks/disclosure/index.mjs";
-import { useWritingMode } from "./hooks/writing-mode/index.mjs";
-import { createSafeContext } from "./helpers/create-safe-context.mjs";
-import { useToast } from "./components/feedback/toast/context.mjs";
-import { ArteOdyssey } from "./components/icons/arte-odyssey.mjs";
-import { GitHubIcon } from "./components/icons/github-mark.mjs";
-import { Logo, LogoIcon } from "./components/icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
-import { QiitaIcon } from "./components/icons/qiita.mjs";
-import { TwitterIcon } from "./components/icons/twitter.mjs";
-import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
-import { Alert } from "./components/feedback/alert/alert.mjs";
-import { useTimeout } from "./hooks/timeout/index.mjs";
-import { ToastProvider } from "./components/feedback/toast/provider.mjs";
-import { ArteOdysseyProvider } from "./components/providers/arte-odyssey-provider.mjs";
-import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
-import { useClickAway } from "./hooks/click-away/index.mjs";
-import { useOpenContext } from "./components/overlays/popover/hooks.mjs";
-import { Popover } from "./components/overlays/popover/popover.mjs";
-import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
 import { chain } from "./helpers/chain.mjs";
+import { createSafeContext } from "./helpers/create-safe-context.mjs";
+import { mergeProps } from "./helpers/merge-props.mjs";
 import { mergeRefs } from "./helpers/merge-refs.mjs";
-import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
-import { useControllableState } from "./hooks/controllable-state/index.mjs";
-import { Accordion } from "./components/data-display/accordion/index.mjs";
-import { Avatar } from "./components/data-display/avatar/avatar.mjs";
-import { Badge } from "./components/data-display/badge/badge.mjs";
+import { useClickAway } from "./hooks/click-away/index.mjs";
 import { useClient } from "./hooks/client/index.mjs";
-import { BaselineStatus } from "./components/data-display/baseline-status/baseline-status.mjs";
-import { Card } from "./components/data-display/card/card.mjs";
-import { Code } from "./components/data-display/code/code.mjs";
-import { Heading } from "./components/data-display/heading/heading.mjs";
-import { Table } from "./components/data-display/table/table.mjs";
-import { Progress } from "./components/feedback/progress/progress.mjs";
-import { Skeleton } from "./components/feedback/skeleton/skeleton.mjs";
 import { useClipboard } from "./hooks/clipboard/index.mjs";
+import { useControllableState } from "./hooks/controllable-state/index.mjs";
 import { useDebouncedTransition } from "./hooks/debounced-transition/index.mjs";
 import { useDeferredDebounce } from "./hooks/deferred-debounce/index.mjs";
+import { useDisclosure } from "./hooks/disclosure/index.mjs";
 import { useHash } from "./hooks/hash/index.mjs";
 import { useHover } from "./hooks/hover/index.mjs";
 import { useIntersectionObserver } from "./hooks/intersection-observer/use-intersection-observer.mjs";
@@ -51,8 +24,34 @@ import { useScrollDirection } from "./hooks/scroll-direction/index.mjs";
 import { useScrollLock } from "./hooks/scroll-lock/index.mjs";
 import { useSessionStorage } from "./hooks/session-storage/index.mjs";
 import { useStep } from "./hooks/step/index.mjs";
+import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
+import { useWritingMode } from "./hooks/writing-mode/index.mjs";
+import { useOpenContext } from "./components/overlays/popover/hooks.mjs";
+import { Popover } from "./components/overlays/popover/popover.mjs";
+import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
+import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
+import { ArteOdyssey } from "./components/icons/arte-odyssey.mjs";
+import { GitHubIcon } from "./components/icons/github-mark.mjs";
+import { Logo, LogoIcon } from "./components/icons/logo.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FlaskIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PackageIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SquircleIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./components/icons/lucide.mjs";
+import { QiitaIcon } from "./components/icons/qiita.mjs";
+import { TwitterIcon } from "./components/icons/twitter.mjs";
+import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
+import { Accordion } from "./components/data-display/accordion/index.mjs";
+import { Avatar } from "./components/data-display/avatar/avatar.mjs";
+import { Badge } from "./components/data-display/badge/badge.mjs";
+import { BaselineStatus } from "./components/data-display/baseline-status/baseline-status.mjs";
+import { Card } from "./components/data-display/card/card.mjs";
+import { Code } from "./components/data-display/code/code.mjs";
+import { Heading } from "./components/data-display/heading/heading.mjs";
+import { Table } from "./components/data-display/table/table.mjs";
+import { Alert } from "./components/feedback/alert/alert.mjs";
+import { Progress } from "./components/feedback/progress/progress.mjs";
+import { Skeleton } from "./components/feedback/skeleton/skeleton.mjs";
+import { useToast } from "./components/feedback/toast/context.mjs";
+import { ToastProvider } from "./components/feedback/toast/provider.mjs";
 import { Autocomplete } from "./components/form/autocomplete/autocomplete.mjs";
 import { Checkbox } from "./components/form/checkbox/checkbox.mjs";
 import { CheckboxCard } from "./components/form/checkbox-card/checkbox-card.mjs";
@@ -78,9 +77,10 @@ import { Breadcrumb } from "./components/navigation/breadcrumb/breadcrumb.mjs";
 import { Pagination } from "./components/navigation/pagination/pagination.mjs";
 import { Tabs } from "./components/navigation/tabs/tabs.mjs";
 import { Dialog } from "./components/overlays/dialog/dialog.mjs";
+import { ArteOdysseyProvider } from "./components/providers/arte-odyssey-provider.mjs";
+import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
 import { Modal } from "./components/overlays/modal/modal.mjs";
 import { Drawer } from "./components/overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./components/overlays/list-box/list-box.mjs";
-import { mergeProps } from "./helpers/merge-props.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FlaskIcon, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PackageIcon, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SquircleIcon, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };

package/dist/integrations/_shared/renderers.mjs

@@ -1,7 +1,9 @@
 "use client";
 import { Spinner } from "../../components/feedback/spinner/spinner.mjs";
 import { Button } from "../../components/buttons/button/button.mjs";
-import { useToast } from "../../components/feedback/toast/context.mjs";
+import { Popover } from "../../components/overlays/popover/popover.mjs";
+import { Tooltip } from "../../components/overlays/tooltip/tooltip.mjs";
+import { IconButton } from "../../components/buttons/icon-button/icon-button.mjs";
 import { ArteOdyssey } from "../../components/icons/arte-odyssey.mjs";
 import { GitHubIcon } from "../../components/icons/github-mark.mjs";
 import { LogoIcon } from "../../components/icons/logo.mjs";
@@ -9,11 +11,6 @@ import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, Bori
 import { QiitaIcon } from "../../components/icons/qiita.mjs";
 import { TwitterIcon } from "../../components/icons/twitter.mjs";
 import { VerticalWritingIcon } from "../../components/icons/vertical-writing.mjs";
-import { Alert } from "../../components/feedback/alert/alert.mjs";
-import { ToastProvider } from "../../components/feedback/toast/provider.mjs";
-import { Popover } from "../../components/overlays/popover/popover.mjs";
-import { Tooltip } from "../../components/overlays/tooltip/tooltip.mjs";
-import { IconButton } from "../../components/buttons/icon-button/icon-button.mjs";
 import { Accordion } from "../../components/data-display/accordion/index.mjs";
 import { Avatar } from "../../components/data-display/avatar/avatar.mjs";
 import { Badge } from "../../components/data-display/badge/badge.mjs";
@@ -22,8 +19,11 @@ import { Card } from "../../components/data-display/card/card.mjs";
 import { Code } from "../../components/data-display/code/code.mjs";
 import { Heading } from "../../components/data-display/heading/heading.mjs";
 import { Table } from "../../components/data-display/table/table.mjs";
+import { Alert } from "../../components/feedback/alert/alert.mjs";
 import { Progress } from "../../components/feedback/progress/progress.mjs";
 import { Skeleton } from "../../components/feedback/skeleton/skeleton.mjs";
+import { useToast } from "../../components/feedback/toast/context.mjs";
+import { ToastProvider } from "../../components/feedback/toast/provider.mjs";
 import { Autocomplete } from "../../components/form/autocomplete/autocomplete.mjs";
 import { Checkbox } from "../../components/form/checkbox/checkbox.mjs";
 import { CheckboxCard } from "../../components/form/checkbox-card/checkbox-card.mjs";

package/dist/integrations/_shared/schemas.d.mts

@@ -40,9 +40,9 @@ declare const buttonProps: z.ZodObject<{
 }, z.core.$strip>;
 declare const iconName: z.ZodEnum<{
   form: "form";
+  list: "list";
   link: "link";
   check: "check";
-  list: "list";
   plus: "plus";
   minus: "minus";
   close: "close";
@@ -95,9 +95,9 @@ declare const iconName: z.ZodEnum<{
 declare const iconProps: z.ZodObject<{
   name: z.ZodEnum<{
     form: "form";
+    list: "list";
     link: "link";
     check: "check";
-    list: "list";
     plus: "plus";
     minus: "minus";
     close: "close";
@@ -156,9 +156,9 @@ declare const iconProps: z.ZodObject<{
 declare const iconButtonProps: z.ZodObject<{
   icon: z.ZodEnum<{
     form: "form";
+    list: "list";
     link: "link";
     check: "check";
-    list: "list";
     plus: "plus";
     minus: "minus";
     close: "close";
@@ -223,8 +223,8 @@ declare const iconButtonProps: z.ZodObject<{
 }, z.core.$strip>;
 declare const chevronIconProps: z.ZodObject<{
   direction: z.ZodEnum<{
-    right: "right";
     left: "left";
+    right: "right";
     up: "up";
     down: "down";
   }>;
@@ -304,9 +304,9 @@ declare const tableProps: z.ZodObject<{
   columns: z.ZodArray<z.ZodObject<{
     label: z.ZodString;
     align: z.ZodOptional<z.ZodEnum<{
-      right: "right";
-      left: "left";
       center: "center";
+      left: "left";
+      right: "right";
     }>>;
   }, z.core.$strip>>;
   rows: z.ZodArray<z.ZodArray<z.ZodString>>;
@@ -404,14 +404,14 @@ declare const stackProps: z.ZodObject<{
   }>>;
   align: z.ZodOptional<z.ZodEnum<{
     start: "start";
-    end: "end";
     center: "center";
+    end: "end";
     stretch: "stretch";
   }>>;
   justify: z.ZodOptional<z.ZodEnum<{
     start: "start";
-    end: "end";
     center: "center";
+    end: "end";
     between: "between";
   }>>;
 }, z.core.$strip>;
@@ -616,10 +616,10 @@ declare const modalProps: z.ZodObject<{
   triggerLabel: z.ZodString;
   title: z.ZodString;
   type: z.ZodOptional<z.ZodEnum<{
+    center: "center";
+    left: "left";
     right: "right";
     bottom: "bottom";
-    left: "left";
-    center: "center";
   }>>;
 }, z.core.$strip>;
 declare const dialogProps: z.ZodObject<{
@@ -630,8 +630,8 @@ declare const drawerProps: z.ZodObject<{
   triggerLabel: z.ZodString;
   title: z.ZodString;
   side: z.ZodOptional<z.ZodEnum<{
-    right: "right";
     left: "left";
+    right: "right";
   }>>;
 }, z.core.$strip>;
 declare const popoverProps: z.ZodObject<{