@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/_internal/form-value.mjs

@@ -0,0 +1,91 @@
+"use client";
+import sr_only_module_default from "./sr-only.module.mjs";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/_internal/form-value.tsx
+const parse = (key) => JSON.parse(key);
+const write = (select, values) => {
+	for (const option of select.options) option.selected = values.includes(option.value);
+};
+/**
+* The named control a composite component submits through. `type="hidden"`
+* would not do: it is barred from constraint validation, it cannot take focus
+* when the form moves to a failure, and with nothing selected there would be
+* no element carrying the name at all — so neither `required` nor a rule could
+* reach it. A `<select>` is always present, validates natively (`required`
+* means "at least one"), restores itself on reset, and keeps the baseline in
+* each option's `defaultSelected`, where dirtiness is read from.
+*/
+const FormValue = ({ name, values, defaultValues, multiple, required, disabled, onReset, focusTarget }) => {
+	const ref = useRef(null);
+	const resetting = useRef(false);
+	const valuesKey = JSON.stringify(values);
+	const defaultsKey = defaultValues === void 0 ? void 0 : JSON.stringify(defaultValues);
+	const announced = useRef(valuesKey);
+	const [known, setKnown] = useState(values);
+	if (values.some((value) => !known.includes(value))) setKnown([...known, ...values.filter((value) => !known.includes(value))]);
+	useLayoutEffect(() => {
+		const select = ref.current;
+		if (select === null || defaultsKey === void 0) return;
+		const defaults = parse(defaultsKey);
+		for (const option of select.options) option.defaultSelected = defaults.includes(option.value);
+	}, [defaultsKey]);
+	useLayoutEffect(() => {
+		const select = ref.current;
+		if (select === null) return;
+		write(select, parse(valuesKey));
+		if (announced.current === valuesKey) return;
+		announced.current = valuesKey;
+		if (!resetting.current) select.dispatchEvent(new Event("input", { bubbles: true }));
+	}, [valuesKey]);
+	const handleReset = useEffectEvent(() => {
+		onReset();
+	});
+	const handleRestored = useEffectEvent(() => {
+		const select = ref.current;
+		if (select !== null) write(select, values);
+	});
+	useEffect(() => {
+		const form = ref.current?.form;
+		if (!form) return;
+		const listener = () => {
+			resetting.current = true;
+			handleReset();
+			setTimeout(() => {
+				resetting.current = false;
+				handleRestored();
+			}, 0);
+		};
+		form.addEventListener("reset", listener);
+		return () => {
+			form.removeEventListener("reset", listener);
+		};
+	}, []);
+	const options = [.../* @__PURE__ */ new Set([
+		...values,
+		...defaultValues ?? [],
+		...known
+	])].filter((value) => value !== "");
+	return /* @__PURE__ */ jsx("select", {
+		"aria-hidden": true,
+		autoComplete: "off",
+		className: sr_only_module_default.srOnly,
+		defaultValue: multiple ? defaultValues ?? values : (defaultValues ?? values)[0],
+		disabled,
+		multiple,
+		name,
+		onFocus: () => {
+			focusTarget.current?.focus();
+		},
+		ref,
+		required,
+		size: 2,
+		tabIndex: -1,
+		children: options.map((value) => /* @__PURE__ */ jsx("option", {
+			value,
+			children: value
+		}, value))
+	});
+};
+//#endregion
+export { FormValue };

package/dist/components/_internal/high-contrast.css

