@redis-ui/components 49.1.0 → 50.0.0

package/dist/node_modules/rsuite/esm/useBreakpointValue/useBreakpointValue.js

@@ -0,0 +1,25 @@
+"use client";
+import useMediaQuery_default from "../useMediaQuery/index.js";
+//#region ../../node_modules/rsuite/esm/useBreakpointValue/useBreakpointValue.js
+/**
+* A React Hook that returns different values based on different screen sizes in responsive design.
+* @version 5.64.0
+* @unstable Please note that this API is not stable and may change in the future.
+* @see https://rsuitejs.com/components/use-breakpoint-value
+*
+* @example
+* ```ts
+* const fontSize = useBreakpointValue({ sm: "14px", lg: "24px" }, { defaultValue: "16px" });
+* const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });
+* ```
+*
+*/
+function useBreakpointValue(breakpoints, options) {
+	const { defaultValue, enabled = true } = options || {};
+	const keys = Object.keys(breakpoints);
+	const values = Object.values(breakpoints);
+	const index = useMediaQuery_default(keys, enabled).lastIndexOf(true);
+	return index !== -1 ? values[index] : defaultValue;
+}
+//#endregion
+export { useBreakpointValue as default };

package/dist/node_modules/rsuite/esm/useMediaQuery/breakpoints.cjs

@@ -0,0 +1,157 @@
+"use client";
+//#region ../../node_modules/rsuite/esm/useMediaQuery/breakpoints.js
+/**
+* Capitalize the first letter of a string
+*/
+var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+/**
+* Adjust max-width value to avoid breakpoint overlapping
+*/
+function adjustMaxWidth(value) {
+	if (value === 0) return "0px";
+	return `${value - .01}px`;
+}
+/**
+* Create media query string
+*/
+function createMediaQuery(options) {
+	const { min, max } = options;
+	if (!min && !max) return "";
+	const conditions = [];
+	if (min) conditions.push(`(min-width: ${min})`);
+	if (max) conditions.push(`(max-width: ${max})`);
+	return conditions.join(" and ");
+}
+/**
+* Create traditional media query map compatible with previous versions
+*/
+function createLegacyMediaQueryMap(breakpoints) {
+	const entries = Object.entries(breakpoints);
+	const result = {};
+	const xsValue = breakpoints.xs;
+	if (xsValue !== void 0) {
+		const nextBreakpoint = entries.find(([key]) => key === "sm");
+		if (nextBreakpoint) result.xs = `(max-width: ${adjustMaxWidth(nextBreakpoint[1])})`;
+		else result.xs = `(min-width: ${xsValue}px)`;
+	}
+	entries.forEach(([key, value]) => {
+		if (key !== "xs") result[key] = `(min-width: ${value}px)`;
+	});
+	return result;
+}
+/**
+* Create breakpoint system
+*
+* This function takes a breakpoint map with numeric values and returns an enhanced breakpoint system
+* that provides various media queries for responsive design.
+*
+* @example
+* ```ts
+* const breakpoints = createBreakpoints({
+*   xs: 0,
+*   sm: 576,
+*   md: 768,
+*   lg: 992,
+*   xl: 1200
+* });
+*
+* // Using breakpoints
+* breakpoints.up('md'); // '(min-width: 768px)'
+* breakpoints.down('lg'); // '(max-width: 991.99px)'
+* breakpoints.between('sm', 'lg'); // '(min-width: 576px) and (max-width: 991.99px)'
+* ```
+*/
+function createBreakpoints(breakpoints) {
+	const sortedEntries = Object.entries(breakpoints).sort((a, b) => {
+		return a[1] - b[1];
+	});
+	const breakpointEntries = sortedEntries.map(([name, value], index) => {
+		let max = null;
+		if (index < sortedEntries.length - 1) max = adjustMaxWidth(sortedEntries[index + 1][1]);
+		return [name, {
+			name,
+			min: `${value}px`,
+			max
+		}];
+	});
+	const entries = Object.fromEntries(breakpointEntries);
+	function getEntry(name) {
+		return entries[name];
+	}
+	function generateConditions() {
+		const conditions = {};
+		const breakpointNames = Object.keys(entries);
+		breakpointNames.forEach((name) => {
+			const entry = getEntry(name);
+			conditions[name] = createMediaQuery({ min: entry.min === null ? void 0 : entry.min });
+			conditions[`${name}Down`] = createMediaQuery({ max: entry.max || void 0 });
+			conditions[`${name}Only`] = createMediaQuery({
+				min: entry.min === null ? void 0 : entry.min,
+				max: entry.max === null ? void 0 : entry.max
+			});
+		});
+		for (let i = 0; i < breakpointNames.length; i++) for (let j = i + 1; j < breakpointNames.length; j++) {
+			const minName = breakpointNames[i];
+			const maxName = breakpointNames[j];
+			const minEntry = getEntry(minName);
+			const maxEntry = getEntry(maxName);
+			conditions[`${minName}To${capitalize(maxName)}`] = createMediaQuery({
+				min: minEntry.min || void 0,
+				max: maxEntry.max || void 0
+			});
+		}
+		return conditions;
+	}
+	const conditions = generateConditions();
+	const legacyMap = createLegacyMediaQueryMap(breakpoints);
+	function getCondition(key) {
+		return conditions[key] || "";
+	}
+	function keys() {
+		return ["base", ...Object.keys(entries)];
+	}
+	function up(name) {
+		return createMediaQuery({ min: getEntry(name).min || void 0 });
+	}
+	function down(name) {
+		return createMediaQuery({ max: getEntry(name).max || void 0 });
+	}
+	function only(name) {
+		const entry = getEntry(name);
+		return createMediaQuery({
+			min: entry.min || void 0,
+			max: entry.max || void 0
+		});
+	}
+	function between(minName, maxName) {
+		if (Object.keys(entries).length <= 2) return up(minName);
+		const minEntry = getEntry(minName);
+		const maxEntry = getEntry(maxName);
+		return createMediaQuery({
+			min: minEntry.min || void 0,
+			max: maxEntry.max || void 0
+		});
+	}
+	function createMediaQueryMap() {
+		const mediaQueryMap = { ...legacyMap };
+		const breakpointKeys = Object.keys(legacyMap);
+		Object.entries(conditions).forEach(([key, value]) => {
+			if (!breakpointKeys.includes(key)) mediaQueryMap[key] = value;
+		});
+		return mediaQueryMap;
+	}
+	return {
+		values: Object.values(entries),
+		only,
+		keys,
+		conditions,
+		getCondition,
+		up,
+		down,
+		between,
+		legacyMap,
+		createMediaQueryMap
+	};
+}
+//#endregion
+exports.createBreakpoints = createBreakpoints;

