@atlaskit/datetime-picker 17.7.0 → 17.8.1

package/dist/esm/internal/get-placeholder.js

@@ -18,7 +18,7 @@
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 
-import { placeholderDatetime } from './index';
+import { placeholderDatetime } from './placeholder-date-time';
 export var getPlaceholder = function getPlaceholder(di) {
   var placeholder = di.placeholder,
     l10n = di.l10n;

package/dist/esm/internal/menu-top-layer.js

@@ -0,0 +1,107 @@
+/* menu-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useRef } from 'react';
+import { isValid, parseISO } from 'date-fns';
+import Calendar from '@atlaskit/calendar';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+var animation = slideAndFade();
+
+/**
+ * Bottom-start placement: calendar appears below and aligned to the
+ * start edge of the trigger (the select input).
+ */
+var popupPlacement = fromLegacyPlacement({
+  legacy: 'bottom-start'
+});
+
+/**
+ * @param isos A series of ISO dates.
+ * @returns The last valid date within the array of ISO strings.
+ */
+function getValidDate(isos) {
+  return isos.reduce(function (acc, iso) {
+    var date = parseISO(iso);
+    return isValid(date) ? {
+      day: date.getDate(),
+      month: date.getMonth() + 1,
+      year: date.getFullYear()
+    } : acc;
+  }, {});
+}
+
+/**
+ * Top-layer version of the date picker menu.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * calendar renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export var MenuTopLayer = function MenuTopLayer(_ref) {
+  var _selectProps$calendar, _selectProps$calendar2;
+  var selectProps = _ref.selectProps,
+    innerProps = _ref.innerProps;
+  var calendarValue = selectProps.calendarValue,
+    calendarView = selectProps.calendarView,
+    MenuInnerWrapper = selectProps.menuInnerWrapper;
+  var _getValidDate = getValidDate([calendarValue, calendarView]),
+    day = _getValidDate.day,
+    month = _getValidDate.month,
+    year = _getValidDate.year;
+
+  // The select's container element is the anchor for the popup.
+  var triggerRef = useRef((_selectProps$calendar = selectProps.calendarContainerRef) !== null && _selectProps$calendar !== void 0 ? _selectProps$calendar : null);
+  triggerRef.current = (_selectProps$calendar2 = selectProps.calendarContainerRef) !== null && _selectProps$calendar2 !== void 0 ? _selectProps$calendar2 : null;
+  var onMenuMouseDown = function onMenuMouseDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  var Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
+  return /*#__PURE__*/React.createElement(Popup.Content, {
+    role: "dialog",
+    label: "calendar",
+    isOpen: true
+    // `mode="manual"` opts out of native popover light-dismiss.
+    // react-select / DateTimePicker already own outside-click and
+    // Esc handling. Without this, the same click that opens the
+    // menu (which targets the select input outside the popover)
+    // also bubbles to the browser's auto-dismiss handler and
+    // immediately closes the popover.
+    ,
+    mode: "manual",
+    placement: popupPlacement,
+    triggerRef: triggerRef,
+    animate: animation,
+    testId: selectProps.testId && "".concat(selectProps.testId, "--popup")
+  }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    role: "presentation",
+    onMouseDown: onMenuMouseDown
+  }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+    day: day,
+    month: month,
+    year: year,
+    disabled: selectProps.calendarDisabled,
+    disabledDateFilter: selectProps.calendarDisabledDateFilter,
+    minDate: selectProps.calendarMinDate,
+    maxDate: selectProps.calendarMaxDate,
+    nextMonthLabel: selectProps.nextMonthLabel,
+    onChange: selectProps.onCalendarChange,
+    onSelect: selectProps.onCalendarSelect,
+    previousMonthLabel: selectProps.previousMonthLabel,
+    ref: selectProps.calendarRef,
+    selected: [selectProps.calendarValue],
+    shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
+    locale: selectProps.calendarLocale,
+    testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
+    weekStartDay: selectProps.calendarWeekStartDay
+  })))));
+};

