lecom-ui 5.0.4 → 5.0.7

package/dist/components/Chart/Chart.js

@@ -0,0 +1,227 @@
+import React__default, { forwardRef, useId, useMemo, useContext } from 'react';
+import { cn } from '../../lib/utils.js';
+import { ResponsiveContainer, Legend, Tooltip } from 'recharts';
+export { Bar, BarChart, CartesianGrid, Label, LabelList, Text, XAxis, YAxis } from 'recharts';
+
+const THEMES = { light: "", dark: ".dark" };
+const ChartContext = React__default.createContext(null);
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+const ChartContainer = forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ React__default.createElement(ChartContext.Provider, { value: { config } }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      "data-chart": chartId,
+      ref,
+      className: cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(ChartStyle, { id: chartId, config }),
+    /* @__PURE__ */ React__default.createElement(ResponsiveContainer, null, children)
+  ));
+});
+ChartContainer.displayName = "Chart";
+const ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+const ChartTooltip = Tooltip;
+const ChartTooltipContent = forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+      if (labelFormatter) {
+        return /* @__PURE__ */ React__default.createElement("div", { className: cn("font-medium", labelClassName) }, labelFormatter(value, payload));
+      }
+      if (!value) {
+        return null;
+      }
+      return /* @__PURE__ */ React__default.createElement("div", { className: cn("font-medium", labelClassName) }, value);
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey
+    ]);
+    if (!active || !payload?.length) {
+      return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )
+      },
+      !nestLabel ? tooltipLabel : null,
+      /* @__PURE__ */ React__default.createElement("div", { className: "grid gap-1.5" }, payload.map((item, index) => {
+        const key = `${nameKey || item.name || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const indicatorColor = color || item.payload.fill || item.color;
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            key: item.dataKey,
+            className: cn(
+              "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+              indicator === "dot" && "items-center"
+            )
+          },
+          formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, itemConfig?.icon ? /* @__PURE__ */ React__default.createElement(itemConfig.icon, null) : !hideIndicator && /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              className: cn(
+                "shrink-0 rounded-xs border-[--color-border] bg-[--color-bg]",
+                {
+                  "h-2.5 w-2.5": indicator === "dot",
+                  "w-1": indicator === "line",
+                  "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                  "my-0.5": nestLabel && indicator === "dashed"
+                }
+              ),
+              style: {
+                "--color-bg": indicatorColor,
+                "--color-border": indicatorColor
+              }
+            }
+          ), /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 justify-between leading-none",
+                nestLabel ? "items-end" : "items-center"
+              )
+            },
+            /* @__PURE__ */ React__default.createElement("div", { className: "grid gap-1.5" }, nestLabel ? tooltipLabel : null, /* @__PURE__ */ React__default.createElement("span", { className: "text-muted-foreground" }, itemConfig?.label || item.name)),
+            item.value && /* @__PURE__ */ React__default.createElement("span", { className: "font-mono font-medium tabular-nums text-foreground" }, item.value.toLocaleString())
+          ))
+        );
+      }))
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+const ChartLegend = Legend;
+const ChartLegendContent = forwardRef(
+  ({
+    className,
+    hideIcon = false,
+    payload,
+    verticalAlign = "bottom",
+    nameKey,
+    hideLegend = false
+  }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )
+      },
+      !hideLegend && payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            key: item.value,
+            className: cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground body-medium-400 text-grey-800"
+            )
+          },
+          itemConfig?.icon && !hideIcon ? /* @__PURE__ */ React__default.createElement(itemConfig.icon, null) : /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              className: "h-4 w-4 shrink-0 rounded-sm",
+              style: {
+                backgroundColor: item.color
+              }
+            }
+          ),
+          itemConfig?.label
+        );
+      })
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/components/Notification/Notification.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
+import { Portal } from '@radix-ui/react-portal';
 import { cva } from 'class-variance-authority';
 import { NotificationCallout } from './NotificationCallout.js';
 import { NotificationInline } from './NotificationInline.js';
@@ -28,12 +29,19 @@ const notificationVariants = cva(
     }
   }
 );
-const posistionMap = {
-  topRight: "top-0 right-0",
-  topLeft: "top-0 left-0",
-  bottomRight: "bottom-0 right-0",
-  bottomLeft: "bottom-0 left-0"
-};
+const positionsNotification = cva("fixed z-[1000] p-4 space-y-2", {
+  variants: {
+    placement: {
+      topRight: "top-0 right-0",
+      topLeft: "top-0 left-0",
+      bottomRight: "bottom-0 right-0",
+      bottomLeft: "bottom-0 left-0"
+    }
+  },
+  defaultVariants: {
+    placement: "topRight"
+  }
+});
 const renderNotification = (props) => {
   switch (props.type) {
     case "toast":
@@ -46,32 +54,28 @@ const renderNotification = (props) => {
       return null;
   }
 };
-const getPositionClass = (type, placement = "topRight") => {
-  if (type === "toast" && placement) {
-    return posistionMap[placement];
-  }
-  return "";
-};
 const Notification = React.forwardRef(
   ({ ...props }, ref) => {
     const { type, placement } = props;
     const { fullWidth } = props;
     const widthStyle = fullWidth ? "w-full" : "inline-block";
-    const positionClass = getPositionClass(type, placement);
-    return /* @__PURE__ */ React.createElement(
+    const content = /* @__PURE__ */ React.createElement(
       "main",
       {
         className: cn(
           widthStyle,
-          type === "toast" && "fixed z-50 p-4 space-y-2",
-          positionClass
+          type === "toast" && positionsNotification({ placement })
         ),
         ref
       },
       renderNotification(props)
     );
+    if (type === "toast") {
+      return /* @__PURE__ */ React.createElement(Portal, null, content);
+    }
+    return content;
   }
 );
 Notification.displayName = "Notification";
 
-export { Notification, TypeMessageNotification, getPositionClass, notificationVariants };
+export { Notification, TypeMessageNotification, notificationVariants };

package/dist/components/Notification/NotificationToast.js

@@ -111,7 +111,7 @@ const NotificationToast = (props) => {
     }
     return null;
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, toasts.map((toast) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto" }, toasts.map((toast) => /* @__PURE__ */ React.createElement(
     NotificationBase,
     {
       key: toast.id,

package/dist/components/Select/Select.js

@@ -1,28 +1,67 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import opacity from 'hex-color-opacity';
 import { ChevronDown, ChevronUp, Check } from 'lucide-react';
 
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      `flex h-10 w-full items-center justify-between
-      rounded-[4px] border border-grey-400 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground
-      hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
-      outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
-      transition-all duration-300`,
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" }))
-));
+const SelectTrigger = React.forwardRef(({ className, children, customStyles, ...props }, ref) => {
+  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);
+  const handleOver = React.useCallback(() => {
+    if (hover) {
+      setBackgroundColor(opacity(hover.bgColor, hover.opacity));
+      setColor(hover.textColor);
+    }
+  }, [hover]);
+  const handleOut = React.useCallback(() => {
+    if (normal) {
+      setBackgroundColor(opacity(normal.bgColor, normal.opacity));
+      setColor(normal.textColor);
+    }
+  }, [normal]);
+  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,
+    {
+      ref,
+      className: cn(
+        `flex h-10 w-full items-center justify-between
+        rounded-[4px] px-3 py-2 text-sm placeholder:text-muted-foreground
+        hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
+        outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
+        transition-all duration-300`,
+        !customStyles && "border border-grey-400 bg-background",
+        className
+      ),
+      onMouseOver: handleOver,
+      onMouseOut: handleOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      style: mappedCustomStyles,
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" }))
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SelectPrimitive.ScrollUpButton,