@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/layout/grid/grid.mjs

@@ -1,34 +1,35 @@
-import { cn } from "../../../helpers/cn.mjs";
 import { GAP_CLASS } from "../_shared/gap.mjs";
+import grid_module_default from "./grid.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/grid/grid.tsx
 const COLS_CLASS = {
-	1: "grid-cols-1",
-	2: "grid-cols-2",
-	3: "grid-cols-3",
-	4: "grid-cols-4",
-	5: "grid-cols-5",
-	6: "grid-cols-6"
+	1: grid_module_default.cols1,
+	2: grid_module_default.cols2,
+	3: grid_module_default.cols3,
+	4: grid_module_default.cols4,
+	5: grid_module_default.cols5,
+	6: grid_module_default.cols6
 };
 const AUTO_FILL_CLASS = {
-	24: "grid-cols-auto-fill-24",
-	32: "grid-cols-auto-fill-32",
-	40: "grid-cols-auto-fill-40",
-	48: "grid-cols-auto-fill-48",
-	64: "grid-cols-auto-fill-64",
-	80: "grid-cols-auto-fill-80"
+	24: grid_module_default.autoFill24,
+	32: grid_module_default.autoFill32,
+	40: grid_module_default.autoFill40,
+	48: grid_module_default.autoFill48,
+	64: grid_module_default.autoFill64,
+	80: grid_module_default.autoFill80
 };
 const AUTO_FIT_CLASS = {
-	24: "grid-cols-auto-fit-24",
-	32: "grid-cols-auto-fit-32",
-	40: "grid-cols-auto-fit-40",
-	48: "grid-cols-auto-fit-48",
-	64: "grid-cols-auto-fit-64",
-	80: "grid-cols-auto-fit-80"
+	24: grid_module_default.autoFit24,
+	32: grid_module_default.autoFit32,
+	40: grid_module_default.autoFit40,
+	48: grid_module_default.autoFit48,
+	64: grid_module_default.autoFit64,
+	80: grid_module_default.autoFit80
 };
 const Grid = ({ cols = "auto-fill", minItemSize = 48, gap = "md", children, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("grid", GAP_CLASS[gap], typeof cols === "number" ? COLS_CLASS[cols] : cols === "auto-fill" ? AUTO_FILL_CLASS[minItemSize] : AUTO_FIT_CLASS[minItemSize]),
+	className: clsx(grid_module_default.root, GAP_CLASS[gap], typeof cols === "number" ? COLS_CLASS[cols] : cols === "auto-fill" ? AUTO_FILL_CLASS[minItemSize] : AUTO_FIT_CLASS[minItemSize]),
 	children
 });
 //#endregion

package/dist/components/layout/grid/grid.module.mjs

@@ -0,0 +1,25 @@
+import './grid.css';
+//#region src/components/layout/grid/grid.module.css
+var grid_module_default = {
+	"autoFill24": "_23gUBq_autoFill24",
+	"autoFill32": "_23gUBq_autoFill32",
+	"autoFill40": "_23gUBq_autoFill40",
+	"autoFill48": "_23gUBq_autoFill48",
+	"autoFill64": "_23gUBq_autoFill64",
+	"autoFill80": "_23gUBq_autoFill80",
+	"autoFit24": "_23gUBq_autoFit24",
+	"autoFit32": "_23gUBq_autoFit32",
+	"autoFit40": "_23gUBq_autoFit40",
+	"autoFit48": "_23gUBq_autoFit48",
+	"autoFit64": "_23gUBq_autoFit64",
+	"autoFit80": "_23gUBq_autoFit80",
+	"cols1": "_23gUBq_cols1",
+	"cols2": "_23gUBq_cols2",
+	"cols3": "_23gUBq_cols3",
+	"cols4": "_23gUBq_cols4",
+	"cols5": "_23gUBq_cols5",
+	"cols6": "_23gUBq_cols6",
+	"root": "_23gUBq_root"
+};
+//#endregion
+export { grid_module_default as default };

