@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/base/dropdown-menu.js

@@ -0,0 +1,125 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+//#region src/web/base/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, portal = true, ...props }) {
+	const comp = /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-surface border border-border p-1 shadow-md", className),
+		...props
+	});
+	if (!portal) return comp;
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: comp });
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-control py-1.5 pr-2 pl-8 text-[13px] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-control py-1.5 pr-2 pl-8 text-[13px] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("bg-border -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-control px-2 py-1.5 text-[13px] outline-hidden select-none data-[inset]:pl-8", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-surface border border-border p-1 shadow-md", className),
+		...props
+	});
+}
+
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/web/base/field.d.ts

@@ -0,0 +1,27 @@
+import { Label } from "./label.js";
+import React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/field.d.ts
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label";
+}): React.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}): React.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+  errors?: Array<{
+    message?: string;
+  } | undefined>;
+}): React.JSX.Element | null;
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/web/base/field.js

@@ -0,0 +1,118 @@
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/web/base/field.tsx
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+		...props
+	});
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+		...props
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+		...props
+	});
+}
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+		horizontal: [
+			"flex-row items-center",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-control has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:bg-action/5 has-data-[state=checked]:border-action dark:has-data-[state=checked]:bg-action/10", className),
+		...props
+	});
+}
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-action-ink [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+}
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+}
+function FieldError({ className, children, errors, ...props }) {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length === 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index.toString()))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-destructive text-sm font-normal", className),
+		...props,
+		children: content
+	});
+}
+
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/web/base/form.d.ts

@@ -0,0 +1,38 @@
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import * as LabelPrimitive from "@radix-ui/react-label";
+//#region src/web/base/form.d.ts
+declare const useFormField: () => {
+  id: string;
+  formItemId: string;
+  formLabelId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  errors: readonly unknown[];
+};
+declare function FormItem({ className, errors, ...props }: React$1.ComponentProps<"div"> & {
+  /**
+   * フィールド（TanStack Form）の外で使うときのエラー。入力欄の `aria-invalid` と `aria-describedby`、
+   * ラベルの `data-error`、`FormMessage` の表示に使う。フィールドの中では不要（field のエラーを読む）。
+   */
+  errors?: readonly unknown[];
+}): React$1.JSX.Element;
+declare function FormLabel({ required, helpText, helpLabel, className, ...props }: {
+  required?: boolean;
+  helpText?: React$1.ReactNode;
+  /** ヘルプのトリガーの読み上げ名 */
+  helpLabel?: string;
+} & React$1.ComponentProps<typeof LabelPrimitive.Root>): React$1.JSX.Element;
+/**
+ * 入力欄に id・aria-describedby・aria-invalid を渡す。
+ * 既定の id はラベルの `htmlFor` が指す `formItemId`。**1 つの field に control が複数あるとき**（radio の選択肢など）は、
+ * 同じ id が重なるので、2 つ目以降は `id` を渡して分ける（aria-describedby と aria-invalid は、どの control にも付く）。
+ */
+declare function FormControl({ className: _className, id, ...props }: React$1.ComponentProps<typeof Slot>): React$1.JSX.Element;
+declare function FormDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+declare function FormMessage({ className, errors: overriddenErrors, ...props }: React$1.ComponentProps<"p"> & {
+  /** このメッセージだけに出すエラー。入力欄の aria-invalid には効かない（それは FormItem の errors） */
+  errors?: readonly unknown[];
+}): React$1.JSX.Element | null;
+//#endregion
+export { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField };

package/dist/web/base/form.js

