@kittl/ui-react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,510 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Accordion: () => Accordion,
+  AccordionItem: () => AccordionItem,
+  AccordionItemContent: () => AccordionItemContent,
+  AccordionItemTrigger: () => AccordionItemTrigger,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Header: () => Header,
+  Icon: () => Icon,
+  Image: () => Image,
+  Input: () => Input,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MenuTrigger: () => MenuTrigger,
+  Popover: () => Popover,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  ScrollableArea: () => ScrollableArea,
+  SearchInput: () => SearchInput,
+  Spinner: () => Spinner,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsTrigger: () => TabsTrigger,
+  Tag: () => Tag,
+  Text: () => Text,
+  Toast: () => Toast,
+  ToastContainer: () => ToastContainer,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Accordion.ts
+var import_ui = require("@kittl/ui");
+var import_react = require("@lit/react");
+var React = __toESM(require("react"), 1);
+var Accordion = (0, import_react.createComponent)({
+  tagName: import_ui.ACCORDION_COMPONENT_NAME,
+  elementClass: import_ui.Accordion,
+  react: React,
+  displayName: "KittlAccordion"
+});
+
+// src/components/AccordionItem.ts
+var import_ui2 = require("@kittl/ui");
+var import_react2 = require("@lit/react");
+var React2 = __toESM(require("react"), 1);
+var AccordionItem = (0, import_react2.createComponent)({
+  tagName: import_ui2.ACCORDION_ITEM_COMPONENT_NAME,
+  elementClass: import_ui2.AccordionItem,
+  react: React2,
+  displayName: "KittlAccordionItem",
+  events: {
+    onAccordionToggle: "accordion-toggle"
+  }
+});
+
+// src/components/AccordionItemContent.ts
+var import_ui3 = require("@kittl/ui");
+var import_react3 = require("@lit/react");
+var React3 = __toESM(require("react"), 1);
+var AccordionItemContent = (0, import_react3.createComponent)({
+  tagName: import_ui3.ACCORDION_ITEM_CONTENT_COMPONENT_NAME,
+  elementClass: import_ui3.AccordionItemContent,
+  react: React3,
+  displayName: "KittlAccordionItemContent"
+});
+
+// src/components/AccordionItemTrigger.ts
+var import_ui4 = require("@kittl/ui");
+var import_react4 = require("@lit/react");
+var React4 = __toESM(require("react"), 1);
+var AccordionItemTrigger = (0, import_react4.createComponent)({
+  tagName: import_ui4.ACCORDION_ITEM_TRIGGER_COMPONENT_NAME,
+  elementClass: import_ui4.AccordionItemTrigger,
+  react: React4,
+  displayName: "KittlAccordionItemTrigger"
+});
+
+// src/components/Avatar.ts
+var import_ui5 = require("@kittl/ui");
+var import_react5 = require("@lit/react");
+var React5 = __toESM(require("react"), 1);
+var Avatar = (0, import_react5.createComponent)({
+  tagName: import_ui5.AVATAR_COMPONENT_NAME,
+  elementClass: import_ui5.Avatar,
+  react: React5,
+  displayName: "KittlAvatar"
+});
+
+// src/components/Badge.ts
+var import_ui6 = require("@kittl/ui");
+var import_react6 = require("@lit/react");
+var React6 = __toESM(require("react"), 1);
+var Badge = (0, import_react6.createComponent)({
+  tagName: import_ui6.BADGE_COMPONENT_NAME,
+  elementClass: import_ui6.Badge,
+  react: React6,
+  displayName: "KittlBadge"
+});
+
+// src/components/Button.ts
+var import_ui7 = require("@kittl/ui");
+var import_react7 = require("@lit/react");
+var React7 = __toESM(require("react"), 1);
+var Button = (0, import_react7.createComponent)({
+  tagName: import_ui7.BUTTON_COMPONENT_NAME,
+  elementClass: import_ui7.Button,
+  react: React7,
+  displayName: "KittlButton"
+});
+
+// src/components/Card.ts
+var import_ui8 = require("@kittl/ui");
+var import_react8 = require("@lit/react");
+var React8 = __toESM(require("react"), 1);
+var Card = (0, import_react8.createComponent)({
+  tagName: import_ui8.CARD_COMPONENT_NAME,
+  elementClass: import_ui8.Card,
+  react: React8,
+  displayName: "KittlCard",
+  events: {
+    onCardClick: "card-click"
+  }
+});
+
+// src/components/Header.ts
+var import_ui9 = require("@kittl/ui");
+var import_react9 = require("@lit/react");
+var React9 = __toESM(require("react"), 1);
+var Header = (0, import_react9.createComponent)({
+  tagName: import_ui9.HEADER_COMPONENT_NAME,
+  elementClass: import_ui9.Header,
+  react: React9,
+  displayName: "KittlHeader",
+  events: {
+    onMenuItemSelect: "menu-item-select"
+  }
+});
+
+// src/components/Icon.ts
+var import_ui10 = require("@kittl/ui");
+var import_react10 = require("@lit/react");
+var React10 = __toESM(require("react"), 1);
+var Icon = (0, import_react10.createComponent)({
+  tagName: import_ui10.ICON_COMPONENT_NAME,
+  elementClass: import_ui10.Icon,
+  react: React10,
+  displayName: "KittlIcon"
+});
+
+// src/components/Image.ts
+var import_ui11 = require("@kittl/ui");
+var import_react11 = require("@lit/react");
+var React11 = __toESM(require("react"), 1);
+var Image = (0, import_react11.createComponent)({
+  tagName: import_ui11.IMAGE_COMPONENT_NAME,
+  elementClass: import_ui11.Image,
+  react: React11,
+  displayName: "KittlImage"
+});
+
+// src/components/Input.ts
+var import_ui12 = require("@kittl/ui");
+var import_react12 = require("@lit/react");
+var React12 = __toESM(require("react"), 1);
+var Input = (0, import_react12.createComponent)({
+  tagName: import_ui12.INPUT_COMPONENT_NAME,
+  elementClass: import_ui12.Input,
+  react: React12,
+  displayName: "KittlInput",
+  events: {
+    onChange: "change"
+  }
+});
+
+// src/components/Menu.ts
+var import_ui13 = require("@kittl/ui");
+var import_react13 = require("@lit/react");
+var React13 = __toESM(require("react"), 1);
+var Menu = (0, import_react13.createComponent)({
+  tagName: import_ui13.MENU_COMPONENT_NAME,
+  elementClass: import_ui13.Menu,
+  react: React13,
+  displayName: "KittlMenu",
+  events: {
+    onMenuOpen: "menu-open",
+    onMenuClose: "menu-close"
+  }
+});
+
+// src/components/MenuItem.ts
+var import_ui14 = require("@kittl/ui");
+var import_react14 = require("@lit/react");
+var React14 = __toESM(require("react"), 1);
+var MenuItem = (0, import_react14.createComponent)({
+  tagName: import_ui14.MENU_ITEM_COMPONENT_NAME,
+  elementClass: import_ui14.MenuItem,
+  react: React14,
+  displayName: "KittlMenuItem",
+  events: {
+    onMenuItemSelect: "menu-item-select"
+  }
+});
+
+// src/components/MenuTrigger.ts
+var import_ui15 = require("@kittl/ui");
+var import_react15 = require("@lit/react");
+var React15 = __toESM(require("react"), 1);
+var MenuTrigger = (0, import_react15.createComponent)({
+  tagName: import_ui15.MENU_TRIGGER_COMPONENT_NAME,
+  elementClass: import_ui15.MenuTrigger,
+  react: React15,
+  displayName: "KittlMenuTrigger"
+});
+
+// src/components/Popover.ts
+var import_ui16 = require("@kittl/ui");
+var import_react16 = require("@lit/react");
+var React16 = __toESM(require("react"), 1);
+var Popover = (0, import_react16.createComponent)({
+  tagName: import_ui16.POPOVER_COMPONENT_NAME,
+  elementClass: import_ui16.Popover,
+  react: React16,
+  displayName: "KittlPopover",
+  events: {
+    onPopoverOpen: "popover-open",
+    onPopoverClose: "popover-close"
+  }
+});
+
+// src/components/PopoverContent.ts
+var import_ui17 = require("@kittl/ui");
+var import_react17 = require("@lit/react");
+var React17 = __toESM(require("react"), 1);
+var PopoverContent = (0, import_react17.createComponent)({
+  tagName: import_ui17.POPOVER_CONTENT_COMPONENT_NAME,
+  elementClass: import_ui17.PopoverContent,
+  react: React17,
+  displayName: "KittlPopoverContent"
+});
+
+// src/components/PopoverTrigger.ts
+var import_ui18 = require("@kittl/ui");
+var import_react18 = require("@lit/react");
+var React18 = __toESM(require("react"), 1);
+var PopoverTrigger = (0, import_react18.createComponent)({
+  tagName: import_ui18.POPOVER_TRIGGER_COMPONENT_NAME,
+  elementClass: import_ui18.PopoverTrigger,
+  react: React18,
+  displayName: "KittlPopoverTrigger"
+});
+
+// src/components/ScrollableArea.ts
+var import_ui19 = require("@kittl/ui");
+var import_react19 = require("@lit/react");
+var React19 = __toESM(require("react"), 1);
+var ScrollableArea = (0, import_react19.createComponent)({
+  tagName: import_ui19.SCROLLABLE_AREA_COMPONENT_NAME,
+  elementClass: import_ui19.ScrollableArea,
+  react: React19,
+  displayName: "KittlScrollableArea"
+});
+
+// src/components/SearchInput.ts
+var import_ui20 = require("@kittl/ui");
+var import_react20 = require("@lit/react");
+var React20 = __toESM(require("react"), 1);
+var SearchInput = (0, import_react20.createComponent)({
+  tagName: "kittl-search-input",
+  elementClass: import_ui20.SearchInput,
+  react: React20,
+  displayName: "KittlSearchInput",
+  events: {
+    onChange: "change",
+    onSearch: "search"
+  }
+});
+
+// src/components/Spinner.ts
+var import_ui21 = require("@kittl/ui");
+var import_react21 = require("@lit/react");
+var React21 = __toESM(require("react"), 1);
+var Spinner = (0, import_react21.createComponent)({
+  tagName: import_ui21.SPINNER_COMPONENT_NAME,
+  elementClass: import_ui21.Spinner,
+  react: React21,
+  displayName: "KittlSpinner"
+});
+
+// src/components/Tabs.ts
+var import_ui22 = require("@kittl/ui");
+var import_react22 = require("@lit/react");
+var React22 = __toESM(require("react"), 1);
+var Tabs = (0, import_react22.createComponent)({
+  tagName: import_ui22.TABS_COMPONENT_NAME,
+  elementClass: import_ui22.Tabs,
+  react: React22,
+  displayName: "KittlTabs",
+  events: {
+    onTabsChange: "tabs-change"
+  }
+});
+
+// src/components/TabsContent.ts
+var import_ui23 = require("@kittl/ui");
+var import_react23 = require("@lit/react");
+var React23 = __toESM(require("react"), 1);
+var TabsContent = (0, import_react23.createComponent)({
+  tagName: import_ui23.TABS_CONTENT_COMPONENT_NAME,
+  elementClass: import_ui23.TabsContent,
+  react: React23,
+  displayName: "KittlTabsContent"
+});
+
+// src/components/TabsTrigger.ts
+var import_ui24 = require("@kittl/ui");
+var import_react24 = require("@lit/react");
+var React24 = __toESM(require("react"), 1);
+var TabsTrigger = (0, import_react24.createComponent)({
+  tagName: import_ui24.TABS_TRIGGER_COMPONENT_NAME,
+  elementClass: import_ui24.TabsTrigger,
+  react: React24,
+  displayName: "KittlTabsTrigger",
+  events: {
+    onTabSelect: "tab-select"
+  }
+});
+
+// src/components/Tag.ts
+var import_ui25 = require("@kittl/ui");
+var import_react25 = require("@lit/react");
+var React25 = __toESM(require("react"), 1);
+var Tag = (0, import_react25.createComponent)({
+  tagName: "kittl-tag",
+  elementClass: import_ui25.Tag,
+  react: React25,
+  displayName: "KittlTag",
+  events: {
+    onTagClick: "tag-click"
+  }
+});
+
+// src/components/Text.ts
+var import_ui26 = require("@kittl/ui");
+var import_react26 = require("@lit/react");
+var React26 = __toESM(require("react"), 1);
+var Text = (0, import_react26.createComponent)({
+  tagName: import_ui26.TEXT_COMPONENT_NAME,
+  elementClass: import_ui26.Text,
+  react: React26,
+  displayName: "KittlText"
+});
+
+// src/components/Toast.ts
+var import_ui27 = require("@kittl/ui");
+var import_react27 = require("@lit/react");
+var React27 = __toESM(require("react"), 1);
+var Toast = (0, import_react27.createComponent)({
+  tagName: import_ui27.TOAST_COMPONENT_NAME,
+  elementClass: import_ui27.Toast,
+  react: React27,
+  displayName: "KittlToast",
+  events: {
+    onToastOpen: "toast-open",
+    onToastClose: "toast-close"
+  }
+});
+
+// src/components/ToastContainer.ts
+var import_ui28 = require("@kittl/ui");
+var import_react28 = require("@lit/react");
+var React28 = __toESM(require("react"), 1);
+var ToastContainer = (0, import_react28.createComponent)({
+  tagName: import_ui28.TOAST_CONTAINER_COMPONENT_NAME,
+  elementClass: import_ui28.ToastContainer,
+  react: React28,
+  displayName: "KittlToastContainer"
+});
+
+// src/components/Tooltip.ts
+var import_ui29 = require("@kittl/ui");
+var import_react29 = require("@lit/react");
+var React29 = __toESM(require("react"), 1);
+var Tooltip = (0, import_react29.createComponent)({
+  tagName: import_ui29.TOOLTIP_COMPONENT_NAME,
+  elementClass: import_ui29.Tooltip,
+  react: React29,
+  displayName: "KittlTooltip"
+});
+
+// src/ToastProvider.tsx
+var import_react30 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = (0, import_react30.createContext)(void 0);
+var nextId = 0;
+var toastRefs = /* @__PURE__ */ new Map();
+var ToastRender = ({ toasts, removeToast }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastContainer, { children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Toast,
+  {
+    ref: (el) => {
+      if (el)
+        toastRefs.set(t.id, el);
+    },
+    status: t.status,
+    onToastClose: () => removeToast(t.id),
+    children: t.message
+  },
+  t.id
+)) });
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = (0, import_react30.useState)([]);
+  const showToast = (0, import_react30.useCallback)(
+    (message, status = "error") => {
+      const id = ++nextId;
+      setToasts((prev) => [...prev, { id, message, status }]);
+      requestAnimationFrame(() => {
+        const el = toastRefs.get(id);
+        if (el && "show" in el) {
+          el.show();
+        }
+      });
+    },
+    []
+  );
+  const removeToast = (0, import_react30.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+    toastRefs.delete(id);
+  }, []);
+  const contextValue = (0, import_react30.useMemo)(() => ({ showToast }), [showToast]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastRender, { toasts, removeToast })
+  ] });
+};
+var useToast = () => {
+  const context = (0, import_react30.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Header,
+  Icon,
+  Image,
+  Input,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollableArea,
+  SearchInput,
+  Spinner,
+  Tabs,
+  TabsContent,
+  TabsTrigger,
+  Tag,
+  Text,
+  Toast,
+  ToastContainer,
+  ToastProvider,
+  Tooltip,
+  useToast
+});

