@pushwoosh/dumb-components 3.1.0 → 3.3.0

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -10,6 +10,7 @@ import { PopoverContent, PresetsContainer } from './styles';
 import { Button } from '../../Button';
 import { Chip } from '../../Chip';
 import { useLayer, useOnClickOutside } from '../../hooks';
+import { useLanguage } from '../../polyglot';
 import { CalendarSuperForm } from '../CalendarSuperForm';
 import { Lang, useLang } from '../polyglot';
 /**
@@ -39,6 +40,7 @@ export const CalendarDropdown = props => {
   const [isShaking, setIsShaking] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const lang = useLang();
+  const language = useLanguage();
   const [value, setValue] = useState(props.value ?? (isRangePicker ? [] : undefined));
   const initialTimezone = calendarProps.timezone || 'UTC';
   const [timezone, setTimezone] = useState(initialTimezone);
@@ -92,7 +94,7 @@ export const CalendarDropdown = props => {
       message: 'DUMB.CALENDAR.SELECT_DATE'
     });
   } else {
-    buttonText = stringifyValue(value, withTime, timezone);
+    buttonText = stringifyValue(value, withTime, timezone, language);
   }
   return _jsxs(Horizontal, {
     "$justifyContent": "start",

package/Calendar/CalendarDropdown/helpers.d.ts

@@ -1,7 +1,7 @@
 import { type DateStruct, type DateTimeStruct, type RangeValue, type SingleValue } from '../types';
-export declare function formatDate(val: DateStruct | DateTimeStruct, withTime?: boolean): string;
+export declare function formatDate(val: DateStruct | DateTimeStruct, withTime?: boolean, language?: string): string;
 /**
  * Formats a single value or range for display in the {@link CalendarDropdown} button:
  * `"Jan 01, 2026"`, `"Jan 01, 2026 – Jan 05, 2026"`, with time and a short timezone when `withTime`.
  */
-export declare const stringifyValue: (value: SingleValue<DateStruct | DateTimeStruct> | RangeValue<DateStruct | DateTimeStruct>, withTime: boolean, timezone?: string) => string;
+export declare const stringifyValue: (value: SingleValue<DateStruct | DateTimeStruct> | RangeValue<DateStruct | DateTimeStruct>, withTime: boolean, timezone?: string, language?: string) => string;

package/Calendar/CalendarDropdown/helpers.js

@@ -1,8 +1,8 @@
 import { formatTimezoneShort } from '../../helpers/timezones';
