@webiny/admin-ui 6.3.0-beta.2 → 6.3.0-beta.3

package/Accordion/components/AccordionItemAction.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IconButtonProps as IconButtonProps } from "../../Button/index.js";
+import type { IconButtonProps } from "../../Button/index.js";
 type AccordionItemActionProps = IconButtonProps;
 declare const AccordionItemAction: (({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element) & {
     original: ({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element;

package/Accordion/components/AccordionItemAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","AccordionItemSeparator","AccordionItemActionBase","onClick","props","onClickCallback","useCallback","e","stopPropagation","createElement","Object","assign","variant","size","DecoratableAccordionItemAction","AccordionItemAction","Separator"],"sources":["AccordionItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport type { IconButtonProps as IconButtonProps } from \"~/Button/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { AccordionItemSeparator } from \"./AccordionItemSeparator.js\";\n\ntype AccordionItemActionProps = IconButtonProps;\n\nconst AccordionItemActionBase = ({ onClick, ...props }: AccordionItemActionProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the action is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} onClick={onClickCallback} />;\n};\n\nconst DecoratableAccordionItemAction = makeDecoratable(\n    \"AccordionItemAction\",\n    AccordionItemActionBase\n);\n\nconst AccordionItemAction = withStaticProps(DecoratableAccordionItemAction, {\n    Separator: AccordionItemSeparator\n});\n\nexport { AccordionItemAction, type AccordionItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,sBAAsB;AAI/B,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACjF;EACA,MAAMC,eAAe,GAAGR,KAAK,CAACS,WAAW,CACpCC,CAAsC,IAAK;IACxCA,CAAC,CAACC,eAAe,CAAC,CAAC;IAEnB,IAAIL,OAAO,EAAE;MACTA,OAAO,CAACI,CAAC,CAAC;IACd;EACJ,CAAC,EACD,CAACJ,OAAO,CACZ,CAAC;EAED,oBAAON,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAU,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKT,KAAK;IAAED,OAAO,EAAEE;EAAgB,EAAE,CAAC;AAC5F,CAAC;AAED,MAAMS,8BAA8B,GAAGhB,eAAe,CAClD,qBAAqB,EACrBI,uBACJ,CAAC;AAED,MAAMa,mBAAmB,GAAGhB,eAAe,CAACe,8BAA8B,EAAE;EACxEE,SAAS,EAAEf;AACf,CAAC,CAAC;AAEF,SAASc,mBAAmB","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","AccordionItemSeparator","AccordionItemActionBase","onClick","props","onClickCallback","useCallback","e","stopPropagation","createElement","Object","assign","variant","size","DecoratableAccordionItemAction","AccordionItemAction","Separator"],"sources":["AccordionItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport type { IconButtonProps } from \"~/Button/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { AccordionItemSeparator } from \"./AccordionItemSeparator.js\";\n\ntype AccordionItemActionProps = IconButtonProps;\n\nconst AccordionItemActionBase = ({ onClick, ...props }: AccordionItemActionProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the action is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} onClick={onClickCallback} />;\n};\n\nconst DecoratableAccordionItemAction = makeDecoratable(\n    \"AccordionItemAction\",\n    AccordionItemActionBase\n);\n\nconst AccordionItemAction = withStaticProps(DecoratableAccordionItemAction, {\n    Separator: AccordionItemSeparator\n});\n\nexport { AccordionItemAction, type AccordionItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,sBAAsB;AAI/B,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACjF;EACA,MAAMC,eAAe,GAAGR,KAAK,CAACS,WAAW,CACpCC,CAAsC,IAAK;IACxCA,CAAC,CAACC,eAAe,CAAC,CAAC;IAEnB,IAAIL,OAAO,EAAE;MACTA,OAAO,CAACI,CAAC,CAAC;IACd;EACJ,CAAC,EACD,CAACJ,OAAO,CACZ,CAAC;EAED,oBAAON,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAU,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKT,KAAK;IAAED,OAAO,EAAEE;EAAgB,EAAE,CAAC;AAC5F,CAAC;AAED,MAAMS,8BAA8B,GAAGhB,eAAe,CAClD,qBAAqB,EACrBI,uBACJ,CAAC;AAED,MAAMa,mBAAmB,GAAGhB,eAAe,CAACe,8BAA8B,EAAE;EACxEE,SAAS,EAAEf;AACf,CAAC,CAAC;AAEF,SAASc,mBAAmB","ignoreList":[]}

package/Calendar/Calendar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type DayPickerProps } from "react-day-picker";
+type CalendarProps = DayPickerProps & {
+    className?: string;
+};
+declare const Calendar: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+    original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
+        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Calendar, type CalendarProps };

package/Calendar/Calendar.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { DayPicker } from "react-day-picker";
+import { ReactComponent as ChevronLeftIcon } from "@webiny/icons/chevron_left.svg";
+import { ReactComponent as ChevronRightIcon } from "@webiny/icons/chevron_right.svg";
+import { Icon } from "../Icon/index.js";
+import { cn, makeDecoratable } from "../utils.js";
+import { calendarClassNames } from "./calendarClassNames.js";
+function CalendarChevron(props) {
+  if (props.orientation === "left") {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(ChevronLeftIcon, null),
+      label: "Previous",
+      size: "sm",
+      color: "inherit"
+    });
+  }
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(ChevronRightIcon, null),
+    label: "Next",
+    size: "sm",
+    color: "inherit"
+  });
+}
+const DecoratableCalendar = ({
+  className,
+  classNames,
+  components,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(DayPicker, Object.assign({}, props, {
+    classNames: {
+      ...calendarClassNames,
+      ...classNames
+    },
+    components: {
+      Chevron: CalendarChevron,
+      ...components
+    },
+    className: cn(className)
+  }));
+};
+const Calendar = makeDecoratable("Calendar", DecoratableCalendar);
+export { Calendar };
+
+//# sourceMappingURL=Calendar.js.map

package/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","DayPicker","ReactComponent","ChevronLeftIcon","ChevronRightIcon","Icon","cn","makeDecoratable","calendarClassNames","CalendarChevron","props","orientation","createElement","icon","label","size","color","DecoratableCalendar","className","classNames","components","Object","assign","Chevron","Calendar"],"sources":["Calendar.tsx"],"sourcesContent":["import React from \"react\";\nimport { DayPicker, type DayPickerProps } from \"react-day-picker\";\nimport { ReactComponent as ChevronLeftIcon } from \"@webiny/icons/chevron_left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"@webiny/icons/chevron_right.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { calendarClassNames } from \"./calendarClassNames.js\";\n\ntype CalendarProps = DayPickerProps & {\n    className?: string;\n};\n\nfunction CalendarChevron(props: { orientation?: \"left\" | \"right\" | \"up\" | \"down\" }) {\n    if (props.orientation === \"left\") {\n        return <Icon icon={<ChevronLeftIcon />} label=\"Previous\" size=\"sm\" color=\"inherit\" />;\n    }\n    return <Icon icon={<ChevronRightIcon />} label=\"Next\" size=\"sm\" color=\"inherit\" />;\n}\n\nconst DecoratableCalendar = ({ className, classNames, components, ...props }: CalendarProps) => {\n    return (\n        <DayPicker\n            {...props}\n            classNames={{ ...calendarClassNames, ...classNames }}\n            components={{ Chevron: CalendarChevron, ...components }}\n            className={cn(className)}\n        />\n    );\n};\n\nconst Calendar = makeDecoratable(\"Calendar\", DecoratableCalendar);\n\nexport { Calendar, type CalendarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA6B,kBAAkB;AACjE,SAASC,cAAc,IAAIC,eAAe,QAAQ,gCAAgC;AAClF,SAASD,cAAc,IAAIE,gBAAgB,QAAQ,iCAAiC;AACpF,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,kBAAkB;AAM3B,SAASC,eAAeA,CAACC,KAAyD,EAAE;EAChF,IAAIA,KAAK,CAACC,WAAW,KAAK,MAAM,EAAE;IAC9B,oBAAOX,KAAA,CAAAY,aAAA,CAACP,IAAI;MAACQ,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACT,eAAe,MAAE,CAAE;MAACW,KAAK,EAAC,UAAU;MAACC,IAAI,EAAC,IAAI;MAACC,KAAK,EAAC;IAAS,CAAE,CAAC;EACzF;EACA,oBAAOhB,KAAA,CAAAY,aAAA,CAACP,IAAI;IAACQ,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACR,gBAAgB,MAAE,CAAE;IAACU,KAAK,EAAC,MAAM;IAACC,IAAI,EAAC,IAAI;IAACC,KAAK,EAAC;EAAS,CAAE,CAAC;AACtF;AAEA,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,UAAU;EAAEC,UAAU;EAAE,GAAGV;AAAqB,CAAC,KAAK;EAC5F,oBACIV,KAAA,CAAAY,aAAA,CAACX,SAAS,EAAAoB,MAAA,CAAAC,MAAA,KACFZ,KAAK;IACTS,UAAU,EAAE;MAAE,GAAGX,kBAAkB;MAAE,GAAGW;IAAW,CAAE;IACrDC,UAAU,EAAE;MAAEG,OAAO,EAAEd,eAAe;MAAE,GAAGW;IAAW,CAAE;IACxDF,SAAS,EAAEZ,EAAE,CAACY,SAAS;EAAE,EAC5B,CAAC;AAEV,CAAC;AAED,MAAMM,QAAQ,GAAGjB,eAAe,CAAC,UAAU,EAAEU,mBAAmB,CAAC;AAEjE,SAASO,QAAQ","ignoreList":[]}

