akanjs 3.0.0-beta.2 → 3.0.0-beta.20

package/ui/Input.tsx

@@ -6,6 +6,7 @@ import React, {
   type ChangeEvent,
   type InputHTMLAttributes,
   type KeyboardEvent,
+  type ReactNode,
   type RefObject,
   type TextareaHTMLAttributes,
   useEffect,
@@ -17,27 +18,59 @@ import { agentAttrs } from "./agentAttrs";
 import { inputRecipe } from "./recipe";
 import { createOverridable, useUiRecipe } from "./UiOverride";
 
+const statusClassOf = (status: string, firstFocus: boolean) =>
+  status === "error"
+    ? "border-destructive"
+    : !firstFocus && status === "warning"
+      ? "border-warning"
+      : status === "success"
+        ? "border-success"
+        : "";
+
+const blurOnEscape =
+  (
+    onPressEnter?: (value: string, event: KeyboardEvent<HTMLInputElement>) => void,
+    onPressEscape?: (e: KeyboardEvent<HTMLInputElement>) => void,
+  ) =>
+  (e: KeyboardEvent<HTMLInputElement>) => {
+    if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+
+const LeadingIcon = ({ icon, className }: { icon: ReactNode; className?: string }) => {
+  if (!icon) return null;
+  return <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", className)}>{icon}</div>;
+};
+
+export const invalidMessageOf = (
+  skip: unknown,
+  result: boolean | string | undefined,
+  l: (key: "base.invalidValueError") => string,
+) => (skip || result === true ? null : result === false ? l("base.invalidValueError") : result);
+
+export const InvalidMessage = ({ message }: { message: ReactNode }) => {
+  if (!message) return null;
+  return <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{message}</div>;
+};
+
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
-  /** Visual input style. */
   inputStyleType?: "bordered" | "borderless" | "underline";
-  /** Ref forwarded to the native input element. */
   inputRef?: RefObject<HTMLInputElement | null>;
-  /** Controlled input value. */
   value: string;
-  /** Allow empty value without warning status. */
+  /** Allows an empty value without the warning status. */
   nullable?: boolean;
-  /** Optional leading icon. */
   icon?: React.ReactNode;
   iconClassName?: string;
   inputClassName?: string;
   inputWrapperClassName?: string;
-  /** Called when Enter is pressed. */
   onPressEnter?: (value: any, event: KeyboardEvent<HTMLInputElement>) => void;
-  /** Returns true for valid input, false/string for invalid input. */
+  /** `true` is valid; `false` or a message string is invalid. */
   validate?: (value: string) => boolean | string;
-  /** Controlled value change callback. */
   onChange?: (value: string, e?: ChangeEvent<HTMLInputElement>) => void;
-  /** Called when Escape is pressed after blurring the input. */
+  /** Called after Escape blurs the input. */
   onPressEscape?: (e: KeyboardEvent<HTMLInputElement>) => void;
 };
 const DefaultInput = ({
@@ -61,25 +94,7 @@ const DefaultInput = ({
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = validate ? validate(value) : undefined;
   const inputBase = (useUiRecipe("input") ?? inputRecipe)();
-  const status: "error" | "warning" | "success" | null =
-    !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
-  const invalidMessage =
-    (value && !value.length) || validateResult === true || firstFocus
-      ? null
-      : validateResult === false
-        ? l("base.invalidValueError")
-        : validateResult;
-  
-  const statusClass =
-    inputStyleType === "bordered"
-      ? status === "error"
-        ? "border-destructive"
-        : !firstFocus && status === "warning"
-          ? "border-warning"
-          : status === "success"
-            ? "border-success"
-            : ""
-      : "";
+  const invalidMessage = invalidMessageOf((value && !value.length) || firstFocus, validateResult, l);
   const inputType = cn(
     inputBase,
     inputStyleType === "borderless"
@@ -88,14 +103,6 @@ const DefaultInput = ({
         ? "rounded-none border-0 border-b"
         : "",
   );
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
-    if (e.key === "Escape") {
-      e.currentTarget.blur();
-
-      onPressEscape?.(e);
-    }
-  };
 
   return (
     <div className={cn("relative isolate flex items-center", className)}>
@@ -111,11 +118,10 @@ const DefaultInput = ({
         onBlur={(e) => {
           if (firstFocus && value) setFirstFocus(false);
         }}
-        onKeyDown={handleKeyDown}
+        onKeyDown={blurOnEscape(onPressEnter, onPressEscape)}
         className={cn(
           "text-foreground outline-hidden duration-300 focus:border-primary focus:outline-hidden",
           inputType,
-          
           inputClassName,
         )}
       />
@@ -146,6 +152,7 @@ export type TextAreaProps = Omit<
 const DefaultTextArea = ({
   className,
   nullable,
+  inputRef,
   value,
   inputClassName,
   inputWrapperClassName,
@@ -157,26 +164,13 @@ const DefaultTextArea = ({
 }: TextAreaProps) => {
   useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
-  const inputRef = useRef<HTMLTextAreaElement>(null);
   const validateResult = validate(value);
   const textareaBase = (useUiRecipe("input") ?? inputRecipe)({ kind: "area" });
   const [firstFocus, setFirstFocus] = useState(true);
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
-  const invalidMessage =
-    !value.length || validateResult === true || firstFocus
-      ? null
-      : validateResult === false
-        ? l("base.invalidValueError")
-        : validateResult;
-  const statusClass =
-    status === "error"
-      ? "border-destructive"
-      : !firstFocus && status === "warning"
-        ? "border-warning"
-        : status === "success"
-          ? "border-success"
-          : "";
+  const invalidMessage = invalidMessageOf(!value.length || firstFocus, validateResult, l);
+  const statusClass = statusClassOf(status, firstFocus);
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
   };
@@ -204,9 +198,7 @@ const DefaultTextArea = ({
           inputClassName,
         )}
       />
-      {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
-      ) : null}
+      <InvalidMessage message={invalidMessage} />
     </div>
   );
 };
@@ -246,20 +238,8 @@ const DefaultPassword = ({
   const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
-  const invalidMessage =
-    !value.length || validateResult === true || firstFocus
-      ? ""
-      : validateResult === false
-        ? l("base.invalidValueError")
-        : validateResult;
-  const statusClass =
-    status === "error"
-      ? "border-destructive"
-      : !firstFocus && status === "warning"
-        ? "border-warning"
-        : status === "success"
-          ? "border-success"
-          : "";
+  const invalidMessage = invalidMessageOf(!value.length || firstFocus, validateResult, l) ?? "";
+  const statusClass = statusClassOf(status, firstFocus);
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
     if (onPressEscape && e.key === "Escape") onPressEscape(e);
@@ -268,11 +248,7 @@ const DefaultPassword = ({
   return (
     <div className={cn("relative isolate pb-2", className)}>
       <div className={cn("relative flex items-center justify-between", inputWrapperClassName)}>
-        {icon ? (
-          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
-            {icon}
-          </div>
-        ) : null}
+        <LeadingIcon icon={icon} className={iconClassName} />
         <input
           {...rest}
           {...agentAttrs(onChange)}
@@ -351,44 +327,21 @@ const DefaultEmail = ({
   const validateResult = !isValidEmail ? l("base.emailInvalidError") : validate(value);
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : !isValidEmail ? "error" : validateResult === true ? "success" : "error";
-  const invalidMessage =
-    !value.length || validateResult === true || firstFocus
-      ? null
-      : validateResult === false
-        ? l("base.invalidValueError")
-        : validateResult;
-  const statusClass =
-    status === "error"
-      ? "border-destructive"
-      : !firstFocus && status === "warning"
-        ? "border-warning"
-        : status === "success"
-          ? "border-success"
-          : "";
+  const invalidMessage = invalidMessageOf(!value.length || firstFocus, validateResult, l);
+  const statusClass = statusClassOf(status, firstFocus);
   const inputType = cn(inputBase, inputStyleType === "underline" ? "rounded-none" : "");
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
-    if (e.key === "Escape") {
-      e.currentTarget.blur();
-      onPressEscape?.(e);
-    }
-  };
 
   return (
     <div className={cn("relative isolate mb-5", className)}>
       <div className={cn("flex items-center", inputWrapperClassName)}>
-        {icon ? (
-          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
-            {icon}
-          </div>
-        ) : null}
+        <LeadingIcon icon={icon} className={iconClassName} />
         <input
           {...rest}
           {...agentAttrs(onChange)}
           type="email"
           value={value}
           ref={inputRef}
-          onKeyDown={handleKeyDown}
+          onKeyDown={blurOnEscape(onPressEnter, onPressEscape)}
           onBlur={(e) => {
             if (firstFocus && value) setFirstFocus(false);
           }}
@@ -404,9 +357,7 @@ const DefaultEmail = ({
           )}
         />
       </div>
-      {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
-      ) : null}
+      <InvalidMessage message={invalidMessage} />
     </div>
   );
 };
@@ -464,69 +415,39 @@ const DefaultNumber = ({
       : !nullable && value === null
         ? "warning"
         : "";
-  const invalidMessage =
-    value === null || validateResult === true
-      ? null
-      : validateResult === false
-        ? l("base.invalidValueError")
-        : validateResult;
-  const statusClass =
-    validate !== undefined
-      ? status === "error"
-        ? "border-destructive"
-        : !firstFocus && status === "warning"
-          ? "border-warning"
-          : status === "success"
-            ? "border-success"
-            : ""
-      : "";
+  const invalidMessage = invalidMessageOf(value === null, validateResult, l);
+  const statusClass = validate !== undefined ? statusClassOf(status, firstFocus) : "";
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== "Enter" && e.key !== "Escape") return;
     const numberValue = parseFloat(e.currentTarget.value.replace(/[^\d-]/g, ""));
-    if (e.key === "Enter") {
-      if (Number.isNaN(numberValue)) {
-        e.currentTarget.value = "";
-        setFormatValue("");
-        onChange(null);
-        return;
-      }
-      if (rest.max !== undefined && numberValue > parseFloat(rest.max as string)) {
-        const maxValue = formatter ? formatter(String(rest.max)) : String(rest.max);
-        e.currentTarget.value = maxValue;
-        setFormatValue(maxValue);
-        onPressEnter?.(parseFloat(maxValue), e);
-        return;
-      } else if (rest.min !== undefined && numberValue < parseFloat(rest.min as string)) {
-        const minValue = formatter ? formatter(String(rest.min)) : String(rest.min);
-        e.currentTarget.value = minValue;
-        setFormatValue(minValue);
-        onPressEnter?.(parseFloat(minValue), e);
-        return;
-      }
-      setFormatValue(formatter ? formatter(String(numberValue)) : String(numberValue));
-      onPressEnter?.(numberValue, e);
+    if (Number.isNaN(numberValue)) {
+      e.currentTarget.value = "";
+      setFormatValue("");
+      onChange(null);
+      return;
     }
+    const bound =
+      rest.max !== undefined && numberValue > parseFloat(rest.max as string)
+        ? rest.max
+        : rest.min !== undefined && numberValue < parseFloat(rest.min as string)
+          ? rest.min
+          : undefined;
+    const boundValue = bound === undefined ? undefined : formatter ? formatter(String(bound)) : String(bound);
     if (e.key === "Escape") {
-      if (Number.isNaN(numberValue)) {
-        e.currentTarget.value = "";
-        setFormatValue("");
-        onChange(null);
-        return;
-      }
-      if (rest.max !== undefined && numberValue > parseFloat(rest.max as string)) {
-        e.currentTarget.value = formatter ? formatter(String(rest.max)) : String(rest.max);
-      } else if (rest.min !== undefined && numberValue < parseFloat(rest.min as string)) {
-        e.currentTarget.value = formatter ? formatter(String(rest.min)) : String(rest.min);
-      }
+      if (boundValue !== undefined) e.currentTarget.value = boundValue;
       e.currentTarget.blur();
       onPressEscape?.(e);
+    } else if (boundValue !== undefined) {
+      e.currentTarget.value = boundValue;
+      setFormatValue(boundValue);
+      onPressEnter?.(parseFloat(boundValue), e);
+    } else {
+      setFormatValue(formatter ? formatter(String(numberValue)) : String(numberValue));
+      onPressEnter?.(numberValue, e);
     }
   };
 
-  useEffect(() => {
-    setFormatValue(generateFormat());
-  }, []);
-
   useEffect(() => {
     setFormatValue(generateFormat());
   }, [value]);
@@ -534,11 +455,7 @@ const DefaultNumber = ({
   return (
     <div className={cn("relative isolate", className)}>
       <div className={cn("flex items-center", inputWrapperClassName)}>
-        {icon ? (
-          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
-            {icon}
-          </div>
-        ) : null}
+        <LeadingIcon icon={icon} className={iconClassName} />
         <input
           {...rest}
           {...agentAttrs(onChange)}
@@ -546,11 +463,9 @@ const DefaultNumber = ({
           value={formatValue}
           onKeyDown={handleKeyDown}
           onBlur={(e) => {
-
             if (firstFocus && value) setFirstFocus(false);
           }}
           onChange={(e) => {
-            
             const parsedValue = parser ? parser(e.target.value) : e.target.value;
             setFormatValue(formatter ? formatter(parsedValue) : e.target.value);
             onChange(parser ? parseFloat(parsedValue) : parseFloat(e.target.value), e);
@@ -565,9 +480,7 @@ const DefaultNumber = ({
         />
       </div>
 
-      {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
-      ) : null}
+      <InvalidMessage message={invalidMessage} />
     </div>
   );
 };
@@ -586,7 +499,7 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
       {...agentAttrs(onChange)}
       type="checkbox"
       checked={checked}
-
+      
       className={cn("size-5 accent-primary", className)}
       onChange={(e) => {
         onChange(e.target.checked, e);
@@ -596,11 +509,6 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
 };
 const InputBase = createOverridable("Input", DefaultInput);
 
-/**
- * Text input plus its field variants. Each leaf resolves to a route-scoped override when a
- * `page/**\/_overrides.tsx` in the route's ancestry declares one (slots `Input`, `InputTextArea`,
- * `InputPassword`, `InputEmail`, `InputNumber`, `InputCheckbox`), otherwise renders the default.
- */
 export const Input = Object.assign(InputBase, {
   TextArea: createOverridable("InputTextArea", DefaultTextArea),
   Password: createOverridable("InputPassword", DefaultPassword),

package/ui/Layout/Role.tsx

@@ -0,0 +1,42 @@
+import { cn } from "akanjs/client";
+import type { ReactNode } from "react";
+
+import { Link } from "../Link";
+
+export interface TemplateProps {
+  className?: string;
+  children?: ReactNode;
+}
+export const Template = ({ className, children }: TemplateProps) => {
+  return <div className={cn("flex w-full flex-col gap-6 p-2", className)}>{children}</div>;
+};
+
+export interface UnitProps {
+  className?: string;
+  children: ReactNode;
+  /** Makes the whole unit a link. */
+  href?: string;
+}
+export const Unit = ({ className, children, href }: UnitProps) => {
+  return (
+    <Link href={href}>
+      <div className={cn("flex w-full flex-col gap-2 p-4", !!href && "cursor-pointer", className)}>{children}</div>
+    </Link>
+  );
+};
+
+export interface ViewProps {
+  className?: string;
+  children: ReactNode;
+}
+export const View = ({ className, children }: ViewProps) => {
+  return <div className={cn("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+};
+
+export interface ZoneProps {
+  className?: string;
+  children: ReactNode;
+}
+export const Zone = ({ className, children }: ZoneProps) => {
+  return <div className={cn("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+};

package/ui/Layout/Sider.tsx

@@ -3,7 +3,7 @@ import { cn } from "akanjs/client";
 import { st } from "akanjs/store";
 import { animated } from "akanjs/ui";
 import { type ReactNode, useEffect, useState } from "react";
-import { AiOutlineMenu } from "react-icons/ai";
+import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import { BiX } from "react-icons/bi";
 import { useSpring } from "react-spring";
 import { agentAttrs } from "../agentAttrs";
@@ -98,3 +98,84 @@ export const Sider = ({ className, bgClassName, trigger, header, close, children
     </>
   );
 };
+
+export interface LeftSiderProps {
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  width?: number | string;
+  /** Element that closes the drawer. `false` draws none. */
+  close?: ReactNode | false;
+  onCancel: () => void;
+}
+export const LeftSider = ({ className, children, open, width, close, onCancel }: LeftSiderProps) => {
+  return (
+    <div
+      className={cn(
+        "absolute top-0 border-muted border-r bg-background transition-all duration-150",
+        open ? "translate-x-0" : "translate-x-[-100%]",
+        className,
+      )}
+      style={{ width }}
+    >
+      {children}
+      {close === false ? null : (
+        <div
+          className="absolute top-0 right-0"
+          onClick={() => {
+            onCancel();
+          }}
+        >
+          {close ?? (
+            <button className={buttonRecipe({ variant: "ghost", size: "icon" })}>
+              <BiX />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface RightSiderProps {
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  title?: ReactNode;
+  width?: number | string;
+  /** The mark inside the drawer's close control. `false` draws no control. */
+  close?: ReactNode | false;
+  onCancel: () => void;
+}
+export const RightSider = ({ className, children, open, title, width, close, onCancel }: RightSiderProps) => {
+  return (
+    <div
+      className={cn(
+        "group absolute top-0 right-0 overflow-y-auto border-muted border-l bg-background pt-14 transition-all duration-150",
+        open && "translate-x-0",
+        !open && "translate-x-[100%]",
+        className,
+      )}
+      style={{ width }}
+    >
+      {children}
+      <div className="absolute top-2 left-4 flex items-center gap-4 pt-2 text-xl">
+        {close === false ? null : (
+          <div
+            className={cn(
+              "cursor-pointer border-muted bg-background transition-all duration-150",
+              open && "opacity-100",
+              !open && "opacity-0",
+            )}
+            onClick={() => {
+              onCancel();
+            }}
+          >
+            {close ?? <AiOutlineClose />}
+          </div>
+        )}
+        {title ? <div className="whitespace-nowrap">{title}</div> : null}
+      </div>
+    </div>
+  );
+};

package/ui/Layout/TopInset.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { getEnv } from "akanjs/base";
 import { cn, DEFAULT_TOP_INSET, debugFrame, usePathCtx } from "akanjs/client";
-import { type ReactNode, useLayoutEffect } from "react";
+import { type ReactNode, useEffect, useLayoutEffect, useState } from "react";
 
 import { Portal } from "../Portal";
 
@@ -40,3 +40,25 @@ export const TopInset = ({ className, children, estimatedHeight = DEFAULT_TOP_IN
     </Portal>
   );
 };
+
+export interface TopLeftActionProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export const TopLeftAction = ({ className, children }: TopLeftActionProps) => {
+  const [render, setRender] = useState(false);
+  const path = usePathCtx().location?.pathRoute?.path;
+  const suffix = getEnv().renderMode === "csr" && path ? `-${path}` : "";
+  useEffect(() => {
+    setRender(true);
+  }, []);
+
+  if (!render) return null;
+
+  return (
+    <Portal id={`topLeftActionContent${suffix}`}>
+      <div className={className}>{children}</div>
+    </Portal>
+  );
+};

package/ui/Layout/index.ts

@@ -1,16 +1,10 @@
 import { BottomInset } from "./BottomInset";
 import { BottomTab } from "./BottomTab";
 import { Header } from "./Header";
-import { LeftSider } from "./LeftSider";
 import { Navbar } from "./Navbar";
-import { RightSider } from "./RightSider";
-import { Sider } from "./Sider";
-import { Template } from "./Template";
-import { TopInset } from "./TopInset";
-import { TopLeftAction } from "./TopLeftAction";
-import { Unit } from "./Unit";
-import { View } from "./View";
-import { Zone } from "./Zone";
+import { Template, Unit, View, Zone } from "./Role";
+import { LeftSider, RightSider, Sider } from "./Sider";
+import { TopInset, TopLeftAction } from "./TopInset";
 
 export const Layout = {
   Header,

package/ui/LegacyModal.tsx

@@ -4,28 +4,17 @@ import type { ReactNode } from "react";
 import { Dialog } from "./Dialog";
 
 export interface LegacyModalProps {
-  /** Additional classes for the modal surface. */
   className?: string;
-  /** Optional modal title. */
   title?: string | ReactNode;
-  /** Optional action area, usually footer buttons. */
   action?: ReactNode;
-  /** Controlled open state. */
   open: boolean;
-  /** Called when the modal requests closing. */
   onCancel: () => void;
-  /** Additional classes for the content body. */
   bodyClassName?: string;
   children?: ReactNode;
-  /** Ask for close confirmation before dismissing. */
   confirmClose?: boolean;
 }
 
-/**
- * Previous akanjs modal skin: spring open/close and a drag-to-dismiss sheet on touch. Kept for screens
- * built around that motion. New work uses {@link Modal}, which takes the same props with no animation,
- * and unlike this one resolves through the `Modal` override slot.
- */
+/** Spring-animated, drag-to-dismiss skin. Unlike `Modal`, it does not resolve through the `Modal` override slot. */
 export const LegacyModal = ({
   className,
   title,

package/ui/Link/Action.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { cn, router } from "akanjs/client";
+import type { ReactNode } from "react";
+
+export interface ActionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Back = ({ className, children }: ActionProps) => (
+  <div className={cn("cursor-pointer", className)} onClick={() => router.back()}>
+    {children}
+  </div>
+);
+
+export const Close = ({ className, children }: ActionProps) => (
+  <div className={cn("cursor-pointer", className)} onClick={() => window.close()}>
+    {children}
+  </div>
+);
+
+export interface LangProps extends ActionProps {
+  lang: "ko" | "en" | (string & {});
+}
+export const Lang = ({ className, lang, children }: LangProps) => (
+  <div className={cn("cursor-pointer", className)} onClick={() => router.setLang(lang)}>
+    {children}
+  </div>
+);