@juspay/svelte-ui-components 3.5.0 → 4.0.0

package/dist/MediaPlayer/properties.d.ts

@@ -31,5 +31,4 @@ export type MediaPlayerEventProperties = {
     onplay?: (event: Event) => void;
     onpause?: (event: Event) => void;
     onvolumechange?: (muted: boolean) => void;
-    onVolumeChange?: (muted: boolean) => void;
 };

package/dist/MediaUpload/MediaUpload.svelte

@@ -26,9 +26,9 @@
     fileIcon,
     errorMessages,
     files = $bindable([]),
-    onFilesChange,
-    onRemove,
-    onRejected,
+    onchange,
+    onremove,
+    onerror,
     testId,
     classes
   }: MediaUploadProperties = $props();
@@ -43,7 +43,7 @@
 
   function syncFiles(): void {
     files = items.map((item) => item.file);
-    onFilesChange?.(files);
+    onchange?.(files);
   }
 
   function formatSize(bytes: number): string {
@@ -137,7 +137,7 @@
 
     error = rejections.length > 0 ? buildError(rejections) : '';
     if (rejections.length > 0) {
-      onRejected?.(rejections);
+      onerror?.(rejections);
     }
     syncFiles();
   }
@@ -175,7 +175,7 @@
     error = '';
     syncFiles();
     if (typeof removed === 'object') {
-      onRemove?.(removed.file);
+      onremove?.(removed.file);
     }
   }
 </script>

package/dist/MediaUpload/properties.d.ts

@@ -40,7 +40,7 @@ export type OptionalMediaUploadProperties = {
     classes?: string;
 };
 export type MediaUploadEventProperties = {
-    onFilesChange?: (files: File[]) => void;
-    onRemove?: (file: File) => void;
-    onRejected?: (rejections: MediaUploadRejection[]) => void;
+    onchange?: (files: File[]) => void;
+    onremove?: (file: File) => void;
+    onerror?: (rejections: MediaUploadRejection[]) => void;
 };

package/dist/Menu/Menu.svelte

@@ -11,12 +11,9 @@
     testId,
     trigger,
     interactiveTrigger = false,
-    onselect: onselectLegacy,
-    onSelect,
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    onopen,
+    onclose,
     classes,
     transformSvg,
     selectedValue = null,
@@ -28,11 +25,6 @@
     usePortal = false
   }: MenuProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onopen = $derived(onOpen ?? onopenLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
 
   let menuContainerEl: HTMLDivElement | null = $state(null);

package/dist/Menu/properties.d.ts

@@ -88,9 +88,6 @@ export type OptionalMenuProperties = {
 };
 export type MenuEventProperties = {
     onselect?: (item: MenuItem) => void;
-    onSelect?: (item: MenuItem) => void;
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/Modal/Modal.svelte

@@ -26,18 +26,12 @@
     testId,
     content,
     footerSnippet,
-    onclose: oncloseLegacy,
-    onClose,
-    onheaderRightImageClick: onheaderRightImageClickLegacy,
-    onHeaderRightImageClick,
-    onheaderLeftImageClick: onheaderLeftImageClickLegacy,
-    onHeaderLeftImageClick,
-    onprimaryButtonClick: onprimaryButtonClickLegacy,
-    onPrimaryButtonClick,
-    onsecondaryButtonClick: onsecondaryButtonClickLegacy,
-    onSecondaryButtonClick,
-    onoverlayClick: onoverlayClickLegacy,
-    onOverlayClick,
+    onclose,
+    onheaderrightimageclick,
+    onheaderleftimageclick,
+    onprimarybuttonclick,
+    onsecondarybuttonclick,
+    onoverlayclick,
     onkeydown,
     classes,
     overlayBackdropFilter,
@@ -47,16 +41,6 @@
     autoDismissAfter = null
   }: ModalProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onheaderLeftImageClick = $derived(onHeaderLeftImageClick ?? onheaderLeftImageClickLegacy);
-  const onheaderRightImageClick = $derived(
-    onHeaderRightImageClick ?? onheaderRightImageClickLegacy
-  );
-  const onoverlayClick = $derived(onOverlayClick ?? onoverlayClickLegacy);
-  const onprimaryButtonClick = $derived(onPrimaryButtonClick ?? onprimaryButtonClickLegacy);
-  const onsecondaryButtonClick = $derived(onSecondaryButtonClick ?? onsecondaryButtonClickLegacy);
-
   let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Fix [major]: plain const so the debouncer closure retains its internal lastCallTime state
@@ -89,25 +73,25 @@
   };
 
   const handleRightImageClick = (event: MouseEvent): void => {
-    onheaderRightImageClick?.(event);
+    onheaderrightimageclick?.(event);
   };
 
   const handleLeftImageClick = (event: MouseEvent): void => {
-    onheaderLeftImageClick?.(event);
+    onheaderleftimageclick?.(event);
   };
 
   const handlePrimaryButtonClick = (event: MouseEvent): void => {
-    onprimaryButtonClick?.(event);
+    onprimarybuttonclick?.(event);
   };
 
   const handleSecondaryButtonClick = (event: MouseEvent): void => {
-    onsecondaryButtonClick?.(event);
+    onsecondarybuttonclick?.(event);
   };
 
   const handleOverlayClick = (event: MouseEvent): void => {
     if (event.target === overlayDiv) {
       debounce(() => {
-        onoverlayClick?.();
+        onoverlayclick?.();
       });
     }
   };