package/Calendar/calendarClassNames.d.ts

@@ -0,0 +1,2 @@
+import type { ClassNames } from "react-day-picker";
+export declare const calendarClassNames: Partial<ClassNames>;

package/Calendar/calendarClassNames.js

@@ -0,0 +1,33 @@
+export const calendarClassNames = {
+  root: "p-md",
+  months: "relative flex gap-md",
+  month: "flex flex-col gap-sm",
+  month_caption: "flex items-center justify-center h-8 relative",
+  caption_label: "text-md font-semibold text-neutral-strong",
+  nav: "absolute inset-x-0 flex items-center justify-between",
+  button_previous: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
+  button_next: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
+  month_grid: "border-collapse",
+  weekdays: "",
+  weekday: "text-xs font-medium text-neutral-dimmed size-9 text-center",
+  weeks: "",
+  week: "",
+  day: "size-9 text-center text-sm p-0 relative",
+  day_button: "inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors",
+  selected: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium",
+  today: "[&>button]:border-sm [&>button]:border-primary",
+  outside: "[&>button]:text-neutral-dimmed [&>button]:opacity-50",
+  disabled: "[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed",
+  hidden: "invisible",
+  range_start: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none",
+  range_end: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none",
+  range_middle: "bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70",
+  focused: "[&>button]:ring-2 [&>button]:ring-primary-dimmed",
+  dropdowns: "flex items-center gap-sm",
+  dropdown: "appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base",
+  dropdown_root: "relative",
+  chevron: "size-md fill-current",
+  footer: "pt-sm text-sm text-neutral-dimmed"
+};
+
+//# sourceMappingURL=calendarClassNames.js.map

