ui-ingredients 0.7.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,7 +14,7 @@
14
14
  import {
15
15
  getAccordionContext,
16
16
  getAccordionItemPropsContext,
17
- } from './avatar-context.svelte.js';
17
+ } from './accordion-context.svelte.js';
18
18
 
19
19
  let {
20
20
  ref = $bindable(null),
@@ -10,7 +10,7 @@
10
10
  import {
11
11
  getAccordionContext,
12
12
  getAccordionItemPropsContext,
13
- } from './avatar-context.svelte.js';
13
+ } from './accordion-context.svelte.js';
14
14
 
15
15
  let {
16
16
  ref = $bindable(null),
@@ -10,7 +10,7 @@
10
10
  import {
11
11
  getAccordionContext,
12
12
  getAccordionItemPropsContext,
13
- } from './avatar-context.svelte.js';
13
+ } from './accordion-context.svelte.js';
14
14
 
15
15
  let {
16
16
  ref = $bindable(null),
@@ -15,7 +15,7 @@
15
15
  import {
16
16
  getAccordionContext,
17
17
  setAccordionItemPropsContext,
18
- } from './avatar-context.svelte.js';
18
+ } from './accordion-context.svelte.js';
19
19
 
20
20
  let {
21
21
  ref = $bindable(null),
@@ -19,7 +19,7 @@
19
19
  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
20
20
  import {reflect} from '@zag-js/svelte';
21
21
  import {createSplitProps} from '@zag-js/utils';
22
- import {setAccordionContext} from './avatar-context.svelte.js';
22
+ import {setAccordionContext} from './accordion-context.svelte.js';
23
23
  import {createAccordion} from './create-accordion.svelte.js';
24
24
 
25
25
  let {
@@ -7,12 +7,14 @@ export function createAccordion(props) {
7
7
  const locale = getLocaleContext();
8
8
  const environment = getEnvironmentContext();
9
9
  const id = createUniqueId();
10
- const context = reflect(() => ({
11
- id,
12
- dir: locale?.dir,
13
- getRootNode: environment?.getRootNode,
14
- ...props,
15
- }));
10
+ const context = reflect(() => {
11
+ return {
12
+ id,
13
+ dir: locale?.dir,
14
+ getRootNode: environment?.getRootNode,
15
+ ...props,
16
+ };
17
+ });
16
18
  const [state, send] = useMachine(accordion.machine(context), { context });
17
19
  return reflect(() => accordion.connect(state, send, normalizeProps));
18
20
  }
@@ -5,4 +5,4 @@ export type { AccordionItemTriggerProps } from './accordion-item-trigger.svelte'
5
5
  export type { AccordionItemProps } from './accordion-item.svelte';
6
6
  export type { AccordionProps } from './accordion-root.svelte';
7
7
  export { anatomy as accordionAnatomy } from '@zag-js/accordion';
8
- export { getAccordionContext } from './avatar-context.svelte.js';
8
+ export { getAccordionContext } from './accordion-context.svelte.js';
@@ -1,3 +1,3 @@
1
1
  export * as Accordion from './accordion.js';
2
2
  export { anatomy as accordionAnatomy } from '@zag-js/accordion';
3
- export { getAccordionContext } from './avatar-context.svelte.js';
3
+ export { getAccordionContext } from './accordion-context.svelte.js';
@@ -33,8 +33,10 @@ export function createCombobox(props) {
33
33
  'open.controlled': props.openControlled,
34
34
  collection,
35
35
  }));
