svelteuidev
diff --git a/‎README.md
Lines changed: 1 addition & 1 deletion b/‎README.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/docs/package.json
Lines changed: 1 addition & 1 deletion b/‎apps/docs/package.json
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/docs/src/components/homepage/Features.svelte
Lines changed: 45 additions & 21 deletions b/‎apps/docs/src/components/homepage/Features.svelte
Lines changed: 45 additions & 21 deletions
diff --git a/‎apps/docs/src/includes/sidebar.md
Lines changed: 2 additions & 0 deletions b/‎apps/docs/src/includes/sidebar.md
Lines changed: 2 additions & 0 deletions
diff --git a/‎apps/docs/src/pages/basics.md
Lines changed: 4 additions & 4 deletions b/‎apps/docs/src/pages/basics.md
Lines changed: 4 additions & 4 deletions
diff --git a/‎apps/docs/src/pages/composables/use-focus-trap.md
Lines changed: 38 additions & 0 deletions b/‎apps/docs/src/pages/composables/use-focus-trap.md
Lines changed: 38 additions & 0 deletions
diff --git a/‎apps/docs/src/pages/composables/use-io.md
Lines changed: 2 additions & 2 deletions b/‎apps/docs/src/pages/composables/use-io.md
Lines changed: 2 additions & 2 deletions
diff --git a/‎apps/docs/src/pages/composables/use-long-press.md
Lines changed: 1 addition & 1 deletion b/‎apps/docs/src/pages/composables/use-long-press.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/docs/src/pages/composables/use-move.md
Lines changed: 41 additions & 0 deletions b/‎apps/docs/src/pages/composables/use-move.md
Lines changed: 41 additions & 0 deletions
diff --git a/‎apps/docs/src/pages/contributing.md
Lines changed: 33 additions & 26 deletions b/‎apps/docs/src/pages/contributing.md
Lines changed: 33 additions & 26 deletions
@@ -170,7 +170,7 @@ There are different categories on the roadmap. Items for versions `0.8–1.0` an
 | :red_circle:    | !        | Create `ARIA` component                              |
 | :red_circle:    | !        | Create `Slider` component                            |
 | :red_circle:    | !        | Create `SegmentedControl` component                  |
-| :red_circle:    | !        | Create `Chip` component                              |
+| :green_circle:  | !        | Create `Chip` component                              |
 | :yellow_circle: | !!!      | Find an effective solution to SSR in SSR mode (#172) |
 | :red_circle:    | !!!      | Find an effective solution to SSR in SSG mode (#107) |
 
 
@@ -25,4 +25,4 @@
 		"deploy": "yarn prepare:docs & yarn build && deno run -A --unstable ../../scripts/docs/build.ts",
 		"deploy:nobuild": "node ../../node_modules/@svelte-docs/publisher"
 	}
-}
+}
@@ -1,26 +1,50 @@
 <script>
 	import { features } from '../../data';
 	import { Title, Text, SimpleGrid, ThemeIcon, Center, Stack, Paper } from '@svelteuidev/core';
+  import { fly } from "svelte/transition"
+  import { onMount } from "svelte"
+  let featuresVisible = false
+
+  onMount(() => {
+    const wrapper = document.querySelector("#wrapper")
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          featuresVisible = true
+        }
+      })
+    }, {
+      threshold: 0.5
+    })
+    observer.observe(wrapper)
+  })
+
 </script>
 
