@publicplan/kern-react-kit 1.3.2 → 1.3.3

package/dist/index.cjs

@@ -299,7 +299,7 @@ const _excluded$86 = [
 	"isStretched",
 	"className"
 ];
-const getIcon$1 = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+const getIcon = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 	name: iconProps.name,
 	size: iconProps.size
 }) : null;
@@ -311,9 +311,9 @@ const Link = (_ref) => {
 		className: linkClass,
 		target: (icon === null || icon === void 0 ? void 0 : icon.name) === "open-in-new" ? "_blank" : target,
 		children: [
-			iconLeft && getIcon$1(icon),
+			iconLeft && getIcon(icon),
 			linkText,
-			!iconLeft && getIcon$1(icon)
+			!iconLeft && getIcon(icon)
 		]
 	}));
 };
@@ -584,16 +584,18 @@ const _excluded$70 = [
 	"variant",
 	"isBlock",
 	"icon",
+	"iconSize",
 	"iconOnly",
 	"iconLeft",
 	"text",
 	"children",
 	"className"
+], _excluded2 = [
+	"href",
+	"target",
+	"disabled"
 ];
-const getIcon = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-	name: iconProps.name,
-	size: iconProps.size
-}) : null;
+const isIconProps = (icon) => typeof icon === "object" && icon !== null && "name" in icon && !react.default.isValidElement(icon);
 const IconOnlyLabel = ({ labelText }) => {
 	if (!labelText) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -601,26 +603,80 @@ const IconOnlyLabel = ({ labelText }) => {
 		children: labelText.replace(/^./, (c) => c.toUpperCase())
 	});
 };
-const Button = (_ref) => {
-	let { variant = "primary", isBlock, icon, iconOnly, iconLeft, text, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$70);
+const Button = react.default.forwardRef((props, ref) => {
+	const { variant = "primary", isBlock, icon, iconSize = "default", iconOnly, iconLeft, text, children, className } = props, rest = _objectWithoutProperties(props, _excluded$70);
 	const classes = cn("kern-btn", isBlock && "kern-btn--block", `kern-btn--${variant}`, className);
-	const iconElement = getIcon(icon);
-	if (iconOnly) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({}, rest), {}, {
-		className: classes,
-		children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText: text || (icon === null || icon === void 0 ? void 0 : icon.name) })]
-	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({}, rest), {}, {
-		className: classes,
-		children: [
+	let iconElement = null;
+	if (icon && (typeof icon === "object" && "name" in icon && icon.name.length > 0 || react.default.isValidElement(icon))) {
+		if (isIconProps(icon)) iconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			name: icon.name,
+			size: icon.size
+		});
+		else if (react.default.isValidElement(icon)) iconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("kern-icon", `kern-icon--${iconSize}`),
+			style: {
+				mask: "none",
+				WebkitMask: "none",
+				background: "none",
+				display: "inline-flex"
+			},
+			"aria-hidden": true,
+			children: icon
+		});
+	}
+	if ("as" in props && props.as === "a" && props.href) {
+		const _ref = rest, { href, target, disabled } = _ref, anchorRest = _objectWithoutProperties(_ref, _excluded2);
+		if (iconOnly) {
+			const labelText = text || (isIconProps(icon) ? icon.name : void 0);
+			const ariaDisabled = disabled ? {
+				"aria-disabled": true,
+				tabIndex: -1,
+				onClick: (e) => e.preventDefault(),
+				href: void 0
+			} : {};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", _objectSpread2(_objectSpread2(_objectSpread2({
+				ref,
+				href,
+				target,
+				className: classes
+			}, anchorRest), ariaDisabled), {}, { children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText })] }));
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", _objectSpread2(_objectSpread2({
+			ref,
+			href,
+			target,
+			className: classes
+		}, anchorRest), {}, { children: [
 			iconLeft && iconElement,
-			text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "kern-label",
 				children: children || text
 			}),
 			!iconLeft && iconElement
