feat(react-divider): implement headless style hook for Divider component (#35506)

Author: dmytrokirpa

change/@fluentui-react-divider-dfaf2632-108c-4558-8643-a154b097f22e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: implement headless style hook for Divider component",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.headless.ts

@@ -0,0 +1,45 @@
+'use client';
+
+import { DividerSlots, DividerState } from './Divider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const dividerClassNames: SlotClassNames<DividerSlots> = {
+  root: 'fui-Divider',
+  wrapper: 'fui-Divider__wrapper',
+};
+
+/**
+ * Attaches only semantic slot class names and state modifiers
+ */
+export const useDividerStyles_unstable = (state: DividerState): DividerState => {
+  'use no memo';
+
+  const { alignContent, appearance, inset, vertical } = state;
+
+  state.root.className = [
+    dividerClassNames.root,
+
+    // Alignment
+    `${dividerClassNames}--align-${alignContent}`,
+
+    // Appearance
+    `${dividerClassNames}--${appearance}`,
+
+    // Orientation
+    vertical ? `${dividerClassNames}--vertical` : `${dividerClassNames}--horizontal`,
+
+    // Inset
+    inset && `${dividerClassNames}--inset`,
+
+    // User provided class name
+    state.root.className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (state.wrapper) {
+    state.wrapper.className = [dividerClassNames.wrapper, state.wrapper.className].filter(Boolean).join(' ');
+  }
+
+  return state;
+};