@@ -0,0 +1,110 @@
+import { useOptionalFieldContext } from "../../shared/form.js";
+import { HELP_LABEL } from "../lib/labels.js";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleQuestionMark } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/web/base/form.tsx
+const useFormField = () => {
+	const itemContext = React$1.useContext(FormItemContext);
+	const field = useOptionalFieldContext();
+	const errors = itemContext.errors ?? field?.state.meta.errors ?? [];
+	const { id } = itemContext;
+	return {
+		id,
+		formItemId: `${id}-form-item`,
+		formLabelId: `${id}-form-item-label`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		errors
+	};
+};
+const FormItemContext = React$1.createContext({ id: "" });
+function FormItem({ className, errors, ...props }) {
+	const id = React$1.useId();
+	const isValidating = useOptionalFieldContext()?.state.meta.isValidating ?? false;
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: {
+			id,
+			errors
+		},
+		children: /* @__PURE__ */ jsx(Field, {
+			"data-slot": "form-item",
+			className: cn("gap-2", isValidating && "animate-pulse pointer-events-none", className),
+			orientation: "responsive",
+			...props
+		})
+	});
+}
+function FormLabel({ required, helpText, helpLabel = HELP_LABEL, className, ...props }) {
+	const { errors, formItemId, formLabelId } = useFormField();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				id: formLabelId,
+				"data-slot": "form-label",
+				"data-error": errors.length > 0,
+				className: cn("font-semibold text-xs opacity-80 data-[error=true]:text-destructive data-[error=true]:opacity-100", className),
+				htmlFor: formItemId,
+				...props
+			}),
+			required && /* @__PURE__ */ jsx("p", {
+				"data-slot": "form-required",
+				className: "text-state-error text-sm",
+				children: "*"
+			}),
+			helpText && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				"aria-label": helpLabel,
+				children: /* @__PURE__ */ jsx(CircleQuestionMark, {
+					className: "h-4 w-4",
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: helpText })] })
+		]
+	});
+}
+/**
+* 入力欄に id・aria-describedby・aria-invalid を渡す。
+* 既定の id はラベルの `htmlFor` が指す `formItemId`。**1 つの field に control が複数あるとき**（radio の選択肢など）は、
+* 同じ id が重なるので、2 つ目以降は `id` を渡して分ける（aria-describedby と aria-invalid は、どの control にも付く）。
+*/
+function FormControl({ className: _className, id, ...props }) {
+	const { errors, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot, {
+		"data-slot": "form-control",
+		id: id ?? formItemId,
+		"aria-describedby": errors.length === 0 ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": errors.length > 0,
+		...props
+	});
+}
+function FormDescription({ className, ...props }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldDescription, {
+		"data-slot": "form-description",
+		id: formDescriptionId,
+		className: cn("text-muted-foreground text-sm whitespace-pre-wrap", className),
+		...props
+	});
+}
+function FormMessage({ className, errors: overriddenErrors, ...props }) {
+	const { errors, formMessageId } = useFormField();
+	const list = overriddenErrors ?? errors;
+	const body = list.length > 0 ? list.join("\n") : null;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx(FieldError, {
+		"data-slot": "form-message",
+		id: formMessageId,
+		className: cn("text-destructive text-sm pb-3 whitespace-pre-wrap", className),
+		...props,
+		children: body
+	});
+}
+
+//#endregion
+export { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField };

