lecom-ui 5.4.32 → 5.4.33

package/dist/components/TagInput/TagInput.js

@@ -5,7 +5,7 @@ import { Tag } from '../Tag/Tag.js';
 import { textareaVariants } from '../Textarea/Textarea.js';
 import { Typography } from '../Typography/Typography.js';
 
-function TagItem({ item, onRemove, readOnly }) {
+function TagItem({ item, onRemove, readOnly, defaultColor }) {
   const handleRemove = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -13,18 +13,35 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "max-w-[15.625rem] h-6 !px-2 !py-0.5" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600 truncate p-0" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
-    X,
+  const tagColor = item.color || defaultColor;
+  return /* @__PURE__ */ React.createElement(
+    Tag,
     {
-      className: "w-4 h-4 cursor-pointer flex-shrink-0",
-      onClick: handleRemove,
-      "aria-label": `Remover ${item.label}`,
-      tabIndex: 0
-    }
-  ));
+      "data-tag": "true",
+      color: tagColor,
+      className: "max-w-[15.625rem] h-6 !px-2 !py-0.5"
+    },
+    /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body-small-400",
+        className: "truncate p-0 [color:inherit]"
+      },
+      item.label
+    ),
+    !readOnly && /* @__PURE__ */ React.createElement(
+      X,
+      {
+        className: "w-4 h-4 cursor-pointer flex-shrink-0",
+        onClick: handleRemove,
+        "aria-label": `Remover ${item.label}`,
+        tabIndex: 0
+      }
+    )
+  );
 }
-function HiddenCountTag({ count }) {
-  return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count));
+function HiddenCountTag({ count, color }) {
+  return /* @__PURE__ */ React.createElement(Tag, { color, "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "[color:inherit]" }, "+", count));
 }
 function calculateEstimatedWidths(value) {
   const AVG_CHAR_WIDTH = 8;
@@ -69,7 +86,8 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
   const [maxLines, setMaxLines] = React.useState(null);
   const hasCalculatedMaxLines = React.useRef(false);
   React.useEffect(() => {
-    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0) return;
+    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0)
+      return;
     const calculateMaxLines = () => {
       if (!ref.current) {
         setTimeout(calculateMaxLines, 10);
@@ -83,7 +101,10 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
       const TAG_HEIGHT = 24;
       const CONTAINER_PADDING_VERTICAL = 4;
       const availableHeight = containerHeight - CONTAINER_PADDING_VERTICAL * 2;
-      const calculatedMaxLines = Math.max(1, Math.floor(availableHeight / TAG_HEIGHT));
+      const calculatedMaxLines = Math.max(
+        1,
+        Math.floor(availableHeight / TAG_HEIGHT)
+      );
       setMaxLines(calculatedMaxLines);
       hasCalculatedMaxLines.current = true;
     };
@@ -126,7 +147,11 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
         setDynamicMaxCount(value.length);
         return;
       }
-      const count = simulateTagLayout(estimatedWidths, availableWidth, maxLines);
+      const count = simulateTagLayout(
+        estimatedWidths,
+        availableWidth,
+        maxLines
+      );
       setDynamicMaxCount(count);
     };
     const rafId = requestAnimationFrame(() => {
@@ -156,6 +181,7 @@ function TagInput(props) {
     className = "",
     variant = "default",
     radius = "default",
+    color = "blue",
     ...restProps
   } = props;
   const ref = React.useRef(null);
@@ -192,17 +218,18 @@ function TagInput(props) {
       style: containerStyles,
       ...restProps
     },
-    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
+    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-500" }, placeholder),
     displayTags.map((item) => /* @__PURE__ */ React.createElement(
       TagItem,
       {
         key: item.value,
         item,
         onRemove: handleRemove,
-        readOnly
+        readOnly,
+        defaultColor: color
       }
     )),
-    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount })
+    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount, color })
   );
 }
 

