@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/buttons/toolbar/toolbar.d.mts

@@ -0,0 +1,19 @@
+import { FC, FocusEventHandler, HTMLAttributes, ReactElement, Ref, RefCallback } from "react";
+//#region src/components/buttons/toolbar/toolbar.d.ts
+type Orientation = 'horizontal' | 'vertical';
+export declare const Root: FC<{
+  /** 項目の並ぶ向き。書字方向の行の向きが `horizontal`。 */
+  orientation?: Orientation;
+  ref?: Ref<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role' | 'aria-orientation'>>;
+export type ToolbarItemProps = {
+  ref: RefCallback<HTMLElement>;
+  tabIndex: number;
+  onFocus: FocusEventHandler<HTMLElement>;
+};
+export declare const Item: FC<{
+  renderItem: (props: ToolbarItemProps) => ReactElement;
+}>;
+export declare const Separator: FC;
+//#endregion
+export {};

package/dist/components/buttons/toolbar/toolbar.mjs

@@ -0,0 +1,111 @@
+"use client";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { readWritingMode, useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { Separator as Separator$1 } from "../../layout/separator/separator.mjs";
+import toolbar_module_default from "./toolbar.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/buttons/toolbar/toolbar.tsx
+const [ToolbarProvider, useToolbar] = createSafeContext("useToolbar must be used within a Toolbar.Root");
+const isEnabled = (element) => !element.matches(":disabled");
+const Root = ({ orientation = "horizontal", children, onKeyDown, ref, ...rest }) => {
+	const items = useRef(/* @__PURE__ */ new Map());
+	const [activeId, setActiveId] = useState();
+	const [container, setContainer] = useState(null);
+	const mergedRef = useMemo(() => mergeRefs(setContainer, ref), [ref]);
+	const visualOrientation = useWritingMode(container) === "vertical" ? orientation === "horizontal" ? "vertical" : "horizontal" : orientation;
+	const ordered = useCallback(() => [...items.current.entries()].filter(([, element]) => isEnabled(element)).toSorted(([, a], [, b]) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), []);
+	const settle = useCallback(() => {
+		setActiveId((current) => {
+			const element = current === void 0 ? void 0 : items.current.get(current);
+			return element !== void 0 && isEnabled(element) ? current : ordered()[0]?.[0];
+		});
+	}, [ordered]);
+	const register = useCallback((id, element) => {
+		items.current.set(id, element);
+		settle();
+		return () => {
+			items.current.delete(id);
+			settle();
+		};
+	}, [settle]);
+	useEffect(() => {
+		if (container === null) return;
+		const observer = new MutationObserver(settle);
+		observer.observe(container, {
+			subtree: true,
+			attributeFilter: ["disabled"]
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [container, settle]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const list = ordered();
+		const index = list.findIndex(([, element]) => event.target instanceof Node && element.contains(event.target));
+		if (index === -1) return;
+		const vertical = orientation === "vertical" !== (readWritingMode(event.currentTarget) === "vertical");
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const [previousKey, nextKey] = vertical ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+		const target = {
+			[nextKey]: (index + 1) % list.length,
+			[previousKey]: (index - 1 + list.length) % list.length,
+			Home: 0,
+			End: list.length - 1
+		}[event.key];
+		const entry = target === void 0 ? void 0 : list[target];
+		if (entry === void 0) return;
+		event.preventDefault();
+		setActiveId(entry[0]);
+		entry[1].focus();
+	};
+	const contextValue = useMemo(() => ({
+		register,
+		activeId,
+		setActiveId,
+		orientation
+	}), [
+		register,
+		activeId,
+		orientation
+	]);
+	return /* @__PURE__ */ jsx(ToolbarProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"aria-orientation": visualOrientation,
+			className: clsx(toolbar_module_default.root, orientation === "vertical" && toolbar_module_default.vertical),
+			onKeyDown: handleKeyDown,
+			ref: mergedRef,
+			role: "toolbar",
+			children
+		})
+	});
+};
+const Item = ({ renderItem }) => {
+	const id = useId();
+	const { register, activeId, setActiveId } = useToolbar();
+	return renderItem({
+		ref: useCallback((element) => element === null ? void 0 : register(id, element), [id, register]),
+		tabIndex: activeId === void 0 || activeId === id ? 0 : -1,
+		onFocus: () => {
+			setActiveId(id);
+		}
+	});
+};
+const Separator = () => {
+	const { orientation } = useToolbar();
+	return /* @__PURE__ */ jsx("span", {
+		className: toolbar_module_default.separator,
+		children: /* @__PURE__ */ jsx(Separator$1, {
+			color: "base",
+			orientation: orientation === "horizontal" ? "vertical" : "horizontal"
+		})
+	});
+};
+//#endregion
+export { Item, Root, Separator };

package/dist/components/buttons/toolbar/toolbar.module.mjs

@@ -0,0 +1,9 @@
+import './toolbar.css';
+//#region src/components/buttons/toolbar/toolbar.module.css
+var toolbar_module_default = {
+	"root": "PnnNqG_root",
+	"separator": "PnnNqG_separator",
+	"vertical": "PnnNqG_vertical"
+};
+//#endregion
+export { toolbar_module_default as default };

package/dist/components/data-display/accordion/accordion-button.css

@@ -0,0 +1,48 @@
+@layer properties, theme, base;
+
+@layer components {
+  .zMMnlq_root {
+    cursor: pointer;
+    border-radius: var(--radius-md);
+    width: 100%;
+    padding: calc(var(--spacing) * 4);
+    color: var(--color-fg-base);
+    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);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      height: 100%;
+    }
+  }
+
+  @media (hover: hover) {
+    .zMMnlq_root:hover {
+      background-color: var(--color-primary-bg-subtle);
+      color: var(--color-primary-fg);
+    }
+  }
+
+  .zMMnlq_chevron {
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .zMMnlq_open {
+    rotate: 180deg;
+
+    @container style(--writing: vertical) {
+      rotate: -90deg;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/accordion/accordion-button.d.mts

@@ -1,5 +1,4 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/data-display/accordion/accordion-button.d.ts
-declare const AccordionButton: FC<PropsWithChildren>;
-//#endregion
-export { AccordionButton };
+export declare const AccordionButton: FC<PropsWithChildren>;
+//#endregion

package/dist/components/data-display/accordion/accordion-button.mjs

@@ -1,8 +1,9 @@
 "use client";
-import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useItemId, useOpen, useToggleOpen } from "./context.mjs";
+import accordion_button_module_default from "./accordion-button.module.mjs";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-button.tsx
 const AccordionButton = ({ children }) => {
@@ -12,12 +13,12 @@ const AccordionButton = ({ children }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-controls": `${id}-panel`,
 		"aria-expanded": open,
-		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors vertical:h-full", "hover:bg-primary-bg-subtle hover:text-primary-fg", FOCUS_RING_NO_BORDER),
+		className: clsx(accordion_button_module_default.root, focus_ring_module_default.ringNoBorder),
 		id: `${id}-button`,
 		onClick: toggleOpen,
 		type: "button",
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: cn("transition-transform duration-150", !open && "vertical:rotate-90", open && "rotate-180 vertical:-rotate-90"),
+			className: clsx(accordion_button_module_default.chevron, open && accordion_button_module_default.open),
 			children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
 		})]
 	});

