@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/other/Calendar/Calendar.js

@@ -0,0 +1,72 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _Title } from "../../content/Title.js";
+import { useProviderProps } from "../../../provider.js";
+import { Space } from "../../layout/Space.js";
+import { LeftIcon } from "../../../icons/LeftIcon.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
+import { Button } from "../../actions/index.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCalendar, useLocale } from "react-aria";
+import { createDOMRef } from "@react-spectrum/utils";
+import { useCalendarState } from "react-stately";
+import { createCalendar } from "@internationalized/date";
+
+//#region src/components/other/Calendar/Calendar.tsx
+const CalendarElement = tasty({ styles: {
+	padding: "1x",
+	gap: "1x"
+} });
+const CalendarHeaderElement = tasty({ styles: {
+	display: "flex",
+	placeContent: "center space-between",
+	placeItems: "center",
+	gap: "1.5x"
+} });
+function Calendar(props, ref) {
+	props = useProviderProps(props);
+	let { locale } = useLocale();
+	let state = useCalendarState({
+		...props,
+		locale,
+		createCalendar
+	});
+	let domRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		...createDOMRef(domRef),
+		focus() {
+			state.setFocused(true);
+		}
+	}));
+	let { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
+	return /* @__PURE__ */ jsxs(CalendarElement, {
+		...calendarProps,
+		children: [/* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(_Title, {
+			level: 6,
+			preset: "h6",
+			children: title
+		}), /* @__PURE__ */ jsxs(Space, {
+			gap: ".5x",
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				...prevButtonProps,
+				icon: /* @__PURE__ */ jsx(LeftIcon, {})
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "xsmall",
+				...nextButtonProps,
+				icon: /* @__PURE__ */ jsx(RightIcon, {})
+			})]
+		})] }), /* @__PURE__ */ jsx(CalendarGrid, {
+			state,
+			selectedRange: props.selectedRange
+		})]
+	});
+}
+const _Calendar = forwardRef(Calendar);
+_Calendar.displayName = "Calendar";
+
+//#endregion
+export { _Calendar };
+//# sourceMappingURL=Calendar.js.map

package/dist/components/other/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/Calendar.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaCalendarProps,\n  DateValue,\n  useCalendar,\n  useLocale,\n} from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { tasty } from '../../../tasty';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarGrid } from './CalendarGrid';\n\nconst CalendarElement = tasty({\n  styles: {\n    padding: '1x',\n    gap: '1x',\n  },\n});\n\nconst CalendarHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\nexport interface CubeCalendarProps extends AriaCalendarProps<DateValue> {\n  selectedRange?: {\n    start: DateValue;\n    end: DateValue;\n  };\n}\n\nfunction Calendar(props: CubeCalendarProps, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(\n    props,\n    state,\n  );\n\n  return (\n    <CalendarElement {...calendarProps}>\n      <CalendarHeaderElement>\n        <Title level={6} preset=\"h6\">\n          {title}\n        </Title>\n        <Space gap=\".5x\">\n          <Button size=\"xsmall\" {...prevButtonProps} icon={<LeftIcon />} />\n          <Button size=\"xsmall\" {...nextButtonProps} icon={<RightIcon />} />\n        </Space>\n      </CalendarHeaderElement>\n      <CalendarGrid state={state} selectedRange={props.selectedRange} />\n    </CalendarElement>\n  );\n}\n\nconst _Calendar = forwardRef(Calendar);\n\n_Calendar.displayName = 'Calendar';\n\nexport { _Calendar as Calendar };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,SAAS;CACT,cAAc;CACd,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AASF,SAAS,SAAS,OAA0B,KAAgC;AAC1E,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,iBAAiB;EAC3B,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UAAU,YAC/D,OACA,MACD;AAED,QACE,qBAAC;EAAgB,GAAI;aACnB,qBAAC,oCACC,oBAACA;GAAM,OAAO;GAAG,QAAO;aACrB;IACK,EACR,qBAAC;GAAM,KAAI;cACT,oBAAC;IAAO,MAAK;IAAS,GAAI;IAAiB,MAAM,oBAAC,aAAW;KAAI,EACjE,oBAAC;IAAO,MAAK;IAAS,GAAI;IAAiB,MAAM,oBAAC,cAAY;KAAI;IAC5D,IACc,EACxB,oBAAC;GAAoB;GAAO,eAAe,MAAM;IAAiB;GAClD;;AAItB,MAAM,YAAY,WAAW,SAAS;AAEtC,UAAU,cAAc"}

package/dist/components/other/Calendar/CalendarCell.js

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCalendarCell } from "react-aria";
+
+//#region src/components/other/Calendar/CalendarCell.tsx
+const CalendarCellElement = tasty({
+	as: "td",
+	styles: {
+		preset: "t3m",
+		margin: 0,
+		padding: "2bw right bottom"
+	}
+});
+const CalendarButtonElement = tasty({ styles: {
+	display: "grid",
+	placeItems: "center",
+	width: "3x",
+	height: "3x",
+	fill: {
+		"": "#primary.0",
+		":hover": "#primary.16",
+		pressed: "#primary.10",
+		selected: "#primary",
+		"selected & :hover": "#primary-text",
+		"selected & pressed": "#primary",
+		"disabled | unavailable": "#primary.0"
+	},
+	color: {
+		"": "#dark",
+		selected: "#white",
+		"disabled | unavailable": "#dark.30"
+	},
+	outline: {
+		"": "1bw #primary-text.0",
+		focused: "1bw #primary-text"
+	},
+	outlineOffset: .5,
+	radius: true,
+	cursor: "$pointer"
+} });
+function CalendarCell({ state, selectedRange, date }) {
+	let ref = useRef(null);
+	let { cellProps, buttonProps, isSelected, isPressed, isFocused, isInvalid, isOutsideVisibleRange, isDisabled, isUnavailable, formattedDate } = useCalendarCell({ date }, state, ref);
+	const isFinalSelected = selectedRange ? date.compare(selectedRange.start) >= 0 && date.compare(selectedRange.end) <= 0 : isSelected;
+	return /* @__PURE__ */ jsx(CalendarCellElement, {
+		...cellProps,
+		children: /* @__PURE__ */ jsx(CalendarButtonElement, {
+			...buttonProps,
+			ref,
+			hidden: isOutsideVisibleRange,
+			mods: {
+				selected: isFinalSelected,
+				pressed: isPressed,
+				focused: isFocused,
+				invalid: isInvalid,
+				disabled: isDisabled,
+				unavailable: isUnavailable
+			},
+			children: formattedDate
+		})
+	});
+}
+
+//#endregion
+export { CalendarCell };
+//# sourceMappingURL=CalendarCell.js.map

