@lumx/vue 4.17.1-alpha.2 → 4.17.1-alpha.3

package/README.md

@@ -0,0 +1,31 @@
+# LumApps Design System (LumX)
+
+The first official LumApps Design System for [Vue][vue] applications.
+_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with the LumApps design styleguides.
+
+## Quick start
+
+To start to use LumX, you can either:
+
+-   Install with Yarn/NPM:
+
+```bash
+yarn add @lumx/vue
+# Or
+npm install @lumx/vue
+```
+
+-   Download the latest release for [Vue][vue-release]
+-   Clone the repository: `git clone https://github.com/lumapps/design-system.git`
+
+## Documentation
+
+You can find an online version of the demo and documentation site at https://design.lumapps.com.
+
+## Copyright and license
+
+Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).
+
+[vue]: https://vuejs.org/
+[vue-release]: https://www.npmjs.com/package/@lumx/vue
+[webpack]: https://webpack.js.org/

package/_internal/_virtual/_rolldown/runtime.js

@@ -0,0 +1,34 @@
+//#region \0rolldown/runtime.js
+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 __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+export { __commonJSMin, __exportAll, __reExport, __toESM };

package/_internal/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,45 @@
+import { DialogSizes } from "../../packages/lumx-core/src/js/components/Dialog/index.js";
+import { BaseAlertDialogProps } from "../../packages/lumx-core/src/js/components/AlertDialog/index.js";
+import { ClassValue } from "../../utils/VueToJSX.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/alert-dialog/AlertDialog.d.ts
+type ButtonActionProps = {
+  label: string;
+  onClick?: () => void;
+  [key: string]: any;
+};
+interface AlertDialogProps extends Pick<BaseAlertDialogProps, 'kind' | 'title'> {
+  /** Additional class name. */
+  class?: ClassValue;
+  /** Size variant. */
+  size?: DialogSizes;
+  /** Whether the dialog is open. */
+  isOpen?: boolean;
+  /** Reference to the parent element that triggered modal opening. */
+  parentElement?: HTMLElement;
+  /** Additional props for the dialog container element. */
+  dialogProps?: GenericProps;
+  /** Props forwarded to the confirm button. */
+  confirmProps: ButtonActionProps;
+  /** Props forwarded to the cancel button. Will not render a cancel button if undefined. */
+  cancelProps?: ButtonActionProps;
+  /** Unique identifier for the dialog. Generated automatically if not provided. */
+  id?: string;
+}
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+declare const AlertDialog: import("vue").DefineSetupFnComponent<AlertDialogProps, {
+  close: () => boolean;
+}, {}, AlertDialogProps & {
+  onClose?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { AlertDialog, AlertDialogProps };

package/_internal/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,79 @@
+import { AlertDialog as AlertDialog$1, COMPONENT_NAME } from "../../packages/lumx-core/src/js/components/AlertDialog/index.js";
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Dialog from "../dialog/Dialog.js";
+import Icon from "../icon/Icon.js";
+import Button from "../button/Button.js";
+import Toolbar from "../toolbar/Toolbar.js";
+import { Text, computed, defineComponent, shallowRef, useAttrs } from "vue";
+/**
+* AlertDialog component.
+*
+* An alert dialog is a modal dialog that interrupts the user's workflow to
+* communicate an important message and acquire a response.
+*
+* It should not have a complex content.
+* Children of this component should only be strings, paragraphs or links.
+*/
+var AlertDialog = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const generatedId = useId();
+	const uniqueId = computed(() => props.id || generatedId);
+	const cancelButtonEl = shallowRef(void 0);
+	const confirmButtonEl = shallowRef(void 0);
+	return () => {
+		const children = slots.default?.();
+		const DescriptionElement = children?.length === 1 && children[0].type === Text ? "p" : "div";
+		const dialogPassthrough = {
+			isOpen: props.isOpen,
+			parentElement: props.parentElement,
+			onClose: () => emit("close")
+		};
+		const confirmProps = {
+			...props.confirmProps,
+			onVnodeMounted: (vnode) => {
+				confirmButtonEl.value = vnode.el;
+			},
+			onVnodeUnmounted: () => {
+				confirmButtonEl.value = void 0;
+			}
+		};
+		const cancelProps = props.cancelProps && {
+			...props.cancelProps,
+			onVnodeMounted: (vnode) => {
+				cancelButtonEl.value = vnode.el;
+			},
+			onVnodeUnmounted: () => {
+				cancelButtonEl.value = void 0;
+			}
+		};
+		return AlertDialog$1({
+			...attrs,
+			...dialogPassthrough,
+			Button,
+			Dialog,
+			Icon,
+			Toolbar,
+			DescriptionElement,
+			focusElement: props.cancelProps ? cancelButtonEl.value : confirmButtonEl.value,
+			className: className.value,
+			id: uniqueId.value,
+			kind: props.kind,
+			size: props.size,
+			title: props.title,
+			dialogProps: props.dialogProps,
+			confirmProps,
+			cancelProps,
+			children
+		});
+	};
+}, {
+	name: COMPONENT_NAME,
+	inheritAttrs: false,
+	props: keysOf()("class", "kind", "title", "size", "isOpen", "parentElement", "dialogProps", "confirmProps", "cancelProps", "id"),
+	emits: { close: () => true }
+});
+//#endregion
+export { AlertDialog as default };

