lecom-ui 2.5.2 → 2.5.5

package/dist/components/Notification/NotificationBase.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { notificationVariants } from './Notification.js';
 

package/dist/components/Notification/NotificationCallout.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { ChevronUpIcon } from 'lucide-react';
 import { NotificationBase } from './NotificationBase.js';
@@ -6,13 +6,13 @@ import { NotificationContent } from './NotificationContent.js';
 import { NotificationIcon } from './NotificationIcon.js';
 
 const NotificationCallout = ({ ...props }) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [shouldCollapse, setShouldCollapse] = useState(false);
-  const [contentHeight, setContentHeight] = useState(0);
-  const [lineHeight, setLineHeight] = useState(0);
-  const refCollapse = useRef(null);
-  const contentRef = useRef(null);
-  useEffect(() => {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [shouldCollapse, setShouldCollapse] = React.useState(false);
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [lineHeight, setLineHeight] = React.useState(0);
+  const refCollapse = React.useRef(null);
+  const contentRef = React.useRef(null);
+  React.useEffect(() => {
     if (contentRef.current) {
       const computedStyle = window.getComputedStyle(contentRef.current);
       const lineHeight2 = parseFloat(computedStyle.lineHeight);
@@ -20,11 +20,11 @@ const NotificationCallout = ({ ...props }) => {
       setContentHeight(contentRef.current.scrollHeight);
     }
   }, [props.content]);
-  useEffect(() => {
+  React.useEffect(() => {
     const shouldCollapse2 = contentHeight > lineHeight * (props.action ? 3 : 2);
     setShouldCollapse(shouldCollapse2);
   }, [contentHeight, lineHeight]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (isCollapsed) {
       refCollapse.current?.style.setProperty("transform", "rotate(180deg)");
     } else {

package/dist/components/Notification/NotificationContent.js

@@ -1,7 +1,7 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Typography } from '../Typography/Typography.js';
 
-const NotificationContent = forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 flex-1" }, title && /* @__PURE__ */ React.createElement(
+const NotificationContent = React.forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 flex-1" }, title && /* @__PURE__ */ React.createElement(
   Typography,
   {
     variant: "body-medium-500",

package/dist/components/Notification/NotificationIcon.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { CircleCheckIcon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
 
 const iconMap = {

package/dist/components/Notification/NotificationInline.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
 import { NotificationCloseButton } from './NotificationCloseButton.js';
@@ -13,7 +13,7 @@ const NotificationInline = ({
   action,
   shouldExpand
 }) => {
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = React.useState(true);
   if (!isVisible) return null;
   const defaultVariant = variant ?? "information";
   const getFullWidthColumns = () => {

package/dist/components/Notification/NotificationToast.js

@@ -1,4 +1,4 @@
-import { memo, useState, useRef, useEffect, useMemo } from 'react';
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
 import { NotificationCloseButton } from './NotificationCloseButton.js';
@@ -8,12 +8,12 @@ import { useNotificationToast, TOAST_REMOVE_DELAY } from './useNotificationToast
 
 const NotificationToast = (props) => {
   const { toasts, closeNotification, pauseNotification, resumeNotification } = useNotificationToast();
-  const [progressMap, setProgressMap] = useState({});
-  const progressMapRef = useRef({});
-  const isPausedMapRef = useRef({});
-  const remainingTimeMapRef = useRef({});
-  const lastUpdateMapRef = useRef({});
-  useEffect(() => {
+  const [progressMap, setProgressMap] = React.useState({});
+  const progressMapRef = React.useRef({});
+  const isPausedMapRef = React.useRef({});
+  const remainingTimeMapRef = React.useRef({});
+  const lastUpdateMapRef = React.useRef({});
+  React.useEffect(() => {
     const now = Date.now();
     const newProgress = { ...progressMapRef.current };
     const newRemainingTime = { ...remainingTimeMapRef.current };
@@ -30,7 +30,7 @@ const NotificationToast = (props) => {
     lastUpdateMapRef.current = newLastUpdate;
     setProgressMap(newProgress);
   }, [toasts]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (toasts.length === 0) return;
     const interval = setInterval(() => {
       const now = Date.now();
@@ -72,7 +72,7 @@ const NotificationToast = (props) => {
       return "grid-cols-[1.25rem_minmax(_auto,13.25rem)]";
     }
   };
-  const colorMap = useMemo(
+  const colorMap = React.useMemo(
     () => ({
       information: "bg-blue-600",
       success: "bg-green-600",
@@ -123,6 +123,6 @@ const NotificationToast = (props) => {
   )));
 };
 NotificationToast.displayName = "NotificationToast";
-const MemoizedNotificationToast = memo(NotificationToast);
+const MemoizedNotificationToast = React.memo(NotificationToast);
 
 export { MemoizedNotificationToast };

package/dist/components/Notification/useNotificationToast.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import * as React from 'react';
 
 const TOAST_LIMIT = Infinity;
 const TOAST_REMOVE_DELAY = 5e3;
@@ -150,8 +150,8 @@ function toast({ ...props }) {
   dispatch({ type: actionTypes.ADD_TOAST, toast: newToast });
 }
 function useNotificationToast() {
-  const [state, setState] = React__default.useState(memoryState);
-  React__default.useEffect(() => {
+  const [state, setState] = React.useState(memoryState);
+  React.useEffect(() => {
     const id = genId();
     listeners[id] = setState;
     return () => {

package/dist/components/Tag/Tag.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+
+const tagVariants = cva(
+  "h-6 gap-1 py-1 px-2 body-small-400 inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-4",
+  {
+    variants: {
+      color: {
+        grey: "bg-grey-200 text-grey-700 hover:bg-grey-300 active:bg-grey-400 focus:bg-grey-200 focus:ring-grey-50",
+        purple: "bg-purple-100 text-purple-600 hover:bg-purple-200 active:bg-purple-300 focus:bg-purple-100 focus:ring-purple-50",
+        yellow: "bg-yellow-100 text-yellow-600 hover:bg-yellow-200 active:bg-yellow-300 focus:bg-yellow-100 focus:ring-yellow-50",
+        red: "bg-red-100 text-red-600 hover:bg-red-200 active:bg-red-300 focus:bg-red-100 focus:ring-red-50",
+        orange: "bg-orange-100 text-orange-600 hover:bg-orange-200 active:bg-orange-300 focus:bg-orange-100 focus:ring-orange-50",
+        green: "bg-green-100 text-green-600 hover:bg-green-200 active:bg-green-300 focus:bg-green-100 focus:ring-green-50",
+        pink: "bg-pink-100 text-pink-600 hover:bg-pink-200 active:bg-pink-300 focus:bg-pink-100 focus:ring-pink-50",
+        turquoise: "bg-turquoise-100 text-turquoise-600 hover:bg-turquoise-200 active:bg-turquoise-300 focus:bg-turquoise-100 focus:ring-turquoise-50",
+        blue: "bg-blue-100 text-blue-600 hover:bg-blue-200 active:bg-blue-300 focus:bg-blue-100 focus:ring-blue-50"
+      }
+    },
+    defaultVariants: {
+      color: "grey"
+    }
+  }
+);
+const Tag = React.forwardRef(
+  ({ className, color, children, ...props }, ref) => {
+    const Comp = "div";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        tabIndex: 0,
+        className: cn(tagVariants({ color }), className),
+        ref,
+        ...props
+      },
+      children
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+export { Tag, tagVariants };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { ColumnDef } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -392,8 +391,8 @@ declare const Notification: React.ForwardRefExoticComponent<NotificationProps &
 declare const TOAST_REMOVE_DELAY = 5000;
 type ToasterToast = {
     id: string;
-    title?: React__default.ReactNode;
-    content: React__default.ReactNode;
+    title?: React.ReactNode;
+    content: React.ReactNode;
     variant: 'success' | 'error' | 'warning' | 'information';
     toastLimit?: number;
     open: boolean;
@@ -448,6 +447,14 @@ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimit
 
 declare const Skeleton: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 
+declare const tagVariants: (props?: ({
+    color?: "blue" | "grey" | "green" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof tagVariants> {
+    children: React.ReactNode;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;
+
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -481,4 +488,4 @@ declare const fonts: {
     ibm: string[];
 };
 
-export { type BgColor, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type Color, type ColorToken, type CustomStyles$1 as CustomStyles, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FillColor, type Fonts, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Popover, PopoverContent, PopoverTrigger, Rpa, type RpaProps, type SideBarProps, Skeleton, TOAST_REMOVE_DELAY, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, TypeMessageNotification, Typography, type TypographyProps, buttonVariants, colors, fonts, getPositionClass, notificationVariants, reducer, toast, typographyVariants, useNotificationToast };
+export { type BgColor, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type Color, type ColorToken, type CustomStyles$1 as CustomStyles, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FillColor, type Fonts, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Popover, PopoverContent, PopoverTrigger, Rpa, type RpaProps, type SideBarProps, Skeleton, TOAST_REMOVE_DELAY, Tag, type TagProps, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, TypeMessageNotification, Typography, type TypographyProps, buttonVariants, colors, fonts, getPositionClass, notificationVariants, reducer, tagVariants, toast, typographyVariants, useNotificationToast };

package/dist/index.js

@@ -12,6 +12,7 @@ export { Notification, TypeMessageNotification, getPositionClass, notificationVa
 export { TOAST_REMOVE_DELAY, reducer, toast, useNotificationToast } from './components/Notification/useNotificationToast.js';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover/Popover.js';
 export { Skeleton } from './components/Skeleton/Skeleton.js';
+export { Tag, tagVariants } from './components/Tag/Tag.js';
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from './components/Tooltip/Tooltip.js';
 export { Typography, typographyVariants } from './components/Typography/Typography.js';
 export { colors } from './tokens/colors.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "2.5.2",
+  "version": "2.5.5",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",