package/dist/components/other/Calendar/CalendarCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCell.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarCell.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\n\nimport { tasty } from '../../../tasty';\n\nconst CalendarCellElement = tasty({\n  as: 'td',\n  styles: {\n    preset: 't3m',\n    margin: 0,\n    padding: '2bw right bottom',\n  },\n});\n\nconst CalendarButtonElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    width: '3x',\n    height: '3x',\n    fill: {\n      '': '#primary.0',\n      ':hover': '#primary.16',\n      pressed: '#primary.10',\n\n      selected: '#primary',\n      'selected & :hover': '#primary-text',\n      'selected & pressed': '#primary',\n\n      'disabled | unavailable': '#primary.0',\n    },\n    color: {\n      '': '#dark',\n      selected: '#white',\n      'disabled | unavailable': '#dark.30',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 0.5,\n    radius: true,\n    cursor: '$pointer',\n  },\n});\n\nexport function CalendarCell({ state, selectedRange, date }) {\n  let ref = useRef(null);\n  let {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isPressed,\n    isFocused,\n    isInvalid,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    formattedDate,\n  } = useCalendarCell({ date }, state, ref);\n\n  const isFinalSelected = selectedRange\n    ? date.compare(selectedRange.start) >= 0 &&\n      date.compare(selectedRange.end) <= 0\n    : isSelected;\n\n  return (\n    <CalendarCellElement {...cellProps}>\n      <CalendarButtonElement\n        {...buttonProps}\n        ref={ref}\n        hidden={isOutsideVisibleRange}\n        mods={{\n          selected: isFinalSelected,\n          pressed: isPressed,\n          focused: isFocused,\n          invalid: isInvalid,\n          disabled: isDisabled,\n          unavailable: isUnavailable,\n        }}\n      >\n        {formattedDate}\n      </CalendarButtonElement>\n    </CalendarCellElement>\n  );\n}\n"],"mappings":";;;;;;;AAKA,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,SAAS;CACT,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,MAAM;EACJ,IAAI;EACJ,UAAU;EACV,SAAS;EAET,UAAU;EACV,qBAAqB;EACrB,sBAAsB;EAEtB,0BAA0B;EAC3B;CACD,OAAO;EACL,IAAI;EACJ,UAAU;EACV,0BAA0B;EAC3B;CACD,SAAS;EACP,IAAI;EACJ,SAAS;EACV;CACD,eAAe;CACf,QAAQ;CACR,QAAQ;CACT,EACF,CAAC;AAEF,SAAgB,aAAa,EAAE,OAAO,eAAe,QAAQ;CAC3D,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EACF,WACA,aACA,YACA,WACA,WACA,WACA,uBACA,YACA,eACA,kBACE,gBAAgB,EAAE,MAAM,EAAE,OAAO,IAAI;CAEzC,MAAM,kBAAkB,gBACpB,KAAK,QAAQ,cAAc,MAAM,IAAI,KACrC,KAAK,QAAQ,cAAc,IAAI,IAAI,IACnC;AAEJ,QACE,oBAAC;EAAoB,GAAI;YACvB,oBAAC;GACC,GAAI;GACC;GACL,QAAQ;GACR,MAAM;IACJ,UAAU;IACV,SAAS;IACT,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACd;aAEA;IACqB;GACJ"}

package/dist/components/other/Calendar/CalendarGrid.js

@@ -0,0 +1,45 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { CalendarCell } from "./CalendarCell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCalendarGrid, useLocale } from "react-aria";
+import { getWeeksInMonth } from "@internationalized/date";
+
+//#region src/components/other/Calendar/CalendarGrid.tsx
+const TableElement = tasty({
+	as: "table",
+	styles: {
+		borderCollapse: "collapse",
+		HeadRow: { color: "#dark-04" }
+	}
+});
+function CalendarGrid({ state, ...props }) {
+	let { locale } = useLocale();
+	let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
+	let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+	return /* @__PURE__ */ jsxs(TableElement, {
+		...gridProps,
+		children: [/* @__PURE__ */ jsx("thead", {
+			"data-element": "Head",
+			...headerProps,
+			children: /* @__PURE__ */ jsx("tr", {
+				"data-element": "HeadRow",
+				children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { children: day }, index))
+			})
+		}), /* @__PURE__ */ jsx("tbody", {
+			"data-element": "Body",
+			children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", {
+				"data-element": "Row",
+				children: state.getDatesInWeek(weekIndex).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
+					state,
+					date,
+					selectedRange: props.selectedRange
+				}, i) : /* @__PURE__ */ jsx("td", {}, i))
+			}, weekIndex))
+		})]
+	});
+}
+
+//#endregion
+export { CalendarGrid };
+//# sourceMappingURL=CalendarGrid.js.map