-<SimpleGrid
-	breakpoints={[
-		{ minWidth: 1024, cols: 3, spacing: 'md' },
-		{ minWidth: 768, cols: 2, spacing: 'sm' },
-		{ minWidth: 640, cols: 1, spacing: 'sm' }
-	]}
->
-	{#each features as { description, icon, title }}
-		<Paper shadow="xl">
-			<Stack>
-				<Center override={{ jc: 'start', gap: '$10' }} inline>
-					<ThemeIcon variant="gradient" size="xl">
-						<svelte:component this={icon} size={25} />
-					</ThemeIcon>
-					<Title order={3} weight="extrabold">{title}</Title>
-				</Center>
-				<Text size="lg" override={{ lineHeight: '$md' }}>{description}</Text>
-			</Stack>
-		</Paper>
-	{/each}
-</SimpleGrid>
+<div id="wrapper">
+  {#if featuresVisible}
+    <SimpleGrid
+      breakpoints={[
+        { minWidth: 1024, cols: 3, spacing: 'md' },
+        { minWidth: 768, cols: 2, spacing: 'sm' },
+        { minWidth: 640, cols: 1, spacing: 'sm' }
+      ]}
+    >
+      {#each features as { description, icon, title }, i}
+        <div in:fly="{{ y: 200, duration: (i + 1) * 500 }}">
+          <Paper shadow="xl" style="height: 100%">
+            <Stack>
+              <Center override={{ jc: 'start', gap: '$10' }} inline>
+                <ThemeIcon variant="gradient" size="xl">
+                  <svelte:component this={icon} size={25} />
+                </ThemeIcon>
+                <Title order={3} weight="extrabold">{title}</Title>
+              </Center>
+              <Text size="lg" override={{ lineHeight: '$md' }}>{description}</Text>
+            </Stack>
+          </Paper>
+        </div>
+      {/each}
+    </SimpleGrid>
+  {/if}
+</div>
@@ -121,11 +121,13 @@
   - [use-css-variable](composables/use-css-variable)
   - [use-download](composables/use-download)
   - [use-focus](composables/use-focus)
+  - [use-focus-trap](composables/use-focus-trap)
   - [use-hot-key](composables/use-hot-key)
   - [use-io](composables/use-io)
   - [use-lazy](composables/use-lazy)
   - [use-lock-scroll](composables/use-lock-scroll)
   - [use-long-press](composables/use-long-press)
+  - [use-move](composables/use-move)
   - [use-persistent-tab](composables/use-persistent-tab)
   - [use-portal](composables/use-portal)
   - [use-page-leave](composables/use-page-leave)
 
@@ -13,7 +13,7 @@ title: Learn the basics
 
 <MinorHeading />
 
-This guide will help you get familiar with core SvelteUI concepts. Please read this guide and the **theming** section before starting development to learn about all available theming features and component behaviors.
+This guide will help you get familiar with core SvelteUI concepts. Please read this guide and the [theming](theming/svelteui-provider) section before starting development to learn about all available theming features and component behaviors.
 
 ## SvelteUI packages
 
@@ -40,15 +40,15 @@ To learn how to dynamically change the theme by reading the [dark theme guide](t
 
 ## Server side rendering
 
-SvelteUI components work in SvelteKit environments without any configuration needed. However, they aren't SSR compatible by default. To setup SSR, follow the server side rendering guide below, It's really easy to set up!
+SvelteUI components work in SvelteKit environments without any configuration needed. However, they aren't SSR compatible by default. To setup SSR, follow the server side rendering guide below. It's really easy to set up!
 
 - [Server side rendering with SvelteKit](theming/ssr)
 
 ## TypeScript
 
 ### Exported types
 
-@svelteuidev/core package export all types to help you build components and styles with TypeScript, some notable ones are:
+`@svelteuidev/core` package export all types to help you build components and styles with TypeScript. Some notable ones are:
 
 - `ColorScheme` – union of `'light' | 'dark'`.
 - `SvelteUIColor` – union of all default colors.
@@ -113,7 +113,7 @@ Under normal circumstances you wouldn't be able to use actions on components bec
 
 ## Bindings
 
-All components support binding their top-level element via the element prop instead of `this`. This allows you to get a reference to a DOM node (as a supplement to `bind:this`):
+All components support binding their top-level element via the `element` prop instead of `this`. This allows you to get a reference to a DOM node (as a supplement to `bind:this`):
 
 ```svelte
 <script lang="ts">
 
@@ -0,0 +1,38 @@
+---
+title: 'use-focus-trap'
+group: 'svelteuidev-composables'
+packageGroup: '@svelteuidev/composables'
+slug: /composables/use-focus-trap/
+description: 'Traps the focus inside the given DOM node'
+import: "import { focustrap } from '@svelteuidev/composables';"
+docs: 'composables/use-focus-trap.md'
+source: 'svelteui-composables/src/actions/use-focus/use-focus-trap.ts'
+---
+
+<script lang='ts'>
+    import { Demo, ComposableDemos } from '@svelteuidev/demos';
+    import { Heading } from 'components';
+</script>
+
+<Heading />
+
+## Usage
+
+The `use-focus-trap` action traps the focus inside a given DOM node. The node must include at least one focusable element, and it will give priority to a node with the `autofocus` property.
+
+```svelte
+<script>
+  import { focustrap } from './use-focus-trap';
+</script>
+
+<div use:focustrap>
+  <h1>Title</h1>
+  <input /> <!-- This will be focused -->
+</div>
+```
+
+## Definition
+
+```ts
+export function focustrap(node: HTMLElement): ReturnType<Action>;
+```
@@ -18,7 +18,7 @@ source: 'svelteui-composables/src/actions/use-io/use-io.ts'
 
 ## Usage
 
-With the Intersection Observer API, use-intersection gets information about the intersection of a given element with its scroll container or body element:
+With the Intersection Observer API, `use-intersection` gets information about the intersection of a given element with its scroll container or body element:
 
 <Demo demo={ComposableDemos.useIoDemo.usage} />
 
@@ -33,7 +33,7 @@ With the Intersection Observer API, use-intersection gets information about the
 
 ## Events
 
-The use-clipboard action dispatches custom events. Each custom event takes a callback function just like other events.
+The `use-clipboard` action dispatches custom events. Each custom event takes a callback function just like other events.
 
 ```ts
 on:useclipboard?: (callback: (any) => unknown) => void;
 
@@ -30,7 +30,7 @@ With the `use-long-press` action, a `long press` event is created when `mousedow
 
 ## Events
 
-The use-longpress action dispatches one custom event. The custom event takes a callback function just like other events.
+The `use-longpress` action dispatches one custom event. The custom event takes a callback function just like other events.
 
 ```ts
 on:uselongpress?: (callback: (any) => unknown) => void;
 
@@ -0,0 +1,41 @@
+---
+title: 'use-move'
+group: 'svelteuidev-composables'
+packageGroup: '@svelteuidev/composables'
+slug: /composables/use-move/
+description: 'Handles the movement of an element based on mouse and touch events'
+import: "import { move } from '@svelteuidev/composables';"
+docs: 'composables/use-move.md'
+source: 'svelteui-composables/src/actions/use-move/use-move.ts'
+---
+
+<script>
+    import { Demo, ComposableDemos } from '@svelteuidev/demos';
+    import { Heading } from 'components';
+</script>
+
+<Heading />
+
+## Usage
+
+With the `use-move` action, it is possible to move an element in the screen with mouse or touch events.
+
+<Demo demo={ComposableDemos.useMoveDemo.usage} />
+
+## Events
+
+The use-move action dispatches three custom event. The custom event takes a callback function just like other events.
+
+```ts
+on:move?: (callback: (event: CustomEvent<{ x: number; y: number }> & { target: EventTarget & T }) => unknown) => void;
+on:move:start?: (callback: (event: CustomEvent<{ x: number; y: number }> & { target: EventTarget & T }) => unknown) => void;
+on:move:stop?: (callback: (event: CustomEvent<{ x: number; y: number }> & { target: EventTarget & T }) => unknown) => void;
+```
+
+## Definition
+
+```ts
+export function move(
+	node: HTMLElement
+): ReturnType<Action>;
+```
@@ -19,31 +19,31 @@ title: 'Contributing'
 
 ## Ways to contribute
 
-- **Improve documentation:** fix incomplete or missing docs, bad wording, examples or explanations
-- **Give feedback:** we are constantly working on making SvelteUI better, please share how you use SvelteUI, what features are missing and what is done good via GitHub Discussions
-- **Share SvelteUI:** share link to SvelteUI docs with everyone who can be interested, share SvelteUI on Twitter
-- **Contribute to codebase:** propose new feature via GitHub Issues or find an [existing one](https://github.com/svelteuidev/svelteui/labels/help%20wanted) that you are interested in and work on it
-- **Give us a code review:** help us identify problems with [source code](https://github.com/svelteuidev/svelteui) or make SvelteUI more performant
+- **Improve documentation:** Fix incomplete or missing docs, bad wording, examples or explanations.
+- **Give feedback:** We are constantly working on making SvelteUI better, please share how you use SvelteUI, what features are missing and what is done good via GitHub Discussions.
+- **Share SvelteUI:** Share the link to SvelteUI docs with everyone who can be interested, share SvelteUI on Twitter.
+- **Contribute to codebase:** Propose new features via GitHub Issues or find an [existing one](https://github.com/svelteuidev/svelteui/labels/help%20wanted) that you are interested in and work on it.
+- **Give us a code review:** Help us identify problems with the [source code](https://github.com/svelteuidev/svelteui) or make SvelteUI more performant.
 
 ## Contributing workflow
 
-- Decide what you want to contribute
-- If you want to implement a new feature, discuss it with a maintainer ([Discord](https://discord.gg/2J2xmzCS79) or [Discussions](https://github.com/svelteuidev/svelteui/discussions/categories/feature-requests)) before jumping into code
-- After finalizing the issue details and the code, please follow commit convention
-- Submit a PR if everything is fine
-- Get a code review and fix all issues noticed by a maintainer
-- PR is merged, and we're done!
+- Decide what you want to contribute.
+- If you want to implement a new feature, discuss it with a maintainer ([Discord](https://discord.gg/2J2xmzCS79) or [Discussions](https://github.com/svelteuidev/svelteui/discussions/categories/feature-requests)) before jumping into code.
+- After finalizing the issue details and the code, please follow commit convention.
+- Submit a PR if everything is fine.
+- Get a code review and fix all issues noticed by a maintainer.
+- The PR is merged, and we're done!
 
 ## Commit convention
 
 SvelteUI is a monorepo and it is important to write clear commit messages to keep the git history clean.
-All commits made in this repository are divided in 3 groups:
+All commits made in this repository are divided into 3 groups:
 
-- **package commits** related to particular package
+- **package commits** related to a particular package
 - **docs commits** related to documentation
 - **core commits** only related to repository tooling and not associated with any package
 
-This repo uses commitizen to make commits easier. In order to commit changes made, you should run the `yarn cm` command. Once you have done that, the commitizen cli messages will guide you through the commit process. Commit message consists of 2 parts:
+This repo uses commitizen to make commits easier. In order to commit the changes made, you should run the `yarn cm` command. Once you have done that, the commitizen CLI messages will guide you through the commit process. Commit message consists of 2 parts:
 
 ```bash
 [type]: Message
@@ -58,7 +58,7 @@ Examples:
 
 ## Git branches
 
-- **main** - When the project hits 1.0, this will be for the current version, and patches for current minor version (1.0.x)
+- **main** - When the project hits 1.0, this will have the current version, as well as patches for the current minor version (1.0.x)
 - **next-minor** - Contains next minor version (1.x.0), most likely you would want to create a PR to this branch
 - **experimental** - Up to date with next minor version (1.x.0), implementing some experimental features that may or may not be added
 
@@ -67,7 +67,7 @@ Examples:
 - Install [editorconfig](https://editorconfig.org/) extension for your editor
 - **vscode users only** - install recommended extensions
 - Fork [repository](https://github.com/svelteuidev/svelteui), clone or download your fork
-- Install dependencies at the root of the monorepo with npm **(make sure to install with npm only)**
+- Install dependencies at the root of the monorepo with Yarn **(make sure to install with yarn only)**
 - After your node modules have installed:
 
 **To start developing**
@@ -76,37 +76,44 @@ Examples:
     It is very important to make sure you start from the root of the monorepo before following these steps
 </Alert>
 
-**`@svelteuidev/` scoped packages:**
+**If developing in [svelteui-prism, svelteui-dates, or svelteui-demos]**
 
 1. run `yarn package`
    - If you want to watch for changes in one of the packages that they depend on, run `yarn watch` in their directory.
    - You will need two terminal sessions open at the very least. If this doesn't apply to your situation move on to step 2
 2. cd into the package you want to develop on
 3. run `yarn dev`
 
-**`docs`:**
+**If developing in [svelteui-core, svelteui-actions, svelteui-utilities, or svelteui-motion]**
 
-1. run `yarn package`
-2. cd into the docs
-3. run `yarn dev`
+1. cd into the package you want to develop on
+2. run `yarn dev`
+
+**If developing in docs:**
+
+1. Install [deno](https://deno.land/[email protected]/introduction)
+2. Run `yarn package`
+3. Run `yarn dev:docs`
 
 **Project Structure**
 
 You won't need to pay attention to every file within the project. All of the packages follow a similar pattern, so you should always start your journey within the `src/lib` of whatever package you choose to work on.
 
 <Demo demo={MiscDemos.contributing.tree} />
 
-## NPM scripts
+## Yarn scripts
 
-All packages' npm scripts are located at [main package.json](https://github.com/svelteuidev/svelteui/blob/main/package.json),
-individual packages have scripts, but they should not be interacted with directly. This is due to the nature of [TurboRepo](https://turborepo.org/). All scripts should be running from the root of the monorepo.
+All packages' Yarn scripts are located at [main package.json](https://github.com/svelteuidev/svelteui/blob/main/package.json),
+individual packages have scripts, but they should not be interacted with directly. This is due to the nature of [TurboRepo](https://turborepo.org/). All scripts should be run from the root of the monorepo.
 
+- `dev:docs` - runs the development environment for the docs
+- `dev` - runs Storybook for all the packages that contain stories
 - `clean` - removes all unnecessary files and folders from packages (i.e. node_modules)
 - `format` - runs prettier on packages folder
-- `lint` - runs ESLint on packages folder (run format before running lint)
+- `lint` - runs eslint on packages folder (run format before running lint)
 - `test` - runs tests with [vitest](https://vitest.dev/)
 - `package` - generates built versions of packages (needed for cross package development)
-- `repo:prepush` - runs sort, format, lint and test (run this before pushing your code)
+- `prepush:repo` - runs sort, format, lint and test (run this before pushing your code)
 - `cm` - runs git commands to add and commit through commitizen (this is the recommended way to commit as it follows the convention automatically)
 
 <BottomNav
Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,4 @@`
`25`	`25`	`"deploy": "yarn prepare:docs & yarn build && deno run -A --unstable ../../scripts/docs/build.ts",`
`26`	`26`	`"deploy:nobuild": "node ../../node_modules/@svelte-docs/publisher"`
`27`	`27`	`}`
`28`		`-}`
	`28`	`+}`