@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/feedback/progress/progress.module.mjs

@@ -0,0 +1,12 @@
+import './progress.css';
+//#region src/components/feedback/progress/progress.module.css
+var progress_module_default = {
+	"fill": "YyzTwG_fill",
+	"indeterminate": "YyzTwG_indeterminate",
+	"indeterminateTrack": "YyzTwG_indeterminateTrack",
+	"pulse": "YyzTwG_pulse",
+	"slide": "YyzTwG_slide",
+	"track": "YyzTwG_track"
+};
+//#endregion
+export { progress_module_default as default };

package/dist/components/feedback/skeleton/skeleton.css

@@ -0,0 +1,64 @@
+@layer properties, theme, base;
+
+@layer components {
+  .RGPkxq_root {
+    background-color: var(--color-bg-mute);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-gray-text);
+    }
+  }
+
+  .RGPkxq_animate {
+    animation-name: RGPkxq_pulse;
+    animation-duration: var(--duration-pulse);
+    animation-timing-function: var(--easing-pulse);
+    animation-iteration-count: infinite;
+  }
+
+  .RGPkxq_rect {
+    border-radius: var(--radius-lg);
+  }
+
+  .RGPkxq_rectSm {
+    width: calc(var(--spacing) * 24);
+    height: calc(var(--spacing) * 3);
+  }
+
+  .RGPkxq_rectMd {
+    width: calc(var(--spacing) * 40);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .RGPkxq_rectLg {
+    width: calc(var(--spacing) * 56);
+    height: calc(var(--spacing) * 5);
+  }
+
+  .RGPkxq_circle {
+    border-radius: var(--radius-full);
+  }
+
+  .RGPkxq_circleSm {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  .RGPkxq_circleMd {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
+
+  .RGPkxq_circleLg {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
+
+  @keyframes RGPkxq_pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/skeleton/skeleton.d.mts

@@ -5,6 +5,5 @@ type Props = {
   shape?: 'rect' | 'circle';
   size?: 'sm' | 'md' | 'lg';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
-declare const Skeleton: FC<Props>;
-//#endregion
-export { Skeleton };
+export declare const Skeleton: FC<Props>;
+//#endregion

package/dist/components/feedback/skeleton/skeleton.mjs

@@ -1,10 +1,27 @@
-import { cn } from "../../../helpers/cn.mjs";
+import skeleton_module_default from "./skeleton.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/skeleton/skeleton.tsx
+const SHAPE = {
+	rect: skeleton_module_default.rect,
+	circle: skeleton_module_default.circle
+};
+const SIZE = {
+	rect: {
+		sm: skeleton_module_default.rectSm,
+		md: skeleton_module_default.rectMd,
+		lg: skeleton_module_default.rectLg
+	},
+	circle: {
+		sm: skeleton_module_default.circleSm,
+		md: skeleton_module_default.circleMd,
+		lg: skeleton_module_default.circleLg
+	}
+};
 const Skeleton = ({ animate = true, shape = "rect", size = "md", ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
 	"aria-hidden": true,
-	className: cn("bg-bg-mute", animate && "animate-pulse", shape === "rect" && "rounded-lg", shape === "rect" && size === "sm" && "h-3 w-24", shape === "rect" && size === "md" && "h-4 w-40", shape === "rect" && size === "lg" && "h-5 w-56", shape === "circle" && "rounded-full", shape === "circle" && size === "sm" && "size-8", shape === "circle" && size === "md" && "size-12", shape === "circle" && size === "lg" && "size-16")
+	className: clsx(skeleton_module_default.root, animate && skeleton_module_default.animate, SHAPE[shape], SIZE[shape][size])
 });
 //#endregion
 export { Skeleton };

package/dist/components/feedback/skeleton/skeleton.module.mjs

@@ -0,0 +1,17 @@
+import './skeleton.css';
+//#region src/components/feedback/skeleton/skeleton.module.css
+var skeleton_module_default = {
+	"animate": "RGPkxq_animate",
+	"circle": "RGPkxq_circle",
+	"circleLg": "RGPkxq_circleLg",
+	"circleMd": "RGPkxq_circleMd",
+	"circleSm": "RGPkxq_circleSm",
+	"pulse": "RGPkxq_pulse",
+	"rect": "RGPkxq_rect",
+	"rectLg": "RGPkxq_rectLg",
+	"rectMd": "RGPkxq_rectMd",
+	"rectSm": "RGPkxq_rectSm",
+	"root": "RGPkxq_root"
+};
+//#endregion
+export { skeleton_module_default as default };

package/dist/components/feedback/spinner/spinner.css

@@ -0,0 +1,40 @@
+@layer properties, theme, base;
+
+@layer components {
+  .F4IY4q_root {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .F4IY4q_indicator {
+    border: 4px solid var(--color-border-base);
+    border-top-color: var(--color-primary-border);
+    border-radius: var(--radius-full);
+    animation: F4IY4q_spin var(--duration-spin) linear infinite;
+    display: inline-block;
+  }
+
+  .F4IY4q_sm {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .F4IY4q_md {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+
+  .F4IY4q_lg {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  @keyframes F4IY4q_spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/spinner/spinner.d.mts

@@ -4,6 +4,5 @@ type Props = {
   label?: string;
   size?: 'sm' | 'md' | 'lg';
 } & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label' | 'className' | 'style'>;
-declare const Spinner: FC<Props>;
-//#endregion
-export { Spinner };
+export declare const Spinner: FC<Props>;
+//#endregion

package/dist/components/feedback/spinner/spinner.mjs

@@ -1,21 +1,27 @@
-"use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import spinner_module_default from "./spinner.module.mjs";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/spinner/spinner.tsx
+const SIZE = {
+	sm: spinner_module_default.sm,
+	md: spinner_module_default.md,
+	lg: spinner_module_default.lg
+};
 const Spinner = ({ label, size = "md", ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const resolvedLabel = label ?? messages.loading;
 	return /* @__PURE__ */ jsxs("output", {
 		...rest,
 		"aria-label": resolvedLabel,
 		"aria-live": "polite",
-		className: "inline-flex items-center justify-center",
+		className: spinner_module_default.root,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn("inline-block animate-spin rounded-full border-4 border-border-base border-t-primary-border", size === "sm" && "size-4", size === "md" && "size-6", size === "lg" && "size-8")
+			className: clsx(spinner_module_default.indicator, SIZE[size])
 		}), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
+			className: sr_only_module_default.srOnly,
 			children: resolvedLabel
 		})]
 	});

package/dist/components/feedback/spinner/spinner.module.mjs

@@ -0,0 +1,12 @@
+import './spinner.css';
+//#region src/components/feedback/spinner/spinner.module.css
+var spinner_module_default = {
+	"indicator": "F4IY4q_indicator",
+	"lg": "F4IY4q_lg",
+	"md": "F4IY4q_md",
+	"root": "F4IY4q_root",
+	"sm": "F4IY4q_sm",
+	"spin": "F4IY4q_spin"
+};
+//#endregion
+export { spinner_module_default as default };

package/dist/components/feedback/toast/context.d.mts

@@ -2,8 +2,8 @@ import { Status } from "../../../types/variables.mjs";
 import { AlertAction } from "../alert/alert.mjs";
 import "../alert/index.mjs";
 //#region src/components/feedback/toast/context.d.ts
-type ToastAction = AlertAction;
-type ToastOptions = {
+export type ToastAction = AlertAction;
+export type ToastOptions = {
   /**
    * 自動で閉じるまでのミリ秒。`Number.POSITIVE_INFINITY` で自動クローズなし
    * （閉じるボタンでのみ閉じる）。既定は 5000ms。
@@ -11,7 +11,7 @@ type ToastOptions = {
   duration?: number;
   action?: ToastAction;
 };
-type ToastType = {
+export type ToastType = {
   id: string;
   tone: Status;
   message: string;
@@ -23,12 +23,11 @@ type ToastType = {
    */
   opener?: WeakRef<HTMLElement>;
 };
-type ToastStore = {
-  open: (tone: Status, message: string, options?: ToastOptions) => void;
+export type ToastStore = {
+  open: (tone: Status, message: string, options?: ToastOptions) => string;
   close: (id: string) => void;
   closeAll: () => void;
 };
-declare const ToastStoreContext: import("react").Context<ToastStore | null>, useToastStore: () => ToastStore;
-declare const useToast: () => ToastStore;
-//#endregion
-export { ToastAction, ToastOptions, ToastStore, ToastStoreContext, ToastType, useToast, useToastStore };
+export declare const ToastStoreContext: import("react").Context<ToastStore | null>, useToastStore: () => ToastStore;
+export declare const useToast: () => ToastStore;
+//#endregion

package/dist/components/feedback/toast/provider.css

@@ -0,0 +1,69 @@
+@layer properties, theme, base;
+
+@layer components {
+  .l8QDQq_viewport {
+    bottom: calc(var(--spacing) * 3);
+    z-index: var(--z-index-toast);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    display: flex;
+  }
+
+  .l8QDQq_fixed {
+    position: fixed;
+  }
+
+  .l8QDQq_absolute {
+    position: absolute;
+  }
+
+  .l8QDQq_item {
+    width: 100%;
+    transition-property: grid-template-rows, opacity, padding-block-start;
+    transition-duration: var(--duration-moderate);
+    grid-template-rows: 1fr;
+    justify-items: center;
+    padding-block-start: calc(var(--spacing) * 4);
+    display: grid;
+
+    &[data-closing] {
+      opacity: 0;
+      grid-template-rows: 0fr;
+      padding-block-start: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .l8QDQq_itemContent {
+    min-height: 0;
+    min-block-size: 0;
+  }
+
+  .l8QDQq_item[data-closing] > .l8QDQq_itemContent {
+    overflow: hidden;
+  }
+
+  .l8QDQq_enter {
+    box-shadow: var(--shadow-lg);
+    animation-name: l8QDQq_enter;
+    animation-duration: var(--duration-moderate);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  @keyframes l8QDQq_enter {
+    from {
+      opacity: 0;
+      translate: 0 calc(var(--spacing) * 6);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/toast/provider.d.mts

@@ -1,8 +1,7 @@
 import { FC, PropsWithChildren, RefObject } from "react";
 //#region src/components/feedback/toast/provider.d.ts
-declare const ToastProvider: FC<PropsWithChildren<{
+export declare const ToastProvider: FC<PropsWithChildren<{
   portalRef?: RefObject<HTMLElement | null>;
   position?: 'fixed' | 'absolute';
 }>>;
-//#endregion
-export { ToastProvider };
+//#endregion

package/dist/components/feedback/toast/provider.mjs

@@ -1,15 +1,22 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { ToastStoreContext } from "./context.mjs";
 import { Toast } from "./toast.mjs";
-import { useEffect, useMemo, useRef, useState } from "react";
+import provider_module_default from "./provider.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/toast/provider.tsx
 const MAX_TOAST_COUNT = 5;
 const DEFAULT_DURATION_MS = 5e3;
 const EXIT_MS = 200;
+const POSITION = {
+	fixed: provider_module_default.fixed,
+	absolute: provider_module_default.absolute
+};
+/** 差し替えを通知する相手がいない外部値のための、何もしない購読。 */
+const subscribeNever = () => () => {};
 const FOCUSABLE_SELECTOR = "a[href], button:not(:disabled), [tabindex]:not([tabindex=\"-1\"])";
 const enforceLimit = (state) => {
 	if (state.isHovered || state.isFocused) return state;
@@ -22,19 +29,15 @@ const enforceLimit = (state) => {
 	};
 };
 const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const [state, setState] = useState({
 		toasts: [],
 		closingIds: [],
 		isHovered: false,
 		isFocused: false
 	});
-	const [defaultContainer, setDefaultContainer] = useState(null);
 	const viewportRef = useRef(null);
 	const focusedToastIdRef = useRef(null);
-	useEffect(() => {
-		setDefaultContainer(document.body);
-	}, []);
 	const exitTimersRef = useRef(/* @__PURE__ */ new Map());
 	useEffect(() => {
 		for (const id of state.closingIds) {
@@ -88,6 +91,7 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 					opener
 				}]
 			}));
+			return id;
 		},
 		close: (id) => {
 			setState((prev) => prev.closingIds.includes(id) ? prev : {
@@ -114,13 +118,13 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 			isFocused
 		}));
 	};
-	const container = portalRef?.current ?? defaultContainer;
+	const container = useSyncExternalStore(subscribeNever, () => portalRef?.current ?? document.body, () => null);
 	const isPaused = state.isHovered || state.isFocused;
 	return /* @__PURE__ */ jsxs(ToastStoreContext, {
 		value: store,
 		children: [children, container ? createPortal(/* @__PURE__ */ jsx("section", {
 			"aria-label": state.toasts.length > 0 ? messages.toastRegion : void 0,
-			className: cn("bottom-3 z-toast flex w-full flex-col items-center justify-center", position === "fixed" && "fixed", position === "absolute" && "absolute"),
+			className: clsx(provider_module_default.viewport, POSITION[position]),
 			onBlur: (event) => {
 				if (event.currentTarget.contains(event.relatedTarget)) return;
 				setFocused(false);
@@ -142,14 +146,14 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 			children: state.toasts.map((toast) => {
 				const isClosing = state.closingIds.includes(toast.id);
 				return /* @__PURE__ */ jsx("div", {
-					className: "ao-toast-item w-full justify-items-center",
+					className: provider_module_default.item,
 					"data-closing": isClosing || void 0,
 					"data-toast-id": toast.id,
 					inert: isClosing || void 0,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "min-h-0",
+						className: provider_module_default.itemContent,
 						children: /* @__PURE__ */ jsx("div", {
-							className: "ao-toast-enter shadow-lg",
+							className: provider_module_default.enter,
 							children: /* @__PURE__ */ jsx(Toast, {
 								action: toast.action,
 								duration: toast.duration,

package/dist/components/feedback/toast/provider.module.mjs

@@ -0,0 +1,12 @@
+import './provider.css';
+//#region src/components/feedback/toast/provider.module.css
+var provider_module_default = {
+	"absolute": "l8QDQq_absolute",
+	"enter": "l8QDQq_enter",
+	"fixed": "l8QDQq_fixed",
+	"item": "l8QDQq_item",
+	"itemContent": "l8QDQq_itemContent",
+	"viewport": "l8QDQq_viewport"
+};
+//#endregion
+export { provider_module_default as default };

package/dist/components/feedback/toast/toast.d.mts

@@ -10,6 +10,5 @@ type ToastProps = {
   isPaused?: boolean;
   onClose: () => void;
 };
-declare const Toast: FC<ToastProps>;
-//#endregion
-export { Toast };
+export declare const Toast: FC<ToastProps>;
+//#endregion

package/dist/components/form/autocomplete/autocomplete.css

@@ -0,0 +1,154 @@
+@layer properties, theme, base;
+
+@layer components {
+  .ms0JIW_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    inline-size: 100%;
+    position: relative;
+  }
+
+  .ms0JIW_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .ms0JIW_readOnly {
+    background-color: var(--color-bg-subtle);
+  }
+
+  .ms0JIW_root:has([aria-invalid="true"]), .ms0JIW_root:has([aria-invalid="true"]):focus-within {
+    border-color: var(--color-border-error);
+  }
+
+  .ms0JIW_body {
+    min-height: calc(var(--spacing) * 12);
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .ms0JIW_tags {
+    gap: calc(var(--spacing) * 1);
+    flex-wrap: wrap;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+  }
+
+  .ms0JIW_tag {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+    background-color: var(--color-bg-mute);
+    display: inline-flex;
+  }
+
+  .ms0JIW_tagOnDisabled {
+    background-color: var(--color-bg-base);
+  }
+
+  .ms0JIW_input {
+    background-color: #0000;
+    flex-grow: 1;
+
+    &:focus-visible {
+      outline-style: none;
+
+      @media (forced-colors: active) {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+
+    &:read-only, &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .ms0JIW_popup {
+    z-index: var(--z-index-raised);
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    box-shadow: var(--shadow-md);
+  }
+
+  .ms0JIW_list {
+    max-block-size: calc(var(--spacing) * 96);
+    padding-block: calc(var(--spacing) * 2);
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+    overflow-y: auto;
+
+    @container style(--writing: vertical) {
+      overflow: auto visible;
+    }
+  }
+
+  .ms0JIW_pending {
+    opacity: .6;
+  }
+
+  .ms0JIW_empty {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-fg-mute);
+  }
+
+  .ms0JIW_option {
+    cursor: pointer;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    outline-color: var(--color-border-base);
+    outline-offset: -2px;
+    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);
+  }
+
+  .ms0JIW_selected {
+    background-color: var(--color-primary-bg-subtle);
+    color: var(--color-primary-fg);
+  }
+
+  .ms0JIW_active {
+    background-color: var(--color-bg-subtle);
+
+    @media (prefers-contrast: more) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (forced-colors: active) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+  }
+
+  .ms0JIW_active.ms0JIW_selected {
+    background-color: var(--color-primary-bg-mute);
+  }
+
+  .ms0JIW_option.ms0JIW_selected {
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/autocomplete/autocomplete.d.mts

@@ -18,6 +18,5 @@ type UncontrolledProps = {
   onChange?: (value: string[]) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const Autocomplete: FC<Props>;
-//#endregion
-export { Autocomplete };
+export declare const Autocomplete: FC<Props>;
+//#endregion