@akanjs/ui 0.0.149 → 0.0.151

package/esm/FontFace.js

@@ -0,0 +1,58 @@
+"use client";
+import { useEffect } from "react";
+const fontStyleMap = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  extrabold: 600,
+  semibold: 700,
+  bold: 800,
+  black: 900
+};
+const fontWeightMap = {
+  100: "thin",
+  200: "extralight",
+  300: "light",
+  400: "regular",
+  500: "medium",
+  600: "extrabold",
+  700: "semibold",
+  800: "bold",
+  900: "black"
+};
+const FontFace = ({ font }) => {
+  const getWeight = (style) => {
+    const findWeight = font.paths.find((path) => fontWeightMap[path.weight] === style);
+    if (!findWeight) {
+      const findWeight2 = font.paths.reduce((prev, curr) => {
+        return Math.abs(fontStyleMap[style] - curr.weight) < Math.abs(fontStyleMap[style] - prev.weight) ? curr : prev;
+      }, font.paths[0]);
+      return findWeight2.weight;
+    }
+    return findWeight.weight;
+  };
+  useEffect(() => {
+    const styles = ["thin", "extralight", "light", "regular", "medium", "extrabold", "semibold", "bold", "black"];
+    const fontFace = `:root { --font-${font.name}: ${font.name}} ${styles.map(
+      (style2) => `@font-face {
+      font-family: '${font.name}';
+      src: url('${font.paths.find((path) => getWeight(style2) === path.weight)?.src}');
+      font-weight: ${getWeight(style2)};
+      font-style: ${style2};
+      }`
+    )}`;
+    const fontText = fontFace.replace(/,/g, " ");
+    const style = document.createElement("style");
+    style.appendChild(document.createTextNode(fontText));
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, [font.name, font.paths]);
+  return null;
+};
+export {
+  FontFace
+};

package/esm/Image.js

@@ -0,0 +1,32 @@
+import { baseClientEnv } from "@akanjs/base";
+import { clsx } from "@akanjs/client";
+import NextImage from "next/image";
+import { CsrImage } from "./CsrImage";
+const Image = ({
+  src,
+  file,
+  className,
+  abstractData,
+  alt,
+  ...props
+}) => {
+  const url = src ?? file?.url ?? "/empty.png";
+  const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
+  const blurDataURL = abstractData ?? file?.abstractData;
+  return baseClientEnv.renderMode === "csr" ? /* @__PURE__ */ React.createElement(CsrImage, { src, file, abstractData, className, ...props }) : /* @__PURE__ */ React.createElement(
+    NextImage,
+    {
+      src: url,
+      fill: props.fill ?? (!width && !height),
+      width,
+      height,
+      className: clsx("object-cover", className),
+      alt: alt ?? "image",
+      ...blurDataURL ? { placeholder: "blur", blurDataURL } : {},
+      ...props
+    }
+  );
+};
+export {
+  Image
+};

package/esm/InfiniteScroll.js

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { BiLoaderAlt } from "react-icons/bi";
+const InfiniteScroll = ({
+  itemsPerPage,
+  currentPage,
+  total,
+  onPageSelect,
+  onAddPage,
+  children,
+  reverse
+}) => {
+  const [isFetching, setIsFetching] = useState(false);
+  const target = useRef(null);
+  const page = useRef(currentPage);
+  const totalPages = Math.ceil(total / (itemsPerPage || 1));
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting)
+        void fetchMoreItems();
+    });
+    if (target.current)
+      observer.observe(target.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const fetchMoreItems = async () => {
+    if (isFetching)
+      return;
+    const nextPage = page.current + 1;
+    if (nextPage > totalPages)
+      return;
+    setIsFetching(true);
+    await onAddPage(nextPage);
+    void onAddPage(nextPage);
+    onPageSelect(nextPage);
+    setIsFetching(false);
+    page.current = nextPage;
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, reverse ? /* @__PURE__ */ React.createElement("div", { ref: target, className: "flex w-full items-end justify-center" }, isFetching && /* @__PURE__ */ React.createElement(BiLoaderAlt, { className: "h-10 animate-spin pb-4 text-2xl" })) : null, children, !reverse ? /* @__PURE__ */ React.createElement("div", { ref: target, className: "flex h-32 w-full justify-center pt-4" }, isFetching && /* @__PURE__ */ React.createElement(BiLoaderAlt, { className: "animate-spin text-2xl" })) : null);
+};
+export {
+  InfiniteScroll
+};