package/dist/node_modules/rsuite/esm/useMediaQuery/breakpoints.js

@@ -0,0 +1,157 @@
+"use client";
+//#region ../../node_modules/rsuite/esm/useMediaQuery/breakpoints.js
+/**
+* Capitalize the first letter of a string
+*/
+var capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+/**
+* Adjust max-width value to avoid breakpoint overlapping
+*/
+function adjustMaxWidth(value) {
+	if (value === 0) return "0px";
+	return `${value - .01}px`;
+}
+/**
+* Create media query string
+*/
+function createMediaQuery(options) {
+	const { min, max } = options;
+	if (!min && !max) return "";
+	const conditions = [];
+	if (min) conditions.push(`(min-width: ${min})`);
+	if (max) conditions.push(`(max-width: ${max})`);
+	return conditions.join(" and ");
+}
+/**
+* Create traditional media query map compatible with previous versions
+*/
+function createLegacyMediaQueryMap(breakpoints) {
+	const entries = Object.entries(breakpoints);
+	const result = {};
+	const xsValue = breakpoints.xs;
+	if (xsValue !== void 0) {
+		const nextBreakpoint = entries.find(([key]) => key === "sm");
+		if (nextBreakpoint) result.xs = `(max-width: ${adjustMaxWidth(nextBreakpoint[1])})`;
+		else result.xs = `(min-width: ${xsValue}px)`;
+	}
+	entries.forEach(([key, value]) => {
+		if (key !== "xs") result[key] = `(min-width: ${value}px)`;
+	});
+	return result;
+}
+/**
+* Create breakpoint system
+*
+* This function takes a breakpoint map with numeric values and returns an enhanced breakpoint system
+* that provides various media queries for responsive design.
+*
+* @example
+* ```ts
+* const breakpoints = createBreakpoints({
+*   xs: 0,
+*   sm: 576,
+*   md: 768,
+*   lg: 992,
+*   xl: 1200
+* });
+*
+* // Using breakpoints
+* breakpoints.up('md'); // '(min-width: 768px)'
+* breakpoints.down('lg'); // '(max-width: 991.99px)'
+* breakpoints.between('sm', 'lg'); // '(min-width: 576px) and (max-width: 991.99px)'
+* ```
+*/
+function createBreakpoints(breakpoints) {
+	const sortedEntries = Object.entries(breakpoints).sort((a, b) => {
+		return a[1] - b[1];
+	});
+	const breakpointEntries = sortedEntries.map(([name, value], index) => {
+		let max = null;
+		if (index < sortedEntries.length - 1) max = adjustMaxWidth(sortedEntries[index + 1][1]);
+		return [name, {
+			name,
+			min: `${value}px`,
+			max
+		}];
+	});
+	const entries = Object.fromEntries(breakpointEntries);
+	function getEntry(name) {
+		return entries[name];
+	}
+	function generateConditions() {
+		const conditions = {};
+		const breakpointNames = Object.keys(entries);
+		breakpointNames.forEach((name) => {
+			const entry = getEntry(name);
+			conditions[name] = createMediaQuery({ min: entry.min === null ? void 0 : entry.min });
+			conditions[`${name}Down`] = createMediaQuery({ max: entry.max || void 0 });
+			conditions[`${name}Only`] = createMediaQuery({
+				min: entry.min === null ? void 0 : entry.min,
+				max: entry.max === null ? void 0 : entry.max
+			});
+		});
+		for (let i = 0; i < breakpointNames.length; i++) for (let j = i + 1; j < breakpointNames.length; j++) {
+			const minName = breakpointNames[i];
+			const maxName = breakpointNames[j];
+			const minEntry = getEntry(minName);
+			const maxEntry = getEntry(maxName);
+			conditions[`${minName}To${capitalize(maxName)}`] = createMediaQuery({
+				min: minEntry.min || void 0,
+				max: maxEntry.max || void 0
+			});
+		}
+		return conditions;
+	}
+	const conditions = generateConditions();
+	const legacyMap = createLegacyMediaQueryMap(breakpoints);
+	function getCondition(key) {
+		return conditions[key] || "";
+	}
+	function keys() {
+		return ["base", ...Object.keys(entries)];
+	}
+	function up(name) {
+		return createMediaQuery({ min: getEntry(name).min || void 0 });
+	}
+	function down(name) {
+		return createMediaQuery({ max: getEntry(name).max || void 0 });
+	}
+	function only(name) {
+		const entry = getEntry(name);
+		return createMediaQuery({
+			min: entry.min || void 0,
+			max: entry.max || void 0
+		});
+	}
+	function between(minName, maxName) {
+		if (Object.keys(entries).length <= 2) return up(minName);
+		const minEntry = getEntry(minName);
+		const maxEntry = getEntry(maxName);
+		return createMediaQuery({
+			min: minEntry.min || void 0,
+			max: maxEntry.max || void 0
+		});
+	}
+	function createMediaQueryMap() {
+		const mediaQueryMap = { ...legacyMap };
+		const breakpointKeys = Object.keys(legacyMap);
+		Object.entries(conditions).forEach(([key, value]) => {
+			if (!breakpointKeys.includes(key)) mediaQueryMap[key] = value;
+		});
+		return mediaQueryMap;
+	}
+	return {
+		values: Object.values(entries),
+		only,
+		keys,
+		conditions,
+		getCondition,
+		up,
+		down,
+		between,
+		legacyMap,
+		createMediaQueryMap
+	};
+}
+//#endregion
+export { createBreakpoints };

