melt - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/builders/index.d.ts

@@ -1,2 +0,4 @@
-export * from './Collapsible.svelte';
+export * from "./Accordion.svelte";
+export * from "./Avatar.svelte";
+export * from "./Collapsible.svelte";
 export * from "./PinInput.svelte";
@@ -9,4 +11,3 @@ export * from "./Popover.svelte";
 export * from "./Slider.svelte";
+export * from "./Tree.svelte";
 export * from "./utils.svelte";
-export * from "./Tree.svelte";
-export * from "./Avatar.svelte";

dist/builders/index.js

@@ -1,2 +0,4 @@
-export * from './Collapsible.svelte';
+export * from "./Accordion.svelte";
+export * from "./Avatar.svelte";
+export * from "./Collapsible.svelte";
 export * from "./PinInput.svelte";
@@ -9,4 +11,3 @@ export * from "./Popover.svelte";
 export * from "./Slider.svelte";
+export * from "./Tree.svelte";
 export * from "./utils.svelte";
-export * from "./Tree.svelte";
-export * from "./Avatar.svelte";

dist/builders/PinInput.svelte.d.ts

@@ -56,3 +56,3 @@ import type { MaybeGetter } from "../types";
     readonly mask: boolean;
-    readonly type: "alphanumeric" | "numeric" | "text";
+    readonly type: "text" | "alphanumeric" | "numeric";
     readonly isFilled: boolean;
@@ -59,0 +59,0 @@ constructor(props?: PinInputProps);

dist/components/index.d.ts

@@ -1,9 +0,9 @@
-export { default as Collapsible } from './Collapsible.svelte';
-export { default as Toggle } from "./Toggle.svelte";
+export { default as Avatar } from "./Avatar.svelte";
+export { default as Collapsible } from "./Collapsible.svelte";
 export { default as PinInput } from "./PinInput.svelte";
-export { default as Tabs } from "./Tabs.svelte";
-export { default as Slider } from "./Slider.svelte";
 export { default as Popover } from "./Popover.svelte";
 export { default as Progress } from "./Progress.svelte";
 export { default as RadioGroup } from "./RadioGroup.svelte";
-export { default as Avatar } from "./Avatar.svelte";
+export { default as Slider } from "./Slider.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Toggle } from "./Toggle.svelte";

dist/components/index.js

@@ -1,9 +0,9 @@
-export { default as Collapsible } from './Collapsible.svelte';
-export { default as Toggle } from "./Toggle.svelte";
+export { default as Avatar } from "./Avatar.svelte";
+export { default as Collapsible } from "./Collapsible.svelte";
 export { default as PinInput } from "./PinInput.svelte";
-export { default as Tabs } from "./Tabs.svelte";
-export { default as Slider } from "./Slider.svelte";
 export { default as Popover } from "./Popover.svelte";
 export { default as Progress } from "./Progress.svelte";
 export { default as RadioGroup } from "./RadioGroup.svelte";
-export { default as Avatar } from "./Avatar.svelte";
+export { default as Slider } from "./Slider.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Toggle } from "./Toggle.svelte";

dist/utils/keyboard.d.ts

@@ -44,11 +44,11 @@ /**
 /** Key sets for navigation within lists, such as select, menu, and combobox. */
-export declare const FIRST_KEYS: ("Home" | "ArrowDown" | "PageUp")[];
-export declare const LAST_KEYS: ("End" | "ArrowUp" | "PageDown")[];
-export declare const FIRST_LAST_KEYS: ("Home" | "End" | "ArrowDown" | "ArrowUp" | "PageDown" | "PageUp")[];
-export declare const SELECTION_KEYS: (" " | "Enter")[];
-export declare const getNextKey: (dir?: "ltr" | "rtl", orientation?: "horizontal" | "vertical") => "ArrowLeft" | "ArrowRight" | "ArrowDown";
+export declare const FIRST_KEYS: ("ArrowDown" | "Home" | "PageUp")[];
+export declare const LAST_KEYS: ("ArrowUp" | "End" | "PageDown")[];
+export declare const FIRST_LAST_KEYS: ("ArrowDown" | "ArrowUp" | "End" | "Home" | "PageDown" | "PageUp")[];
+export declare const SELECTION_KEYS: ("Enter" | " ")[];
+export declare const getNextKey: (dir?: "ltr" | "rtl", orientation?: "horizontal" | "vertical") => "ArrowDown" | "ArrowLeft" | "ArrowRight";
 export declare const getPrevKey: (dir?: "ltr" | "rtl", orientation?: "horizontal" | "vertical") => "ArrowLeft" | "ArrowRight" | "ArrowUp";
 export declare const getDirectionalKeys: (dir?: "ltr" | "rtl", orientation?: "horizontal" | "vertical") => {
-    nextKey: "ArrowLeft" | "ArrowRight" | "ArrowDown";
+    nextKey: "ArrowDown" | "ArrowLeft" | "ArrowRight";
     prevKey: "ArrowLeft" | "ArrowRight" | "ArrowUp";
 };