@@ -116,7 +100,7 @@
     onkeydown?.(event);
     const key = event?.key;
     if (key === 'Escape') {
-      onoverlayClick?.();
+      onoverlayclick?.();
     }
   };
 
@@ -125,14 +109,14 @@
   const handleLeftImageKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onheaderLeftImageClick?.(new MouseEvent('click'));
+      onheaderleftimageclick?.(new MouseEvent('click'));
     }
   };
 
   const handleRightImageKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onheaderRightImageClick?.(new MouseEvent('click'));
+      onheaderrightimageclick?.(new MouseEvent('click'));
     }
   };
 
@@ -202,7 +186,7 @@
                      activated is worse for assistive tech than leaving them unannounced. The two
                      branches are written out rather than computed so the role/tabindex pairing
                      stays statically checkable. -->
-                {#if typeof onheaderLeftImageClick === 'function'}
+                {#if typeof onheaderleftimageclick === 'function'}
                   <div
                     onclick={handleLeftImageClick}
                     onkeydown={handleLeftImageKeyDown}

package/dist/Modal/properties.d.ts

@@ -55,16 +55,10 @@ export type OptionalModalProperties = {
 };
 export type ModalEventProperties = {
     onclose?: () => void;
-    onClose?: () => void;
-    onheaderRightImageClick?: (event: MouseEvent) => void;
-    onHeaderRightImageClick?: (event: MouseEvent) => void;
-    onheaderLeftImageClick?: (event: MouseEvent) => void;
-    onHeaderLeftImageClick?: (event: MouseEvent) => void;
-    onprimaryButtonClick?: (event: MouseEvent) => void;
-    onPrimaryButtonClick?: (event: MouseEvent) => void;
-    onsecondaryButtonClick?: (event: MouseEvent) => void;
-    onSecondaryButtonClick?: (event: MouseEvent) => void;
-    onoverlayClick?: () => void;
-    onOverlayClick?: () => void;
+    onheaderrightimageclick?: (event: MouseEvent) => void;
+    onheaderleftimageclick?: (event: MouseEvent) => void;
+    onprimarybuttonclick?: (event: MouseEvent) => void;
+    onsecondarybuttonclick?: (event: MouseEvent) => void;
+    onoverlayclick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Pagination/Pagination.svelte

@@ -7,18 +7,14 @@
     siblingCount = 1,
     disabled = false,
     testId,
-    onchange: onchangeLegacy,
-    onChange,
+    onchange,
     classes,
     hasMore = false,
     prevButtonTestId,
     nextButtonTestId,
-    onLoadMore
+    onloadmore
   }: PaginationProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-
   function generatePages(total: number, current: number, siblings: number): (number | '...')[] {
     const pages: (number | '...')[] = [];
     pages.push(1);
@@ -66,7 +62,7 @@
       return;
     }
     currentPage = currentPage + 1;
-    onLoadMore?.();
+    onloadmore?.();
   }
 </script>
 

package/dist/Pagination/properties.d.ts

@@ -24,7 +24,6 @@ export type OptionalPaginationProperties = {
 };
 export type PaginationEventProperties = {
     onchange?: (page: number) => void;
-    onChange?: (page: number) => void;
     /** Fired when the load-more CTA is clicked (cursor mode). */
-    onLoadMore?: () => void;
+    onloadmore?: () => void;
 };

package/dist/PieChart/PieChart.svelte

@@ -34,25 +34,19 @@
     tooltipSnippet,
     center,
     empty,
-    onsliceclick: onsliceclickLegacy,
-    onSliceClick,
-    onslicehover: onslicehoverLegacy,
-    onSliceHover,
+    onsliceclick,
+    onslicehover,
     testId,
     classes,
     semiCircle = false,
     legendShowValues = false,
     percentDecimals = 0,
-    onChartReady,
+    onchartready,
     highlightedIndex = null,
     changePercentage,
     changeInvertColors = false
   }: PieChartProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onsliceclick = $derived(onSliceClick ?? onsliceclickLegacy);
