lecom-ui 5.3.17 → 5.3.19

package/dist/components/Button/CustomButton.js

@@ -2,35 +2,38 @@ import * as React from 'react';
 import opacity from 'hex-color-opacity';
 import { Button } from './Button.js';
 
-const SHADOW_SM_TAILWIND = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
 const CustomButton = React.forwardRef(
   ({ customStyles, isActive, children, ...props }, ref) => {
     const { normal, hover, focus } = customStyles;
-    const getStyle = (style) => ({
-      backgroundColor: opacity(style.bgColor, style.opacity),
-      color: style.textColor
-    });
-    const [styleState, setStyleState] = React.useState(() => getStyle(normal));
+    const [backgroundColor, setBackgroundColor] = React.useState(
+      opacity(normal.bgColor, normal.opacity)
+    );
+    const [color, setColor] = React.useState(normal.textColor);
     React.useEffect(() => {
-      setStyleState(getStyle(normal));
+      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
+      setColor(normal.textColor);
     }, [normal]);
-    const handleMouseOver = () => setStyleState(getStyle(hover));
-    const handleMouseOut = () => setStyleState(getStyle(normal));
-    const mappedCustomStyles = React.useMemo(
-      () => ({
-        backgroundColor: isActive ? opacity(focus.bgColor, focus.opacity) : styleState.backgroundColor,
-        color: isActive ? focus.textColor : styleState.color,
-        boxShadow: SHADOW_SM_TAILWIND
-      }),
-      [isActive, focus, styleState]
-    );
+    const handleOver = () => {
+      setBackgroundColor(opacity(hover.bgColor, hover.opacity));
+      setColor(hover.textColor);
+    };
+    const handleOut = () => {
+      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
+      setColor(normal.textColor);
+    };
+    const shadowSmTailwind = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
+    const mappedCustomStyles = {
+      backgroundColor: isActive ? opacity(focus.bgColor, focus.opacity) : backgroundColor,
+      color: isActive ? focus.textColor : color,
+      boxShadow: shadowSmTailwind
+    };
     return /* @__PURE__ */ React.createElement(
       Button,
       {
-        ref,
+        onMouseOver: handleOver,
+        onMouseOut: handleOut,
         style: mappedCustomStyles,
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
+        ref,
         ...props
       },
       children

package/dist/components/Select/Select.js

@@ -7,25 +7,43 @@ import { ChevronDown, ChevronUp, Check } from 'lucide-react';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SHADOW_SM_TAILWIND = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
 const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...props }, ref) => {
-  const [state, setState] = React.useState("normal");
-  const { normal, hover, focus } = customStyles || {};
-  React.useEffect(() => setState("normal"), [customStyles]);
-  const currentStyles = React.useMemo(() => {
-    const styleByState = customStyles && customStyles[state] || normal;
-    if (!styleByState) return {};
-    const { bgColor, opacity: bgOpacity, textColor } = styleByState;
-    return {
-      backgroundColor: opacity(bgColor, bgOpacity),
-      color: textColor,
-      boxShadow: SHADOW_SM_TAILWIND
-    };
-  }, [customStyles, state, normal]);
-  const handleMouseOver = () => hover && setState("hover");
-  const handleMouseOut = () => setState("normal");
-  const handleFocus = () => focus && setState("focus");
-  const handleBlur = () => setState("normal");
+  const normal = customStyles?.normal;
+  const hover = customStyles?.hover;
+  const focus = customStyles?.focus;
+  const [backgroundColor, setBackgroundColor] = React.useState(
+    normal ? opacity(normal.bgColor, normal.opacity) : void 0
+  );
+  const [color, setColor] = React.useState(normal?.textColor ?? void 0);
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
+    if (normal) {
+      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
+      setColor(normal.textColor);
+    }
+  }, [normal]);
+  const handleOver = React.useCallback(() => {
+    if (!isActive && hover) {
+      setBackgroundColor(opacity(hover.bgColor, hover.opacity));
+      setColor(hover.textColor);
+    }
+  }, [hover, isActive]);
+  const handleOut = React.useCallback(() => {
+    if (!isActive && normal) {
+      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
+      setColor(normal.textColor);
+    }
+  }, [normal, isActive]);
+  const handleFocus = React.useCallback(() => setIsActive(true), []);
+  const handleBlur = React.useCallback(() => setIsActive(false), []);
+  const mappedCustomStyles = React.useMemo(() => {
+    const shadowSmTailwind = "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0, 0, 0, 0.05)";
+    return customStyles ? {
+      backgroundColor: isActive ? opacity(focus?.bgColor || "", focus?.opacity || 1) : backgroundColor,
+      color: isActive ? focus?.textColor : color,
+      boxShadow: shadowSmTailwind
+    } : {};
+  }, [customStyles, isActive, focus, backgroundColor, color]);
   return /* @__PURE__ */ React.createElement(
     SelectPrimitive.Trigger,
     {
@@ -39,11 +57,11 @@ const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...
         !customStyles && "border border-grey-400 bg-background",
         className
       ),
-      style: currentStyles,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
+      onMouseOver: handleOver,
+      onMouseOut: handleOut,
       onFocus: handleFocus,
       onBlur: handleBlur,
+      style: mappedCustomStyles,
       ...props
     },
     children,

package/dist/index.d.ts

@@ -738,8 +738,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | "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;
@@ -898,7 +898,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<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLButtonElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLLabelElement | HTMLUListElement | 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<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | 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;
@@ -1054,7 +1054,7 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    radius?: "small" | "default" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';

package/package.json

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