[pull] main from chakra-ui:main

.changeset/update-ark-ui-5.37.2.md

@@ -0,0 +1,28 @@
+---
+"@chakra-ui/react": minor
+---
+
+Update Ark UI to v5.37.2
+
+- **Splitter**: Accept CSS units (`px`, `em`, `rem`, `vh`, `vw`) for size props,
+  add per-panel `resizeBehavior` (`"preserve-pixel-size"`), and fix focus not
+  moving to a resize trigger on click.
+- **Color Picker, Combobox, Date Picker, Hover Card, Menu, Popover, Select,
+  Tooltip**: Add `data-side` to placement-aware parts for placement-based
+  styling.
+- **Accordion**: Remove redundant `aria-disabled` from item triggers.
+- **Color Picker**: Fire `onValueChangeEnd` when picking a color with the
+  EyeDropper API.
+- **Combobox**: Don't submit the form on `Enter` when an item is highlighted or
+  the value is rejected by `allowCustomValue: false`.
+- **Date Picker**: Fix range-mode clear not resetting active/hovered state, the
+  native month/year select inside modals (Firefox), and `outsideDaySelectable`
+  hover changing the visible month.
+- **Dialog, Hover Card, Menu, Popover, Tooltip**: Fix shared custom trigger
+  elements being ignored, and trigger lookups in shadow DOM.
+- **Dialog, Popover**: Fix the page being left uninteractive after closing in
+  React 19 Strict Mode.
+- **Number Input**: Fix blur behavior when the input is cleared and `min` is
+  greater than `0`.
+- **Pin Input**: Fix `data-filled` being set on every input on first render.
+- **Tabs**: Update the indicator when the tab list resizes (responsive reflow).

apps/compositions/package.json

@@ -21,7 +21,7 @@
     "@chakra-ui/react": "workspace:*",
     "@floating-ui/react": "^0.27.16",
     "@hookform/resolvers": "5.2.2",
-    "@internationalized/date": "3.12.0",
+    "@internationalized/date": "3.12.2",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.18",
     "@tiptap/core": "^3.11.0",

apps/compositions/src/examples/splitter-css-units.tsx

@@ -0,0 +1,29 @@
+import { Center, Splitter } from "@chakra-ui/react"
+
+export const SplitterCssUnits = () => {
+  return (
+    <Splitter.Root
+      panels={[
+        { id: "nav", minSize: "240px", maxSize: "480px" },
+        { id: "main", minSize: 30 },
+      ]}
+      defaultSize={["240px", "60vw"]}
+      borderWidth="1px"
+      minH="60"
+    >
+      <Splitter.Panel id="nav">
+        <Center boxSize="full" textStyle="2xl">
+          Nav
+        </Center>
+      </Splitter.Panel>
+
+      <Splitter.ResizeTrigger id="nav:main" />
+
+      <Splitter.Panel id="main">
+        <Center boxSize="full" textStyle="2xl">
+          Main
+        </Center>
+      </Splitter.Panel>
+    </Splitter.Root>
+  )
+}

apps/compositions/src/examples/splitter-resize-behavior.tsx

@@ -0,0 +1,32 @@
+import { Center, Code, Splitter, Stack } from "@chakra-ui/react"
+
+export const SplitterResizeBehavior = () => {
+  return (
+    <Splitter.Root
+      panels={[
+        { id: "sidebar", minSize: 15, resizeBehavior: "preserve-pixel-size" },
+        { id: "main" },
+      ]}
+      defaultSize={[25, 75]}
+      borderWidth="1px"
+      minH="60"
+    >
+      <Splitter.Panel id="sidebar">
+        <Stack boxSize="full" align="center" justify="center" gap="2">
+          <Center textStyle="2xl">Sidebar</Center>
+          <Code size="sm" color="fg.muted">
+            preserve-pixel-size
+          </Code>
+        </Stack>
+      </Splitter.Panel>
+
+      <Splitter.ResizeTrigger id="sidebar:main" />
+
+      <Splitter.Panel id="main">
+        <Center boxSize="full" textStyle="2xl">
+          Main
+        </Center>
+      </Splitter.Panel>
+    </Splitter.Root>
+  )
+}

apps/www/content/docs/components/splitter.mdx

@@ -133,6 +133,22 @@ prevent resizing beyond these boundaries.
 
 <ExampleTabs name="splitter-min-max-constraints" />
 
+### CSS Unit Sizes
+
+In addition to percentages, `defaultSize`, `minSize`, and `maxSize` accept CSS
+units like `px`, `em`, `rem`, `vh`, and `vw`. This is useful for panels that
+should keep a fixed width, such as a navigation sidebar.
+
+<ExampleTabs name="splitter-css-units" />
+
+### Resize Behavior
+
+Set `resizeBehavior` on a panel to control how it reacts when the parent group
+resizes. Use `"preserve-pixel-size"` to keep a panel's pixel size constant (so
+the other panels absorb the change) instead of scaling proportionally.
+
+<ExampleTabs name="splitter-resize-behavior" />
+
 ### Nested Panels
 
 Here's an example of how to nest splitters inside panels to create more complex

apps/www/package.json

@@ -18,7 +18,7 @@
     "prebuild": "pnpm generate:composition && pnpm generate:examples && pnpm build:react && pnpm generate:theme"
   },
   "dependencies": {
-    "@ark-ui/react": "5.36.2",
+    "@ark-ui/react": "5.37.2",
     "@chakra-ui/react": "workspace:*",
     "@chakra-ui/charts": "workspace:*",
     "@emotion/react": "11.14.0",

packages/react/package.json

@@ -38,7 +38,7 @@
     "url": "https://storybook.chakra-ui.com"
   },
   "dependencies": {
-    "@ark-ui/react": "5.36.2",
+    "@ark-ui/react": "5.37.2",
     "@emotion/is-prop-valid": "^1.4.0",
     "@emotion/serialize": "^1.3.3",
     "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",