package/dist/components/layout/resizable-panels/index.d.mts

@@ -0,0 +1,18 @@
+//#region src/components/layout/resizable-panels/index.d.ts
+export declare const ResizablePanels: {
+  readonly Root: import("react").FC<{
+    orientation?: "horizontal" | "vertical";
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    ref?: import("react").Ref<HTMLDivElement>;
+  } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "defaultValue" | "onChange" | "style">>;
+  readonly Panel: import("react").FC<{
+    ref?: import("react").Ref<HTMLDivElement>;
+  } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "style">>;
+  readonly Handle: import("react").FC<Omit<import("react").HTMLAttributes<HTMLDivElement>, "aria-controls" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "children" | "className" | "role" | "style" | "tabIndex">>;
+};
+//#endregion

package/dist/components/layout/resizable-panels/index.mjs

@@ -0,0 +1,9 @@
+import { Handle, Panel, Root } from "./resizable-panels.mjs";
+//#region src/components/layout/resizable-panels/index.ts
+const ResizablePanels = {
+	Root,
+	Panel,
+	Handle
+};
+//#endregion
+export { ResizablePanels };

package/dist/components/layout/resizable-panels/resizable-panels.css

@@ -0,0 +1,77 @@
+@layer properties, theme, base;
+
+@layer components {
+  .TQAbeG_root {
+    block-size: 100%;
+    inline-size: 100%;
+    display: grid;
+  }
+
+  .TQAbeG_horizontal {
+    grid-template-columns: var(--panels-size) auto minmax(0, 1fr);
+  }
+
+  .TQAbeG_vertical {
+    grid-template-rows: var(--panels-size) auto minmax(0, 1fr);
+  }
+
+  .TQAbeG_panel {
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: auto;
+  }
+
+  .TQAbeG_handle {
+    touch-action: none;
+    border-radius: var(--radius-full);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .TQAbeG_handleX {
+    cursor: col-resize;
+    width: calc(var(--spacing) * 3);
+  }
+
+  .TQAbeG_handleY {
+    cursor: row-resize;
+    height: calc(var(--spacing) * 3);
+  }
+
+  .TQAbeG_line {
+    border-radius: var(--radius-full);
+    background-color: var(--color-border-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);
+  }
+
+  .TQAbeG_lineX {
+    width: 1px;
+    height: 100%;
+  }
+
+  .TQAbeG_lineY {
+    width: 100%;
+    height: 1px;
+  }
+
+  @media (hover: hover) {
+    :where(.TQAbeG_handle:hover) .TQAbeG_line {
+      background-color: var(--color-border-emphasize);
+    }
+  }
+
+  :where(.TQAbeG_handle[data-dragging]) .TQAbeG_line {
+    background-color: var(--color-primary-border);
+  }
+
+  @media (forced-colors: active) {
+    .TQAbeG_line {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/layout/resizable-panels/resizable-panels.d.mts

@@ -0,0 +1,21 @@
+import { FC, HTMLAttributes, Ref } from "react";
+//#region src/components/layout/resizable-panels/resizable-panels.d.ts
+type Orientation = 'horizontal' | 'vertical';
+export declare const Root: FC<{
+  /** 2 枚を並べる向き。`horizontal` は書字方向の行に沿って並べる。 */
+  orientation?: Orientation;
+  /** 1 枚目が占める割合（%）。 */
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  /** 矢印キー 1 回で動く割合（%）。 */
+  step?: number;
+  ref?: Ref<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'defaultValue' | 'onChange'>>;
+export declare const Panel: FC<{
+  ref?: Ref<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>>;
+export declare const Handle: FC<Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role' | 'children' | 'tabIndex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax' | 'aria-controls'>>;
+//#endregion

package/dist/components/layout/resizable-panels/resizable-panels.mjs

@@ -0,0 +1,164 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import resizable_panels_module_default from "./resizable-panels.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/resizable-panels/resizable-panels.tsx
+const [PanelsProvider, usePanels] = createSafeContext("usePanels must be used within a ResizablePanels.Root");
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+* 1 枚目が根のどちらの端に付いているかを、描かれた箱から読む。
+* 書字方向（縦書き、右から左）ごとに分けて考えるより確か。
+*/
+const measure = (root, axis) => {
+	const box = root.getBoundingClientRect();
+	const first = root.firstElementChild?.getBoundingClientRect() ?? box;
+	return axis === "x" ? {
+		length: box.width,
+		fromEnd: first.left - box.left > box.right - first.right,
+		start: box.left,
+		end: box.right
+	} : {
+		length: box.height,
+		fromEnd: first.top - box.top > box.bottom - first.bottom,
+		start: box.top,
+		end: box.bottom
+	};
+};
+const Root = ({ orientation = "horizontal", value, defaultValue = 50, onChange, min = 10, max = 90, step = 5, children, ref, ...rest }) => {
+	const [root, setRoot] = useState(null);
+	const [primaryId, setPrimaryId] = useState(null);
+	const mergedRef = useMemo(() => mergeRefs(setRoot, ref), [ref]);
+	const [size, setSize] = useControllableState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const visualOrientation = useWritingMode(root) === "vertical" ? orientation === "horizontal" ? "vertical" : "horizontal" : orientation;
+	const clamped = clamp(size, min, max);
+	return /* @__PURE__ */ jsx(PanelsProvider, {
+		value: {
+			size: clamped,
+			resize: (next) => {
+				setSize(clamp(next, min, max));
+			},
+			min,
+			max,
+			step,
+			visualOrientation,
+			primaryId,
+			setPrimaryId,
+			root
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: clsx(resizable_panels_module_default.root, orientation === "horizontal" ? resizable_panels_module_default.horizontal : resizable_panels_module_default.vertical),
+			ref: mergedRef,
+			style: { "--panels-size": `${String(clamped)}%` },
+			children
+		})
+	});
+};
+const Panel = ({ id, ref, ...rest }) => {
+	const generatedId = useId();
+	const panelId = id ?? generatedId;
+	const { setPrimaryId } = usePanels();
+	const claimPrimary = useCallback((node) => {
+		if (node?.previousElementSibling !== null) return;
+		setPrimaryId(panelId);
+		return () => {
+			setPrimaryId((current) => current === panelId ? null : current);
+		};
+	}, [panelId, setPrimaryId]);
+	const mergedRef = useMemo(() => mergeRefs(claimPrimary, ref), [claimPrimary, ref]);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: resizable_panels_module_default.panel,
+		id: panelId,
+		ref: mergedRef
+	});
+};
+const Handle = ({ "aria-label": ariaLabel, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...rest }) => {
+	const { size, resize, min, max, step, visualOrientation, primaryId, root } = usePanels();
+	const grabRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const axis = visualOrientation === "horizontal" ? "x" : "y";
+	const release = () => {
+		grabRef.current = null;
+		setDragging(false);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || root === null) return;
+		const sign = measure(root, axis).fromEnd ? -1 : 1;
+		const [decrease, increase] = axis === "x" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		const next = {
+			[decrease]: size - step * sign,
+			[increase]: size + step * sign,
+			Home: min,
+			End: max
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		resize(next);
+	};
+	const distance = (event) => {
+		if (root === null) return null;
+		const layout = measure(root, axis);
+		const point = axis === "x" ? event.clientX : event.clientY;
+		return {
+			...layout,
+			reach: layout.fromEnd ? layout.end - point : point - layout.start
+		};
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"aria-controls": primaryId ?? void 0,
+		"aria-label": ariaLabel ?? (rest["aria-labelledby"] === void 0 ? getMessages().resizablePanelsHandle : void 0),
+		"aria-orientation": axis === "x" ? "vertical" : "horizontal",
+		"aria-valuemax": max,
+		"aria-valuemin": min,
+		"aria-valuenow": Math.round(size),
+		className: clsx(resizable_panels_module_default.handle, axis === "x" ? resizable_panels_module_default.handleX : resizable_panels_module_default.handleY, focus_ring_module_default.ringNoBorder),
+		"data-dragging": dragging ? "" : void 0,
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented || event.button !== 0) return;
+			const current = distance(event);
+			if (current === null) return;
+			grabRef.current = current.reach - size / 100 * current.length;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			setDragging(true);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			const grab = grabRef.current;
+			const current = grab === null ? null : distance(event);
+			if (grab === null || current === null) return;
+			resize((current.reach - grab) / current.length * 100);
+		},
+		onPointerCancel: (event) => {
+			onPointerCancel?.(event);
+			release();
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			release();
+		},
+		role: "separator",
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: clsx(resizable_panels_module_default.line, axis === "x" ? resizable_panels_module_default.lineX : resizable_panels_module_default.lineY)
+		})
+	});
+};
+//#endregion
+export { Handle, Panel, Root };