@@ -0,0 +1,18 @@
+@layer properties, theme, base;
+
+@layer components {
+  .Txl4Pq_edge:not(:focus-visible) {
+    @media (prefers-contrast: more) {
+      outline: 1px solid var(--color-border-base);
+      outline-offset: -1px;
+    }
+
+    @media (forced-colors: active) {
+      outline-offset: -1px;
+      outline-width: 1px;
+      outline-style: solid;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/_internal/high-contrast.module.mjs

@@ -0,0 +1,5 @@
+import './high-contrast.css';
+//#region src/components/_internal/high-contrast.module.css
+var high_contrast_module_default = { "edge": "Txl4Pq_edge" };
+//#endregion
+export { high_contrast_module_default as default };

package/dist/components/_internal/ignore-changes.d.mts

@@ -0,0 +1,20 @@
+import { KeyboardEvent, MouseEvent } from "react";
+//#region src/components/_internal/ignore-changes.d.ts
+/**
+ * checkbox と radio を包む label の onClickCapture に渡す。
+ *
+ * click の既定の動作を止めればブラウザは切り替えを戻すが、戻すのは click を
+ * 配り終えたあとで、その間に React の値の追跡が切り替わったほうを覚える。
+ * すると onChange が呼ばれ、次に本当に切り替えたときの onChange は落ちる。
+ * 捕捉のうちに伝播を止め、React の変更の検出まで届かせない
+ */
+export declare const ignoreClick: (event: MouseEvent) => void;
+/** range の値をキーで動かすのは keydown の既定の動作なので、それを止める */
+export declare const ignoreStepKeys: (event: KeyboardEvent) => void;
+/**
+ * select は矢印キーなどに加えて、Space と F4 で一覧を開き、文字のキーで
+ * その文字から始まる候補を選ぶ。ctrl や meta の付いたキーはブラウザの
+ * ショートカットなので通す
+ */
+export declare const ignoreSelectKeys: (event: KeyboardEvent) => void;
+//#endregion

package/dist/components/_internal/ignore-changes.mjs

@@ -0,0 +1,37 @@
+//#region src/components/_internal/ignore-changes.ts
+/**
+* checkbox と radio を包む label の onClickCapture に渡す。
+*
+* click の既定の動作を止めればブラウザは切り替えを戻すが、戻すのは click を
+* 配り終えたあとで、その間に React の値の追跡が切り替わったほうを覚える。
+* すると onChange が呼ばれ、次に本当に切り替えたときの onChange は落ちる。
+* 捕捉のうちに伝播を止め、React の変更の検出まで届かせない
+*/
+const ignoreClick = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+const STEP_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+]);
+/** range の値をキーで動かすのは keydown の既定の動作なので、それを止める */
+const ignoreStepKeys = (event) => {
+	if (STEP_KEYS.has(event.key)) event.preventDefault();
+};
+/**
+* select は矢印キーなどに加えて、Space と F4 で一覧を開き、文字のキーで
+* その文字から始まる候補を選ぶ。ctrl や meta の付いたキーはブラウザの
+* ショートカットなので通す
+*/
+const ignoreSelectKeys = (event) => {
+	if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === "F4" || STEP_KEYS.has(event.key)) event.preventDefault();
+};
+//#endregion
+export { ignoreClick, ignoreSelectKeys, ignoreStepKeys };

package/dist/components/_internal/nav-link.css

