Resizable

---
import ResizablePaneGroup from '../components/astro/ResizablePaneGroup.astro';
import ResizablePane from '../components/astro/ResizablePane.astro';
import ResizableHandle from '../components/astro/ResizableHandle.astro';
---

<ResizablePaneGroup direction="horizontal" style="max-width: 28rem; height: 200px;">
  <ResizablePane defaultSize={50}><div>One</div></ResizablePane>
  <ResizableHandle />
  <ResizablePane defaultSize={50}><div>Two</div></ResizablePane>
</ResizablePaneGroup>

<!-- Rizzo CSS + resizable script from package/vanilla docs. BEM: resizable-pane-group, resizable-pane, resizable-handle. -->
<div class="resizable-pane-group resizable-pane-group--horizontal" data-resizable style="max-width: 28rem; height: 200px;">
  <div class="resizable-pane" style="flex: 0 0 50%;">One</div>
  <div class="resizable-handle" data-resizable-handle aria-valuenow="50"></div>
  <div class="resizable-pane" style="flex: 0 0 50%;">Two</div>
</div>

<script>
  import { ResizablePaneGroup, ResizablePane, ResizableHandle } from '$lib/rizzo';
</script>

<ResizablePaneGroup direction="horizontal" style="max-width: 28rem; height: 200px;">
  <ResizablePane defaultSize={50}><div>One</div></ResizablePane>
  <ResizableHandle />
  <ResizablePane defaultSize={50}><div>Two</div></ResizablePane>
</ResizablePaneGroup>

<script setup>
import ResizablePaneGroup from '@/components/rizzo/ResizablePaneGroup.vue';
import ResizablePane from '@/components/rizzo/ResizablePane.vue';
import ResizableHandle from '@/components/rizzo/ResizableHandle.vue';
</script>

<template>
  <ResizablePaneGroup direction="horizontal">
    <ResizablePane :default-size="50">Left</ResizablePane>
    <ResizableHandle />
    <ResizablePane :default-size="50">Right</ResizablePane>
  </ResizablePaneGroup>
</template>

import { ResizablePaneGroup, ResizablePane, ResizableHandle } from './components/react';

<ResizablePaneGroup direction="horizontal">
  <ResizablePane defaultSize={50}>Left</ResizablePane>
  <ResizableHandle />
  <ResizablePane defaultSize={50}>Right</ResizablePane>
</ResizablePaneGroup>