package/dist/node_modules/rsuite/esm/useMediaQuery/index.cjs

@@ -0,0 +1,5 @@
+"use client";
+//#region ../../node_modules/rsuite/esm/useMediaQuery/index.js
+var useMediaQuery_default = require("./useMediaQuery.cjs").default;
+//#endregion
+exports.default = useMediaQuery_default;

package/dist/node_modules/rsuite/esm/useMediaQuery/index.js

@@ -0,0 +1,6 @@
+"use client";
+import useMediaQuery from "./useMediaQuery.js";
+//#region ../../node_modules/rsuite/esm/useMediaQuery/index.js
+var useMediaQuery_default = useMediaQuery;
+//#endregion
+export { useMediaQuery_default as default };

package/dist/node_modules/rsuite/esm/useMediaQuery/useMediaQuery.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_canUseDOM = require("../../../dom-lib/esm/canUseDOM.cjs");
+const require_responsive = require("../internals/styled-system/responsive.cjs");
+const require_breakpoints = require("./breakpoints.cjs");
+let react = require("react");
+//#region ../../node_modules/rsuite/esm/useMediaQuery/useMediaQuery.js
+var mediaQuerySizeMap = require_breakpoints.createBreakpoints(require_responsive.breakpointValues).createMediaQueryMap();
+/**
+* Create a MediaQueryList object or a mock for server-side rendering
+*/
+var matchMedia = (query) => {
+	if (require_canUseDOM.default) return window.matchMedia(query);
+	return {
+		matches: false,
+		media: query
+	};
+};
+/**
+* React hook that tracks state of a CSS media query
+* @version 5.48.0
+* @unstable Please note that this API is not stable and may change in the future.
+* @see https://rsuitejs.com/components/use-media-query
+* @param query - The media query string or array of query strings
+* @param enabled - Whether to enable the media query, defaults to true
+*/
+function useMediaQuery(query, enabled = true) {
+	const queries = Array.isArray(query) ? query : [query];
+	const mediaQueries = (0, react.useMemo)(() => queries.map((query) => mediaQuerySizeMap[query] || query), [...queries]);
+	if (!enabled) return queries.map(() => false);
+	const mediaQueryArray = (0, react.useRef)(mediaQueries.map((query) => matchMedia(query).matches));
+	return (0, react.useSyncExternalStore)((0, react.useCallback)((callback) => {
+		const list = mediaQueries.map((query) => matchMedia(query));
+		const handleChange = (event) => {
+			const index = list.findIndex((item) => item.media === event.media);
+			if (index !== -1) {
+				const nextMediaQueryArray = mediaQueryArray.current.slice();
+				nextMediaQueryArray[index] = event.matches;
+				mediaQueryArray.current = nextMediaQueryArray;
+			}
+			callback();
+		};
+		list.forEach((query) => {
+			query.addEventListener("change", handleChange);
+		});
+		return () => {
+			list.forEach((query) => {
+				query.removeEventListener("change", handleChange);
+			});
+		};
+	}, [mediaQueries]), (0, react.useCallback)(() => {
+		return mediaQueryArray.current;
+	}, []), (0, react.useCallback)(() => {
+		return mediaQueryArray.current;
+	}, []));
+}
+//#endregion
+exports.default = useMediaQuery;

