@kazee-ds/react 0.7.0 → 0.8.0

package/README.md

@@ -2,7 +2,7 @@
 
 Accessible Kazee React components, including Toast, built on React Aria Components. Requires React/React DOM 19+ and ESM.
 
-Version **0.7.0** adds Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
+Version **0.8.0** adds controlled selectable Card actions and builds on Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
 
 Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Normal shortcuts and scoped Escape dismissal remain available.
@@ -12,7 +12,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
 Public npm installation requires no read token or login. Preserve the application's package manager and lockfile.
 
 ```sh
-npm install --save-exact @kazee-ds/react@0.7.0 @kazee-ds/styles@0.7.0
+npm install --save-exact @kazee-ds/react@0.8.0 @kazee-ds/styles@0.8.0
 ```
 
 ## Use

package/dist/index.js

@@ -1725,7 +1725,7 @@ var NumberField = /* @__PURE__ */ Object.assign(NumberFieldRoot, {
 //#region src/Card.tsx
 /** Native primary action is a sibling of content, so nested controls remain valid HTML. */
 var CardTitleIdContext = createContext(void 0);
-function CardAction({ href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink }) {
+function CardAction({ href, target, rel, onPress, isDisabled, isSelected, actionLabel, actionLabelledBy, actionClassName, renderLink }) {
 	if (!href && !onPress) return null;
 	if (href) {
 		const props = {
@@ -1754,18 +1754,20 @@ function CardAction({ href, target, rel, onPress, isDisabled, actionLabel, actio
 		className: partClass("card__action", actionClassName),
 		"aria-label": actionLabel,
 		"aria-labelledby": actionLabelledBy,
+		"aria-pressed": isSelected,
 		disabled: isDisabled,
 		onClick: () => onPress?.()
 	};
 	return /* @__PURE__ */ jsx("button", { ...props });
 }
-function CompactCard({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, classNames, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, headerAlign, dividedHeader, flushFooter, ...props }) {
+function CompactCard({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, classNames, density, href, target, rel, onPress, isDisabled, isSelected, actionLabel, actionLabelledBy, actionClassName, renderLink, headerAlign, dividedHeader, flushFooter, ...props }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		"data-density": density,
 		"data-interactive": !!(href || onPress) || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-selected": isSelected || void 0,
 		className: partClass(partClass("card", classNames?.root), className),
 		children: [
 			/* @__PURE__ */ jsx(CardAction, {
@@ -1774,6 +1776,7 @@ function CompactCard({ title, description, headingLevel = 3, actions, header, ti
 				rel,
 				onPress,
 				isDisabled,
+				isSelected,
 				renderLink,
 				actionClassName: partClass(classNames?.action ?? "", actionClassName),
 				actionLabelledBy: actionLabelledBy ?? props["aria-labelledby"],
@@ -1815,7 +1818,7 @@ function CompactCard({ title, description, headingLevel = 3, actions, header, ti
 		]
 	});
 }
-function CardRoot({ className, classNames, children, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, ...props }) {
+function CardRoot({ className, classNames, children, density, href, target, rel, onPress, isDisabled, isSelected, actionLabel, actionLabelledBy, actionClassName, renderLink, ...props }) {
 	const titleId = useId();
 	const label = actionLabel ?? props["aria-label"];
 	return /* @__PURE__ */ jsx(CardTitleIdContext.Provider, {
@@ -1825,6 +1828,7 @@ function CardRoot({ className, classNames, children, density, href, target, rel,
 			"data-density": density,
 			"data-interactive": !!(href || onPress) || void 0,
 			"data-disabled": isDisabled || void 0,
+			"data-selected": isSelected || void 0,
 			className: partClass(partClass("card", classNames?.root), className),
 			children: [/* @__PURE__ */ jsx(CardAction, {
 				href,
@@ -1832,6 +1836,7 @@ function CardRoot({ className, classNames, children, density, href, target, rel,
 				rel,
 				onPress,
 				isDisabled,
+				isSelected,
 				renderLink,
 				actionClassName: partClass(classNames?.action ?? "", actionClassName),
 				actionLabel: label,