@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
 export { default as SkfCollapse } from './components/collapse/collapse.js';
+export { default as SkfDatePickerInput } from './components/date-picker-input/datepicker-input.js';
+export { default as SkfDatePicker } from './components/date-picker/datepicker.js';
 export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
 export { default as SkfHeading } from './components/heading/heading.js';
@@ -12,11 +14,16 @@ export { default as SkfInput } from './components/input/input.js';
 export { default as SkfLink } from './components/link/link.js';
 export { default as SkfLoader } from './components/loader/loader.js';
 export { default as SkfLogo } from './components/logo/logo.js';
+export { default as SkfMenuItem } from './components/menu-item/menu-item.js';
+export { default as SkfMenu } from './components/menu/menu.js';
+export { default as SkfPopover } from './components/popover/popover.js';
 export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfOptionGroup } from './components/select-option-group/select-option-group.js';
 export { default as SkfOption } from './components/select-option/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
+export { default as SkfStepperItem } from './components/stepper-item/stepper-item.js';
+export { default as SkfStepper } from './components/stepper/stepper.js';
 export { default as SkfSwitch } from './components/switch/switch.js';
 export { default as SkfTabGoup } from './components/tab-group/tab-group.js';
 export { default as SkfTabPanel } from './components/tab-panel/tab-panel.js';
@@ -24,3 +31,4 @@ export { default as SkfTab } from './components/tab/tab.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';
 export { default as SkfToast } from './components/toast/toast.js';
+export { default as SkfTooltip } from './components/tooltip/tooltip.js';

package/dist/index.js

@@ -4,6 +4,8 @@ import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
+import "./components/date-picker-input/datepicker-input.js";
+import "./components/date-picker/datepicker.js";
 import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
 import "./components/heading/heading.js";
@@ -12,11 +14,16 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
+import "./components/menu-item/menu-item.js";
+import "./components/menu/menu.js";
+import "./components/popover/popover.js";
 import "./components/progress/progress.js";
 import "./components/radio/radio.js";
 import "./components/select-option-group/select-option-group.js";
 import "./components/select-option/select-option.js";
 import "./components/select/select.js";
+import "./components/stepper-item/stepper-item.js";
+import "./components/stepper/stepper.js";
 import "./components/switch/switch.js";
 import "./components/tab-group/tab-group.js";
 import "./components/tab-panel/tab-panel.js";
@@ -24,59 +31,76 @@ import "./components/tab/tab.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
 import "./components/toast/toast.js";
-import { SkfAccordion as D } from "./components/accordion/accordion.component.js";
-import { SkfAlert as v } from "./components/alert/alert.component.js";
-import { SkfButton as B } from "./components/button/button.component.js";
-import { SkfCard as R } from "./components/card/card.component.js";
-import { SkfCheckbox as q } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as z } from "./components/collapse/collapse.component.js";
-import { SkfDialog as F } from "./components/dialog/dialog.component.js";
-import { SkfDivider as K } from "./components/divider/divider.component.js";
-import { SkfHeading as N } from "./components/heading/heading.component.js";
-import { SkfIcon as U } from "./components/icon/icon.component.js";
-import { SkfInput as W } from "./components/input/input.component.js";
-import { SkfLink as Y } from "./components/link/link.component.js";
-import { SkfLoader as _ } from "./components/loader/loader.component.js";
-import { SkfLogo as oo } from "./components/logo/logo.component.js";
-import { SkfProgress as to } from "./components/progress/progress.component.js";
-import { SkfRadio as fo } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as eo } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as So } from "./components/select-option/select-option.component.js";
-import { SkfSelect as xo } from "./components/select/select.component.js";
-import { SkfSwitch as no } from "./components/switch/switch.component.js";
-import { SkfTabGroup as lo } from "./components/tab-group/tab-group.component.js";
-import { SkfTabPanel as To } from "./components/tab-panel/tab-panel.component.js";
-import { SkfTab as bo } from "./components/tab/tab.component.js";
-import { SkfTag as Ao } from "./components/tag/tag.component.js";
-import { SkfTextArea as Oo } from "./components/textarea/textarea.component.js";
-import { SkfToast as Io } from "./components/toast/toast.component.js";
-import { SkfAccordionItem as ho } from "./components/accordion/accordion-item.js";
+import "./components/tooltip/tooltip.js";
+import { SkfAccordion as j } from "./components/accordion/accordion.component.js";
+import { SkfAlert as y } from "./components/alert/alert.component.js";
+import { SkfButton as E } from "./components/button/button.component.js";
+import { SkfCard as J } from "./components/card/card.component.js";
+import { SkfCheckbox as N } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as U } from "./components/collapse/collapse.component.js";
+import { SkfDatePickerInput as W } from "./components/date-picker-input/datepicker-input.component.js";
+import { SkfDatePicker as Y } from "./components/date-picker/datepicker.component.js";
+import { SkfDialog as _ } from "./components/dialog/dialog.component.js";
+import { SkfDivider as oo } from "./components/divider/divider.component.js";
+import { SkfHeading as to } from "./components/heading/heading.component.js";
+import { SkfIcon as fo } from "./components/icon/icon.component.js";
+import { SkfInput as eo } from "./components/input/input.component.js";
+import { SkfLink as So } from "./components/link/link.component.js";
+import { SkfLoader as xo } from "./components/loader/loader.component.js";
+import { SkfLogo as no } from "./components/logo/logo.component.js";
+import { SkfMenuItem as lo } from "./components/menu-item/menu-item.component.js";
+import { SkfMenu as To } from "./components/menu/menu.component.js";
+import { SkfPopover as Io } from "./components/popover/popover.component.js";
+import { SkfProgress as go } from "./components/progress/progress.component.js";
+import { SkfRadio as Ao } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as Go } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as Co } from "./components/select-option/select-option.component.js";
+import { SkfSelect as ho } from "./components/select/select.component.js";
+import { SkfStepperItem as Mo } from "./components/stepper-item/stepper-item.component.js";
+import { SkfStepper as Bo } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as Ro } from "./components/switch/switch.component.js";
+import { SkfTabGroup as qo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as zo } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as Fo } from "./components/tab/tab.component.js";
+import { SkfTag as Ko } from "./components/tag/tag.component.js";
+import { SkfTextArea as Qo } from "./components/textarea/textarea.component.js";
+import { SkfToast as Vo } from "./components/toast/toast.component.js";
+import { SkfTooltip as Xo } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as Zo } from "./components/accordion/accordion-item.js";
 export {
-  D as SkfAccordion,
-  ho as SkfAccordionItem,
-  v as SkfAlert,
-  B as SkfButton,
-  R as SkfCard,
-  q as SkfCheckbox,
-  z as SkfCollapse,
-  F as SkfDialog,
-  K as SkfDivider,
-  N as SkfHeading,
-  U as SkfIcon,
-  W as SkfInput,
-  Y as SkfLink,
-  _ as SkfLoader,
-  oo as SkfLogo,
-  So as SkfOption,
-  eo as SkfOptionGroup,
-  to as SkfProgress,
-  fo as SkfRadio,
-  xo as SkfSelect,
-  no as SkfSwitch,
-  bo as SkfTab,
-  lo as SkfTabGoup,
-  To as SkfTabPanel,
-  Ao as SkfTag,
-  Oo as SkfTextArea,
-  Io as SkfToast
+  j as SkfAccordion,
+  Zo as SkfAccordionItem,
+  y as SkfAlert,
+  E as SkfButton,
+  J as SkfCard,
+  N as SkfCheckbox,
+  U as SkfCollapse,
+  Y as SkfDatePicker,
+  W as SkfDatePickerInput,
+  _ as SkfDialog,
+  oo as SkfDivider,
+  to as SkfHeading,
+  fo as SkfIcon,
+  eo as SkfInput,
+  So as SkfLink,
+  xo as SkfLoader,
+  no as SkfLogo,
+  To as SkfMenu,
+  lo as SkfMenuItem,
+  Co as SkfOption,
+  Go as SkfOptionGroup,
+  Io as SkfPopover,
+  go as SkfProgress,
+  Ao as SkfRadio,
+  ho as SkfSelect,
+  Bo as SkfStepper,
+  Mo as SkfStepperItem,
+  Ro as SkfSwitch,
+  Fo as SkfTab,
+  qo as SkfTabGoup,
+  zo as SkfTabPanel,
+  Ko as SkfTag,
+  Qo as SkfTextArea,
+  Vo as SkfToast,
+  Xo as SkfTooltip
 };

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -0,0 +1,29 @@
+import { type Placement } from '@floating-ui/dom';
+import { SkfElement } from '../../components/skf-element.js';
+import { PopoverController } from '../../controllers/popover.controller.js';
+import { type CSSResultGroup } from 'lit';
+export declare class SkfPopoverBase extends SkfElement {
+    static styles: CSSResultGroup;
+    static classMap: {};
+    isOpen: boolean;
+    placement: Placement;
+    variant: 'dropdown' | 'popup' | 'tooltip';
+    anchor?: string;
+    offset: number;
+    $anchor?: Element | HTMLElement | null;
+    arrow: boolean;
+    $popover: HTMLElement;
+    $arrow: HTMLElement;
+    /** @internal */
+    protected popoverController: PopoverController;
+    private _toggleOpen;
+    private _handleToggle;
+    handleToggleOpen: () => void;
+    handleAnchorChange: () => Promise<void>;
+    reposition: () => Promise<void>;
+    open: () => boolean;
+    close: () => boolean;
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/base-classes/popover/popover.base.js

@@ -0,0 +1,116 @@
+import { flip as b, offset as C, arrow as _, computePosition as E } from "@floating-ui/dom";
+import { SkfElement as P } from "../../components/skf-element.js";
+import { PopoverController as L } from "../../controllers/popover.controller.js";
+import { watch as $ } from "../../helpers/watch.js";
+import M from "../../../styles/component.styles.js";
+import { html as y, nothing as T } from "lit";
+import { property as a, state as h, query as u } from "lit/decorators.js";
+import { classMap as j } from "lit/directives/class-map.js";
+import { styles as k } from "./popover.styles.js";
+var B = Object.defineProperty, o = (l, t, i, c) => {
+  for (var r = void 0, n = l.length - 1, p; n >= 0; n--)
+    (p = l[n]) && (r = p(t, i, r) || r);
+  return r && B(t, i, r), r;
+}, s;
+const e = (s = class extends P {
+  constructor() {
+    super(...arguments), this.isOpen = !1, this.placement = "top", this.variant = "popup", this.offset = 0, this.arrow = !1, this.popoverController = new L(this), this._toggleOpen = (t) => this.isOpen = t ?? !this.isOpen, this._handleToggle = (t) => {
+      const i = t.newState === "open";
+      this.isOpen = i, this.emit(i ? "open" : "close");
+    }, this.handleToggleOpen = () => {
+      this.$popover.togglePopover(this.isOpen), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 150,
+        easing: "ease-out",
+        fill: "forwards"
+      });
+    }, this.handleAnchorChange = async () => {
+      if (!this.anchor) return;
+      await this.popoverController.stop(), this.$anchor && this.removeEventListeners(this.$anchor);
+      const t = this.getRootNode();
+      this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
+    }, this.reposition = async () => {
+      var n, p, f;
+      if (!this.$anchor) return;
+      const t = [b(), C(this.offset)];
+      this.arrow && t.push(_({ element: this.$arrow }));
+      const { x: i, y: c, middlewareData: r } = await E(this.$anchor, this.$popover, {
+        placement: this.placement,
+        middleware: t,
+        strategy: "fixed"
+      });
+      if (Object.assign(this.$popover.style, {
+        left: `${String(i)}px`,
+        top: `${String(c)}px`
+      }), this.arrow) {
+        const m = this.placement.split("-")[0], d = { top: "bottom", right: "left", bottom: "top", left: "right" }[m] ?? "", g = (n = r.flip) == null ? void 0 : n.index, v = (p = r.arrow) == null ? void 0 : p.x, w = (f = r.arrow) == null ? void 0 : f.y, O = typeof v == "number" ? `${String(v)}px` : "", S = typeof w == "number" ? `${String(w)}px` : "", x = {
+          bottom: 45,
+          right: 135,
+          top: 225,
+          left: 315
+        };
+        Object.assign(this.$arrow.style, {
+          top: S,
+          [this.placement.includes("left") ? "right" : "left"]: O,
+          [g ? m : d]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(x[d] + (g ? 180 : 0)).toString()}deg`
+        });
+      }
+    }, this.open = () => this._toggleOpen(!0), this.close = () => this._toggleOpen(!1);
+  }
+  addEventListeners(t) {
+    throw new Error(`Cannot add eventListeners for ${t.id}. Method not implemented.`);
+  }
+  removeEventListeners(t) {
+    throw new Error(`Cannot remove eventListeners for ${t.id}. Method not implemented.`);
+  }
+  render() {
+    return y`
+			<div
+				@toggle=${this._handleToggle}
+				class=${j({ popover: !0, ...s.classMap })}
+				id="popover"
+				popover
+			>
+				<slot></slot>
+				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : T}
+			</div>
+		`;
+  }
+}, s.styles = [M, k], s.classMap = {}, s);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "isOpen");
+o([
+  a()
+], e.prototype, "placement");
+o([
+  a()
+], e.prototype, "variant");
+o([
+  a()
+], e.prototype, "anchor");
+o([
+  h()
+], e.prototype, "offset");
+o([
+  h()
+], e.prototype, "$anchor");
+o([
+  h()
+], e.prototype, "arrow");
+o([
+  u("#popover")
+], e.prototype, "$popover");
+o([
+  u("#arrow")
+], e.prototype, "$arrow");
+o([
+  $("isOpen", { afterUpdate: !0 })
+], e.prototype, "handleToggleOpen");
+o([
+  $("anchor")
+], e.prototype, "handleAnchorChange");
+let X = e;
+export {
+  X as SkfPopoverBase
+};

package/dist/internal/base-classes/popover/popover.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/internal/base-classes/popover/popover.styles.js

@@ -0,0 +1,29 @@
+import { css as o } from "lit";
+const e = o`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.popover {
+			background-color: var(--skf-bg-color-neutral-1);
+			border: none;
+			border-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+			opacity: 0;
+			overflow: visible;
+		}
+
+		.popover__arrow {
+			--_skf-popover-arrow-size: calc(6px * 0.7071);
+
+			background-color: var(--skf-bg-color-neutral-1);
+			block-size: calc(var(--_skf-popover-arrow-size) * 2);
+			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
+			inline-size: calc(var(--_skf-popover-arrow-size) * 2);
+			position: absolute;
+			rotate: 45deg;
+			z-index: -1;
+		}
+	}
+`;
+export {
+  e as styles
+};

package/dist/internal/controllers/popover.controller.d.ts

@@ -0,0 +1,17 @@
+import type { SkfDatePickerInput } from '../../components/date-picker-input/datepicker-input.component.js';
+import { SkfSelect } from '../../components/select/select.component.js';
+import type { SkfPopoverBase } from '../base-classes/popover/popover.base.js';
+import type { ReactiveController } from 'lit';
+type ControllerHost = SkfPopoverBase | SkfSelect | SkfDatePickerInput;
+export declare class PopoverController implements ReactiveController {
+    host?: ControllerHost;
+    private cleanup;
+    private active;
+    private autoStart;
+    constructor(host: ControllerHost, autoStart?: boolean);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    start(): void;
+    stop(): Promise<void>;
+}
+export {};

package/dist/internal/controllers/popover.controller.js

@@ -0,0 +1,44 @@
+import "../../components/select/select.component.js";
+import { autoUpdate as n } from "@floating-ui/dom";
+class p {
+  constructor(t, o = !0) {
+    this.active = !1, this.autoStart = !0, this.host = t, t.addController(this), this.autoStart = o;
+  }
+  hostConnected() {
+    var t;
+    this.autoStart && ((t = this.host) == null || t.updateComplete.then(() => {
+      this.start();
+    }).catch((o) => {
+      console.error(o);
+    }));
+  }
+  hostDisconnected() {
+    this.stop().catch((t) => {
+      console.error(t);
+    });
+  }
+  start() {
+    var r, e;
+    const t = (r = this.host) == null ? void 0 : r.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
+    if (!t || !o) {
+      console.warn("PopoverController: anchor or popup not found");
+      return;
+    }
+    this.active || (this.cleanup = n(t, o, () => {
+      var s;
+      (s = this.host) == null || s.reposition().catch((i) => {
+        console.error(i);
+      });
+    }), this.active = !0);
+  }
+  async stop() {
+    return new Promise((t) => {
+      this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => {
+        t();
+      })) : t(), this.active = !1;
+    });
+  }
+}
+export {
+  p as PopoverController
+};

package/dist/internal/helpers/dateFormatter.d.ts

@@ -0,0 +1,2 @@
+/** Formats a date to SKF standard format. Can be localized, defaults to GB English */
+export declare function dateFormatter(date?: Date | null, locale?: string): string;

package/dist/internal/helpers/hintSeverity.d.ts

@@ -1,2 +1,2 @@
 import type { FormFieldBaseProps } from '../types/formField.js';
-export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("info" | "warning" | "success" | "alert") | undefined;
+export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("success" | "info" | "warning" | "alert") | undefined;

package/dist/internal/helpers/utilityTypes.d.ts

@@ -0,0 +1,22 @@
+export type Mutable<T> = {
+    -readonly [K in keyof T]: T[K];
+};
+type oneToNine = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type zeroToNine = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * Years
+ */
+type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`;
+/**
+ * Months
+ */
+type MM = `0${oneToNine}` | `1${0 | 1 | 2}`;
+/**
+ * Days
+ */
+type DD = `${0}${oneToNine}` | `${1 | 2}${zeroToNine}` | `3${0 | 1}`;
+/**
+ * YYYY-MM-DD
+ */
+export type ISODateString = `${YYYY}-${MM}-${DD}`;
+export {};

package/dist/react/index.d.ts

@@ -1,22 +1,30 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
+export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDatePicker } from './skf-datepicker/index.js';
 export { default as SkfDialog } from './skf-dialog/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
 export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTab } from './skf-tab/index.js';
 export { default as SkfTabGroup } from './skf-tab-group/index.js';
@@ -25,3 +33,4 @@ export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

package/dist/react/index.js

@@ -1,22 +1,30 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
+export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDatePicker } from './skf-datepicker/index.js';
 export { default as SkfDialog } from './skf-dialog/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
 export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTab } from './skf-tab/index.js';
 export { default as SkfTabGroup } from './skf-tab-group/index.js';
