ui-ingredients 0.0.53 → 0.0.54

package/dist/color-picker/create-color-picker.svelte.d.ts

@@ -1,9 +1,19 @@
+import type { GenericObject } from '../types.js';
 import * as colorPicker from '@zag-js/color-picker';
-export interface CreateColorPickerProps extends Omit<colorPicker.Context, 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled'> {
+type Omitted = 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled';
+export interface CreateColorPickerProps extends Omit<colorPicker.Context, Omitted> {
     id?: string | null;
     value?: string;
     defaultOpen?: boolean;
 }
 export interface CreateColorPickerReturn extends colorPicker.Api {
+    getViewProps(props: {
+        format: colorPicker.ColorFormat;
+    }): GenericObject;
+    getFormats(): {
+        label: string;
+        value: colorPicker.ColorFormat;
+    }[];
 }
 export declare function createColorPicker(props: CreateColorPickerProps): CreateColorPickerReturn;
+export {};

package/dist/color-picker/create-color-picker.svelte.js

@@ -3,11 +3,12 @@ import { getLocaleContext } from '../locale-provider/local-provider-context.svel
 import * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { uid } from 'uid';
+import { parts } from './color-picker-anatomy.js';
 export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = reflect(() => ({
+    const context = $derived.by(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
@@ -17,5 +18,33 @@ export function createColorPicker(props) {
         'open.controlled': props.open != null,
     }));
     const [state, send] = useMachine(colorPicker.machine(context), { context });
-    return reflect(() => colorPicker.connect(state, send, normalizeProps));
+    return reflect(() => {
+        const o = colorPicker.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getViewProps(props) {
+                return {
+                    hidden: props.format !== o.format,
+                    'data-format': o.format,
+                    ...parts.view.attrs,
+                };
+            },
+            getFormats() {
+                return [
+                    {
+                        label: 'RGBA',
+                        value: 'rgba',
+                    },
+                    {
+                        label: 'HSLA',
+                        value: 'hsla',
+                    },
+                    {
+                        label: 'HSBA',
+                        value: 'hsba',
+                    },
+                ];
+            },
+        };
+    });
 }

package/dist/color-picker/index.d.ts

@@ -23,6 +23,8 @@ export type { ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigge
 export type { ColorPickerSwatchProps } from './color-picker-swatch.svelte';
 export type { ColorPickerTransparencyGridProps } from './color-picker-transparency-grid.svelte';
 export type { ColorPickerTriggerProps } from './color-picker-trigger.svelte';
+export type { ColorPickerValueSwatchProps } from './color-picker-value-swatch.svelte';
 export type { ColorPickerValueTextProps } from './color-picker-value-text.svelte';
-export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
+export type { ColorPickerViewTextProps } from './color-picker-view.svelte';
+export { anatomy as colorPickerAnatomy } from './color-picker-anatomy.js';
 export { getColorPickerContext } from './color-picker-context.svelte.js';

package/dist/color-picker/index.js

@@ -1,3 +1,3 @@
 export * as ColorPicker from './color-picker.js';
-export { anatomy as colorPickerAnatomy } from '@zag-js/color-picker';
+export { anatomy as colorPickerAnatomy } from './color-picker-anatomy.js';
 export { getColorPickerContext } from './color-picker-context.svelte.js';

package/dist/combobox/combobox-input.svelte

@@ -13,7 +13,9 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(props, combobox.getInputProps()));
+  let mergedProps = $derived(
+    mergeProps({...props, 'aria-expanded': false}, combobox.getInputProps()),
+  );
 </script>
 
 {#if asChild}

package/dist/combobox/combobox-root.svelte

@@ -31,7 +31,7 @@
     ),
   );
 