package/Calendar/calendarClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["calendarClassNames","root","months","month","month_caption","caption_label","nav","button_previous","button_next","month_grid","weekdays","weekday","weeks","week","day","day_button","selected","today","outside","disabled","hidden","range_start","range_end","range_middle","focused","dropdowns","dropdown","dropdown_root","chevron","footer"],"sources":["calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAuC,GAAG;EACnDC,IAAI,EAAE,MAAM;EACZC,MAAM,EAAE,sBAAsB;EAC9BC,KAAK,EAAE,sBAAsB;EAC7BC,aAAa,EAAE,+CAA+C;EAC9DC,aAAa,EAAE,2CAA2C;EAC1DC,GAAG,EAAE,sDAAsD;EAC3DC,eAAe,EACX,qHAAqH;EACzHC,WAAW,EACP,qHAAqH;EACzHC,UAAU,EAAE,iBAAiB;EAC7BC,QAAQ,EAAE,EAAE;EACZC,OAAO,EAAE,4DAA4D;EACrEC,KAAK,EAAE,EAAE;EACTC,IAAI,EAAE,EAAE;EACRC,GAAG,EAAE,yCAAyC;EAC9CC,UAAU,EACN,+HAA+H;EACnIC,QAAQ,EACJ,8GAA8G;EAClHC,KAAK,EAAE,gDAAgD;EACvDC,OAAO,EAAE,sDAAsD;EAC/DC,QAAQ,EAAE,gEAAgE;EAC1EC,MAAM,EAAE,WAAW;EACnBC,WAAW,EACP,iHAAiH;EACrHC,SAAS,EACL,iHAAiH;EACrHC,YAAY,EACR,0IAA0I;EAC9IC,OAAO,EAAE,kDAAkD;EAC3DC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EACJ,8GAA8G;EAClHC,aAAa,EAAE,UAAU;EACzBC,OAAO,EAAE,sBAAsB;EAC/BC,MAAM,EAAE;AACZ,CAAC","ignoreList":[]}

