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

package/_internal/packages/lumx-core/src/js/components/AlertDialog/index.js

@@ -0,0 +1,116 @@
+import { ColorPalette, Emphasis, Kind, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { mdiAlert } from "@lumx/icons/esm/alert.js";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { mdiCheckCircle } from "@lumx/icons/esm/check-circle.js";
+import { mdiInformation } from "@lumx/icons/esm/information.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/AlertDialog/index.tsx
+/**
+* Associative map from message kind to color and icon.
+*/
+var CONFIG = {
+	[Kind.error]: {
+		color: ColorPalette.red,
+		icon: mdiAlert
+	},
+	[Kind.info]: {
+		color: ColorPalette.blue,
+		icon: mdiInformation
+	},
+	[Kind.success]: {
+		color: ColorPalette.green,
+		icon: mdiCheckCircle
+	},
+	[Kind.warning]: {
+		color: ColorPalette.yellow,
+		icon: mdiAlertCircle
+	}
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "AlertDialog";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-alert-dialog";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	size: Size.tiny,
+	kind: Kind.info
+};
+/**
+* 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 = (props) => {
+	const { id, title, className, cancelProps, confirmProps, ref, kind = DEFAULT_PROPS.kind, size = DEFAULT_PROPS.size, dialogProps, children, DescriptionElement, cancelButtonRef, confirmationButtonRef, focusElement, Dialog, Toolbar, Button, Icon, ...forwardedProps } = props;
+	const { color, icon } = CONFIG[kind] || {};
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;
+	const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		ref,
+		focusElement: focusElement ?? (cancelProps ? cancelButtonRef : confirmationButtonRef),
+		size,
+		dialogProps: {
+			id,
+			role: "alertdialog",
+			"aria-labelledby": titleId,
+			"aria-describedby": descriptionId,
+			...dialogProps
+		},
+		className: import_classnames.default(className, block({ [`kind-${kind}`]: Boolean(kind) })),
+		...forwardedProps,
+		children: [
+			/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(Toolbar, {
+				className: "lumx-spacing-margin-horizontal",
+				before: /* @__PURE__ */ jsx(Icon, {
+					icon,
+					size: Size.s,
+					color
+				}),
+				label: /* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					className: "lumx-typography-title",
+					children: title
+				})
+			}) }),
+			children && /* @__PURE__ */ jsx(DescriptionElement, {
+				id: descriptionId,
+				className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge",
+				children
+			}),
+			/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Toolbar, {
+				className: "lumx-spacing-margin-horizontal",
+				after: /* @__PURE__ */ jsxs(Fragment, { children: [cancelProps && /* @__PURE__ */ jsx(Button, {
+					...forwardedCancelProps,
+					ref: cancelButtonRef,
+					emphasis: Emphasis.medium,
+					onClick: cancelOnClick,
+					children: cancelLabel
+				}), /* @__PURE__ */ jsx(Button, {
+					...forwardedConfirmProps,
+					ref: confirmationButtonRef,
+					color,
+					className: "lumx-spacing-margin-left-regular",
+					onClick: confirmOnClick,
+					children: confirmLabel
+				})] })
+			}) })
+		]
+	});
+};
+//#endregion
+export { AlertDialog, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Avatar/index.d.ts

@@ -0,0 +1,27 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Avatar/index.d.ts
+/**
+ * Avatar sizes.
+ */
+type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface AvatarProps extends HasTheme, HasClassName {
+  /** Action toolbar content. */
+  actions?: JSXElement;
+  /** Badge. */
+  badge?: JSXElement;
+  /** Image URL. */
+  image: JSXElement;
+  /** Size variant. */
+  size?: AvatarSize;
+  /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+  ref?: CommonRef;
+}
+//#endregion
+export { AvatarProps, AvatarSize };

package/_internal/packages/lumx-core/src/js/components/Avatar/index.js

@@ -0,0 +1,49 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Avatar/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Avatar";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-avatar";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.m };
+/**
+* Avatar component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Avatar = (props) => {
+	const { actions, badge, className, image, size = DEFAULT_PROPS.size, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`size-${size}`]: Boolean(size),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: [
+			image,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: element("actions"),
+				children: actions
+			}),
+			badge && /* @__PURE__ */ jsx("div", {
+				className: element("badge"),
+				children: badge
+			})
+		]
+	});
+};
+//#endregion
+export { Avatar, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, element };