package/dist/node_modules/rsuite/esm/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,57 @@
+"use client";
+import canUseDOM from "../../../dom-lib/esm/canUseDOM.js";
+import { breakpointValues } from "../internals/styled-system/responsive.js";
+import { createBreakpoints } from "./breakpoints.js";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+//#region ../../node_modules/rsuite/esm/useMediaQuery/useMediaQuery.js
+var mediaQuerySizeMap = createBreakpoints(breakpointValues).createMediaQueryMap();
+/**
+* Create a MediaQueryList object or a mock for server-side rendering
+*/
+var matchMedia = (query) => {
+	if (canUseDOM) return window.matchMedia(query);
+	return {
+		matches: false,
+		media: query
+	};
+};
+/**
+* React hook that tracks state of a CSS media query
+* @version 5.48.0
+* @unstable Please note that this API is not stable and may change in the future.
+* @see https://rsuitejs.com/components/use-media-query
+* @param query - The media query string or array of query strings
+* @param enabled - Whether to enable the media query, defaults to true
+*/
+function useMediaQuery(query, enabled = true) {
+	const queries = Array.isArray(query) ? query : [query];
+	const mediaQueries = useMemo(() => queries.map((query) => mediaQuerySizeMap[query] || query), [...queries]);
+	if (!enabled) return queries.map(() => false);
+	const mediaQueryArray = useRef(mediaQueries.map((query) => matchMedia(query).matches));
+	return useSyncExternalStore(useCallback((callback) => {
+		const list = mediaQueries.map((query) => matchMedia(query));
+		const handleChange = (event) => {
+			const index = list.findIndex((item) => item.media === event.media);
+			if (index !== -1) {
+				const nextMediaQueryArray = mediaQueryArray.current.slice();
+				nextMediaQueryArray[index] = event.matches;
+				mediaQueryArray.current = nextMediaQueryArray;
+			}
+			callback();
+		};
+		list.forEach((query) => {
+			query.addEventListener("change", handleChange);
+		});
+		return () => {
+			list.forEach((query) => {
+				query.removeEventListener("change", handleChange);
+			});
+		};
+	}, [mediaQueries]), useCallback(() => {
+		return mediaQueryArray.current;
+	}, []), useCallback(() => {
+		return mediaQueryArray.current;
+	}, []));
+}
+//#endregion
+export { useMediaQuery as default };

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "49.1.0",
+  "version": "50.0.0",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/index.cjs",
+    "**/*.css"
+  ],
   "repository": "git@github.com:redislabsdev/redis-ui.git",
   "files": [
     "dist",
@@ -30,7 +34,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^8.0.0 || ^9.0.0 || ^10.0.0",
-    "@redis-ui/styles": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@redis-ui/styles": "^20.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"
@@ -59,6 +63,7 @@
     "react-children-utilities": "2.9.0",
     "react-loading-skeleton": "^3.5.0",
     "react-toastify": "11.1.0",
+    "rsuite": "^6.1.3",
     "type-fest": "^5.4.4",
     "virtua": "^0.36.3"
   },

