@inc2734/unitone-css 1.4.1 → 1.4.2

package/src/layout-primitives/responsive-grid/index.jsx

@@ -1,21 +1,31 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const ResponsiveGrid = ({
-  columnMinWidth,
-  gap,
-  autoRepeat,
-  divider,
-  dividerWidth,
-  dividerStyle,
-  dividerColor,
-  stairs,
-  stairsUp,
-  containerType,
-  responsiveContext,
-  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
-  style,
-  ...props
-}) => {
+export const ResponsiveGrid = React.forwardRef(function ResponsiveGrid(
+  {
+    columnMinWidth,
+    gap,
+    autoRepeat,
+    divider,
+    dividerWidth,
+    dividerStyle,
+    dividerColor,
+    stairs,
+    stairsUp,
+    containerType,
+    responsiveContext,
+    fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors(
+    { divider: '' !== (divider ?? ''), stairs: '' !== (stairs ?? '') },
+    forwardedRef,
+  );
   style = {
     ...style,
     '--unitone--column-min-width': '' !== columnMinWidth ? columnMinWidth : undefined,
@@ -41,8 +51,10 @@ export const ResponsiveGrid = ({
         .join(' ')}
       style={style}
       {...props}
+      ref={layoutRef}
+      data-unitone-react-layout=""
     >
       {props.children}
     </div>
   );
-};
+});

package/src/layout-primitives/stack/index.jsx

@@ -1,20 +1,27 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const Stack = ({
-  gap,
-  negative,
-  revert,
-  divider,
-  dividerWidth,
-  dividerStyle,
-  dividerColor,
-  containerType,
-  responsiveContext,
-  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
-  tagName = 'div',
-  style,
-  ...props
-}) => {
+export const Stack = React.forwardRef(function Stack(
+  {
+    gap,
+    negative,
+    revert,
+    divider,
+    dividerWidth,
+    dividerStyle,
+    dividerColor,
+    containerType,
+    responsiveContext,
+    fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
+    tagName = 'div',
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors({ divider: '' !== (divider ?? '') }, forwardedRef);
   const Tag = tagName;
 
   style = {
@@ -40,8 +47,10 @@ export const Stack = ({
         .join(' ')}
       style={style}
       {...props}
+      ref={layoutRef}
+      data-unitone-react-layout=""
     >
       {props.children}
     </Tag>
   );
-};
+});

package/src/layout-primitives/switcher/index.jsx

@@ -1,21 +1,28 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const Switcher = ({
-  gap,
-  columnGap,
-  rowGap,
-  limit,
-  revert,
-  threshold,
-  alignItems,
-  stairs,
-  stairsUp,
-  containerType,
-  responsiveContext,
-  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
-  style,
-  ...props
-}) => {
+export const Switcher = React.forwardRef(function Switcher(
+  {
+    gap,
+    columnGap,
+    rowGap,
+    limit,
+    revert,
+    threshold,
+    alignItems,
+    stairs,
+    stairsUp,
+    containerType,
+    responsiveContext,
+    fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors({ stairs: '' !== (stairs ?? '') }, forwardedRef);
   style = {
     ...style,
     '--unitone--threshold': '' !== threshold ? threshold : undefined,
@@ -40,8 +47,10 @@ export const Switcher = ({
         .join(' ')}
       style={style}
       {...props}
+      ref={layoutRef}
+      data-unitone-react-layout=""
     >
       {props.children}
     </div>
   );
-};
+});

package/src/layout-primitives/vertical-writing/behavior.js

@@ -1,8 +1,10 @@
+import { resetLayoutBehavior } from '../../layout-behavior-state';
 import { verticalsResizeObserver } from '../../library';
 import { registerLayoutInitializer } from '../../register-layout-initializer';
 
 registerLayoutInitializer({
   key: 'layout-primitives/vertical-writing',
-  selector: '[data-unitone-layout~="vertical-writing"]',
+  selector: '[data-unitone-layout~="vertical-writing"]:not([data-unitone-react-layout])',
+  reset: (target) => resetLayoutBehavior(target, 'vertical'),
   initialize: verticalsResizeObserver,
 });

package/src/layout-primitives/vertical-writing/index.jsx

@@ -1,15 +1,13 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const VerticalWriting = ({
-  textOrientation,
-  gap,
-  maxHeight,
-  switchWritingMode,
-  threshold,
-  queryContext,
-  style,
-  ...props
-}) => {
+export const VerticalWriting = React.forwardRef(function VerticalWriting(
+  { textOrientation, gap, maxHeight, switchWritingMode, threshold, queryContext, style, ...props },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors({ vertical: true }, forwardedRef);
   style = {
     ...style,
     '--unitone--max-height': '' !== maxHeight ? maxHeight : undefined,
@@ -30,9 +28,11 @@ export const VerticalWriting = ({
           .join(' ')}
         style={style}
         {...props}
+        ref={layoutRef}
+        data-unitone-react-layout=""
       >
         {props.children}
       </div>
     </div>
   );
-};
+});

package/src/layout-primitives/with-sidebar/index.jsx

@@ -1,22 +1,29 @@
+'use client';
+
 import React from 'react';
+import { useLayoutBehaviors } from '../../use-layout-behaviors';
 
-export const WithSidebar = ({
-  gap,
-  columnGap,
-  rowGap,
-  contentMinWidth,
-  revert,
-  sidebar,
-  sidebarWidth,
-  alignItems,
-  overflow,
-  divider,
-  dividerWidth,
-  dividerStyle,
-  dividerColor,
-  style,
-  ...props
-}) => {
+export const WithSidebar = React.forwardRef(function WithSidebar(
+  {
+    gap,
+    columnGap,
+    rowGap,
+    contentMinWidth,
+    revert,
+    sidebar,
+    sidebarWidth,
+    alignItems,
+    overflow,
+    divider,
+    dividerWidth,
+    dividerStyle,
+    dividerColor,
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const layoutRef = useLayoutBehaviors({ divider: '' !== (divider ?? '') }, forwardedRef);
   style = {
     ...style,
     '--unitone--sidebar-width': '' !== sidebarWidth ? sidebarWidth : undefined,
@@ -43,8 +50,10 @@ export const WithSidebar = ({
         .join(' ')}
       style={style}
       {...props}
+      ref={layoutRef}
+      data-unitone-react-layout=""
     >
       {props.children}
     </div>
   );
-};
+});