36
- /* FIXME: pass controlled context */
37
- const [state, send] = useMachine(combobox.machine(context));
36
+ const [state, send, service] = useMachine(combobox.machine(context));
37
+ $effect(() => {
38
+ service.setContext(context);
39
+ });
38
40
  return reflect(() => {
39
41
  const o = combobox.connect(state, send, normalizeProps);
40
42
  return {
@@ -8,7 +8,6 @@ export function createDatePicker(props) {
8
8
  const locale = getLocaleContext();
9
9
  const environment = getEnvironmentContext();
10
10
  const id = createUniqueId();
11
- /* FIXME: use reflect */
12
11
  const context = $derived.by(() => ({
13
12
  id,
14
13
  dir: locale?.dir,
@@ -23,7 +22,10 @@ export function createDatePicker(props) {
23
22
  getRootNode: environment?.getRootNode,
24
23
  'open.controlled': props.openControlled,
25
24
  }));
26
- const [state, send] = useMachine(datePicker.machine(context), { context });
25
+ const [state, send, service] = useMachine(datePicker.machine(context));
26
+ $effect(() => {
27
+ service.setContext(context);
28
+ });
27
29
  return reflect(() => {
28
30
  const o = datePicker.connect(state, send, normalizeProps);
29
31
  return {
@@ -2,6 +2,6 @@ import * as floatingPanel from '@zag-js/floating-panel';
2
2
  export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
3
3
  id?: string;
4
4
  }
5
- export interface CreateFloatingPanelReturn extends floatingPanel.Api<any> {
5
+ export interface CreateFloatingPanelReturn extends floatingPanel.Api {
6
6
  }
7
7
  export declare function createFloatingPanel(props: CreateFloatingPanelProps): CreateFloatingPanelReturn;
@@ -4,6 +4,7 @@ import { getFieldContext } from '../field/field-context.svelte.js';
4
4
  import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
5
5
  import * as pinInput from '@zag-js/pin-input';
6
6
  import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
7
+ import { parts } from './pin-input-anatomy.js';
7
8
  export function createPinInputContext(props) {
8
9
  const field = getFieldContext();
9
10
  const locale = getLocaleContext();
@@ -33,6 +34,7 @@ export function createPinInputContext(props) {
33
34
  onclick() {
34
35
  o.clearValue();
35
36
  },
37
+ ...parts.clearTrigger.attrs,
36
38
  };
37
39
  },
38
40
  getHiddenInputProps() {
@@ -7,7 +7,6 @@
7
7
 
8
8
  <script lang="ts">
9
9
  import {mergeProps} from '../merge-props.js';
10
- import {parts} from './pin-input-anatomy.js';
11
10
  import {getPinInputContext} from './pin-input-context.svelte.js';
12
11
 
13
12
  let {
@@ -20,11 +19,7 @@
20
19
  let pinInput = getPinInputContext();
21
20
 
22
21
  let mergedProps = $derived(
23
- mergeProps(
24
- parts.clearTrigger.attrs as any,
25
- pinInput.getClearTriggerProps(),
26
- props,
27
- ),
22
+ mergeProps(pinInput.getClearTriggerProps(), props),
28
23
  );
29
24
  </script>
30
25
 
@@ -14,6 +14,7 @@
14
14
  import {reflect} from '@zag-js/svelte';
15
15
  import {createSplitProps} from '@zag-js/utils';
16
16
  import type {Action} from 'svelte/action';
17
+ import type {HTMLAttributes} from 'svelte/elements';
17
18
  import {createPresence} from './create-presence.svelte.js';
18
19
 
19
20
  let {asChild, children, ...props}: PresenceProps = $props();
@@ -29,7 +30,10 @@
29
30
  let presence = createPresence(reflect(() => createPresenceProps));
30
31
 
31
32
  let mergedProps = $derived(
32
- mergeProps(presence.getPresenceProps() as any, localProps),
33
+ mergeProps<HTMLAttributes<HTMLDivElement>>(
34
+ presence.getPresenceProps(),
35
+ localProps,
36
+ ),
33
37
  );
34
38
  </script>
35
39
 
@@ -1,5 +1,6 @@
1
1
  export * as Slider from './slider.js';
2
2
  export type { SliderControlProps } from './slider-control.svelte';
3
+ export type { SliderDraggingIndicatorProps } from './slider-dragging-indicator.svelte';
3
4
  export type { SliderHiddenInputProps } from './slider-hidden-input.svelte';
4
5
  export type { SliderLabelProps } from './slider-label.svelte';
5
6
  export type { SliderMarkerGroupProps } from './slider-marker-group.svelte';
@@ -0,0 +1,36 @@
1
+ <script lang="ts" module>
2
+ import type {HtmlIngredientProps} from '../types.js';
3
+
4
+ export interface SliderDraggingIndicatorProps
5
+ extends HtmlIngredientProps<'label', HTMLLabelElement> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '../merge-props.js';
10
+ import {
11
+ getSliderContext,
12
+ getSliderThumbPropsContext,
13
+ } from './slider-context.svelte.js';
14
+
15
+ let {
16
+ ref = $bindable(null),
17
+ asChild,
18
+ children,
19
+ ...props
20
+ }: SliderDraggingIndicatorProps = $props();
21
+
22
+ let slider = getSliderContext();
23
+ let thumbProps = getSliderThumbPropsContext();
24
+
25
+ let mergedProps = $derived(
26
+ mergeProps(slider.getDraggingIndicatorProps(thumbProps), props),
27
+ );
28
+ </script>
29
+
30
+ {#if asChild}
31
+ {@render asChild(mergedProps)}
32
+ {:else}
33
+ <label bind:this={ref} {...mergedProps}>
34
+ {@render children?.()}
35
+ </label>
36
+ {/if}
@@ -0,0 +1,21 @@
1
+ import type { HtmlIngredientProps } from '../types.js';
2
+ export interface SliderDraggingIndicatorProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
3
+ }
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const SliderDraggingIndicator: $$__sveltets_2_IsomorphicComponent<SliderDraggingIndicatorProps, {
18
+ [evt: string]: CustomEvent<any>;
19
+ }, {}, {}, "ref">;
20
+ type SliderDraggingIndicator = InstanceType<typeof SliderDraggingIndicator>;
21
+ export default SliderDraggingIndicator;
@@ -1,4 +1,5 @@
1
1
  export { default as Control } from './slider-control.svelte';
2
+ export { default as DraggingIndicator } from './slider-dragging-indicator.svelte';
2
3
  export { default as HiddenInput } from './slider-hidden-input.svelte';
3
4
  export { default as Label } from './slider-label.svelte';
4
5
  export { default as MarkerGroup } from './slider-marker-group.svelte';
@@ -1,4 +1,5 @@
1
1
  export { default as Control } from './slider-control.svelte';
2
+ export { default as DraggingIndicator } from './slider-dragging-indicator.svelte';
2
3
  export { default as HiddenInput } from './slider-hidden-input.svelte';
3
4
  export { default as Label } from './slider-label.svelte';
4
5
  export { default as MarkerGroup } from './slider-marker-group.svelte';
@@ -12,9 +12,10 @@ export interface CreateToasterProps {
12
12
  removeDelay?: toast.GroupMachineContext['removeDelay'];
13
13
  pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
14
14
  }
15
- type ToasterMachine = Machine<toast.GroupMachineContext<any>, {
15
+ type ToasterMachineState = {
16
16
  value: 'stack' | 'overlap';
17
- }, StateMachine.AnyEventObject>;
17
+ };
18
+ type ToasterMachine = Machine<toast.GroupMachineContext, ToasterMachineState, StateMachine.AnyEventObject>;
18
19
  export interface CreateToasterReturn extends toast.GroupApi {
19
20
  machine: ToasterMachine;
20
21
  }
@@ -16,6 +16,7 @@
16
16
  import {Portal} from '../portal/index.js';
17
17
  import {normalizeProps, useMachine} from '@zag-js/svelte';
18
18
  import * as toast from '@zag-js/toast';
19
+ import type {HTMLAttributes} from 'svelte/elements';
19
20
  import ToastActor from './toast-actor.svelte';
20
21
 
21
22
  let {
@@ -39,7 +40,10 @@
39
40
  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
40
41
  let toasts = $derived(api.getToastsByPlacement(placement));
41
42
  let mergedProps = $derived(
42
- mergeProps(api.getGroupProps({placement}) as any, props),
43
+ mergeProps<HTMLAttributes<HTMLDivElement>>(
44
+ api.getGroupProps({placement}),
45
+ props,
46
+ ),
43
47
  );
44
48
  </script>
45
49
 
package/package.json CHANGED
@@ -2,8 +2,8 @@
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
4
  "license": "MIT",
5
- "version": "0.7.0",
6
- "packageManager": "pnpm@9.7.0",
5
+ "version": "0.9.0",
6
+ "packageManager": "pnpm@9.12.2",
7
7
  "svelte": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
9
  "exports": {
@@ -210,18 +210,6 @@
210
210
  "./tree-view": {
211
211
  "types": "./dist/tree-view/index.d.ts",
212
212
  "svelte": "./dist/tree-view/index.js"
213
- },
214
- "./merge-props": {
215
- "types": "./dist/merge-props.d.ts",
216
- "import": "./dist/merge-props.js"
217
- },
218
- "./create-context": {
219
- "types": "./dist/create-context.svelte.d.ts",
220
- "import": "./dist/create-context.svelte.js"
221
- },
222
- "./create-unique-id": {
223
- "types": "./dist/create-unique-id.d.ts",
224
- "import": "./dist/create-unique-id.js"
225
213
  }
226
214
  },
227
215
  "files": [
@@ -311,82 +299,82 @@
311
299
  "release": "release-it"
312
300
  },
313
301
  "dependencies": {
314
- "@zag-js/accordion": "^0.74.2",
315
- "@zag-js/anatomy": "^0.74.2",
316
- "@zag-js/avatar": "^0.74.2",
317
- "@zag-js/carousel": "^0.74.2",
318
- "@zag-js/checkbox": "^0.74.2",
319
- "@zag-js/clipboard": "^0.74.2",
320
- "@zag-js/collapsible": "^0.74.2",
321
- "@zag-js/color-picker": "^0.74.2",
322
- "@zag-js/combobox": "^0.74.2",
323
- "@zag-js/core": "^0.74.2",
324
- "@zag-js/date-picker": "^0.74.2",
325
- "@zag-js/dialog": "^0.74.2",
326
- "@zag-js/dom-query": "^0.74.2",
327
- "@zag-js/editable": "^0.74.2",
328
- "@zag-js/file-upload": "^0.74.2",
329
- "@zag-js/floating-panel": "^0.74.2",
330
- "@zag-js/highlight-word": "^0.74.2",
331
- "@zag-js/hover-card": "^0.74.2",
332
- "@zag-js/i18n-utils": "^0.74.2",
333
- "@zag-js/menu": "^0.74.2",
334
- "@zag-js/number-input": "^0.74.2",
335
- "@zag-js/pagination": "^0.74.2",
336
- "@zag-js/pin-input": "^0.74.2",
337
- "@zag-js/popover": "^0.74.2",
338
- "@zag-js/presence": "^0.74.2",
339
- "@zag-js/progress": "^0.74.2",
340
- "@zag-js/qr-code": "^0.74.2",
341
- "@zag-js/radio-group": "^0.74.2",
342
- "@zag-js/rating-group": "^0.74.2",
343
- "@zag-js/select": "^0.74.2",
344
- "@zag-js/signature-pad": "^0.74.2",
345
- "@zag-js/slider": "^0.74.2",
346
- "@zag-js/splitter": "^0.74.2",
347
- "@zag-js/steps": "^0.74.2",
348
- "@zag-js/svelte": "^0.74.2",
349
- "@zag-js/switch": "^0.74.2",
350
- "@zag-js/tabs": "^0.74.2",
351
- "@zag-js/tags-input": "^0.74.2",
352
- "@zag-js/time-picker": "^0.74.2",
353
- "@zag-js/timer": "^0.74.2",
354
- "@zag-js/toast": "^0.74.2",
355
- "@zag-js/toggle-group": "^0.74.2",
356
- "@zag-js/tooltip": "^0.74.2",
357
- "@zag-js/tour": "^0.74.2",
358
- "@zag-js/tree-view": "^0.74.2",
359
- "@zag-js/utils": "^0.74.2",
302
+ "@zag-js/accordion": "^0.76.0",
303
+ "@zag-js/anatomy": "^0.76.0",
304
+ "@zag-js/avatar": "^0.76.0",
305
+ "@zag-js/carousel": "^0.76.0",
306
+ "@zag-js/checkbox": "^0.76.0",
307
+ "@zag-js/clipboard": "^0.76.0",
308
+ "@zag-js/collapsible": "^0.76.0",
309
+ "@zag-js/color-picker": "^0.76.0",
310
+ "@zag-js/combobox": "^0.76.0",
311
+ "@zag-js/core": "^0.76.0",
312
+ "@zag-js/date-picker": "^0.76.0",
313
+ "@zag-js/dialog": "^0.76.0",
314
+ "@zag-js/dom-query": "^0.76.0",
315
+ "@zag-js/editable": "^0.76.0",
316
+ "@zag-js/file-upload": "^0.76.0",
317
+ "@zag-js/floating-panel": "^0.76.0",
318
+ "@zag-js/highlight-word": "^0.76.0",
319
+ "@zag-js/hover-card": "^0.76.0",
320
+ "@zag-js/i18n-utils": "^0.76.0",
321
+ "@zag-js/menu": "^0.76.0",
322
+ "@zag-js/number-input": "^0.76.0",
323
+ "@zag-js/pagination": "^0.76.0",
324
+ "@zag-js/pin-input": "^0.76.0",
325
+ "@zag-js/popover": "^0.76.0",
326
+ "@zag-js/presence": "^0.76.0",
327
+ "@zag-js/progress": "^0.76.0",
328
+ "@zag-js/qr-code": "^0.76.0",
329
+ "@zag-js/radio-group": "^0.76.0",
330
+ "@zag-js/rating-group": "^0.76.0",
331
+ "@zag-js/select": "^0.76.0",
332
+ "@zag-js/signature-pad": "^0.76.0",
333
+ "@zag-js/slider": "^0.76.0",
334
+ "@zag-js/splitter": "^0.76.0",
335
+ "@zag-js/steps": "^0.76.0",
336
+ "@zag-js/svelte": "^0.76.0",
337
+ "@zag-js/switch": "^0.76.0",
338
+ "@zag-js/tabs": "^0.76.0",
339
+ "@zag-js/tags-input": "^0.76.0",
340
+ "@zag-js/time-picker": "^0.76.0",
341
+ "@zag-js/timer": "^0.76.0",
342
+ "@zag-js/toast": "^0.76.0",
343
+ "@zag-js/toggle-group": "^0.76.0",
344
+ "@zag-js/tooltip": "^0.76.0",
345
+ "@zag-js/tour": "^0.76.0",
346
+ "@zag-js/tree-view": "^0.76.0",
347
+ "@zag-js/utils": "^0.76.0",
360
348
  "uid": "^2.0.2"
361
349
  },
362
350
  "peerDependencies": {
363
- "svelte": "^5.0.0-next.1"
351
+ "svelte": ">=5.0.0"
364
352
  },
365
353
  "devDependencies": {
366
- "@faker-js/faker": "^9.0.3",
367
- "@sveltejs/adapter-vercel": "^5.4.5",
368
- "@sveltejs/kit": "^2.7.1",
369
- "@sveltejs/package": "^2.3.5",
370
- "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
371
- "@testing-library/jest-dom": "^6.5.0",
372
- "@testing-library/svelte": "^5.2.3",
354
+ "@faker-js/faker": "^9.1.0",
355
+ "@sveltejs/adapter-vercel": "^5.4.6",
356
+ "@sveltejs/kit": "^2.7.3",
357
+ "@sveltejs/package": "^2.3.7",
358
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
359
+ "@testing-library/jest-dom": "^6.6.2",
360
+ "@testing-library/svelte": "^5.2.4",
373
361
  "@testing-library/user-event": "^14.5.2",
374
362
  "@types/jsdom": "^21.1.7",
375
- "@untitled-theme/icons-svelte": "^0.10.11",
363
+ "@untitled-theme/icons-svelte": "^0.11.0",
376
364
  "autoprefixer": "^10.4.20",
377
365
  "globals": "^15.11.0",
378
366
  "jsdom": "^25.0.1",
379
367
  "postcss": "^8.4.47",
380
- "publint": "^0.2.11",
381
- "release-it": "^17.9.0",
368
+ "publint": "^0.2.12",
369
+ "release-it": "^17.10.0",
382
370
  "resize-observer-polyfill": "^1.5.1",
383
- "svelte": "^5.0.0-next.265",
371
+ "svelte": "^5.1.3",
384
372
  "svelte-check": "^4.0.5",
385
373
  "tailwind-merge": "^2.5.4",
386
374
  "tailwind-variants": "^0.2.1",
387
- "tailwindcss": "^3.4.13",
375
+ "tailwindcss": "^3.4.14",
388
376
  "typescript": "^5.6.3",
389
- "vite": "^5.4.9",
377
+ "vite": "^5.4.10",
390
378
  "vitest": "^2.1.3",
391
379
  "vitest-axe": "^1.0.0-pre.3",
392
380
  "vitest-canvas-mock": "^0.3.3"
@@ -401,8 +389,7 @@
401
389
  },
402
390
  "hooks": {
403
391
  "before:init": [
404
- "pnpm check",
405
- "pnpm test"
392
+ "pnpm check"
406
393
  ],
407
394
  "after:bump": [
408
395
  "pnpm package"