chore(svelte): add splitter

examples/svelte-ts/src/App.svelte

@@ -32,6 +32,7 @@
   import Select from "./routes/select.svelte"
   import SignaturePad from "./routes/signature-pad.svelte"
   import Slider from "./routes/slider.svelte"
+  import Splitter from "./routes/splitter.svelte"
   import Switch from "./routes/switch.svelte"
   import Tabs from "./routes/tabs.svelte"
   import TagsInput from "./routes/tags-input.svelte"
@@ -73,6 +74,7 @@
     { path: "/rating-group", component: RatingGroup },
     { path: "/segment-control", component: SegmentControl },
     { path: "/select", component: Select },
+    { path: "/splitter", component: Splitter },
     { path: "/signature-pad", component: SignaturePad },
     { path: "/slider", component: Slider },
     { path: "/switch", component: Switch },

examples/svelte-ts/src/routes/splitter.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+  import { splitterControls } from "@zag-js/shared"
+  import * as splitter from "@zag-js/splitter"
+  import { useControls } from "$lib/use-controls.svelte"
+  import Toolbar from "$lib/components/toolbar.svelte"
+  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+
+  const controls = useControls(splitterControls)
+
+  const [snapshot, send] = useMachine(
+    splitter.machine({
+      id: "1",
+      size: [
+        { id: "a", size: 50 },
+        { id: "b", size: 50 },
+      ],
+    }),
+    {
+      context: controls.context,
+    },
+  )
+
+  const api = $derived(splitter.connect(snapshot, send, normalizeProps))
+</script>
+
+<main class="splitter">
+  <div {...api.rootProps}>
+    <div {...api.getPanelProps({ id: "a" })}>
+      <p>A</p>
+    </div>
+    <div {...api.getResizeTriggerProps({ id: "a:b" })}></div>
+    <div {...api.getPanelProps({ id: "b" })}>
+      <p>B</p>
+    </div>
+  </div>
+</main>
+
+<Toolbar {controls} viz>
+  <StateVisualizer state={snapshot} omit={["previousPanels", "initialSize"]} />
+</Toolbar>