lecom-ui 5.2.1 → 5.2.3

package/dist/dialog.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { cn } from './lib/utils.js';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:brightness-125 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Cross2Icon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/dropdown-menu.js

@@ -0,0 +1,138 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ChevronRightIcon, CheckIcon, DotFilledIcon } from '@radix-ui/react-icons';
+import { cn } from './lib/utils.js';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/form.js

@@ -0,0 +1,102 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { FormProvider, Controller, useFormContext } from 'react-hook-form';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from './lib/utils.js';
+import { Label } from './label.js';
+
+const Form = FormProvider;
+const FormFieldContext = React.createContext(
+  {}
+);
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(
+  {}
+);
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-[0.8rem] text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = children ? children : String(error?.message);
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-[0.8rem] font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/header.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { MenuIcon } from 'lucide-react';
+import img from './icons/logo_lecom.svg.js';
+import { cn, PercentOfOpacityAlphaCode } from './lib/utils.js';
+import { Button } from './button.js';
+import { Tooltip } from './tooltip.js';
+
+const HeaderPage = ({
+  children,
+  className,
+  classNameLogo,
+  backgroundColor = "hsl(230 55% 33%)",
+  textColor = "#FFFFFF",
+  openSidebar,
+  imgLogo,
+  tooltip = void 0,
+  tooltipSide = "bottom",
+  tooltipAlign = "start",
+  tooltipAlignOffset = 0,
+  tooltipSideOffset = 0,
+  ariaLabel,
+  ...rest
+}, ref) => {
+  const refMenuIcon = useRef(null);
+  const renderLogo = () => {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imgLogo || img,
+        className: cn("max-w-28 max-h-10 h-full w-full", classNameLogo)
+      }
+    );
+  };
+  const renderMenuHamburger = () => {
+    return /* @__PURE__ */ jsx(
+      MenuIcon,
+      {
+        style: { fill: PercentOfOpacityAlphaCode(textColor, 0.87) },
+        className: "w-[24px] h-[24px]"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        `fixed top-0 left-0 w-full h-16 py-[7px] px-2 flex justify-between items-center shadow-md z-[9999] border-transparent bg-brand-blue text-primary-foreground`,
+        className
+      ),
+      style: { backgroundColor, color: textColor },
+      ...rest,
+      ref,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 w-[200px]", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: refMenuIcon,
+              className: `cursor-pointer bg-none focus:bg-transparent hover:bg-transparent hover:text-none w-8 h-8`,
+              "aria-label": ariaLabel,
+              size: "icon",
+              variant: "ghost",
+              onClick: openSidebar,
+              children: tooltip ? /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  className: "z-[9999]",
+                  asChild: true,
+                  title: tooltip,
+                  side: tooltipSide,
+                  align: tooltipAlign,
+                  alignOffset: tooltipAlignOffset,
+                  sideOffset: tooltipSideOffset,
+                  children: renderMenuHamburger()
+                }
+              ) : renderMenuHamburger()
+            }
+          ),
+          renderLogo()
+        ] }),
+        children
+      ]
+    }
+  );
+};
+HeaderPage.displayName = "HeaderPage";
+const Header = forwardRef(HeaderPage);
+
+export { Header };

package/dist/hook/useDebounce.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = (value, milliSeconds) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, milliSeconds);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, milliSeconds]);
+  return debouncedValue;
+};
+
+export { useDebounce };

package/dist/icon-handler.js

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ReactSVG } from 'react-svg';
+import { isUrl, cn, isImage } from './lib/utils.js';
+
+const IconHandler = forwardRef(
+  ({ icon, colorType = "color", variantsColors, className, setAttribute, style = {}, ...props }, ref) => {
+    const IconComponent = icon;
+    if (typeof icon === "string") {
+      if (isUrl(icon)) {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: icon,
+            alt: "\xCDcone",
+            className: cn("w-[24px] h-[24px]", className),
+            style: {
+              ...style,
+              ...variantsColors && {
+                color: variantsColors
+              }
+            }
+          }
+        );
+      } else if (isImage(icon)) {
+        return /* @__PURE__ */ jsx(
+          ReactSVG,
+          {
+            src: icon,
+            className: cn("w-[24px] h-[24px]", className),
+            beforeInjection: (svg) => {
+              variantsColors && setAttribute ? svg.setAttribute("style", `fill: ${variantsColors} ${setAttribute ? `; ${setAttribute}` : ""}`) : setAttribute ? svg.setAttribute("style", `${setAttribute}`) : svg.setAttribute("style", `fill: ${variantsColors}`);
+            },
+            style
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("flex items-center w-auto h-[24px]", className),
+            style: {
+              ...style,
+              ...variantsColors && {
+                color: variantsColors
+              }
+            },
+            children: icon
+          }
+        );
+      }
+    } else {
+      const setColor = colorType === "color" ? { ["color"]: variantsColors } : {};
+      return /* @__PURE__ */ jsx(
+        IconComponent,
+        {
+          ref,
+          fill: colorType === "fill" ? variantsColors : "none",
+          className: cn(`hover:bg-transparent`, className),
+          style: {
+            ...style,
+            ...variantsColors && setColor
+          },
+          ...props
+        }
+      );
+    }
+  }
+);
+IconHandler.displayName = "IconHandler";
+
+export { IconHandler };

package/dist/icons/brandModules.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const BrandModules = ({
+  fill = "black",
+  width = "24px",
+  height = "24px",
+  viewBox = "0 0 24 24",
+  className = ""
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width,
+    height,
+    viewBox,
+    fill,
+    xmlSpace: "preserve",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M6.65,16.59c1.18-2.92,3.53-3.63,4.94-3.06a3.26,3.26,0,0,1,2,2.73.74.74,0,0,1-.28.66L6,22C5.85,18.23,6.41,17.25,6.65,16.59Zm5.93-3.81c-.42-.33-1-.66-1.46-1-.71-.42-1.32-.85-1.32-.85C5.9,8.35,5.9,6.09,6.09,2L20.34,12l-5.83,4.09A3.9,3.9,0,0,0,12.58,12.78Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" })
+    ]
+  }
+);
+
+export { BrandModules };