@juspay/svelte-ui-components 4.27.5 → 4.28.0

package/dist/index.d.ts

@@ -83,6 +83,10 @@ export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
+export { default as Separator } from './Separator/Separator.svelte';
+export { default as Label } from './Label/Label.svelte';
+export { default as AspectRatio } from './AspectRatio/AspectRatio.svelte';
+export { default as RatingGroup } from './RatingGroup/RatingGroup.svelte';
 export { default as Chat } from './Chat/Chat.svelte';
 export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
 export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
@@ -147,6 +151,10 @@ export type * from './Gauge/properties';
 export type * from './SplitButton/properties';
 export type * from './KeyboardInput/properties';
 export type * from './LoadingDots/properties';
+export type * from './Separator/properties';
+export type * from './Label/properties';
+export type * from './AspectRatio/properties';
+export type * from './RatingGroup/properties';
 export type * from './Menu/properties';
 export type * from './Sheet/properties';
 export type * from './Scroller/properties';
@@ -208,6 +216,10 @@ export type * from './MediaPlayer/properties';
 export type * from './MediaUpload/properties';
 export type * from './Gallery/properties';
 export { createSoundKit } from './SoundKit/SoundKit';
-export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
+export { validateInput, lockBodyScroll, unlockBodyScroll, prefersReducedMotion } from './utils';
+export { reducedMotion } from './reduced-motion.svelte';
+export type { ReducedMotionPreference } from './reduced-motion.svelte';
+export { TEL_PRESETS, TEL_PRESET_IN_MOBILE } from './utils';
+export type { TelPreset, ValidateInputOptions } from './utils';
 export { formatNumberIndian } from './_chart/format';
 export { createNarrationHighlighter } from './_chart/narrationHighlighter';

package/dist/index.js

@@ -83,6 +83,10 @@ export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
+export { default as Separator } from './Separator/Separator.svelte';
+export { default as Label } from './Label/Label.svelte';
+export { default as AspectRatio } from './AspectRatio/AspectRatio.svelte';
+export { default as RatingGroup } from './RatingGroup/RatingGroup.svelte';
 export { default as Chat } from './Chat/Chat.svelte';
 export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
 export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
@@ -106,6 +110,22 @@ export { SpeechToTextController } from './SpeechToText/controller.svelte';
 export { SpeechSynthesisController } from './SpeechSynthesis/controller.svelte';
 export { createCopyState } from './Snippet/copyState.svelte';
 export { createSoundKit } from './SoundKit/SoundKit';
-export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
+// `prefersReducedMotion` reads the OS preference, and its own comment in utils.ts
+// explains why it is shared rather than reimplemented per component: two
+// character-reveal implementations ship here, and honouring the preference in one
+// silences a chat bubble while the message body inside it keeps typing. That argument
+// applies just as much across the boundary. A consumer driving motion from JavaScript
+// -- a canvas, a chart, an imperative animation -- cannot reach the preference through
+// a stylesheet, so leaving this unexported made every such consumer write it again.
+export { validateInput, lockBodyScroll, unlockBodyScroll, prefersReducedMotion } from './utils';
+// The reactive counterpart to `prefersReducedMotion()` above: a consumer
+// building their own component with runes needs a value that stays current
+// inside a `$derived`, which a plain function call cannot give them, for the
+// same reason Sheet itself needed one (see reduced-motion.svelte.ts).
+export { reducedMotion } from './reduced-motion.svelte';
+// `dataType="tel"` no longer assumes a market. A consumer who WANTS the old
+// Indian-mobile rule has to be able to name it, so the presets and the options
+// type ship alongside the validator they configure.
+export { TEL_PRESETS, TEL_PRESET_IN_MOBILE } from './utils';
 export { formatNumberIndian } from './_chart/format';
 export { createNarrationHighlighter } from './_chart/narrationHighlighter';