package/_internal/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+import { AlertDialog, AlertDialogProps } from "./AlertDialog.js";

package/_internal/components/avatar/Avatar.d.ts

@@ -0,0 +1,30 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { AvatarProps as AvatarProps$1, AvatarSize } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/avatar/Avatar.d.ts
+type AvatarProps = VueToJSXProps<AvatarProps$1, 'image' | 'actions' | 'badge'> & {
+  /** Image URL. */image: string; /** Image alternative text. */
+  alt: string; /** Props to pass to the link wrapping the thumbnail. */
+  linkProps?: GenericProps; /** Custom component for the link (can be used to inject vue-router RouterLink). */
+  linkAs?: 'a' | any; /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+  thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'aspectRatio'>;
+};
+declare const Avatar: import("vue").DefineSetupFnComponent<AvatarProps, {
+  click: (_event?: MouseEvent) => boolean;
+  keypress: (_event?: KeyboardEvent) => boolean;
+}, {}, Omit<AvatarProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "image" | "actions" | "badge"> & {
+  class?: ClassValue;
+} & {
+  /** Image URL. */image: string; /** Image alternative text. */
+  alt: string; /** Props to pass to the link wrapping the thumbnail. */
+  linkProps?: GenericProps; /** Custom component for the link (can be used to inject vue-router RouterLink). */
+  linkAs?: "a" | any; /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+  thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "aspectRatio">;
+} & {
+  onClick?: ((_event?: MouseEvent | undefined) => any) | undefined;
+  onKeypress?: ((_event?: KeyboardEvent | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Avatar, AvatarProps };

package/_internal/components/avatar/Avatar.js

@@ -0,0 +1,50 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { Avatar as Avatar$1, DEFAULT_PROPS, element } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import Thumbnail from "../thumbnail/Thumbnail.js";
+import { AspectRatio } from "@lumx/core/js/constants";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+var Avatar = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const handleClick = (event) => emit("click", event);
+	const handleKeyPress = (event) => emit("keypress", event);
+	return () => {
+		const { image, alt, size = DEFAULT_PROPS.size, theme, linkProps, linkAs, thumbnailProps } = props;
+		const resolvedTheme = theme || defaultTheme.value;
+		const actionsContent = slots.actions?.();
+		const badgeContent = slots.badge?.();
+		return createVNode(Avatar$1, mergeProps(attrs, {
+			"className": className.value,
+			"theme": resolvedTheme,
+			"size": size,
+			"actions": actionsContent,
+			"badge": badgeContent,
+			"image": createVNode(Thumbnail, mergeProps({
+				"linkProps": linkProps,
+				"linkAs": linkAs,
+				"class": element("thumbnail"),
+				"onClick": handleClick,
+				"onKeyPress": handleKeyPress
+			}, thumbnailProps, {
+				"aspectRatio": AspectRatio.square,
+				"size": size,
+				"image": image,
+				"alt": alt,
+				"theme": resolvedTheme
+			}), null)
+		}), null);
+	};
+}, {
+	name: "LumxAvatar",
+	inheritAttrs: false,
+	props: keysOf()("image", "alt", "size", "theme", "linkProps", "linkAs", "thumbnailProps", "class"),
+	emits: {
+		click: (_event) => true,
+		keypress: (_event) => true
+	}
+});
+//#endregion
+export { Avatar as default };

package/_internal/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { AvatarSize } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import { Avatar, AvatarProps } from "./Avatar.js";

package/_internal/components/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { BadgeProps as BadgeProps$1 } from "../../packages/lumx-core/src/js/components/Badge/index.js";
+
+//#region src/components/badge/Badge.d.ts
+type BadgeProps = VueToJSXProps<BadgeProps$1>;
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Badge: import("vue").DefineSetupFnComponent<BadgeProps, {}, {}, Omit<BadgeProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { Badge, BadgeProps };

package/_internal/components/badge/Badge.js

