ui-ingredients 0.15.1 → 0.16.1

package/README.md

@@ -38,11 +38,11 @@ npm install ui-ingredients
 </Dialog.Root>
 ```
 
-## Inspirations
+## Inspiration
 
 - [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
 - [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
 
 ## Documentation
 
-Browse our beta [documentaion](https://ui-ingredients-next.vercel.app/)
+Browse the [documentation](https://ui-ingredients.vercel.app/) for more information on how to use UI Ingredients

package/dist/clipboard/clipboard-indicator.svelte

@@ -1,37 +1,40 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {IndicatorProps} from '@zag-js/clipboard';
-
-  export interface ClipboardIndicatorProps
-    extends Assign<
-      HtmlIngredientProps<'span', HTMLSpanElement>,
-      Partial<IndicatorProps>
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getClipboardContext} from './clipboard-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    copied = false,
-    asChild,
-    children,
-    ...props
-  }: ClipboardIndicatorProps = $props();
-
-  let clipboard = getClipboardContext();
-
-  let mergedProps = $derived(
-    mergeProps(clipboard.getIndicatorProps({copied}), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  interface IndicatorState {
+    copied: boolean;
+  }
+
+  export interface ClipboardIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement, IndicatorState> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getClipboardContext} from './clipboard-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ClipboardIndicatorProps = $props();
+
+  let clipboard = getClipboardContext();
+
+  let state = $derived({
+    copied: clipboard.copied,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(clipboard.getIndicatorProps(state), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, state)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.(state)}
+  </span>
+{/if}

package/dist/clipboard/clipboard-indicator.svelte.d.ts

@@ -1,6 +1,8 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { IndicatorProps } from '@zag-js/clipboard';
-export interface ClipboardIndicatorProps extends Assign<HtmlIngredientProps<'span', HTMLSpanElement>, Partial<IndicatorProps>> {
+import type { HtmlIngredientProps } from '../types.js';
+interface IndicatorState {
+    copied: boolean;
+}
+export interface ClipboardIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement, IndicatorState> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/drawer/create-drawer.svelte.js

@@ -44,13 +44,22 @@ export function createDrawer(props) {
                 return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
             },
             getBodyProps() {
-                return { ...parts.body.attrs };
+                return {
+                    ...parts.body.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
             getFooterProps() {
-                return { ...parts.footer.attrs };
+                return {
+                    ...parts.footer.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
             getHeaderProps() {
-                return { ...parts.header.attrs };
+                return {
+                    ...parts.header.attrs,
+                    'data-state': o.open ? 'open' : 'closed',
+                };
             },
         };
     });

package/package.json

@@ -2,8 +2,8 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.15.1",
-  "packageManager": "pnpm@9.12.3",
+  "version": "0.16.1",
+  "packageManager": "pnpm@9.14.2",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -356,30 +356,30 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
-    "@sveltejs/adapter-vercel": "^5.4.7",
-    "@sveltejs/kit": "^2.8.0",
+    "@sveltejs/adapter-vercel": "^5.4.8",
+    "@sveltejs/kit": "^2.8.2",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
+    "@testing-library/svelte": "^5.2.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
     "@untitled-theme/icons-svelte": "^0.12.0",
     "autoprefixer": "^10.4.20",
     "globals": "^15.12.0",
     "jsdom": "^25.0.1",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "publint": "^0.2.12",
     "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.1.13",
-    "svelte-check": "^4.0.6",
+    "svelte": "^5.2.7",
+    "svelte-check": "^4.1.0",
     "tailwind-merge": "^2.5.4",
-    "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.5",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"
   },