@@ -25,3 +33,4 @@ export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

package/dist/react/skf-breadcrumb/index.d.ts

@@ -0,0 +1,9 @@
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import { type SkfBreadcrumb } from '../../components/breadcrumb/breadcrumb.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<Event & {
+        target: SkfBreadcrumb;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import {} from '../../components/breadcrumb/breadcrumb.js';
+import {} from '@lit/react';
+const tagName = 'skf-breadcrumb';
+Component.define('skf-breadcrumb');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+    },
+    displayName: 'SkfBreadcrumb',
+});
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+const tagName = 'skf-breadcrumb-item';
+Component.define('skf-breadcrumb-item');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfBreadcrumbItem',
+});
+export default reactWrapper;

package/dist/react/skf-datepicker/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/date-picker/datepicker.js';
+import { type SkfDatePicker } from '../../components/date-picker/datepicker.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSelectedDateChanged: EventName<Event & {
+        target: SkfDatePicker;
+    }>;
+    onSelectedDateRangeChanged: EventName<Event & {
+        target: SkfDatePicker;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-datepicker/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/date-picker/datepicker.js';
+import {} from '../../components/date-picker/datepicker.js';
+import {} from '@lit/react';
+const tagName = 'skf-datepicker';
+Component.define('skf-datepicker');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSelectedDateChanged: 'selected-date-changed',
+        onSelectedDateRangeChanged: 'selected-date-range-changed',
+    },
+    displayName: 'SkfDatePicker',
+});
+export default reactWrapper;

package/dist/react/skf-menu/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/menu/menu.js';
+import { type SkfMenu } from '../../components/menu/menu.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onOpen: EventName<Event & {
+        target: SkfMenu;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfMenu;
+    }>;
+}>;
+export default reactWrapper;