@@ -0,0 +1,25 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Badge as Badge$1 } from "../../packages/lumx-core/src/js/components/Badge/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/badge/Badge.tsx
+/**
+* Badge component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Badge = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => createVNode(Badge$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxBadge",
+	inheritAttrs: false,
+	props: keysOf()("color", "class")
+});
+//#endregion
+export { Badge as default };

package/_internal/components/badge/BadgeWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { BadgeWrapperProps as BadgeWrapperProps$1 } from "../../packages/lumx-core/src/js/components/Badge/BadgeWrapper.js";
+
+//#region src/components/badge/BadgeWrapper.d.ts
+type BadgeWrapperProps = VueToJSXProps<BadgeWrapperProps$1>;
+declare const BadgeWrapper: import("vue").DefineSetupFnComponent<BadgeWrapperProps, {}, {}, Omit<BadgeWrapperProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { BadgeWrapper, BadgeWrapperProps };

package/_internal/components/badge/BadgeWrapper.js

@@ -0,0 +1,22 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { BadgeWrapper as BadgeWrapper$1 } from "../../packages/lumx-core/src/js/components/Badge/BadgeWrapper.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/badge/BadgeWrapper.tsx
+var BadgeWrapper = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(BadgeWrapper$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"badge": props.badge || slots.badge?.(),
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxBadgeWrapper",
+	inheritAttrs: false,
+	props: keysOf()("badge", "class")
+});
+//#endregion
+export { BadgeWrapper as default };

package/_internal/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps } from "./Badge.js";
+import { BadgeWrapper, BadgeWrapperProps } from "./BadgeWrapper.js";

package/_internal/components/button/Button.d.ts

@@ -0,0 +1,18 @@
+import { HyphenatedAriaProps, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ButtonProps as ButtonProps$1 } from "../../packages/lumx-core/src/js/components/Button/Button.js";
+
+//#region src/components/button/Button.d.ts
+type ButtonProps = Omit<VueToJSXProps<ButtonProps$1>, HyphenatedAriaProps>;
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Button: import("vue").DefineSetupFnComponent<ButtonProps, {
+  click: (event: MouseEvent) => boolean;
+}, {}, ButtonProps & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Button, ButtonProps };

package/_internal/components/button/Button.js

@@ -0,0 +1,66 @@
+import { __toESM } from "../../_virtual/_rolldown/runtime.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { require_isEmpty } from "../../node_modules/lodash/isEmpty.js";
+import { Button as Button$1 } from "../../packages/lumx-core/src/js/components/Button/Button.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { ResetTheme } from "../../utils/theme/ResetTheme.js";
+import Icon from "../icon/Icon.js";
+import Text$1 from "../text/Text.js";
+import { Comment, Fragment, computed, createVNode, defineComponent, mergeProps, toRaw, useAttrs, useSlots } from "vue";
+//#region src/components/button/Button.tsx
+var import_isEmpty = /* @__PURE__ */ __toESM(require_isEmpty(), 1);
+/**
+* Button component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Button = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const slots = useSlots();
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	/**
+	* Render button content.
+	* Prevents unnecessary wrapping:
+	* - If the child is a single <Text> component, render it directly.
+	* - Otherwise, wrap the content in a <span> for correct layout.
+	*/
+	const renderContent = () => {
+		const visibleChildren = (slots.default?.())?.filter((vnode) => vnode != null && vnode.type !== Comment);
+		if (!visibleChildren?.length) return null;
+		if (visibleChildren.length === 1 && visibleChildren[0].type === Text$1) return visibleChildren[0];
+		return createVNode("span", null, [visibleChildren]);
+	};
+	return () => {
+		const children = createVNode(Fragment, null, [
+			props.leftIcon && !(0, import_isEmpty.default)(props.leftIcon) && createVNode(ResetTheme, null, { default: () => [createVNode(Icon, { "icon": props.leftIcon }, null)] }),
+			renderContent(),
+			props.rightIcon && !(0, import_isEmpty.default)(props.rightIcon) && createVNode(ResetTheme, null, { default: () => [createVNode(Icon, { "icon": props.rightIcon }, null)] })
+		]);
+		const { linkAs, ...rest } = otherProps.value;
+		return createVNode(Button$1, mergeProps(rest, { "linkAs": toRaw(linkAs) }, disabledStateProps.value, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"handleClick": handleClick,
+			"children": children
+		}), null);
+	};
+}, {
+	name: "LumxButton",
+	inheritAttrs: false,
+	props: keysOf()("leftIcon", "rightIcon", "color", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-disabled", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "linkAs", "target", "type"),
+	emits: { click: (event) => event instanceof MouseEvent }
+});
+//#endregion
+export { Button as default };