-		]
-	}));
-};
+		] }));
+	}
+	const buttonRest = rest;
+	if (iconOnly) {
+		const labelText = text || (isIconProps(icon) ? icon.name : void 0);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({
+			ref,
+			type: "button",
+			className: classes
+		}, buttonRest), {}, { children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText })] }));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({
+		ref,
+		type: "button",
+		className: classes
+	}, buttonRest), {}, { children: [
+		iconLeft && iconElement,
+		text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "kern-label",
+			children: children || text
+		}),
+		!iconLeft && iconElement
+	] }));
+});
 Button.isInteractive = true;
 
 //#endregion
@@ -1228,7 +1284,6 @@ const FieldsetRoot = ({ children, id, className, style, error = false }) => {
 		className: cn(`kern-fieldset`, error && "kern-fieldset--error", className),
 		style,
 		id,
-		role: "group",
 		"aria-describedby": hintText,
 		children
 	});
@@ -1318,12 +1373,13 @@ const _excluded$41 = [
 	"children",
 	"className",
 	"size",
-	"type"
+	"type",
+	"horizontal"
 ];
 const ListsRoot = (_ref) => {
-	let { children, className, size = "default", type = "bullet" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$41);
+	let { children, className, size = "default", type = "bullet", horizontal = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$41);
 	const Component = type === "number" ? "ol" : "ul";
-	const listClasses = cn("kern-list", size !== "default" && `kern-list--${size}`, type && `kern-list--${type}`, className);
+	const listClasses = cn("kern-list", size !== "default" && `kern-list--${size}`, type && `kern-list--${type}`, horizontal && "kern-list--horizontal", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: listClasses,
 		children
@@ -1907,23 +1963,39 @@ const _excluded$18 = [
 	"variant",
 	"className",
 	"icon",
+	"iconSize",
 	"showIcon"
 ];
 const Badge = (_ref) => {
-	let { title, variant, className, icon, showIcon = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$18);
+	let { title, variant, className, icon, iconSize = "default", showIcon = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$18);
+	const customIconElement = icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cn("kern-icon", `kern-icon--${iconSize}`),
+		style: {
+			mask: "none",
+			WebkitMask: "none",
+			background: "none",
+			display: "inline-flex"
+		},
+		"aria-hidden": true,
+		children: icon
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", _objectSpread2(_objectSpread2({}, rest), {}, {
 		role: "status",
 		className: cn(`kern-badge kern-badge--${variant}`, className),
-		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, _objectSpread2(_objectSpread2({}, icon), {}, {
-			"aria-hidden": true,
-			name: variant
-		})), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "kern-label kern-label-small",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "kern-label kern-sr-only",
-				children: variant.replace(/^./, (c) => c.toUpperCase())
-			}), title]
-		})]
+		children: [
+			customIconElement,
+			!icon && showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				"aria-hidden": true,
+				name: variant
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "kern-label kern-label-small",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "kern-label kern-sr-only",
+					children: variant.replace(/^./, (c) => c.toUpperCase())
+				}), title]
+			})
+		]
 	}));
 };
 
@@ -2474,6 +2546,16 @@ const Kopfzeile = (_ref) => {
 	})), customStyle] });
 };
 
+//#endregion
+//#region src/components/LinkButton/LinkButton.tsx
+const LinkButton = (props) => {
+	if (!props.href) {
+		console.error("href ist für LinkButton erforderlich");
+		return null;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, _objectSpread2({ as: "a" }, props));
+};
+
 //#endregion
 //#region src/components/Loader/Loader.tsx
 const _excluded$3 = [
@@ -2640,6 +2722,7 @@ exports.InputPrimitive = InputPrimitive;
 exports.Kopfzeile = Kopfzeile;
 exports.Label = Label;
 exports.Link = Link;
+exports.LinkButton = LinkButton;
 exports.Lists = Lists;
 exports.Loader = Loader;
 exports.NumberInput = NumberInput;