package/dist/i18n/locales/en_us.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "selected process"
+      selectedProcess: "Item(s) selected",
+      selectedItemSingular: "item selected"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",
@@ -20,7 +21,8 @@ const language = {
       search: "Type to search",
       empty: "No results found",
       selectAll: "Select all",
-      placeholder: "Select"
+      placeholder: "Select",
+      create: "Create"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) seleccionado(s)"
+      selectedProcess: "Item(s) seleccionado(s)",
+      selectedItemSingular: "item seleccionado"
     },
     upload: {
       label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo.",
@@ -20,7 +21,8 @@ const language = {
       search: "Tipo a buscar",
       empty: "No se han encontrado resultados",
       selectAll: "Seleccionar todo",
-      placeholder: "Seleccionar"
+      placeholder: "Seleccionar",
+      create: "Crear"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) selecionado(s)"
+      selectedProcess: "Item(s) selecionado(s)",
+      selectedItemSingular: "item selecionado"
     },
     upload: {
       label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo.",
@@ -20,7 +21,8 @@ const language = {
       search: "Digite para pesquisar",
       empty: "Nenhum resultado encontrado",
       selectAll: "Selecionar tudo",
-      placeholder: "Selecione"
+      placeholder: "Selecione",
+      create: "Criar"
     }
   }
 };

package/dist/index.d.ts

@@ -306,6 +306,7 @@ interface PaginationProps {
     className?: string;
     activeColor?: BgColor$1;
     showPerPageSelector?: boolean;
+    maxSelection?: number;
 }
 declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
 declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
@@ -334,7 +335,7 @@ declare const PaginationIndex: {
     displayName: string;
 };
 declare const Pagination: {
-    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, showPerPageSelector, }: PaginationProps): React$1.JSX.Element;
+    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, showPerPageSelector, maxSelection, }: PaginationProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -384,6 +385,7 @@ interface Column<TData, TValue> {
     headerClassName?: string;
     headerStyle?: React.CSSProperties;
     cellClassName?: string;
+    showHeaderTooltip?: boolean;
     customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -726,6 +728,7 @@ interface SearchInputProps {
     customStyles: CustomStyles$2;
     placeholder?: string;
     isActiveButton?: boolean;
+    value?: string;
     onChangeValue?: (value: string) => void;
     onClickButton?: () => void;
 }
@@ -783,9 +786,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
+    variant?: "filled" | "default" | "borderless" | null | undefined;
+    size?: "small" | "large" | "default" | null | undefined;
+    radius?: "small" | "large" | "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -819,7 +822,7 @@ interface SideBarProps {
 }
 interface LayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
     header: HeaderProps;
-    sideBar: SideBarProps;
+    sideBar?: SideBarProps;
 }
 declare const Layout: {
     ({ children, header, sideBar }: LayoutProps): React$1.JSX.Element;
@@ -860,6 +863,7 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
     };
     classNameContent?: string;
     size?: MultiSelectSize;
+    readOnly?: boolean;
 }
 interface MultiSelectTreeOption {
     label: string;
@@ -990,7 +994,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLUListElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLUListElement | HTMLLabelElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1156,9 +1160,9 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
+    variant?: "filled" | "default" | "borderless" | null | undefined;
+    size?: "small" | "large" | "default" | null | undefined;
+    radius?: "small" | "large" | "default" | "full" | null | undefined;
     resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
@@ -1228,14 +1232,17 @@ type ComboboxProps = {
     rounded?: ComboboxRounded;
     showSearch?: boolean;
     size?: ComboboxSize;
+    allowCreate?: boolean;
+    onCreateOption?: (inputValue: string) => void;
 };
-declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, }: ComboboxProps): React$1.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, allowCreate, onCreateOption, }: ComboboxProps): React$1.JSX.Element;
 
 interface TagItem {
     label: string;
     value: string;
+    color?: TagProps['color'];
 }
-interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface TagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'> {
     value: TagItem[];
     onRemove: (value: string) => void;
     placeholder?: string;
@@ -1245,6 +1252,7 @@ interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
     variant?: 'default' | 'filled' | 'borderless';
     radius?: 'default' | 'full';
     maxDisplayCount?: number;
+    color?: TagProps['color'];
 }
 declare function TagInput(props: TagInputProps): React$1.JSX.Element;
 
@@ -1298,7 +1306,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1317,8 +1325,9 @@ declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPri
 interface CustomTagItem {
     id: string;
     label: string;
+    color?: TagProps['color'];
 }
-interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
     value: CustomTagItem[];
     onChange: (items: CustomTagItem[]) => void;
     placeholder?: string;
@@ -1332,6 +1341,7 @@ interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
     onTagEdit?: (item: CustomTagItem) => void;
     allowDuplicates?: boolean;
     enableReorder?: boolean;
+    color?: TagProps['color'];
 }
 declare function CustomTagInput(props: CustomTagInputProps): React$1.JSX.Element;
 
@@ -1342,7 +1352,7 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "destructive" | "default" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }