@kazee-ds/react 0.10.3 → 0.12.0

package/README.md

@@ -1,8 +1,8 @@
 # @kazee-ds/react
 
-Prepared **0.10.3** centers the check and indeterminate dash of composed `Checkbox.Indicator`. Use React **0.10.3** or Vue **0.10.2** with styles **0.11.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
+Prepared **0.12.0** adds `popoverAlign`/`popoverProps`/`popoverWidth` to position and size Select/Combobox/DateRangePicker/temporal picker popovers, and fixes several RTL popover-alignment bugs. Use React **0.12.0** or Vue **0.12.0** with styles **0.13.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
-The prepared styles **0.11.0** bundle tokens **0.7.0**, which add `--ds-color-text-secondary`: a cool-gray secondary text role (`#6b7090` light, `#9ca0ba` dark) that meets WCAG AA on default, raised and sunken surfaces. Published styles **0.10.3** / tokens **0.6.1** introduced `#DBDBDB` light-theme neutral borders, which remain unchanged.
+The prepared styles **0.13.0** fix the Tabs `pill`/`secondary` active-indicator color, center `enclosed` Tabs actions/extras on the tab labels, and keep a selected chip `ToggleButton` readable on hover/press; it bundles tokens **0.8.0** unchanged. Published styles **0.11.0** / tokens **0.7.0** added the AA `--ds-color-text-secondary` text role, which remains unchanged.
 Accessible Kazee React components, including Toast, built on React Aria Components. Requires React/React DOM 19+ and ESM.
 
 Version **0.10.1** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, 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).
@@ -15,7 +15,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
 After the prepared versions are published and verified, public npm installation requires no read token or login. Until then use matching local packed artifacts. Preserve the application's package manager and lockfile.
 
 ```sh
-npm install --save-exact @kazee-ds/react@0.10.3 @kazee-ds/styles@0.11.0
+npm install --save-exact @kazee-ds/react@0.12.0 @kazee-ds/styles@0.13.0
 ```
 
 ## Use

package/dist/index.js

@@ -222,6 +222,25 @@ function SelectionPopover({ maxHeight, ...props }) {
 	});
 }
 //#endregion
+//#region src/popover-position.ts
+var placements = {
+	start: "bottom start",
+	center: "bottom",
+	end: "bottom end"
+};
+/** Merge defaults, the alignment shortcut and the passthrough, ignoring undefined passthrough keys. */
+function popoverPosition({ popoverAlign, popoverProps }, defaults = {}) {
+	const result = {
+		...defaults,
+		placement: popoverAlign ? placements[popoverAlign] : defaults.placement ?? "bottom start"
+	};
+	for (const [key, value] of Object.entries(popoverProps ?? {})) if (value !== void 0) result[key] = value;
+	return result;
+}
+function popoverWidthClass(width) {
+	return `select__popover--${width}-width`;
+}
+//#endregion
 //#region src/label-context.ts
 /** Item labels use Text slots rather than introducing native label elements. */
 var ItemLabelContext = createContext(false);