package/dist/components/other/Calendar/CalendarGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarGrid.tsx"],"sourcesContent":["import { getWeeksInMonth } from '@internationalized/date';\nimport { useCalendarGrid, useLocale } from 'react-aria';\n\nimport { tasty } from '../../../tasty';\n\nimport { CalendarCell } from './CalendarCell';\n\nconst TableElement = tasty({\n  as: 'table',\n  styles: {\n    borderCollapse: 'collapse',\n\n    HeadRow: {\n      color: '#dark-04',\n    },\n  },\n});\n\nexport function CalendarGrid({ state, ...props }) {\n  let { locale } = useLocale();\n  let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n  // Get the number of weeks in the month, so we can render the proper number of rows.\n  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n\n  return (\n    <TableElement {...gridProps}>\n      <thead data-element=\"Head\" {...headerProps}>\n        <tr data-element=\"HeadRow\">\n          {weekDays.map((day, index) => (\n            <th key={index}>{day}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody data-element=\"Body\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n          <tr key={weekIndex} data-element=\"Row\">\n            {state\n              .getDatesInWeek(weekIndex)\n              .map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    selectedRange={props.selectedRange}\n                  />\n                ) : (\n                  <td key={i} />\n                ),\n              )}\n          </tr>\n        ))}\n      </tbody>\n    </TableElement>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,gBAAgB;EAEhB,SAAS,EACP,OAAO,YACR;EACF;CACF,CAAC;AAEF,SAAgB,aAAa,EAAE,OAAO,GAAG,SAAS;CAChD,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,EAAE,WAAW,aAAa,aAAa,gBAAgB,OAAO,MAAM;CAGxE,IAAI,eAAe,gBAAgB,MAAM,aAAa,OAAO,OAAO;AAEpE,QACE,qBAAC;EAAa,GAAI;aAChB,oBAAC;GAAM,gBAAa;GAAO,GAAI;aAC7B,oBAAC;IAAG,gBAAa;cACd,SAAS,KAAK,KAAK,UAClB,oBAAC,kBAAgB,OAAR,MAAiB,CAC1B;KACC;IACC,EACR,oBAAC;GAAM,gBAAa;aACjB,CAAC,GAAG,IAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,cACxC,oBAAC;IAAmB,gBAAa;cAC9B,MACE,eAAe,UAAU,CACzB,KAAK,MAAM,MACV,OACE,oBAAC;KAEQ;KACD;KACN,eAAe,MAAM;OAHhB,EAIL,GAEF,oBAAC,UAAQ,EAAK,CAEjB;MAdI,UAeJ,CACL;IACI;GACK"}

package/dist/components/other/Calendar/RangeCalendar.js

@@ -0,0 +1,70 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _Title } from "../../content/Title.js";
+import { useProviderProps } from "../../../provider.js";
+import { Space } from "../../layout/Space.js";
+import { LeftIcon } from "../../../icons/LeftIcon.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
+import { Button } from "../../actions/index.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocale, useRangeCalendar } from "react-aria";
+import { createDOMRef } from "@react-spectrum/utils";
+import { useRangeCalendarState } from "react-stately";
+import { createCalendar } from "@internationalized/date";
+
+//#region src/components/other/Calendar/RangeCalendar.tsx
+const CalendarElement = tasty({ styles: {
+	padding: "1x",
+	gap: "1x"
+} });
+const CalendarHeaderElement = tasty({ styles: {
+	display: "flex",
+	placeContent: "center space-between",
+	placeItems: "center",
+	gap: "1.5x"
+} });
+function RangeCalendar(props, ref) {
+	props = useProviderProps(props);
+	let { locale } = useLocale();
+	let state = useRangeCalendarState({
+		...props,
+		locale,
+		createCalendar
+	});
+	let domRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		...createDOMRef(domRef),
+		focus() {
+			state.setFocused(true);
+		}
+	}));
+	let { calendarProps, prevButtonProps, nextButtonProps, title } = useRangeCalendar(props, state, domRef);
+	return /* @__PURE__ */ jsxs(CalendarElement, {
+		ref: domRef,
+		...calendarProps,
+		children: [/* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(_Title, {
+			level: 6,
+			preset: "h6",
+			children: title
+		}), /* @__PURE__ */ jsxs(Space, {
+			gap: ".5x",
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "small",
+				...prevButtonProps,
+				icon: /* @__PURE__ */ jsx(LeftIcon, {})
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "small",
+				...nextButtonProps,
+				icon: /* @__PURE__ */ jsx(RightIcon, {})
+			})]
+		})] }), /* @__PURE__ */ jsx(CalendarGrid, { state })]
+	});
+}
+const _RangeCalendar = forwardRef(RangeCalendar);
+_RangeCalendar.displayName = "RangeCalendar";
+
+//#endregion
+export { _RangeCalendar };
+//# sourceMappingURL=RangeCalendar.js.map

package/dist/components/other/Calendar/RangeCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/RangeCalendar.tsx"],"sourcesContent":["import { createCalendar } from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaRangeCalendarProps,\n  DateValue,\n  useLocale,\n  useRangeCalendar,\n} from 'react-aria';\nimport { useRangeCalendarState } from 'react-stately';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { tasty } from '../../../tasty';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarGrid } from './CalendarGrid';\n\nconst CalendarElement = tasty({\n  styles: {\n    padding: '1x',\n    gap: '1x',\n  },\n});\n\nconst CalendarHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\nfunction RangeCalendar<T extends DateValue>(\n  props: AriaRangeCalendarProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useRangeCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } =\n    useRangeCalendar(props, state, domRef);\n\n  return (\n    <CalendarElement ref={domRef} {...calendarProps}>\n      <CalendarHeaderElement>\n        <Title level={6} preset=\"h6\">\n          {title}\n        </Title>\n        <Space gap=\".5x\">\n          <Button size=\"small\" {...prevButtonProps} icon={<LeftIcon />} />\n          <Button size=\"small\" {...nextButtonProps} icon={<RightIcon />} />\n        </Space>\n      </CalendarHeaderElement>\n      <CalendarGrid state={state} />\n    </CalendarElement>\n  );\n}\n\nconst _RangeCalendar = forwardRef(RangeCalendar);\n\n_RangeCalendar.displayName = 'RangeCalendar';\n\nexport { _RangeCalendar as RangeCalendar };\n\nexport type { AriaRangeCalendarProps as CubeRangeCalendarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,SAAS;CACT,cAAc;CACd,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,SAAS,cACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,sBAAsB;EAChC,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UACrD,iBAAiB,OAAO,OAAO,OAAO;AAExC,QACE,qBAAC;EAAgB,KAAK;EAAQ,GAAI;aAChC,qBAAC,oCACC,oBAACA;GAAM,OAAO;GAAG,QAAO;aACrB;IACK,EACR,qBAAC;GAAM,KAAI;cACT,oBAAC;IAAO,MAAK;IAAQ,GAAI;IAAiB,MAAM,oBAAC,aAAW;KAAI,EAChE,oBAAC;IAAO,MAAK;IAAQ,GAAI;IAAiB,MAAM,oBAAC,cAAY;KAAI;IAC3D,IACc,EACxB,oBAAC,gBAAoB,QAAS;GACd;;AAItB,MAAM,iBAAiB,WAAW,cAAc;AAEhD,eAAe,cAAc"}

package/dist/components/other/CloudLogo/CloudLogo.d.ts

@@ -0,0 +1,11 @@
+
+import { CubeButtonProps } from "../../actions/Button/Button.js";
+import "../../actions/index.js";
+import * as react from "react";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/other/CloudLogo/CloudLogo.d.ts
+declare const _CloudLogo: react.ForwardRefExoticComponent<Omit<CubeButtonProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
+//#endregion
+export { _CloudLogo };
+//# sourceMappingURL=CloudLogo.d.ts.map

package/dist/components/other/CloudLogo/CloudLogo.js

@@ -0,0 +1,110 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { Button } from "../../actions/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/other/CloudLogo/CloudLogo.tsx
+const StyledLogoButton = tasty(Button, {
+	qa: "HeaderCubeCloudLogo",
+	"aria-label": "Logo",
+	type: "clear",
+	styles: {
+		padding: 0,
+		gap: 0,
+		fill: "#clear",
+		border: 0,
+		radius: 0,
+		width: "auto",
+		height: "auto"
+	}
+});
+function CloudLogo(props, ref) {
+	return /* @__PURE__ */ jsxs(StyledLogoButton, {
+		...props,
+		ref,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "25",
+			height: "36",
+			viewBox: "0 0 25 27",
+			"data-type": "image",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					fill: "#ff6492",
+					d: "M23.447 6.786 11.727 0v4.696l11.72 6.757V6.786Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "#141446",
+					d: "M23.447 11.453 19.931 13.5l-8.206-4.743-4.689 2.7L3.52 9.559l8.207-4.863 11.72 6.757Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "#a14474",
+					d: "M7.036 11.457 3.52 9.559v3.94l3.516-2.042Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "#141446",
+					d: "M.003 20.213 11.725 13.5l11.722 6.713L11.725 27 .003 20.213Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "#ff6492",
+					d: "m23.447 15.554-11.722-6.87V13.5l11.722 6.713v-4.659Z"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					fill: "#7a77ff",
+					d: "M3.52 13.5V9.56l8.207-4.864V0L.003 6.786v13.427L11.725 13.5V8.684L3.52 13.5Z"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("svg", {
+			width: "141",
+			height: "27",
+			viewBox: "0 0 141 27",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					d: "M12.7556 21.4555C15.323 21.4555 17.3322 20.1868 18.5322 18.2414L16.4671 16.6344C15.5462 17.9031 14.4021 18.7207 12.7835 18.7207C10.272 18.7207 8.48596 16.7753 8.48596 14.2097C8.48596 11.7005 10.272 9.72693 12.7835 9.72693C14.43 9.72693 15.5741 10.5727 16.4671 11.8414L18.5322 10.2062C17.3601 8.26086 15.3509 6.99214 12.7556 6.99214C8.70921 6.99214 5.5 10.1498 5.5 14.2097C5.5 18.2978 8.70921 21.4555 12.7556 21.4555Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M27.0647 21.4555C30.4135 21.4555 33.0088 19.0872 33.0088 15.3375V7.30227H30.0786V15.563C30.0786 17.5084 28.7391 18.7207 27.0647 18.7207C25.3346 18.7207 23.9672 17.5084 23.9672 15.563V7.30227H21.0649V15.3375C21.0649 19.0872 23.6602 21.4555 27.0647 21.4555Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M44.0683 6.99214C42.1707 6.99214 40.5243 7.72518 39.4917 8.99389V0.00012207H36.5616V21.1454H39.2964V19.2282C40.3289 20.6379 42.087 21.4555 44.0963 21.4555C47.9752 21.4555 50.7937 18.3542 50.7937 14.2379C50.7937 10.1216 47.9752 6.99214 44.0683 6.99214ZM43.5939 18.7489C41.5568 18.7489 39.4638 17.3956 39.4638 14.2379C39.4638 11.1084 41.5289 9.69873 43.5939 9.69873C45.9381 9.69873 47.7799 11.5313 47.7799 14.2097C47.7799 16.8881 45.966 18.7489 43.5939 18.7489Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M66.1661 13.3357C66.1661 9.69873 63.4871 6.99214 59.8314 6.99214C55.8408 6.99214 52.7433 10.178 52.7433 14.2379C52.7433 18.326 55.8688 21.4555 60.1105 21.4555C62.2872 21.4555 64.129 20.6097 65.5801 19.2282L64.1848 17.1982C63.0406 18.2132 61.7849 18.8335 60.1942 18.8335C57.8501 18.8335 56.1199 17.4802 55.7292 15.1965H65.9429C66.0266 14.83 66.1661 14.0969 66.1661 13.3357ZM59.7198 9.50138C61.5895 9.50138 63.1802 10.7137 63.236 12.8846H55.785C56.2315 10.8265 57.7943 9.50138 59.7198 9.50138Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M80.3867 21.4555C82.9541 21.4555 84.9634 20.1868 86.1633 18.2414L84.0983 16.6344C83.1774 17.9031 82.0332 18.7207 80.4147 18.7207C77.9031 18.7207 76.1171 16.7753 76.1171 14.2097C76.1171 11.7005 77.9031 9.72693 80.4147 9.72693C82.0611 9.72693 83.2053 10.5727 84.0983 11.8414L86.1633 10.2062C84.9913 8.26086 82.982 6.99214 80.3867 6.99214C76.3403 6.99214 73.1311 10.1498 73.1311 14.2097C73.1311 18.2978 76.3403 21.4555 80.3867 21.4555Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M88.8356 21.1454H91.7657V0.00012207H88.8356V21.1454Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M101.807 21.4555C105.882 21.4555 109.091 18.2414 109.091 14.2097C109.091 10.178 105.882 6.99214 101.807 6.99214C97.761 6.99214 94.5797 10.1498 94.5797 14.2097C94.5797 18.2414 97.761 21.4555 101.807 21.4555ZM101.807 18.7207C99.3795 18.7207 97.5656 16.8035 97.5656 14.2379C97.5656 11.6441 99.3795 9.69873 101.835 9.69873C104.235 9.69873 106.077 11.6441 106.077 14.2379C106.077 16.7753 104.235 18.7207 101.807 18.7207Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M117.752 21.4555C121.101 21.4555 123.696 19.0872 123.696 15.3375V7.30227H120.766V15.563C120.766 17.5084 119.427 18.7207 117.752 18.7207C116.022 18.7207 114.655 17.5084 114.655 15.563V7.30227H111.752V15.3375C111.752 19.0872 114.348 21.4555 117.752 21.4555Z",
+					fill: "#141446"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M137.658 0.00012207V8.99389C136.626 7.72518 134.979 6.99214 133.082 6.99214C129.203 6.99214 126.384 10.1216 126.384 14.2379C126.384 18.3542 129.175 21.4555 133.082 21.4555C135.119 21.4555 136.877 20.6097 137.881 19.1718V21.1454H140.616V0.00012207H137.658ZM133.584 18.7489C131.184 18.7489 129.37 16.8881 129.37 14.2097C129.37 11.5313 131.212 9.69873 133.584 9.69873C135.621 9.69873 137.714 11.1084 137.714 14.2379C137.714 17.3956 135.621 18.7489 133.584 18.7489Z",
+					fill: "#141446"
+				})
+			]
+		})]
+	});
+}
+const _CloudLogo = forwardRef(CloudLogo);
+_CloudLogo.displayName = "CloudLogo";
+
+//#endregion
+export { _CloudLogo };
+//# sourceMappingURL=CloudLogo.js.map

