@tenancy.nz/datepicker 1.3.4

package/dist/esm/packages/datepicker/src/components/CalendarIcon.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+
+function CalendarIcon() {
+  return /* @__PURE__ */React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "23",
+    height: "22",
+    viewBox: "0 0 23 22",
+    fill: "none"
+  }, /* @__PURE__ */React__default.createElement("path", {
+    d: "M15.9096 17.4648H17.4216C17.8632 17.4648 18.2208 17.1072 18.2208 16.6656C18.2208 16.224 17.8632 15.8664 17.4216 15.8664H15.9096C15.468 15.8664 15.1104 16.224 15.1104 16.6656C15.1104 17.1072 15.468 17.4648 15.9096 17.4648ZM15.9096 13.6848H17.4216C17.8632 13.6848 18.2208 13.3272 18.2208 12.8856C18.2208 12.444 17.8632 12.0864 17.4216 12.0864H15.9096C15.468 12.0864 15.1104 12.444 15.1104 12.8856C15.1104 13.3272 15.468 13.6848 15.9096 13.6848ZM10.62 13.6848H12.132C12.5736 13.6848 12.9312 13.3272 12.9312 12.8856C12.9312 12.444 12.5736 12.0864 12.132 12.0864H10.62C10.1784 12.0864 9.8208 12.444 9.8208 12.8856C9.8208 13.3272 10.1784 13.6848 10.62 13.6848ZM5.3328 17.4648H6.8424C7.284 17.4648 7.6416 17.1072 7.6416 16.6656C7.6416 16.224 7.284 15.8664 6.8424 15.8664H5.3328C4.8912 15.8664 4.5336 16.224 4.5336 16.6656C4.5336 17.1072 4.8912 17.4648 5.3328 17.4648ZM22.752 9.108C22.752 9.0624 22.7328 9.024 22.7256 8.9808C22.4928 5.628 19.968 2.904 16.7064 2.3688V0.7992C16.7064 0.3576 16.3488 0 15.9072 0C15.4656 0 15.108 0.3576 15.108 0.7992V2.2656H7.6416V0.7992C7.6416 0.3576 7.284 0 6.8424 0C6.4008 0 6.0432 0.3576 6.0432 0.7992V2.3712C2.784 2.9064 0.2568 5.6304 0.0264 8.9832C0.0192 9.0264 0 9.0648 0 9.1104C0 9.1368 0.012 9.1608 0.0144 9.1848C0.00960001 9.2856 0 9.384 0 9.4848V14.0232C0 18.0024 3.24 21.2424 7.2192 21.2424H15.5328C19.512 21.2424 22.752 18.0024 22.752 14.0232V9.4848C22.752 9.384 22.74 9.2856 22.7376 9.1848C22.74 9.1584 22.752 9.1368 22.752 9.108ZM6.0432 3.9936V5.3328C6.0432 5.7744 6.4008 6.132 6.8424 6.132C7.284 6.132 7.6416 5.7744 7.6416 5.3328V3.8664H15.108V5.3328C15.108 5.7744 15.4656 6.132 15.9072 6.132C16.3488 6.132 16.7064 5.7744 16.7064 5.3328V3.9936C18.8616 4.4544 20.5632 6.1536 21.024 8.3112H1.728C2.1888 6.1536 3.888 4.4544 6.0432 3.9936ZM21.1536 14.0232C21.1536 17.1216 18.6312 19.644 15.5328 19.644H7.2192C4.1208 19.6416 1.5984 17.1216 1.5984 14.0232V9.9096H21.1536V14.0232ZM10.62 17.4648H12.132C12.5736 17.4648 12.9312 17.1072 12.9312 16.6656C12.9312 16.224 12.5736 15.8664 12.132 15.8664H10.62C10.1784 15.8664 9.8208 16.224 9.8208 16.6656C9.8208 17.1072 10.1784 17.4648 10.62 17.4648ZM5.3328 13.6848H6.8424C7.284 13.6848 7.6416 13.3272 7.6416 12.8856C7.6416 12.444 7.284 12.0864 6.8424 12.0864H5.3328C4.8912 12.0864 4.5336 12.444 4.5336 12.8856C4.5336 13.3272 4.8912 13.6848 5.3328 13.6848Z"
+  }));
+}
+
+export { CalendarIcon as default };

