ui-ingredients 0.22.1 → 0.23.0

package/dist/carousel/carousel-autoplay-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface CarouselAutoplayTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getCarouselContext} from './carousel-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: CarouselAutoplayTriggerProps = $props();
+
+  let carousel = getCarouselContext();
+
+  let mergedProps = $derived(
+    mergeProps(carousel.getAutoplayTriggerProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/carousel/carousel-autoplay-trigger.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface CarouselAutoplayTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CarouselAutoplayTrigger: $$__sveltets_2_IsomorphicComponent<CarouselAutoplayTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type CarouselAutoplayTrigger = InstanceType<typeof CarouselAutoplayTrigger>;
+export default CarouselAutoplayTrigger;

package/dist/carousel/{carousel-viewport.svelte → carousel-control.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface CarouselViewportProps
+  export interface CarouselControlProps
     extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
@@ -14,11 +14,11 @@
     asChild,
     children,
     ...props
-  }: CarouselViewportProps = $props();
+  }: CarouselControlProps = $props();
 
   let carousel = getCarouselContext();
 
-  let mergedProps = $derived(mergeProps(carousel.getViewportProps(), props));
+  let mergedProps = $derived(mergeProps(carousel.getControlProps(), props));
 </script>
 
 {#if asChild}

package/dist/carousel/{carousel-viewport.svelte.d.ts → carousel-control.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface CarouselViewportProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+export interface CarouselControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
 }
 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> & {
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CarouselViewport: $$__sveltets_2_IsomorphicComponent<CarouselViewportProps, {
+declare const CarouselControl: $$__sveltets_2_IsomorphicComponent<CarouselControlProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
-type CarouselViewport = InstanceType<typeof CarouselViewport>;
-export default CarouselViewport;
+type CarouselControl = InstanceType<typeof CarouselControl>;
+export default CarouselControl;

package/dist/carousel/carousel-item.svelte

@@ -1,12 +1,9 @@
 <script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/carousel';
+  import type {ItemProps} from '@zag-js/carousel';
 
   export interface CarouselItemProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
-      ItemProps
-    > {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {}
 </script>
 
 <script lang="ts">
@@ -27,16 +24,15 @@
     createSplitProps<ItemProps>(['index'])(props),
   );
 
-  let itemState = $derived(carousel.getItemState(itemProps));
   let mergedProps = $derived(
     mergeProps(carousel.getItemProps(itemProps), localProps),
   );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, itemState)}
+  {@render asChild(mergedProps)}
 {:else}
   <div bind:this={ref} {...mergedProps}>
-    {@render children?.(itemState)}
+    {@render children?.()}
   </div>
 {/if}

package/dist/carousel/carousel-item.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ItemProps, ItemState } from '@zag-js/carousel';
-export interface CarouselItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, ItemProps> {
+import type { ItemProps } from '@zag-js/carousel';
+export interface CarouselItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {
 }
 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/carousel/carousel-root.svelte

@@ -28,15 +28,24 @@
 
   let [createCarouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
+      'allowMouseDrag',
+      'autoplay',
       'id',
       'ids',
+      'inViewThreshold',
       'loop',
-      'align',
-      'index',
-      'spacing',
+      'onAutoplayStatusChange',
+      'onDragStatusChange',
+      'onPageChange',
       'orientation',
-      'slidesPerView',
-      'onIndexChange',
+      'padding',
+      'page',
+      'slideCount',
+      'slidesPerMove',
+      'slidesPerPage',
+      'snapType',
+      'spacing',
+      'translations',
     ])(props),
   );
 

package/dist/carousel/carousel.d.ts

@@ -1,3 +1,5 @@
+export { default as AutoplayTrigger } from './carousel-autoplay-trigger.svelte';
+export { default as Control } from './carousel-control.svelte';
 export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
 export { default as Indicator } from './carousel-indicator.svelte';
 export { default as ItemGroup } from './carousel-item-group.svelte';
@@ -5,4 +7,3 @@ export { default as Item } from './carousel-item.svelte';
 export { default as NextTrigger } from './carousel-next-trigger.svelte';
 export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
 export { default as Root } from './carousel-root.svelte';