package/dist/components/other/CloudLogo/CloudLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudLogo.js","names":[],"sources":["../../../../src/components/other/CloudLogo/CloudLogo.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\nimport { Button, CubeButtonProps } from '../../actions';\n\nconst StyledLogoButton = tasty(Button, {\n  qa: 'HeaderCubeCloudLogo',\n  'aria-label': 'Logo',\n  type: 'clear',\n  styles: {\n    padding: 0,\n    gap: 0,\n    fill: '#clear',\n    border: 0,\n    radius: 0,\n    width: 'auto',\n    height: 'auto',\n  },\n});\n\nfunction CloudLogo(\n  props: CubeButtonProps,\n  ref: FocusableRef<HTMLButtonElement>,\n) {\n  return (\n    <StyledLogoButton {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"25\"\n        height=\"36\"\n        viewBox=\"0 0 25 27\"\n        data-type=\"image\"\n      >\n        <path\n          fill=\"#ff6492\"\n          d=\"M23.447 6.786 11.727 0v4.696l11.72 6.757V6.786Z\"\n        />\n        <path\n          fill=\"#141446\"\n          d=\"M23.447 11.453 19.931 13.5l-8.206-4.743-4.689 2.7L3.52 9.559l8.207-4.863 11.72 6.757Z\"\n        />\n        <path fill=\"#a14474\" d=\"M7.036 11.457 3.52 9.559v3.94l3.516-2.042Z\" />\n        <path\n          fill=\"#141446\"\n          d=\"M.003 20.213 11.725 13.5l11.722 6.713L11.725 27 .003 20.213Z\"\n        />\n        <path\n          fill=\"#ff6492\"\n          d=\"m23.447 15.554-11.722-6.87V13.5l11.722 6.713v-4.659Z\"\n        />\n        <path\n          fill=\"#7a77ff\"\n          d=\"M3.52 13.5V9.56l8.207-4.864V0L.003 6.786v13.427L11.725 13.5V8.684L3.52 13.5Z\"\n        />\n      </svg>\n      <svg\n        width=\"141\"\n        height=\"27\"\n        viewBox=\"0 0 141 27\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.7556 21.4555C15.323 21.4555 17.3322 20.1868 18.5322 18.2414L16.4671 16.6344C15.5462 17.9031 14.4021 18.7207 12.7835 18.7207C10.272 18.7207 8.48596 16.7753 8.48596 14.2097C8.48596 11.7005 10.272 9.72693 12.7835 9.72693C14.43 9.72693 15.5741 10.5727 16.4671 11.8414L18.5322 10.2062C17.3601 8.26086 15.3509 6.99214 12.7556 6.99214C8.70921 6.99214 5.5 10.1498 5.5 14.2097C5.5 18.2978 8.70921 21.4555 12.7556 21.4555Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M27.0647 21.4555C30.4135 21.4555 33.0088 19.0872 33.0088 15.3375V7.30227H30.0786V15.563C30.0786 17.5084 28.7391 18.7207 27.0647 18.7207C25.3346 18.7207 23.9672 17.5084 23.9672 15.563V7.30227H21.0649V15.3375C21.0649 19.0872 23.6602 21.4555 27.0647 21.4555Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M44.0683 6.99214C42.1707 6.99214 40.5243 7.72518 39.4917 8.99389V0.00012207H36.5616V21.1454H39.2964V19.2282C40.3289 20.6379 42.087 21.4555 44.0963 21.4555C47.9752 21.4555 50.7937 18.3542 50.7937 14.2379C50.7937 10.1216 47.9752 6.99214 44.0683 6.99214ZM43.5939 18.7489C41.5568 18.7489 39.4638 17.3956 39.4638 14.2379C39.4638 11.1084 41.5289 9.69873 43.5939 9.69873C45.9381 9.69873 47.7799 11.5313 47.7799 14.2097C47.7799 16.8881 45.966 18.7489 43.5939 18.7489Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M66.1661 13.3357C66.1661 9.69873 63.4871 6.99214 59.8314 6.99214C55.8408 6.99214 52.7433 10.178 52.7433 14.2379C52.7433 18.326 55.8688 21.4555 60.1105 21.4555C62.2872 21.4555 64.129 20.6097 65.5801 19.2282L64.1848 17.1982C63.0406 18.2132 61.7849 18.8335 60.1942 18.8335C57.8501 18.8335 56.1199 17.4802 55.7292 15.1965H65.9429C66.0266 14.83 66.1661 14.0969 66.1661 13.3357ZM59.7198 9.50138C61.5895 9.50138 63.1802 10.7137 63.236 12.8846H55.785C56.2315 10.8265 57.7943 9.50138 59.7198 9.50138Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M80.3867 21.4555C82.9541 21.4555 84.9634 20.1868 86.1633 18.2414L84.0983 16.6344C83.1774 17.9031 82.0332 18.7207 80.4147 18.7207C77.9031 18.7207 76.1171 16.7753 76.1171 14.2097C76.1171 11.7005 77.9031 9.72693 80.4147 9.72693C82.0611 9.72693 83.2053 10.5727 84.0983 11.8414L86.1633 10.2062C84.9913 8.26086 82.982 6.99214 80.3867 6.99214C76.3403 6.99214 73.1311 10.1498 73.1311 14.2097C73.1311 18.2978 76.3403 21.4555 80.3867 21.4555Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M88.8356 21.1454H91.7657V0.00012207H88.8356V21.1454Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M101.807 21.4555C105.882 21.4555 109.091 18.2414 109.091 14.2097C109.091 10.178 105.882 6.99214 101.807 6.99214C97.761 6.99214 94.5797 10.1498 94.5797 14.2097C94.5797 18.2414 97.761 21.4555 101.807 21.4555ZM101.807 18.7207C99.3795 18.7207 97.5656 16.8035 97.5656 14.2379C97.5656 11.6441 99.3795 9.69873 101.835 9.69873C104.235 9.69873 106.077 11.6441 106.077 14.2379C106.077 16.7753 104.235 18.7207 101.807 18.7207Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M117.752 21.4555C121.101 21.4555 123.696 19.0872 123.696 15.3375V7.30227H120.766V15.563C120.766 17.5084 119.427 18.7207 117.752 18.7207C116.022 18.7207 114.655 17.5084 114.655 15.563V7.30227H111.752V15.3375C111.752 19.0872 114.348 21.4555 117.752 21.4555Z\"\n          fill=\"#141446\"\n        />\n        <path\n          d=\"M137.658 0.00012207V8.99389C136.626 7.72518 134.979 6.99214 133.082 6.99214C129.203 6.99214 126.384 10.1216 126.384 14.2379C126.384 18.3542 129.175 21.4555 133.082 21.4555C135.119 21.4555 136.877 20.6097 137.881 19.1718V21.1454H140.616V0.00012207H137.658ZM133.584 18.7489C131.184 18.7489 129.37 16.8881 129.37 14.2097C129.37 11.5313 131.212 9.69873 133.584 9.69873C135.621 9.69873 137.714 11.1084 137.714 14.2379C137.714 17.3956 135.621 18.7489 133.584 18.7489Z\"\n          fill=\"#141446\"\n        />\n      </svg>\n    </StyledLogoButton>\n  );\n}\n\nconst _CloudLogo = forwardRef(CloudLogo);\n\n_CloudLogo.displayName = 'CloudLogo';\n\nexport { _CloudLogo as CloudLogo };\n"],"mappings":";;;;;;;AAMA,MAAM,mBAAmB,MAAM,QAAQ;CACrC,IAAI;CACJ,cAAc;CACd,MAAM;CACN,QAAQ;EACN,SAAS;EACT,KAAK;EACL,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,SAAS,UACP,OACA,KACA;AACA,QACE,qBAAC;EAAiB,GAAI;EAAY;aAChC,qBAAC;GACC,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GACR,aAAU;;IAEV,oBAAC;KACC,MAAK;KACL,GAAE;MACF;IACF,oBAAC;KACC,MAAK;KACL,GAAE;MACF;IACF,oBAAC;KAAK,MAAK;KAAU,GAAE;MAA+C;IACtE,oBAAC;KACC,MAAK;KACL,GAAE;MACF;IACF,oBAAC;KACC,MAAK;KACL,GAAE;MACF;IACF,oBAAC;KACC,MAAK;KACL,GAAE;MACF;;IACE,EACN,qBAAC;GACC,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,OAAM;;IAEN,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;IACF,oBAAC;KACC,GAAE;KACF,MAAK;MACL;;IACE;GACW;;AAIvB,MAAM,aAAa,WAAW,UAAU;AAExC,WAAW,cAAc"}

package/dist/components/overlays/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,28 @@
+
+import { CubeButtonProps } from "../../actions/Button/Button.js";
+import { CubeDialogProps } from "../Dialog/Dialog.js";
+import "../Dialog/index.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/overlays/AlertDialog/AlertDialog.d.ts
+interface CubeAlertDialogActionsProps {
+  confirm?: CubeButtonProps | boolean;
+  secondary?: CubeButtonProps;
+  cancel?: CubeButtonProps | boolean;
+}
+interface CubeAlertDialogProps extends Omit<CubeDialogProps, 'children'> {
+  content?: ReactNode;
+  /** Whether the dialog is an important prompt */
+  danger?: boolean;
+  actions?: CubeAlertDialogActionsProps;
+  title?: string;
+  noActions?: boolean;
+}
+/**
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ */
+declare const _AlertDialog: react.ForwardRefExoticComponent<CubeAlertDialogProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeAlertDialogActionsProps, CubeAlertDialogProps, _AlertDialog };
+//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/overlays/AlertDialog/AlertDialog.js

