@adminlte/react 0.1.0

package/dist/form/button.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  theme = "primary",
+  outline,
+  size,
+  icon,
+  label,
+  children,
+  className,
+  ...props
+}) {
+  const btnClass = outline ? `btn btn-outline-${theme}` : `btn btn-${theme}`;
+  const sizeClass = size ? `btn-${size}` : "";
+  return /* @__PURE__ */ jsxs("button", { className: `${btnClass} ${sizeClass} ${className || ""}`.trim(), ...props, children: [
+    icon && /* @__PURE__ */ jsx("i", { className: `bi ${icon} ${label ? "me-2" : ""}` }),
+    label || children
+  ] });
+}
+export {
+  Button
+};

package/dist/form/input-color.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputColor({
+  name,
+  label,
+  fgroupClass,
+  error,
+  className,
+  defaultValue = "#0d6efd",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        name,
+        id: props.id || name,
+        className: `form-control form-control-color ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        defaultValue,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+}
+export {
+  InputColor
+};

package/dist/form/input-file.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputFile({
+  name,
+  label,
+  fgroupClass,
+  error,
+  multiple,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        name: multiple ? `${name}[]` : name,
+        id: props.id || name,
+        className: `form-control ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        multiple,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+}
+export {
+  InputFile
+};

package/dist/form/input-flatpickr.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function InputFlatpickr({
+  name,
+  label,
+  fgroupClass,
+  error,
+  dateType = "text",
+  options,
+  className,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const element = inputRef.current;
+    if (!element) return;
+    import("flatpickr").then(({ default: flatpickr }) => {
+      flatpickr(element, {
+        enableTime: dateType === "time" || dateType === "datetime",
+        noCalendar: dateType === "time",
+        dateFormat: dateType === "time" ? "H:i" : "Y-m-d",
+        ...options
+      });
+    });
+  }, [dateType, options]);
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: dateType === "time" ? "text" : dateType,
+        name,
+        id: props.id || name,
+        className: `form-control ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+}
+export {
+  InputFlatpickr
+};

package/dist/form/input-switch.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const InputSwitch = forwardRef(function InputSwitch2({ name, label, id, checked, defaultChecked, onChange, fgroupClass, error }, ref) {
+  const inputId = id || name;
+  return /* @__PURE__ */ jsxs("div", { className: `form-check form-switch ${fgroupClass || ""}`, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        className: `form-check-input ${error ? "is-invalid" : ""}`,
+        id: inputId,
+        name,
+        checked,
+        defaultChecked,
+        onChange: (e) => onChange?.(e.target.checked)
+      }
+    ),
+    label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputId, children: label }),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+});
+export {
+  InputSwitch
+};

package/dist/form/input-tom-select.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function InputTomSelect({
+  name,
+  label,
+  fgroupClass,
+  error,
+  options,
+  tomSelectOptions,
+  className,
+  "aria-label": ariaLabelProp,
+  ...props
+}) {
+  const selectRef = useRef(null);
+  const ariaLabel = ariaLabelProp ?? label;
+  useEffect(() => {
+    const element = selectRef.current;
+    if (!element) return;
+    let instance;
+    let active = true;
+    import("tom-select").then(({ default: TomSelect }) => {
+      if (!active || !element) return;
+      const ts = new TomSelect(element, {
+        create: false,
+        allowEmptyOption: true,
+        ...tomSelectOptions
+      });
+      instance = ts;
+      if (ariaLabel) {
+        const control = ts.control_input;
+        control?.setAttribute("aria-label", ariaLabel);
+      }
+    });
+    return () => {
+      active = false;
+      instance?.destroy();
+    };
+  }, [tomSelectOptions, ariaLabel]);
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref: selectRef,
+        name,
+        id: props.id || name,
+        "aria-label": ariaLabel,
+        className: `form-select ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        ...props,
+        children: options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+}
+export {
+  InputTomSelect
+};

package/dist/form/input.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Input = forwardRef(function Input2({ name, label, igroupSize, fgroupClass, error, hint, className, ...props }, ref) {
+  const sizeClass = igroupSize ? `form-control-${igroupSize}` : "";
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        name,
+        id: props.id || name,
+        className: `form-control ${sizeClass} ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error }),
+    hint && /* @__PURE__ */ jsx("small", { className: "form-text text-muted", children: hint })
+  ] });
+});
+export {
+  Input
+};

package/dist/form/select.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Select = forwardRef(function Select2({ name, label, fgroupClass, error, options, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        name,
+        id: props.id || name,
+        className: `form-select ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        ...props,
+        children: [
+          options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)),
+          children
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error })
+  ] });
+});
+export {
+  Select
+};

package/dist/form/textarea.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Textarea = forwardRef(function Textarea2({ name, label, fgroupClass, error, hint, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: props.id || name, className: "form-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        name,
+        id: props.id || name,
+        className: `form-control ${error ? "is-invalid" : ""} ${className || ""}`.trim(),
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "invalid-feedback", children: error }),
+    hint && /* @__PURE__ */ jsx("small", { className: "form-text text-muted", children: hint })
+  ] });
+});
+export {
+  Textarea
+};

package/dist/hooks/use-card-widget.js

