ui-ingredients 0.8.0 → 0.10.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 {
@@ -54,6 +54,7 @@
54
54
  'onFocusOutside',
55
55
  'onInteractOutside',
56
56
  'onPointerDownOutside',
57
+ 'autoResize',
57
58
  ])(props),
58
59
  );
59
60
 
@@ -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
 
@@ -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.8.0",
6
- "packageManager": "pnpm@9.7.0",
5
+ "version": "0.10.0",
6
+ "packageManager": "pnpm@9.12.2",
7
7
  "svelte": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
9
  "exports": {
@@ -299,82 +299,82 @@
299
299
  "release": "release-it"
300
300
  },
301
301
  "dependencies": {
302
- "@zag-js/accordion": "^0.75.0",
303
- "@zag-js/anatomy": "^0.75.0",
304
- "@zag-js/avatar": "^0.75.0",
305
- "@zag-js/carousel": "^0.75.0",
306
- "@zag-js/checkbox": "^0.75.0",
307
- "@zag-js/clipboard": "^0.75.0",
308
- "@zag-js/collapsible": "^0.75.0",
309
- "@zag-js/color-picker": "^0.75.0",
310
- "@zag-js/combobox": "^0.75.0",
311
- "@zag-js/core": "^0.75.0",
312
- "@zag-js/date-picker": "^0.75.0",
313
- "@zag-js/dialog": "^0.75.0",
314
- "@zag-js/dom-query": "^0.75.0",
315
- "@zag-js/editable": "^0.75.0",
316
- "@zag-js/file-upload": "^0.75.0",
317
- "@zag-js/floating-panel": "^0.75.0",
318
- "@zag-js/highlight-word": "^0.75.0",
319
- "@zag-js/hover-card": "^0.75.0",
320
- "@zag-js/i18n-utils": "^0.75.0",
321
- "@zag-js/menu": "^0.75.0",
322
- "@zag-js/number-input": "^0.75.0",
323
- "@zag-js/pagination": "^0.75.0",
324
- "@zag-js/pin-input": "^0.75.0",
325
- "@zag-js/popover": "^0.75.0",
326
- "@zag-js/presence": "^0.75.0",
327
- "@zag-js/progress": "^0.75.0",
328
- "@zag-js/qr-code": "^0.75.0",
329
- "@zag-js/radio-group": "^0.75.0",
330
- "@zag-js/rating-group": "^0.75.0",
331
- "@zag-js/select": "^0.75.0",
332
- "@zag-js/signature-pad": "^0.75.0",
333
- "@zag-js/slider": "^0.75.0",
334
- "@zag-js/splitter": "^0.75.0",
335
- "@zag-js/steps": "^0.75.0",
336
- "@zag-js/svelte": "^0.75.0",
337
- "@zag-js/switch": "^0.75.0",
338
- "@zag-js/tabs": "^0.75.0",
339
- "@zag-js/tags-input": "^0.75.0",
340
- "@zag-js/time-picker": "^0.75.0",
341
- "@zag-js/timer": "^0.75.0",
342
- "@zag-js/toast": "^0.75.0",
343
- "@zag-js/toggle-group": "^0.75.0",
344
- "@zag-js/tooltip": "^0.75.0",
345
- "@zag-js/tour": "^0.75.0",
346
- "@zag-js/tree-view": "^0.75.0",
347
- "@zag-js/utils": "^0.75.0",
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",
348
348
  "uid": "^2.0.2"
349
349
  },
350
350
  "peerDependencies": {
351
- "svelte": "^5.0.0-next.1"
351
+ "svelte": ">=5.0.0"
352
352
  },
353
353
  "devDependencies": {
354
- "@faker-js/faker": "^9.0.3",
355
- "@sveltejs/adapter-vercel": "^5.4.5",
356
- "@sveltejs/kit": "^2.7.2",
357
- "@sveltejs/package": "^2.3.5",
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
358
  "@sveltejs/vite-plugin-svelte": "^4.0.0",
359
359
  "@testing-library/jest-dom": "^6.6.2",
360
360
  "@testing-library/svelte": "^5.2.4",
361
361
  "@testing-library/user-event": "^14.5.2",
362
362
  "@types/jsdom": "^21.1.7",
363
- "@untitled-theme/icons-svelte": "^0.10.11",
363
+ "@untitled-theme/icons-svelte": "^0.11.0",
364
364
  "autoprefixer": "^10.4.20",
365
365
  "globals": "^15.11.0",
366
366
  "jsdom": "^25.0.1",
367
367
  "postcss": "^8.4.47",
368
- "publint": "^0.2.11",
368
+ "publint": "^0.2.12",
369
369
  "release-it": "^17.10.0",
370
370
  "resize-observer-polyfill": "^1.5.1",
371
- "svelte": "^5.0.2",
371
+ "svelte": "^5.1.3",
372
372
  "svelte-check": "^4.0.5",
373
373
  "tailwind-merge": "^2.5.4",
374
374
  "tailwind-variants": "^0.2.1",
375
375
  "tailwindcss": "^3.4.14",
376
376
  "typescript": "^5.6.3",
377
- "vite": "^5.4.9",
377
+ "vite": "^5.4.10",
378
378
  "vitest": "^2.1.3",
379
379
  "vitest-axe": "^1.0.0-pre.3",
380
380
  "vitest-canvas-mock": "^0.3.3"
@@ -389,8 +389,7 @@
389
389
  },
390
390
  "hooks": {
391
391
  "before:init": [
392
- "pnpm check",
393
- "pnpm test"
392
+ "pnpm check"
394
393
  ],
395
394
  "after:bump": [
396
395
  "pnpm package"