@@ -0,0 +1,71 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { chain } from "../../../utils/react/chain.js";
+import { Paragraph } from "../../content/Paragraph.js";
+import { _Title } from "../../content/Title.js";
+import { Button } from "../../actions/Button/Button.js";
+import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
+import { useDialogContext } from "../Dialog/context.js";
+import { Content } from "../../content/Content.js";
+import { Header } from "../../content/Header.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { Footer } from "../../content/Footer.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/AlertDialog/AlertDialog.tsx
+const DEFAULT_CONFIRM_PROPS = {
+	label: "Ok",
+	type: "primary"
+};
+const DEFAULT_CANCEL_PROPS = { label: "Cancel" };
+/**
+* AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+*/
+function AlertDialog(props, ref) {
+	const { onClose } = useDialogContext();
+	const { danger, actions, title, styles, noActions, content, ...otherProps } = props;
+	let { confirm: confirmProps, secondary: secondaryProps, cancel: cancelProps } = actions ?? {};
+	confirmProps = confirmProps !== false ? {
+		...DEFAULT_CONFIRM_PROPS,
+		...typeof confirmProps === "object" ? confirmProps : null
+	} : void 0;
+	cancelProps = cancelProps ? {
+		...DEFAULT_CANCEL_PROPS,
+		...typeof cancelProps === "object" ? cancelProps : null
+	} : void 0;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		ref,
+		role: "alertdialog",
+		isDismissable: false,
+		...otherProps,
+		children: [
+			title ? /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(_Title, { children: title }) }) : null,
+			content ? /* @__PURE__ */ jsx(Content, { children: typeof content === "string" ? /* @__PURE__ */ jsx(Paragraph, { children: content }) : content }) : null,
+			!noActions && (confirmProps || secondaryProps || cancelProps) ? /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+				confirmProps && /* @__PURE__ */ jsx(Button, {
+					autoFocus: true,
+					theme: danger ? "danger" : void 0,
+					...confirmProps,
+					onPress: (e) => chain(confirmProps?.onPress?.(e), onClose?.("confirm"))
+				}),
+				secondaryProps && /* @__PURE__ */ jsx(Button, {
+					...secondaryProps,
+					onPress: (e) => chain(secondaryProps?.onPress?.(e), onClose?.("secondary"))
+				}),
+				cancelProps && /* @__PURE__ */ jsx(Button, {
+					...cancelProps,
+					onPress: (e) => chain(cancelProps?.onPress?.(e), onClose?.("cancel"))
+				})
+			] }) }) : null
+		]
+	});
+}
+/**
+* AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+*/
+const _AlertDialog = forwardRef(AlertDialog);
+_AlertDialog.displayName = "AlertDialog";
+
+//#endregion
+export { _AlertDialog };
+//# sourceMappingURL=AlertDialog.js.map