package/dist/esm/internal/pad-two.js

@@ -0,0 +1,3 @@
+export function padToTwo(number) {
+  return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
+}

package/dist/esm/internal/parse-date.js

@@ -16,7 +16,7 @@
  * broken out to be it's own function.
  */
 
-import { defaultDateFormat } from './index';
+import { defaultDateFormat } from './default-date-format';
 
 /**
  * There are two props that can change how the date is parsed.

package/dist/esm/internal/placeholder-date-time.js

@@ -0,0 +1,3 @@
+// This date was chosen to clearly show date and time formats (day > 12)
+// e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
+export var placeholderDatetime = new Date(1993, 1, 18, 13);

package/dist/types/components/date-time-picker-class.d.ts

@@ -11,8 +11,6 @@ interface State {
     value: string;
     zoneValue: string;
 }
-export declare const datePickerDefaultAriaLabel = "Date";
-export declare const timePickerDefaultAriaLabel = "Time";
 declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
     static defaultProps: DateTimePickerBaseProps;
     state: State;

package/dist/types/components/date-time-picker-fc.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import { type DateTimePickerBaseProps } from '../types';
-export declare const datePickerDefaultAriaLabel = "Date";
-export declare const timePickerDefaultAriaLabel = "Time";
 /**
  * __Date time picker__
  *

package/dist/types/entry-points/date-picker.d.ts

@@ -0,0 +1,2 @@
+export type { DatePickerProps } from '../components/date-picker';
+export { default } from '../components/date-picker';

package/dist/types/entry-points/date-time-picker.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/date-time-picker';

package/dist/types/entry-points/time-picker.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/time-picker';

package/dist/types/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { Appearance, DatePickerBaseProps, DateTimePickerBaseProps, DateTimePickerSelectProps, Spacing, TimePickerBaseProps, } from '../types';

package/dist/types/internal/default-date-format.d.ts

@@ -0,0 +1 @@
+export declare const defaultDateFormat = "YYYY/MM/DD";

package/dist/types/internal/default-times.d.ts

@@ -0,0 +1 @@
+export declare const defaultTimes: string[];

package/dist/types/internal/empty-component.d.ts

@@ -0,0 +1,4 @@
+/**
+ * This component is used to hide portions of Select component.
+ */
+export declare const EmptyComponent: () => null;

package/dist/types/internal/fixed-layer-menu-top-layer.d.ts

@@ -0,0 +1,12 @@
+import { type MenuProps, type OptionType } from '@atlaskit/select';
+/**
+ * Top-layer version of the fixed layer menu used in the time picker.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * time options list renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare const FixedLayerMenuTopLayer: ({ className, clearValue, cx, getStyles, getValue, hasValue, innerProps, innerRef, isLoading, isMulti, isRtl, maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, options, placement, selectOption, selectProps, setValue, children, ...rest }: MenuProps<OptionType>) => JSX.Element;

package/dist/types/internal/format-date-time-zone-into-iso.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Formats a date, time, and zone into a ISO string.
+ */
+export declare function formatDateTimeZoneIntoIso(date: string, time: string, zone: string): string;

