armtek-uikit-react 1.0.266 → 1.0.268

package/lib/esm/ui/Logo/Logo.js

@@ -0,0 +1,46 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const Logo = (props) => {
+  let {
+    description,
+    children,
+    black,
+    shape,
+    className,
+    href,
+    src,
+    linkProps,
+    inverse,
+    width,
+    height,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ...restProps, "data-testid": "logo", className: clsx("arm-logo", {
+    "arm-logo_inverse": inverse,
+    "arm-logo_shape": shape
+  }, className), children: /* @__PURE__ */ jsxs("div", { className: "logo__inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "arm-logo__img", children: href ? /* @__PURE__ */ jsx("a", { href, ...linkProps, children: src ? /* @__PURE__ */ jsx("img", { src, alt: "" }) : children || /* @__PURE__ */ jsx(LogoArmtek, { black, inverse, width, height }) }) : /* @__PURE__ */ jsx("span", { children: src ? /* @__PURE__ */ jsx("img", { src, alt: "" }) : children || /* @__PURE__ */ jsx(LogoArmtek, { black, inverse, width, height }) }) }),
+    description && /* @__PURE__ */ jsx("div", { className: "arm-logo__description", children: description })
+  ] }) }) });
+};
+const LogoArmtek = ({
+  black,
+  inverse,
+  width,
+  height
+}) => {
+  let part1Color = "#FF7F00";
+  let part2Color = inverse ? "#FFFFFF" : "#212529";
+  if (black) part1Color = part2Color;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "124", height: "15", viewBox: "0 0 124 15", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.56897 0L0 15H6.30094L7.2884 13.2837H13.4718L13.7304 15H20.0313L16.8574 0H9.56897ZM9.38088 9.61599L12.2257 4.53762H12.2727L12.9545 9.61599H9.38088Z", fill: part1Color }),
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41.1677 4.18495C41.5204 2.53918 40.9091 1.10502 39.8981 0.540752C39.1693 0.141066 38.1583 0 36.4655 0H23.9812L20.8072 15H26.732L27.7194 10.3683H31.9279C33.0094 10.3683 33.2445 11.0502 33.0799 12.1552C33.0343 12.4623 32.9923 12.7357 32.9548 12.9802C32.7797 14.1202 32.701 14.6322 32.7978 15H39.2633C38.9577 14.4592 38.8166 13.848 38.9107 13.2367L39.3574 9.96865C39.522 8.67555 38.9812 7.89969 38.1583 7.66458V7.61756C39.9687 7.10031 40.8621 5.59561 41.1677 4.18495ZM34.6552 5.19592C34.4436 6.13636 33.8793 6.60658 32.7273 6.60658H28.5188L29.1066 3.78527H33.221C34.2085 3.78527 34.8903 4.04389 34.6552 5.19592Z", fill: part1Color }),
+    /* @__PURE__ */ jsx("path", { d: "M53.2053 8.72257L57.5078 0H65.8307L62.6567 15H57.2727L59.5533 4.279H59.5062L54.0752 15H49.5846L48.7147 4.279H48.6677L46.3871 15H41.0031L44.2006 0H52.547L53.1348 8.72257H53.2053Z", fill: part1Color }),
+    /* @__PURE__ */ jsx("path", { d: "M84.5345 0H67.6301L66.8307 3.78527H72.3088L69.9342 15H75.8589L78.2571 3.78527H83.7351L84.5345 0Z", fill: part2Color }),
+    /* @__PURE__ */ jsx("path", { d: "M99.1348 9.33386L99.9107 5.68966H90.6003L91.0235 3.66771H101.039L101.839 0H85.8981L82.7006 15H98.6411L99.4169 11.3558H89.4013L89.8245 9.33386H99.1348Z", fill: part2Color }),
+    /* @__PURE__ */ jsx("path", { d: "M115.216 0H123.069L115.146 5.80721L120.459 15H112.583L109.715 9.23981L107.387 10.9561L106.517 15H100.592L103.79 0H109.715L108.586 5.28997L115.216 0Z", fill: part2Color })
+  ] }) });
+};
+export {
+  Logo as default
+};

package/lib/esm/ui/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Logo';
+export { type LogoProps } from './Logo';

package/lib/esm/ui/Logo/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Logo.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Logo.d.ts

@@ -0,0 +1,2 @@
+export * from './Logo/index'
+export { default } from './Logo/index'

package/lib/esm/ui/Logo.js

@@ -0,0 +1,2 @@
+export * from './Logo/index.js'
+export { default } from './Logo/index.js'

