@k8o/arte-odyssey 10.1.2 → 10.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/buttons/icon-button/icon-button.d.mts +1 -1
- package/dist/components/buttons/icon-button/icon-button.mjs +1 -1
- package/dist/components/feedback/toast/toast.mjs +2 -2
- package/dist/components/form/autocomplete/autocomplete.mjs +20 -28
- package/dist/components/form/checkbox/checkbox.mjs +1 -1
- package/dist/components/form/checkbox-card/checkbox-card.mjs +1 -1
- package/dist/components/form/checkbox-group/index.d.mts +1 -1
- package/dist/components/form/file-field/file-field.mjs +1 -1
- package/dist/components/form/number-field/number-field.mjs +1 -1
- package/dist/components/icons/index.d.mts +2 -2
- package/dist/components/icons/index.mjs +2 -2
- package/dist/components/icons/lucide-deep.d.mts +9 -0
- package/dist/components/icons/lucide-imports.d.mts +58 -0
- package/dist/components/icons/lucide-imports.mjs +58 -0
- package/dist/components/icons/lucide.d.mts +4 -1
- package/dist/components/icons/lucide.mjs +14 -2
- package/dist/components/index.d.mts +2 -2
- package/dist/components/index.mjs +11 -11
- package/dist/components/navigation/tabs/tabs.mjs +1 -1
- package/dist/components/overlays/_internal/use-list-navigation.d.mts +40 -0
- package/dist/components/overlays/_internal/use-list-navigation.mjs +95 -0
- package/dist/components/overlays/dialog/dialog.mjs +1 -1
- package/dist/components/overlays/drawer/drawer.mjs +1 -1
- package/dist/components/overlays/dropdown-menu/dropdown-menu.d.mts +2 -1
- package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs +39 -52
- package/dist/components/overlays/dropdown-menu/hooks.d.mts +14 -294
- package/dist/components/overlays/dropdown-menu/hooks.mjs +7 -18
- package/dist/components/overlays/list-box/hooks.d.mts +12 -292
- package/dist/components/overlays/list-box/hooks.mjs +7 -16
- package/dist/components/overlays/list-box/list-box.d.mts +1 -1
- package/dist/components/overlays/list-box/list-box.mjs +25 -32
- package/dist/components/overlays/popover/anchor-positioning.d.mts +26 -0
- package/dist/components/overlays/popover/anchor-positioning.mjs +44 -0
- package/dist/components/overlays/popover/hooks.d.mts +10 -13
- package/dist/components/overlays/popover/hooks.mjs +7 -14
- package/dist/components/overlays/popover/popover.d.mts +2 -3
- package/dist/components/overlays/popover/popover.mjs +31 -59
- package/dist/components/overlays/tooltip/tooltip.d.mts +1 -1
- package/dist/components/overlays/tooltip/tooltip.mjs +2 -23
- package/dist/helpers/index.mjs +2 -2
- package/dist/hooks/focus-trap/index.d.mts +19 -0
- package/dist/hooks/focus-trap/index.mjs +51 -0
- package/dist/hooks/index.mjs +4 -4
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +34 -34
- package/dist/integrations/_shared/renderers.mjs +6 -6
- package/dist/integrations/_shared/schemas.d.mts +11 -11
- package/dist/integrations/json-render/catalog.d.mts +10 -15
- package/dist/integrations/openui/form-views.d.mts +0 -9
- package/dist/integrations/openui/form-views.mjs +0 -9
- package/dist/styles/base.css +39 -1
- package/dist/styles/tokens.css +0 -1
- package/dist/types/variables.d.mts +6 -1
- package/package.json +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { Placement } from "../../../types/variables.mjs";
|
|
1
2
|
import { TooltipTriggerProps } from "../../overlays/tooltip/tooltip.mjs";
|
|
2
3
|
import { FC, HTMLProps, ReactNode } from "react";
|
|
3
|
-
import { Placement } from "@floating-ui/react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/buttons/icon-button/icon-button.d.ts
|
|
6
6
|
type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
|
|
3
3
|
import { cn } from "../../../helpers/cn.mjs";
|
|
4
|
-
import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
|
|
5
4
|
import { chain } from "../../../helpers/chain.mjs";
|
|
6
5
|
import { mergeRefs } from "../../../helpers/merge-refs.mjs";
|
|
6
|
+
import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
|
|
7
7
|
import { useTransition } from "react";
|
|
8
8
|
import { useFormStatus } from "react-dom";
|
|
9
9
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useToast } from "./context.mjs";
|
|
3
|
-
import { Alert } from "../alert/alert.mjs";
|
|
4
2
|
import { useTimeout } from "../../../hooks/timeout/index.mjs";
|
|
3
|
+
import { Alert } from "../alert/alert.mjs";
|
|
4
|
+
import { useToast } from "./context.mjs";
|
|
5
5
|
import { useCallback } from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/feedback/toast/toast.tsx
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
|
|
3
3
|
import { cn } from "../../../helpers/cn.mjs";
|
|
4
|
-
import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
|
|
5
|
-
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
6
|
-
import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
|
|
7
4
|
import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
|
|
8
5
|
import { useDeferredDebounce } from "../../../hooks/deferred-debounce/index.mjs";
|
|
6
|
+
import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
|
|
7
|
+
import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
|
|
8
|
+
import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
|
|
9
|
+
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
9
10
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
10
11
|
import { useFormStatus } from "react-dom";
|
|
11
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
-
import { autoUpdate, flip, offset, size, useFloating } from "@floating-ui/react";
|
|
13
13
|
//#region src/components/form/autocomplete/autocomplete.tsx
|
|
14
14
|
const Autocomplete = ({ id, name, invalid = false, disabled = false, required = false, options, value, defaultValue, onChange, ...rest }) => {
|
|
15
15
|
const [currentValue, handleChange] = useControllableState({
|
|
@@ -21,25 +21,18 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
|
|
|
21
21
|
const { isOpen, open, close } = useDisclosure();
|
|
22
22
|
const [text, setText] = useState("");
|
|
23
23
|
const [selectIndex, setSelectIndex] = useState();
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const referenceEl = elements.reference instanceof HTMLElement ? elements.reference : null;
|
|
37
|
-
const isVertical = referenceEl !== null && getComputedStyle(referenceEl).writingMode.startsWith("vertical");
|
|
38
|
-
Object.assign(elements.floating.style, { inlineSize: `${isVertical ? rects.reference.height : rects.reference.width}px` });
|
|
39
|
-
} })
|
|
40
|
-
],
|
|
41
|
-
transform: false
|
|
42
|
-
});
|
|
24
|
+
const writingMode = useWritingMode(ref);
|
|
25
|
+
const anchorName = `--ao-ac-${id.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
|
|
26
|
+
const listboxStyle = {
|
|
27
|
+
position: "fixed",
|
|
28
|
+
inset: "auto",
|
|
29
|
+
margin: 0,
|
|
30
|
+
marginTop: "4px",
|
|
31
|
+
positionAnchor: anchorName,
|
|
32
|
+
positionArea: "bottom span-right",
|
|
33
|
+
positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline",
|
|
34
|
+
inlineSize: `anchor-size(${writingMode === "vertical" ? "height" : "width"})`
|
|
35
|
+
};
|
|
43
36
|
const [deferredText, isPending] = useDeferredDebounce(text);
|
|
44
37
|
const filteredOptions = options.filter((option) => option.label.includes(deferredText));
|
|
45
38
|
const { pending: formPending } = useFormStatus();
|
|
@@ -59,10 +52,10 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
|
|
|
59
52
|
document.removeEventListener("click", handleClick);
|
|
60
53
|
};
|
|
61
54
|
}, [reset]);
|
|
62
|
-
const setReferenceRef = (node) => {
|
|
55
|
+
const setReferenceRef = useCallback((node) => {
|
|
63
56
|
ref.current = node;
|
|
64
|
-
|
|
65
|
-
};
|
|
57
|
+
if (node) node.style.setProperty("anchor-name", anchorName);
|
|
58
|
+
}, [anchorName]);
|
|
66
59
|
return /* @__PURE__ */ jsxs("div", {
|
|
67
60
|
className: cn("relative rounded-xl border border-border-base bg-bg-base inline-full", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
|
|
68
61
|
ref: setReferenceRef,
|
|
@@ -175,9 +168,8 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
|
|
|
175
168
|
}),
|
|
176
169
|
isOpen && /* @__PURE__ */ jsx("div", {
|
|
177
170
|
className: "bg-bg-raised z-10 rounded-xl shadow-md",
|
|
178
|
-
ref: refs.setFloating,
|
|
179
171
|
role: "presentation",
|
|
180
|
-
style:
|
|
172
|
+
style: listboxStyle,
|
|
181
173
|
children: /* @__PURE__ */ jsxs("ul", {
|
|
182
174
|
"aria-busy": isPending || void 0,
|
|
183
175
|
className: cn("max-h-96 py-2 transition-opacity vertical:max-h-none vertical:max-w-96", isPending && "opacity-60"),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
|
|
3
3
|
import { cn } from "../../../helpers/cn.mjs";
|
|
4
|
-
import { CheckIcon } from "../../icons/lucide.mjs";
|
|
5
4
|
import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
|
|
5
|
+
import { CheckIcon } from "../../icons/lucide.mjs";
|
|
6
6
|
import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
|
|
7
7
|
import { useFormStatus } from "react-dom";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../../../helpers/cn.mjs";
|
|
3
|
-
import { CheckIcon } from "../../icons/lucide.mjs";
|
|
4
3
|
import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
|
|
4
|
+
import { CheckIcon } from "../../icons/lucide.mjs";
|
|
5
5
|
import { useId } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/form/checkbox-card/checkbox-card.tsx
|
|
@@ -33,7 +33,7 @@ declare const CheckboxGroup: import("react").FC<{
|
|
|
33
33
|
Item: import("react").FC<{
|
|
34
34
|
itemValue?: string;
|
|
35
35
|
label: string;
|
|
36
|
-
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "
|
|
36
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "className" | "style" | "checked" | "defaultChecked" | "children"> & ({
|
|
37
37
|
value: boolean;
|
|
38
38
|
onChange: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
|
|
39
39
|
defaultChecked?: never;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
|
|
3
|
-
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
4
3
|
import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
|
|
4
|
+
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
5
5
|
import { useCallback, useId, useMemo, useRef, useState } from "react";
|
|
6
6
|
import { useFormStatus } from "react-dom";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
|
|
3
3
|
import { cn } from "../../../helpers/cn.mjs";
|
|
4
|
-
import { ChevronIcon } from "../../icons/lucide.mjs";
|
|
5
4
|
import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
|
|
5
|
+
import { ChevronIcon } from "../../icons/lucide.mjs";
|
|
6
6
|
import { toPrecision } from "../../../internal/to-precision.mjs";
|
|
7
7
|
import { clamp } from "../../../internal/clamp.mjs";
|
|
8
8
|
import { cast } from "./cast.mjs";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ArteOdyssey } from "./arte-odyssey.mjs";
|
|
2
2
|
import { GitHubIcon } from "./github-mark.mjs";
|
|
3
3
|
import { Logo, LogoIcon } from "./logo.mjs";
|
|
4
|
-
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 "./lucide.mjs";
|
|
4
|
+
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 "./lucide.mjs";
|
|
5
5
|
import { QiitaIcon } from "./qiita.mjs";
|
|
6
6
|
import { TwitterIcon } from "./twitter.mjs";
|
|
7
7
|
import { VerticalWritingIcon } from "./vertical-writing.mjs";
|
|
8
|
-
export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };
|
|
8
|
+
export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FlaskIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PackageIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SquircleIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ArteOdyssey } from "./arte-odyssey.mjs";
|
|
2
2
|
import { GitHubIcon } from "./github-mark.mjs";
|
|
3
3
|
import { Logo, LogoIcon } from "./logo.mjs";
|
|
4
|
-
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 "./lucide.mjs";
|
|
4
|
+
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 "./lucide.mjs";
|
|
5
5
|
import { QiitaIcon } from "./qiita.mjs";
|
|
6
6
|
import { TwitterIcon } from "./twitter.mjs";
|
|
7
7
|
import { VerticalWritingIcon } from "./vertical-writing.mjs";
|
|
8
|
-
export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };
|
|
8
|
+
export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FlaskIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PackageIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SquircleIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//#region src/components/icons/lucide-deep.d.ts
|
|
2
|
+
// lucide-react の個別アイコンファイル(dist/esm/icons/*.mjs)には型宣言が無いため、
|
|
3
|
+
// deep import に型を与える。実体は LucideIcon(forwardRef コンポーネント)。
|
|
4
|
+
// バレル import を避けて Vite dev の事前バンドル不具合(named export の undefined 化)を回避する。
|
|
5
|
+
declare module 'lucide-react/dist/esm/icons/*' {
|
|
6
|
+
import type { LucideIcon } from 'lucide-react';
|
|
7
|
+
const icon: LucideIcon;
|
|
8
|
+
export default icon;
|
|
9
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import Accessibility from "lucide-react/dist/esm/icons/accessibility.mjs";
|
|
2
|
+
import Angry from "lucide-react/dist/esm/icons/angry.mjs";
|
|
3
|
+
import Annoyed from "lucide-react/dist/esm/icons/annoyed.mjs";
|
|
4
|
+
import Atom from "lucide-react/dist/esm/icons/atom.mjs";
|
|
5
|
+
import Bell from "lucide-react/dist/esm/icons/bell.mjs";
|
|
6
|
+
import Blend from "lucide-react/dist/esm/icons/blend.mjs";
|
|
7
|
+
import BookOpenText from "lucide-react/dist/esm/icons/book-open-text.mjs";
|
|
8
|
+
import BookText from "lucide-react/dist/esm/icons/book-text.mjs";
|
|
9
|
+
import Bookmark from "lucide-react/dist/esm/icons/bookmark.mjs";
|
|
10
|
+
import Bot from "lucide-react/dist/esm/icons/bot.mjs";
|
|
11
|
+
import Calendar from "lucide-react/dist/esm/icons/calendar.mjs";
|
|
12
|
+
import Check from "lucide-react/dist/esm/icons/check.mjs";
|
|
13
|
+
import ChevronDown from "lucide-react/dist/esm/icons/chevron-down.mjs";
|
|
14
|
+
import ChevronLeft from "lucide-react/dist/esm/icons/chevron-left.mjs";
|
|
15
|
+
import ChevronRight from "lucide-react/dist/esm/icons/chevron-right.mjs";
|
|
16
|
+
import ChevronUp from "lucide-react/dist/esm/icons/chevron-up.mjs";
|
|
17
|
+
import CircleAlert from "lucide-react/dist/esm/icons/circle-alert.mjs";
|
|
18
|
+
import CircleCheck from "lucide-react/dist/esm/icons/circle-check.mjs";
|
|
19
|
+
import ClipboardPenLine from "lucide-react/dist/esm/icons/clipboard-pen-line.mjs";
|
|
20
|
+
import Clock from "lucide-react/dist/esm/icons/clock.mjs";
|
|
21
|
+
import Contrast from "lucide-react/dist/esm/icons/contrast.mjs";
|
|
22
|
+
import Droplets from "lucide-react/dist/esm/icons/droplets.mjs";
|
|
23
|
+
import ExternalLink from "lucide-react/dist/esm/icons/external-link.mjs";
|
|
24
|
+
import EyeOff from "lucide-react/dist/esm/icons/eye-off.mjs";
|
|
25
|
+
import Eye from "lucide-react/dist/esm/icons/eye.mjs";
|
|
26
|
+
import FlaskConical from "lucide-react/dist/esm/icons/flask-conical.mjs";
|
|
27
|
+
import History from "lucide-react/dist/esm/icons/history.mjs";
|
|
28
|
+
import Info from "lucide-react/dist/esm/icons/info.mjs";
|
|
29
|
+
import Laugh from "lucide-react/dist/esm/icons/laugh.mjs";
|
|
30
|
+
import Lightbulb from "lucide-react/dist/esm/icons/lightbulb.mjs";
|
|
31
|
+
import Link from "lucide-react/dist/esm/icons/link.mjs";
|
|
32
|
+
import ListMinus from "lucide-react/dist/esm/icons/list-minus.mjs";
|
|
33
|
+
import List from "lucide-react/dist/esm/icons/list.mjs";
|
|
34
|
+
import Mail from "lucide-react/dist/esm/icons/mail.mjs";
|
|
35
|
+
import MapPin from "lucide-react/dist/esm/icons/map-pin.mjs";
|
|
36
|
+
import Minus from "lucide-react/dist/esm/icons/minus.mjs";
|
|
37
|
+
import MoonStar from "lucide-react/dist/esm/icons/moon-star.mjs";
|
|
38
|
+
import Package from "lucide-react/dist/esm/icons/package.mjs";
|
|
39
|
+
import PaintBucket from "lucide-react/dist/esm/icons/paint-bucket.mjs";
|
|
40
|
+
import Palette from "lucide-react/dist/esm/icons/palette.mjs";
|
|
41
|
+
import Plus from "lucide-react/dist/esm/icons/plus.mjs";
|
|
42
|
+
import Presentation from "lucide-react/dist/esm/icons/presentation.mjs";
|
|
43
|
+
import Rocket from "lucide-react/dist/esm/icons/rocket.mjs";
|
|
44
|
+
import Rss from "lucide-react/dist/esm/icons/rss.mjs";
|
|
45
|
+
import Send from "lucide-react/dist/esm/icons/send.mjs";
|
|
46
|
+
import ShieldCheck from "lucide-react/dist/esm/icons/shield-check.mjs";
|
|
47
|
+
import Smile from "lucide-react/dist/esm/icons/smile.mjs";
|
|
48
|
+
import Sparkles from "lucide-react/dist/esm/icons/sparkles.mjs";
|
|
49
|
+
import Squircle from "lucide-react/dist/esm/icons/squircle.mjs";
|
|
50
|
+
import Sun from "lucide-react/dist/esm/icons/sun.mjs";
|
|
51
|
+
import Table2 from "lucide-react/dist/esm/icons/table-2.mjs";
|
|
52
|
+
import Tag from "lucide-react/dist/esm/icons/tag.mjs";
|
|
53
|
+
import AlignRight from "lucide-react/dist/esm/icons/text-align-end.mjs";
|
|
54
|
+
import ThumbsDown from "lucide-react/dist/esm/icons/thumbs-down.mjs";
|
|
55
|
+
import ThumbsUp from "lucide-react/dist/esm/icons/thumbs-up.mjs";
|
|
56
|
+
import TriangleAlert from "lucide-react/dist/esm/icons/triangle-alert.mjs";
|
|
57
|
+
import X from "lucide-react/dist/esm/icons/x.mjs";
|
|
58
|
+
export { Accessibility, AlignRight, Angry, Annoyed, Atom, Bell, Blend, BookOpenText, BookText, Bookmark, Bot, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, ClipboardPenLine, Clock, Contrast, Droplets, ExternalLink, Eye, EyeOff, FlaskConical, History, Info, Laugh, Lightbulb, Link, List, ListMinus, Mail, MapPin, Minus, MoonStar, Package, PaintBucket, Palette, Plus, Presentation, Rocket, Rss, Send, ShieldCheck, Smile, Sparkles, Squircle, Sun, Table2, Tag, ThumbsDown, ThumbsUp, TriangleAlert, X };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import Accessibility from "lucide-react/dist/esm/icons/accessibility.mjs";
|
|
2
|
+
import Angry from "lucide-react/dist/esm/icons/angry.mjs";
|
|
3
|
+
import Annoyed from "lucide-react/dist/esm/icons/annoyed.mjs";
|
|
4
|
+
import Atom from "lucide-react/dist/esm/icons/atom.mjs";
|
|
5
|
+
import Bell from "lucide-react/dist/esm/icons/bell.mjs";
|
|
6
|
+
import Blend from "lucide-react/dist/esm/icons/blend.mjs";
|
|
7
|
+
import BookOpenText from "lucide-react/dist/esm/icons/book-open-text.mjs";
|
|
8
|
+
import BookText from "lucide-react/dist/esm/icons/book-text.mjs";
|
|
9
|
+
import Bookmark from "lucide-react/dist/esm/icons/bookmark.mjs";
|
|
10
|
+
import Bot from "lucide-react/dist/esm/icons/bot.mjs";
|
|
11
|
+
import Calendar from "lucide-react/dist/esm/icons/calendar.mjs";
|
|
12
|
+
import Check from "lucide-react/dist/esm/icons/check.mjs";
|
|
13
|
+
import ChevronDown from "lucide-react/dist/esm/icons/chevron-down.mjs";
|
|
14
|
+
import ChevronLeft from "lucide-react/dist/esm/icons/chevron-left.mjs";
|
|
15
|
+
import ChevronRight from "lucide-react/dist/esm/icons/chevron-right.mjs";
|
|
16
|
+
import ChevronUp from "lucide-react/dist/esm/icons/chevron-up.mjs";
|
|
17
|
+
import CircleAlert from "lucide-react/dist/esm/icons/circle-alert.mjs";
|
|
18
|
+
import CircleCheck from "lucide-react/dist/esm/icons/circle-check.mjs";
|
|
19
|
+
import ClipboardPenLine from "lucide-react/dist/esm/icons/clipboard-pen-line.mjs";
|
|
20
|
+
import Clock from "lucide-react/dist/esm/icons/clock.mjs";
|
|
21
|
+
import Contrast from "lucide-react/dist/esm/icons/contrast.mjs";
|
|
22
|
+
import Droplets from "lucide-react/dist/esm/icons/droplets.mjs";
|
|
23
|
+
import ExternalLink from "lucide-react/dist/esm/icons/external-link.mjs";
|
|
24
|
+
import EyeOff from "lucide-react/dist/esm/icons/eye-off.mjs";
|
|
25
|
+
import Eye from "lucide-react/dist/esm/icons/eye.mjs";
|
|
26
|
+
import FlaskConical from "lucide-react/dist/esm/icons/flask-conical.mjs";
|
|
27
|
+
import History from "lucide-react/dist/esm/icons/history.mjs";
|
|
28
|
+
import Info from "lucide-react/dist/esm/icons/info.mjs";
|
|
29
|
+
import Laugh from "lucide-react/dist/esm/icons/laugh.mjs";
|
|
30
|
+
import Lightbulb from "lucide-react/dist/esm/icons/lightbulb.mjs";
|
|
31
|
+
import Link from "lucide-react/dist/esm/icons/link.mjs";
|
|
32
|
+
import ListMinus from "lucide-react/dist/esm/icons/list-minus.mjs";
|
|
33
|
+
import List from "lucide-react/dist/esm/icons/list.mjs";
|
|
34
|
+
import Mail from "lucide-react/dist/esm/icons/mail.mjs";
|
|
35
|
+
import MapPin from "lucide-react/dist/esm/icons/map-pin.mjs";
|
|
36
|
+
import Minus from "lucide-react/dist/esm/icons/minus.mjs";
|
|
37
|
+
import MoonStar from "lucide-react/dist/esm/icons/moon-star.mjs";
|
|
38
|
+
import Package from "lucide-react/dist/esm/icons/package.mjs";
|
|
39
|
+
import PaintBucket from "lucide-react/dist/esm/icons/paint-bucket.mjs";
|
|
40
|
+
import Palette from "lucide-react/dist/esm/icons/palette.mjs";
|
|
41
|
+
import Plus from "lucide-react/dist/esm/icons/plus.mjs";
|
|
42
|
+
import Presentation from "lucide-react/dist/esm/icons/presentation.mjs";
|
|
43
|
+
import Rocket from "lucide-react/dist/esm/icons/rocket.mjs";
|
|
44
|
+
import Rss from "lucide-react/dist/esm/icons/rss.mjs";
|
|
45
|
+
import Send from "lucide-react/dist/esm/icons/send.mjs";
|
|
46
|
+
import ShieldCheck from "lucide-react/dist/esm/icons/shield-check.mjs";
|
|
47
|
+
import Smile from "lucide-react/dist/esm/icons/smile.mjs";
|
|
48
|
+
import Sparkles from "lucide-react/dist/esm/icons/sparkles.mjs";
|
|
49
|
+
import Squircle from "lucide-react/dist/esm/icons/squircle.mjs";
|
|
50
|
+
import Sun from "lucide-react/dist/esm/icons/sun.mjs";
|
|
51
|
+
import Table2 from "lucide-react/dist/esm/icons/table-2.mjs";
|
|
52
|
+
import Tag from "lucide-react/dist/esm/icons/tag.mjs";
|
|
53
|
+
import AlignRight from "lucide-react/dist/esm/icons/text-align-end.mjs";
|
|
54
|
+
import ThumbsDown from "lucide-react/dist/esm/icons/thumbs-down.mjs";
|
|
55
|
+
import ThumbsUp from "lucide-react/dist/esm/icons/thumbs-up.mjs";
|
|
56
|
+
import TriangleAlert from "lucide-react/dist/esm/icons/triangle-alert.mjs";
|
|
57
|
+
import X from "lucide-react/dist/esm/icons/x.mjs";
|
|
58
|
+
export { Accessibility, AlignRight, Angry, Annoyed, Atom, Bell, Blend, BookOpenText, BookText, Bookmark, Bot, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, ClipboardPenLine, Clock, Contrast, Droplets, ExternalLink, Eye, EyeOff, FlaskConical, History, Info, Laugh, Lightbulb, Link, List, ListMinus, Mail, MapPin, Minus, MoonStar, Package, PaintBucket, Palette, Plus, Presentation, Rocket, Rss, Send, ShieldCheck, Smile, Sparkles, Squircle, Sun, Table2, Tag, ThumbsDown, ThumbsUp, TriangleAlert, X };
|
|
@@ -56,5 +56,8 @@ declare const ShieldCheckIcon: FC<IconProps>;
|
|
|
56
56
|
declare const AccessibilityIcon: FC<IconProps>;
|
|
57
57
|
declare const SparklesIcon: FC<IconProps>;
|
|
58
58
|
declare const HorizontalWritingIcon: FC<IconProps>;
|
|
59
|
+
declare const SquircleIcon: FC<IconProps>;
|
|
60
|
+
declare const FlaskIcon: FC<IconProps>;
|
|
61
|
+
declare const PackageIcon: FC<IconProps>;
|
|
59
62
|
//#endregion
|
|
60
|
-
export { 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 };
|
|
63
|
+
export { 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 };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseIcon } from "./base.mjs";
|
|
2
|
+
import { Accessibility, AlignRight, Angry, Annoyed, Atom, Bell, Blend, BookOpenText, BookText, Bookmark, Bot, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, ClipboardPenLine, Clock, Contrast, Droplets, ExternalLink, Eye, EyeOff, FlaskConical, History, Info, Laugh, Lightbulb, Link, List, ListMinus, Mail, MapPin, Minus, MoonStar, Package, PaintBucket, Palette, Plus, Presentation, Rocket, Rss, Send, ShieldCheck, Smile, Sparkles, Squircle, Sun, Table2, Tag, ThumbsDown, ThumbsUp, TriangleAlert, X } from "./lucide-imports.mjs";
|
|
2
3
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Accessibility, AlignRight, Angry, Annoyed, Atom, Bell, Blend, BookOpenText, BookText, Bookmark, Bot, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, ClipboardPenLine, Clock, Contrast, Droplets, ExternalLink, Eye, EyeOff, History, Info, Laugh, Lightbulb, Link, List, ListMinus, Mail, MapPin, Minus, MoonStar, PaintBucket, Palette, Plus, Presentation, Rocket, Rss, Send, ShieldCheck, Smile, Sparkles, Sun, Table2, Tag, ThumbsDown, ThumbsUp, TriangleAlert, X } from "lucide-react";
|
|
4
4
|
//#region src/components/icons/lucide.tsx
|
|
5
5
|
const CHEVRON_BY_DIRECTION = {
|
|
6
6
|
up: ChevronUp,
|
|
@@ -212,5 +212,17 @@ const HorizontalWritingIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon,
|
|
|
212
212
|
renderItem: (props) => /* @__PURE__ */ jsx(BookOpenText, { ...props }),
|
|
213
213
|
size
|
|
214
214
|
});
|
|
215
|
+
const SquircleIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
|
|
216
|
+
renderItem: (props) => /* @__PURE__ */ jsx(Squircle, { ...props }),
|
|
217
|
+
size
|
|
218
|
+
});
|
|
219
|
+
const FlaskIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
|
|
220
|
+
renderItem: (props) => /* @__PURE__ */ jsx(FlaskConical, { ...props }),
|
|
221
|
+
size
|
|
222
|
+
});
|
|
223
|
+
const PackageIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
|
|
224
|
+
renderItem: (props) => /* @__PURE__ */ jsx(Package, { ...props }),
|
|
225
|
+
size
|
|
226
|
+
});
|
|
215
227
|
//#endregion
|
|
216
|
-
export { 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 };
|
|
228
|
+
export { 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 };
|
|
@@ -34,7 +34,7 @@ import { Textarea } from "./form/textarea/textarea.mjs";
|
|
|
34
34
|
import { ArteOdyssey } from "./icons/arte-odyssey.mjs";
|
|
35
35
|
import { GitHubIcon } from "./icons/github-mark.mjs";
|
|
36
36
|
import { Logo, LogoIcon } from "./icons/logo.mjs";
|
|
37
|
-
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 "./icons/lucide.mjs";
|
|
37
|
+
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 "./icons/lucide.mjs";
|
|
38
38
|
import { QiitaIcon } from "./icons/qiita.mjs";
|
|
39
39
|
import { TwitterIcon } from "./icons/twitter.mjs";
|
|
40
40
|
import { VerticalWritingIcon } from "./icons/vertical-writing.mjs";
|
|
@@ -55,4 +55,4 @@ import { useOpenContext } from "./overlays/popover/hooks.mjs";
|
|
|
55
55
|
import { Popover } from "./overlays/popover/popover.mjs";
|
|
56
56
|
import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
|
|
57
57
|
import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
|
|
58
|
-
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, type GridProps, 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, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
|
58
|
+
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, type GridProps, 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, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import { Spinner } from "./feedback/spinner/spinner.mjs";
|
|
2
2
|
import { Button } from "./buttons/button/button.mjs";
|
|
3
|
-
import {
|
|
3
|
+
import { useOpenContext } from "./overlays/popover/hooks.mjs";
|
|
4
|
+
import { Popover } from "./overlays/popover/popover.mjs";
|
|
5
|
+
import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
|
|
6
|
+
import { IconButton } from "./buttons/icon-button/icon-button.mjs";
|
|
4
7
|
import { ArteOdyssey } from "./icons/arte-odyssey.mjs";
|
|
5
8
|
import { GitHubIcon } from "./icons/github-mark.mjs";
|
|
6
9
|
import { Logo, LogoIcon } from "./icons/logo.mjs";
|
|
7
|
-
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 "./icons/lucide.mjs";
|
|
10
|
+
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 "./icons/lucide.mjs";
|
|
8
11
|
import { QiitaIcon } from "./icons/qiita.mjs";
|
|
9
12
|
import { TwitterIcon } from "./icons/twitter.mjs";
|
|
10
13
|
import { VerticalWritingIcon } from "./icons/vertical-writing.mjs";
|
|
11
|
-
import { Alert } from "./feedback/alert/alert.mjs";
|
|
12
|
-
import { ToastProvider } from "./feedback/toast/provider.mjs";
|
|
13
|
-
import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
|
|
14
|
-
import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
|
|
15
|
-
import { useOpenContext } from "./overlays/popover/hooks.mjs";
|
|
16
|
-
import { Popover } from "./overlays/popover/popover.mjs";
|
|
17
|
-
import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
|
|
18
|
-
import { IconButton } from "./buttons/icon-button/icon-button.mjs";
|
|
19
14
|
import { Accordion } from "./data-display/accordion/index.mjs";
|
|
20
15
|
import { Avatar } from "./data-display/avatar/avatar.mjs";
|
|
21
16
|
import { Badge } from "./data-display/badge/badge.mjs";
|
|
@@ -24,8 +19,11 @@ import { Card } from "./data-display/card/card.mjs";
|
|
|
24
19
|
import { Code } from "./data-display/code/code.mjs";
|
|
25
20
|
import { Heading } from "./data-display/heading/heading.mjs";
|
|
26
21
|
import { Table } from "./data-display/table/table.mjs";
|
|
22
|
+
import { Alert } from "./feedback/alert/alert.mjs";
|
|
27
23
|
import { Progress } from "./feedback/progress/progress.mjs";
|
|
28
24
|
import { Skeleton } from "./feedback/skeleton/skeleton.mjs";
|
|
25
|
+
import { useToast } from "./feedback/toast/context.mjs";
|
|
26
|
+
import { ToastProvider } from "./feedback/toast/provider.mjs";
|
|
29
27
|
import { Autocomplete } from "./form/autocomplete/autocomplete.mjs";
|
|
30
28
|
import { Checkbox } from "./form/checkbox/checkbox.mjs";
|
|
31
29
|
import { CheckboxCard } from "./form/checkbox-card/checkbox-card.mjs";
|
|
@@ -51,8 +49,10 @@ import { Breadcrumb } from "./navigation/breadcrumb/breadcrumb.mjs";
|
|
|
51
49
|
import { Pagination } from "./navigation/pagination/pagination.mjs";
|
|
52
50
|
import { Tabs } from "./navigation/tabs/tabs.mjs";
|
|
53
51
|
import { Dialog } from "./overlays/dialog/dialog.mjs";
|
|
52
|
+
import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
|
|
53
|
+
import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
|
|
54
54
|
import { Modal } from "./overlays/modal/modal.mjs";
|
|
55
55
|
import { Drawer } from "./overlays/drawer/drawer.mjs";
|
|
56
56
|
import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
|
|
57
57
|
import { ListBox } from "./overlays/list-box/list-box.mjs";
|
|
58
|
-
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, useOpenContext, usePortalRoot, useToast };
|
|
58
|
+
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, useOpenContext, usePortalRoot, useToast };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
|
|
3
3
|
import { cn } from "../../../helpers/cn.mjs";
|
|
4
|
-
import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
|
|
5
4
|
import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
|
|
6
5
|
import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
|
|
6
|
+
import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
|
|
7
7
|
import { useEffect, useId, useMemo, useRef } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import * as motion from "motion/react-client";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Dispatch, KeyboardEvent, SetStateAction } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/overlays/_internal/use-list-navigation.d.ts
|
|
4
|
+
type ListItemProps = {
|
|
5
|
+
ref: (node: HTMLElement | null) => void;
|
|
6
|
+
tabIndex: number;
|
|
7
|
+
onFocus: () => void;
|
|
8
|
+
};
|
|
9
|
+
type ListNavigation = {
|
|
10
|
+
getContentProps: () => {
|
|
11
|
+
onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
|
|
12
|
+
};
|
|
13
|
+
getItemProps: (index: number) => ListItemProps;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* 矢印キーによる roving-tabindex のリストナビゲーション。
|
|
17
|
+
* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
|
|
18
|
+
*
|
|
19
|
+
* コンテンツの書字方向に追従してキーを割り当てる:
|
|
20
|
+
* - 横書き: ↑=前 / ↓=次
|
|
21
|
+
* - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前(↑/↓ も保険として有効)
|
|
22
|
+
*
|
|
23
|
+
* roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
|
|
24
|
+
* その項目へフォーカスを移す。開いたら先頭(選択済みがあればそれ)をアクティブにする。
|
|
25
|
+
*/
|
|
26
|
+
declare const useListNavigation: ({
|
|
27
|
+
open,
|
|
28
|
+
activeIndex,
|
|
29
|
+
setActiveIndex,
|
|
30
|
+
selectedIndex,
|
|
31
|
+
loop
|
|
32
|
+
}: {
|
|
33
|
+
open: boolean;
|
|
34
|
+
activeIndex: number | null;
|
|
35
|
+
setActiveIndex: Dispatch<SetStateAction<number | null>>;
|
|
36
|
+
selectedIndex?: number | null;
|
|
37
|
+
loop?: boolean;
|
|
38
|
+
}) => ListNavigation;
|
|
39
|
+
//#endregion
|
|
40
|
+
export { ListItemProps, ListNavigation, useListNavigation };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
//#region src/components/overlays/_internal/use-list-navigation.ts
|
|
4
|
+
const isVerticalWritingMode = (el) => {
|
|
5
|
+
const wm = getComputedStyle(el).writingMode;
|
|
6
|
+
return wm.startsWith("vertical") || wm.startsWith("sideways");
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* 矢印キーによる roving-tabindex のリストナビゲーション。
|
|
10
|
+
* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
|
|
11
|
+
*
|
|
12
|
+
* コンテンツの書字方向に追従してキーを割り当てる:
|
|
13
|
+
* - 横書き: ↑=前 / ↓=次
|
|
14
|
+
* - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前(↑/↓ も保険として有効)
|
|
15
|
+
*
|
|
16
|
+
* roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
|
|
17
|
+
* その項目へフォーカスを移す。開いたら先頭(選択済みがあればそれ)をアクティブにする。
|
|
18
|
+
*/
|
|
19
|
+
const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex = null, loop = true }) => {
|
|
20
|
+
const itemElementsRef = useRef([]);
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (!open) {
|
|
23
|
+
setActiveIndex(null);
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
setActiveIndex((prev) => prev ?? (selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0));
|
|
27
|
+
}, [
|
|
28
|
+
open,
|
|
29
|
+
selectedIndex,
|
|
30
|
+
setActiveIndex
|
|
31
|
+
]);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (open && activeIndex !== null) itemElementsRef.current[activeIndex]?.focus();
|
|
34
|
+
}, [open, activeIndex]);
|
|
35
|
+
const count = () => itemElementsRef.current.filter(Boolean).length;
|
|
36
|
+
const move = (delta) => {
|
|
37
|
+
const total = count();
|
|
38
|
+
if (total === 0) return;
|
|
39
|
+
setActiveIndex((prev) => {
|
|
40
|
+
const next = (prev ?? (delta === 1 ? -1 : total)) + delta;
|
|
41
|
+
if (loop) return (next + total) % total;
|
|
42
|
+
return Math.max(0, Math.min(total - 1, next));
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
const onKeyDown = (event) => {
|
|
46
|
+
const vertical = isVerticalWritingMode(event.currentTarget);
|
|
47
|
+
switch (event.key) {
|
|
48
|
+
case "ArrowDown":
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
move(1);
|
|
51
|
+
break;
|
|
52
|
+
case "ArrowUp":
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
move(-1);
|
|
55
|
+
break;
|
|
56
|
+
case "ArrowLeft":
|
|
57
|
+
if (vertical) {
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
move(1);
|
|
60
|
+
}
|
|
61
|
+
break;
|
|
62
|
+
case "ArrowRight":
|
|
63
|
+
if (vertical) {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
move(-1);
|
|
66
|
+
}
|
|
67
|
+
break;
|
|
68
|
+
case "Home":
|
|
69
|
+
event.preventDefault();
|
|
70
|
+
setActiveIndex(count() > 0 ? 0 : null);
|
|
71
|
+
break;
|
|
72
|
+
case "End": {
|
|
73
|
+
const total = count();
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
setActiveIndex(total > 0 ? total - 1 : null);
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
78
|
+
default: break;
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
return {
|
|
82
|
+
getContentProps: () => ({ onKeyDown }),
|
|
83
|
+
getItemProps: (index) => ({
|
|
84
|
+
ref: (node) => {
|
|
85
|
+
itemElementsRef.current[index] = node;
|
|
86
|
+
},
|
|
87
|
+
tabIndex: activeIndex === index ? 0 : -1,
|
|
88
|
+
onFocus: () => {
|
|
89
|
+
setActiveIndex(index);
|
|
90
|
+
}
|
|
91
|
+
})
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
//#endregion
|
|
95
|
+
export { useListNavigation };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
|
|
3
|
-
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
4
3
|
import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
|
|
4
|
+
import { CloseIcon } from "../../icons/lucide.mjs";
|
|
5
5
|
import { Heading } from "../../data-display/heading/heading.mjs";
|
|
6
6
|
import { useId, useMemo } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|