package/esm/Input.js

@@ -0,0 +1,415 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { isEmail } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import React, {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
+const Input = ({
+  className,
+  nullable,
+  inputRef,
+  value,
+  cacheKey,
+  inputStyleType = "bordered",
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = usePage();
+  const [firstFocus, setFirstFocus] = useState(true);
+  const validateResult = validate(value);
+  const status = !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
+  const invalidMessage = value && !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = inputStyleType === "bordered" ? status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "" : "";
+  const inputType = inputStyleType === "bordered" ? "input" : inputStyleType === "borderless" ? "input-ghost" : "border-0  border-b rounded-none";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  useEffect(() => {
+    if (!cacheKey)
+      return;
+    sessionStorage.setItem(cacheKey, value);
+  }, [value]);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative isolate flex items-center", className) }, icon ? /* @__PURE__ */ React.createElement("div", { className: clsx("flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      ref: inputRef,
+      value,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onKeyDown: handleKeyDown,
+      className: clsx(
+        `b-5 focus:border-primary text-base-content outline-hidden duration-300 focus:outline-hidden ${icon && ""}`,
+        inputType,
+        // statusClass,
+        inputClassName
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-validate": !!validateResult,
+      className: "text-error absolute -bottom-4 text-xs whitespace-nowrap duration-300"
+    },
+    invalidMessage
+  ));
+};
+const TextArea = ({
+  className,
+  nullable,
+  value,
+  inputClassName,
+  inputWrapperClassName,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = usePage();
+  const inputRef = useRef(null);
+  const validateResult = validate(value);
+  const [firstFocus, setFirstFocus] = useState(true);
+  const status = !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "textarea-error" : !firstFocus && status === "warning" ? "textarea-warning" : status === "success" ? "textarea-success" : "";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+  };
+  useEffect(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative mb-5", className) }, /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      ...rest,
+      ref: inputRef,
+      value,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      onKeyDown: handleKeyDown,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      className: clsx(
+        `textarea textarea-bordered focus:border-primary text-base-content resize-none outline-hidden duration-300 focus:outline-hidden`,
+        statusClass,
+        inputClassName
+      )
+    }
+  ), invalidMessage ? /* @__PURE__ */ React.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.TextArea = TextArea;
+const Password = ({
+  className,
+  nullable,
+  value,
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = usePage();
+  const inputRef = useRef(null);
+  const validateResult = validate(value);
+  const [firstFocus, setFirstFocus] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const status = !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? "" : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (onPressEscape && e.key === "Escape")
+      onPressEscape(e);
+  };
+  useEffect(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative isolate pb-2", className) }, /* @__PURE__ */ React.createElement("div", { className: clsx("relative flex items-center justify-between", inputWrapperClassName) }, icon ? /* @__PURE__ */ React.createElement("div", { className: clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      type: showPassword ? "text" : "password",
+      ref: inputRef,
+      value,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onKeyDown: handleKeyDown,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      className: clsx(
+        `input focus:border-primary text-base-content duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        statusClass,
+        inputClassName
+      )
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => {
+        setShowPassword(!showPassword);
+      }
+    },
+    showPassword ? /* @__PURE__ */ React.createElement(AiOutlineEye, null) : /* @__PURE__ */ React.createElement(AiOutlineEyeInvisible, null)
+  ))), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-validate": !!invalidMessage.length,
+      className: "text-error h-2 text-xs duration-300 data-[validate=false]:opacity-0 data-[validate=true]:opacity-100"
+    },
+    invalidMessage
+  ));
+};
+Input.Password = Password;
+const Email = ({
+  inputStyleType = "bordered",
+  className,
+  nullable,
+  value,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  ...rest
+}) => {
+  const { l } = usePage();
+  const inputRef = useRef(null);
+  const isValidEmail = isEmail(value);
+  const [firstFocus, setFirstFocus] = useState(true);
+  const validateResult = !isValidEmail ? l("util.emailInvalidError") : validate(value);
+  const status = !nullable && !value.length ? "warning" : !isValidEmail ? "error" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "";
+  const inputType = inputStyleType === "bordered" ? "input-bordered" : inputStyleType === "borderless" ? "input" : "input-bordered rounded-none";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  useEffect(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative isolate mb-5", className) }, /* @__PURE__ */ React.createElement("div", { className: clsx("flex items-center", inputWrapperClassName) }, icon ? /* @__PURE__ */ React.createElement("div", { className: clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      type: "email",
+      value,
+      ref: inputRef,
+      onKeyDown: handleKeyDown,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      className: clsx(
+        `input focus:border-primary text-base-content outline-hidden duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        inputType,
+        statusClass,
+        inputClassName
+      )
+    }
+  )), invalidMessage ? /* @__PURE__ */ React.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.Email = Email;
+const Number = ({
+  className,
+  nullable,
+  value,
+  icon,
+  cacheKey,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  numberFormat,
+  onPressEnter,
+  onPressEscape,
+  validate,
+  onChange,
+  formatter,
+  parser,
+  ...rest
+}) => {
+  const { l } = usePage();
+  const inputRef = useRef(null);
+  const validateResult = validate ? validate(value) : void 0;
+  const generateFormat = () => {
+    return isNaN(value ?? 0) ? "" : formatter ? formatter(value?.toString() ?? "") : value?.toString() ?? "";
+  };
+  const [firstFocus, setFirstFocus] = useState(true);
+  const [formatValue, setFormatValue] = useState(generateFormat());
+  const status = validate !== void 0 ? validateResult === true ? "success" : "error" : !nullable && value === null ? "warning" : "";
+  const invalidMessage = value === null || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = validate !== void 0 ? status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "input" : "input";
+  const handleKeyDown = (e) => {
+    const numberValue = parseFloat(e.currentTarget.value.replace(/[^\d-]/g, ""));
+    if (e.key === "Enter") {
+      if (isNaN(numberValue)) {
+        e.currentTarget.value = "";
+        setFormatValue("");
+        onChange(null);
+        return;
+      }
+      if (rest.max !== void 0 && numberValue > parseFloat(rest.max)) {
+        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 !== void 0 && numberValue < parseFloat(rest.min)) {
+        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 (e.key === "Escape") {
+      if (isNaN(numberValue)) {
+        e.currentTarget.value = "";
+        setFormatValue("");
+        onChange(null);
+        return;
+      }
+      if (rest.max !== void 0 && numberValue > parseFloat(rest.max)) {
+        e.currentTarget.value = formatter ? formatter(String(rest.max)) : String(rest.max);
+      } else if (rest.min !== void 0 && numberValue < parseFloat(rest.min)) {
+        e.currentTarget.value = formatter ? formatter(String(rest.min)) : String(rest.min);
+      }
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  useEffect(() => {
+    if (cacheKey) {
+      const value2 = sessionStorage.getItem(cacheKey);
+      if (value2) {
+        setFormatValue(value2);
+        onChange(parser ? parseFloat(value2) : parseFloat(value2));
+      }
+    } else {
+      setFormatValue(generateFormat());
+    }
+  }, []);
+  useEffect(() => {
+    setFormatValue(generateFormat());
+  }, [value]);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative isolate mb-2", className) }, /* @__PURE__ */ React.createElement("div", { className: clsx("flex items-center", inputWrapperClassName) }, icon ? /* @__PURE__ */ React.createElement("div", { className: clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      ref: inputRef,
+      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);
+        if (cacheKey)
+          sessionStorage.setItem(cacheKey, parsedValue);
+      },
+      className: clsx(
+        `input focus:border-primary text-base-content duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        statusClass,
+        inputClassName
+      )
+    }
+  )), invalidMessage ? /* @__PURE__ */ React.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.Number = Number;
+const Checkbox = ({ checked, onChange, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      type: "checkbox",
+      checked,
+      className: clsx("checkbox", className),
+      onChange: (e) => {
+        onChange(e.target.checked, e);
+      }
+    }
+  );
+};
+Input.Checkbox = Checkbox;
+export {
+  Input
+};

package/esm/KeyboardAvoiding.js

@@ -0,0 +1,46 @@
+"use client";
+import { useCsr } from "@akanjs/client";
+import { st } from "@akanjs/store";
+import { useEffect, useRef } from "react";
+import { a, useSpring } from "react-spring";
+const KeyboardAvoiding = ({ children, className }) => {
+  const keyboardHeight = st.use.keyboardHeight();
+  const defaultHeight = useRef(null);
+  const pageState = st.use.pageState();
+  const { pageContentRef } = useCsr();
+  const [{ height }, setSpring] = useSpring(() => ({
+    height: 0,
+    config: { duration: 100 }
+  }));
+  const onChange = async (height2) => {
+    await Promise.all([setSpring.start({ height: height2 })]);
+  };
+  useEffect(() => {
+    const test = async () => {
+      if (!pageContentRef.current)
+        return;
+      const newHeight = keyboardHeight ? keyboardHeight - pageState.bottomSafeArea : 0;
+      await onChange(newHeight);
+      if (Math.floor(pageContentRef.current.scrollTop + pageContentRef.current.clientHeight) === pageContentRef.current.scrollHeight)
+        setTimeout(() => {
+          if (!pageContentRef.current)
+            return;
+          pageContentRef.current.scrollTo({
+            top: pageContentRef.current.scrollHeight,
+            behavior: "smooth"
+          });
+        }, 200);
+    };
+    void test();
+  }, [keyboardHeight]);
+  useEffect(() => {
+    if (pageContentRef.current) {
+      const heightNum = parseInt(pageContentRef.current.style.height.replace("px", ""));
+      defaultHeight.current = heightNum;
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(a.div, { className: "h-auto", style: { marginBottom: height } }, children);
+};
+export {
+  KeyboardAvoiding
+};

package/esm/Layout/BottomAction.js

@@ -0,0 +1,7 @@
+import { Portal } from "../Portal";
+const BottomAction = ({ className, children }) => {
+  return /* @__PURE__ */ React.createElement(Portal, { id: "bottomActionContent" }, /* @__PURE__ */ React.createElement("div", { className }, children));
+};
+export {
+  BottomAction
+};

package/esm/Layout/BottomInset.js

@@ -0,0 +1,34 @@
+"use client";
+import { baseClientEnv } from "@akanjs/base";
+import { clsx, usePathCtx } from "@akanjs/client";
+import { st } from "@akanjs/store";
+import { useEffect, useState } from "react";
+import { Portal } from "../Portal";
+const BottomInset = ({ className, children, keyboardSticky }) => {
+  const [render, setRender] = useState(false);
+  const { location } = usePathCtx();
+  const suffix = baseClientEnv.renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  const keyboardHeight = st.use.keyboardHeight();
+  useEffect(() => {
+    setRender(true);
+  }, []);
+  if (!render)
+    return null;
+  return /* @__PURE__ */ React.createElement(Portal, { id: `bottomInsetContent${suffix}` }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(className, `size-full transition-all ease-out`, {
+        "duration-[285ms]": keyboardHeight,
+        "duration-0": !keyboardHeight,
+        absolute: keyboardSticky && keyboardHeight
+      }),
+      style: {
+        bottom: keyboardSticky && keyboardHeight ? keyboardHeight - location.pathRoute.pageState.bottomSafeArea : 0
+      }
+    },
+    children
+  ));
+};
+export {
+  BottomInset
+};

package/esm/Layout/BottomTab.js

@@ -0,0 +1,37 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { Link } from "../Link";
+import { BottomInset } from "./BottomInset";
+const BottomTab = ({ className, tabs, height = 64 }) => {
+  const { lang } = usePage();
+  const isActiveTab = (tabHref) => {
+    const locationPath = window.location.pathname.startsWith(`/${lang}`) ? window.location.pathname.slice(lang.length + 1) === "" ? "/" : window.location.pathname.slice(lang.length + 1) : window.location.pathname;
+    return tabHref === "/" ? locationPath === tabHref : locationPath.startsWith(tabHref);
+  };
+  return /* @__PURE__ */ React.createElement(BottomInset, { className: "h-full" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        `bg-base-100 border-base-200 flex size-full items-center justify-around rounded-t-xl border border-b-0`,
+        className
+      )
+    },
+    tabs.map((tab) => /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        key: tab.name,
+        href: tab.href,
+        className: `relative flex w-full flex-col items-center justify-end gap-1 ${isActiveTab(tab.href) ? "" : "opacity-60"}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "indicator" }, isActiveTab(tab.href) ? tab.activeIcon ?? tab.icon : tab.icon, tab.notiCount && tab.notiCount > 0 ? (
+        // <div className="absolute top-1 right-2 bg-error  w-5 h-5 rounded-full flex items-center justify-center text-base-100">
+        /* @__PURE__ */ React.createElement("div", { className: "indicator-item text-base-100 bg-secondary flex size-2 items-center justify-center rounded-full text-[10px]" })
+      ) : null),
+      /* @__PURE__ */ React.createElement("span", null, tab.name)
+    ))
+  ));
+};
+export {
+  BottomTab
+};