package/lib/esm/ui/Modal/BaseModal.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { FormControlsProps } from '../../ui/Form/FormControls';
+export type ModalClasses = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    close: string;
+    body: string;
+    footer: string;
+    formControls: string;
+}>;
+export type BaseModalProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & Partial<Omit<FormControlsProps, 'title'>> & {
+    onClose?: (e?: MouseEvent<any> | KeyboardEvent) => void;
+    classes?: ModalClasses;
+    title?: ReactNode;
+};
+export declare const BaseModal: (props: BaseModalProps) => import("react/jsx-runtime").JSX.Element;

package/lib/esm/ui/Modal/BaseModal.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import clsx from "clsx";
+import FormControls from "../Form/FormControls/FormControls.js";
+import ButtonIcon from "../ButtonIcon/ButtonIcon.js";
+import { MODAL_BODY_CLASSNAME, MODAL_FOOTER_CLASSNAME } from "./const.js";
+const BaseModal = (props) => {
+  const {
+    className,
+    title,
+    children,
+    onSubmit,
+    onClose,
+    onCancel,
+    submitProps,
+    cancelProps,
+    classes,
+    ...divProps
+  } = props;
+  const showControls = !!onSubmit || !!onCancel;
+  const titleId = useId();
+  const hasTitle = !!title;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { "data-testid": "base-modal", ...divProps, role: "dialog", "aria-modal": true, "aria-labelledby": hasTitle ? titleId : void 0, tabIndex: -1, className: clsx(className, "arm-modal", classes == null ? void 0 : classes.root), children: /* @__PURE__ */ jsxs("div", { className: "arm-modal__inner", children: [
+    title && /* @__PURE__ */ jsx("div", { "data-testid": "base-modal-header", className: clsx("arm-modal__header", classes == null ? void 0 : classes.header), children: /* @__PURE__ */ jsxs("div", { id: titleId, "data-testid": "base-modal-title", className: clsx("arm-modal__title", classes == null ? void 0 : classes.title), children: [
+      title,
+      onClose && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "base-modal-close", variant: "transparent", onClick: onClose, className: clsx("arm-modal__close", classes == null ? void 0 : classes.close), color: "neutral", size: "medium", children: /* @__PURE__ */ jsx("span", { className: "material_icon", children: "close" }) })
+    ] }) }),
+    !title && onClose && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "base-modal-close", variant: "transparent", onClick: onClose, className: clsx("arm-modal__close", "arm-modal__close_noHeader", classes == null ? void 0 : classes.close), color: "neutral", size: "medium", children: /* @__PURE__ */ jsx("span", { className: "material_icon", children: "close" }) }),
+    /* @__PURE__ */ jsx("div", { "data-testid": "base-modal-body", className: clsx(MODAL_BODY_CLASSNAME, classes == null ? void 0 : classes.body), children: /* @__PURE__ */ jsx("div", { children }) }),
+    showControls && /* @__PURE__ */ jsx("div", { "data-testid": "base-modal-footer", className: clsx(MODAL_FOOTER_CLASSNAME, classes == null ? void 0 : classes.footer), children: /* @__PURE__ */ jsx(FormControls, { "data-testid": "base-modal-controls", className: clsx(classes == null ? void 0 : classes.formControls, "arm-modal__controls"), onSubmit, onCancel, submitProps, cancelProps }) })
+  ] }) }) });
+};
+export {
+  BaseModal
+};

package/lib/esm/ui/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import { BaseModalProps } from './BaseModal';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export type ModalProps = BaseModalProps & {
+    open?: boolean;
+    width?: number | 'auto';
+    transitionProps?: Partial<CSSTransitionProps<HTMLElement>>;
+};
+declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/lib/esm/ui/Modal/Modal.js

@@ -0,0 +1,87 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { BaseModal } from "./BaseModal.js";
+import BackDrop from "../BackDrop/BackDrop.js";
+import { CSSTransition } from "react-transition-group";
+import { FORM_CONTROLS_CLASSNAME, FORM_CONTROLS_SKIP_REPLACE_CLASSNAME } from "../Form/FormControls/const.js";
+import { MODAL_BODY_CLASSNAME, MODAL_FOOTER_CLASSNAME } from "./const.js";
+import useEventCallback from "../../lib/hooks/useEventCallback.js";
+const BACKDROP_CLASSNAME = "arm-modal__backdrop";
+function isTopmostModal(backdropContainer) {
+  let nextElement = backdropContainer.nextElementSibling;
+  while (nextElement) {
+    if (nextElement.classList.contains(BACKDROP_CLASSNAME)) {
+      return false;
+    }
+    nextElement = nextElement.nextElementSibling;
+  }
+  return true;
+}
+function replaceControlsIfExists(container, props) {
+  var _a, _b;
+  if (!container) return;
+  const body = container.querySelector(`.${MODAL_BODY_CLASSNAME}`);
+  if (!body) return;
+  const controls = body.querySelectorAll(`.${FORM_CONTROLS_CLASSNAME}`);
+  if (controls.length !== 1) return;
+  if (controls[0].querySelector(`.${FORM_CONTROLS_SKIP_REPLACE_CLASSNAME}`)) return;
+  const footer = document.createElement("div");
+  footer.classList.add(MODAL_FOOTER_CLASSNAME);
+  if ((_a = props.classes) == null ? void 0 : _a.footer) footer.classList.add((_b = props.classes) == null ? void 0 : _b.footer);
+  controls[0].remove();
+  footer.appendChild(controls[0]);
+  body.after(footer);
+}
+const Modal = (props) => {
+  const {
+    open,
+    width = 500,
+    transitionProps,
+    ...modalProps
+  } = props;
+  const nodeRef = useRef(null);
+  const handleClose = useEventCallback((event) => {
+    var _a;
+    (_a = modalProps.onClose) == null ? void 0 : _a.call(modalProps, event);
+  });
+  const focusModal = useEventCallback(() => {
+    var _a;
+    const modalElement = (_a = nodeRef.current) == null ? void 0 : _a.querySelector('[data-testid="base-modal"]');
+    modalElement == null ? void 0 : modalElement.focus();
+  });
+  useEffect(() => {
+    function subscribeToEsc(e) {
+      if (e.key !== "Escape" || !nodeRef.current) return;
+      if (!isTopmostModal(nodeRef.current)) return;
+      handleClose(e);
+    }
+    document.addEventListener("keyup", subscribeToEsc);
+    return () => {
+      document.removeEventListener("keyup", subscribeToEsc);
+    };
+  }, [handleClose]);
+  useEffect(() => {
+    replaceControlsIfExists(nodeRef.current, modalProps);
+  }, []);
+  const handleEntered = (isAppearing) => {
+    var _a;
+    replaceControlsIfExists(nodeRef.current, modalProps);
+    (_a = transitionProps == null ? void 0 : transitionProps.onEntering) == null ? void 0 : _a.call(transitionProps, isAppearing);
+  };
+  const handleEnteredDone = (isAppearing) => {
+    var _a;
+    focusModal();
+    (_a = transitionProps == null ? void 0 : transitionProps.onEntered) == null ? void 0 : _a.call(transitionProps, isAppearing);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(CSSTransition, { classNames: {
+    "enter": "arm-modal__ContentWrapperEnter",
+    "enterActive": "arm-modal__ContentWrapperEnterActive",
+    "exit": "arm-modal__ContentWrapperExit",
+    "exitActive": "arm-modal__ContentWrapperExitActive",
+    exitDone: "arm-modal__ContentWrapperExitDone",
+    enterDone: "arm-modal__ContentWrapperEnterDone"
+  }, in: !!open, timeout: 500, nodeRef, mountOnEnter: true, unmountOnExit: true, ...transitionProps, onEntering: handleEntered, onEntered: handleEnteredDone, children: /* @__PURE__ */ jsx(BackDrop, { width, ref: nodeRef, onClick: modalProps.onClose, className: BACKDROP_CLASSNAME, children: /* @__PURE__ */ jsx(BaseModal, { ...modalProps }) }) }) });
+};
+export {
+  Modal as default
+};

package/lib/esm/ui/Modal/const.d.ts

@@ -0,0 +1,2 @@
+export declare const MODAL_BODY_CLASSNAME = "arm-modal__body";
+export declare const MODAL_FOOTER_CLASSNAME = "arm-modal__footer";

package/lib/esm/ui/Modal/const.js

@@ -0,0 +1,6 @@
+const MODAL_BODY_CLASSNAME = "arm-modal__body";
+const MODAL_FOOTER_CLASSNAME = "arm-modal__footer";
+export {
+  MODAL_BODY_CLASSNAME,
+  MODAL_FOOTER_CLASSNAME
+};

package/lib/esm/ui/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export { type ModalProps } from './Modal';

package/lib/esm/ui/Modal/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Modal.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Modal.d.ts

@@ -0,0 +1 @@
+export * from './Modal/index'

package/lib/esm/ui/Modal.js

@@ -0,0 +1 @@
+export * from './Modal/index.js'

package/lib/esm/ui/Pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import { StackProps } from '../../ui/Stack';
+type OwnProps = {
+    page: number;
+    total: number;
+    pageSize: number;
+    onChange: (page: number) => void;
+};
+export type PaginationProps = OwnProps & Omit<Partial<PaginationPerPageProps>, keyof OwnProps> & Omit<StackProps, keyof OwnProps>;
+export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
+type PaginationPerPageProps = {
+    pageSizes: number[];
+    pageSizeLabel?: string;
+    onPageSizeSelect: (value: number) => void;
+};
+export default Pagination;

package/lib/esm/ui/Pagination/Pagination.js

@@ -0,0 +1,80 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import Stack from "../Stack/Stack.js";
+import ButtonIcon from "../ButtonIcon/ButtonIcon.js";
+import { useState, useRef } from "react";
+import "../Icon/Icon.js";
+import { Mi } from "../Icon/Mi.js";
+import Button from "../Button/Button.js";
+import { Popover } from "../Popover/Popover.js";
+import ListItem from "../List/ListItem.js";
+const MAX_DISPLAY = 5;
+const Pagination = (props) => {
+  const {
+    pageSize,
+    pageSizes,
+    pageSizeLabel,
+    total,
+    page,
+    onPageSizeSelect,
+    onChange,
+    ...stackProps
+  } = props;
+  let displayFirst = page > 1;
+  let displayLast = page < total && page !== total;
+  let displayFirstDots = page >= MAX_DISPLAY && total > MAX_DISPLAY;
+  let displayLastDots = page < total - 2 && page <= total - MAX_DISPLAY;
+  let pageArr = [];
+  pageArr = [...Array(total)].map((_, item) => item + 1).filter((item) => {
+    if (displayFirst && displayLast) return item > 1 && item < total;
+    else if (displayFirst) return item > 1;
+    else if (displayLast) return item < total;
+    return true;
+  });
+  if (page >= MAX_DISPLAY && total > MAX_DISPLAY && page <= total - MAX_DISPLAY) pageArr = pageArr.slice(page - (MAX_DISPLAY - 2), page);
+  else if (page < MAX_DISPLAY && pageArr.length > MAX_DISPLAY) pageArr = pageArr.slice(0, displayFirst ? MAX_DISPLAY - 1 : MAX_DISPLAY);
+  else if (page > total - MAX_DISPLAY && pageArr.length > MAX_DISPLAY) pageArr = pageArr.slice(displayLast ? -4 : -MAX_DISPLAY);
+  const handleClick = (selectedPage) => () => {
+    if (selectedPage !== page) onChange(selectedPage);
+  };
+  if (total <= 1) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Stack, { spacing: "small", "data-testid": "pagination", children: [
+    pageSizes && onPageSizeSelect && /* @__PURE__ */ jsx(PaginationPerPage, { ...props, pageSizes, onPageSizeSelect }),
+    /* @__PURE__ */ jsxs(Stack, { center: true, ...stackProps, children: [
+      page > 1 && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-prev", onClick: handleClick(page - 1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsx(Mi, { icon: "chevron_left" }) }),
+      displayFirst && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-first", onClick: handleClick(1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsx("div", { className: "arm-pagination__item", children: "1" }) }),
+      displayFirstDots && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-dots-prev", size: "small", disabled: true, children: "..." }),
+      pageArr.map((item) => {
+        return /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": page === item ? "pagination-current" : "pagination-page", onClick: handleClick(item), size: "small", className: page === item ? "bg-gray-100" : "", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsx("div", { className: "arm-pagination__item", children: item }) }, item);
+      }),
+      displayLastDots && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-dots-next", size: "small", disabled: true, children: "..." }),
+      displayLast && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-last", onClick: handleClick(total), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsx("div", { className: "arm-pagination__item", children: total }) }),
+      page !== total && /* @__PURE__ */ jsx(ButtonIcon, { "data-testid": "pagination-next", onClick: handleClick(page + 1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsx(Mi, { icon: "chevron_right" }) })
+    ] })
+  ] }) });
+};
+const PaginationPerPage = (props) => {
+  const {
+    pageSize,
+    pageSizes,
+    pageSizeLabel,
+    onPageSizeSelect
+  } = props;
+  const [visible, setVisible] = useState(false);
+  const btnRef = useRef(null);
+  const handleClose = () => setVisible(false);
+  const handleClick = (item) => {
+    onPageSizeSelect(item);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: "small", center: true, className: "flex items-center", "data-testid": "pagination-per-page", children: [
+    pageSizeLabel && /* @__PURE__ */ jsx("div", { "data-testid": "pagination-per-page-label", className: "text-small", children: pageSizeLabel }),
+    /* @__PURE__ */ jsx(Button, { "data-testid": "pagination-per-page-button", variant: "transparent", onClick: () => setVisible(true), ref: btnRef, endAdornment: /* @__PURE__ */ jsx(Mi, { icon: "expand_more" }), size: "small", color: "neutral", children: pageSize }),
+    /* @__PURE__ */ jsx(Popover, { placement: "bottom", open: visible, anchorEl: btnRef.current, onClose: handleClose, classes: {
+      paper: "p-0"
+    }, children: pageSizes.map((item) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleClick(item), active: item === pageSize, children: item }, item)) })
+  ] });
+};
+export {
+  Pagination,
+  Pagination as default
+};

package/lib/esm/ui/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Pagination';
+export { type PaginationProps } from './Pagination';

package/lib/esm/ui/Pagination/index.js

@@ -0,0 +1,4 @@
+import { Pagination } from "./Pagination.js";
+export {
+  Pagination as default
+};

package/lib/esm/ui/Pagination.d.ts

@@ -0,0 +1 @@
+export * from './Pagination/index'

package/lib/esm/ui/Pagination.js

@@ -0,0 +1 @@
+export * from './Pagination/index.js'

package/lib/esm/ui/Paper/Paper.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ThemeType } from '../../types/theme';
+type OwnProps = {
+    variant?: 'elevation' | 'outlined';
+    theme?: ThemeType;
+};
+export type PaperProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
+declare const Paper: (props: PaperProps) => import("react/jsx-runtime").JSX.Element;
+export default Paper;

package/lib/esm/ui/Paper/Paper.js

@@ -0,0 +1,19 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+const Paper = (props) => {
+  let {
+    children,
+    className,
+    theme,
+    variant = "elevation",
+    ...divPops
+  } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: clsx("arm-paper", className, {
+    "arm-paper_elevation": variant === "elevation",
+    "arm-paper_outlined": variant === "outlined",
+    "arm-paper_dark": theme === "dark"
+  }), "data-testid": "paper", ...divPops, children }) });
+};
+export {
+  Paper as default
+};

package/lib/esm/ui/Paper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Paper';
+export { type PaperProps } from './Paper';

package/lib/esm/ui/Paper/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Paper.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Paper.d.ts

@@ -0,0 +1,2 @@
+export * from './Paper/index'
+export { default } from './Paper/index'

package/lib/esm/ui/Paper.js

@@ -0,0 +1,2 @@
+export * from './Paper/index.js'
+export { default } from './Paper/index.js'

package/lib/esm/ui/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { PopperBaseProps } from '../Popper/PopperBase';
+type ClassesType = {
+    paper: string;
+};
+export type PopoverProps = {
+    onClose?: () => void;
+    matchWidth?: boolean;
+    anchorEl?: Element | null;
+    classes?: ClassesType;
+} & Omit<PopperBaseProps, 'anchorEl'>;
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Popover;

package/lib/esm/ui/Popover/Popover.js

@@ -0,0 +1,21 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import BackDrop from "../BackDrop/BackDrop.js";
+import { PopperBase } from "../Popper/PopperBase.js";
+import Paper from "../Paper/Paper.js";
+const Popover = (props) => {
+  const {
+    onClose,
+    matchWidth = false,
+    children,
+    classes,
+    ...popperProps
+  } = props;
+  if (!props.open || !popperProps.anchorEl) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BackDrop, { onClick: onClose, children: /* @__PURE__ */ jsx(PopperBase, { ...popperProps, anchorEl: popperProps.anchorEl, children: /* @__PURE__ */ jsx(Paper, { className: classes == null ? void 0 : classes.paper, style: matchWidth ? {
+    width: popperProps.anchorEl.clientWidth
+  } : void 0, children }) }) }) });
+};
+export {
+  Popover,
+  Popover as default
+};

package/lib/esm/ui/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover';
+export { type PopoverProps } from './Popover';

package/lib/esm/ui/Popover/index.js

@@ -0,0 +1,4 @@
+import { Popover } from "./Popover.js";
+export {
+  Popover as default
+};

package/lib/esm/ui/Popover.d.ts

