@latty-ds/react 0.2.0

package/dist/index.cjs

@@ -0,0 +1,823 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
+  BreadcrumbItem: () => BreadcrumbItem,
+  Button: () => Button,
+  Calendar: () => Calendar,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  ColorInput: () => ColorInput,
+  Combobox: () => Combobox,
+  DateInput: () => DateInput,
+  Datepicker: () => Datepicker,
+  Dialog: () => Dialog,
+  Divider: () => Divider,
+  Dropdown: () => Dropdown,
+  DropdownItem: () => DropdownItem,
+  Header: () => Header,
+  IconButton: () => IconButton,
+  Image: () => Image,
+  Link: () => Link,
+  List: () => List,
+  ListItem: () => ListItem,
+  Nav: () => Nav,
+  NavItem: () => NavItem,
+  Pagination: () => Pagination,
+  Progress: () => Progress,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  Select: () => Select,
+  SidePanel: () => SidePanel,
+  Skeleton: () => Skeleton,
+  Slider: () => Slider,
+  Snackbar: () => Snackbar,
+  Spinner: () => Spinner,
+  Surface: () => Surface,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  TabGroup: () => TabGroup,
+  TabPanel: () => TabPanel,
+  Table: () => Table,
+  Text: () => Text,
+  Textfield: () => Textfield,
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(index_exports);
+var import_web = require("@latty-ds/web");
+
+// src/components/Alert/Alert.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) {
+  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 });
+});
+Alert.displayName = "Alert";
+
+// src/components/Breadcrumb/Breadcrumb.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) {
+  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 });
+});
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/BreadcrumbItem/BreadcrumbItem.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) {
+  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 });
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/Accordion/Accordion.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) {
+  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 });
+});
+Accordion.displayName = "Accordion";
+
+// src/components/Badge/Badge.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) {
+  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 });
+});
+Badge.displayName = "Badge";
+
+// src/components/Avatar/Avatar.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) {
+  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 });
+});
+Avatar.displayName = "Avatar";
+
+// src/components/Calendar/Calendar.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Calendar = (0, import_react7.forwardRef)(function Calendar2({ onChange, onMonthChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react7.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  (0, import_react7.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onMonthChange) return;
+    const h = (ev) => onMonthChange(ev);
+    el.addEventListener("month-change", h);
+    return () => el.removeEventListener("month-change", h);
+  }, [onMonthChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("lt-calendar", { ref: innerRef, ...props, children });
+});
+Calendar.displayName = "Calendar";
+
+// src/components/Button/Button.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) {
+  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 });
+});
+Button.displayName = "Button";
+
+// src/components/Chip/Chip.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) {
+  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 });
+});
+Chip.displayName = "Chip";
+
+// src/components/ColorInput/ColorInput.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) {
+  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 });
+});
+ColorInput.displayName = "ColorInput";
+
+// src/components/Checkbox/Checkbox.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) {
+  const innerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react11.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_runtime11.jsx)("lt-checkbox", { ref: innerRef, ...props, children });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/Combobox/Combobox.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Combobox = (0, import_react12.forwardRef)(function Combobox2({ onChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react12.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_runtime12.jsx)("lt-combobox", { ref: innerRef, ...props, children });
+});
+Combobox.displayName = "Combobox";
+
+// src/components/DateInput/DateInput.tsx
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DateInput = (0, import_react13.forwardRef)(function DateInput2({ onChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react13.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_runtime13.jsx)("lt-date-input", { ref: innerRef, ...props, children });
+});
+DateInput.displayName = "DateInput";
+
+// src/components/Datepicker/Datepicker.tsx
+var import_react14 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Datepicker = (0, import_react14.forwardRef)(function Datepicker2({ onChange, onInput, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react14.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onChange) return;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  (0, import_react14.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onInput) return;
+    const h = (ev) => onInput(ev);
+    el.addEventListener("input", h);
+    return () => el.removeEventListener("input", h);
+  }, [onInput]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("lt-datepicker", { ref: innerRef, ...props, children });
+});
+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) {
+  const innerRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react15.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onDialogOpen) return;
+    const h = (ev) => onDialogOpen(ev);
+    el.addEventListener("dialog-open", h);
+    return () => el.removeEventListener("dialog-open", h);
+  }, [onDialogOpen]);
+  (0, import_react15.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onDialogClose) return;
+    const h = (ev) => onDialogClose(ev);
+    el.addEventListener("dialog-close", h);
+    return () => el.removeEventListener("dialog-close", h);
+  }, [onDialogClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("lt-dialog", { ref: innerRef, ...props, children });
+});
+Dialog.displayName = "Dialog";
+
+// src/components/DropdownItem/DropdownItem.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) {
+  const innerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react16.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 });
+});
+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)(() => {
+    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)(() => {
+    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 });
+});
+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) {
+  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 });
+});
+Image.displayName = "Image";
+
+// src/components/IconButton/IconButton.tsx
+var import_react20 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var IconButton = (0, import_react20.forwardRef)(function IconButton2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("lt-icon-button", { ref: innerRef, ...props, children });
+});
+IconButton.displayName = "IconButton";
+
+// src/components/Divider/Divider.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) {
+  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 });
+});
+Divider.displayName = "Divider";
+
+// src/components/Link/Link.tsx
+var import_react22 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Link = (0, import_react22.forwardRef)(function Link2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("lt-link", { ref: innerRef, ...props, children });
+});
+Link.displayName = "Link";
+
+// src/components/ListItem/ListItem.tsx
+var import_react23 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ListItem = (0, import_react23.forwardRef)(function ListItem2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("lt-list-item", { ref: innerRef, ...props, children });
+});
+ListItem.displayName = "ListItem";
+
+// src/components/List/List.tsx
+var import_react24 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var List = (0, import_react24.forwardRef)(function List2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("lt-list", { ref: innerRef, ...props, children });
+});
+List.displayName = "List";
+
+// src/components/NavItem/NavItem.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) {
+  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 });
+});
+NavItem.displayName = "NavItem";
+
+// src/components/Nav/Nav.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) {
+  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 });
+});
+Nav.displayName = "Nav";
+
+// src/components/Pagination/Pagination.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) {
+  const innerRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react27.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_runtime27.jsx)("lt-pagination", { ref: innerRef, ...props, children });
+});
+Pagination.displayName = "Pagination";
+
+// src/components/Radio/Radio.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) {
+  const innerRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react28.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_runtime28.jsx)("lt-radio", { ref: innerRef, ...props, children });
+});
+Radio.displayName = "Radio";
+
+// src/components/Progress/Progress.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) {
+  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 });
+});
+Progress.displayName = "Progress";
+
+// src/components/Select/Select.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) {
+  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 });
+});
+Select.displayName = "Select";
+
+// src/components/RadioGroup/RadioGroup.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) {
+  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 });
+});
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Skeleton/Skeleton.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) {
+  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 });
+});
+Skeleton.displayName = "Skeleton";
+
+// src/components/SidePanel/SidePanel.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) {
+  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 });
+});
+SidePanel.displayName = "SidePanel";
+
+// src/components/Snackbar/Snackbar.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) {
+  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]);
+  (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 });
+});
+Snackbar.displayName = "Snackbar";
+
+// src/components/Slider/Slider.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) {
+  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;
+    const h = (ev) => onChange(ev);
+    el.addEventListener("change", h);
+    return () => el.removeEventListener("change", h);
+  }, [onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("lt-slider", { ref: innerRef, ...props, children });
+});
+Slider.displayName = "Slider";
+
+// src/components/Spinner/Spinner.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) {
+  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 });
+});
+Spinner.displayName = "Spinner";
+
+// src/components/Switch/Switch.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) {
+  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 });
+});
+Switch.displayName = "Switch";
+
+// src/components/Surface/Surface.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) {
+  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 });
+});
+Surface.displayName = "Surface";
+
+// src/components/TabGroup/TabGroup.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) {
+  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 });
+});
+TabGroup.displayName = "TabGroup";
+
+// src/components/TabPanel/TabPanel.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) {
+  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 });
+});
+TabPanel.displayName = "TabPanel";
+
+// src/components/Tab/Tab.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) {
+  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 });
+});
+Tab.displayName = "Tab";
+
+// src/components/Table/Table.tsx
+var import_react42 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Table = (0, import_react42.forwardRef)(function Table2({ onSortChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react42.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onSortChange) return;
+    const h = (ev) => onSortChange(ev);
+    el.addEventListener("sort-change", h);
+    return () => el.removeEventListener("sort-change", h);
+  }, [onSortChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("lt-table", { ref: innerRef, ...props, children });
+});
+Table.displayName = "Table";
+
+// src/components/Text/Text.tsx
+var import_react43 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Text = (0, import_react43.forwardRef)(function Text2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("lt-text", { ref: innerRef, ...props, children });
+});
+Text.displayName = "Text";
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react44 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Tooltip = (0, import_react44.forwardRef)(function Tooltip2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react44.useRef)(null);
+  (0, import_react44.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("lt-tooltip", { ref: innerRef, ...props, children });
+});
+Tooltip.displayName = "Tooltip";
+
+// src/components/Textfield/Textfield.tsx
+var import_react45 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Textfield = (0, import_react45.forwardRef)(function Textfield2({ onInput, onChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react45.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_react45.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_runtime45.jsx)("lt-textfield", { ref: innerRef, ...props, children });
+});
+Textfield.displayName = "Textfield";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Calendar,
+  Checkbox,
+  Chip,
+  ColorInput,
+  Combobox,
+  DateInput,
+  Datepicker,
+  Dialog,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  Header,
+  IconButton,
+  Image,
+  Link,
+  List,
+  ListItem,
+  Nav,
+  NavItem,
+  Pagination,
+  Progress,
+  Radio,
+  RadioGroup,
+  Select,
+  SidePanel,
+  Skeleton,
+  Slider,
+  Snackbar,
+  Spinner,
+  Surface,
+  Switch,
+  Tab,
+  TabGroup,
+  TabPanel,
+  Table,
+  Text,
+  Textfield,
+  Tooltip
+});