@@ -0,0 +1,78 @@
+@layer properties, theme, base;
+
+@layer components {
+  .IsHXFa_link {
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    border-inline-start-width: 2px;
+    margin-inline-start: -1px;
+    padding-inline-end: calc(var(--spacing) * 3);
+    display: block;
+  }
+
+  .IsHXFa_link:focus-visible {
+    box-shadow: var(--shadow-ring-inset-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .IsHXFa_depth0 {
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
+
+  .IsHXFa_depth1 {
+    padding-inline-start: calc(var(--spacing) * 8);
+  }
+
+  .IsHXFa_depth2 {
+    padding-inline-start: calc(var(--spacing) * 12);
+  }
+
+  .IsHXFa_current {
+    border-color: var(--color-primary-border);
+    background-color: var(--color-primary-bg-subtle);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-base);
+  }
+
+  .IsHXFa_idle {
+    color: var(--color-fg-mute);
+    border-color: #0000;
+  }
+
+  @media (hover: hover) {
+    .IsHXFa_idle:hover {
+      border-color: var(--color-border-emphasize);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .IsHXFa_list {
+    margin-top: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * .5);
+    border-inline-start-width: 1px;
+    border-color: var(--color-border-mute);
+    flex-direction: column;
+    margin-inline-start: calc(var(--spacing) * 3);
+    display: flex;
+  }
+
+  .IsHXFa_title {
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--color-fg-subtle);
+  }
+}
+
+@layer utilities;

package/dist/components/_internal/nav-link.d.mts

@@ -0,0 +1,5 @@
+//#region src/components/_internal/nav-link.d.ts
+export declare const navLinkClassName: (isCurrent: boolean, depth?: number) => string;
+export declare const NAV_LIST_CLASS_NAME: any;
+export declare const NAV_TITLE_CLASS_NAME: any;
+//#endregion

package/dist/components/_internal/nav-link.mjs

@@ -0,0 +1,8 @@
+import nav_link_module_default from "./nav-link.module.mjs";
+import { clsx } from "clsx";
+//#region src/components/_internal/nav-link.ts
+const navLinkClassName = (isCurrent, depth = 0) => clsx(nav_link_module_default.link, depth === 0 && nav_link_module_default.depth0, depth === 1 && nav_link_module_default.depth1, depth >= 2 && nav_link_module_default.depth2, isCurrent ? nav_link_module_default.current : nav_link_module_default.idle);
+const NAV_LIST_CLASS_NAME = nav_link_module_default.list;
+const NAV_TITLE_CLASS_NAME = nav_link_module_default.title;
+//#endregion
+export { NAV_LIST_CLASS_NAME, NAV_TITLE_CLASS_NAME, navLinkClassName };

package/dist/components/_internal/nav-link.module.mjs

@@ -0,0 +1,14 @@
+import './nav-link.css';
+//#region src/components/_internal/nav-link.module.css
+var nav_link_module_default = {
+	"current": "IsHXFa_current",
+	"depth0": "IsHXFa_depth0",
+	"depth1": "IsHXFa_depth1",
+	"depth2": "IsHXFa_depth2",
+	"idle": "IsHXFa_idle",
+	"link": "IsHXFa_link",
+	"list": "IsHXFa_list",
+	"title": "IsHXFa_title"
+};
+//#endregion
+export { nav_link_module_default as default };

package/dist/components/_internal/sr-only.css

@@ -0,0 +1,17 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._2DJicW_srOnly {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}
+
+@layer utilities;

package/dist/components/_internal/sr-only.module.mjs

@@ -0,0 +1,5 @@
+import './sr-only.css';
+//#region src/components/_internal/sr-only.module.css
+var sr_only_module_default = { "srOnly": "_2DJicW_srOnly" };
+//#endregion
+export { sr_only_module_default as default };

package/dist/components/_internal/status-tone.css

@@ -0,0 +1,37 @@
+@layer properties, theme, base;
+
+@layer components {
+  .cEnG5W_surfaceSuccess {
+    background-color: var(--color-bg-success);
+  }
+
+  .cEnG5W_surfaceInfo {
+    background-color: var(--color-bg-info);
+  }
+
+  .cEnG5W_surfaceWarning {
+    background-color: var(--color-bg-warning);
+  }
+
+  .cEnG5W_surfaceError {
+    background-color: var(--color-bg-error);
+  }
+
+  .cEnG5W_iconSuccess {
+    color: var(--color-fg-success);
+  }
+
+  .cEnG5W_iconInfo {
+    color: var(--color-fg-info);
+  }
+
+  .cEnG5W_iconWarning {
+    color: var(--color-fg-warning);
+  }
+
+  .cEnG5W_iconError {
+    color: var(--color-fg-error);
+  }
+}
+
+@layer utilities;

package/dist/components/_internal/status-tone.d.mts

@@ -0,0 +1,20 @@
+//#region src/components/_internal/status-tone.d.ts
+export declare const STATUS_MESSAGE_KEY: {
+  readonly success: 'alertSuccess';
+  readonly info: 'alertInfo';
+  readonly warning: 'alertWarning';
+  readonly error: 'alertError';
+};
+export declare const STATUS_SURFACE: {
+  readonly success: any;
+  readonly info: any;
+  readonly warning: any;
+  readonly error: any;
+};
+export declare const STATUS_ICON: {
+  readonly success: any;
+  readonly info: any;
+  readonly warning: any;
+  readonly error: any;
+};
+//#endregion

package/dist/components/_internal/status-tone.mjs

@@ -0,0 +1,22 @@
+import status_tone_module_default from "./status-tone.module.mjs";
+//#region src/components/_internal/status-tone.ts
+const STATUS_MESSAGE_KEY = {
+	success: "alertSuccess",
+	info: "alertInfo",
+	warning: "alertWarning",
+	error: "alertError"
+};
+const STATUS_SURFACE = {
+	success: status_tone_module_default.surfaceSuccess,
+	info: status_tone_module_default.surfaceInfo,
+	warning: status_tone_module_default.surfaceWarning,
+	error: status_tone_module_default.surfaceError
+};
+const STATUS_ICON = {
+	success: status_tone_module_default.iconSuccess,
+	info: status_tone_module_default.iconInfo,
+	warning: status_tone_module_default.iconWarning,
+	error: status_tone_module_default.iconError
+};
+//#endregion
+export { STATUS_ICON, STATUS_MESSAGE_KEY, STATUS_SURFACE };

package/dist/components/_internal/status-tone.module.mjs

@@ -0,0 +1,14 @@
+import './status-tone.css';
+//#region src/components/_internal/status-tone.module.css
+var status_tone_module_default = {
+	"iconError": "cEnG5W_iconError",
+	"iconInfo": "cEnG5W_iconInfo",
+	"iconSuccess": "cEnG5W_iconSuccess",
+	"iconWarning": "cEnG5W_iconWarning",
+	"surfaceError": "cEnG5W_surfaceError",
+	"surfaceInfo": "cEnG5W_surfaceInfo",
+	"surfaceSuccess": "cEnG5W_surfaceSuccess",
+	"surfaceWarning": "cEnG5W_surfaceWarning"
+};
+//#endregion
+export { status_tone_module_default as default };

package/dist/components/ai/_internal/attachment-preview.css

@@ -0,0 +1,75 @@
+@layer properties, theme, base;
+
+@layer components {
+  .PhJFYa_root {
+    position: relative;
+  }
+
+  .PhJFYa_file {
+    max-width: calc(var(--spacing) * 60);
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-base);
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline-start: calc(var(--spacing) * 2.5);
+    padding-inline-end: calc(var(--spacing) * 3);
+    display: flex;
+  }
+
+  .PhJFYa_fileIcon {
+    color: var(--color-fg-mute);
+    flex-shrink: 0;
+  }
+
+  .PhJFYa_fileText {
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+  }
+
+  .PhJFYa_name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-fg-base);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+    overflow: hidden;
+  }
+
+  .PhJFYa_mediaType {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    overflow: hidden;
+  }
+
+  .PhJFYa_image {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-subtle);
+    overflow: hidden;
+  }
+
+  .PhJFYa_remove {
+    top: calc(var(--spacing) * -2);
+    right: calc(var(--spacing) * -2);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-base);
+    box-shadow: var(--shadow-xs);
+    display: flex;
+    position: absolute;
+  }
+}
+
+@layer utilities;