package/dist/esm/packages/datepicker/src/components/DatePicker.js

@@ -0,0 +1,117 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import MuiInputAdornment from '@mui/material/InputAdornment';
+import { FormControl, IconButton } from '@tenancy.nz/ui';
+import CalendarIcon from './CalendarIcon.js';
+import StyledDatepicker from './DatePicker.styled.js';
+import { LocalizationProvider } from '../../../../node_modules/.pnpm/@mui_x-date-pickers@8.27.0_@emotion_react@11.14.0_@types_react@19.1.9_react@18.3.1__@em_f7106fb7eba50d62f3c82acfcf63ee91/node_modules/@mui/x-date-pickers/esm/LocalizationProvider/LocalizationProvider.js';
+import { AdapterDayjs } from '../../../../node_modules/.pnpm/@mui_x-date-pickers@8.27.0_@emotion_react@11.14.0_@types_react@19.1.9_react@18.3.1__@em_f7106fb7eba50d62f3c82acfcf63ee91/node_modules/@mui/x-date-pickers/esm/AdapterDayjs/AdapterDayjs.js';
+
+var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "format", "fromFormat", "helperText", "icon", "label", "name", "required", "showError", "size", "readOnly", "onChange", "toFormat", "value"];
+dayjs.extend(customParseFormat);
+function DatePicker(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "smooth" : _ref$edges,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "DD/MM/YYYY" : _ref$format,
+    _ref$fromFormat = _ref.fromFormat,
+    fromFormat = _ref$fromFormat === void 0 ? "YYYY-MM-DD" : _ref$fromFormat,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? void 0 : _ref$icon,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    name = _ref.name,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _onChange = _ref.onChange,
+    _ref$toFormat = _ref.toFormat,
+    toFormat = _ref$toFormat === void 0 ? "YYYY-MM-DD" : _ref$toFormat,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _React$useState = React__default.useState(dayjs(value)),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    parsedValue = _React$useState2[0],
+    setParsedValue = _React$useState2[1];
+  useEffect(function () {
+    if (typeof value === "string" && value) {
+      setParsedValue(dayjs(value, fromFormat));
+      return;
+    }
+    setParsedValue(value);
+  }, [fromFormat, value]);
+  return /* @__PURE__ */React__default.createElement(LocalizationProvider, {
+    dateAdapter: AdapterDayjs
+  }, /* @__PURE__ */React__default.createElement(FormControl, {
+    color: color,
+    id: name,
+    label: label,
+    helperText: helperText,
+    showError: showError,
+    message: errorMessage,
+    fullWidth: fullWidth,
+    disabled: disabled,
+    required: required,
+    size: size
+  }, /* @__PURE__ */React__default.createElement(StyledDatepicker, _objectSpread2(_objectSpread2({
+    format: format,
+    disabled: disabled,
+    color: color,
+    edges: edges,
+    size: size,
+    readOnly: readOnly,
+    variant: "outlined",
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    value: parsedValue
+  }, rest), {}, {
+    onChange: function onChange(v) {
+      setParsedValue(v);
+      setOpen(false);
+      _onChange(v ? v.format(toFormat) : v);
+    },
+    slotProps: {
+      textField: {
+        InputProps: {
+          onClick: function onClick() {
+            return setOpen(true);
+          },
+          endAdornment: /* @__PURE__ */React__default.createElement(MuiInputAdornment, {
+            position: "end"
+          }, /* @__PURE__ */React__default.createElement(IconButton, {
+            color: color,
+            onClick: function onClick() {
+              return setOpen(true);
+            }
+          }, icon || /* @__PURE__ */React__default.createElement(CalendarIcon, null)))
+        }
+      }
+    }
+  }))));
+}
+
+export { DatePicker as default };

