From f221068ab9e92e1170e8ccff045920f3e5df470c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 19 Apr 2026 06:38:47 +0200
Subject: [PATCH] fix(ui): use BUI Popover and add unavailable dates story in
 DateRangePicker

- Switch DateRangePicker to use the BUI Popover component (with hideArrow)
  instead of the raw react-aria-components Popover
- Add WithUnavailableDates story showing isDateUnavailable with weekends
  blocked and non-contiguous ranges disallowed (default behaviour)

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
---
 .../DateRangePicker.stories.tsx               | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/DateRangePicker/DateRangePicker.stories.tsx b/packages/ui/src/components/DateRangePicker/DateRangePicker.stories.tsx
index 3a596c2b91..ed3696ae83 100644
--- a/packages/ui/src/components/DateRangePicker/DateRangePicker.stories.tsx
+++ b/packages/ui/src/components/DateRangePicker/DateRangePicker.stories.tsx
@@ -16,8 +16,13 @@
 
 import preview from '../../../../../.storybook/preview';
 import { DateRangePicker } from './DateRangePicker';
-import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
-import { Form } from 'react-aria-components';
+import {
+  parseDate,
+  today,
+  getLocalTimeZone,
+  isWeekend,
+} from '@internationalized/date';
+import { useLocale, Form } from 'react-aria-components';
 import { Button } from '../Button';
 
 const meta = preview.meta({
@@ -128,3 +133,23 @@ export const WithMinMaxValue = meta.story({
     maxValue: today(getLocalTimeZone()).add({ days: 30 }),
   },
 });
+
+/**
+ * Weekends are marked unavailable. Because `allowsNonContiguousRanges` is not
+ * set (defaults to false), the picker prevents the user from selecting any
+ * range that spans across an unavailable date — the selection snaps to avoid
+ * crossing a weekend.
+ */
+export const WithUnavailableDates = meta.story({
+  render: args => {
+    const { locale } = useLocale();
+    return (
+      <DateRangePicker
+        {...args}
+        label="Working days only"
+        description="Weekends are unavailable. You cannot select a range that spans across them."
+        isDateUnavailable={date => isWeekend(date, locale)}
+      />
+    );
+  },
+});