package/dist/types/internal/menu-top-layer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MenuProps, type OptionType } from '@atlaskit/select';
+/**
+ * Top-layer version of the date picker menu.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * calendar renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare const MenuTopLayer: ({ selectProps, innerProps }: MenuProps<OptionType>) => JSX.Element;

package/dist/types/internal/pad-two.d.ts

@@ -0,0 +1 @@
+export declare function padToTwo(number: number): string;

package/dist/types/internal/placeholder-date-time.d.ts

@@ -0,0 +1 @@
+export declare const placeholderDatetime: Date;

package/dist/types-ts4.5/components/date-time-picker-class.d.ts

@@ -11,8 +11,6 @@ interface State {
     value: string;
     zoneValue: string;
 }
-export declare const datePickerDefaultAriaLabel = "Date";
-export declare const timePickerDefaultAriaLabel = "Time";
 declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
     static defaultProps: DateTimePickerBaseProps;
     state: State;

package/dist/types-ts4.5/components/date-time-picker-fc.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import { type DateTimePickerBaseProps } from '../types';
-export declare const datePickerDefaultAriaLabel = "Date";
-export declare const timePickerDefaultAriaLabel = "Time";
 /**
  * __Date time picker__
  *

package/dist/types-ts4.5/entry-points/date-picker.d.ts

@@ -0,0 +1,2 @@
+export type { DatePickerProps } from '../components/date-picker';
+export { default } from '../components/date-picker';

package/dist/types-ts4.5/entry-points/date-time-picker.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/date-time-picker';

package/dist/types-ts4.5/entry-points/time-picker.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/time-picker';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { Appearance, DatePickerBaseProps, DateTimePickerBaseProps, DateTimePickerSelectProps, Spacing, TimePickerBaseProps, } from '../types';

package/dist/types-ts4.5/internal/default-date-format.d.ts

@@ -0,0 +1 @@
+export declare const defaultDateFormat = "YYYY/MM/DD";

package/dist/types-ts4.5/internal/default-times.d.ts

@@ -0,0 +1 @@
+export declare const defaultTimes: string[];

package/dist/types-ts4.5/internal/empty-component.d.ts

@@ -0,0 +1,4 @@
+/**
+ * This component is used to hide portions of Select component.
+ */
+export declare const EmptyComponent: () => null;

package/dist/types-ts4.5/internal/fixed-layer-menu-top-layer.d.ts

@@ -0,0 +1,12 @@
+import { type MenuProps, type OptionType } from '@atlaskit/select';
+/**
+ * Top-layer version of the fixed layer menu used in the time picker.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * time options list renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare const FixedLayerMenuTopLayer: ({ className, clearValue, cx, getStyles, getValue, hasValue, innerProps, innerRef, isLoading, isMulti, isRtl, maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, options, placement, selectOption, selectProps, setValue, children, ...rest }: MenuProps<OptionType>) => JSX.Element;

package/dist/types-ts4.5/internal/format-date-time-zone-into-iso.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Formats a date, time, and zone into a ISO string.
+ */
+export declare function formatDateTimeZoneIntoIso(date: string, time: string, zone: string): string;