@@ -724,8 +743,9 @@ function SelectCompact(props) {
 				})]
 			}),
 			/* @__PURE__ */ jsx(SelectionPopover, {
+				...popoverPosition(props),
 				maxHeight: props.maxHeight,
-				className: partClass("select__popover", props.classNames?.popover),
+				className: partClass(`select__popover ${popoverWidthClass(props.popoverWidth ?? "content")}`, props.classNames?.popover),
 				children: /* @__PURE__ */ jsx(ListBox$1, {
 					className: partClass("select__list", props.classNames?.list),
 					children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem, {
@@ -2324,6 +2344,11 @@ function mountTabsIndicator(container) {
 }
 //#endregion
 //#region src/Tabs.tsx
+function variantClass(variant, orientation) {
+	if (variant === "default") return "tabs--primary";
+	if (variant === "enclosed" && orientation === "vertical") return "tabs--secondary";
+	return `tabs--${variant}`;
+}
 function CompactTabs({ className, style, classNames, label, variant = "primary", size = "md", indicatorShadow = true, orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
 	const container = useRef(null);
 	const hasToolbar = !!(extras || actions);
@@ -2390,7 +2415,7 @@ function CompactTabs({ className, style, classNames, label, variant = "primary",
 			"tabs",
 			classNames?.root,
 			className,
-			`tabs--${variant === "default" ? "primary" : variant}`,
+			variantClass(variant, orientation),
 			`tabs--align-${align}`,
 			fullWidth && "tabs--full-width",
 			inset === "none" && "tabs--flush",
@@ -2442,7 +2467,7 @@ function TabsRoot({ className, classNames, value, defaultValue, onChange, varian
 		onSelectionChange: onChange ? (key) => onChange(String(key)) : void 0,
 		className: [
 			"tabs",
-			`tabs--${variant === "default" ? "primary" : variant}`,
+			variantClass(variant, props.orientation),
 			`tabs--align-${align}`,
 			size !== "md" && `tabs--${size}`,
 			fullWidth && "tabs--full-width",
@@ -4259,7 +4284,8 @@ function CompactCombobox(props) {
 				]
 			}),
 			/* @__PURE__ */ jsx(ComboboxPopover, {
-				className: partClass("select__popover combobox__popover", props.classNames?.popover),
+				...popoverPosition(props),
+				className: partClass(popoverWidthClass(props.popoverWidth ?? "trigger"), props.classNames?.popover),
 				children: /* @__PURE__ */ jsx(ListBox$3, {
 					className: partClass("select__list", props.classNames?.list),
 					renderEmptyState: () => /* @__PURE__ */ jsx("span", {
@@ -4436,16 +4462,23 @@ function DateRangeIndicator({ className, children, ...props }) {
 }
 function DateRangePopover({ className, children, ...props }) {
 	const range = useRange();
-	return /* @__PURE__ */ jsx(Popover$1, {
-		placement: "bottom start",
-		offset: 8,
+	const { locale } = useLocale();
+	return /* @__PURE__ */ jsx(OverlayDirection, {
 		dir: range.dir,
-		...props,
-		className: partClass("date-range__panel", className),
-		children: (state) => /* @__PURE__ */ jsx(Dialog$1, {
-			"aria-labelledby": `${range.id}-label`,
-			className: "date-range__dialog",
-			children: typeof children === "function" ? children(state) : children ?? range.panel
+		children: /* @__PURE__ */ jsx(Popover$1, {
+			placement: "bottom start",
+			offset: 8,
+			dir: range.dir,
+			...props,
+			className: partClass("date-range__panel", className),
+			children: (state) => /* @__PURE__ */ jsx(I18nProvider, {
+				locale,
+				children: /* @__PURE__ */ jsx(Dialog$1, {
+					"aria-labelledby": `${range.id}-label`,
+					className: "date-range__dialog",
+					children: typeof children === "function" ? children(state) : children ?? range.panel
+				})
+			})
 		})
 	});
 }
@@ -5279,11 +5312,12 @@ function DateRangePickerRoot(props) {
 			})
 		]
 	});
+	const rangeLocale = new Intl.Locale(locale, {
+		calendar: "gregory",
+		...dir ? { script: dir === "rtl" ? "Arab" : "Latn" } : {}
+	}).toString();
 	return /* @__PURE__ */ jsx(I18nProvider, {
-		locale: new Intl.Locale(locale, {
-			calendar: "gregory",
-			...dir ? { script: dir === "rtl" ? "Arab" : "Latn" } : {}
-		}).toString(),
+		locale: rangeLocale,
 		children: /* @__PURE__ */ jsx(DateRangeCompositionContext.Provider, {
 			value: {
 				id,
@@ -5382,16 +5416,24 @@ function DateRangePickerRoot(props) {
 									children: panel
 								})
 							})
-						}) : /* @__PURE__ */ jsx(Popover$1, {
-							className: partClass("date-range__panel", props.classNames?.panel),
-							placement: "bottom start",
-							offset: 8,
-							containerPadding: 16,
+						}) : /* @__PURE__ */ jsx(OverlayDirection, {
 							dir,
-							children: /* @__PURE__ */ jsx(Dialog$1, {
-								className: partClass("date-range__dialog", props.classNames?.dialog),
-								"aria-labelledby": `${id}-title`,
-								children: panel
+							children: /* @__PURE__ */ jsx(Popover$1, {
+								className: partClass("date-range__panel", props.classNames?.panel),
+								...popoverPosition(props, {
+									placement: "bottom start",
+									offset: 8,
+									containerPadding: 16
+								}),
+								dir,
+								children: /* @__PURE__ */ jsx(I18nProvider, {
+									locale: rangeLocale,
+									children: /* @__PURE__ */ jsx(Dialog$1, {
+										className: partClass("date-range__dialog", props.classNames?.dialog),
+										"aria-labelledby": `${id}-title`,
+										children: panel
+									})
+								})
 							})
 						})]
 					}),
@@ -7006,12 +7048,28 @@ function TemporalPickerContent({ children, className, ...props }) {
 		children: children ?? c.panel
 	});
 }
-function TemporalPickerPopover({ children, className, ...props }) {
+/** Position props set on this part win over the picker's `popoverAlign` / `popoverProps`. */
+function TemporalPickerPopover({ children, className, placement, offset, crossOffset, shouldFlip, containerPadding, ...props }) {
 	const c = usePicker();
-	return /* @__PURE__ */ jsx(Popover$1, {
-		className: partClass("date-range__panel temporal-picker__panel", className),
+	const position = popoverPosition({
+		popoverAlign: c.options.popoverAlign,
+		popoverProps: {
+			...c.options.popoverProps,
+			...Object.fromEntries(Object.entries({
+				placement,
+				offset,
+				crossOffset,
+				shouldFlip,
+				containerPadding
+			}).filter(([, value]) => value !== void 0))
+		}
+	}, {
 		placement: "bottom start",
-		offset: 8,
+		offset: 8
+	});
+	const popover = /* @__PURE__ */ jsx(Popover$1, {
+		className: partClass("date-range__panel temporal-picker__panel", className),
+		...position,
 		children: /* @__PURE__ */ jsx(Dialog$1, {
 			"aria-labelledby": `${c.id}-label`,
 			className: "date-range__dialog",
@@ -7021,6 +7079,10 @@ function TemporalPickerPopover({ children, className, ...props }) {
 			})
 		})
 	});
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir: c.options.dir,
+		children: popover
+	});
 }
 function action(type) {
 	return function PickerAction({ children, className, onClick, ...props }) {