@@ -0,0 +1,44 @@
+import { useState } from "react";
+function useCardWidget(initialCollapsed = false) {
+  const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [isRemoved, setIsRemoved] = useState(false);
+  const collapse = () => setIsCollapsed(true);
+  const expand = () => setIsCollapsed(false);
+  const toggleCollapse = () => setIsCollapsed((v) => !v);
+  const maximize = () => {
+    setIsMaximized(true);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.add("maximized-card");
+    }
+  };
+  const minimize = () => {
+    setIsMaximized(false);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.remove("maximized-card");
+    }
+  };
+  const toggleMaximize = () => {
+    if (isMaximized) {
+      minimize();
+    } else {
+      maximize();
+    }
+  };
+  const remove = () => setIsRemoved(true);
+  return {
+    isCollapsed,
+    isMaximized,
+    isRemoved,
+    collapse,
+    expand,
+    toggleCollapse,
+    maximize,
+    minimize,
+    toggleMaximize,
+    remove
+  };
+}
+export {
+  useCardWidget
+};

package/dist/hooks/use-direct-chat.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+function useDirectChat() {
+  const [isContactsOpen, setIsContactsOpen] = useState(false);
+  const toggleContacts = () => setIsContactsOpen((v) => !v);
+  const openContacts = () => setIsContactsOpen(true);
+  const closeContacts = () => setIsContactsOpen(false);
+  return {
+    isContactsOpen,
+    toggleContacts,
+    openContacts,
+    closeContacts
+  };
+}
+export {
+  useDirectChat
+};

package/dist/hooks/use-fullscreen.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+function useFullscreen() {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  const enterFullscreen = async () => {
+    try {
+      await document.documentElement.requestFullscreen();
+    } catch (err) {
+      console.error("Failed to enter fullscreen:", err);
+    }
+  };
+  const exitFullscreen = async () => {
+    try {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+    } catch (err) {
+      console.error("Failed to exit fullscreen:", err);
+    }
+  };
+  const toggleFullscreen = async () => {
+    if (isFullscreen) {
+      await exitFullscreen();
+    } else {
+      await enterFullscreen();
+    }
+  };
+  return {
+    isFullscreen,
+    toggleFullscreen,
+    enterFullscreen,
+    exitFullscreen
+  };
+}
+export {
+  useFullscreen
+};

package/dist/hooks/use-push-menu.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+function usePushMenu(options = {}) {
+  const { sidebarBreakpoint = 992, enablePersistence = false, isMiniMode = false } = options;
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    setWindowWidth(window.innerWidth);
+    if (enablePersistence) {
+      const saved = localStorage.getItem("lte.sidebar.state");
+      if (saved) {
+        try {
+          const { collapsed } = JSON.parse(saved);
+          setIsCollapsed(collapsed);
+        } catch {
+        }
+      }
+    }
+  }, [enablePersistence]);
+  useEffect(() => {
+    if (typeof window === "undefined" || !enablePersistence) return;
+    localStorage.setItem("lte.sidebar.state", JSON.stringify({ collapsed: isCollapsed }));
+  }, [isCollapsed, enablePersistence]);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect(() => {
+    if (windowWidth === null) return;
+    const isMobileSize = windowWidth <= sidebarBreakpoint;
+    if (isMobileSize && !isMobileOpen && !isCollapsed) {
+      setIsCollapsed(true);
+    } else if (!isMobileSize && isCollapsed && !isMiniMode) {
+      setIsCollapsed(false);
+    }
+  }, [windowWidth, sidebarBreakpoint, isMobileOpen, isCollapsed, isMiniMode]);
+  const toggle = () => setIsCollapsed((v) => !v);
+  const collapse = () => {
+    setIsCollapsed(true);
+    setIsMobileOpen(false);
+  };
+  const expand = () => {
+    setIsCollapsed(false);
+    setIsMobileOpen(false);
+  };
+  return { isCollapsed, isMobileOpen, toggle, collapse, expand };
+}
+export {
+  usePushMenu
+};

package/dist/hooks/use-sortable.js

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+function useSortable(enabled = true) {
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const initSortable = async () => {
+      const { default: Sortable } = await import("sortablejs");
+      const sortableElements = document.querySelectorAll(".connectedSortable");
+      sortableElements.forEach((el) => {
+        new Sortable(el, {
+          group: "shared",
+          handle: ".card-header",
+          animation: 200
+        });
+      });
+      const cardHeaders = document.querySelectorAll(".connectedSortable .card-header");
+      cardHeaders.forEach((header) => {
+        ;
+        header.style.cursor = "move";
+      });
+    };
+    initSortable().catch(console.error);
+  }, [enabled]);
+}
+export {
+  useSortable
+};

package/dist/hooks/use-treeview-animation.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+function useTreeviewAnimation(isOpen, speed = 300) {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    if (isOpen) {
+      const fullHeight = element.scrollHeight;
+      setHeight(fullHeight);
+      const timer = setTimeout(() => {
+        setHeight("auto");
+      }, speed);
+      return () => clearTimeout(timer);
+    }
+    setHeight(0);
+  }, [isOpen, speed]);
+  const style = {
+    height,
+    overflow: "hidden",
+    transition: `height ${speed}ms ease-in-out`
+  };
+  return { ref, style };
+}
+export {
+  useTreeviewAnimation
+};