package/_internal/packages/lumx-core/src/js/components/Badge/BadgeWrapper.d.ts

@@ -0,0 +1,14 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Badge/BadgeWrapper.d.ts
+interface BadgeWrapperProps extends HasClassName {
+  /** Badge element to display */
+  badge?: JSXElement;
+  /** Content to wrap with badge */
+  children?: JSXElement;
+  /** Ref forwarding */
+  ref?: CommonRef;
+}
+//#endregion
+export { BadgeWrapperProps };

package/_internal/packages/lumx-core/src/js/components/Badge/BadgeWrapper.js

@@ -0,0 +1,21 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Badge/BadgeWrapper.tsx
+var COMPONENT_NAME = "BadgeWrapper";
+var CLASSNAME = "lumx-badge-wrapper";
+var { block, element } = bem(CLASSNAME);
+var BadgeWrapper = (props) => {
+	const { badge, children, className, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block()),
+		children: [children, badge && /* @__PURE__ */ jsx("div", {
+			className: element("badge"),
+			children: badge
+		})]
+	});
+};
+//#endregion
+export { BadgeWrapper, CLASSNAME, COMPONENT_NAME };

package/_internal/packages/lumx-core/src/js/components/Badge/index.d.ts

@@ -0,0 +1,18 @@
+import { ColorPalette } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Badge/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps extends HasClassName {
+  /** Badge content. */
+  children?: JSXElement;
+  /** Color variant. */
+  color?: ColorPalette;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { BadgeProps };

package/_internal/packages/lumx-core/src/js/components/Badge/index.js

@@ -0,0 +1,38 @@
+import { ColorPalette } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Badge/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Badge";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-badge";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { color: ColorPalette.primary };
+/**
+* Badge component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Badge = (props) => {
+	const { children, className, color = DEFAULT_PROPS.color, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`color-${color}`]: Boolean(color) })),
+		children
+	});
+};
+Badge.displayName = COMPONENT_NAME;
+Badge.className = CLASSNAME;
+Badge.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Badge };

package/_internal/packages/lumx-core/src/js/components/Button/Button.d.ts

@@ -0,0 +1,41 @@
+import { JSXElement } from "../../types/JSXElement.js";
+import { LumxClassName } from "../../types/LumxClassName.js";
+import { BaseButtonProps } from "./ButtonRoot.js";
+
+//#region ../lumx-core/src/js/components/Button/Button.d.ts
+/**
+ * Button emphasis definition.
+ * @deprecated Use Emphasis instead.
+ */
+declare const ButtonEmphasis: {
+  readonly low: "low";
+  readonly medium: "medium";
+  readonly high: "high";
+};
+/**
+ * Defines the props of the component.
+ */
+interface ButtonProps extends BaseButtonProps {
+  /** Left icon (SVG path). */
+  leftIcon?: string;
+  /** Right icon (SVG path). */
+  rightIcon?: string;
+  /** When `true`, the button gets as large as possible. */
+  fullWidth?: boolean;
+  /** Children */
+  children?: JSXElement;
+}
+/**
+ * Component display name.
+ */
+declare const COMPONENT_NAME = "Button";
+/**
+ * Component default class name and class prefix.
+ */
+declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+declare const DEFAULT_PROPS: Partial<ButtonProps>;
+//#endregion
+export { ButtonEmphasis, ButtonProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Button/Button.js

@@ -0,0 +1,46 @@
+import { Emphasis, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ButtonRoot } from "./ButtonRoot.js";
+//#region ../lumx-core/src/js/components/Button/Button.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Button";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-button";
+var { modifier } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	emphasis: Emphasis.high,
+	size: Size.m
+};
+/**
+* Button component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Button = (props) => {
+	const { className, emphasis = DEFAULT_PROPS.emphasis, leftIcon, rightIcon, size = DEFAULT_PROPS.size, ...forwardedProps } = props;
+	const buttonClassName = import_classnames.default(className, modifier({
+		"has-left-icon": Boolean(leftIcon),
+		"has-right-icon": Boolean(rightIcon)
+	}));
+	return ButtonRoot({
+		emphasis,
+		size,
+		...forwardedProps,
+		className: buttonClassName,
+		variant: "button"
+	});
+};
+Button.displayName = COMPONENT_NAME;
+Button.className = CLASSNAME;
+Button.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Button, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Button/ButtonGroup.d.ts
+/**
+ * Defines the props of the component
+ */
+interface ButtonGroupProps extends HasClassName {
+  /**
+   * Children
+   */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ButtonGroupProps };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonGroup.js

@@ -0,0 +1,34 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Button/ButtonGroup.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ButtonGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-button-group";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ButtonGroup component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ButtonGroup = (props) => {
+	const { children, className, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children
+	});
+};
+ButtonGroup.displayName = COMPONENT_NAME;
+ButtonGroup.className = CLASSNAME;
+ButtonGroup.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ButtonGroup, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonRoot.d.ts