package/_internal/components/button/ButtonGroup.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ButtonGroupProps as ButtonGroupProps$1 } from "../../packages/lumx-core/src/js/components/Button/ButtonGroup.js";
+
+//#region src/components/button/ButtonGroup.d.ts
+type ButtonGroupProps = VueToJSXProps<ButtonGroupProps$1>;
+/**
+ * ButtonGroup component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ButtonGroup: import("vue").DefineSetupFnComponent<ButtonGroupProps, {}, {}, Omit<ButtonGroupProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ButtonGroup };

package/_internal/components/button/ButtonGroup.js

@@ -0,0 +1,25 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { ButtonGroup as ButtonGroup$1 } from "../../packages/lumx-core/src/js/components/Button/ButtonGroup.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/button/ButtonGroup.tsx
+/**
+* ButtonGroup component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var ButtonGroup = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => createVNode(ButtonGroup$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "ButtonGroup",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { ButtonGroup as default };

package/_internal/components/button/IconButton.d.ts

@@ -0,0 +1,33 @@
+import { HyphenatedAriaProps, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { IconButtonProps as IconButtonProps$1 } from "../../packages/lumx-core/src/js/components/Button/IconButton.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+
+//#region src/components/button/IconButton.d.ts
+type IconButtonProps = Omit<VueToJSXProps<IconButtonProps$1>, HyphenatedAriaProps> & {
+  /**
+   * Props to pass to the tooltip.
+   * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+   */
+  tooltipProps?: Partial<TooltipProps>; /** Whether the tooltip should be hidden or not. */
+  hideTooltip?: boolean;
+};
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const IconButton: import("vue").DefineSetupFnComponent<IconButtonProps, {
+  click: (event: MouseEvent) => boolean;
+}, {}, Omit<VueToJSXProps<IconButtonProps$1>, HyphenatedAriaProps> & {
+  /**
+   * Props to pass to the tooltip.
+   * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+   */
+  tooltipProps?: Partial<TooltipProps>; /** Whether the tooltip should be hidden or not. */
+  hideTooltip?: boolean;
+} & {
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { IconButton, IconButtonProps };

package/_internal/components/button/IconButton.js

@@ -0,0 +1,53 @@
+import { useAttrFallback } from "../../composables/useAttrFallback.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { IconButton as IconButton$1 } from "../../packages/lumx-core/src/js/components/Button/IconButton.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, toRaw, useAttrs } from "vue";
+/**
+* IconButton component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var IconButton = /* @__PURE__ */ defineComponent((props, { emit, expose }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const tabIndex = useAttrFallback(() => attrs.tabindex, "tabIndex");
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleClick = (event) => {
+		if (isAnyDisabled.value) return;
+		emit("click", event);
+	};
+	const buttonRef = ref(null);
+	const setButtonRef = (el) => {
+		buttonRef.value = el?.$el ?? el;
+	};
+	expose({ get $el() {
+		return buttonRef.value;
+	} });
+	return () => {
+		const { linkAs, tooltipProps, hideTooltip, ...rest } = otherProps.value;
+		return createVNode(Tooltip, mergeProps({ "label": hideTooltip ? "" : props.label }, tooltipProps), { default: () => [createVNode(IconButton$1, mergeProps(rest, {
+			"ref": setButtonRef,
+			"linkAs": toRaw(linkAs)
+		}, disabledStateProps.value, { "className": className.value }, { tabindex: tabIndex.value }, {
+			"theme": props.theme || defaultTheme.value,
+			"label": props.label,
+			"handleClick": handleClick
+		}), null)] });
+	};
+}, {
+	name: "IconButton",
+	inheritAttrs: false,
+	props: keysOf()("icon", "image", "color", "label", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-disabled", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "isDisabled", "linkAs", "target", "type", "title", "tooltipProps", "hideTooltip"),
+	emits: { click: (event) => event instanceof MouseEvent }
+});
+//#endregion
+export { IconButton as default };

package/_internal/components/button/index.d.ts

@@ -0,0 +1,4 @@
+import { IconButton, IconButtonProps } from "./IconButton.js";
+import { ButtonGroupProps } from "../../packages/lumx-core/src/js/components/Button/ButtonGroup.js";
+import { Button, ButtonProps } from "./Button.js";
+import { ButtonGroup } from "./ButtonGroup.js";

package/_internal/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { CheckboxProps as CheckboxProps$1 } from "../../packages/lumx-core/src/js/components/Checkbox/index.js";
+
+//#region src/components/checkbox/Checkbox.d.ts
+type CheckboxProps = VueToJSXProps<CheckboxProps$1, 'inputId' | 'inputRef'>;
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Checkbox: import("vue").DefineSetupFnComponent<CheckboxProps, {
+  change: (isChecked: boolean, value?: string, name?: string, event?: Event) => boolean;
+}, {}, Omit<CheckboxProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "inputRef" | "inputId"> & {
+  class?: ClassValue;
+} & {
+  onChange?: ((isChecked: boolean, value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Checkbox, CheckboxProps };