feat: Resizable (#807)

apps/www/__registry__/index.js

@@ -500,6 +500,27 @@ export const Index = {
 			component: () => import("../src/lib/registry/default/example/range-calendar-demo.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/range-calendar-demo.svelte"],
 		},
+		"resizable-demo": {
+			name: "resizable-demo",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/default/example/resizable-demo.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/default/example/resizable-demo.svelte"],
+		},
+		"resizable-handle": {
+			name: "resizable-handle",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/default/example/resizable-handle.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/default/example/resizable-handle.svelte"],
+		},
+		"resizable-vertical": {
+			name: "resizable-vertical",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/default/example/resizable-vertical.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/default/example/resizable-vertical.svelte"],
+		},
 		"select-demo": {
 			name: "select-demo",
 			type: "components:example",
@@ -1313,6 +1334,27 @@ export const Index = {
 			component: () => import("../src/lib/registry/new-york/example/range-calendar-demo.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/range-calendar-demo.svelte"],
 		},
+		"resizable-demo": {
+			name: "resizable-demo",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/new-york/example/resizable-demo.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/new-york/example/resizable-demo.svelte"],
+		},
+		"resizable-handle": {
+			name: "resizable-handle",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/new-york/example/resizable-handle.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/new-york/example/resizable-handle.svelte"],
+		},
+		"resizable-vertical": {
+			name: "resizable-vertical",
+			type: "components:example",
+			registryDependencies: ["resizable"],
+			component: () => import("../src/lib/registry/new-york/example/resizable-vertical.svelte").then((m) => m.default),
+			files: ["../src/lib/registry/new-york/example/resizable-vertical.svelte"],
+		},
 		"select-demo": {
 			name: "select-demo",
 			type: "components:example",

apps/www/package.json

@@ -50,6 +50,7 @@
 		"hast-util-to-html": "^8.0.4",
 		"lodash.template": "^4.5.0",
 		"mdsx": "^0.0.5",
+		"paneforge": "^0.0.2",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^3.1.1",

apps/www/src/content/about.md

@@ -5,13 +5,17 @@ description: Powered by amazing open source projects.
 
 ## About
 
-[shadcn-svelte](https://shadcn-svelte.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [huntabyte](https://twitter.com/huntabyte).
+[shadcn-svelte](https://shadcn-svelte.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [Huntabyte](https://twitter.com/huntabyte) and [CokaKoala](https://github.com/adriangonz97) and has received countless contributions from the community.
 
 ## Credits
 
 - [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
-- [Melt UI](https://melt-ui.com) - The headless primitive component builders that power this project.
 - [Bits UI](https://bits-ui.com) - The headless components that power this project.
+- [Formsnap](https://formsnap.dev) - The form components that power this project.
+- [Paneforge](https://paneforge.com) - The resizable components that power this project.
+- [Vaul Svelte](https://vaulsvelte.com) - The drawer components that power this project.
+- [cmdk-sv](https://cmdk-sv.com) - The command menu components that power this project.
+- [Melt UI](https://melt-ui.com) - The headless primitive component builders that power this project.
 - [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
 - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
 - [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.

apps/www/src/content/changelog.md

@@ -7,7 +7,19 @@ description: Latest updates and announcements.
 	import { Steps, Callout, ComponentPreview } from '$components/docs'
 </script>
 
-## February 2024 (Part 2) - Updated Icon Imports
+## February 2024
+
+### New Component: Resizable
+
+We've added a new component to the project, [Resizable](/docs/components/resizable), which is built on top of [PaneForge](https://paneforge.com). PaneForge is still in an early stage, so be sure to raise any issues you find with the library on the [PaneForge GitHub](https://github.com/svecosystem/paneforge).
+
+<ComponentPreview name="resizable-demo">
+
+<div />
+
+</ComponentPreview>
+
+### Updated Icon Imports
 
 After some feedback about dev server performance, we've updated the way we import icons. With this change, we've decided to move away from the unmaintained `radix-icons-svelte` package to [svelte-radix](https://github.com/shinokada/svelte-radix) for the `new-york` style.
 
@@ -29,7 +41,7 @@ import Check from "svelte-radix/Check.svelte";
 
 With deep imports, we're preventing Vite from optimizing the entire icon collections, and instead only optimizing the icons that are actually used in your project. From what we've seen, this has a massive impact on dev server performance. Enjoy! 🚀
 
-## February 2024 - Major Forms Update
+### Major Forms Update
 
 Formsnap has been completely rewritten to be more flexible, easier to use, and less opinionated. This means we've had to make some changes to the way we use it in `shadcn-svelte`, but once you get the hang of it, you'll find it's much more powerful and less restrictive than the previous iteration.
 
@@ -39,7 +51,11 @@ All of the `Form` components have been updated to use the new API, and you can s
 
 Visit the [Formsnap](https://formsnap.dev) documentation (which has also been updated) to learn more about the new API and how its used.
 
-## January 2024 - Part 2
+## January 2024
+
+We've added four new components to the project, [Carousel](/docs/components/carousel), [Drawer](/docs/components/drawer), [Sonner](/docs/components/sonner), & [Pagination](/docs/components/pagination).
+
+### New Component: Carousel
 
 We've added a new component to the project, [Carousel](/docs/components/carousel).
 
@@ -49,11 +65,7 @@ We've added a new component to the project, [Carousel](/docs/components/carousel
 
 </ComponentPreview>
 
-## January 2024
-
-We've added three new components to the project, [Drawer](/docs/components/drawer), [Sonner](/docs/components/sonner), & [Pagination](/docs/components/pagination).
-
-### Drawer
+### New Component: Drawer
 
 The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com) and is a port of [vaul](https://vaul.emilkowalski.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
 
@@ -63,7 +75,7 @@ The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com) and is a po
 
 </ComponentPreview>
 
-### Sonner
+### New Component: Sonner
 
 The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel.app/), which is a Svelte port of [Sonner](https://sonner.emilkowal.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
 
@@ -73,7 +85,7 @@ The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel
 
 </ComponentPreview>
 
-### Pagination
+### New Component: Pagination
 
 Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagination) component from Bits UI.
 
@@ -87,31 +99,33 @@ Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagina
 
 We've added three new components to the project, [Calendar](/docs/components/calendar), [Range Calendar](/docs/components/range-calendar), & [Date Picker](/docs/components/date-picker).
 
-### Calendar
+### New Component: Calendar
 
 <ComponentPreview name="calendar-demo">
 
 <div/>
 
 </ComponentPreview>
 
-### Range Calendar
+### New Component: Range Calendar
 
 <ComponentPreview name="range-calendar-demo">
 
 <div/>
 
 </ComponentPreview>
 
-### Date Picker
+### New Component: Date Picker
 
 <ComponentPreview name="date-picker-demo">
 
 <div/>
 
 </ComponentPreview>
 
-## November 2023 - Toggle Group
+## November 2023
+
+### New Component: Toggle Group
 
 We've added a new component to the library, [Toggle Group](/docs/components/toggle-group).
 
@@ -121,7 +135,7 @@ We've added a new component to the library, [Toggle Group](/docs/components/togg
 
 </ComponentPreview>
 
-## October 2023 - New Components & Updates
+## October 2023
 
 We've added two new components to the library, [Command](/docs/components/command) & [Combobox](/docs/components/combobox). We've also made some updates to the `<Form.Label />` component that you'll want to be aware of.
 

apps/www/src/content/components/resizable.md

@@ -0,0 +1,99 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/registry/default/ui/resizable
+bits: https://paneforge.com
+---
+
+<script>
+	import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+</script>
+
+<ComponentPreview name="resizable-demo">
+
+<div />
+
+</ComponentPreview>
+
+## About
+
+The `Resizable` component is built on top of [PaneForge](https://github.com/svecosystem/paneforge) by [Huntabyte](https://github.com/huntabyte). Visit the [PaneForge documentation](https://paneforge.com) for all the available props and abilities of the `Resizable` component.
+
+## Installation
+
+```bash
+npx shadcn-svelte@latest add resizable
+```
+
+<ManualInstall>
+
+1. Install `paneforge`:
+
+```bash
+npm install paneforge
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import * as Resizable from "$lib/components/ui/resizable";
+</script>
+
+<Resizable.PaneGroup direction="horizontal">
+  <Resizable.Pane>One</Resizable.Pane>
+  <Resizable.Handle />
+  <Resizable.Pane>Two</Resizable.Pane>
+</Resizable.PaneGroup>
+```
+
+## Examples
+
+### Vertical
+
+Use the `direction` prop to set the direction of the resizable panels.
+
+<ComponentPreview name="resizable-vertical">
+
+<div />
+
+</ComponentPreview>
+
+```svelte showLineNumbers {5}
+<script lang="ts">
+  import * as Resizable from "$lib/components/ui/resizable";
+</script>
+
+<Resizable.PaneGroup direction="vertical">
+  <Resizable.Pane>One</Resizable.Pane>
+  <Resizable.Handle />
+  <Resizable.Pane>Two</Resizable.Pane>
+</Resizable.PaneGroup>
+```
+
+### Handle
+
+You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.
+
+<ComponentPreview name="resizable-handle">
+
+<div />
+
+</ComponentPreview>
+
+```svelte showLineNumbers {7}
+<script lang="ts">
+  import * as Resizable from "$lib/components/ui/resizable";
+</script>
+
+<Resizable.PaneGroup direction="vertical">
+  <Resizable.Pane>One</Resizable.Pane>
+  <Resizable.Handle withHandle />
+  <Resizable.Pane>Two</Resizable.Pane>
+</Resizable.PaneGroup>
+```

apps/www/src/lib/components/docs/announcement.svelte

@@ -16,7 +16,7 @@
 	{...$$restProps}
 >
 	🎉 <Separator class="mx-2 h-4" orientation="vertical" />{" "}
-	<span class="sm:hidden">Major Form updates!</span>
-	<span class="hidden sm:inline"> Major updates to the Form components! </span>
+	<span class="sm:hidden">Form Updates & Resizable!</span>
+	<span class="hidden sm:inline"> Form Updates & Resizable Component! </span>
 	<Icons.arrowRight class="ml-1 h-4 w-4" />
 </a>

apps/www/src/lib/components/docs/site-footer.svelte

@@ -13,27 +13,24 @@
 					rel="noreferrer"
 					class="font-medium underline underline-offset-4"
 				>
-					shadcn
-				</a>
-				. Ported to Svelte by{" "}
+					shadcn</a
+				>. Ported to Svelte by
 				<a
 					href={siteConfig.links.twitter}
 					target="_blank"
 					rel="noreferrer"
 					class="font-medium underline underline-offset-4"
 				>
-					huntabyte
-				</a>
-				. The source code is available on{" "}
+					huntabyte</a
+				>. The source code is available on{" "}
 				<a
 					href={siteConfig.links.github}
 					target="_blank"
 					rel="noreferrer"
 					class="font-medium underline underline-offset-4"
 				>
-					GitHub
-				</a>
-				.
+					GitHub</a
+				>.
 			</p>
 		</div>
 	</div>

apps/www/src/lib/config/docs.ts

@@ -246,6 +246,12 @@ export const docsConfig: DocsConfig = {
 					href: "/docs/components/range-calendar",
 					items: [],
 				},
+				{
+					title: "Resizable",
+					href: "/docs/components/resizable",
+					items: [],
+					label: "New",
+				},
 				// {
 				//   title: "Scroll Area",
 				//   href: "#",