@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/data-display/code/code.d.mts

@@ -3,6 +3,5 @@ import { FC, HTMLAttributes } from "react";
 type Props = {
   children: string;
 } & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>;
-declare const Code: FC<Props>;
-//#endregion
-export { Code };
+export declare const Code: FC<Props>;
+//#endregion

package/dist/components/data-display/code/code.mjs

@@ -1,15 +1,16 @@
-"use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { findAllColors } from "./find-all-colors.mjs";
+import code_module_default from "./code.module.mjs";
+import { clsx } from "clsx";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/code/code.tsx
 const Code = ({ children, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const colors = findAllColors(children);
 	if (colors.length === 0) return /* @__PURE__ */ jsx("code", {
 		...rest,
-		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
+		className: code_module_default.root,
 		children
 	});
 	const parts = [];
@@ -18,7 +19,7 @@ const Code = ({ children, ...rest }) => {
 		if (colorInfo.start > lastIndex) parts.push(children.slice(lastIndex, colorInfo.start));
 		parts.push(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-label": `${messages.color}: ${colorInfo.color}`,
-			className: "border-border-base inline-block size-3 shrink-0 rounded-sm border",
+			className: code_module_default.swatch,
 			role: "img",
 			style: { backgroundColor: colorInfo.color }
 		}), children.slice(colorInfo.start, colorInfo.end)] }, `color-${String(index)}`));
@@ -27,7 +28,7 @@ const Code = ({ children, ...rest }) => {
 	if (lastIndex < children.length) parts.push(children.slice(lastIndex));
 	return /* @__PURE__ */ jsx("code", {
 		...rest,
-		className: "bg-bg-mute vertical:inline vertical:gap-0 m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5",
+		className: clsx(code_module_default.root, code_module_default.withColors),
 		children: parts
 	});
 };

package/dist/components/data-display/code/code.module.mjs

@@ -0,0 +1,9 @@
+import './code.css';
+//#region src/components/data-display/code/code.module.css
+var code_module_default = {
+	"root": "_9ZZMOW_root",
+	"swatch": "_9ZZMOW_swatch",
+	"withColors": "_9ZZMOW_withColors"
+};
+//#endregion
+export { code_module_default as default };

package/dist/components/data-display/code/find-all-colors.d.mts