package/dist/components/overlays/AlertDialog/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","names":["Title"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react';\n\nimport { chain } from '../../../utils/react';\nimport { Button } from '../../actions/Button/Button';\nimport { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';\nimport { Content } from '../../content/Content';\nimport { Footer } from '../../content/Footer';\nimport { Header } from '../../content/Header';\nimport { Paragraph } from '../../content/Paragraph';\nimport { Title } from '../../content/Title';\nimport { CubeDialogProps, Dialog } from '../Dialog';\nimport { useDialogContext } from '../Dialog/context';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface CubeAlertDialogActionsProps {\n  confirm?: CubeButtonProps | boolean;\n  secondary?: CubeButtonProps;\n  cancel?: CubeButtonProps | boolean;\n}\n\nexport interface CubeAlertDialogProps\n  extends Omit<CubeDialogProps, 'children'> {\n  content?: ReactNode;\n  /** Whether the dialog is an important prompt */\n  danger?: boolean;\n  actions?: CubeAlertDialogActionsProps;\n  title?: string;\n  noActions?: boolean;\n}\n\nconst DEFAULT_CONFIRM_PROPS: CubeButtonProps = {\n  label: 'Ok',\n  type: 'primary',\n};\nconst DEFAULT_CANCEL_PROPS: CubeButtonProps = {\n  label: 'Cancel',\n};\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nfunction AlertDialog(props: CubeAlertDialogProps, ref) {\n  const { onClose } = useDialogContext();\n\n  const { danger, actions, title, styles, noActions, content, ...otherProps } =\n    props;\n\n  let {\n    confirm: confirmProps,\n    secondary: secondaryProps,\n    cancel: cancelProps,\n  } = actions ?? {};\n\n  // the confirm button is present by default\n  confirmProps =\n    confirmProps !== false\n      ? {\n          ...DEFAULT_CONFIRM_PROPS,\n          ...(typeof confirmProps === 'object' ? confirmProps : null),\n        }\n      : undefined;\n\n  // the cancel button is hidden by default\n  cancelProps = cancelProps\n    ? {\n        ...DEFAULT_CANCEL_PROPS,\n        ...(typeof cancelProps === 'object' ? cancelProps : null),\n      }\n    : undefined;\n\n  return (\n    <Dialog ref={ref} role=\"alertdialog\" isDismissable={false} {...otherProps}>\n      {title ? (\n        <Header>\n          <Title>{title}</Title>\n        </Header>\n      ) : null}\n      {content ? (\n        <Content>\n          {typeof content === 'string' ? (\n            <Paragraph>{content}</Paragraph>\n          ) : (\n            content\n          )}\n        </Content>\n      ) : null}\n      {!noActions && (confirmProps || secondaryProps || cancelProps) ? (\n        <Footer>\n          <ButtonGroup>\n            {confirmProps && (\n              <Button\n                autoFocus\n                theme={danger ? 'danger' : undefined}\n                {...confirmProps}\n                onPress={(e) =>\n                  chain(\n                    (confirmProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('confirm'),\n                  )\n                }\n              />\n            )}\n            {secondaryProps && (\n              <Button\n                {...secondaryProps}\n                onPress={(e) =>\n                  chain(secondaryProps?.onPress?.(e), onClose?.('secondary'))\n                }\n              />\n            )}\n            {cancelProps && (\n              <Button\n                {...cancelProps}\n                onPress={(e) =>\n                  chain(\n                    (cancelProps as CubeButtonProps)?.onPress?.(e),\n                    onClose?.('cancel'),\n                  )\n                }\n              />\n            )}\n          </ButtonGroup>\n        </Footer>\n      ) : null}\n    </Dialog>\n  );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nconst _AlertDialog = forwardRef(AlertDialog);\n\n_AlertDialog.displayName = 'AlertDialog';\n\nexport { _AlertDialog as AlertDialog };\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,wBAAyC;CAC7C,OAAO;CACP,MAAM;CACP;AACD,MAAM,uBAAwC,EAC5C,OAAO,UACR;;;;AAKD,SAAS,YAAY,OAA6B,KAAK;CACrD,MAAM,EAAE,YAAY,kBAAkB;CAEtC,MAAM,EAAE,QAAQ,SAAS,OAAO,QAAQ,WAAW,SAAS,GAAG,eAC7D;CAEF,IAAI,EACF,SAAS,cACT,WAAW,gBACX,QAAQ,gBACN,WAAW,EAAE;AAGjB,gBACE,iBAAiB,QACb;EACE,GAAG;EACH,GAAI,OAAO,iBAAiB,WAAW,eAAe;EACvD,GACD;AAGN,eAAc,cACV;EACE,GAAG;EACH,GAAI,OAAO,gBAAgB,WAAW,cAAc;EACrD,GACD;AAEJ,QACE,qBAAC;EAAY;EAAK,MAAK;EAAc,eAAe;EAAO,GAAI;;GAC5D,QACC,oBAAC,oBACC,oBAACA,oBAAO,QAAc,GACf,GACP;GACH,UACC,oBAAC,qBACE,OAAO,YAAY,WAClB,oBAAC,uBAAW,UAAoB,GAEhC,UAEM,GACR;GACH,CAAC,cAAc,gBAAgB,kBAAkB,eAChD,oBAAC,oBACC,qBAAC;IACE,gBACC,oBAAC;KACC;KACA,OAAO,SAAS,WAAW;KAC3B,GAAI;KACJ,UAAU,MACR,MACG,cAAkC,UAAU,EAAE,EAC/C,UAAU,UAAU,CACrB;MAEH;IAEH,kBACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MAAM,gBAAgB,UAAU,EAAE,EAAE,UAAU,YAAY,CAAC;MAE7D;IAEH,eACC,oBAAC;KACC,GAAI;KACJ,UAAU,MACR,MACG,aAAiC,UAAU,EAAE,EAC9C,UAAU,SAAS,CACpB;MAEH;OAEQ,GACP,GACP;;GACG;;;;;AAOb,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.d.ts

