@latty-ds/react 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -69,79 +69,72 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_web = require("@latty-ds/web");
 
-// src/components/Alert/Alert.tsx
+// src/components/Avatar/Avatar.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Alert = (0, import_react.forwardRef)(function Alert2({ onClose, children, ...props }, forwardedRef) {
+var Avatar = (0, import_react.forwardRef)(function Avatar2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react.useRef)(null);
   (0, import_react.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onClose) return;
-    const h = (ev) => onClose(ev);
-    el.addEventListener("close", h);
-    return () => el.removeEventListener("close", h);
-  }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("lt-alert", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("lt-avatar", { ref: innerRef, ...props, children });
 });
-Alert.displayName = "Alert";
+Avatar.displayName = "Avatar";
 
-// src/components/Breadcrumb/Breadcrumb.tsx
+// src/components/Badge/Badge.tsx
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Breadcrumb = (0, import_react2.forwardRef)(function Breadcrumb2({ children, ...props }, forwardedRef) {
+var Badge = (0, import_react2.forwardRef)(function Badge2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react2.useRef)(null);
   (0, import_react2.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("lt-breadcrumb", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("lt-badge", { ref: innerRef, ...props, children });
 });
-Breadcrumb.displayName = "Breadcrumb";
+Badge.displayName = "Badge";
 
-// src/components/BreadcrumbItem/BreadcrumbItem.tsx
+// src/components/Breadcrumb/Breadcrumb.tsx
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var BreadcrumbItem = (0, import_react3.forwardRef)(function BreadcrumbItem2({ children, ...props }, forwardedRef) {
+var Breadcrumb = (0, import_react3.forwardRef)(function Breadcrumb2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react3.useRef)(null);
   (0, import_react3.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("lt-breadcrumb-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("lt-breadcrumb", { ref: innerRef, ...props, children });
 });
-BreadcrumbItem.displayName = "BreadcrumbItem";
+Breadcrumb.displayName = "Breadcrumb";
 
-// src/components/Accordion/Accordion.tsx
+// src/components/BreadcrumbItem/BreadcrumbItem.tsx
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Accordion = (0, import_react4.forwardRef)(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
+var BreadcrumbItem = (0, import_react4.forwardRef)(function BreadcrumbItem2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react4.useRef)(null);
   (0, import_react4.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react4.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onToggle) return;
-    const h = (ev) => onToggle(ev);
-    el.addEventListener("toggle", h);
-    return () => el.removeEventListener("toggle", h);
-  }, [onToggle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("lt-accordion", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("lt-breadcrumb-item", { ref: innerRef, ...props, children });
 });
-Accordion.displayName = "Accordion";
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
-// src/components/Badge/Badge.tsx
+// src/components/Button/Button.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Badge = (0, import_react5.forwardRef)(function Badge2({ children, ...props }, forwardedRef) {
+var Button = (0, import_react5.forwardRef)(function Button2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react5.useRef)(null);
   (0, import_react5.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("lt-badge", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("lt-button", { ref: innerRef, ...props, children });
 });
-Badge.displayName = "Badge";
+Button.displayName = "Button";
 
-// src/components/Avatar/Avatar.tsx
+// src/components/Alert/Alert.tsx
 var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Avatar = (0, import_react6.forwardRef)(function Avatar2({ children, ...props }, forwardedRef) {
+var Alert = (0, import_react6.forwardRef)(function Alert2({ onClose, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react6.useRef)(null);
   (0, import_react6.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("lt-avatar", { ref: innerRef, ...props, children });
+  (0, import_react6.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onClose) return;
+    const h = (ev) => onClose(ev);
+    el.addEventListener("close", h);
+    return () => el.removeEventListener("close", h);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("lt-alert", { ref: innerRef, ...props, children });
 });
-Avatar.displayName = "Avatar";
+Alert.displayName = "Alert";
 
 // src/components/Calendar/Calendar.tsx
 var import_react7 = require("react");
@@ -167,54 +160,61 @@ var Calendar = (0, import_react7.forwardRef)(function Calendar2({ onChange, onMo
 });
 Calendar.displayName = "Calendar";
 
-// src/components/Button/Button.tsx
+// src/components/Accordion/Accordion.tsx
 var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Button = (0, import_react8.forwardRef)(function Button2({ children, ...props }, forwardedRef) {
+var Accordion = (0, import_react8.forwardRef)(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react8.useRef)(null);
   (0, import_react8.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("lt-button", { ref: innerRef, ...props, children });
+  (0, import_react8.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onToggle) return;
+    const h = (ev) => onToggle(ev);
+    el.addEventListener("toggle", h);
+    return () => el.removeEventListener("toggle", h);
+  }, [onToggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("lt-accordion", { ref: innerRef, ...props, children });
 });
-Button.displayName = "Button";
+Accordion.displayName = "Accordion";
 
-// src/components/Chip/Chip.tsx
+// src/components/Checkbox/Checkbox.tsx
 var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Chip = (0, import_react9.forwardRef)(function Chip2({ onDelete, children, ...props }, forwardedRef) {
+var Checkbox = (0, import_react9.forwardRef)(function Checkbox2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react9.useRef)(null);
   (0, import_react9.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react9.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onDelete) return;
-    const h = (ev) => onDelete(ev);
-    el.addEventListener("delete", h);
-    return () => el.removeEventListener("delete", h);
-  }, [onDelete]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("lt-chip", { ref: innerRef, ...props, children });
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("lt-checkbox", { ref: innerRef, ...props, children });
 });
-Chip.displayName = "Chip";
+Checkbox.displayName = "Checkbox";
 
-// src/components/ColorInput/ColorInput.tsx
+// src/components/Chip/Chip.tsx
 var import_react10 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var ColorInput = (0, import_react10.forwardRef)(function ColorInput2({ onChange, children, ...props }, forwardedRef) {
+var Chip = (0, import_react10.forwardRef)(function Chip2({ onDelete, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react10.useRef)(null);
   (0, import_react10.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react10.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onChange) return;
-    const h = (ev) => onChange(ev);
-    el.addEventListener("change", h);
-    return () => el.removeEventListener("change", h);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("lt-color-input", { ref: innerRef, ...props, children });
+    if (!el || !onDelete) return;
+    const h = (ev) => onDelete(ev);
+    el.addEventListener("delete", h);
+    return () => el.removeEventListener("delete", h);
+  }, [onDelete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("lt-chip", { ref: innerRef, ...props, children });
 });
-ColorInput.displayName = "ColorInput";
+Chip.displayName = "Chip";
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/ColorInput/ColorInput.tsx
 var import_react11 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Checkbox = (0, import_react11.forwardRef)(function Checkbox2({ onChange, children, ...props }, forwardedRef) {
+var ColorInput = (0, import_react11.forwardRef)(function ColorInput2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react11.useRef)(null);
   (0, import_react11.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react11.useEffect)(() => {
@@ -224,9 +224,9 @@ var Checkbox = (0, import_react11.forwardRef)(function Checkbox2({ onChange, chi
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("lt-checkbox", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("lt-color-input", { ref: innerRef, ...props, children });
 });
-Checkbox.displayName = "Checkbox";
+ColorInput.displayName = "ColorInput";
 
 // src/components/Combobox/Combobox.tsx
 var import_react12 = require("react");
@@ -289,7 +289,7 @@ Datepicker.displayName = "Datepicker";
 // src/components/Dialog/Dialog.tsx
 var import_react15 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Dialog = (0, import_react15.forwardRef)(function Dialog2({ onDialogOpen, onDialogClose, children, ...props }, forwardedRef) {
+var Dialog = (0, import_react15.forwardRef)(function Dialog2({ onDialogOpen, onClose, onDialogClose, onOpen, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react15.useRef)(null);
   (0, import_react15.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react15.useEffect)(() => {
@@ -299,6 +299,13 @@ var Dialog = (0, import_react15.forwardRef)(function Dialog2({ onDialogOpen, onD
     el.addEventListener("dialog-open", h);
     return () => el.removeEventListener("dialog-open", h);
   }, [onDialogOpen]);
+  (0, import_react15.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onClose) return;
+    const h = (ev) => onClose(ev);
+    el.addEventListener("close", h);
+    return () => el.removeEventListener("close", h);
+  }, [onClose]);
   (0, import_react15.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onDialogClose) return;
@@ -306,75 +313,82 @@ var Dialog = (0, import_react15.forwardRef)(function Dialog2({ onDialogOpen, onD
     el.addEventListener("dialog-close", h);
     return () => el.removeEventListener("dialog-close", h);
   }, [onDialogClose]);
+  (0, import_react15.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onOpen) return;
+    const h = (ev) => onOpen(ev);
+    el.addEventListener("open", h);
+    return () => el.removeEventListener("open", h);
+  }, [onOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("lt-dialog", { ref: innerRef, ...props, children });
 });
 Dialog.displayName = "Dialog";
 
-// src/components/DropdownItem/DropdownItem.tsx
+// src/components/Divider/Divider.tsx
 var import_react16 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var DropdownItem = (0, import_react16.forwardRef)(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+var Divider = (0, import_react16.forwardRef)(function Divider2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react16.useRef)(null);
   (0, import_react16.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react16.useEffect)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("lt-divider", { ref: innerRef, ...props, children });
+});
+Divider.displayName = "Divider";
+
+// src/components/DropdownItem/DropdownItem.tsx
+var import_react17 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DropdownItem = (0, import_react17.forwardRef)(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react17.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onSelect) return;
     const h = (ev) => onSelect(ev);
     el.addEventListener("select", h);
     return () => el.removeEventListener("select", h);
   }, [onSelect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("lt-dropdown-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("lt-dropdown-item", { ref: innerRef, ...props, children });
 });
 DropdownItem.displayName = "DropdownItem";
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react17 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Dropdown = (0, import_react17.forwardRef)(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react17.useEffect)(() => {
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Dropdown = (0, import_react18.forwardRef)(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react18.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onOpen) return;
     const h = (ev) => onOpen(ev);
     el.addEventListener("open", h);
     return () => el.removeEventListener("open", h);
   }, [onOpen]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("lt-dropdown", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("lt-dropdown", { ref: innerRef, ...props, children });
 });
 Dropdown.displayName = "Dropdown";
 
 // src/components/Header/Header.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Header = (0, import_react18.forwardRef)(function Header2({ background, before, logo, after, children }, forwardedRef) {
-  const innerRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("lt-header", { ref: innerRef, background, children: [
-    before && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { slot: "before", children: before }),
-    logo && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { slot: "logo", children: logo }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { slot: "content", children }),
-    after && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { slot: "after", children: after })
-  ] });
-});
-Header.displayName = "Header";
-
-// src/components/Image/Image.tsx
 var import_react19 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Image = (0, import_react19.forwardRef)(function Image2({ children, ...props }, forwardedRef) {
+var Header = (0, import_react19.forwardRef)(function Header2({ background, before, logo, after, children }, forwardedRef) {
   const innerRef = (0, import_react19.useRef)(null);
   (0, import_react19.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("lt-image", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("lt-header", { ref: innerRef, background, children: [
+    before && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { slot: "before", children: before }),
+    logo && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { slot: "logo", children: logo }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { slot: "content", children }),
+    after && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { slot: "after", children: after })
+  ] });
 });
-Image.displayName = "Image";
+Header.displayName = "Header";
 
 // src/components/IconButton/IconButton.tsx
 var import_react20 = require("react");
@@ -386,15 +400,15 @@ var IconButton = (0, import_react20.forwardRef)(function IconButton2({ children,
 });
 IconButton.displayName = "IconButton";
 
-// src/components/Divider/Divider.tsx
+// src/components/Image/Image.tsx
 var import_react21 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Divider = (0, import_react21.forwardRef)(function Divider2({ children, ...props }, forwardedRef) {
+var Image = (0, import_react21.forwardRef)(function Image2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react21.useRef)(null);
   (0, import_react21.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("lt-divider", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("lt-image", { ref: innerRef, ...props, children });
 });
-Divider.displayName = "Divider";
+Image.displayName = "Image";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
@@ -426,50 +440,44 @@ var List = (0, import_react24.forwardRef)(function List2({ children, ...props },
 });
 List.displayName = "List";
 
-// src/components/NavItem/NavItem.tsx
+// src/components/Pagination/Pagination.tsx
 var import_react25 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var NavItem = (0, import_react25.forwardRef)(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
+var Pagination = (0, import_react25.forwardRef)(function Pagination2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react25.useRef)(null);
   (0, import_react25.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react25.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onNavItemClick) return;
-    const h = (ev) => onNavItemClick(ev);
-    el.addEventListener("nav-item-click", h);
-    return () => el.removeEventListener("nav-item-click", h);
-  }, [onNavItemClick]);
-  (0, import_react25.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onNavCollapse) return;
-    const h = (ev) => onNavCollapse(ev);
-    el.addEventListener("nav-collapse", h);
-    return () => el.removeEventListener("nav-collapse", h);
-  }, [onNavCollapse]);
-  (0, import_react25.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el) return;
-    if (iconStart) el.setAttribute("icon-start", iconStart);
-    else el.removeAttribute("icon-start");
-  }, [iconStart]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lt-nav-item", { ref: innerRef, ...props, children });
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lt-pagination", { ref: innerRef, ...props, children });
 });
-NavItem.displayName = "NavItem";
+Pagination.displayName = "Pagination";
 
-// src/components/Nav/Nav.tsx
+// src/components/Radio/Radio.tsx
 var import_react26 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Nav = (0, import_react26.forwardRef)(function Nav2({ children, ...props }, forwardedRef) {
+var Radio = (0, import_react26.forwardRef)(function Radio2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react26.useRef)(null);
   (0, import_react26.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lt-nav", { ref: innerRef, ...props, children });
+  (0, import_react26.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lt-radio", { ref: innerRef, ...props, children });
 });
-Nav.displayName = "Nav";
+Radio.displayName = "Radio";
 
-// src/components/Pagination/Pagination.tsx
+// src/components/RadioGroup/RadioGroup.tsx
 var import_react27 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Pagination = (0, import_react27.forwardRef)(function Pagination2({ onChange, children, ...props }, forwardedRef) {
+var RadioGroup = (0, import_react27.forwardRef)(function RadioGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react27.useRef)(null);
   (0, import_react27.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react27.useEffect)(() => {
@@ -479,14 +487,14 @@ var Pagination = (0, import_react27.forwardRef)(function Pagination2({ onChange,
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("lt-pagination", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("lt-radio-group", { ref: innerRef, ...props, children });
 });
-Pagination.displayName = "Pagination";
+RadioGroup.displayName = "RadioGroup";
 
-// src/components/Radio/Radio.tsx
+// src/components/Select/Select.tsx
 var import_react28 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Radio = (0, import_react28.forwardRef)(function Radio2({ onChange, children, ...props }, forwardedRef) {
+var Select = (0, import_react28.forwardRef)(function Select2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react28.useRef)(null);
   (0, import_react28.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react28.useEffect)(() => {
@@ -496,131 +504,123 @@ var Radio = (0, import_react28.forwardRef)(function Radio2({ onChange, children,
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("lt-radio", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("lt-select", { ref: innerRef, ...props, children });
 });
-Radio.displayName = "Radio";
+Select.displayName = "Select";
 
-// src/components/Progress/Progress.tsx
+// src/components/SidePanel/SidePanel.tsx
 var import_react29 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Progress = (0, import_react29.forwardRef)(function Progress2({ children, ...props }, forwardedRef) {
+var SidePanel = (0, import_react29.forwardRef)(function SidePanel2({ onClose, noCloseButton, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react29.useRef)(null);
   (0, import_react29.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("lt-progress", { ref: innerRef, ...props, children });
+  (0, import_react29.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onClose) return;
+    const h = (ev) => onClose(ev);
+    el.addEventListener("close", h);
+    return () => el.removeEventListener("close", h);
+  }, [onClose]);
+  (0, import_react29.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (noCloseButton) el.setAttribute("no-close-button", "");
+    else el.removeAttribute("no-close-button");
+  }, [noCloseButton]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("lt-sidepanel", { ref: innerRef, ...props, children });
 });
-Progress.displayName = "Progress";
+SidePanel.displayName = "SidePanel";
 
-// src/components/Select/Select.tsx
+// src/components/NavItem/NavItem.tsx
 var import_react30 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Select = (0, import_react30.forwardRef)(function Select2({ onChange, children, ...props }, forwardedRef) {
+var NavItem = (0, import_react30.forwardRef)(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react30.useRef)(null);
   (0, import_react30.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react30.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onChange) return;
-    const h = (ev) => onChange(ev);
-    el.addEventListener("change", h);
-    return () => el.removeEventListener("change", h);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("lt-select", { ref: innerRef, ...props, children });
+    if (!el || !onNavItemClick) return;
+    const h = (ev) => onNavItemClick(ev);
+    el.addEventListener("nav-item-click", h);
+    return () => el.removeEventListener("nav-item-click", h);
+  }, [onNavItemClick]);
+  (0, import_react30.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onNavCollapse) return;
+    const h = (ev) => onNavCollapse(ev);
+    el.addEventListener("nav-collapse", h);
+    return () => el.removeEventListener("nav-collapse", h);
+  }, [onNavCollapse]);
+  (0, import_react30.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (iconStart) el.setAttribute("icon-start", iconStart);
+    else el.removeAttribute("icon-start");
+  }, [iconStart]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("lt-nav-item", { ref: innerRef, ...props, children });
 });
-Select.displayName = "Select";
+NavItem.displayName = "NavItem";
 
-// src/components/RadioGroup/RadioGroup.tsx
+// src/components/Nav/Nav.tsx
 var import_react31 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react31.forwardRef)(function RadioGroup2({ onChange, children, ...props }, forwardedRef) {
+var Nav = (0, import_react31.forwardRef)(function Nav2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react31.useRef)(null);
   (0, import_react31.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react31.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onChange) return;
-    const h = (ev) => onChange(ev);
-    el.addEventListener("change", h);
-    return () => el.removeEventListener("change", h);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("lt-radio-group", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("lt-nav", { ref: innerRef, ...props, children });
 });
-RadioGroup.displayName = "RadioGroup";
+Nav.displayName = "Nav";
 
-// src/components/Skeleton/Skeleton.tsx
+// src/components/Progress/Progress.tsx
 var import_react32 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Skeleton = (0, import_react32.forwardRef)(function Skeleton2({ children, ...props }, forwardedRef) {
+var Progress = (0, import_react32.forwardRef)(function Progress2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react32.useRef)(null);
   (0, import_react32.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("lt-skeleton", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("lt-progress", { ref: innerRef, ...props, children });
 });
-Skeleton.displayName = "Skeleton";
+Progress.displayName = "Progress";
 
-// src/components/SidePanel/SidePanel.tsx
+// src/components/Skeleton/Skeleton.tsx
 var import_react33 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var SidePanel = (0, import_react33.forwardRef)(function SidePanel2({ onClose, noCloseButton, children, ...props }, forwardedRef) {
+var Skeleton = (0, import_react33.forwardRef)(function Skeleton2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react33.useRef)(null);
   (0, import_react33.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react33.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onClose) return;
-    const h = (ev) => onClose(ev);
-    el.addEventListener("close", h);
-    return () => el.removeEventListener("close", h);
-  }, [onClose]);
-  (0, import_react33.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el) return;
-    if (noCloseButton) el.setAttribute("no-close-button", "");
-    else el.removeAttribute("no-close-button");
-  }, [noCloseButton]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("lt-sidepanel", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("lt-skeleton", { ref: innerRef, ...props, children });
 });
-SidePanel.displayName = "SidePanel";
+Skeleton.displayName = "Skeleton";
 
-// src/components/Snackbar/Snackbar.tsx
+// src/components/Slider/Slider.tsx
 var import_react34 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Snackbar = (0, import_react34.forwardRef)(function Snackbar2({ onShow, onHide, onAction, children, ...props }, forwardedRef) {
+var Slider = (0, import_react34.forwardRef)(function Slider2({ onInput, onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react34.useRef)(null);
   (0, import_react34.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react34.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onShow) return;
-    const h = (ev) => onShow(ev);
-    el.addEventListener("show", h);
-    return () => el.removeEventListener("show", h);
-  }, [onShow]);
-  (0, import_react34.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onHide) return;
-    const h = (ev) => onHide(ev);
-    el.addEventListener("hide", h);
-    return () => el.removeEventListener("hide", h);
-  }, [onHide]);
+    if (!el || !onInput) return;
+    const h = (ev) => onInput(ev);
+    el.addEventListener("input", h);
+    return () => el.removeEventListener("input", h);
+  }, [onInput]);
   (0, import_react34.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onAction) return;
-    const h = (ev) => onAction(ev);
-    el.addEventListener("action", h);
-    return () => el.removeEventListener("action", h);
-  }, [onAction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("lt-snackbar", { ref: innerRef, ...props, children });
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("lt-slider", { ref: innerRef, ...props, children });
 });
-Snackbar.displayName = "Snackbar";
+Slider.displayName = "Slider";
 
-// src/components/Slider/Slider.tsx
+// src/components/Switch/Switch.tsx
 var import_react35 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Slider = (0, import_react35.forwardRef)(function Slider2({ onInput, onChange, children, ...props }, forwardedRef) {
+var Switch = (0, import_react35.forwardRef)(function Switch2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react35.useRef)(null);
   (0, import_react35.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react35.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onInput) return;
-    const h = (ev) => onInput(ev);
-    el.addEventListener("input", h);
-    return () => el.removeEventListener("input", h);
-  }, [onInput]);
   (0, import_react35.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
@@ -628,90 +628,104 @@ var Slider = (0, import_react35.forwardRef)(function Slider2({ onInput, onChange
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("lt-slider", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("lt-switch", { ref: innerRef, ...props, children });
 });
-Slider.displayName = "Slider";
+Switch.displayName = "Switch";
 
-// src/components/Spinner/Spinner.tsx
+// src/components/Snackbar/Snackbar.tsx
 var import_react36 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Spinner = (0, import_react36.forwardRef)(function Spinner2({ children, ...props }, forwardedRef) {
+var Snackbar = (0, import_react36.forwardRef)(function Snackbar2({ onShow, onHide, onAction, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react36.useRef)(null);
   (0, import_react36.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("lt-spinner", { ref: innerRef, ...props, children });
+  (0, import_react36.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onShow) return;
+    const h = (ev) => onShow(ev);
+    el.addEventListener("show", h);
+    return () => el.removeEventListener("show", h);
+  }, [onShow]);
+  (0, import_react36.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onHide) return;
+    const h = (ev) => onHide(ev);
+    el.addEventListener("hide", h);
+    return () => el.removeEventListener("hide", h);
+  }, [onHide]);
+  (0, import_react36.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onAction) return;
+    const h = (ev) => onAction(ev);
+    el.addEventListener("action", h);
+    return () => el.removeEventListener("action", h);
+  }, [onAction]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("lt-snackbar", { ref: innerRef, ...props, children });
 });
-Spinner.displayName = "Spinner";
+Snackbar.displayName = "Snackbar";
 
-// src/components/Switch/Switch.tsx
+// src/components/TabPanel/TabPanel.tsx
 var import_react37 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Switch = (0, import_react37.forwardRef)(function Switch2({ onChange, children, ...props }, forwardedRef) {
+var TabPanel = (0, import_react37.forwardRef)(function TabPanel2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react37.useRef)(null);
   (0, import_react37.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react37.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onChange) return;
-    const h = (ev) => onChange(ev);
-    el.addEventListener("change", h);
-    return () => el.removeEventListener("change", h);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("lt-switch", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("lt-tab-panel", { ref: innerRef, ...props, children });
 });
-Switch.displayName = "Switch";
+TabPanel.displayName = "TabPanel";
 
-// src/components/Surface/Surface.tsx
+// src/components/Tab/Tab.tsx
 var import_react38 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Surface = (0, import_react38.forwardRef)(function Surface2({ children, ...props }, forwardedRef) {
+var Tab = (0, import_react38.forwardRef)(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react38.useRef)(null);
   (0, import_react38.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("lt-surface", { ref: innerRef, ...props, children });
+  (0, import_react38.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onTabClick) return;
+    const h = (ev) => onTabClick(ev);
+    el.addEventListener("tab-click", h);
+    return () => el.removeEventListener("tab-click", h);
+  }, [onTabClick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("lt-tab", { ref: innerRef, ...props, children });
 });
-Surface.displayName = "Surface";
+Tab.displayName = "Tab";
 
-// src/components/TabGroup/TabGroup.tsx
+// src/components/Surface/Surface.tsx
 var import_react39 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var TabGroup = (0, import_react39.forwardRef)(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
+var Surface = (0, import_react39.forwardRef)(function Surface2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react39.useRef)(null);
   (0, import_react39.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react39.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onChange) return;
-    const h = (ev) => onChange(ev);
-    el.addEventListener("change", h);
-    return () => el.removeEventListener("change", h);
-  }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("lt-tab-group", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("lt-surface", { ref: innerRef, ...props, children });
 });
-TabGroup.displayName = "TabGroup";
+Surface.displayName = "Surface";
 
-// src/components/TabPanel/TabPanel.tsx
+// src/components/Spinner/Spinner.tsx
 var import_react40 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var TabPanel = (0, import_react40.forwardRef)(function TabPanel2({ children, ...props }, forwardedRef) {
+var Spinner = (0, import_react40.forwardRef)(function Spinner2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react40.useRef)(null);
   (0, import_react40.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("lt-tab-panel", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("lt-spinner", { ref: innerRef, ...props, children });
 });
-TabPanel.displayName = "TabPanel";
+Spinner.displayName = "Spinner";
 
-// src/components/Tab/Tab.tsx
+// src/components/TabGroup/TabGroup.tsx
 var import_react41 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var Tab = (0, import_react41.forwardRef)(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
+var TabGroup = (0, import_react41.forwardRef)(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react41.useRef)(null);
   (0, import_react41.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react41.useEffect)(() => {
     const el = innerRef.current;
-    if (!el || !onTabClick) return;
-    const h = (ev) => onTabClick(ev);
-    el.addEventListener("tab-click", h);
-    return () => el.removeEventListener("tab-click", h);
-  }, [onTabClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("lt-tab", { ref: innerRef, ...props, children });
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("lt-tab-group", { ref: innerRef, ...props, children });
 });
-Tab.displayName = "Tab";
+TabGroup.displayName = "TabGroup";
 
 // src/components/Table/Table.tsx
 var import_react42 = require("react");