package/dist/index.d.cts

@@ -0,0 +1,100 @@
+import * as _lit_react from '@lit/react';
+import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionItemContent as AccordionItemContent$1, AccordionItemTrigger as AccordionItemTrigger$1, Avatar as Avatar$1, Badge as Badge$1, Button as Button$1, Card as Card$1, Header as Header$1, Icon as Icon$1, Image as Image$1, Input as Input$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger as MenuTrigger$1, Popover as Popover$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, ScrollableArea as ScrollableArea$1, SearchInput as SearchInput$1, Spinner as Spinner$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, Tag as Tag$1, Text as Text$1, Toast as Toast$1, ToastContainer as ToastContainer$1, Tooltip as Tooltip$1 } from '@kittl/ui';
+import { FC, ReactNode } from 'react';
+
+declare const Accordion: _lit_react.ReactWebComponent<Accordion$1, {}>;
+
+declare const AccordionItem: _lit_react.ReactWebComponent<AccordionItem$1, {
+    onAccordionToggle: string;
+}>;
+
+declare const AccordionItemContent: _lit_react.ReactWebComponent<AccordionItemContent$1, {}>;
+
+declare const AccordionItemTrigger: _lit_react.ReactWebComponent<AccordionItemTrigger$1, {}>;
+
+declare const Avatar: _lit_react.ReactWebComponent<Avatar$1, {}>;
+
+declare const Badge: _lit_react.ReactWebComponent<Badge$1, {}>;
+
+declare const Button: _lit_react.ReactWebComponent<Button$1, {}>;
+
+declare const Card: _lit_react.ReactWebComponent<Card$1, {
+    onCardClick: string;
+}>;
+
+declare const Header: _lit_react.ReactWebComponent<Header$1, {
+    onMenuItemSelect: string;
+}>;
+
+declare const Icon: _lit_react.ReactWebComponent<Icon$1, {}>;
+
+declare const Image: _lit_react.ReactWebComponent<Image$1, {}>;
+
+declare const Input: _lit_react.ReactWebComponent<Input$1, {
+    onChange: string;
+}>;
+
+declare const Menu: _lit_react.ReactWebComponent<Menu$1, {
+    onMenuOpen: string;
+    onMenuClose: string;
+}>;
+
+declare const MenuItem: _lit_react.ReactWebComponent<MenuItem$1, {
+    onMenuItemSelect: string;
+}>;
+
+declare const MenuTrigger: _lit_react.ReactWebComponent<MenuTrigger$1, {}>;
+
+declare const Popover: _lit_react.ReactWebComponent<Popover$1, {
+    onPopoverOpen: string;
+    onPopoverClose: string;
+}>;
+
+declare const PopoverContent: _lit_react.ReactWebComponent<PopoverContent$1, {}>;
+
+declare const PopoverTrigger: _lit_react.ReactWebComponent<PopoverTrigger$1, {}>;
+
+declare const ScrollableArea: _lit_react.ReactWebComponent<ScrollableArea$1, {}>;
+
+declare const SearchInput: _lit_react.ReactWebComponent<SearchInput$1, {
+    onChange: string;
+    onSearch: string;
+}>;
+
+declare const Spinner: _lit_react.ReactWebComponent<Spinner$1, {}>;
+
+declare const Tabs: _lit_react.ReactWebComponent<Tabs$1, {
+    onTabsChange: string;
+}>;
+
+declare const TabsContent: _lit_react.ReactWebComponent<TabsContent$1, {}>;
+
+declare const TabsTrigger: _lit_react.ReactWebComponent<TabsTrigger$1, {
+    onTabSelect: string;
+}>;
+
+declare const Tag: _lit_react.ReactWebComponent<Tag$1, {
+    onTagClick: string;
+}>;
+
+declare const Text: _lit_react.ReactWebComponent<Text$1, {}>;
+
+declare const Toast: _lit_react.ReactWebComponent<Toast$1, {
+    onToastOpen: string;
+    onToastClose: string;
+}>;
+
+declare const ToastContainer: _lit_react.ReactWebComponent<ToastContainer$1, {}>;
+
+declare const Tooltip: _lit_react.ReactWebComponent<Tooltip$1, {}>;
+
+type ToastStatus = 'success' | 'error' | 'warning';
+interface ToastAPI {
+    showToast: (message: string, status?: ToastStatus) => void;
+}
+declare const ToastProvider: FC<{
+    children: ReactNode;
+}>;
+declare const useToast: () => ToastAPI;
+
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Avatar, Badge, Button, Card, Header, Icon, Image, Input, Menu, MenuItem, MenuTrigger, Popover, PopoverContent, PopoverTrigger, ScrollableArea, SearchInput, Spinner, Tabs, TabsContent, TabsTrigger, Tag, Text, Toast, ToastContainer, ToastProvider, Tooltip, useToast };