chore: merge master and resolve package.json conflict

Both @braintree/sanitize-url (this branch) and @internationalized/date
(master) were added to packages/ui dependencies; keeping both.

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/date-range-picker/components.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { DateRangePicker } from '../../../../../packages/ui/src/components/DateRangePicker/DateRangePicker';
+import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
+import { parseDate } from '@internationalized/date';
+
+export const WithLabel = () => {
+  return <DateRangePicker label="Date range" style={{ maxWidth: '280px' }} />;
+};
+
+export const Sizes = () => {
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      style={{ width: '100%', maxWidth: '360px' }}
+    >
+      <DateRangePicker label="Small" size="small" />
+      <DateRangePicker label="Medium" size="medium" />
+    </Flex>
+  );
+};
+
+export const WithDefaultValue = () => {
+  return (
+    <DateRangePicker
+      label="Booking period"
+      defaultValue={{
+        start: parseDate('2025-02-03'),
+        end: parseDate('2025-02-14'),
+      }}
+      style={{ maxWidth: '360px' }}
+    />
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <DateRangePicker
+      label="Date range"
+      isDisabled
+      style={{ maxWidth: '360px' }}
+    />
+  );
+};

docs-ui/src/app/components/date-range-picker/page.mdx

@@ -0,0 +1,85 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { dateRangePickerPropDefs } from './props-definition';
+import {
+  dateRangePickerUsageSnippet,
+  withLabelSnippet,
+  sizesSnippet,
+  withDefaultValueSnippet,
+  disabledSnippet,
+} from './snippets';
+import { WithLabel, Sizes, WithDefaultValue, Disabled } from './components';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { DateRangePickerDefinition } from '../../../utils/definitions';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ReactAriaLink } from '@/components/ReactAriaLink';
+
+export const reactAriaUrls = {
+  dateRangePicker: 'https://react-aria.adobe.com/DateRangePicker',
+};
+
+<PageTitle
+  title="DateRangePicker"
+  description="A date range picker that combines two date fields and a calendar popover for selecting a start and end date."
+/>
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<WithLabel />}
+  code={withLabelSnippet}
+/>
+
+## Usage
+
+<CodeBlock code={dateRangePickerUsageSnippet} />
+
+## API reference
+
+<PropsTable data={dateRangePickerPropDefs} />
+
+<ReactAriaLink
+  component="DateRangePicker"
+  href={reactAriaUrls.dateRangePicker}
+/>
+
+## Examples
+
+### Sizes
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<Sizes />}
+  code={sizesSnippet}
+  layout="side-by-side"
+/>
+
+### With default value
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<WithDefaultValue />}
+  code={withDefaultValueSnippet}
+  layout="side-by-side"
+/>
+
+### Disabled
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<Disabled />}
+  code={disabledSnippet}
+  layout="side-by-side"
+/>
+
+<Theming definition={DateRangePickerDefinition} />
+
+<ChangelogComponent component="date-range-picker" />

docs-ui/src/app/components/date-range-picker/props-definition.tsx

@@ -0,0 +1,103 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  type PropDef,
+} from '@/utils/propDefs';
+import { Chip } from '@/components/Chip';
+
+export const dateRangePickerPropDefs: Record<string, PropDef> = {
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'small',
+    responsive: true,
+    description: (
+      <>
+        Visual size of the picker. Use <Chip>small</Chip> for dense layouts,{' '}
+        <Chip>medium</Chip> for prominent fields.
+      </>
+    ),
+  },
+  label: {
+    type: 'string',
+    description: 'Visible label displayed above the picker.',
+  },
+  secondaryLabel: {
+    type: 'string',
+    description: (
+      <>
+        Secondary text shown next to the label. If not provided and isRequired
+        is true, displays <Chip>Required</Chip>.
+      </>
+    ),
+  },
+  description: {
+    type: 'string',
+    description: 'Help text displayed below the label.',
+  },
+  value: {
+    type: 'enum',
+    values: ['RangeValue<DateValue>'],
+    description: 'Controlled value of the date range.',
+  },
+  defaultValue: {
+    type: 'enum',
+    values: ['RangeValue<DateValue>'],
+    description: 'Default value for uncontrolled usage.',
+  },
+  onChange: {
+    type: 'enum',
+    values: ['(value: RangeValue<DateValue> | null) => void'],
+    description: 'Handler called when the selected range changes.',
+  },
+  granularity: {
+    type: 'enum',
+    values: ['day', 'hour', 'minute', 'second'],
+    default: 'day',
+    description:
+      'Smallest unit displayed. Defaults to "day" for dates and "minute" for times.',
+  },
+  minValue: {
+    type: 'enum',
+    values: ['DateValue'],
+    description: 'Minimum allowed date. Dates before this are disabled.',
+  },
+  maxValue: {
+    type: 'enum',
+    values: ['DateValue'],
+    description: 'Maximum allowed date. Dates after this are disabled.',
+  },
+  isDateUnavailable: {
+    type: 'enum',
+    values: ['(date: DateValue) => boolean'],
+    description:
+      'Callback invoked for each calendar date. Return true to mark a date as unavailable.',
+  },
+  allowsNonContiguousRanges: {
+    type: 'boolean',
+    description:
+      'When combined with isDateUnavailable, allows selecting ranges that contain unavailable dates.',
+  },
+  startName: {
+    type: 'string',
+    description: 'Form field name for the start date, submitted as ISO 8601.',
+  },
+  endName: {
+    type: 'string',
+    description: 'Form field name for the end date, submitted as ISO 8601.',
+  },
+  isRequired: {
+    type: 'boolean',
+    description: 'Whether the field is required for form submission.',
+  },
+  isDisabled: {
+    type: 'boolean',
+    description: 'Whether the picker is disabled.',
+  },
+  isReadOnly: {
+    type: 'boolean',
+    description: 'Whether the picker is read-only.',
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};

docs-ui/src/app/components/date-range-picker/snippets.ts

@@ -0,0 +1,28 @@
+export const dateRangePickerUsageSnippet = `import { DateRangePicker } from '@backstage/ui';
+
+<DateRangePicker label="Date range" />`;
+
+export const withLabelSnippet = `<DateRangePicker
+  label="Date range"
+  description="Select a start and end date for your event."
+/>`;
+
+export const sizesSnippet = `<Flex direction="column" gap="4">
+  <DateRangePicker label="Small" size="small" />
+  <DateRangePicker label="Medium" size="medium" />
+</Flex>`;
+
+export const withDefaultValueSnippet = `import { parseDate } from '@internationalized/date';
+
+<DateRangePicker
+  label="Booking period"
+  defaultValue={{
+    start: parseDate('2025-02-03'),
+    end: parseDate('2025-02-14'),
+  }}
+/>`;
+
+export const disabledSnippet = `<DateRangePicker
+  label="Date range"
+  isDisabled
+/>`;

docs-ui/src/utils/data.ts

@@ -53,6 +53,10 @@ export const components: Page[] = [
     title: 'Container',
     slug: 'container',
   },
+  {
+    title: 'DateRangePicker',
+    slug: 'date-range-picker',
+  },
   {
     title: 'Dialog',
     slug: 'dialog',