@@ -0,0 +1,46 @@
+import { ColorPalette, Emphasis, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { AriaAttributes } from "../../types/AriaAttributes.js";
+import { BaseClickableProps } from "../RawClickable/index.js";
+
+//#region ../lumx-core/src/js/components/Button/ButtonRoot.d.ts
+/**
+ * Button size definition.
+ */
+type ButtonSize = Extract<Size, 's' | 'm'>;
+interface BaseButtonProps extends Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>, HasClassName, HasTheme, HasAriaDisabled, BaseClickableProps {
+  /** Color variant. */
+  color?: ColorPalette;
+  /** Emphasis variant. */
+  emphasis?: Emphasis;
+  /** Whether or not the button has a background color in low emphasis. */
+  hasBackground?: boolean;
+  /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */
+  href?: string;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Whether the component is selected or not (unsupported in `high` emphasis). */
+  isSelected?: boolean;
+  /** Native button name property. */
+  name?: string;
+  /** Size variant. */
+  size?: ButtonSize;
+  /** Native anchor target property. */
+  target?: '_self' | '_blank' | '_parent' | '_top';
+  /** Native button type. */
+  type?: 'submit' | 'reset' | 'button' | undefined;
+  /** Custom component for the link (can be used to inject router Link). */
+  linkAs?: 'a' | any;
+  /** whether the button is dispalyed in full width or not */
+  fullWidth?: boolean;
+  /** whether the button is currently active or not */
+  isActive?: boolean;
+  /** whether the button is currently focused or not */
+  isFocused?: boolean;
+  /** whether the button is currently focused or not */
+  isHovered?: boolean;
+}
+//#endregion
+export { BaseButtonProps, ButtonSize };

package/_internal/packages/lumx-core/src/js/components/Button/ButtonRoot.js

@@ -0,0 +1,75 @@
+import { ColorPalette, Emphasis, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Button/ButtonRoot.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ButtonRoot";
+var { block: buttonWrapperBlock } = bem(`lumx-button-wrapper`);
+var { block: buttonBlock } = bem(`lumx-button`);
+/**
+* Render a button wrapper with the ButtonRoot inside.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var renderButtonWrapper = (props) => {
+	const { color, emphasis, variant, fullWidth } = props;
+	const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
+	return /* @__PURE__ */ jsx("div", {
+		className: buttonWrapperBlock({
+			[`color-${adaptedColor}`]: Boolean(adaptedColor),
+			[`variant-${variant}`]: Boolean(variant),
+			"is-full-width": fullWidth
+		}),
+		children: ButtonRoot({
+			...props,
+			hasBackground: false
+		})
+	});
+};
+/**
+* ButtonRoot component.
+*
+* @param  props Component props.
+* @return JSX Element.
+*/
+var ButtonRoot = (props) => {
+	const { "aria-label": ariaLabel, "aria-disabled": ariaDisabled, children, className, color, emphasis, hasBackground, isSelected, isActive, isFocused, isHovered, linkAs, size, theme = Theme.light, variant, fullWidth, ref, ...forwardedProps } = props;
+	const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
+	if (hasBackground) return renderButtonWrapper({
+		...props,
+		ref,
+		variant,
+		color: adaptedColor
+	});
+	const buttonClassName = import_classnames.default(className, buttonBlock({
+		[`color-${adaptedColor}`]: Boolean(adaptedColor),
+		[`emphasis-${emphasis}`]: Boolean(emphasis),
+		"is-selected": isSelected,
+		"is-disabled": Boolean(props.isDisabled || props["aria-disabled"]),
+		"is-active": isActive,
+		"is-focused": isFocused,
+		"is-hovered": isHovered,
+		[`size-${size}`]: Boolean(size),
+		[`theme-${theme}`]: Boolean(emphasis === Emphasis.high && theme),
+		[`variant-${variant}`]: Boolean(variant),
+		"is-full-width": fullWidth
+	}));
+	return RawClickable({
+		as: linkAs || (forwardedProps.href ? "a" : "button"),
+		...forwardedProps,
+		"aria-disabled": ariaDisabled,
+		"aria-label": ariaLabel,
+		ref,
+		className: buttonClassName,
+		children
+	});
+};
+ButtonRoot.displayName = COMPONENT_NAME;
+ButtonRoot.defaultProps = {};
+//#endregion
+export { ButtonRoot };

package/_internal/packages/lumx-core/src/js/components/Button/IconButton.d.ts

@@ -0,0 +1,24 @@
+import { BaseButtonProps } from "./ButtonRoot.js";
+
+//#region ../lumx-core/src/js/components/Button/IconButton.d.ts
+interface IconButtonProps extends BaseButtonProps {
+  /**
+   * Icon (SVG path).
+   * If `image` is also set, `image` will be used instead.
+   */
+  icon?: string;
+  /**
+   * Image (image url).
+   * Has priority over `icon`.
+   */
+  image?: string;
+  /**
+   * Label text (required for a11y purpose).
+   * If you really don't want an aria-label, you can set an empty label (this is not recommended).
+   */
+  label: string;
+  /** text to be displayed on hover */
+  title?: string;
+}
+//#endregion
+export { IconButtonProps };

package/_internal/packages/lumx-core/src/js/components/Button/IconButton.js

@@ -0,0 +1,46 @@
+import { Emphasis, Size } from "../../constants/enums/index.js";
+import { ButtonRoot } from "./ButtonRoot.js";
+import { Icon } from "../Icon/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Button/IconButton.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "IconButton";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-icon-button";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	emphasis: Emphasis.high,
+	size: Size.m
+};
+/**
+* IconButton component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var IconButton = (props) => {
+	const { emphasis = DEFAULT_PROPS.emphasis, image, icon, label, size = DEFAULT_PROPS.size, ...forwardedProps } = props;
+	const defaultChildren = image ? /* @__PURE__ */ jsx("img", {
+		alt: "",
+		src: image
+	}) : Icon({ icon });
+	return ButtonRoot({
+		emphasis,
+		size,
+		...forwardedProps,
+		"aria-label": label,
+		variant: "icon",
+		children: defaultChildren
+	});
+};
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, IconButton };

package/_internal/packages/lumx-core/src/js/components/Checkbox/index.d.ts

@@ -0,0 +1,35 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasChecked } from "../../types/HasChecked.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Checkbox/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface CheckboxProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked<boolean | 'intermediate'> {
+  /** Helper text. */
+  helper?: string;
+  /** Native input id property. */
+  id?: string;
+  /** Label text. */
+  label?: JSXElement;
+  /** Native input name property. */
+  name?: string;
+  /** Native input value property. */
+  value?: string;
+  /** optional props for input */
+  inputProps?: Record<string, any>;
+  /** Native input ref. */
+  inputRef?: CommonRef;
+  /** Native input id. */
+  inputId: string;
+  /** On change callback. */
+  handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { CheckboxProps };