package/dist/components/ai/_internal/attachment-preview.d.mts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/_internal/attachment-preview.d.ts
+export declare const isImageMediaType: (mediaType: string) => boolean;
+type Props = {
+  mediaType: string;
+  filename?: string;
+  renderImage?: (props: {
+    id: string;
+    alt: string;
+  }) => ReactNode;
+  onRemove?: () => void;
+};
+export declare const AttachmentPreview: FC<Props>;
+//#endregion
+export {};

package/dist/components/ai/_internal/attachment-preview.mjs

@@ -0,0 +1,50 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { FileIcon } from "./icons.mjs";
+import attachment_preview_module_default from "./attachment-preview.module.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/_internal/attachment-preview.tsx
+const isImageMediaType = (mediaType) => mediaType === "image" || mediaType.startsWith("image/");
+const AttachmentPreview = ({ mediaType, filename, renderImage, onRemove }) => {
+	const messages = getMessages();
+	const nameId = useId();
+	return /* @__PURE__ */ jsxs("li", {
+		className: attachment_preview_module_default.root,
+		children: [renderImage === void 0 ? /* @__PURE__ */ jsxs("div", {
+			className: attachment_preview_module_default.file,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: attachment_preview_module_default.fileIcon,
+				children: /* @__PURE__ */ jsx(FileIcon, { size: "sm" })
+			}), /* @__PURE__ */ jsxs("span", {
+				className: attachment_preview_module_default.fileText,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: attachment_preview_module_default.name,
+					id: nameId,
+					children: filename ?? mediaType
+				}), filename !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: attachment_preview_module_default.mediaType,
+					children: mediaType
+				})]
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: attachment_preview_module_default.image,
+			children: renderImage({
+				id: nameId,
+				alt: filename ?? messages.attachmentImage
+			})
+		}), onRemove !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: attachment_preview_module_default.remove,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				"aria-describedby": nameId,
+				label: messages.attachmentRemove,
+				onClick: onRemove,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(CloseIcon, { size: "xs" })
+			})
+		})]
+	});
+};
+//#endregion
+export { AttachmentPreview, isImageMediaType };

package/dist/components/ai/_internal/attachment-preview.module.mjs

@@ -0,0 +1,14 @@
+import './attachment-preview.css';
+//#region src/components/ai/_internal/attachment-preview.module.css
+var attachment_preview_module_default = {
+	"file": "PhJFYa_file",
+	"fileIcon": "PhJFYa_fileIcon",
+	"fileText": "PhJFYa_fileText",
+	"image": "PhJFYa_image",
+	"mediaType": "PhJFYa_mediaType",
+	"name": "PhJFYa_name",
+	"remove": "PhJFYa_remove",
+	"root": "PhJFYa_root"
+};
+//#endregion
+export { attachment_preview_module_default as default };

package/dist/components/ai/_internal/collapsible.css

@@ -0,0 +1,62 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._3nLiW_root {
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-subtle);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    overflow: hidden;
+  }
+
+  ._3nLiW_trigger {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    text-align: left;
+    color: var(--color-fg-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    ._3nLiW_trigger:hover {
+      background-color: var(--color-bg-mute);
+    }
+  }
+
+  ._3nLiW_icon {
+    flex-shrink: 0;
+    align-items: center;
+    display: flex;
+  }
+
+  ._3nLiW_label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  ._3nLiW_panel {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-top: calc(var(--spacing) * 2);
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+
+  ._3nLiW_footer {
+    border-top-width: 1px;
+    border-color: var(--color-border-mute);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+}
+
+@layer utilities;

package/dist/components/ai/_internal/collapsible.d.mts

@@ -6,8 +6,10 @@ type Props = {
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
+  footer?: ReactNode;
+  triggerId?: string;
   children: ReactNode;
 };
-declare const Collapsible: FC<Props>;
+export declare const Collapsible: FC<Props>;
 //#endregion
-export { Collapsible };
+export {};