@sprawlify/svelte 0.0.61 → 0.0.63

package/dist/components/carousel/carousel-anatomy.d.ts

@@ -1 +1 @@
-export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "indicator" | "item" | "itemGroup" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;
+export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "control" | "item" | "indicator" | "prevTrigger" | "nextTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/checkbox/checkbox-anatomy.d.ts

@@ -1 +1 @@
-export declare const checkboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "root" | "indicator" | "control" | "group">;
+export declare const checkboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "root" | "control" | "indicator" | "group">;

package/dist/components/color-picker/color-picker-anatomy.d.ts

@@ -1 +1 @@
-export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "control" | "trigger" | "content" | "positioner" | "valueText" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;
+export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "control" | "valueText" | "trigger" | "content" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;

package/dist/components/combobox/combobox-anatomy.d.ts

@@ -1 +1 @@
-export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "control" | "trigger" | "content" | "positioner" | "list" | "itemText" | "clearTrigger" | "itemIndicator" | "itemGroupLabel" | "empty">;
+export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "control" | "item" | "itemGroup" | "trigger" | "content" | "positioner" | "list" | "itemIndicator" | "clearTrigger" | "itemText" | "itemGroupLabel" | "empty">;

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

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

package/dist/components/date-picker/date-picker-anatomy.js

@@ -1,2 +1,2 @@
 import { anatomy } from '@sprawlify/primitives/machines/date-picker';
-export const datePickerAnatomy = anatomy.extendWith('view');
+export const datePickerAnatomy = anatomy.extendWith('view', 'valueText');