package/skills/redis-ui-components/SKILL.md

@@ -33,7 +33,7 @@ import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 - **Compound Components**: Some components use `Object.assign` to attach sub-components (e.g., `Button.Icon`, `Modal.Content`, `Tabs.TabBar`). These sub-components share internal React context with their parent, so they must be rendered inside it.
 - **Layouts**: Use `FlexGroup` and `FlexItem` for flex layouts instead of raw `div` with inline styles. `FlexGroup` supports `gap`, `direction`, `align`, `justify`, and `wrap` props. See the Layout references.
 - **Typography**: Use `Typography.Heading`, `Typography.Body`, and `Typography.Code` for all text rendering instead of raw `<span>`, `<p>`, or `<h1>`–`<h6>` elements. See the [Typography](./references/Typography.md) reference.
-- **Theming**: Components use `styled-components` and access theme via `useTheme()` from `@redis-ui/styles`.
+- **Theming**: Most components use `styled-components` and access theme via `useTheme()` from `@redis-ui/styles`. RSuite-based components (DatePicker, DateRangePicker) use RSuite CSS variables provided by `CommonStyles` from `@redis-ui/styles` `^20.0.0`; mount `CommonStyles` in the app root because the components package does not inject those variables automatically.
 - **ForwardRef**: Most components support `ref` forwarding.
 
 ## Important
@@ -60,6 +60,11 @@ Always check the relevant component reference before using a component. The refe
 - [TextArea](./references/TextArea.md)
 - [QuantityCounter](./references/QuantityCounter.md)
 
+### Date Inputs
+
+- [DatePicker](./references/DatePicker.md)
+- [DateRangePicker](./references/DateRangePicker.md)
+
 ### Selects
 
 - [Select](./references/Select.md)

package/skills/redis-ui-components/references/DatePicker.md