-export function formatDate(val, withTime = true) {
+export function formatDate(val, withTime = true, language = 'en-US') {
   const date = new Date(val.year, val.month - 1, val.day, 'hour' in val ? val.hour : 0, 'minute' in val ? val.minute : 0);
   if (withTime) {
-    return date.toLocaleString('en-US', {
+    return date.toLocaleString(language, {
       month: 'short',
       day: '2-digit',
       year: 'numeric',
@@ -11,7 +11,7 @@ export function formatDate(val, withTime = true) {
       hour12: false
     });
   }
-  return date.toLocaleString('en-US', {
+  return date.toLocaleString(language, {
     month: 'short',
     day: '2-digit',
     year: 'numeric'
@@ -21,14 +21,14 @@ export function formatDate(val, withTime = true) {
  * Formats a single value or range for display in the {@link CalendarDropdown} button:
  * `"Jan 01, 2026"`, `"Jan 01, 2026 – Jan 05, 2026"`, with time and a short timezone when `withTime`.
  */
-export const stringifyValue = (value, withTime, timezone) => {
+export const stringifyValue = (value, withTime, timezone, language = 'en-US') => {
   let result = '';
   if (Array.isArray(value)) {
     if (value.length === 0) return '';
-    if (value.length === 1) result = `${formatDate(value[0], withTime)} - ?`;
-    if (value.length === 2) result = `${formatDate(value[0], withTime)} – ${formatDate(value[1], withTime)}`;
+    if (value.length === 1) result = `${formatDate(value[0], withTime, language)} - ?`;
+    if (value.length === 2) result = `${formatDate(value[0], withTime, language)} – ${formatDate(value[1], withTime, language)}`;
   } else if (value) {
-    result = formatDate(value, withTime);
+    result = formatDate(value, withTime, language);
   }
   if (withTime) {
     const timezoneShort = formatTimezoneShort(timezone);

package/Calendar/CalendarMonth/CalendarMonth.js

@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 import { Columns } from '@pushwoosh/kit-helpers';
 import { CellBox, DayHeader } from './styles';
 import { addPeriod, differenceInDays, getLastDayOfMonth, getFirstDayOfWeek, isSamePeriod, compareStructs, pickDateStruct } from '../helpers';
+import { useLang } from '../polyglot';
+const WEEKDAYS = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
 export const CalendarMonth = ({
   month,
   selectedDay,
@@ -17,6 +19,7 @@ export const CalendarMonth = ({
   onDayMouseLeave,
   firstDayOfWeek = 0
 }) => {
+  const lang = useLang();
   const [firstDayDate, days] = useMemo(() => {
     const firstDayOfMonth = {
       ...month,
@@ -36,7 +39,9 @@ export const CalendarMonth = ({
       day: now.getDate()
     };
   }, []);
-  const dayLabels = firstDayOfWeek === 0 ? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] : ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+  const dayLabels = (firstDayOfWeek === 0 ? WEEKDAYS : [...WEEKDAYS.slice(1), WEEKDAYS[0]]).map(day => lang({
+    message: `DUMB.CALENDAR.WEEKDAY_SHORT.${day}`
+  }));
   return _jsxs(Columns, {
     "$sizes": 7,
     "$gap": 2,

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -4,6 +4,7 @@ import { Horizontal, usePersistentFunction, Vertical } from '@pushwoosh/kit-help
 import { ArrowIcon } from '@pushwoosh/kit-icons';
 import { Root, Viewport, Strip, Panel, NavButtonLeft, NavButtonRight, StyledSelect } from './styles';
 import { Button } from '../../Button';
+import { useLanguage } from '../../polyglot';
 import { CalendarMonth } from '../CalendarMonth/CalendarMonth';
 import { addPeriod, monthName } from '../helpers';
 function makeBaseline(a, count) {
@@ -34,6 +35,7 @@ export const CalendarMonthSlider = ({
   renderAfter,
   ...monthProps
 }) => {
+  const language = useLanguage();
   const [anchor, setAnchor] = useState(() => ({
     ...startMonth,
     day: 1
@@ -115,7 +117,7 @@ export const CalendarMonthSlider = ({
                   length: 12
                 }, (_, idx) => _jsx("option", {
                   value: idx + 1,
-                  children: monthName(idx + 1, 'long')
+                  children: monthName(idx + 1, 'long', language)
                 }, idx + 1))
               }), _jsx(StyledSelect, {
                 value: p.year,

package/Calendar/helpers.d.ts

@@ -13,7 +13,7 @@ export declare const pickDateStruct: (date: DateTimeStruct) => DateStruct;
 export declare const setPeriodStruct: <T extends DateTimeStruct | DateStruct>(ds: T, period: Period, value: number) => T;
 export declare const extendPeriodStruct: (struct: DateTimeStruct, extend: Partial<DateTimeStruct>) => DateTimeStruct;
 export declare const differenceInDays: (ds1: DateStruct, ds2: DateStruct) => number;
-export declare const monthName: (month: number, monthFormat?: "short" | "long") => string;
+export declare const monthName: (month: number, monthFormat?: "short" | "long", language?: string) => string;
 export declare const isSamePeriod: <T extends DateTimeStruct | DateStruct>(ds1: T, ds2: T, period: Period) => boolean;
 /** Compares two structs chronologically: `-1` if `ds1 < ds2`, `0` if equal, `1` if `ds1 > ds2`. */
 export declare const compareStructs: <T extends DateTimeStruct | DateStruct>(ds1: T, ds2: T) => 1 | 0 | -1;

package/Calendar/helpers.js

@@ -86,9 +86,9 @@ export const differenceInDays = (ds1, ds2) => {
   const diff = Math.abs(date1.getTime() - date2.getTime());
   return Math.floor(diff / (1000 * 3600 * 24));
 };
-export const monthName = (month, monthFormat = 'long') => {
+export const monthName = (month, monthFormat = 'long', language = 'en-US') => {
   const date = new Date(2023, month - 1, 1);
-  return date.toLocaleString('en-US', {
+  return date.toLocaleString(language, {
     month: monthFormat
   });
 };

package/Calendar/polyglot/messages_ar.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'توسيع الوقت',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'طي الوقت',
   'DUMB.CALENDAR.TIME_RANGE': 'النطاق الزمني:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'يرجى تحديد {% if isRange == true %}نطاق التواريخ{% else %}التاريخ{% endif %} أولاً لضبط الوقت'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'يرجى تحديد {% if isRange == true %}نطاق التواريخ{% else %}التاريخ{% endif %} أولاً لضبط الوقت',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'ح',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'ن',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'ث',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'ر',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'خ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'ج',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'س'
 };

package/Calendar/polyglot/messages_bn.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'সময় প্রসারিত করুন',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'সময় সংকুচিত করুন',
   'DUMB.CALENDAR.TIME_RANGE': 'সময়সীমা:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'সময় নির্ধারণ করতে অনুগ্রহ করে প্রথমে {% if isRange == true %}তারিখের সীমা{% else %}তারিখ{% endif %} নির্বাচন করুন'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'সময় নির্ধারণ করতে অনুগ্রহ করে প্রথমে {% if isRange == true %}তারিখের সীমা{% else %}তারিখ{% endif %} নির্বাচন করুন',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'রবি',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'সোম',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'মঙ্গল',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'বুধ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'বৃহঃ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'শুক্র',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'শনি'
 };

package/Calendar/polyglot/messages_de.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Zeit ausklappen',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Zeit einklappen',
   'DUMB.CALENDAR.TIME_RANGE': 'Zeitspanne:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Bitte zuerst {% if isRange == true %}einen Datumsbereich{% else %}ein Datum{% endif %} auswählen, um die Uhrzeit festzulegen'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Bitte zuerst {% if isRange == true %}einen Datumsbereich{% else %}ein Datum{% endif %} auswählen, um die Uhrzeit festzulegen',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'So',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Mo',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Di',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'Mi',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Do',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Fr',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Sa'
 };

package/Calendar/polyglot/messages_en.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Expand time',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Collapse time',
   'DUMB.CALENDAR.TIME_RANGE': 'Time range:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Please select {% if isRange == true %}date range{% else %}date{% endif %} first to set time'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Please select {% if isRange == true %}date range{% else %}date{% endif %} first to set time',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'Su',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Mo',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Tu',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'We',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Th',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Fr',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Sa'
 };

package/Calendar/polyglot/messages_es.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Expandir hora',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Contraer hora',
   'DUMB.CALENDAR.TIME_RANGE': 'Rango horario:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Primero selecciona {% if isRange == true %}un rango de fechas{% else %}una fecha{% endif %} para establecer la hora'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Primero selecciona {% if isRange == true %}un rango de fechas{% else %}una fecha{% endif %} para establecer la hora',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'Do',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Lu',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Ma',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'Mi',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Ju',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Vi',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Sá'
 };

package/Calendar/polyglot/messages_fr.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Développer l’heure',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Réduire l’heure',
   'DUMB.CALENDAR.TIME_RANGE': 'Plage horaire :',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Veuillez d’abord sélectionner {% if isRange == true %}une plage de dates{% else %}une date{% endif %} pour définir l’heure'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Veuillez d’abord sélectionner {% if isRange == true %}une plage de dates{% else %}une date{% endif %} pour définir l’heure',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'Di',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Lu',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Ma',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'Me',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Je',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Ve',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Sa'
 };

package/Calendar/polyglot/messages_he.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'הרחב שעה',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'כווץ שעה',
   'DUMB.CALENDAR.TIME_RANGE': 'טווח שעות:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'יש לבחור תחילה {% if isRange == true %}טווח תאריכים{% else %}תאריך{% endif %} כדי להגדיר שעה'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'יש לבחור תחילה {% if isRange == true %}טווח תאריכים{% else %}תאריך{% endif %} כדי להגדיר שעה',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'א׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'ב׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'ג׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'ד׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'ה׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'ו׳',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'ש׳'
 };

package/Calendar/polyglot/messages_hi.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'समय विस्तृत करें',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'समय संक्षिप्त करें',
   'DUMB.CALENDAR.TIME_RANGE': 'समय सीमा:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'समय सेट करने के लिए पहले {% if isRange == true %}तारीख़ सीमा{% else %}तारीख़{% endif %} चुनें'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'समय सेट करने के लिए पहले {% if isRange == true %}तारीख़ सीमा{% else %}तारीख़{% endif %} चुनें',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'रवि',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'सोम',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'मंगल',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'बुध',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'गुरु',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'शुक्र',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'शनि'
 };

package/Calendar/polyglot/messages_ja.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': '時刻を展開',
   'DUMB.CALENDAR.COLLAPSE_TIME': '時刻を折りたたむ',
   'DUMB.CALENDAR.TIME_RANGE': '時間範囲：',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': '時刻を設定するには、まず{% if isRange == true %}日付範囲{% else %}日付{% endif %}を選択してください'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': '時刻を設定するには、まず{% if isRange == true %}日付範囲{% else %}日付{% endif %}を選択してください',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': '日',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': '月',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': '火',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': '水',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': '木',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': '金',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': '土'
 };

package/Calendar/polyglot/messages_ko.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': '시간 펼치기',
   'DUMB.CALENDAR.COLLAPSE_TIME': '시간 접기',
   'DUMB.CALENDAR.TIME_RANGE': '시간 범위:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': '시간을 설정하려면 먼저 {% if isRange == true %}날짜 범위{% else %}날짜{% endif %}를 선택하세요'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': '시간을 설정하려면 먼저 {% if isRange == true %}날짜 범위{% else %}날짜{% endif %}를 선택하세요',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': '일',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': '월',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': '화',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': '수',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': '목',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': '금',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': '토'
 };

package/Calendar/polyglot/messages_pt.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Expandir hora',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Recolher hora',
   'DUMB.CALENDAR.TIME_RANGE': 'Intervalo de tempo:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Primeiro selecione {% if isRange == true %}um intervalo de datas{% else %}uma data{% endif %} para definir a hora'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Primeiro selecione {% if isRange == true %}um intervalo de datas{% else %}uma data{% endif %} para definir a hora',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'Dom',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Seg',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Ter',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'Qua',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Qui',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Sex',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Sáb'
 };

package/Calendar/polyglot/messages_ru.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'Развернуть время',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'Свернуть время',
   'DUMB.CALENDAR.TIME_RANGE': 'Диапазон времени:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Сначала выберите {% if isRange == true %}диапазон дат{% else %}дату{% endif %}, чтобы задать время'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'Сначала выберите {% if isRange == true %}диапазон дат{% else %}дату{% endif %}, чтобы задать время',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'Вс',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'Пн',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'Вт',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'Ср',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'Чт',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'Пт',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'Сб'
 };

package/Calendar/polyglot/messages_th.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': 'ขยายเวลา',
   'DUMB.CALENDAR.COLLAPSE_TIME': 'ย่อเวลา',
   'DUMB.CALENDAR.TIME_RANGE': 'ช่วงเวลา:',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'โปรดเลือก{% if isRange == true %}ช่วงวันที่{% else %}วันที่{% endif %}ก่อนเพื่อตั้งเวลา'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': 'โปรดเลือก{% if isRange == true %}ช่วงวันที่{% else %}วันที่{% endif %}ก่อนเพื่อตั้งเวลา',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': 'อา',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': 'จ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': 'อ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': 'พ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': 'พฤ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': 'ศ',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': 'ส'
 };

package/Calendar/polyglot/messages_zh.js

@@ -7,5 +7,12 @@ export const messages = {
   'DUMB.CALENDAR.EXPAND_TIME': '展开时间',
   'DUMB.CALENDAR.COLLAPSE_TIME': '收起时间',
   'DUMB.CALENDAR.TIME_RANGE': '时间范围：',
-  'DUMB.CALENDAR.SELECT_FIRST_HINT': '请先选择{% if isRange == true %}日期范围{% else %}日期{% endif %}以设置时间'
+  'DUMB.CALENDAR.SELECT_FIRST_HINT': '请先选择{% if isRange == true %}日期范围{% else %}日期{% endif %}以设置时间',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': '日',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': '一',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': '二',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': '三',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': '四',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': '五',
+  'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': '六'
 };

package/Calendar/polyglot/types.d.ts

@@ -11,4 +11,11 @@ export type CalendarMessages = {
     'DUMB.CALENDAR.SELECT_FIRST_HINT': {
         isRange: boolean;
     };
+    'DUMB.CALENDAR.WEEKDAY_SHORT.SUNDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.MONDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.TUESDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.WEDNESDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.THURSDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.FRIDAY': NoParams;
+    'DUMB.CALENDAR.WEEKDAY_SHORT.SATURDAY': NoParams;
 };

package/GetStartedPage/GetStartedPage.d.ts

@@ -2,7 +2,7 @@ import { type ReactElement } from 'react';
 import type { GetStartedPageProps } from './types';
 /**
  * Onboarding/empty-state page with a title, description, illustration, optional
- * checklist, help banner and action controls.
+ * checklist (check icons or numbered steps), help banner and action controls.
  *
  * @example
  * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />

package/GetStartedPage/GetStartedPage.js

@@ -4,10 +4,10 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { CheckRoundIcon, LockIcon } from '@pushwoosh/kit-icons';
 import { H1, Paragraph } from '@pushwoosh/kit-typography';
 import { Banner } from '../Banner';
-import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, Image } from './styles';
+import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, OrderedList, OrderedListItem, StepMarker, StepIndex, StepSeparator, Image } from './styles';
 /**
  * Onboarding/empty-state page with a title, description, illustration, optional
- * checklist, help banner and action controls.
+ * checklist (check icons or numbered steps), help banner and action controls.
  *
  * @example
  * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />
@@ -19,6 +19,7 @@ export function GetStartedPage(props) {
     image,
     helpText,
     checkList = [],
+    checkListView = 'check',
     actions = null
   } = props;
   return _jsx(GradientBackground, {
@@ -33,7 +34,17 @@ export function GetStartedPage(props) {
             }), _jsx(Paragraph, {
               children: description
             })]
-          }), !!checkList.length && _jsx(UnorderedList, {
+          }), !!checkList.length && (checkListView === 'numbered' ? _jsx(OrderedList, {
+            children: checkList.map((text, index) => _jsxs(OrderedListItem, {
+              children: [_jsxs(StepMarker, {
+                children: [_jsx(StepIndex, {
+                  children: index + 1
+                }), index < checkList.length - 1 && _jsx(StepSeparator, {})]
+              }), _jsx(Paragraph, {
+                children: text
+              })]
+            }, `step-${text}`))
+          }) : _jsx(UnorderedList, {
             children: checkList.map(text => _jsxs(UnorderedListItem, {
               children: [_jsx(UnorderedListIcon, {
                 children: _jsx(CheckRoundIcon, {
@@ -46,7 +57,7 @@ export function GetStartedPage(props) {
                 children: text
               })]
             }, `item-${text}`))
-          })]
+          }))]
         }), (helpText || actions) && _jsxs(Vertical, {
           "$gap": 16,
           children: [helpText && _jsx(Banner, {

package/GetStartedPage/index.d.ts

@@ -1,2 +1,2 @@
 export { GetStartedPage } from './GetStartedPage';
-export type { GetStartedPageProps } from './types';
+export type { GetStartedPageCheckListView, GetStartedPageProps } from './types';

package/GetStartedPage/styles.d.ts

@@ -10,6 +10,21 @@ export declare const ContentBox: import("styled-components/dist/types").IStyledC
 export declare const UnorderedList: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const OrderedList: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const OrderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepMarker: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepIndex: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const UnorderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/GetStartedPage/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
 import { Text } from '@pushwoosh/kit-typography';
 export const GradientBackground = styled.div.withConfig({
   displayName: "GradientBackground",
@@ -17,19 +17,39 @@ export const UnorderedList = styled.ul.withConfig({
   displayName: "UnorderedList",
   componentId: "sc-6jf7u0-3"
 })(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:8px;"]);
+export const OrderedList = styled.ol.withConfig({
+  displayName: "OrderedList",
+  componentId: "sc-6jf7u0-4"
+})(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:4px;"]);
+export const OrderedListItem = styled.li.withConfig({
+  displayName: "OrderedListItem",
+  componentId: "sc-6jf7u0-5"
+})(["display:grid;grid-template-columns:auto 1fr;column-gap:8px;"]);
+export const StepMarker = styled.div.withConfig({
+  displayName: "StepMarker",
+  componentId: "sc-6jf7u0-6"
+})(["display:flex;flex-direction:column;align-items:center;gap:4px;"]);
+export const StepIndex = styled.div.withConfig({
+  displayName: "StepIndex",
+  componentId: "sc-6jf7u0-7"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid ", ";border-radius:50%;background-color:", ";font-size:", ";font-weight:", ";"], Color.DIVIDER, Color.FROZEN, FontSize.SMALL, FontWeight.BOLD);
+export const StepSeparator = styled.div.withConfig({
+  displayName: "StepSeparator",
+  componentId: "sc-6jf7u0-8"
+})(["height:8px;border-left:1px solid ", ";"], Color.DIVIDER);
 export const UnorderedListItem = styled.li.withConfig({
   displayName: "UnorderedListItem",
-  componentId: "sc-6jf7u0-4"
+  componentId: "sc-6jf7u0-9"
 })(["display:flex;gap:8px;"]);
 export const UnorderedListText = styled(Text).withConfig({
   displayName: "UnorderedListText",
-  componentId: "sc-6jf7u0-5"
+  componentId: "sc-6jf7u0-10"
 })(["padding:4px 0;"]);
 export const UnorderedListIcon = styled.div.withConfig({
   displayName: "UnorderedListIcon",
-  componentId: "sc-6jf7u0-6"
+  componentId: "sc-6jf7u0-11"
 })(["display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:", ";border-radius:50%;padding:4px;"], Color.SUCCESS_LIGHT);
 export const Image = styled.img.withConfig({
   displayName: "Image",
-  componentId: "sc-6jf7u0-7"
+  componentId: "sc-6jf7u0-12"
 })(["width:400px;height:400px;object-fit:contain;"]);

package/GetStartedPage/types.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+/** Marker of {@link GetStartedPage} checklist items. */
+export type GetStartedPageCheckListView = 'check' | 'numbered';
 /** Props of {@link GetStartedPage}. */
 export interface GetStartedPageProps {
     /** Page title. */
@@ -9,8 +11,10 @@ export interface GetStartedPageProps {
     image: string;
     /** Optional help banner text. */
     helpText?: string;
-    /** Checklist items rendered with check icons. */
+    /** Checklist items rendered with check icons, or numbered steps when `checkListView` is `numbered`. */
     checkList?: string[];
+    /** Marker of checklist items: check icons (default) or step numbers. */
+    checkListView?: GetStartedPageCheckListView;
     /** Call-to-action controls. */
     actions?: ReactNode;
 }

package/index.d.ts

@@ -9,7 +9,7 @@ export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, } from './Calendar';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
-export { GetStartedPage } from './GetStartedPage';
+export { GetStartedPage, type GetStartedPageCheckListView, type GetStartedPageProps } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/polyglot/index.d.ts

@@ -1,2 +1,2 @@
 export type { LangMessages, LangProps, UseLangHook, NoParams } from './types';
-export { LangProvider, LangBase, useLangBase, LangLib, useLangLib, createLang, } from './react';
+export { LangProvider, LangBase, useLangBase, useLanguage, LangLib, useLangLib, createLang, } from './react';

package/polyglot/index.js

@@ -1 +1 @@
-export { LangProvider, LangBase, useLangBase, LangLib, useLangLib, createLang } from './react';
+export { LangProvider, LangBase, useLangBase, useLanguage, LangLib, useLangLib, createLang } from './react';

package/polyglot/react.d.ts

@@ -18,6 +18,8 @@ export declare const LangProvider: FC<PropsWithChildren<LangProviderProps>>;
 export declare const LangBase: FC;
 /** Returns a function that renders a message from the provider's catalogue to a plain string. */
 export declare const useLangBase: () => (allProps: any) => string;
+/** Returns the active language code of the nearest {@link LangProvider} (`en` without one). */
+export declare const useLanguage: () => string;
 type LangLibProps = {
     $languages: LanguagesMap;
 } & Record<string, any>;

package/polyglot/react.js

@@ -87,6 +87,8 @@ export const LangBase = props => {
 };
 /** Returns a function that renders a message from the provider's catalogue to a plain string. */
 export const useLangBase = () => useContext(LangContext).lang;
+/** Returns the active language code of the nearest {@link LangProvider} (`en` without one). */
+export const useLanguage = () => useContext(LangContext).language;
 /** Renders a message from a self-supplied catalogue (`$languages`); registers it on first use. Prefer {@link createLang}. */
 export const LangLib = ({
   $languages,