@octanejs/base-ui 0.1.19 → 0.1.21

package/src/index.ts

@@ -3,6 +3,7 @@
 // (`@octanejs/base-ui/separator`, `@octanejs/base-ui/use-render`, …). This barrel
 // re-exports the public surface for convenience as components land.
 export { Separator } from './separator';
+export { Accordion } from './accordion';
 export { AlertDialog } from './alert-dialog';
 export { Avatar } from './avatar';
 export { Button } from './button';
@@ -11,6 +12,7 @@ export { DirectionProvider, useDirection } from './direction-provider';
 export type { TextDirection } from './direction-provider';
 export { useMediaQuery } from './unstable-use-media-query';
 export { Checkbox } from './checkbox';
+export { Collapsible } from './collapsible';
 export { ContextMenu } from './context-menu';
 export { CheckboxGroup } from './checkbox-group';
 export { Dialog } from './dialog';

package/src/utils/collapsibleOpenStateMapping.ts

@@ -0,0 +1,30 @@
+// Ported from .base-ui/packages/react/src/utils/collapsibleOpenStateMapping.ts (v1.6.0).
+//
+// NAME COLLISION, upstream's not ours: Base UI exports `triggerOpenStateMapping` from BOTH
+// this module and `utils/popupStateMapping.ts`, and they emit DIFFERENT attributes —
+// `data-panel-open` here versus `data-popup-open` there. Each consumer imports the one it
+// means, and the collapsible trigger means this one. This package puts one util per file, so
+// the collapsible variant is renamed rather than shadowing the popup export: importing the
+// wrong one is a silent attribute swap that only a rendered-DOM assertion would catch.
+import type { StateAttributesMapping } from './getStateAttributesProps';
+
+// CollapsiblePanelDataAttributes.open / .closed
+const PANEL_OPEN_HOOK = { 'data-open': '' };
+const PANEL_CLOSED_HOOK = { 'data-closed': '' };
+
+// CollapsibleTriggerDataAttributes.panelOpen
+const TRIGGER_PANEL_OPEN_HOOK = { 'data-panel-open': '' };
+
+/** The panel/root mapping: `data-open` when open, `data-closed` when not. */
+export const collapsibleOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
+	open(value: boolean) {
+		return value ? PANEL_OPEN_HOOK : PANEL_CLOSED_HOOK;
+	},
+};
+
+/** Upstream's `triggerOpenStateMapping` from this module: `data-panel-open`, or nothing. */
+export const collapsibleTriggerOpenStateMapping: StateAttributesMapping<{ open: boolean }> = {
+	open(value: boolean) {
+		return value ? TRIGGER_PANEL_OPEN_HOOK : null;
+	},
+};