@grandbazar/ui-baza 1.2.10 → 1.2.12

package/dist/index.cjs

@@ -1321,6 +1321,19 @@ function getCalendarGrid(month, year, firstDayOfWeek) {
   );
 }
 
+function normalizeDateRange(firstDate, secondDate) {
+  if (!firstDate || !secondDate) {
+    return { firstDate, secondDate };
+  }
+  if (firstDate.getTime() <= secondDate.getTime()) {
+    return { firstDate, secondDate };
+  }
+  return {
+    firstDate: secondDate,
+    secondDate: firstDate
+  };
+}
+
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
@@ -1426,9 +1439,14 @@ function useDatePickerControls(initialDate = /* @__PURE__ */ new Date()) {
   };
 }
 
-function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru) {
-  const [firstSelectedDate, setFirstSelectedDate] = React.useState(null);
-  const [secondSelectedDate, setSecondSelectedDate] = React.useState(null);
+function useDatePickerMultiSelect({
+  firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru,
+  initialFirstSelectedDate = null,
+  initialSecondSelectedDate = null
+} = {}) {
+  const normalizedRange = normalizeDateRange(initialFirstSelectedDate, initialSecondSelectedDate);
+  const [firstSelectedDate, setFirstSelectedDate] = React.useState(normalizedRange.firstDate);
+  const [secondSelectedDate, setSecondSelectedDate] = React.useState(normalizedRange.secondDate);
   const lastDayOfWeek = (firstDayOfWeek + 6) % 7;
   const dayInfoCache = React.useMemo(() => /* @__PURE__ */ new Map(), []);
   const getDayInfo = React.useCallback(
@@ -1544,8 +1562,8 @@ function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru)
   return { firstSelectedDate, secondSelectedDate, setFirstSelectedDate, setSecondSelectedDate, getCellProps };
 }
 
-function useDatePickerSelect() {
-  const [selectedDate, setSelectedDate] = React.useState(null);
+function useDatePickerSelect({ initialSelectedDate = null } = {}) {
+  const [selectedDate, setSelectedDate] = React.useState(initialSelectedDate);
   const getCellProps = React.useCallback(
     (day) => {
       return {
@@ -2462,9 +2480,9 @@ function TextFieldLabel({ className, children, isRequired, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$9.textFieldLabel, className), "data-required": isRequired, ...props, children });
 }
 
-const textFieldRoot = "_textFieldRoot_1geya_2";
-const lg$2 = "_lg_1geya_38";
-const md$3 = "_md_1geya_68";
+const textFieldRoot = "_textFieldRoot_cs7mv_2";
+const lg$2 = "_lg_cs7mv_38";
+const md$3 = "_md_cs7mv_70";
 const styles$8 = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$2,

package/dist/index.d.ts

@@ -880,6 +880,16 @@ declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent
     centerArrowToTrigger?: boolean;
 };
 
+declare type TUseDatePickerMultiSelectOptions = {
+    firstDayOfWeek?: number;
+    initialFirstSelectedDate?: Date | null;
+    initialSecondSelectedDate?: Date | null;
+};
+
+declare type TUseDatePickerSelectOptions = {
+    initialSelectedDate?: Date | null;
+};
+
 declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {
     ref?: React.Ref<TElement>;
 };
@@ -904,10 +914,13 @@ export declare function useDatePickerControls(initialDate?: Date): {
  * Manages date range selection state for DatePicker.
  * Handles two-date selection with automatic ordering and visual range styling.
  *
- * @param firstDayOfWeek - First day of the week (0 = Sunday, 1 = Monday, etc.)
+ * @param options - Hook options for range selection
+ * @param options.firstDayOfWeek - First day of the week (0 = Sunday, 1 = Monday, etc.)
+ * @param options.initialFirstSelectedDate - Initial start date for range selection
+ * @param options.initialSecondSelectedDate - Initial end date for range selection
  * @returns Object containing selected dates, setters, and cell props generator with range styling
  */
-export declare function useDatePickerMultiSelect(firstDayOfWeek?: number): {
+export declare function useDatePickerMultiSelect({ firstDayOfWeek, initialFirstSelectedDate, initialSecondSelectedDate, }?: TUseDatePickerMultiSelectOptions): {
     firstSelectedDate: Date | null;
     secondSelectedDate: Date | null;
     setFirstSelectedDate: Dispatch<SetStateAction<Date | null>>;
@@ -919,9 +932,11 @@ export declare function useDatePickerMultiSelect(firstDayOfWeek?: number): {
  * Manages single date selection state for DatePicker.
  * Provides cell props with selection logic and state management.
  *
+ * @param options - Hook options for initial selection state
+ * @param options.initialSelectedDate - Initial selected date
  * @returns Object containing selected date, setter, and cell props generator
  */
-export declare function useDatePickerSelect(): {
+export declare function useDatePickerSelect({ initialSelectedDate }?: TUseDatePickerSelectOptions): {
     selectedDate: Date | null;
     setSelectedDate: Dispatch<SetStateAction<Date | null>>;
     getCellProps: (day: TCalendarDay) => Pick<ComponentProps<typeof DatePickerCell>, "onClick" | "disabled" | "isCurrent" | "state">;

package/dist/index.js

@@ -1317,6 +1317,19 @@ function getCalendarGrid(month, year, firstDayOfWeek) {
   );
 }
 
+function normalizeDateRange(firstDate, secondDate) {
+  if (!firstDate || !secondDate) {
+    return { firstDate, secondDate };
+  }
+  if (firstDate.getTime() <= secondDate.getTime()) {
+    return { firstDate, secondDate };
+  }
+  return {
+    firstDate: secondDate,
+    secondDate: firstDate
+  };
+}
+
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
@@ -1422,9 +1435,14 @@ function useDatePickerControls(initialDate = /* @__PURE__ */ new Date()) {
   };
 }
 
-function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru) {
-  const [firstSelectedDate, setFirstSelectedDate] = useState(null);
-  const [secondSelectedDate, setSecondSelectedDate] = useState(null);
+function useDatePickerMultiSelect({
+  firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru,
+  initialFirstSelectedDate = null,
+  initialSecondSelectedDate = null
+} = {}) {
+  const normalizedRange = normalizeDateRange(initialFirstSelectedDate, initialSecondSelectedDate);
+  const [firstSelectedDate, setFirstSelectedDate] = useState(normalizedRange.firstDate);
+  const [secondSelectedDate, setSecondSelectedDate] = useState(normalizedRange.secondDate);
   const lastDayOfWeek = (firstDayOfWeek + 6) % 7;
   const dayInfoCache = useMemo(() => /* @__PURE__ */ new Map(), []);
   const getDayInfo = useCallback(
@@ -1540,8 +1558,8 @@ function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru)
   return { firstSelectedDate, secondSelectedDate, setFirstSelectedDate, setSecondSelectedDate, getCellProps };
 }
 
-function useDatePickerSelect() {
-  const [selectedDate, setSelectedDate] = useState(null);
+function useDatePickerSelect({ initialSelectedDate = null } = {}) {
+  const [selectedDate, setSelectedDate] = useState(initialSelectedDate);
   const getCellProps = useCallback(
     (day) => {
       return {
@@ -2458,9 +2476,9 @@ function TextFieldLabel({ className, children, isRequired, ...props }) {
   return /* @__PURE__ */ jsx("label", { className: classNames(styles$9.textFieldLabel, className), "data-required": isRequired, ...props, children });
 }
 
-const textFieldRoot = "_textFieldRoot_1geya_2";
-const lg$2 = "_lg_1geya_38";
-const md$3 = "_md_1geya_68";
+const textFieldRoot = "_textFieldRoot_cs7mv_2";
+const lg$2 = "_lg_cs7mv_38";
+const md$3 = "_md_cs7mv_70";
 const styles$8 = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$2,

package/dist/style.css

@@ -1424,7 +1424,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._textFieldRoot_1geya_2 {
+  ._textFieldRoot_cs7mv_2 {
     --ring-width: 1px;
     --ring-color: var(--color-neutral-alpha-120);
 
@@ -1460,7 +1460,7 @@ textarea {
       }
     }
 
-    &._lg_1geya_38 {
+    &._lg_cs7mv_38 {
       min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
       padding: var(--space-md) var(--space-xl);
       border-radius: var(--radius-xl);
@@ -1482,7 +1482,9 @@ textarea {
 
           [data-element='label'],
           [data-element='label-suffix'] {
-            --label-scale: calc(var(--line-height-sm) / var(--line-height-lg));
+            /* Android 9 Chrome bug: calc(var(--line-height-sm) / var(--line-height-lg)) can fail in transforms.
+             Keep a literal ratio for stable floating-label scaling on legacy Chromium. */
+            --label-scale: calc(16 / 24);
             transform: translateY(calc(-1 * var(--space-md) / var(--label-scale))) scale(var(--label-scale));
             opacity: 1;
           }
@@ -1490,7 +1492,7 @@ textarea {
       }
     }
 
-    &._md_1geya_68 {
+    &._md_cs7mv_70 {
       min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
       padding: var(--space-lg);
       border-radius: var(--radius-lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",