-export { default as Viewport } from './carousel-viewport.svelte';

package/dist/carousel/carousel.js

@@ -1,3 +1,5 @@
+export { default as AutoplayTrigger } from './carousel-autoplay-trigger.svelte';
+export { default as Control } from './carousel-control.svelte';
 export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
 export { default as Indicator } from './carousel-indicator.svelte';
 export { default as ItemGroup } from './carousel-item-group.svelte';
@@ -5,4 +7,3 @@ export { default as Item } from './carousel-item.svelte';
 export { default as NextTrigger } from './carousel-next-trigger.svelte';
 export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
 export { default as Root } from './carousel-root.svelte';
-export { default as Viewport } from './carousel-viewport.svelte';

package/dist/carousel/index.d.ts

@@ -1,4 +1,6 @@
 export * as Carousel from './carousel.js';
+export type { CarouselAutoplayTriggerProps } from './carousel-autoplay-trigger.svelte';
+export type { CarouselControlProps } from './carousel-control.svelte';
 export type { CarouselIndicatorGroupProps } from './carousel-indicator-group.svelte';
 export type { CarouselIndicatorProps } from './carousel-indicator.svelte';
 export type { CarouselItemGroupProps } from './carousel-item-group.svelte';
@@ -6,7 +8,6 @@ export type { CarouselItemProps } from './carousel-item.svelte';
 export type { CarouselNextTriggerProps } from './carousel-next-trigger.svelte';
 export type { CarouselPrevTriggerProps } from './carousel-prev-trigger.svelte';
 export type { CarouselProps } from './carousel-root.svelte';
-export type { CarouselViewportProps } from './carousel-viewport.svelte';
 export { anatomy as carouselAnatomy } from './carousel-anatomy.js';
 export { getCarouselContext, setCarouselContext, } from './carousel-context.svelte.js';
 export { createCarousel, type CreateCarouselProps, type CreateCarouselReturn, } from './create-carousel.svelte.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "packageManager": "pnpm@9.15.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -308,53 +308,53 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^0.78.3",