package/dist/components/data-display/accordion/accordion-button.module.mjs

@@ -0,0 +1,9 @@
+import './accordion-button.css';
+//#region src/components/data-display/accordion/accordion-button.module.css
+var accordion_button_module_default = {
+	"chevron": "zMMnlq_chevron",
+	"open": "zMMnlq_open",
+	"root": "zMMnlq_root"
+};
+//#endregion
+export { accordion_button_module_default as default };

package/dist/components/data-display/accordion/accordion-item.css

@@ -0,0 +1,11 @@
+@layer properties, theme, base;
+
+@layer components {
+  .QACnjW_root {
+    @container style(--writing: vertical) {
+      height: 100%;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/accordion/accordion-item.d.mts

@@ -1,9 +1,8 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/data-display/accordion/accordion-item.d.ts
-declare const AccordionItem: FC<PropsWithChildren<{
+export declare const AccordionItem: FC<PropsWithChildren<{
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 }>>;
-//#endregion
-export { AccordionItem };
+//#endregion

package/dist/components/data-display/accordion/accordion-item.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { AccordionItemProvider } from "./context.mjs";
+import accordion_item_module_default from "./accordion-item.module.mjs";
 import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-item.tsx
@@ -11,7 +12,7 @@ const AccordionItem = ({ children, isOpen, defaultOpen = false, onChange }) => {
 		isOpen,
 		onChange,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "vertical:h-full",
+			className: accordion_item_module_default.root,
 			children
 		})
 	});

package/dist/components/data-display/accordion/accordion-item.module.mjs

@@ -0,0 +1,5 @@
+import './accordion-item.css';
+//#region src/components/data-display/accordion/accordion-item.module.css
+var accordion_item_module_default = { "root": "QACnjW_root" };
+//#endregion
+export { accordion_item_module_default as default };

package/dist/components/data-display/accordion/accordion-panel.css

@@ -0,0 +1,9 @@
+@layer properties, theme, base;
+
+@layer components {
+  .eiZZdW_root {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/accordion/accordion-panel.d.mts

@@ -1,5 +1,4 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/data-display/accordion/accordion-panel.d.ts
-declare const AccordionPanel: FC<PropsWithChildren>;
-//#endregion
-export { AccordionPanel };
+export declare const AccordionPanel: FC<PropsWithChildren>;
+//#endregion

package/dist/components/data-display/accordion/accordion-panel.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { useItemId, useOpen } from "./context.mjs";
+import accordion_panel_module_default from "./accordion-panel.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-panel.tsx
 const AccordionPanel = ({ children }) => {
@@ -8,7 +8,7 @@ const AccordionPanel = ({ children }) => {
 	const open = useOpen();
 	return /* @__PURE__ */ jsx("section", {
 		"aria-labelledby": `${id}-button`,
-		className: cn({ hidden: !open }, "pb-4"),
+		className: accordion_panel_module_default.root,
 		hidden: !open,
 		id: `${id}-panel`,
 		children

package/dist/components/data-display/accordion/accordion-panel.module.mjs

@@ -0,0 +1,5 @@
+import './accordion-panel.css';
+//#region src/components/data-display/accordion/accordion-panel.module.css
+var accordion_panel_module_default = { "root": "eiZZdW_root" };
+//#endregion
+export { accordion_panel_module_default as default };

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

@@ -0,0 +1,19 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._2t6Tnq_root {
+    @scope (&) {
+      :where(& > :not(:last-child)) {
+        border-block-end: 1px solid var(--color-border-mute);
+      }
+    }
+
+    @container style(--writing: vertical) {
+      flex-direction: column;
+      height: 100%;
+      display: flex;
+    }
+  }
+}
+
+@layer utilities;

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

@@ -1,5 +1,4 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/data-display/accordion/accordion.d.ts
-declare const Accordion: FC<PropsWithChildren>;
-//#endregion
-export { Accordion };
+export declare const Accordion: FC<PropsWithChildren>;
+//#endregion

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

@@ -1,7 +1,8 @@
+import accordion_module_default from "./accordion.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion.tsx
 const Accordion = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "divide-border-mute vertical:flex vertical:h-full vertical:flex-col vertical:divide-y-0 vertical:[&>:not(:last-child)]:border-l vertical:[&>:not(:last-child)]:border-border-mute divide-y",
+	className: accordion_module_default.root,
 	children
 });
 //#endregion

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

@@ -0,0 +1,5 @@
+import './accordion.css';
+//#region src/components/data-display/accordion/accordion.module.css
+var accordion_module_default = { "root": "_2t6Tnq_root" };
+//#endregion
+export { accordion_module_default as default };

package/dist/components/data-display/accordion/context.d.mts

@@ -3,12 +3,12 @@ import { FC, PropsWithChildren } from "react";
 type ToggleOpen = () => void;
 declare const useToggleOpen: () => ToggleOpen;
 declare const useItemId: () => string;
-declare const useOpen: () => boolean;
-declare const AccordionItemProvider: FC<PropsWithChildren<{
+export declare const useOpen: () => boolean;
+export declare const AccordionItemProvider: FC<PropsWithChildren<{
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
   id: string;
 }>>;
 //#endregion
-export { AccordionItemProvider, useItemId, useOpen, useToggleOpen };
+export { useItemId, useToggleOpen };

package/dist/components/data-display/accordion/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/data-display/accordion/index.d.ts
-declare const Accordion: {
+export declare const Accordion: {
   readonly Root: import("react").FC<{
     children?: import("react").ReactNode | undefined;
   }>;
@@ -15,5 +15,4 @@ declare const Accordion: {
     children?: import("react").ReactNode | undefined;
   }>;
 };
-//#endregion
-export { Accordion };
+//#endregion

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

@@ -0,0 +1,95 @@
+@layer properties, theme, base;
+
+@layer components {
+  .-\36 0GPa_root {
+    border-radius: var(--radius-full);
+    font-weight: var(--font-weight-medium);
+    border-style: solid;
+    border-width: 1px;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .-\36 0GPa_base {
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-mute);
+    color: var(--color-fg-base);
+  }
+
+  .-\36 0GPa_primary {
+    background-color: var(--color-primary-bg);
+    color: var(--color-primary-fg);
+    border-color: #0000;
+  }
+
+  .-\36 0GPa_secondary {
+    background-color: var(--color-secondary-bg);
+    color: var(--color-secondary-fg);
+    border-color: #0000;
+  }
+
+  .-\36 0GPa_sm {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+  }
+
+  .-\36 0GPa_md {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .-\36 0GPa_lg {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+
+  .-\36 0GPa_image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .-\36 0GPa_icon {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .-\36 0GPa_iconSm {
+    @scope (&) {
+      & svg {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
+    }
+  }
+
+  .-\36 0GPa_iconMd {
+    @scope (&) {
+      & svg {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+      }
+    }
+  }
+
+  .-\36 0GPa_iconLg {
+    @scope (&) {
+      & svg {
+        width: calc(var(--spacing) * 8);
+        height: calc(var(--spacing) * 8);
+      }
+    }
+  }
+}
+
+@layer utilities;

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

@@ -9,6 +9,6 @@ type Props = {
   size?: 'sm' | 'md' | 'lg';
   src?: string;
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label' | 'className' | 'style'>;
-declare const Avatar: FC<Props>;
+export declare const Avatar: FC<Props>;
 //#endregion
-export { Avatar };
+export {};

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

@@ -1,16 +1,32 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import avatar_module_default from "./avatar.module.mjs";
+import { clsx } from "clsx";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/avatar/avatar.tsx
+const COLOR = {
+	base: avatar_module_default.base,
+	primary: avatar_module_default.primary,
+	secondary: avatar_module_default.secondary
+};
+const SIZE = {
+	sm: avatar_module_default.sm,
+	md: avatar_module_default.md,
+	lg: avatar_module_default.lg
+};
+const ICON_SIZE = {
+	sm: avatar_module_default.iconSm,
+	md: avatar_module_default.iconMd,
+	lg: avatar_module_default.iconLg
+};
 const getInitials = (name) => {
 	if (name === void 0 || name === "") return "?";
 	const initials = name.trim().split(/\s+/u).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
 	return initials === "" ? "?" : initials;
 };
 const Avatar = ({ alt, color = "base", fallback, icon, name, size = "md", src, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const [failedSrc, setFailedSrc] = useState(null);
 	const showImage = Boolean(src) && failedSrc !== src;
 	const label = alt ?? name ?? messages.avatar;
@@ -18,11 +34,11 @@ const Avatar = ({ alt, color = "base", fallback, icon, name, size = "md", src, .
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		"aria-label": label,
-		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border font-medium", color === "base" && "border-border-base bg-bg-mute text-fg-base", color === "primary" && "border-transparent bg-primary-bg text-primary-fg", color === "secondary" && "border-transparent bg-secondary-bg text-secondary-fg", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg"),
+		className: clsx(avatar_module_default.root, COLOR[color], SIZE[size]),
 		role: "img",
 		children: showImage ? /* @__PURE__ */ jsx("img", {
 			alt: alt ?? "",
-			className: "size-full object-cover",
+			className: avatar_module_default.image,
 			height: imageSize,
 			onError: () => {
 				setFailedSrc(src ?? null);
@@ -34,7 +50,7 @@ const Avatar = ({ alt, color = "base", fallback, icon, name, size = "md", src, .
 			children: fallback ?? getInitials(name)
 		}) : /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn("flex items-center justify-center", size === "sm" && "[&_svg]:size-5", size === "md" && "[&_svg]:size-6", size === "lg" && "[&_svg]:size-8"),
+			className: clsx(avatar_module_default.icon, ICON_SIZE[size]),
 			children: icon
 		})
 	});

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

@@ -0,0 +1,18 @@
+import './avatar.css';
+//#region src/components/data-display/avatar/avatar.module.css
+var avatar_module_default = {
+	"base": "-60GPa_base",
+	"icon": "-60GPa_icon",
+	"iconLg": "-60GPa_iconLg",
+	"iconMd": "-60GPa_iconMd",
+	"iconSm": "-60GPa_iconSm",
+	"image": "-60GPa_image",
+	"lg": "-60GPa_lg",
+	"md": "-60GPa_md",
+	"primary": "-60GPa_primary",
+	"root": "-60GPa_root",
+	"secondary": "-60GPa_secondary",
+	"sm": "-60GPa_sm"
+};
+//#endregion
+export { avatar_module_default as default };

package/dist/components/data-display/avatar/index.mjs

@@ -1,2 +1 @@
-import { Avatar } from "./avatar.mjs";
-export { Avatar };
+export { Avatar } from "./avatar.mjs";