package/dist/types-ts4.5/internal/menu-top-layer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MenuProps, type OptionType } from '@atlaskit/select';
+/**
+ * Top-layer version of the date picker menu.
+ *
+ * Uses `@atlaskit/top-layer/popup` (Popup.Content + Popup.Surface) so the
+ * calendar renders in the browser's top layer via the native Popover API
+ * and is positioned via CSS Anchor Positioning. This avoids overflow clipping,
+ * z-index wars, and portal-based layering.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export declare const MenuTopLayer: ({ selectProps, innerProps }: MenuProps<OptionType>) => JSX.Element;

package/dist/types-ts4.5/internal/pad-two.d.ts

@@ -0,0 +1 @@
+export declare function padToTwo(number: number): string;

package/dist/types-ts4.5/internal/placeholder-date-time.d.ts

@@ -0,0 +1 @@
+export declare const placeholderDatetime: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "17.7.0",
+	"version": "17.8.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,14 +44,15 @@
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.2.0",
+		"@atlaskit/icon": "^34.5.0",
 		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/locale": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/select": "^21.10.0",
+		"@atlaskit/select": "^21.11.0",
 		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/top-layer": "^0.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"date-fns": "^2.17.0"
@@ -63,19 +64,19 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/code": "^17.4.0",
+		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^14.17.0",
-		"@atlaskit/popup": "^4.16.0",
-		"@atlaskit/range": "^10.0.0",
+		"@atlaskit/modal-dialog": "^15.0.0",
+		"@atlaskit/popup": "^4.18.0",
+		"@atlaskit/range": "^10.1.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/toggle": "^15.6.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
@@ -118,6 +119,9 @@
 		"dst-date-time-picker-use-functional-component": {
 			"type": "boolean"
 		},
+		"platform-dst-top-layer": {
+			"type": "boolean"
+		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},

package/time-picker/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/datetime-picker/time-picker",
+  "main": "../dist/cjs/entry-points/time-picker.js",
+  "module": "../dist/esm/entry-points/time-picker.js",
+  "module:es2019": "../dist/es2019/entry-points/time-picker.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/time-picker.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/time-picker.d.ts"
+      ]
+    }
+  }
+}

package/types/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@atlaskit/datetime-picker/types",
-  "main": "../dist/cjs/types.js",
-  "module": "../dist/esm/types.js",
-  "module:es2019": "../dist/es2019/types.js",
+  "main": "../dist/cjs/entry-points/types.js",
+  "module": "../dist/esm/entry-points/types.js",
+  "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/types.d.ts",
+  "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.9": {
       "*": [
-        "../dist/types-ts4.5/types.d.ts"
+        "../dist/types-ts4.5/entry-points/types.d.ts"
       ]
     }
   }

package/dist/cjs/internal/index.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultTimes = exports.defaultTimeFormat = exports.defaultDateFormat = exports.EmptyComponent = void 0;
-exports.formatDateTimeZoneIntoIso = formatDateTimeZoneIntoIso;
-exports.padToTwo = padToTwo;
-exports.placeholderDatetime = void 0;
-/**
- * This component is used to hide portions of Select component.
- */
-var EmptyComponent = exports.EmptyComponent = function EmptyComponent() {
-  return null;
-};
-
-// This date was chosen to clearly show date and time formats (day > 12)
-// e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
-var placeholderDatetime = exports.placeholderDatetime = new Date(1993, 1, 18, 13);
-var defaultTimes = exports.defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];
-var defaultTimeFormat = exports.defaultTimeFormat = 'h:mma';
-var defaultDateFormat = exports.defaultDateFormat = 'YYYY/MM/DD';
-function padToTwo(number) {
-  return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
-}
-function formatDateTimeZoneIntoIso(date, time, zone) {
-  // 12:00 => 12:00, 1:00 => 01:00
-  var needsLeadingZero = /^\d:/;
-  var sanitizedTime = needsLeadingZero.test(time) ? "0".concat(time) : time;
-  return "".concat(date, "T").concat(sanitizedTime).concat(zone);
-}

package/dist/es2019/internal/index.js

@@ -1,20 +0,0 @@
-/**
- * This component is used to hide portions of Select component.
- */
-export const EmptyComponent = () => null;
-
-// This date was chosen to clearly show date and time formats (day > 12)
-// e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
-export const placeholderDatetime = new Date(1993, 1, 18, 13);
-export const defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];
-export const defaultTimeFormat = 'h:mma';
-export const defaultDateFormat = 'YYYY/MM/DD';
-export function padToTwo(number) {
-  return number <= 99 ? `0${number}`.slice(-2) : `${number}`;
-}
-export function formatDateTimeZoneIntoIso(date, time, zone) {
-  // 12:00 => 12:00, 1:00 => 01:00
-  const needsLeadingZero = /^\d:/;
-  const sanitizedTime = needsLeadingZero.test(time) ? `0${time}` : time;
-  return `${date}T${sanitizedTime}${zone}`;
-}

package/dist/esm/internal/index.js

@@ -1,22 +0,0 @@
-/**
- * This component is used to hide portions of Select component.
- */
-export var EmptyComponent = function EmptyComponent() {
-  return null;
-};
-
-// This date was chosen to clearly show date and time formats (day > 12)
-// e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
-export var placeholderDatetime = new Date(1993, 1, 18, 13);
-export var defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];
-export var defaultTimeFormat = 'h:mma';
-export var defaultDateFormat = 'YYYY/MM/DD';
-export function padToTwo(number) {
-  return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
-}
-export function formatDateTimeZoneIntoIso(date, time, zone) {
-  // 12:00 => 12:00, 1:00 => 01:00
-  var needsLeadingZero = /^\d:/;
-  var sanitizedTime = needsLeadingZero.test(time) ? "0".concat(time) : time;
-  return "".concat(date, "T").concat(sanitizedTime).concat(zone);
-}