@@ -0,0 +1,123 @@
+# DatePicker
+
+A date picker component for selecting dates with calendar UI, disabled dates, and predefined ranges.
+
+## Import
+
+```tsx
+import { DatePicker } from '@redis-ui/components';
+```
+
+## Theming Requirement
+
+`DatePicker` is RSuite-based and uses RSuite CSS variables supplied by `CommonStyles` from `@redis-ui/styles` `^20.0.0`. Mount `CommonStyles` once in the app root, inside the same styled-components theme provider as the picker:
+
+```tsx
+import { CommonStyles } from '@redis-ui/styles';
+
+<CommonStyles />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placeholder` | `string` | `'Select date'` | Placeholder text shown when no date is selected |
+| `format` | `string` | `'yyyy-MM-dd'` | Date format string (e.g., 'yyyy-MM-dd', 'MM/dd/yyyy') |
+| `disabled` | `boolean` | `false` | Whether the picker is disabled |
+| `value` | `Date \| null` | `undefined` | Controlled value |
+| `defaultValue` | `Date \| null` | `undefined` | Default value (uncontrolled mode) |
+| `onChange` | `(value: Date \| null) => void` | `undefined` | Callback when value changes |
+| `style` | `CSSProperties` | `undefined` | Custom inline styles |
+| `className` | `string` | `undefined` | Custom CSS class name |
+| `readOnly` | `boolean` | `undefined` | Whether the picker is in read-only state |
+| `ranges` | `DatePickerRangeType[]` | `undefined` | Predefined date ranges to show in the footer (e.g., "Today", "Yesterday") |
+| `shouldDisableDate` | `(date: Date) => boolean` | `undefined` | Function to determine if a date should be disabled |
+
+### DatePickerRangeType
+
+```tsx
+type DatePickerRangeType = {
+  label: string;
+  value: Date | (() => Date);
+};
+```
+
+## Examples
+
+### Basic Usage (Uncontrolled)
+
+```tsx
+<DatePicker defaultValue={new Date('2024-01-01')} />
+```
+
+### Controlled Mode
+
+```tsx
+const [value, setValue] = useState<Date | null>(null);
+
+<DatePicker value={value} onChange={setValue} />
+```
+
+### Disabled
+
+Disabled state prevents user interaction.
+
+```tsx
+<DatePicker placeholder="Select date" disabled />
+<DatePicker defaultValue={new Date('2024-01-01')} disabled />
+```
+
+### Readonly
+
+Read-only state prevents editing.
+
+```tsx
+<DatePicker defaultValue={new Date('2024-01-01')} readOnly />
+```
+
+### With Ranges
+
+Predefined date ranges can be added to the footer for quick selection.
+
+```tsx
+const [value, onChange] = useState<Date | null>(null);
+const ranges = useMemo(() => {
+  return [
+    { label: 'Today', value: new Date() },
+    { label: 'Yesterday', value: new Date(Date.now() - 24 * 60 * 60 * 1000) },
+    {
+      label: 'One week ago',
+      value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+    }
+  ];
+}, []);
+
+<DatePicker value={value} onChange={onChange} ranges={ranges} />
+```
+
+### Disabled Dates
+
+Specific dates can be disabled using the shouldDisableDate function.
+
+```tsx
+const [value, onChange] = useState<Date | null>(null);
+const shouldDisableDate = useCallback((date: Date) => {
+  // Disable weekends
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}, []);
+
+<DatePicker value={value} onChange={onChange} shouldDisableDate={shouldDisableDate} />
+```
+
+## Notes
+
+- Supports both controlled and uncontrolled modes via `value`/`onChange` or `defaultValue`.
+- The picker is always cleanable (shows a clear button when a date is selected) and uses medium size.
+- Date format can be customized using the `format` prop (e.g., 'MM/dd/yyyy', 'dd-MM-yyyy').
+- Predefined ranges appear in the footer of the calendar for quick date selection.
+- Use `shouldDisableDate` to disable specific dates based on custom logic (e.g., weekends, past dates, blackout dates).
+- For validation and labels, wrap with `FormField` component.
+- Mount `CommonStyles` from `@redis-ui/styles` `^20.0.0` to provide the RSuite CSS variables used by the picker.
+- Unlike other components, the preferred way to customize DatePicker styles is via CSS variables. Even though overriding those variables is possible, avoid doing so unless strictly necessary.