dist/utils/selection-state.svelte.d.ts

@@ -7,3 +7,3 @@ import type { MaybeGetter } from "..";
 export type MaybeMultiple<Multiple extends _multiple_extends> = Multiple extends true ? SvelteSet<string> | MaybeGetter<Iterable<string> | undefined> : MaybeGetter<string | undefined>;
-type OnChange<Multiple extends _multiple_extends> = (value: Value<Multiple>) => void;
+export type OnChange<Multiple extends _multiple_extends> = (value: Value<Multiple>) => void;
 type SelectionStateProps<Multiple extends _multiple_extends> = {
@@ -10,0 +10,0 @@ value?: MaybeMultiple<Multiple>;

package.json

 {
   "name": "melt",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
+  "repository": "github:melt-ui/next-gen",
+  "author": "Thomas G. Lopes",
+  "homepage": "https://next.melt-ui.com/",
+  "description": "The next generation of Melt UI. Built for Svelte 5.",
   "exports": {
@@ -7,0 +11,0 @@ ".": {

README.md

@@ -1,3 +0,83 @@
-# Melt
+![](static/banner.png)
 
-The best headless component library for Svelte. Now with Runes.
+[Melt](https://next.melt-ui.com/) for Svelte 🧡: The best headless component library for Svelte. Now with Runes.
+
+[![](https://img.shields.io/npm/v/melt?style=flat)](https://www.npmjs.com/package/melt)
+![npm](https://img.shields.io/npm/dw/melt?style=flat&color=orange)
+
+[![](https://dcbadge.vercel.app/api/server/2QDjZkYunf?style=flat)](https://melt-ui.com/discord)
+
+## About
+
+Melt UI is meant to be used as a base for your own styles and components. It offers:
+
+- Uncoupled builders that can be attached to any element/component
+- A clean API focused on simplicity and flexibility
+- Typescript and [SvelteKit](https://kit.svelte.dev/) support out-of-the-box
+- Strict adherence to [WAI-ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/)
+- A high emphasis on accessibility, extensibility, quality and consistency
+
+## Basic Usage
+
+```sh
+npm i melt
+```
+
+Melt UI provides two ways to use components.
+
+### Using Builders
+
+Builders can be called from a Svelte component, or `svelte.js|ts` files.
+Uses getters and setters for reactive properties.
+
+```html
+<script lang="ts">
+	import { Toggle } from "melt/builders";
+
+	let value = $state(false)
+	const toggle = new Toggle({
+		value: () => value,
+		onValueChange: (v) => (value = v),
+	});
+</script>
+
+<button {...toggle.trigger}>
+	{toggle.value ? "On" : "Off"}
+</button>
+```
+
+### Using Components
+
+The component pattern provides a more traditional Svelte experience. It provides no elements
+or styling, and instead provides you with a instance from the builder. The difference lies in being
+able to use the `bind:` directive.
+
+```html
+<script lang="ts">
+	import { Toggle } from "melt/components";
+
+	let value = $state(false)
+</script>
+
+<Toggle bind:value>
+	{#snippet children(toggle)}
+		<button {...toggle.trigger}>
+			{toggle.value ? "On" : "Off"}
+		</button>
+	{/snippet}
+</Toggle>
+```
+
+### Discord
+
+Got any questions? Want to talk to the maintainers?
+
+Our [Discord community](https://melt-ui.com/discord) is a great place to get in touch with us, and
+we'd love to have you there.
+
+<a href="https://melt-ui.com/discord" alt="Melt UI Discord community">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/2QDjZkYunf">
+  <img alt="Melt UI Discord community" src="https://invidget.switchblade.xyz/2QDjZkYunf?theme=light">
+</picture>
+</a>

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176508

increased by9.11%

Number of package files

88

increased by4.76%

Lines of code

3898

increased by9.62%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

83

increased by1975%

No dependency changes