package/dist/components/layout/resizable-panels/resizable-panels.module.mjs

@@ -0,0 +1,16 @@
+import './resizable-panels.css';
+//#region src/components/layout/resizable-panels/resizable-panels.module.css
+var resizable_panels_module_default = {
+	"handle": "TQAbeG_handle",
+	"handleX": "TQAbeG_handleX",
+	"handleY": "TQAbeG_handleY",
+	"horizontal": "TQAbeG_horizontal",
+	"line": "TQAbeG_line",
+	"lineX": "TQAbeG_lineX",
+	"lineY": "TQAbeG_lineY",
+	"panel": "TQAbeG_panel",
+	"root": "TQAbeG_root",
+	"vertical": "TQAbeG_vertical"
+};
+//#endregion
+export { resizable_panels_module_default as default };

package/dist/components/layout/separator/separator.css

@@ -0,0 +1,37 @@
+@layer properties, theme, base;
+
+@layer components {
+  .qQ-3Zq_root {
+    display: block;
+  }
+
+  .qQ-3Zq_horizontal {
+    block-size: 1px;
+    inline-size: 100%;
+  }
+
+  .qQ-3Zq_vertical {
+    block-size: 100%;
+    inline-size: 1px;
+  }
+
+  .qQ-3Zq_base {
+    background-color: var(--color-border-base);
+  }
+
+  .qQ-3Zq_mute {
+    background-color: var(--color-border-mute);
+  }
+
+  .qQ-3Zq_subtle {
+    background-color: var(--color-border-subtle);
+  }
+
+  @media (forced-colors: active) {
+    .qQ-3Zq_root {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/layout/separator/separator.d.mts

@@ -4,6 +4,5 @@ type Props = {
   orientation?: 'horizontal' | 'vertical';
   color?: 'base' | 'mute' | 'subtle';
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role' | 'aria-orientation' | 'className' | 'style'>;
-declare const Separator: FC<Props>;
-//#endregion
-export { Separator };
+export declare const Separator: FC<Props>;
+//#endregion

package/dist/components/layout/separator/separator.mjs

@@ -1,14 +1,17 @@
-import { cn } from "../../../helpers/cn.mjs";
+import separator_module_default from "./separator.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/separator/separator.tsx
-const Separator = ({ orientation = "horizontal", color = "base", ...rest }) => {
-	const isVertical = orientation === "vertical";
-	return /* @__PURE__ */ jsx("span", {
-		...rest,
-		"aria-orientation": orientation,
-		className: cn("block", isVertical ? "block-full inline-px" : "block-px inline-full", color === "base" && "bg-border-base", color === "mute" && "bg-border-mute", color === "subtle" && "bg-border-subtle"),
-		role: "separator"
-	});
+const COLOR = {
+	base: separator_module_default.base,
+	mute: separator_module_default.mute,
+	subtle: separator_module_default.subtle
 };
+const Separator = ({ orientation = "horizontal", color = "base", ...rest }) => /* @__PURE__ */ jsx("span", {
+	...rest,
+	"aria-orientation": orientation,
+	className: clsx(separator_module_default.root, orientation === "vertical" ? separator_module_default.vertical : separator_module_default.horizontal, COLOR[color]),
+	role: "separator"
+});
 //#endregion
 export { Separator };

package/dist/components/layout/separator/separator.module.mjs

@@ -0,0 +1,12 @@
+import './separator.css';
+//#region src/components/layout/separator/separator.module.css
+var separator_module_default = {
+	"base": "qQ-3Zq_base",
+	"horizontal": "qQ-3Zq_horizontal",
+	"mute": "qQ-3Zq_mute",
+	"root": "qQ-3Zq_root",
+	"subtle": "qQ-3Zq_subtle",
+	"vertical": "qQ-3Zq_vertical"
+};
+//#endregion
+export { separator_module_default as default };

package/dist/components/layout/stack/stack.css

@@ -0,0 +1,49 @@
+@layer properties, theme, base;
+
+@layer components {
+  .xGsfrG_root {
+    display: flex;
+  }
+
+  .xGsfrG_row {
+    flex-direction: row;
+  }
+
+  .xGsfrG_column {
+    flex-direction: column;
+  }
+
+  .xGsfrG_alignStart {
+    align-items: flex-start;
+  }
+
+  .xGsfrG_alignCenter {
+    align-items: center;
+  }
+
+  .xGsfrG_alignEnd {
+    align-items: flex-end;
+  }
+
+  .xGsfrG_alignStretch {
+    align-items: stretch;
+  }
+
+  .xGsfrG_justifyStart {
+    justify-content: flex-start;
+  }
+
+  .xGsfrG_justifyCenter {
+    justify-content: center;
+  }
+
+  .xGsfrG_justifyEnd {
+    justify-content: flex-end;
+  }
+
+  .xGsfrG_justifyBetween {
+    justify-content: space-between;
+  }
+}
+
+@layer utilities;

package/dist/components/layout/stack/stack.d.mts

@@ -2,7 +2,7 @@ import { GapSize } from "../_shared/gap.mjs";
 import { PaddingSize } from "../_shared/padding.mjs";
 import { FC, HTMLAttributes, PropsWithChildren } from "react";
 //#region src/components/layout/stack/stack.d.ts
-type StackProps = PropsWithChildren<{
+export type StackProps = PropsWithChildren<{
   direction?: 'row' | 'column';
   gap?: GapSize;
   /** Inner padding on all sides. Stack has no padding by default. */
@@ -10,6 +10,5 @@ type StackProps = PropsWithChildren<{
   align?: 'start' | 'center' | 'end' | 'stretch';
   justify?: 'start' | 'center' | 'end' | 'between';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>>;
-declare const Stack: FC<StackProps>;
-//#endregion
-export { Stack, StackProps };
+export declare const Stack: FC<StackProps>;
+//#endregion

package/dist/components/layout/stack/stack.mjs

@@ -1,23 +1,24 @@
-import { cn } from "../../../helpers/cn.mjs";
 import { GAP_CLASS } from "../_shared/gap.mjs";
 import { PADDING_CLASS } from "../_shared/padding.mjs";
+import stack_module_default from "./stack.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/stack/stack.tsx
 const ALIGN_CLASS = {
-	start: "items-start",
-	center: "items-center",
-	end: "items-end",
-	stretch: "items-stretch"
+	start: stack_module_default.alignStart,
+	center: stack_module_default.alignCenter,
+	end: stack_module_default.alignEnd,
+	stretch: stack_module_default.alignStretch
 };
 const JUSTIFY_CLASS = {
-	start: "justify-start",
-	center: "justify-center",
-	end: "justify-end",
-	between: "justify-between"
+	start: stack_module_default.justifyStart,
+	center: stack_module_default.justifyCenter,
+	end: stack_module_default.justifyEnd,
+	between: stack_module_default.justifyBetween
 };
 const Stack = ({ direction = "column", gap = "md", padding, align, justify, children, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP_CLASS[gap], padding && PADDING_CLASS[padding], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
+	className: clsx(stack_module_default.root, direction === "row" ? stack_module_default.row : stack_module_default.column, GAP_CLASS[gap], padding && PADDING_CLASS[padding], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
 	children
 });
 //#endregion

package/dist/components/layout/stack/stack.module.mjs

@@ -0,0 +1,17 @@
+import './stack.css';
+//#region src/components/layout/stack/stack.module.css
+var stack_module_default = {
+	"alignCenter": "xGsfrG_alignCenter",
+	"alignEnd": "xGsfrG_alignEnd",
+	"alignStart": "xGsfrG_alignStart",
+	"alignStretch": "xGsfrG_alignStretch",
+	"column": "xGsfrG_column",
+	"justifyBetween": "xGsfrG_justifyBetween",
+	"justifyCenter": "xGsfrG_justifyCenter",
+	"justifyEnd": "xGsfrG_justifyEnd",
+	"justifyStart": "xGsfrG_justifyStart",
+	"root": "xGsfrG_root",
+	"row": "xGsfrG_row"
+};
+//#endregion
+export { stack_module_default as default };

package/dist/components/navigation/anchor/anchor.css

@@ -0,0 +1,29 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._7nx_2W_root {
+    color: var(--color-fg-info);
+    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);
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    ._7nx_2W_root:hover {
+      color: var(--color-fg-base);
+    }
+  }
+
+  ._7nx_2W_root:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+
+  ._7nx_2W_external {
+    align-items: center;
+    gap: calc(var(--spacing) * .5);
+    display: inline-flex;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/anchor/anchor.d.mts

@@ -15,6 +15,5 @@ type Props<T extends string> = {
   openInNewTab?: boolean;
   renderAnchor?: (props: RenderAnchorProps<T>) => ReactNode;
 } & RestProps;
-declare const Anchor: <T extends string>({ href, children, openInNewTab, renderAnchor, ...rest }: Props<T>) => ReactNode;
-//#endregion
-export { Anchor };
+export declare const Anchor: <T extends string>({ href, children, openInNewTab, renderAnchor, ...rest }: Props<T>) => ReactNode;
+//#endregion

package/dist/components/navigation/anchor/anchor.mjs

@@ -1,4 +1,7 @@
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ExternalLinkIcon } from "../../icons/lucide.mjs";
+import anchor_module_default from "./anchor.module.mjs";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/anchor/anchor.tsx
 const defaultRenderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PURE__ */ jsx("a", {
@@ -7,12 +10,12 @@ const defaultRenderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PUR
 });
 const Anchor = ({ href, children, openInNewTab = false, renderAnchor = defaultRenderAnchor, ...rest }) => {
 	const kind = !href.startsWith("http") && !openInNewTab ? "internal" : "external";
-	const baseClassName = "text-fg-info underline transition-colors hover:text-fg-info/80 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info focus-visible:rounded-sm";
+	const baseClassName = clsx(anchor_module_default.root, focus_ring_module_default.ringNoBorder);
 	const props = kind === "internal" ? {
 		className: baseClassName,
 		children
 	} : {
-		className: `${baseClassName} inline-flex items-center gap-0.5`,
+		className: clsx(baseClassName, anchor_module_default.external),
 		target: "_blank",
 		rel: "noopener noreferrer",
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(ExternalLinkIcon, { size: "sm" })] })