package/dist/esm/packages/datepicker/src/components/DatePicker.styled.js

@@ -0,0 +1,80 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import getObjectProp from '../utils/getObjectProp.js';
+import { DatePicker } from '../../../../node_modules/.pnpm/@mui_x-date-pickers@8.27.0_@emotion_react@11.14.0_@types_react@19.1.9_react@18.3.1__@em_f7106fb7eba50d62f3c82acfcf63ee91/node_modules/@mui/x-date-pickers/esm/DatePicker/DatePicker.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var colorStyles = function colorStyles(_ref) {
+  var color = _ref.color,
+    theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), color === "default" && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), getObjectProp(theme, "vars.palette.grey.400")), color !== "default" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".main"))));
+};
+var bgColorStyles = function bgColorStyles(_ref2) {
+  var color = _ref2.color,
+    theme = _ref2.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), color === "default" && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: #fff;\n  "]))), color !== "default" && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".light"))));
+};
+var disabledStyles = function disabledStyles(_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  user-select: none;\n\n  && .MuiPickersOutlinedInput-notchedOutline,\n  && .Mui-focused .MuiPickersOutlinedInput-notchedOutline,\n  &&:hover .MuiPickersOutlinedInput-notchedOutline {\n    border: 1px solid ", " !important;\n  }\n\n  && .MuiPickersInputBase-root {\n    color: ", ";\n    opacity: 1;\n  }\n\n  && .Mui-focused.MuiPickersInputBase-root {\n    color: ", ";\n  }\n\n  .MuiInputAdornment-root {\n    opacity: 0.4;\n  }\n"])), getObjectProp(theme, "vars.palette.grey.200"), getObjectProp(theme, "vars.palette.grey.200"), getObjectProp(theme, "vars.palette.grey.600"), getObjectProp(theme, "vars.palette.grey.600"));
+};
+var edgesStyles = function edgesStyles(_ref4) {
+  var edges = _ref4.edges,
+    theme = _ref4.theme;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n"])), edges === "smooth" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    border-radius: ", ";\n  "])), getObjectProp(theme, "vars.shape.borderRadius")), edges === "sharp" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n    border-radius: 0px;\n  "]))), edges === "rounded" && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    border-radius: 9999px;\n  "]))));
+};
+var focusStyles = function focusStyles(_ref5) {
+  var color = _ref5.color,
+    theme = _ref5.theme;
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), color === "default" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    box-shadow: 0px 0px 6px 0px\n      ", ";\n    border-color: ", " !important;\n  "])), getObjectProp(theme, "vars.palette.info.main"), getObjectProp(theme, "vars.palette.info.main")), color !== "default" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    box-shadow: 0px 0px 6px 0px\n      ", ";\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".main"))));
+};
+var hoverStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  &:hover {\n    border-color: #1f1c4f;\n  }\n"])));
+var placeholderStyles = function placeholderStyles(_ref6) {
+  var theme = _ref6.theme;
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  color: ", ";\n  opacity: 1;\n  transition: none;\n"])), getObjectProp(theme, "vars.palette.grey.600"));
+};
+var readOnlyStyles = function readOnlyStyles(_ref7) {
+  var theme = _ref7.theme;
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  user-select: none;\n\n  && .MuiPickersOutlinedInput-notchedOutline,\n  && .Mui-focused .MuiPickersOutlinedInput-notchedOutline,\n  &&:hover .MuiPickersOutlinedInput-notchedOutline {\n    border: 1px solid ", " !important;\n  }\n  && .MuiPickersInputBase-root {\n    color: ", ";\n    opacity: 1;\n  }\n  && .Mui-focused.MuiPickersInputBase-root {\n    color: ", ";\n  }\n"])), getObjectProp(theme, "vars.palette.background.muted"), getObjectProp(theme, "vars.palette.grey.400"), getObjectProp(theme, "vars.palette.grey.600"), getObjectProp(theme, "vars.palette.grey.600"));
+};
+var sizeStyles = function sizeStyles(_ref8) {
+  var size = _ref8.size,
+    theme = _ref8.theme;
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), size === "small" && css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    height: 36px;\n    padding: 8px 12px;\n    font-size: calc(", "px - 2px);\n  "])), getObjectProp(theme, "typography.fontSize")), size === "medium" && css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    height: 48px;\n    padding: 12px 16px;\n    font-size: ", "px;\n  "])), getObjectProp(theme, "typography.fontSize")));
+};
+var StyledDatepicker = styled(DatePicker)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref9) {
+  var color = _ref9.color,
+    disabled = _ref9.disabled,
+    edges = _ref9.edges,
+    readOnly = _ref9.readOnly,
+    size = _ref9.size,
+    theme = _ref9.theme;
+  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    && {\n      ", "\n    }\n\n    && .MuiPickersOutlinedInput-notchedOutline {\n      ", "\n    }\n\n    && .Mui-focused .MuiPickersOutlinedInput-notchedOutline {\n      ", "\n    }\n\n    && .MuiPickersInputBase-root {\n      ", "\n      ", "\n      ", "\n    }\n\n    && .Mui-focused.MuiPickersInputBase-root {\n      color: ", ";\n    }\n\n    ", "\n    ", "\n\n    &&.MuiPickersTextField-root.Mui-disabled {\n      ", "\n    }\n\n    ", "\n\n    .MuiInputAdornment-root svg {\n      fill: ", ";\n    }\n  "])), !disabled && !readOnly && bgColorStyles({
+    color: color,
+    theme: theme
+  }), !disabled && !readOnly && colorStyles({
+    color: color,
+    theme: theme
+  }), !disabled && !readOnly && focusStyles({
+    color: color,
+    theme: theme
+  }), sizeStyles({
+    size: size,
+    theme: theme
+  }), !disabled && edgesStyles({
+    edges: edges,
+    theme: theme
+  }), !disabled && !readOnly && placeholderStyles({
+    theme: theme
+  }), getObjectProp(theme, "vars.palette.text.primary"), readOnly && readOnlyStyles({
+    theme: theme
+  }), disabled && disabledStyles({
+    theme: theme
+  }), edgesStyles({
+    edges: edges,
+    theme: theme
+  }), !disabled && !readOnly && hoverStyles, readOnly ? getObjectProp(theme, "vars.palette.grey.600") : "inherit");
+});
+
+export { bgColorStyles, colorStyles, StyledDatepicker as default, disabledStyles, edgesStyles, focusStyles, hoverStyles, placeholderStyles, readOnlyStyles, sizeStyles };

package/dist/esm/packages/datepicker/src/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './components/DatePicker.js';

package/dist/esm/packages/datepicker/src/utils/getObjectProp.js

@@ -0,0 +1,13 @@
+import { typeof as _typeof } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var isObject = function isObject(object) {
+  return _typeof(object) === "object" && object instanceof Object && !Array.isArray(object);
+};
+var getObjectProp = function getObjectProp(obj, prop) {
+  var fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  return prop.split(".").reduce(function (value, key) {
+    return isObject(value) && value[key] || fallback;
+  }, obj);
+};
+
+export { getObjectProp as default, isObject };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@tenancy.nz/datepicker",
+  "description": "Datepicker library for TPS UI.",
+  "version": "1.3.4",
+  "author": "TPS <https://www.tenancy.co.nz>",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.1",
+    "@mui/icons-material": "^7.2.0",
+    "dayjs": "^1.11.19",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@tenancy.nz/ui": "1.3.4"
+  },
+  "devDependencies": {
+    "@tenancy.nz/ui": "1.3.4"
+  },
+  "scripts": {
+    "build": "tsx ../../scripts/build.js"
+  }
+}