package/dist/web/base/input.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/input.d.ts
+declare const inputVariants: (props?: ({
+  variant?: "<3" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Input({ className, type, variant, ...props }: ComponentProps<"input"> & VariantProps<typeof inputVariants>): import("react").JSX.Element;
+//#endregion
+export { Input, inputVariants };

package/dist/web/base/input.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/web/base/input.tsx
+const inputVariants = cva("file:text-foreground placeholder:text-muted-foreground selection:bg-action selection:text-action-foreground flex transition-[border-color,box-shadow] w-full min-w-0 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive", {
+	variants: { variant: {
+		default: "border-input h-8 rounded-control border bg-card px-2.5 py-1 text-base focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/25 aria-invalid:focus-visible:ring-destructive/25 md:text-[13px]",
+		"<3": "border-0 border-b border-dashed border-border bg-transparent px-0 py-0.5 text-xs focus-visible:border-solid focus-visible:border-ring"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Input({ className, type, variant, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn(inputVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { Input, inputVariants };

package/dist/web/base/label.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+//#region src/web/base/label.d.ts
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): React$1.JSX.Element;
+//#endregion
+export { Label };

package/dist/web/base/label.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+//#region src/web/base/label.tsx
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-[13px] leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+
+//#endregion
+export { Label };

package/dist/web/base/pagination.d.ts

@@ -0,0 +1,34 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+//#region src/web/base/pagination.d.ts
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+type PaginationLinkCommonProps = {
+  isActive?: boolean;
+  disabled?: boolean;
+} & Pick<React$1.ComponentProps<typeof Button>, "size">;
+/**
+ * `href` があればリンク（`<a>`）、**無ければボタン（`<button type="button">`）**。クライアントの状態でページを替える画面では
+ * href を持たないので、`<a>` のままだとフォーカスもキーボードの操作もできない（href の無い `<a>` はリンクではない）。
+ */
+type PaginationLinkProps = PaginationLinkCommonProps & (({
+  href: string;
+} & Omit<React$1.ComponentProps<"a">, "href">) | ({
+  href?: undefined;
+} & Omit<React$1.ComponentProps<"button">, "type">));
+declare function PaginationLink(props: PaginationLinkProps): React$1.JSX.Element;
+declare function PaginationPrevious({ className, previousLabel, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+  /** 読み上げ名（アイコンだけの表示なので、名前はここで付ける） */
+  previousLabel?: string;
+}): React$1.JSX.Element;
+declare function PaginationNext({ className, nextLabel, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+  /** 読み上げ名（アイコンだけの表示なので、名前はここで付ける） */
+  nextLabel?: string;
+}): React$1.JSX.Element;
+declare function PaginationEllipsis({ className, moreLabel, ...props }: React$1.ComponentProps<"span"> & {
+  /** 省略されたページの読み上げ名 */
+  moreLabel?: string;
+}): React$1.JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/web/base/pagination.js

@@ -0,0 +1,90 @@
+import { MORE_PAGES_LABEL, NEXT_PAGE_LABEL, PAGINATION_LABEL, PREVIOUS_PAGE_LABEL } from "../lib/labels.js";
+import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+//#region src/web/base/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": PAGINATION_LABEL,
+		"data-slot": "pagination",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex flex-row items-center gap-1", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		className: "select-none",
+		...props
+	});
+}
+function PaginationLink(props) {
+	const { isActive, disabled, size = "icon" } = props;
+	const className = cn(buttonVariants({
+		variant: isActive ? "outline" : "ghost",
+		size
+	}), disabled && "cursor-none opacity-50 pointer-events-none", props.className);
+	const common = {
+		"aria-current": isActive ? "page" : void 0,
+		"data-slot": "pagination-link",
+		"data-active": isActive
+	};
+	if (props.href !== void 0) {
+		const { isActive: _a, disabled: _d, size: _s, className: _c, ...anchor } = props;
+		return /* @__PURE__ */ jsx("a", {
+			...common,
+			...anchor,
+			className
+		});
+	}
+	const { isActive: _a, disabled: _d, size: _s, className: _c, href: _h, ...button } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...common,
+		...button,
+		disabled,
+		className
+	});
+}
+function PaginationPrevious({ className, previousLabel = PREVIOUS_PAGE_LABEL, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": previousLabel,
+		size: "default",
+		className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+}
+function PaginationNext({ className, nextLabel = NEXT_PAGE_LABEL, ...props }) {
+	return /* @__PURE__ */ jsx(PaginationLink, {
+		"aria-label": nextLabel,
+		size: "default",
+		className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+function PaginationEllipsis({ className, moreLabel = MORE_PAGES_LABEL, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex size-9 items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: moreLabel
+		})]
+	});
+}
+
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/web/base/popover.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/web/base/popover.d.ts
+declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): React$1.JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): React$1.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, portal, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content> & {
+  portal?: boolean;
+}): React$1.JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): React$1.JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/web/base/popover.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+//#region src/web/base/popover.tsx
+function Popover({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, portal = true, ...props }) {
+	const comp = /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-surface border border-border p-4 shadow-md outline-hidden", className),
+		...props
+	});
+	if (!portal) return comp;
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: comp });
+}
+function PopoverAnchor({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+}
+
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };