lecom-ui 4.2.0 → 4.2.2

package/dist/components/Header/ImgBrand.js

@@ -5,7 +5,7 @@ const ImgBrand = ({ src }) => /* @__PURE__ */ jsx(
   "img",
   {
     loading: "lazy",
-    src: src ?? img.src,
+    src: src ?? img ?? img.src,
     alt: "Logo",
     className: "w-auto h-auto max-w-[102px] max-h-[32px]"
   }

package/dist/plugin/plugin.cjs

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-
-const buildPlugin = require('./template').buildPlugin;
-
-module.exports = buildPlugin('~/node_modules/lecom-ui/dist/public');
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+const buildPlugin = require('./template').buildPlugin;
+
+module.exports = buildPlugin('~/node_modules/lecom-ui/dist/public');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",
@@ -101,5 +101,6 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  }
+  },
+  "packageManager": "yarn@3.8.7+sha256.81bf69deb72c6cfebaca4389444e034c914cc1a90ea40e4ac55a5e2a1d7063d2"
 }

package/dist/components/DataTable/DataTable.utils.js

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { clsx } from 'clsx';
-import { ArrowUpDown } from 'lucide-react';
-import { Checkbox } from '../Checkbox/Checkbox.js';
-import { Typography } from '../Typography/Typography.js';
-
-function buildHeaderSelect({
-  table,
-  column,
-  checkedHeader,
-  onCheckedHeaderChange
-}) {
-  return /* @__PURE__ */ React.createElement(
-    Checkbox,
-    {
-      checked: !!checkedHeader?.({ table, column }),
-      onCheckedChange: (value) => onCheckedHeaderChange?.({ table, column, value: !!value })
-    }
-  );
-}
-function buildCellSelect({
-  row,
-  checkedCell,
-  onCheckedCellChange
-}) {
-  return /* @__PURE__ */ React.createElement(
-    Checkbox,
-    {
-      checked: !!checkedCell?.({ row }),
-      onCheckedChange: (value) => onCheckedCellChange?.({ row, value: !!value })
-    }
-  );
-}
-function buildColumns({
-  columns
-}) {
-  const mappedColumns = columns.map((externalColumn) => ({
-    accessorKey: externalColumn.key,
-    header: ({ table, column }) => {
-      if (!!externalColumn.enableSelect) {
-        return buildHeaderSelect({
-          table,
-          column,
-          checkedHeader: externalColumn.checkedHeader,
-          onCheckedHeaderChange: externalColumn.onCheckedHeaderChange
-        });
-      }
-      if (!externalColumn.title) {
-        return null;
-      }
-      const hasSort = !!externalColumn.onSort;
-      const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: clsx(
-            "group flex items-center gap-1",
-            hasSort && "hover:cursor-pointer"
-          ),
-          onClick: () => externalColumn.onSort?.({ table, column })
-        },
-        typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-500", textColor: "text-grey-950" }, externalColumn.title) : title,
-        hasSort && /* @__PURE__ */ React.createElement(
-          ArrowUpDown,
-          {
-            size: 16,
-            className: "text-grey-400 group-hover:text-grey-950"
-          }
-        )
-      );
-    },
-    cell: ({ row }) => {
-      if (!!externalColumn.enableSelect) {
-        return buildCellSelect({
-          row,
-          checkedCell: externalColumn.checkedCell,
-          onCheckedCellChange: externalColumn.onCheckedCellChange
-        });
-      }
-      if (!!externalColumn.render) {
-        if (typeof externalColumn.render === "function") {
-          return externalColumn.render({
-            value: row.getValue(externalColumn.key),
-            row
-          });
-        }
-        return externalColumn.render;
-      }
-      return /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-400", textColor: "text-grey-800" }, row.getValue(externalColumn.key));
-    },
-    meta: {
-      width: externalColumn.width,
-      fixed: externalColumn.fixed,
-      truncate: !!externalColumn.truncate
-    }
-  }));
-  return mappedColumns;
-}
-
-export { buildColumns };

package/dist/components/Pagination/Pagination.js

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../Button/Button.js';
-import { cn } from '../../lib/utils.js';
-import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, MoreHorizontal, ChevronDown } from 'lucide-react';
-import { initializeI18n } from '../../i18n/index.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
-import { Typography } from '../Typography/Typography.js';
-
-initializeI18n();
-const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  "ul",
-  {
-    ref,
-    className: cn("flex flex-row items-center gap-1", className),
-    ...props
-  }
-));
-PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("li", { ref, className: cn("", className), ...props }));
-PaginationItem.displayName = "PaginationItem";
-const PaginationFirst = ({
-  className,
-  disabled,
-  isActive,
-  onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
-);
-PaginationFirst.displayName = "PaginationFirst";
-const PaginationLast = ({
-  className,
-  disabled,
-  isActive,
-  onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
-);
-PaginationLast.displayName = "PaginationLast";
-const PaginationPrevious = ({
-  className,
-  disabled,
-  isActive,
-  onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-const PaginationNext = ({
-  className,
-  disabled,
-  isActive,
-  onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
-);
-PaginationNext.displayName = "PaginationNext";
-const PaginationEllipsis = ({
-  className,
-  disabled,
-  isActive,
-  asChild,
-  onClick
-}) => {
-  if (asChild) {
-    return /* @__PURE__ */ React.createElement("div", { className: "w-8 h-8 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(MoreHorizontal, { size: 20, className: "text-grey-800" }));
-  }
-  return /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      disabled,
-      iconButton: true,
-      variant: "ghost",
-      color: "grey",
-      size: "small",
-      onClick,
-      className: cn(isActive && "bg-white", className)
-    },
-    /* @__PURE__ */ React.createElement(MoreHorizontal, { size: 20 })
-  );
-};
-PaginationEllipsis.displayName = "PaginationEllipsis";
-const PaginationIndex = ({
-  className,
-  disabled,
-  isActive,
-  onClick,
-  children
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  children
-);
-PaginationIndex.displayName = "PaginationIndex";
-const Pagination = ({
-  currentPage,
-  itemsPage,
-  perPage,
-  totalRowsSelected = 0,
-  onChangePerPage
-}) => {
-  const { t } = useTranslation();
-  const perPageOptions = [
-    {
-      value: 50
-    },
-    {
-      value: 100
-    },
-    {
-      value: 200
-    },
-    {
-      value: 300
-    }
-  ];
-  const mapPaginationItem = (item) => {
-    const componentProps = {
-      onClick: item.onClick,
-      disabled: item.disabled
-    };
-    if (item.type === "page") {
-      return /* @__PURE__ */ React.createElement(
-        PaginationIndex,
-        {
-          isActive: item.page === currentPage,
-          ...componentProps
-        },
-        item.page
-      );
-    }
-    if (item.type.includes("ellipsis")) {
-      return /* @__PURE__ */ React.createElement(PaginationEllipsis, { asChild: true });
-    }
-    const mappedComponents = {
-      first: PaginationFirst,
-      previous: PaginationPrevious,
-      next: PaginationNext,
-      last: PaginationLast
-    };
-    return React.createElement(mappedComponents[item.type], componentProps);
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mt-6 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { size: "small", color: "grey", variant: "outlined" }, /* @__PURE__ */ React.createElement("span", { className: "max-md:hidden" }, t("pagination.show")), " ", perPage, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20 }))), /* @__PURE__ */ React.createElement(DropdownMenuContent, { side: "top", align: "center" }, perPageOptions.map((option) => /* @__PURE__ */ React.createElement(
-    DropdownMenuItem,
-    {
-      key: option.value,
-      onSelect: () => {
-        onChangePerPage?.(option.value);
-      }
-    },
-    option.value.toString()
-  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess"))), /* @__PURE__ */ React.createElement("nav", { role: "navigation", "aria-label": "pagination" }, /* @__PURE__ */ React.createElement(PaginationContent, null, itemsPage.map((item) => /* @__PURE__ */ React.createElement(PaginationItem, { key: item.id }, mapPaginationItem(item))))));
-};
-Pagination.displayName = "Pagination";
-
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils.js';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-
-const RadioGroup = React.forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  RadioGroupPrimitive.Root,
-  {
-    className: cn("grid gap-2", className),
-    disabled,
-    ...props,
-    ref
-  }
-));
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioGroupItem = React.forwardRef(({ className, children, disabled, ...props }, ref) => {
-  const id = React.useId();
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement(
-    RadioGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        "peer relative aspect-square h-5 w-5 rounded-full border-2 border-grey-400 transition-all hover:border-grey-500 active:border-grey-700 disabled:cursor-not-allowed disabled:border-grey-300 focus-visible:outline-none focus-visible:before:absolute focus-visible:before:-z-10 focus-visible:before:top-1/2 focus-visible:before:left-1/2 focus-visible:before:transform focus-visible:before:-translate-x-1/2 focus-visible:before:-translate-y-1/2 focus-visible:before:w-10 focus-visible:before:h-10 focus-visible:before:rounded-full focus-visible:before:bg-blue-100 data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600 data-[state=checked]:hover:border-blue-700 data-[state=checked]:hover:text-blue-700 data-[state=checked]:active:border-blue-800 data-[state=checked]:active:text-blue-800 data-[state=checked]:disabled:border-blue-400 data-[state=checked]:disabled:text-blue-400",
-        className
-      ),
-      disabled,
-      ...props,
-      id
-    },
-    /* @__PURE__ */ React.createElement(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
-  ), /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: id,
-      className: "body-medium-400 leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-opacity"
-    },
-    children
-  ));
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

package/dist/components/Spin/Spin.js

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils.js';
-
-const Spin = React.forwardRef(
-  ({ textColor, size = 24, className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ref,
-      className: cn("animate-spin", className, textColor),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "circle",
-      {
-        className: "opacity-25",
-        cx: "12",
-        cy: "12",
-        r: "10",
-        stroke: "currentColor",
-        strokeWidth: "4"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        className: "opacity-75",
-        fill: "currentColor",
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      }
-    )
-  )
-);
-Spin.displayName = "Spin";
-
-export { Spin };

package/dist/components/Switch/Switch.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils.js';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-
-const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  SwitchPrimitives.Root,
-  {
-    className: cn(
-      "peer flex items-center shrink-0 h-6 w-12 p-[2px] group rounded-full cursor-pointer bg-transparent focus:outline-none transition-colors data-[state=unchecked]:border-2 data-[state=unchecked]:border-grey-400 data-[state=unchecked]:hover:border-grey-500 data-[state=unchecked]:active:border-grey-700 data-[state=unchecked]:disabled:border-grey-300 data-[state=checked]:bg-blue-600 data-[state=checked]:hover:bg-blue-700 data-[state=checked]:active:bg-blue-800 data-[state=checked]:disabled:bg-blue-200 disabled:cursor-not-allowed",
-      className
-    ),
-    ref,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(
-    SwitchPrimitives.Thumb,
-    {
-      className: cn(
-        "pointer-events-none rounded-full shadow-sm transition-all h-4 w-4 data-[state=unchecked]:bg-grey-400 data-[state=unchecked]:translate-x-1 group-hover:data-[state=unchecked]:bg-grey-500 group-focus:ring-8 group-focus:ring-blue-200 group-focus:ring-opacity-50 group-active:group-enabled:h-5 group-active:group-enabled:w-5 group-active:data-[state=unchecked]:bg-grey-700 group-active:group-enabled:data-[state=unchecked]:translate-x-[-2px] group-disabled:data-[state=unchecked]:bg-grey-300 group-disabled:data-[state=unchecked]:bg-opacity-65 data-[state=checked]:bg-white data-[state=checked]:translate-x-6"
-      )
-    }
-  )
-));
-Switch.displayName = "Switch";
-
-export { Switch };

package/dist/hooks/useIsMobile.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(
-    undefined
-  );
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
-
-export { useIsMobile };

package/dist/hooks/usePagination.js

@@ -1,97 +0,0 @@
-import { useState, useMemo } from 'react';
-
-const usePagination = ({
-  count = 1,
-  defaultPage = 1,
-  boundaryCount = 1,
-  siblingCount = 1,
-  disabled = false,
-  hideNextButton = false,
-  hidePrevButton = false,
-  showFirstButton = true,
-  showLastButton = true,
-  onChange
-} = {}) => {
-  const [page, setPage] = useState(defaultPage);
-  const handleClick = (value) => {
-    if (!disabled && value >= 1 && value <= count) {
-      setPage(value);
-      if (onChange) {
-        onChange(value);
-      }
-    }
-  };
-  const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  const startPages = range(1, Math.min(boundaryCount, count));
-  const endPages = range(
-    Math.max(count - boundaryCount + 1, boundaryCount + 1),
-    count
-  );
-  const siblingsStart = Math.max(
-    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
-  );
-  const siblingsEnd = Math.min(
-    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
-    count - boundaryCount - 1
-  );
-  const itemList = useMemo(
-    () => [
-      ...showFirstButton ? ["first"] : [],
-      ...hidePrevButton ? [] : ["previous"],
-      ...startPages,
-      ...siblingsStart > boundaryCount + 2 ? ["start-ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [],
-      ...range(siblingsStart, siblingsEnd),
-      ...siblingsEnd < count - boundaryCount - 1 ? ["end-ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : [],
-      ...endPages,
-      ...hideNextButton ? [] : ["next"],
-      ...showLastButton ? ["last"] : []
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      page,
-      count,
-      boundaryCount,
-      siblingCount,
-      showFirstButton,
-      showLastButton,
-      hidePrevButton,
-      hideNextButton
-    ]
-  );
-  const buttonPage = (type) => {
-    switch (type) {
-      case "first":
-        return 1;
-      case "previous":
-        return page - 1;
-      case "next":
-        return page + 1;
-      case "last":
-        return count;
-      default:
-        return null;
-    }
-  };
-  const items = itemList.map(
-    (item, i) => typeof item === "number" ? {
-      id: `page_${i}`,
-      onClick: () => handleClick(item),
-      type: "page",
-      page: item,
-      selected: item === page,
-      disabled,
-      "aria-current": item === page ? "page" : undefined
-    } : {
-      id: `${item}_${i}`,
-      onClick: () => handleClick(buttonPage(item)),
-      type: item,
-      page: buttonPage(item),
-      selected: false,
-      disabled: disabled || !item.includes("ellipsis") && (item === "next" || item === "last" ? page >= count : page <= 1)
-    }
-  );
-  return { page, setPage, items };
-};
-
-export { usePagination };