package/dist/components/date-picker/date-picker-value-text.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  import type { DateValue } from '@sprawlify/primitives/machines/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface DatePickerValueTextRenderProps {
+    value: DateValue
+    index: number
+    valueAsString: string
+    remove: () => void
+  }
+
+  export interface DatePickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    placeholder?: string | undefined
+    separator?: string | undefined
+  }
+
+  export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { Sprawlify } from '../factory'
+  import { datePickerAnatomy } from './date-picker-anatomy'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let {
+    ref = $bindable(null),
+    placeholder,
+    separator = ', ',
+    children,
+    ...props
+  }: DatePickerValueTextProps & { children?: Snippet<[DatePickerValueTextRenderProps]> } = $props()
+
+  const datePicker = useDatePickerContext()
+
+  const hasValue = $derived(datePicker().value.length > 0)
+
+  const displayValue = $derived(hasValue ? datePicker().valueAsString.join(separator) : placeholder)
+
+  const getRenderProps = (value: DateValue, index: number): DatePickerValueTextRenderProps => ({
+    value,
+    index,
+    valueAsString: datePicker().valueAsString[index],
+    remove: () => {
+      datePicker().setValue(datePicker().value.filter((_, i) => i !== index))
+    },
+  })
+</script>
+
+{#if children}
+  {#if hasValue}
+    {#each datePicker().value as value, index (index)}
+      {@render children(getRenderProps(value, index))}
+    {/each}
+  {:else}
+    {placeholder}
+  {/if}
+{:else}
+  <Sprawlify as="span" bind:ref {...datePickerAnatomy.build().valueText.attrs} {...props}>
+    {displayValue}
+  </Sprawlify>
+{/if}

package/dist/components/date-picker/date-picker-value-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { DateValue } from '@sprawlify/primitives/machines/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerValueTextRenderProps {
+    value: DateValue;
+    index: number;
+    valueAsString: string;
+    remove: () => void;
+}
+export interface DatePickerValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    placeholder?: string | undefined;
+    separator?: string | undefined;
+}
+export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = DatePickerValueTextProps & {
+    children?: Snippet<[DatePickerValueTextRenderProps]>;
+};
+declare const DatePickerValueText: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DatePickerValueText = ReturnType<typeof DatePickerValueText>;
+export default DatePickerValueText;

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

@@ -10,6 +10,7 @@ export { default as Positioner, type DatePickerPositionerBaseProps as Positioner
 export { default as PresetTrigger, type DatePickerPresetTriggerBaseProps as PresetTriggerBaseProps, type DatePickerPresetTriggerProps as PresetTriggerProps, } from './date-picker-preset-trigger.svelte';
 export { default as PrevTrigger, type DatePickerPrevTriggerBaseProps as PrevTriggerBaseProps, type DatePickerPrevTriggerProps as PrevTriggerProps, } from './date-picker-prev-trigger.svelte';
 export { default as RangeText, type DatePickerRangeTextBaseProps as RangeTextBaseProps, type DatePickerRangeTextProps as RangeTextProps, } from './date-picker-range-text.svelte';
+export { default as ValueText, type DatePickerValueTextBaseProps as ValueTextBaseProps, type DatePickerValueTextProps as ValueTextProps, type DatePickerValueTextRenderProps as ValueTextRenderProps, } from './date-picker-value-text.svelte';
 export { default as Root, type DatePickerRootBaseProps as RootBaseProps, type DatePickerRootProps as RootProps, } from './date-picker-root.svelte';
 export { default as RootProvider, type DatePickerRootProviderBaseProps as RootProviderBaseProps, type DatePickerRootProviderProps as RootProviderProps, } from './date-picker-root-provider.svelte';
 export { default as Table, type DatePickerTableBaseProps as TableBaseProps, type DatePickerTableProps as TableProps, } from './date-picker-table.svelte';

package/dist/components/date-picker/date-picker.js

@@ -10,6 +10,7 @@ export { default as Positioner, } from './date-picker-positioner.svelte';
 export { default as PresetTrigger, } from './date-picker-preset-trigger.svelte';
 export { default as PrevTrigger, } from './date-picker-prev-trigger.svelte';
 export { default as RangeText, } from './date-picker-range-text.svelte';
+export { default as ValueText, } from './date-picker-value-text.svelte';
 export { default as Root, } from './date-picker-root.svelte';
 export { default as RootProvider, } from './date-picker-root-provider.svelte';
 export { default as Table, } from './date-picker-table.svelte';

package/dist/components/date-picker/index.d.ts

@@ -12,6 +12,7 @@ export { default as DatePickerPositioner, type DatePickerPositionerBaseProps, ty
 export { default as DatePickerPresetTrigger, type DatePickerPresetTriggerBaseProps, type DatePickerPresetTriggerProps, } from './date-picker-preset-trigger.svelte';
 export { default as DatePickerPrevTrigger, type DatePickerPrevTriggerBaseProps, type DatePickerPrevTriggerProps, } from './date-picker-prev-trigger.svelte';
 export { default as DatePickerRangeText, type DatePickerRangeTextBaseProps, type DatePickerRangeTextProps, } from './date-picker-range-text.svelte';
+export { default as DatePickerValueText, type DatePickerValueTextBaseProps, type DatePickerValueTextProps, type DatePickerValueTextRenderProps, } from './date-picker-value-text.svelte';
 export { default as DatePickerRoot, type DatePickerRootBaseProps, type DatePickerRootProps, } from './date-picker-root.svelte';
 export { default as DatePickerRootProvider, type DatePickerRootProviderBaseProps, type DatePickerRootProviderProps, } from './date-picker-root-provider.svelte';
 export { default as DatePickerTable, type DatePickerTableBaseProps, type DatePickerTableProps, } from './date-picker-table.svelte';

package/dist/components/date-picker/index.js

@@ -11,6 +11,7 @@ export { default as DatePickerPositioner, } from './date-picker-positioner.svelt
 export { default as DatePickerPresetTrigger, } from './date-picker-preset-trigger.svelte';
 export { default as DatePickerPrevTrigger, } from './date-picker-prev-trigger.svelte';
 export { default as DatePickerRangeText, } from './date-picker-range-text.svelte';
+export { default as DatePickerValueText, } from './date-picker-value-text.svelte';
 export { default as DatePickerRoot, } from './date-picker-root.svelte';
 export { default as DatePickerRootProvider, } from './date-picker-root-provider.svelte';
 export { default as DatePickerTable, } from './date-picker-table.svelte';

package/dist/components/listbox/listbox-anatomy.d.ts

@@ -1 +1 @@
-export declare const listboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "content" | "valueText" | "itemText" | "itemIndicator" | "itemGroupLabel" | "empty">;
+export declare const listboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "item" | "itemGroup" | "valueText" | "content" | "itemIndicator" | "itemText" | "itemGroupLabel" | "empty">;

package/dist/components/segment-group/segment-group-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const segmentGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", import("@sprawlify/primitives/anatomy").AnatomyPart>;
+export declare const segmentGroupAnatomy: import("@sprawlify/primitives/anatomy").Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", import("@sprawlify/primitives/anatomy").AnatomyPart>;

package/dist/components/tour/tour-anatomy.d.ts

@@ -1 +1 @@
-export declare const tourAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"description" | "title" | "control" | "progressText" | "content" | "positioner" | "backdrop" | "closeTrigger" | "actionTrigger" | "arrow" | "arrowTip" | "spotlight">;
+export declare const tourAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"description" | "title" | "control" | "progressText" | "content" | "positioner" | "arrow" | "arrowTip" | "actionTrigger" | "closeTrigger" | "backdrop" | "spotlight">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/svelte",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "type": "module",
   "description": "Svelte wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -325,7 +325,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.61"
+    "@sprawlify/primitives": "0.0.63"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"