-    "@zag-js/anatomy": "^0.78.3",
-    "@zag-js/angle-slider": "^0.78.3",
-    "@zag-js/auto-resize": "^0.78.3",
-    "@zag-js/avatar": "^0.78.3",
-    "@zag-js/carousel": "^0.78.3",
-    "@zag-js/checkbox": "^0.78.3",
-    "@zag-js/clipboard": "^0.78.3",
-    "@zag-js/collapsible": "^0.78.3",
-    "@zag-js/color-picker": "^0.78.3",
-    "@zag-js/combobox": "^0.78.3",
-    "@zag-js/core": "^0.78.3",
-    "@zag-js/date-picker": "^0.78.3",
-    "@zag-js/dialog": "^0.78.3",
-    "@zag-js/dom-query": "^0.78.3",
-    "@zag-js/editable": "^0.78.3",
-    "@zag-js/file-upload": "^0.78.3",
-    "@zag-js/floating-panel": "^0.78.3",
-    "@zag-js/highlight-word": "^0.78.3",
-    "@zag-js/hover-card": "^0.78.3",
-    "@zag-js/i18n-utils": "^0.78.3",
-    "@zag-js/menu": "^0.78.3",
-    "@zag-js/number-input": "^0.78.3",
-    "@zag-js/pagination": "^0.78.3",
-    "@zag-js/pin-input": "^0.78.3",
-    "@zag-js/popover": "^0.78.3",
-    "@zag-js/presence": "^0.78.3",
-    "@zag-js/progress": "^0.78.3",
-    "@zag-js/qr-code": "^0.78.3",
-    "@zag-js/radio-group": "^0.78.3",
-    "@zag-js/rating-group": "^0.78.3",
-    "@zag-js/select": "^0.78.3",
-    "@zag-js/signature-pad": "^0.78.3",
-    "@zag-js/slider": "^0.78.3",
-    "@zag-js/splitter": "^0.78.3",
-    "@zag-js/steps": "^0.78.3",
-    "@zag-js/svelte": "^0.78.3",
-    "@zag-js/switch": "^0.78.3",
-    "@zag-js/tabs": "^0.78.3",
-    "@zag-js/tags-input": "^0.78.3",
-    "@zag-js/time-picker": "^0.78.3",
-    "@zag-js/timer": "^0.78.3",
-    "@zag-js/toast": "^0.78.3",
-    "@zag-js/toggle-group": "^0.78.3",
-    "@zag-js/tooltip": "^0.78.3",
-    "@zag-js/tour": "^0.78.3",
-    "@zag-js/tree-view": "^0.78.3",
+    "@zag-js/accordion": "^0.79.0",
+    "@zag-js/anatomy": "^0.79.0",
+    "@zag-js/angle-slider": "^0.79.0",
+    "@zag-js/auto-resize": "^0.79.0",
+    "@zag-js/avatar": "^0.79.0",
+    "@zag-js/carousel": "^0.79.0",
+    "@zag-js/checkbox": "^0.79.0",
+    "@zag-js/clipboard": "^0.79.0",
+    "@zag-js/collapsible": "^0.79.0",
+    "@zag-js/color-picker": "^0.79.0",
+    "@zag-js/combobox": "^0.79.0",
+    "@zag-js/core": "^0.79.0",
+    "@zag-js/date-picker": "^0.79.0",
+    "@zag-js/dialog": "^0.79.0",
+    "@zag-js/dom-query": "^0.79.0",
+    "@zag-js/editable": "^0.79.0",
+    "@zag-js/file-upload": "^0.79.0",
+    "@zag-js/floating-panel": "^0.79.0",
+    "@zag-js/highlight-word": "^0.79.0",
+    "@zag-js/hover-card": "^0.79.0",
+    "@zag-js/i18n-utils": "^0.79.0",
+    "@zag-js/menu": "^0.79.0",
+    "@zag-js/number-input": "^0.79.0",
+    "@zag-js/pagination": "^0.79.0",
+    "@zag-js/pin-input": "^0.79.0",
+    "@zag-js/popover": "^0.79.0",
+    "@zag-js/presence": "^0.79.0",
+    "@zag-js/progress": "^0.79.0",
+    "@zag-js/qr-code": "^0.79.0",
+    "@zag-js/radio-group": "^0.79.0",
+    "@zag-js/rating-group": "^0.79.0",
+    "@zag-js/select": "^0.79.0",
+    "@zag-js/signature-pad": "^0.79.0",
+    "@zag-js/slider": "^0.79.0",
+    "@zag-js/splitter": "^0.79.0",
+    "@zag-js/steps": "^0.79.0",
+    "@zag-js/svelte": "^0.79.0",
+    "@zag-js/switch": "^0.79.0",
+    "@zag-js/tabs": "^0.79.0",
+    "@zag-js/tags-input": "^0.79.0",
+    "@zag-js/time-picker": "^0.79.0",
+    "@zag-js/timer": "^0.79.0",
+    "@zag-js/toast": "^0.79.0",
+    "@zag-js/toggle-group": "^0.79.0",
+    "@zag-js/tooltip": "^0.79.0",
+    "@zag-js/tour": "^0.79.0",
+    "@zag-js/tree-view": "^0.79.0",
     "zagjs-legacy-svelte": "npm:@zag-js/svelte@0.77.1",
     "zagjs-legacy-toast": "npm:@zag-js/toast@0.77.1"
   },
@@ -364,24 +364,24 @@
   "devDependencies": {
     "@faker-js/faker": "^9.3.0",
     "@sveltejs/adapter-vercel": "^5.5.2",
-    "@sveltejs/kit": "^2.13.0",
+    "@sveltejs/kit": "^2.15.0",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@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",
+    "@untitled-theme/icons-svelte": "^0.13.0",
     "autoprefixer": "^10.4.20",
     "globals": "^15.14.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "publint": "^0.2.12",
-    "release-it": "^17.10.0",
+    "release-it": "^17.11.0",
     "resize-observer-polyfill": "^1.5.1",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",