@@ -11,6 +11,5 @@ type ColorMatch = {
  * @param text - 色の値を検索するテキスト
  * @returns 色の値、開始位置、終了位置を含む色オブジェクトの配列
  */
-declare function findAllColors(text: string): ColorMatch[];
-//#endregion
-export { findAllColors };
+export declare function findAllColors(text: string): ColorMatch[];
+//#endregion

package/dist/components/data-display/code/find-all-colors.mjs

@@ -102,166 +102,5 @@ function findAllColors(text) {
 	for (const result of results) if (!filteredResults.some((existing) => result.start >= existing.start && result.start < existing.end || result.end > existing.start && result.end <= existing.end || result.start <= existing.start && result.end >= existing.end)) filteredResults.push(result);
 	return filteredResults;
 }
-if (import.meta.vitest) {
-	const { describe, expect, it } = import.meta.vitest;
-	describe("findAllColors", () => {
-		describe("単一の色の場合", () => {
-			it("HSL色を見つける", () => {
-				const result = findAllColors("hsl(280, 70%, 50%)");
-				expect(result).toEqual([{
-					color: "hsl(280, 70%, 50%)",
-					start: 0,
-					end: 18
-				}]);
-			});
-			it("HEX色を見つける", () => {
-				const result = findAllColors("#ff0080");
-				expect(result).toEqual([{
-					color: "#ff0080",
-					start: 0,
-					end: 7
-				}]);
-			});
-			it("名前付き色を見つける", () => {
-				const result = findAllColors("background-color: red;");
-				expect(result).toEqual([{
-					color: "red",
-					start: 18,
-					end: 21
-				}]);
-			});
-		});
-		describe("複数の色の場合", () => {
-			it("異なる形式の複数の色を見つける", () => {
-				const result = findAllColors("border: 1px solid #ff0080; background: hsl(280, 70%, 50%); color: white;");
-				expect(result).toEqual([
-					{
-						color: "#ff0080",
-						start: 18,
-						end: 25
-					},
-					{
-						color: "hsl(280, 70%, 50%)",
-						start: 39,
-						end: 57
-					},
-					{
-						color: "white",
-						start: 66,
-						end: 71
-					}
-				]);
-			});
-			it("gradient内の複数の色を見つける", () => {
-				const result = findAllColors("linear-gradient(45deg, #ff0080, hsl(280, 70%, 50%), rgba(255, 0, 128, 0.5))");
-				expect(result).toEqual([
-					{
-						color: "#ff0080",
-						start: 23,
-						end: 30
-					},
-					{
-						color: "hsl(280, 70%, 50%)",
-						start: 32,
-						end: 50
-					},
-					{
-						color: "rgba(255, 0, 128, 0.5)",
-						start: 52,
-						end: 74
-					}
-				]);
-			});
-		});
-		describe("重複する色パターンの場合", () => {
-			it("関数型色を名前付き色より優先する", () => {
-				const result = findAllColors("rgb(255, 0, 0) red");
-				expect(result).toEqual([{
-					color: "rgb(255, 0, 0)",
-					start: 0,
-					end: 14
-				}, {
-					color: "red",
-					start: 15,
-					end: 18
-				}]);
-			});
-			it("重複する領域では最初の色のみを保持する", () => {
-				const result = findAllColors("background-color: red");
-				expect(result).toEqual([{
-					color: "red",
-					start: 18,
-					end: 21
-				}]);
-			});
-		});
-		describe("複雑なCSS関数の場合", () => {
-			it("calc式を含むHSL色を見つける", () => {
-				const result = findAllColors("hsl(calc(var(--hue) + 50), 70%, 50%)");
-				expect(result).toEqual([{
-					color: "hsl(calc(var(--hue) + 50), 70%, 50%)",
-					start: 0,
-					end: 36
-				}]);
-			});
-			it("ネストした括弧を含む色を見つける", () => {
-				const result = findAllColors("hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%)");
-				expect(result).toEqual([{
-					color: "hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%)",
-					start: 0,
-					end: 46
-				}]);
-			});
-		});
-		describe("色が見つからない場合", () => {
-			it("空の配列を返す", () => {
-				const result = findAllColors("transform: translateX(100px);");
-				expect(result).toEqual([]);
-			});
-			it("色でないテキストでは空の配列を返す", () => {
-				const result = findAllColors("font-size: 16px; margin: 10px;");
-				expect(result).toEqual([]);
-			});
-		});
-		describe("エッジケース", () => {
-			it("同じ色が複数回出現する場合", () => {
-				const result = findAllColors("color: red; border-color: red;");
-				expect(result).toEqual([{
-					color: "red",
-					start: 7,
-					end: 10
-				}, {
-					color: "red",
-					start: 26,
-					end: 29
-				}]);
-			});
-			it("文字列の境界での色検出", () => {
-				const result = findAllColors("red");
-				expect(result).toEqual([{
-					color: "red",
-					start: 0,
-					end: 3
-				}]);
-			});
-			it("他の単語の一部として含まれる色名を検出しない", () => {
-				const result = findAllColors("reduce");
-				expect(result).toEqual([]);
-			});
-			it("他の単語の一部として含まれる色名を検出しない（複数パターン）", () => {
-				const result = findAllColors("blueberry, greenfield, redirection");
-				expect(result).toEqual([]);
-			});
-			it("単語の一部でない色名のみを検出する", () => {
-				const result = findAllColors("reduce color: red; blueberry");
-				expect(result).toEqual([{
-					color: "red",
-					start: 14,
-					end: 17
-				}]);
-			});
-		});
-	});
-}
 //#endregion
 export { findAllColors };

package/dist/components/data-display/code-block/code-block.css

@@ -0,0 +1,161 @@
+@layer properties, theme, base;
+
+@layer components {
+  .NaphaW_root {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-surface);
+    grid-template-rows: auto 1fr;
+    display: grid;
+    position: relative;
+  }
+
+  .NaphaW_label {
+    padding-block: calc(var(--spacing) * 3) 0;
+    padding-inline: calc(var(--spacing) * 5) calc(var(--spacing) * 12);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-none);
+    color: var(--color-fg-mute);
+    display: block;
+  }
+
+  .NaphaW_language {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .NaphaW_copy {
+    inset-inline-end: calc(var(--spacing) * 1.5);
+    top: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-md);
+    background-color: var(--color-bg-surface);
+    position: absolute;
+  }
+
+  .NaphaW_code {
+    min-width: 0;
+
+    @scope (&) {
+      & pre {
+        padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 5)
+        calc(var(--spacing) * 4);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-loose);
+        tab-size: 2;
+        overflow-x: auto;
+      }
+
+      & pre:focus-visible {
+        outline: 2px solid var(--color-border-info);
+        outline-offset: -2px;
+      }
+
+      & .line {
+        min-inline-size: 100%;
+        display: inline-block;
+      }
+
+      & pre[data-marked] .line {
+        padding-inline-start: calc(var(--spacing-em) * 4.8);
+        position: relative;
+      }
+
+      & :is([data-mark], [data-has-callout]):after {
+        content: "";
+        border-inline-start: 6px solid;
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+      }
+
+      & [data-mark="highlight"] {
+        background-color: color-mix(in oklab,
+        var(--color-border-warning) 16%,
+        transparent);
+      }
+
+      & [data-mark="highlight"]:after {
+        border-inline-start-color: var(--color-border-warning);
+      }
+
+      & [data-mark="add"] {
+        background-color: color-mix(in oklab,
+        var(--color-border-success) 14%,
+        transparent);
+      }
+
+      & [data-mark="add"]:after {
+        border-inline-start-color: var(--color-border-success);
+      }
+
+      & [data-mark="remove"] {
+        background-color: color-mix(in oklab,
+        var(--color-border-error) 12%,
+        transparent);
+      }
+
+      & [data-mark="remove"]:after {
+        border-inline-start-color: var(--color-border-error);
+      }
+
+      & [data-has-callout] {
+        background-color: color-mix(in oklab,
+        var(--color-border-info) 18%,
+        transparent);
+      }
+
+      & [data-has-callout]:after {
+        border-inline-start-color: var(--color-border-info);
+      }
+
+      & [data-mark="add"]:before, & [data-mark="remove"]:before {
+        font-weight: var(--font-weight-bold);
+        position: absolute;
+        inset-inline-start: calc(var(--spacing-em) * 1.6);
+      }
+
+      & [data-mark="add"]:before {
+        content: "＋";
+        color: var(--color-fg-success);
+      }
+
+      & [data-mark="remove"]:before {
+        content: "－";
+        color: var(--color-fg-error);
+      }
+
+      & [data-callout] {
+        margin-block: calc(var(--spacing-em) * 2.4) calc(var(--spacing-em) * 1.2);
+        padding: calc(var(--spacing-em) * 2) calc(var(--spacing-em) * 4);
+        border-radius: var(--radius-em);
+        background-color: var(--color-fg-info);
+        color: var(--color-fg-inverse);
+        font-size: var(--font-size-callout);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-callout);
+        white-space: normal;
+        border: 1px solid #0000;
+        margin-inline-start: calc((calc(var(--spacing-em) * 4.8) + var(--callout-indent)) / .9);
+        display: inline-block;
+        position: relative;
+      }
+
+      & [data-callout]:before {
+        content: "";
+        border-inline: .5em solid #0000;
+        border-block-end: .5em solid var(--color-fg-info);
+        position: absolute;
+        inset-block-start: calc(var(--spacing-em) * -2);
+        inset-inline-start: calc(var(--spacing-em) * 4);
+      }
+
+      @media (forced-colors: active) {
+        & [data-callout]:before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/code-block/code-block.d.mts

@@ -0,0 +1,12 @@
+import { FC, HTMLAttributes } from "react";
+import "server-only";
+//#region src/components/data-display/code-block/code-block.d.ts
+type Props = {
+  code: string;
+  lang?: string;
+  title?: string;
+  marks?: Readonly<Record<number, 'highlight' | 'add' | 'remove'>>;
+  callouts?: Readonly<Record<number, string | readonly string[]>>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'lang' | 'style' | 'title'>;
+export declare const CodeBlock: FC<Props>;
+//#endregion

package/dist/components/data-display/code-block/code-block.mjs

@@ -0,0 +1,44 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import { CopyButton } from "../../buttons/copy-button/copy-button.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { highlight } from "./highlight.mjs";
+import code_block_module_default from "./code-block.module.mjs";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "server-only";
+//#region src/components/data-display/code-block/code-block.tsx
+const CodeBlock = async ({ code, lang = "text", title, marks, callouts, ...rest }) => {
+	const html = await highlight(code, {
+		lang,
+		marks,
+		callouts
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		className: clsx("writing-h", code_block_module_default.root, high_contrast_module_default.edge),
+		children: [
+			title === void 0 ? /* @__PURE__ */ jsx("span", {
+				className: clsx(code_block_module_default.label, code_block_module_default.language),
+				children: lang
+			}) : /* @__PURE__ */ jsx("figcaption", {
+				className: code_block_module_default.label,
+				children: /* @__PURE__ */ jsx("code", { children: title })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: code_block_module_default.copy,
+				children: /* @__PURE__ */ jsx(CopyButton, {
+					iconOnly: true,
+					label: getMessages().codeBlockCopy,
+					size: "sm",
+					value: code
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: code_block_module_default.code,
+				dangerouslySetInnerHTML: { __html: html }
+			})
+		]
+	});
+};
+//#endregion
+export { CodeBlock };

package/dist/components/data-display/code-block/code-block.module.mjs

@@ -0,0 +1,11 @@
+import './code-block.css';
+//#region src/components/data-display/code-block/code-block.module.css
+var code_block_module_default = {
+	"code": "NaphaW_code",
+	"copy": "NaphaW_copy",
+	"label": "NaphaW_label",
+	"language": "NaphaW_language",
+	"root": "NaphaW_root"
+};
+//#endregion
+export { code_block_module_default as default };

package/dist/components/data-display/code-block/highlight.d.mts

@@ -0,0 +1,9 @@
+//#region src/components/data-display/code-block/highlight.d.ts
+type LineMark = 'highlight' | 'add' | 'remove';
+type Options = {
+  lang: string;
+  marks?: Readonly<Record<number, LineMark>> | undefined;
+  callouts?: Readonly<Record<number, string | readonly string[]>> | undefined;
+};
+export declare const highlight: (code: string, options: Options) => Promise<string>;
+//#endregion

package/dist/components/data-display/code-block/highlight.mjs

@@ -0,0 +1,54 @@
+import { bundledLanguages, codeToHtml } from "shiki";
+//#region src/components/data-display/code-block/highlight.ts
+const resolveLang = (lang) => Object.hasOwn(bundledLanguages, lang) ? lang : "text";
+const annotate = (code, marks, callouts) => ({
+	name: "k8ordo-ui:annotate",
+	pre(node) {
+		const { style } = node.properties;
+		if (typeof style === "string") node.properties.style = style.replace(/background-color:[^;]*;?/u, "");
+		if ([marks, callouts].some((entries) => entries !== void 0 && Object.keys(entries).length > 0)) node.properties["data-marked"] = "";
+	},
+	line(node, line) {
+		const mark = marks?.[line];
+		if (mark !== void 0) node.properties["data-mark"] = mark;
+	},
+	code(node) {
+		if (callouts === void 0) return;
+		const sourceLines = code.split("\n");
+		const lines = node.children.filter((child) => child.type === "element" && child.tagName === "span");
+		for (const [index, lineNode] of lines.entries()) {
+			const notes = callouts[index + 1];
+			if (notes === void 0 || lineNode.type !== "element") continue;
+			lineNode.properties["data-has-callout"] = "";
+			const indent = /^\s*/u.exec(sourceLines[index] ?? "")?.[0].length ?? 0;
+			const position = node.children.indexOf(lineNode);
+			node.children.splice(position + 1, 0, ...(typeof notes === "string" ? [notes] : notes).flatMap((text) => [{
+				type: "text",
+				value: "\n"
+			}, {
+				type: "element",
+				tagName: "span",
+				properties: {
+					"data-callout": "",
+					style: `--callout-indent:${String(indent)}ch`
+				},
+				children: [{
+					type: "text",
+					value: text
+				}]
+			}]));
+		}
+	}
+});
+const highlight = (code, options) => codeToHtml(code, {
+	lang: resolveLang(options.lang),
+	themes: {
+		light: "one-light",
+		dark: "plastic"
+	},
+	defaultColor: "light-dark()",
+	colorsRendering: "none",
+	transformers: [annotate(code, options.marks, options.callouts)]
+});
+//#endregion
+export { highlight };

package/dist/components/data-display/code-block/index.d.mts

@@ -0,0 +1,2 @@
+import { CodeBlock } from "./code-block.mjs";
+export { CodeBlock };

package/dist/components/data-display/code-block/index.mjs

@@ -0,0 +1,2 @@
+import { CodeBlock } from "./code-block.mjs";
+export { CodeBlock };

package/dist/components/data-display/data-table/data-table.css

@@ -0,0 +1,74 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._1lzWCq_root {
+    gap: calc(var(--spacing) * 3);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._1lzWCq_toolbar {
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  ._1lzWCq_columnMenu {
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-raised);
+    padding: calc(var(--spacing) * 4);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._1lzWCq_columnMenuTitle {
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  ._1lzWCq_sortButton {
+    margin-inline: calc(var(--spacing) * -2);
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-weight: var(--font-weight-medium);
+    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: inline-flex;
+  }
+
+  @media (hover: hover) {
+    ._1lzWCq_sortButton:hover {
+      background-color: var(--color-bg-mute);
+    }
+  }
+
+  ._1lzWCq_alignRight {
+    flex-direction: row-reverse;
+  }
+
+  ._1lzWCq_sortIcon {
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+    display: inline-flex;
+  }
+
+  ._1lzWCq_unsorted {
+    opacity: 0;
+  }
+
+  @media (hover: hover) {
+    ._1lzWCq_sortButton:hover ._1lzWCq_unsorted {
+      opacity: .6;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/data-table/data-table.d.mts

@@ -0,0 +1,31 @@
+import { CellAlign } from "../table/table.mjs";
+import "../table/index.mjs";
+import { ReactNode } from "react";
+//#region src/components/data-display/data-table/data-table.d.ts
+export type DataTableColumn<Row> = {
+  id: string;
+  header: string;
+  cell: (row: Row) => ReactNode;
+  align?: CellAlign;
+  sortable?: boolean;
+  hideable?: boolean;
+};
+export type DataTableSort = {
+  columnId: string;
+  direction: 'ascending' | 'descending';
+};
+type Props<Row> = {
+  label: string;
+  columns: ReadonlyArray<DataTableColumn<Row>>;
+  rows: readonly Row[];
+  getRowId: (row: Row) => string;
+  sort?: DataTableSort | null;
+  onSortChange?: (sort: DataTableSort | null) => void;
+  selectedIds?: readonly string[];
+  onSelectedIdsChange?: (ids: string[]) => void;
+  hiddenColumnIds?: readonly string[];
+  onHiddenColumnIdsChange?: (ids: string[]) => void;
+  emptyState?: ReactNode;
+};
+export declare const DataTable: <Row>({ label, columns, rows, getRowId, sort, onSortChange, selectedIds, onSelectedIdsChange, hiddenColumnIds, onHiddenColumnIdsChange, emptyState }: Props<Row>) => import("react").JSX.Element;
+//#endregion