-  let [comboboxProps, localProps] = $derived(
+  let [createComboboxProps, localProps] = $derived(
     createSplitProps<CreateComboboxProps<T>>([
       'id',
       'ids',
@@ -77,7 +77,7 @@
     ])(rest),
   );
 
-  let combobox = createCombobox(reflect(() => comboboxProps));
+  let combobox = createCombobox(reflect(() => createComboboxProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/date-picker/date-picker-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "clearTrigger" | "positioner" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
-export declare const parts: Record<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "clearTrigger" | "positioner" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const parts: Record<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/date-picker/date-picker-month-select.svelte

@@ -2,7 +2,9 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface DatePickerMonthSelectProps
-    extends HtmlIngredientProps<'select', HTMLSelectElement> {}
+    extends HtmlIngredientProps<'select', HTMLSelectElement> {
+    format?: 'short' | 'long';
+  }
 </script>
 
 <script lang="ts">
@@ -11,6 +13,7 @@
 
   let {
     this: e,
+    format = 'short',
     asChild,
     children,
     ...props
@@ -21,21 +24,6 @@
   let mergedProps = $derived(
     mergeProps(props, datePicker.getMonthSelectProps()),
   );
-
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
 </script>
 
 {#if asChild}
@@ -45,8 +33,8 @@
     {#if children}
       {@render children()}
     {:else}
-      {#each months as month, index}
-        <option value={index}>{month}</option>
+      {#each datePicker.getMonths({format}) as item}
+        <option value={item.value}>{item.label}</option>
       {/each}
     {/if}
   </select>

package/dist/date-picker/date-picker-month-select.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface DatePickerMonthSelectProps extends HtmlIngredientProps<'select', HTMLSelectElement> {
+    format?: 'short' | 'long';
 }
 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/date-picker/date-picker-root.svelte

@@ -29,7 +29,7 @@
     createSplitProps<PresenceStrategyProps>([])(props),
   );
 
-  let [datePickerProps, localProps] = $derived(
+  let [createDatePickerProps, localProps] = $derived(
     createSplitProps<CreateDatePickerProps>([
       'id',
       'ids',
@@ -62,7 +62,7 @@
     ])(rest),
   );
 
-  let datePicker = createDatePicker(reflect(() => datePickerProps));
+  let datePicker = createDatePicker(reflect(() => createDatePickerProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/date-picker/date-picker-year-select.svelte

@@ -21,21 +21,6 @@
   let mergedProps = $derived(
     mergeProps(props, datePicker.getYearSelectProps()),
   );
-
-  function getYears() {
-    const currentYear = new Date().getFullYear();
-
-    const start = currentYear - 1000;
-    const until = currentYear + 1000;
-
-    const years = [];
-
-    for (let i = start; i <= until; i++) {
-      years.unshift(i);
-    }
-
-    return years;
-  }
 </script>
 
 {#if asChild}
@@ -45,8 +30,8 @@
     {#if children}
       {@render children()}
     {:else}
-      {#each getYears() as year}
-        <option value={year}>{year}</option>
+      {#each datePicker.getYears() as item}
+        <option value={item.value}>{item.label}</option>
       {/each}
     {/if}
   </select>

package/dist/dialog/dialog-root.svelte

@@ -26,13 +26,13 @@
 
   let {children, ...props}: DialogProps = $props();
 
-  let [presenceStrategyProps, dialogProps] = $derived(
+  let [presenceStrategyProps, createDialogProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
-  let dialog = createDialog(reflect(() => dialogProps));
+  let dialog = createDialog(reflect(() => createDialogProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/editable/editable-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: EditableProps = $props();
 
-  let [editableProps, localProps] = $derived(
+  let [createEditableProps, localProps] = $derived(
     createSplitProps<CreateEditableProps>([
       'id',
       'ids',
@@ -52,7 +52,7 @@
     ])(props),
   );
 
-  let editable = createEditable(reflect(() => editableProps));
+  let editable = createEditable(reflect(() => createEditableProps));
 
   let mergedProps = $derived(mergeProps(localProps, editable.getRootProps()));
 

package/dist/field/field-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: FieldProps = $props();
 
-  let [fieldProps, localProps] = $derived(
+  let [createFieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
       'id',
       'ids',
@@ -32,7 +32,7 @@
     ])(props),
   );
 
-  let field = createField(reflect(() => fieldProps));
+  let field = createField(reflect(() => createFieldProps));
 
   let mergedProps = $derived(mergeProps(localProps, field.getRootProps()));
 

package/dist/file-upload/file-upload-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: FileUploadProps = $props();
 
-  let [fileUploadProps, localProps] = $derived(
+  let [createFileUploadProps, localProps] = $derived(
     createSplitProps<CreateFileUploadProps>([
       'id',
       'ids',
@@ -45,7 +45,7 @@
     ])(props),
   );
 
-  let fileUpload = createFileUpload(reflect(() => fileUploadProps));
+  let fileUpload = createFileUpload(reflect(() => createFileUploadProps));
 
   let mergedProps = $derived(mergeProps(localProps, fileUpload.getRootProps()));
 

package/dist/floating-panel/floating-panel-root.svelte

@@ -23,13 +23,15 @@
 
   let {children, ...props}: FloatingPanelProps = $props();
 
-  let [presenceStrategyProps, floatingPanelProps] = $derived(
+  let [presenceStrategyProps, createFloatingPanelProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
-  let floatingPanel = createFloatingPanel(reflect(() => floatingPanelProps));
+  let floatingPanel = createFloatingPanel(
+    reflect(() => createFloatingPanelProps),
+  );
 
   let presence = createPresence(
     reflect(() => ({

package/dist/highlight/highlight.svelte

@@ -15,7 +15,7 @@
 
   let {this: e, asChild, ...props}: HighlightProps = $props();
 
-  let [highlightProps, localProps] = $derived(
+  let [highlightWordProps, localProps] = $derived(
     createSplitProps<HighlightWordProps>([
       'text',
       'query',
@@ -24,7 +24,7 @@
     ])(props),
   );
 
-  let chunks = $derived(highlightWord(highlightProps));
+  let chunks = $derived(highlightWord(highlightWordProps));
 </script>
 
 {#if asChild}

package/dist/hover-card/hover-card-root.svelte

@@ -23,7 +23,7 @@
 
   let {children, ...props}: HoverCardProps = $props();
 
-  let [hoverCardProps, presenceStrategyProps] = $derived(
+  let [createHoverCardProps, presenceStrategyProps] = $derived(
     createSplitProps<CreateHoverCardProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
     ])(props),
   );
 
-  let hoverCard = createHoverCard(reflect(() => hoverCardProps));
+  let hoverCard = createHoverCard(reflect(() => createHoverCardProps));
 
   let presence = createPresence(
     reflect(() => ({

package/dist/number-input/number-input-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: NumberInputProps = $props();
 
-  let [numberInputProps, localProps] = $derived(
+  let [createNumberInputProps, localProps] = $derived(
     createSplitProps<CreateNumberInputProps>([
       'id',
       'ids',
@@ -51,7 +51,7 @@
     ])(props),
   );
 
-  let numberInput = createNumberInput(reflect(() => numberInputProps));
+  let numberInput = createNumberInput(reflect(() => createNumberInputProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, numberInput.getRootProps()),

package/dist/pagination/pagination-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: PaginationProps = $props();
 
-  let [paginationProps, localProps] = $derived(
+  let [createPaginationProps, localProps] = $derived(
     createSplitProps<CreatePaginationProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
     ])(props),
   );
 
-  let pagination = createPagination(reflect(() => paginationProps));
+  let pagination = createPagination(reflect(() => createPaginationProps));
 
   let mergedProps = $derived(mergeProps(localProps, pagination.getRootProps()));
 

package/dist/pin-input/pin-input-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: PinInputProps = $props();
 
-  let [pinInputProps, localProps] = $derived(
+  let [createPinInputProps, localProps] = $derived(
     createSplitProps<CreatePinInputProps>([
       'id',
       'ids',
@@ -47,7 +47,7 @@
     ])(props),
   );
 
-  let pinInput = createPinInputContext(reflect(() => pinInputProps));
+  let pinInput = createPinInputContext(reflect(() => createPinInputProps));
 
   let mergedProps = $derived(mergeProps(localProps, pinInput.getRootProps()));
 

package/dist/popover/popover-root.svelte

@@ -23,7 +23,7 @@
 
   let {children, ...props}: PopoverProps = $props();
 
-  let [popoverProps, presenceStrategyProps] = $derived(
+  let [createPopoverProps, presenceStrategyProps] = $derived(
     createSplitProps<CreatePopoverProps>([
       'autoFocus',
       'closeOnEscape',
@@ -45,7 +45,7 @@
     ])(props),
   );
 
-  let popover = createPopover(reflect(() => popoverProps));
+  let popover = createPopover(reflect(() => createPopoverProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/presence/presence.svelte

@@ -18,7 +18,7 @@
 
   let {asChild, children, ...props}: PresenceProps = $props();
 
-  let [presenceProps, localProps] = $derived(
+  let [createPresenceProps, localProps] = $derived(
     createSplitProps<CreatePresenceProps>([
       'present',
       'lazyMount',
@@ -26,7 +26,7 @@
     ])(props),
   );
 
-  let presence = createPresence(reflect(() => presenceProps));
+  let presence = createPresence(reflect(() => createPresenceProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, presence.getPresenceProps()),

package/dist/progress/progress-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: ProgressProps = $props();
 
-  let [progressProps, localProps] = $derived(
+  let [createProgressProps, localProps] = $derived(
     createSplitProps<CreateProgressProps>([
       'id',
       'ids',
@@ -33,7 +33,7 @@
     ])(props),
   );
 
-  let progress = createProgress(reflect(() => progressProps));
+  let progress = createProgress(reflect(() => createProgressProps));
 
   let mergedProps = $derived(mergeProps(localProps, progress.getRootProps()));
 

package/dist/qr-code/qr-code-root.svelte

@@ -21,13 +21,13 @@
 
   let {this: e, asChild, children, ...props}: QrCodeProps = $props();
 
-  let [qrCodeProps, localProps] = $derived(
+  let [createQrCodeProps, localProps] = $derived(
     createSplitProps<CreateQrCodeProps>(['id', 'ids', 'value', 'encoding'])(
       props,
     ),
   );
 
-  let qrCode = createQRCode(reflect(() => qrCodeProps));
+  let qrCode = createQRCode(reflect(() => createQrCodeProps));
 
   let mergedProps = $derived(mergeProps(localProps, qrCode.getRootProps()));
 

package/dist/radio-group/radio-group-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: RadioGroupProps = $props();
 
-  let [radioGroupProps, localProps] = $derived(
+  let [createRadioGroupProps, localProps] = $derived(
     createSplitProps<CreateRadioGroupProps>([
       'id',
       'ids',
@@ -35,7 +35,7 @@
     ])(props),
   );
 
-  let radioGroup = createRadioGroup(reflect(() => radioGroupProps));
+  let radioGroup = createRadioGroup(reflect(() => createRadioGroupProps));
 
   let mergedProps = $derived(mergeProps(localProps, radioGroup.getRootProps()));
 

package/dist/rating-group/rating-group-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: RatingGroupProps = $props();
 
-  let [ratingGroupProps, localProps] = $derived(
+  let [createRatingGroupProps, localProps] = $derived(
     createSplitProps<CreateRatingGroupProps>([
       'id',
       'ids',
@@ -40,7 +40,7 @@
     ])(props),
   );
 
-  let ratingGroup = createRatingGroup(reflect(() => ratingGroupProps));
+  let ratingGroup = createRatingGroup(reflect(() => createRatingGroupProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, ratingGroup.getRootProps()),

package/dist/segment-group/segment-group-root.svelte

@@ -22,7 +22,7 @@
 
   let {this: e, asChild, children, ...props}: SegmentGroupProps = $props();
 
-  let [segmentGroupProps, localProps] = $derived(
+  let [createSegmentGroupProps, localProps] = $derived(
     createSplitProps<CreateSegmentGroupProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
     ])(props),
   );
 
-  let segmentGroup = createSegmentGroup(reflect(() => segmentGroupProps));
+  let segmentGroup = createSegmentGroup(reflect(() => createSegmentGroupProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, segmentGroup.getRootProps(), parts.root.attrs),

package/dist/select/select-root.svelte

@@ -25,7 +25,7 @@
 
   let {this: e, asChild, children, ...props}: SelectProps<T> = $props();
 
-  let [selectProps, rest] = $derived(
+  let [createSelectProps, rest] = $derived(
     createSplitProps<CreateSelectProps<T>>([
       'id',
       'ids',
@@ -62,7 +62,7 @@
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
   );
 
-  let select = createSelect(reflect(() => selectProps));
+  let select = createSelect(reflect(() => createSelectProps));
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

package/dist/signature-pad/signature-pad-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: SignaturePadProps = $props();
 
-  let [signaturePadProps, localProps] = $derived(
+  let [createSignaturePadProps, localProps] = $derived(
     createSplitProps<CreateSignaturePadProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
     ])(props),
   );
 
-  let signaturePad = createSignaturePad(reflect(() => signaturePadProps));
+  let signaturePad = createSignaturePad(reflect(() => createSignaturePadProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, signaturePad.getRootProps()),

package/dist/slider/slider-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: SliderProps = $props();
 
-  let [sliderProps, localProps] = $derived(
+  let [createSliderProps, localProps] = $derived(
     createSplitProps<CreateSliderProps>([
       'id',
       'ids',
@@ -48,7 +48,7 @@
     ])(props),
   );
 
-  let slider = createSlider(reflect(() => sliderProps));
+  let slider = createSlider(reflect(() => createSliderProps));
 
   let mergedProps = $derived(mergeProps(localProps, slider.getRootProps()));
 

package/dist/splitter/splitter-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: SplitterProps = $props();
 
-  let [splitterProps, localProps] = $derived(
+  let [createSplitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
       'id',
       'ids',
@@ -32,7 +32,7 @@
     ])(props),
   );
 
-  let splitter = createSplitter(reflect(() => splitterProps));
+  let splitter = createSplitter(reflect(() => createSplitterProps));
 
   let mergedProps = $derived(mergeProps(localProps, splitter.getRootProps()));
 

package/dist/steps/steps-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: StepsProps = $props();
 
-  let [stepsProps, localProps] = $derived(
+  let [createStepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
     ])(props),
   );
 
-  let steps = createSteps(reflect(() => stepsProps));
+  let steps = createSteps(reflect(() => createStepsProps));
 
   let mergedProps = $derived(mergeProps(localProps, steps.getRootProps()));