@kittl/ui-react 0.0.1

package/dist/index.d.ts

@@ -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 };

package/dist/index.js

@@ -0,0 +1,485 @@
+// src/components/Accordion.ts
+import {
+  ACCORDION_COMPONENT_NAME,
+  Accordion as AccordionElement
+} from "@kittl/ui";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Accordion = createComponent({
+  tagName: ACCORDION_COMPONENT_NAME,
+  elementClass: AccordionElement,
+  react: React,
+  displayName: "KittlAccordion"
+});
+
+// src/components/AccordionItem.ts
+import {
+  ACCORDION_ITEM_COMPONENT_NAME,
+  AccordionItem as AccordionItemElement
+} from "@kittl/ui";
+import { createComponent as createComponent2 } from "@lit/react";
+import * as React2 from "react";
+var AccordionItem = createComponent2({
+  tagName: ACCORDION_ITEM_COMPONENT_NAME,
+  elementClass: AccordionItemElement,
+  react: React2,
+  displayName: "KittlAccordionItem",
+  events: {
+    onAccordionToggle: "accordion-toggle"
+  }
+});
+
+// src/components/AccordionItemContent.ts
+import {
+  ACCORDION_ITEM_CONTENT_COMPONENT_NAME,
+  AccordionItemContent as AccordionItemContentElement
+} from "@kittl/ui";
+import { createComponent as createComponent3 } from "@lit/react";
+import * as React3 from "react";
+var AccordionItemContent = createComponent3({
+  tagName: ACCORDION_ITEM_CONTENT_COMPONENT_NAME,
+  elementClass: AccordionItemContentElement,
+  react: React3,
+  displayName: "KittlAccordionItemContent"
+});
+
+// src/components/AccordionItemTrigger.ts
+import {
+  ACCORDION_ITEM_TRIGGER_COMPONENT_NAME,
+  AccordionItemTrigger as AccordionItemTriggerElement
+} from "@kittl/ui";
+import { createComponent as createComponent4 } from "@lit/react";
+import * as React4 from "react";
+var AccordionItemTrigger = createComponent4({
+  tagName: ACCORDION_ITEM_TRIGGER_COMPONENT_NAME,
+  elementClass: AccordionItemTriggerElement,
+  react: React4,
+  displayName: "KittlAccordionItemTrigger"
+});
+
+// src/components/Avatar.ts
+import { AVATAR_COMPONENT_NAME, Avatar as AvatarElement } from "@kittl/ui";
+import { createComponent as createComponent5 } from "@lit/react";
+import * as React5 from "react";
+var Avatar = createComponent5({
+  tagName: AVATAR_COMPONENT_NAME,
+  elementClass: AvatarElement,
+  react: React5,
+  displayName: "KittlAvatar"
+});
+
+// src/components/Badge.ts
+import { BADGE_COMPONENT_NAME, Badge as BadgeElement } from "@kittl/ui";
+import { createComponent as createComponent6 } from "@lit/react";
+import * as React6 from "react";
+var Badge = createComponent6({
+  tagName: BADGE_COMPONENT_NAME,
+  elementClass: BadgeElement,
+  react: React6,
+  displayName: "KittlBadge"
+});
+
+// src/components/Button.ts
+import { BUTTON_COMPONENT_NAME, Button as ButtonElement } from "@kittl/ui";
+import { createComponent as createComponent7 } from "@lit/react";
+import * as React7 from "react";
+var Button = createComponent7({
+  tagName: BUTTON_COMPONENT_NAME,
+  elementClass: ButtonElement,
+  react: React7,
+  displayName: "KittlButton"
+});
+
+// src/components/Card.ts
+import { CARD_COMPONENT_NAME, Card as CardElement } from "@kittl/ui";
+import { createComponent as createComponent8 } from "@lit/react";
+import * as React8 from "react";
+var Card = createComponent8({
+  tagName: CARD_COMPONENT_NAME,
+  elementClass: CardElement,
+  react: React8,
+  displayName: "KittlCard",
+  events: {
+    onCardClick: "card-click"
+  }
+});
+
+// src/components/Header.ts
+import { HEADER_COMPONENT_NAME, Header as HeaderElement } from "@kittl/ui";
+import { createComponent as createComponent9 } from "@lit/react";
+import * as React9 from "react";
+var Header = createComponent9({
+  tagName: HEADER_COMPONENT_NAME,
+  elementClass: HeaderElement,
+  react: React9,
+  displayName: "KittlHeader",
+  events: {
+    onMenuItemSelect: "menu-item-select"
+  }
+});
+
+// src/components/Icon.ts
+import { ICON_COMPONENT_NAME, Icon as IconElement } from "@kittl/ui";
+import { createComponent as createComponent10 } from "@lit/react";
+import * as React10 from "react";
+var Icon = createComponent10({
+  tagName: ICON_COMPONENT_NAME,
+  elementClass: IconElement,
+  react: React10,
+  displayName: "KittlIcon"
+});
+
+// src/components/Image.ts
+import { IMAGE_COMPONENT_NAME, Image as ImageElement } from "@kittl/ui";
+import { createComponent as createComponent11 } from "@lit/react";
+import * as React11 from "react";
+var Image = createComponent11({
+  tagName: IMAGE_COMPONENT_NAME,
+  elementClass: ImageElement,
+  react: React11,
+  displayName: "KittlImage"
+});
+
+// src/components/Input.ts
+import { INPUT_COMPONENT_NAME, Input as InputElement } from "@kittl/ui";
+import { createComponent as createComponent12 } from "@lit/react";
+import * as React12 from "react";
+var Input = createComponent12({
+  tagName: INPUT_COMPONENT_NAME,
+  elementClass: InputElement,
+  react: React12,
+  displayName: "KittlInput",
+  events: {
+    onChange: "change"
+  }
+});
+
+// src/components/Menu.ts
+import { MENU_COMPONENT_NAME, Menu as MenuElement } from "@kittl/ui";
+import { createComponent as createComponent13 } from "@lit/react";
+import * as React13 from "react";
+var Menu = createComponent13({
+  tagName: MENU_COMPONENT_NAME,
+  elementClass: MenuElement,
+  react: React13,
+  displayName: "KittlMenu",
+  events: {
+    onMenuOpen: "menu-open",
+    onMenuClose: "menu-close"
+  }
+});
+
+// src/components/MenuItem.ts
+import {
+  MENU_ITEM_COMPONENT_NAME,
+  MenuItem as MenuItemElement
+} from "@kittl/ui";
+import { createComponent as createComponent14 } from "@lit/react";
+import * as React14 from "react";
+var MenuItem = createComponent14({
+  tagName: MENU_ITEM_COMPONENT_NAME,
+  elementClass: MenuItemElement,
+  react: React14,
+  displayName: "KittlMenuItem",
+  events: {
+    onMenuItemSelect: "menu-item-select"
+  }
+});
+
+// src/components/MenuTrigger.ts
+import {
+  MENU_TRIGGER_COMPONENT_NAME,
+  MenuTrigger as MenuTriggerElement
+} from "@kittl/ui";
+import { createComponent as createComponent15 } from "@lit/react";
+import * as React15 from "react";
+var MenuTrigger = createComponent15({
+  tagName: MENU_TRIGGER_COMPONENT_NAME,
+  elementClass: MenuTriggerElement,
+  react: React15,
+  displayName: "KittlMenuTrigger"
+});
+
+// src/components/Popover.ts
+import { POPOVER_COMPONENT_NAME, Popover as PopoverElement } from "@kittl/ui";
+import { createComponent as createComponent16 } from "@lit/react";
+import * as React16 from "react";
+var Popover = createComponent16({
+  tagName: POPOVER_COMPONENT_NAME,
+  elementClass: PopoverElement,
+  react: React16,
+  displayName: "KittlPopover",
+  events: {
+    onPopoverOpen: "popover-open",
+    onPopoverClose: "popover-close"
+  }
+});
+
+// src/components/PopoverContent.ts
+import {
+  POPOVER_CONTENT_COMPONENT_NAME,
+  PopoverContent as PopoverContentElement
+} from "@kittl/ui";
+import { createComponent as createComponent17 } from "@lit/react";
+import * as React17 from "react";
+var PopoverContent = createComponent17({
+  tagName: POPOVER_CONTENT_COMPONENT_NAME,
+  elementClass: PopoverContentElement,
+  react: React17,
+  displayName: "KittlPopoverContent"
+});
+
+// src/components/PopoverTrigger.ts
+import {
+  POPOVER_TRIGGER_COMPONENT_NAME,
+  PopoverTrigger as PopoverTriggerElement
+} from "@kittl/ui";
+import { createComponent as createComponent18 } from "@lit/react";
+import * as React18 from "react";
+var PopoverTrigger = createComponent18({
+  tagName: POPOVER_TRIGGER_COMPONENT_NAME,
+  elementClass: PopoverTriggerElement,
+  react: React18,
+  displayName: "KittlPopoverTrigger"
+});
+
+// src/components/ScrollableArea.ts
+import {
+  SCROLLABLE_AREA_COMPONENT_NAME,
+  ScrollableArea as ScrollableAreaElement
+} from "@kittl/ui";
+import { createComponent as createComponent19 } from "@lit/react";
+import * as React19 from "react";
+var ScrollableArea = createComponent19({
+  tagName: SCROLLABLE_AREA_COMPONENT_NAME,
+  elementClass: ScrollableAreaElement,
+  react: React19,
+  displayName: "KittlScrollableArea"
+});
+
+// src/components/SearchInput.ts
+import { SearchInput as SearchInputElement } from "@kittl/ui";
+import { createComponent as createComponent20 } from "@lit/react";
+import * as React20 from "react";
+var SearchInput = createComponent20({
+  tagName: "kittl-search-input",
+  elementClass: SearchInputElement,
+  react: React20,
+  displayName: "KittlSearchInput",
+  events: {
+    onChange: "change",
+    onSearch: "search"
+  }
+});
+
+// src/components/Spinner.ts
+import { SPINNER_COMPONENT_NAME, Spinner as SpinnerElement } from "@kittl/ui";
+import { createComponent as createComponent21 } from "@lit/react";
+import * as React21 from "react";
+var Spinner = createComponent21({
+  tagName: SPINNER_COMPONENT_NAME,
+  elementClass: SpinnerElement,
+  react: React21,
+  displayName: "KittlSpinner"
+});
+
+// src/components/Tabs.ts
+import { TABS_COMPONENT_NAME, Tabs as TabsElement } from "@kittl/ui";
+import { createComponent as createComponent22 } from "@lit/react";
+import * as React22 from "react";
+var Tabs = createComponent22({
+  tagName: TABS_COMPONENT_NAME,
+  elementClass: TabsElement,
+  react: React22,
+  displayName: "KittlTabs",
+  events: {
+    onTabsChange: "tabs-change"
+  }
+});
+
+// src/components/TabsContent.ts
+import {
+  TABS_CONTENT_COMPONENT_NAME,
+  TabsContent as TabsContentElement
+} from "@kittl/ui";
+import { createComponent as createComponent23 } from "@lit/react";
+import * as React23 from "react";
+var TabsContent = createComponent23({
+  tagName: TABS_CONTENT_COMPONENT_NAME,
+  elementClass: TabsContentElement,
+  react: React23,
+  displayName: "KittlTabsContent"
+});
+
+// src/components/TabsTrigger.ts
+import {
+  TABS_TRIGGER_COMPONENT_NAME,
+  TabsTrigger as TabsTriggerElement
+} from "@kittl/ui";
+import { createComponent as createComponent24 } from "@lit/react";
+import * as React24 from "react";
+var TabsTrigger = createComponent24({
+  tagName: TABS_TRIGGER_COMPONENT_NAME,
+  elementClass: TabsTriggerElement,
+  react: React24,
+  displayName: "KittlTabsTrigger",
+  events: {
+    onTabSelect: "tab-select"
+  }
+});
+
+// src/components/Tag.ts
+import { Tag as TagElement } from "@kittl/ui";
+import { createComponent as createComponent25 } from "@lit/react";
+import * as React25 from "react";
+var Tag = createComponent25({
+  tagName: "kittl-tag",
+  elementClass: TagElement,
+  react: React25,
+  displayName: "KittlTag",
+  events: {
+    onTagClick: "tag-click"
+  }
+});
+
+// src/components/Text.ts
+import { TEXT_COMPONENT_NAME, Text as TextElement } from "@kittl/ui";
+import { createComponent as createComponent26 } from "@lit/react";
+import * as React26 from "react";
+var Text = createComponent26({
+  tagName: TEXT_COMPONENT_NAME,
+  elementClass: TextElement,
+  react: React26,
+  displayName: "KittlText"
+});
+
+// src/components/Toast.ts
+import { TOAST_COMPONENT_NAME, Toast as ToastElement } from "@kittl/ui";
+import { createComponent as createComponent27 } from "@lit/react";
+import * as React27 from "react";
+var Toast = createComponent27({
+  tagName: TOAST_COMPONENT_NAME,
+  elementClass: ToastElement,
+  react: React27,
+  displayName: "KittlToast",
+  events: {
+    onToastOpen: "toast-open",
+    onToastClose: "toast-close"
+  }
+});
+
+// src/components/ToastContainer.ts
+import {
+  TOAST_CONTAINER_COMPONENT_NAME,
+  ToastContainer as ToastContainerElement
+} from "@kittl/ui";
+import { createComponent as createComponent28 } from "@lit/react";
+import * as React28 from "react";
+var ToastContainer = createComponent28({
+  tagName: TOAST_CONTAINER_COMPONENT_NAME,
+  elementClass: ToastContainerElement,
+  react: React28,
+  displayName: "KittlToastContainer"
+});
+
+// src/components/Tooltip.ts
+import { TOOLTIP_COMPONENT_NAME, Tooltip as TooltipElement } from "@kittl/ui";
+import { createComponent as createComponent29 } from "@lit/react";
+import * as React29 from "react";
+var Tooltip = createComponent29({
+  tagName: TOOLTIP_COMPONENT_NAME,
+  elementClass: TooltipElement,
+  react: React29,
+  displayName: "KittlTooltip"
+});
+
+// src/ToastProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = createContext(void 0);
+var nextId = 0;
+var toastRefs = /* @__PURE__ */ new Map();
+var ToastRender = ({ toasts, removeToast }) => /* @__PURE__ */ jsx(ToastContainer, { children: toasts.map((t) => /* @__PURE__ */ 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] = useState([]);
+  const showToast = 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 = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+    toastRefs.delete(id);
+  }, []);
+  const contextValue = useMemo(() => ({ showToast }), [showToast]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastRender, { toasts, removeToast })
+  ] });
+};
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+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
+};