@@ -0,0 +1,72 @@
+
+import { AlertDialogResolveStatus, DialogProps } from "./types.js";
+import "react/jsx-runtime";
+
+//#region src/components/overlays/AlertDialog/AlertDialogApiProvider.d.ts
+interface DialogApi {
+  open: (dialogProps: DialogProps, params?: DialogApiParams) => Promise<AlertDialogResolveStatus>;
+}
+interface DialogApiParams {
+  cancelToken?: AbortSignal;
+}
+/**
+ * @internal Do not use it in your code!
+ */
+/**
+ * Hook gives the ability to open `<AlertDialog />` imperatively.
+ *
+ * ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;
+ * that means this api will reject all dialogs when there is already open one
+ *
+ * @example calling in a side effect
+ * const alertDialogAPI = useAlertDialogAPI();
+ *
+ * useEffect(() => {
+ *   const abortDialog = new AbortController();
+ *   const openedDialog = alertDialogAPI.open({
+ *     title: 'Are you sure?',
+ *     content: <Paragraph>Test content</Paragraph>
+ *   }, {
+ *      cancelToken: abortDialog.signal
+ *   });
+ *
+ *   openedDialog
+ *     .then((status) => {
+ *       // User confirmed or used secondary action
+ *       if (status === 'confirm') {
+ *         // Handle confirm
+ *       } else if (status === 'secondary') {
+ *         // Handle secondary action
+ *       }
+ *     })
+ *     .catch(() => {
+ *       // User cancelled or dismissed the dialog
+ *       // Handle cancel/dismiss
+ *     })
+ *
+ *   return () => {
+ *     abortDialog.abort();
+ *   }
+ * }, [])
+ *
+ * @example opening dialog on Button click.
+ * const alertDialogAPI = useAlertDialogAPI();
+ *
+ * const onPress = useCallback(() => {
+ *   alertDialogAPI.open({...})
+ *     .then((status) => {
+ *       if (status === 'confirm') {
+ *         // Handle confirm
+ *       }
+ *     })
+ *     .catch(() => {
+ *       // Handle cancel/dismiss
+ *     })
+ * }, [])
+ *
+ * return <Button onPress={onPress}>New issue</Button>
+ */
+declare function useAlertDialogAPI(): DialogApi;
+//#endregion
+export { useAlertDialogAPI };
+//# sourceMappingURL=AlertDialogApiProvider.d.ts.map