-  const onslicehover = $derived(onSliceHover ?? onslicehoverLegacy);
-
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -69,7 +63,7 @@
   let semiAspectRatioCssVar = $state(2);
 
   onMount(() => {
-    onChartReady?.({
+    onchartready?.({
       highlight: (index) => {
         programmaticIndex = index;
       },

package/dist/PieChart/properties.d.ts

@@ -40,7 +40,7 @@ export type OptionalPieChartProperties = {
      * slice highlighting without touching internal state. The `type` field is
      * always `'donut-chart'` regardless of whether `innerRadius` is set.
      */
-    onChartReady?: (api: ChartHighlightAPI) => void;
+    onchartready?: (api: ChartHighlightAPI) => void;
     /**
      * Index of the slice to highlight programmatically. The highlighted slice
      * scales out and all others dim, exactly as if the user were hovering it.
@@ -65,16 +65,8 @@ export type PieChartEventProperties = {
         index: number;
         slice: PieChartSlice;
     }) => void;
-    onSliceClick?: (event: {
-        index: number;
-        slice: PieChartSlice;
-    }) => void;
     onslicehover?: (event: {
         index: number;
         slice: PieChartSlice;
     } | null) => void;
-    onSliceHover?: (event: {
-        index: number;
-        slice: PieChartSlice;
-    } | null) => void;
 };

package/dist/Pill/Pill.svelte

@@ -13,14 +13,10 @@
     dismissLabel,
     leadingIcon,
     onclick,
-    ondismiss: ondismissLegacy,
-    onDismiss,
+    ondismiss,
     classes
   }: PillProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
-
   let interactive = $derived(typeof onclick === 'function');
 
   function handleClick(event: MouseEvent): void {

package/dist/Pill/properties.d.ts

@@ -26,5 +26,4 @@ export type OptionalPillProperties = {
 export type PillEventProperties = {
     onclick?: (event: MouseEvent) => void;
     ondismiss?: () => void;
-    onDismiss?: () => void;
 };

package/dist/Radio/Radio.svelte

@@ -8,14 +8,10 @@
     text = '',
     disabled = false,
     testId,
-    onchange: onchangeLegacy,
-    onChange,
+    onchange,
     classes
   }: RadioProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-
   let checked = $derived(selectedValue === value);
 
   function handleChange(): void {

package/dist/Radio/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalRadioProperties = {
 };
 export type RadioEventProperties = {
     onchange?: (value: string) => void;
-    onChange?: (value: string) => void;
 };

package/dist/Resizable/Resizable.svelte

@@ -13,21 +13,13 @@
     disabled = false,
     handleLabel = 'Resize',
     children,
-    onresize: onresizeLegacy,
-    onResize,
-    onresizestart: onresizestartLegacy,
-    onResizeStart,
-    onresizeend: onresizeendLegacy,
-    onResizeEnd,
+    onresize,
+    onresizestart,
+    onresizeend,
     testId,
     classes
   }: ResizableProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onresize = $derived(onResize ?? onresizeLegacy);
-  const onresizeend = $derived(onResizeEnd ?? onresizeendLegacy);
-  const onresizestart = $derived(onResizeStart ?? onresizestartLegacy);
-
   const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
     top: { x: 0, y: -1 },
     right: { x: 1, y: 0 },

package/dist/Resizable/properties.d.ts

@@ -22,9 +22,6 @@ export type OptionalResizableProperties = {
 };
 export type ResizableEventProperties = {
     onresize?: (size: ResizeSize) => void;
-    onResize?: (size: ResizeSize) => void;
     onresizestart?: (size: ResizeSize) => void;
-    onResizeStart?: (size: ResizeSize) => void;
     onresizeend?: (size: ResizeSize) => void;
-    onResizeEnd?: (size: ResizeSize) => void;
 };

package/dist/SankeyChart/SankeyChart.svelte

@@ -26,14 +26,10 @@
     valueFormat,
     tooltipSnippet,
     empty,
-    onnodeclick: onnodeclickLegacy,
-    onNodeClick,
-    onlinkclick: onlinkclickLegacy,
-    onLinkClick,
-    onnodehover: onnodehoverLegacy,
-    onNodeHover,
-    onlinkhover: onlinkhoverLegacy,
-    onLinkHover,
+    onnodeclick,
+    onlinkclick,
+    onnodehover,
+    onlinkhover,
     testId,
     classes,
     columnLabels,
@@ -46,12 +42,6 @@
     marginX = 40
   }: SankeyChartProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onlinkclick = $derived(onLinkClick ?? onlinkclickLegacy);
-  const onlinkhover = $derived(onLinkHover ?? onlinkhoverLegacy);
-  const onnodeclick = $derived(onNodeClick ?? onnodeclickLegacy);
-  const onnodehover = $derived(onNodeHover ?? onnodehoverLegacy);
-
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);

package/dist/SankeyChart/properties.d.ts

@@ -112,25 +112,13 @@ export type SankeyChartEventProperties = {
     onnodeclick?: (event: {
         node: SankeyNode;
     }) => void;
-    onNodeClick?: (event: {
-        node: SankeyNode;
-    }) => void;
     onlinkclick?: (event: {
         link: SankeyLink;
     }) => void;
-    onLinkClick?: (event: {
-        link: SankeyLink;
-    }) => void;
     onnodehover?: (event: {
         node: SankeyNode;
     } | null) => void;
-    onNodeHover?: (event: {
-        node: SankeyNode;
-    } | null) => void;
     onlinkhover?: (event: {
         link: SankeyLink;
     } | null) => void;
-    onLinkHover?: (event: {
-        link: SankeyLink;
-    } | null) => void;
 };

package/dist/Scroller/Scroller.svelte

@@ -21,14 +21,10 @@
     testId,
     arrowPrevious,
     arrowNext,
-    onscrollposition: onscrollpositionLegacy,
-    onScrollPosition,
+    onscrollposition,
     classes
   }: ScrollerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onscrollposition = $derived(onScrollPosition ?? onscrollpositionLegacy);
-
   let containerEl: HTMLDivElement | null = $state(null);
   let canScrollPrev = $state(false);
   let canScrollNext = $state(false);

package/dist/Scroller/properties.d.ts

@@ -27,5 +27,4 @@ export type OptionalScrollerProperties = {
 };
 export type ScrollerEventProperties = {
     onscrollposition?: (position: ScrollPosition) => void;
-    onScrollPosition?: (position: ScrollPosition) => void;
 };

package/dist/Select/Select.svelte

@@ -22,12 +22,9 @@
     triggerSummary,
     testId,
     itemTestId,
-    onchange: onchangeLegacy,
-    onChange,
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
+    onchange,
+    onopen,
+    onclose,
     classes,
     open = $bindable(false),
     dropdownAlign = 'left',
@@ -37,11 +34,6 @@
     usePortal = false
   }: SelectProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onopen = $derived(onOpen ?? onopenLegacy);
-
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
     return source.map((entry) => (typeof entry === 'string' ? { id: entry, label: entry } : entry));
   }

package/dist/Select/properties.d.ts

@@ -97,9 +97,6 @@ export type OptionalSelectProperties = {
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;
-    onChange?: (value: string[]) => void;
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/Sheet/Sheet.svelte

@@ -15,20 +15,12 @@
     testId,
     content,
     footer,
-    onclose: oncloseLegacy,
-    onClose,
-    onafteropen: onafteropenLegacy,
-    onAfterOpen,
-    onafterclose: onaftercloseLegacy,
-    onAfterClose,
+    onclose,
+    onafteropen,
+    onafterclose,
     classes
   }: SheetProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onafterclose = $derived(onAfterClose ?? onaftercloseLegacy);
-  const onafteropen = $derived(onAfterOpen ?? onafteropenLegacy);
-  const onclose = $derived(onClose ?? oncloseLegacy);
-
   let overlayDiv: HTMLDivElement | null = $state(null);
   let sheetPanel: HTMLDivElement | null = $state(null);
 

package/dist/Sheet/properties.d.ts

@@ -24,11 +24,8 @@ export type OptionalSheetProperties = {
 };
 export type SheetEventProperties = {
     onclose?: () => void;
-    onClose?: () => void;
     /** Called once after the open transition has fully completed. */
     onafteropen?: () => void;
-    onAfterOpen?: () => void;
     /** Called once after the close transition has fully completed. */
     onafterclose?: () => void;
-    onAfterClose?: () => void;
 };

package/dist/Slider/Slider.svelte

@@ -10,17 +10,11 @@
     showValue = false,
     labelFormatter,
     testId,
-    onchange: onchangeLegacy,
-    onChange,
-    oninput: oninputLegacy,
-    onInput,
+    onchange,
+    oninput,
     classes
   }: SliderProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-
   let percentage = $derived(((value - min) / (max - min)) * 100);
   let displayValue = $derived(labelFormatter ? labelFormatter(value) : String(value));
 

package/dist/Slider/properties.d.ts

@@ -14,7 +14,5 @@ export type OptionalSliderProperties = {
 };
 export type SliderEventProperties = {
     onchange?: (value: number) => void;
-    onChange?: (value: number) => void;
     oninput?: (value: number) => void;
-    onInput?: (value: number) => void;
 };

package/dist/Snippet/Snippet.svelte

@@ -9,14 +9,10 @@
     showCopyButton = true,
     testId,
     copyIcon,
-    oncopy: oncopyLegacy,
-    onCopy,
+    oncopy,
     classes
   }: SnippetProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const oncopy = $derived(onCopy ?? oncopyLegacy);
-
   let copied = $state(false);
 
   async function handleCopy() {

package/dist/Snippet/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalSnippetProperties = {
 };
 export type SnippetEventProperties = {
     oncopy?: () => void;
-    onCopy?: () => void;
 };

package/dist/SplitButton/SplitButton.svelte

@@ -13,13 +13,9 @@
     dropdownIcon,
     classes,
     onclick,
-    onselect: onselectLegacy,
-    onSelect
+    onselect
   }: SplitButtonProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let menuOpen = $state(false);
 
   function handlePrimaryClick(event: MouseEvent): void {

package/dist/SplitButton/properties.d.ts

@@ -14,5 +14,4 @@ export type OptionalSplitButtonProperties = {
 export type SplitButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onselect?: (item: MenuItem) => void;
-    onSelect?: (item: MenuItem) => void;
 };