@@ -0,0 +1 @@
+export * from './Popover/index'

package/lib/esm/ui/Popover.js

@@ -0,0 +1 @@
+export * from './Popover/index.js'

package/lib/esm/ui/Popper/Popper.d.ts

@@ -0,0 +1,4 @@
+import { PopperBaseProps } from './PopperBase';
+export type PopperProps = {} & PopperBaseProps;
+export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Popper;

package/lib/esm/ui/Popper/Popper.js

@@ -0,0 +1,11 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { PopperBase } from "./PopperBase.js";
+const Popper = (props) => {
+  if (!props.open) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(PopperBase, { ...props, children: props.children }), document.body) });
+};
+export {
+  Popper,
+  Popper as default
+};

package/lib/esm/ui/Popper/PopperBase.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type PopperBaseProps = {
+    children: ReactNode;
+    anchorEl: Element;
+    open?: boolean;
+    anchorPosition?: {
+        x: number;
+        y: number;
+    };
+    className?: string;
+    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+};
+export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export default PopperBase;

package/lib/esm/ui/Popper/PopperBase.js

@@ -0,0 +1,48 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { createPopper } from "@popperjs/core";
+import clsx from "clsx";
+const PopperBase = (props) => {
+  const {
+    anchorEl,
+    children,
+    placement,
+    className,
+    anchorPosition,
+    open
+  } = props;
+  const tooltipRef = useRef(null);
+  useEffect(() => {
+    let modifiers = [{
+      name: "offset",
+      options: {
+        offset: [0, 5]
+      }
+    }];
+    if (anchorPosition) {
+      modifiers.push({
+        name: "computeStyles",
+        options: {
+          gpuAcceleration: false,
+          // true by default
+          roundOffsets: () => ({
+            x: anchorPosition.x,
+            y: anchorPosition.y
+          })
+        }
+      });
+    }
+    const popper = createPopper(anchorEl, tooltipRef.current, {
+      placement,
+      modifiers
+    });
+    return () => {
+      popper.destroy();
+    };
+  }, [open, placement]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: tooltipRef, className: clsx(className, "arm-popper"), "data-testid": "popper", children }) });
+};
+export {
+  PopperBase,
+  PopperBase as default
+};

package/lib/esm/ui/Popper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Popper';
+export { PopperBase, type PopperBaseProps } from './PopperBase';

package/lib/esm/ui/Popper/index.js

@@ -0,0 +1,6 @@
+import { Popper } from "./Popper.js";
+import { PopperBase } from "./PopperBase.js";
+export {
+  PopperBase,
+  Popper as default
+};

package/lib/esm/ui/Popper.d.ts

@@ -0,0 +1 @@
+export * from './Popper/index'

package/lib/esm/ui/Popper.js

@@ -0,0 +1 @@
+export * from './Popper/index.js'

package/lib/esm/ui/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from 'react';
+type SkeletonProps = {
+    width?: number | string;
+    height: number | string;
+    circle?: boolean;
+} & ComponentPropsWithoutRef<'div'>;
+declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default Skeleton;

package/lib/esm/ui/Skeleton/Skeleton.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const Skeleton = (props) => {
+  const {
+    width = "100%",
+    height,
+    className,
+    circle,
+    ...divProps
+  } = props;
+  return /* @__PURE__ */ jsx("div", { "data-testid": "skeleton", ...divProps, className: clsx(className, "arm-skeleton", {
+    "arm-skeleton_circle": !!circle
+  }), style: {
+    width: typeof width === "number" ? width + "px" : width,
+    height: typeof height === "number" ? height + "px" : height
+  } });
+};
+export {
+  Skeleton as default
+};

package/lib/esm/ui/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Skeleton';

package/lib/esm/ui/Skeleton/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Skeleton.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Skeleton.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton/index'

package/lib/esm/ui/Skeleton.js

@@ -0,0 +1 @@
+export * from './Skeleton/index.js'

package/lib/esm/ui/Slider/RcSlider.js

@@ -0,0 +1 @@
+

package/lib/esm/ui/Slider/Slider.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
+import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
+export type SliderProps<ValueType = number | number[]> = {
+    size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+    color?: Exclude<ColorType, 'neutral'> | Exclude<ColorStatusType, 'info'>;
+} & Omit<RcSliderProps<ValueType>, 'size'>;
+declare function Slider<ValueType = number | number[]>(props: SliderProps<ValueType>): import("react/jsx-runtime").JSX.Element;
+export default Slider;