package/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Calendar.js";

package/Calendar/index.js

@@ -0,0 +1,3 @@
+export * from "./Calendar.js";
+
+//# sourceMappingURL=index.js.map

package/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Calendar.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/CodeEditor/CodeEditorPrimitive.js

@@ -25,7 +25,7 @@ const DecoratableCodeEditorPrimitive = ({
   return /*#__PURE__*/React.createElement(MonacoEditor, Object.assign({
     height: "calc(100vh - 400px)"
   }, rest, {
-    language: "json",
+    language: rest.language ?? "json",
     defaultValue: value,
     options: options
   }));

package/CodeEditor/CodeEditorPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","MonacoEditor","makeDecoratable","monacoOptions","domReadOnly","readOnly","minimap","enabled","DecoratableCodeEditorPrimitive","value","disabled","options","optionsInput","rest","undefined","createElement","Object","assign","height","language","defaultValue","CodeEditorPrimitive"],"sources":["CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={\"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,OAAOC,YAAY,MAAM,sBAAsB;AAE/C,SAASC,eAAe;AAMxB,MAAMC,aAAgD,GAAG;EACrDC,WAAW,EAAE,IAAI;EACjBC,QAAQ,EAAE,IAAI;EACdC,OAAO,EAAE;IACLC,OAAO,EAAE;EACb;AACJ,CAAC;AAED,MAAMC,8BAA8B,GAAGA,CAAC;EACpCC,KAAK;EACLC,QAAQ;EACRC,OAAO,EAAEC,YAAY;EACrB,GAAGC;AACmB,CAAC,KAAK;EAC5B,MAAMF,OAAO,GAAGX,OAAO,CAAC,MAA6C;IACjE,OAAO;MACH,GAAGG,aAAa;MAChB,GAAGS,YAAY;MACfR,WAAW,EAAEM,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACC,WAAW,GAAGM,QAAQ;MAC1EL,QAAQ,EAAEK,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACE,QAAQ,GAAGK;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACd,oBACIX,KAAA,CAAAgB,aAAA,CAACd,YAAY,EAAAe,MAAA,CAAAC,MAAA;IACTC,MAAM,EAAE;EAAsB,GAC1BL,IAAI;IACRM,QAAQ,EAAE,MAAO;IACjBC,YAAY,EAAEX,KAAM;IACpBE,OAAO,EAAEA;EAAQ,EACpB,CAAC;AAEV,CAAC;AAED,MAAMU,mBAAmB,GAAGnB,eAAe,CAAC,qBAAqB,EAAEM,8BAA8B,CAAC;AAElG,SAASa,mBAAmB","ignoreList":[]}
+{"version":3,"names":["React","useMemo","MonacoEditor","makeDecoratable","monacoOptions","domReadOnly","readOnly","minimap","enabled","DecoratableCodeEditorPrimitive","value","disabled","options","optionsInput","rest","undefined","createElement","Object","assign","height","language","defaultValue","CodeEditorPrimitive"],"sources":["CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,OAAOC,YAAY,MAAM,sBAAsB;AAE/C,SAASC,eAAe;AAMxB,MAAMC,aAAgD,GAAG;EACrDC,WAAW,EAAE,IAAI;EACjBC,QAAQ,EAAE,IAAI;EACdC,OAAO,EAAE;IACLC,OAAO,EAAE;EACb;AACJ,CAAC;AAED,MAAMC,8BAA8B,GAAGA,CAAC;EACpCC,KAAK;EACLC,QAAQ;EACRC,OAAO,EAAEC,YAAY;EACrB,GAAGC;AACmB,CAAC,KAAK;EAC5B,MAAMF,OAAO,GAAGX,OAAO,CAAC,MAA6C;IACjE,OAAO;MACH,GAAGG,aAAa;MAChB,GAAGS,YAAY;MACfR,WAAW,EAAEM,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACC,WAAW,GAAGM,QAAQ;MAC1EL,QAAQ,EAAEK,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACE,QAAQ,GAAGK;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACd,oBACIX,KAAA,CAAAgB,aAAA,CAACd,YAAY,EAAAe,MAAA,CAAAC,MAAA;IACTC,MAAM,EAAE;EAAsB,GAC1BL,IAAI;IACRM,QAAQ,EAAEN,IAAI,CAACM,QAAQ,IAAI,MAAO;IAClCC,YAAY,EAAEX,KAAM;IACpBE,OAAO,EAAEA;EAAQ,EACpB,CAAC;AAEV,CAAC;AAED,MAAMU,mBAAmB,GAAGnB,eAAe,CAAC,qBAAqB,EAAEM,8BAA8B,CAAC;AAElG,SAASa,mBAAmB","ignoreList":[]}

package/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { DatePickerPrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
+type DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;
+declare const DatePicker: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { DatePicker, type DatePickerProps };

package/DatePicker/DatePicker.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils.js";
+import { DatePickerPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableDatePicker = ({
+  label,
+  description,
+  note,
+  hint,
+  required,
+  disabled,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    hint: hint,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(DatePickerPrimitive, Object.assign({}, props, {
+    disabled: disabled,
+    invalid: invalid
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const DatePicker = makeDecoratable("DatePicker", DecoratableDatePicker);
+export { DatePicker };
+
+//# sourceMappingURL=DatePicker.js.map

package/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","DatePickerPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableDatePicker","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","DatePicker"],"sources":["DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"./primitives/index.js\";\nimport { DatePickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableDatePicker = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: DatePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <DatePickerPrimitive\n                {...(props as DatePickerPrimitiveProps)}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DatePicker = makeDecoratable(\"DatePicker\", DecoratableDatePicker);\n\nexport { DatePicker, type DatePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAQ,gBACnBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IAACoB,IAAI,EAAEd,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEd,KAAA,CAAAsB,aAAA,CAACnB,mBAAmB,EAAAsB,MAAA,CAAAC,MAAA,KACXV,KAAK;IACVF,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMa,UAAU,GAAGzB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASmB,UAAU","ignoreList":[]}

package/DatePicker/DatePicker.mdx

@@ -0,0 +1,153 @@
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
+
+import * as DatePickerStories from "./DatePicker.stories";
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+
+The DatePicker component is a form control for selecting dates, times, months, years, date ranges, and multiple selections. It supports 10 variant types and includes built-in validation support.
+
+## Usage
+
+<Canvas of={DatePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { DatePicker } from "@webiny/admin-ui";
+
+const DatePickerExample = () => {
+const [value, setValue] = useState(undefined);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue) => {
+        setValue(newValue);
+        if (!newValue) {
+            setValidation({ isValid: false, message: "Please select a date" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <DatePicker
+            type="date"
+            label="Event Date"
+            required={true}
+            description="Select the date for your event"
+            note="Choose a date that works for all participants"
+            placeholder="Pick a date"
+            value={value}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+
+};
+
+export default DatePickerExample;
+
+` } }
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/DatePicker/DatePicker.tsx',
+'_blank'
+);
+},
+}
+]}
+/>
+
+<Controls of={DatePickerStories.Documentation} />
+
+## Examples
+
+### Date
+
+The default date picker for selecting a single date.
+
+<Canvas of={DatePickerStories.WithLabel} />
+
+### With Presets
+
+Date picker with preset buttons (Today, Tomorrow, In a week, etc.) displayed alongside the calendar.
+
+<Canvas of={DatePickerStories.WithPresets} />
+
+### Time
+
+A time-only picker using a native time input.
+
+<Canvas of={DatePickerStories.TypeTime} />
+
+### Date & Time (local)
+
+Combines a calendar with a time input, storing the value as a local Date object.
+
+<Canvas of={DatePickerStories.TypeDateTimeLocal} />
+
+### Date & Time (with timezone)
+
+Combines a calendar with a time input, storing the value as an ISO string with timezone offset.
+
+<Canvas of={DatePickerStories.TypeDateTimeTz} />
+
+### Month
+
+Select a month and year. Value is stored as `"YYYY-MM"`.
+
+<Canvas of={DatePickerStories.TypeMonth} />
+
+### Week
+
+Select an ISO week. Value is stored as `"YYYY-Www"` (e.g. `"2026-W18"`). The selected week is highlighted as a range on the calendar.
+
+<Canvas of={DatePickerStories.TypeWeek} />
+
+### Year
+
+Select a year from a scrollable grid. Use the `yearRange` prop to control the available range.
+
+<Canvas of={DatePickerStories.TypeYear} />
+
+### Date Range
+
+Select a start and end date using a two-month calendar.
+
+<Canvas of={DatePickerStories.TypeDateRange} />
+
+### Multiple Dates
+
+Select multiple individual dates. Selected dates appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleDates} />
+
+### Multiple Months
+
+Select multiple months. Selected months appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleMonths} />
+
+### Multiple Years
+
+Select multiple years. Selected years appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleYears} />
+
+## Form States
+
+### With Validation Error
+
+<Canvas of={DatePickerStories.WithErrors} />
+
+### Disabled
+
+<Canvas of={DatePickerStories.Disabled} />
+
+### Full Example
+
+Shows all form component features together: label, required indicator, description, validation error, and note.
+
+<Canvas of={DatePickerStories.FullExample} />

package/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { DatePicker } from "./DatePicker.js";
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const WithPresets: Story;
+export declare const TypeTime: Story;
+export declare const TypeDateTimeLocal: Story;
+export declare const TypeDateTimeTz: Story;
+export declare const TypeMonth: Story;
+export declare const TypeWeek: Story;
+export declare const TypeYear: Story;
+export declare const TypeDateRange: Story;
+export declare const TypeMultipleDates: Story;
+export declare const TypeMultipleMonths: Story;
+export declare const TypeMultipleYears: Story;
+export declare const Documentation: Story;