package/dist/types/internal/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * This component is used to hide portions of Select component.
- */
-export declare const EmptyComponent: () => null;
-export declare const placeholderDatetime: Date;
-export declare const defaultTimes: string[];
-export declare const defaultTimeFormat = "h:mma";
-export declare const defaultDateFormat = "YYYY/MM/DD";
-export declare function padToTwo(number: number): string;
-export declare function formatDateTimeZoneIntoIso(date: string, time: string, zone: string): string;

package/dist/types-ts4.5/internal/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * This component is used to hide portions of Select component.
- */
-export declare const EmptyComponent: () => null;
-export declare const placeholderDatetime: Date;
-export declare const defaultTimes: string[];
-export declare const defaultTimeFormat = "h:mma";
-export declare const defaultDateFormat = "YYYY/MM/DD";
-export declare function padToTwo(number: number): string;
-export declare function formatDateTimeZoneIntoIso(date: string, time: string, zone: string): string;

package/offerings.json

@@ -1,98 +0,0 @@
-[
-	{
-		"name": "DatePicker",
-		"package": "@atlaskit/datetime-picker",
-		"import": {
-			"name": "DatePicker",
-			"package": "@atlaskit/datetime-picker",
-			"type": "named"
-		},
-		"keywords": ["date", "picker", "calendar", "selection", "form"],
-		"categories": ["form"],
-		"shortDescription": "A component for selecting date values with calendar support.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure proper keyboard navigation",
-			"Use appropriate date formats",
-			"Provide clear date labels",
-			"Consider screen reader announcements"
-		],
-		"usageGuidelines": [
-			"Use for date selection only",
-			"Provide clear date formats",
-			"Handle date validation appropriately",
-			"Consider calendar button visibility"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive labels",
-			"Provide helpful placeholder text",
-			"Use appropriate date formats",
-			"Keep labels concise but descriptive"
-		],
-		"examples": ["./examples/ai/date-picker.tsx"]
-	},
-	{
-		"name": "TimePicker",
-		"package": "@atlaskit/datetime-picker",
-		"import": {
-			"name": "TimePicker",
-			"package": "@atlaskit/datetime-picker",
-			"type": "named"
-		},
-		"keywords": ["time", "picker", "clock", "selection", "form"],
-		"categories": ["form"],
-		"shortDescription": "A component for selecting time values with clock interface.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure proper keyboard navigation",
-			"Use appropriate time formats",
-			"Provide clear time labels",
-			"Consider screen reader announcements"
-		],
-		"usageGuidelines": [
-			"Use for time selection only",
-			"Provide clear time formats",
-			"Handle time validation appropriately",
-			"Consider editable time input"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive labels",
-			"Provide helpful placeholder text",
-			"Use appropriate time formats",
-			"Keep labels concise but descriptive"
-		],
-		"examples": ["./examples/ai/time-picker.tsx"]
-	},
-	{
-		"name": "DateTimePicker",
-		"package": "@atlaskit/datetime-picker",
-		"import": {
-			"name": "DateTimePicker",
-			"package": "@atlaskit/datetime-picker",
-			"type": "named"
-		},
-		"keywords": ["datetime", "picker", "date", "time", "calendar"],
-		"categories": ["form"],
-		"shortDescription": "A component for selecting both date and time values.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure proper keyboard navigation",
-			"Use appropriate date/time formats",
-			"Provide clear date/time labels",
-			"Consider screen reader announcements"
-		],
-		"usageGuidelines": [
-			"Use for combined date and time selection",
-			"Provide clear date/time formats",
-			"Handle timezone considerations",
-			"Consider validation requirements"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive labels",
-			"Provide helpful placeholder text",
-			"Use appropriate date/time formats",
-			"Keep labels concise but descriptive"
-		],
-		"examples": ["./examples/ai/datetime-picker.tsx"]
-	}
-]