package/dist/reduced-motion.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A live, reactive mirror of the OS `prefers-reduced-motion` preference.
+ *
+ * `prefersReducedMotion()` in `utils.ts` is a plain, un-reactive read -- exactly
+ * right for the call sites that invoke it fresh on every interaction (Tabs,
+ * Input, Scroller, ChatController, TypewriterText), but useless inside a
+ * `$derived`/`$derived.by` that only recomputes when a *tracked* dependency
+ * changes. A derived that calls it and returns early on the reduced-motion
+ * branch -- Sheet's `flyParams` is the case that surfaced this -- reads no
+ * Svelte state at all along that path, so it latches whatever the preference
+ * happened to be on its first evaluation and never revisits it, in either
+ * direction, for the life of the component instance.
+ *
+ * `current` below is real `$state`, so reading `reducedMotion.current` inside
+ * a derived registers a tracked dependency wherever in the function body the
+ * read happens -- an early `return` right after it still leaves the derived
+ * subscribed, which is exactly the property a plain boolean lacks.
+ *
+ * One module-level `MediaQueryList` subscription for the whole page, rather
+ * than one per consumer: the preference is a single global fact about the
+ * browser tab, not something scoped to any particular mounted component, so
+ * every reader shares this one listener instead of each taking out (and
+ * needing to release) its own. It is intentionally never removed -- there is
+ * no "stop caring about the OS setting" moment short of the page unloading,
+ * at which point the browser reclaims it along with everything else. This
+ * differs from VoiceOrb.svelte's own subscription, which is taken out and torn
+ * down inside its `onMount`: that one has to seed a field before the first
+ * animation frame and already owns an `onMount`/`onDestroy` pair for its
+ * `ResizeObserver`, so pairing the listener with the same lifecycle costs it
+ * nothing extra. A shared source has neither constraint, and no owning
+ * component to pair teardown with in the first place.
+ */
+export type ReducedMotionPreference = {
+    /** The live OS preference. Read it inside a `$derived` to stay subscribed. */
+    readonly current: boolean;
+};
+export declare const reducedMotion: ReducedMotionPreference;

package/dist/reduced-motion.svelte.js

@@ -0,0 +1,44 @@
+/**
+ * A live, reactive mirror of the OS `prefers-reduced-motion` preference.
+ *
+ * `prefersReducedMotion()` in `utils.ts` is a plain, un-reactive read -- exactly
+ * right for the call sites that invoke it fresh on every interaction (Tabs,
+ * Input, Scroller, ChatController, TypewriterText), but useless inside a
+ * `$derived`/`$derived.by` that only recomputes when a *tracked* dependency
+ * changes. A derived that calls it and returns early on the reduced-motion
+ * branch -- Sheet's `flyParams` is the case that surfaced this -- reads no
+ * Svelte state at all along that path, so it latches whatever the preference
+ * happened to be on its first evaluation and never revisits it, in either
+ * direction, for the life of the component instance.
+ *
+ * `current` below is real `$state`, so reading `reducedMotion.current` inside
+ * a derived registers a tracked dependency wherever in the function body the
+ * read happens -- an early `return` right after it still leaves the derived
+ * subscribed, which is exactly the property a plain boolean lacks.
+ *
+ * One module-level `MediaQueryList` subscription for the whole page, rather
+ * than one per consumer: the preference is a single global fact about the
+ * browser tab, not something scoped to any particular mounted component, so
+ * every reader shares this one listener instead of each taking out (and
+ * needing to release) its own. It is intentionally never removed -- there is
+ * no "stop caring about the OS setting" moment short of the page unloading,
+ * at which point the browser reclaims it along with everything else. This
+ * differs from VoiceOrb.svelte's own subscription, which is taken out and torn
+ * down inside its `onMount`: that one has to seed a field before the first
+ * animation frame and already owns an `onMount`/`onDestroy` pair for its
+ * `ResizeObserver`, so pairing the listener with the same lifecycle costs it
+ * nothing extra. A shared source has neither constraint, and no owning
+ * component to pair teardown with in the first place.
+ */
+const query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-reduced-motion: reduce)')
+    : null;
+let current = $state(query?.matches ?? false);
+query?.addEventListener('change', (event) => {
+    current = event.matches;
+});
+export const reducedMotion = {
+    get current() {
+        return current;
+    }
+};