@bethinkpl/design-system 22.2.0 → 22.3.0

package/docs/main.f33ff81a.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1720449439347,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1721980686635,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/docs/{runtime~main.b2826aa6.iframe.bundle.js → runtime~main.c8f2837a.iframe.bundle.js}

@@ -1 +1 @@
-(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{39:"bfc720d8",247:"6eaf240e",286:"23828fb3",594:"bb1a9f64",651:"3a01b956",690:"46a1e07a",701:"691b9947",935:"19d3d944",962:"ec348c19"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@bethinkpl/design-system:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@bethinkpl/design-system:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_bethinkpl_design_system=self.webpackChunk_bethinkpl_design_system||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{39:"0fa13ab1",247:"6eaf240e",286:"23828fb3",594:"bb1a9f64",651:"3a01b956",690:"46a1e07a",701:"691b9947",935:"19d3d944",962:"ec348c19"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@bethinkpl/design-system:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@bethinkpl/design-system:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_bethinkpl_design_system=self.webpackChunk_bethinkpl_design_system||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/lib/js/components/DatePickers/DatePicker/DatePicker.consts.ts

@@ -0,0 +1,33 @@
+import { Value } from '../../../utils/type.utils';
+
+export const DATE_PICKER_COLORS = {
+	NEUTRAL: 'neutral',
+	WARNING: 'warning',
+};
+
+export type DatePickerColors = Value<typeof DATE_PICKER_COLORS>;
+
+export const DATE_PICKER_STATES = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+	LOADING: 'loading',
+};
+
+export type DatePickerStates = Value<typeof DATE_PICKER_STATES>;
+
+export const DATE_PICKER_CALENDAR_POSITIONS = {
+	TOP: 'top',
+	TOP_LEFT: 'top-left',
+	TOP_RIGHT: 'top-right',
+	BOTTOM: 'bottom',
+	BOTTOM_LEFT: 'bottom-left',
+	BOTTOM_RIGHT: 'bottom-right',
+};
+
+export type DatePickerCalendarPositions = Value<typeof DATE_PICKER_CALENDAR_POSITIONS>;
+export const DATE_PICKER_TRIGGER_TYPES = {
+	BOX: 'box',
+	TILE: 'tile',
+};
+
+export type DatePickerTriggerTypes = Value<typeof DATE_PICKER_TRIGGER_TYPES>;

package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts

@@ -0,0 +1,138 @@
+import DatePicker from './DatePicker.vue';
+import {
+	DATE_PICKER_CALENDAR_POSITIONS,
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+	DATE_PICKER_TRIGGER_TYPES,
+} from './DatePicker.consts';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+import DsSwitch from '../../Switch';
+
+export default {
+	title: 'Components/DatePickers/DatePicker',
+	component: DatePicker,
+} as Meta<typeof DatePicker>;
+
+const StoryTemplate: StoryFn<typeof DatePicker> = (args, { updateArgs }) => ({
+	components: { DatePicker, DsSwitch },
+	setup() {
+		return {
+			...args,
+		};
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	methods: {
+		updateDate(date: Date) {
+			updateArgs({
+				date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
+			});
+		},
+	},
+	computed: {
+		formattedDate() {
+			if (!this.date) {
+				return null;
+			}
+			return new Date(this.date);
+		},
+		formattedMinDate() {
+			if (!this.minDate) {
+				return null;
+			}
+			return new Date(this.minDate);
+		},
+		formattedMaxDate() {
+			if (!this.maxDate) {
+				return null;
+			}
+			return new Date(this.maxDate);
+		},
+		formattedDisableDates() {
+			if (!this.disableDates || !this.disableDates.length) {
+				return null;
+			}
+			return this.disableDates.map((date) => new Date(date));
+		},
+	},
+	template: `
+		<date-picker
+			:trigger-type="triggerType"
+			:is-interactive="isInteractive"
+			:placeholder="placeholder"
+			:date="formattedDate"
+			:label="label"
+			:is-label-uppercase="isLabelUppercase"
+			:icon="icon ? ICONS[icon] : null"
+			:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+			:calendar-position="calendarPosition"
+			:error-message="errorMessage"
+			:state="state"
+			:color="color"
+			:disable-dates="formattedDisableDates"
+			:min-date="formattedMinDate"
+			:max-date="formattedMaxDate"
+			@update:date="updateDate"
+		>
+			<ds-switch  label-left="lewa" label-right="prawa" />
+		</date-picker>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+const now = Date.now();
+const oneDayMili = 86400000;
+const args = {
+	triggerType: DATE_PICKER_TRIGGER_TYPES.TILE,
+	isInteractive: true,
+	placeholder: 'Wybierz datę',
+	date: '',
+	label: 'Date picker',
+	isLabelUppercase: false,
+	icon: 'FA_CALENDAR_DAY',
+	isIconHiddenOnMobile: false,
+	calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
+	errorMessage: '',
+	state: DATE_PICKER_STATES.DEFAULT,
+	color: DATE_PICKER_COLORS.NEUTRAL,
+	disableDates: [new Date(now + oneDayMili * 2).toISOString().slice(0, 10)],
+	minDate: new Date(now).toISOString().slice(0, 10),
+	maxDate: new Date(now + oneDayMili * 30).toISOString().slice(0, 10),
+} as Args;
+
+const argTypes = {
+	triggerType: {
+		control: 'select',
+		options: Object.values(DATE_PICKER_TRIGGER_TYPES),
+	},
+	date: { control: 'text' },
+	icon: { control: 'select', options: [null, ...Object.keys(ICONS)] },
+	calendarPosition: {
+		control: 'select',
+		options: Object.values(DATE_PICKER_CALENDAR_POSITIONS),
+	},
+	state: {
+		control: 'select',
+		options: Object.values(DATE_PICKER_STATES),
+	},
+	color: {
+		control: 'select',
+		options: Object.values(DATE_PICKER_COLORS),
+	},
+	disableDates: {
+		control: 'array',
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4',
+	},
+};

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -0,0 +1,333 @@
+<template>
+	<div
+		class="ds-datePicker"
+		:class="{ '-ds-box': triggerType === DATE_PICKER_TRIGGER_TYPES.BOX }"
+	>
+		<template v-if="triggerType === DATE_PICKER_TRIGGER_TYPES.TILE">
+			<div class="ds-datePicker__labelWrapper">
+				<span
+					v-if="label"
+					class="ds-datePicker__label"
+					:class="{
+						'-ds-isUppercase': isLabelUppercase,
+						'-ds-disabled': state === DATE_PICKER_STATES.DISABLED,
+					}"
+					>{{ label }}</span
+				>
+				<template v-if="$slots.default">
+					<slot />
+				</template>
+			</div>
+			<ds-tile
+				class="ds-datePicker__tile"
+				:text="text"
+				:interactive="isInteractive"
+				:color="color"
+				:state="state"
+				:icon-right="tileIcon"
+				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
+				:eyebrow-text="eyebrowText"
+				@click="toggle"
+			/>
+		</template>
+		<date-picker-box
+			v-else
+			:is-interactive="isInteractive"
+			:placeholder="placeholder"
+			:date="date"
+			:icon="icon"
+			:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+			:state="state"
+			:color="color"
+			:eyebrow-text="eyebrowText"
+			:is-open="isOpen"
+			@click="toggle"
+		/>
+
+		<span v-if="errorMessage" class="ds-datePicker__errorMessage"> {{ errorMessage }} </span>
+		<input ref="flatpickrInput" class="ds-datePicker__hiddenInput" />
+	</div>
+</template>
+
+<style lang="scss">
+@import 'flatpickr/dist/flatpickr';
+</style>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+
+.ds-datePicker {
+	$self: &;
+
+	display: flex;
+	flex-direction: column;
+	row-gap: $space-4xs;
+
+	&.-ds-box {
+		display: inline-flex;
+	}
+
+	&__hiddenInput {
+		display: none;
+	}
+
+	&__labelWrapper {
+		align-items: flex-end;
+		display: flex;
+		justify-content: space-between;
+		padding-bottom: $space-2xs;
+	}
+
+	&__label {
+		@include label-l-default-bold;
+
+		color: $color-neutral-text-strong;
+
+		&.-ds-isUppercase {
+			@include label-m-extensive-bold-uppercase;
+
+			color: $color-neutral-text;
+		}
+
+		&.-ds-disabled {
+			color: $color-neutral-text-strong-disabled;
+
+			&.-ds-isUppercase {
+				color: $color-neutral-text-disabled;
+			}
+		}
+	}
+
+	&__tile {
+		min-height: 56px;
+
+		/* Prevent text select */
+		-webkit-user-select: none; /* Safari */
+		user-select: none;
+	}
+
+	&__errorMessage {
+		@include info-s-default-regular;
+
+		color: $color-danger-text;
+	}
+}
+</style>
+
+<script lang="ts">
+import { PropType, toRaw } from 'vue';
+
+import DsTile from '../../Tile';
+import { ICONS } from '../../Icons/Icon';
+import DatePickerBox from '../DatePickerBox';
+
+import {
+	DATE_PICKER_CALENDAR_POSITIONS,
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+	DATE_PICKER_TRIGGER_TYPES,
+	DatePickerCalendarPositions,
+	DatePickerColors,
+	DatePickerStates,
+	DatePickerTriggerTypes,
+} from './DatePicker.consts';
+import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
+
+let flatpickr: Function | null = null;
+
+const FLATPICKR_POSITIONS = {
+	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT]: 'below left',
+	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_RIGHT]: 'below right',
+	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM]: 'below',
+	[DATE_PICKER_CALENDAR_POSITIONS.TOP_LEFT]: 'above left',
+	[DATE_PICKER_CALENDAR_POSITIONS.TOP_RIGHT]: 'above right',
+	[DATE_PICKER_CALENDAR_POSITIONS.TOP]: 'above',
+};
+
+export default {
+	name: 'DatePicker',
+	components: {
+		DatePickerBox,
+		DsTile,
+	},
+	props: {
+		triggerType: {
+			type: String as PropType<DatePickerTriggerTypes>,
+			default: DATE_PICKER_TRIGGER_TYPES.TILE,
+		},
+		isInteractive: {
+			type: Boolean,
+			default: true,
+		},
+		placeholder: {
+			type: String,
+			default: 'Wybierz datę',
+		},
+		date: {
+			type: Date,
+			default: null,
+		},
+		label: {
+			type: String,
+			default: '',
+		},
+		isLabelUppercase: {
+			type: Boolean,
+			default: false,
+		},
+		icon: {
+			type: [Object, null],
+			default: ICONS.FA_CALENDAR_DAY,
+			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
+		},
+		isIconHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
+		calendarPosition: {
+			type: String as PropType<DatePickerCalendarPositions>,
+			default: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT,
+		},
+		errorMessage: {
+			type: String,
+			default: '',
+		},
+		state: {
+			type: (String as PropType<DatePickerStates>) || null,
+			default: DATE_PICKER_STATES.DEFAULT,
+		},
+		color: {
+			type: String as PropType<DatePickerColors>,
+			default: DATE_PICKER_COLORS.NEUTRAL,
+		},
+		disableDates: {
+			type: Array,
+			default: () => [],
+		},
+		minDate: {
+			type: Date,
+			default: null,
+		},
+		maxDate: {
+			type: Date,
+			default: null,
+		},
+	},
+	emits: { 'update:date': () => true },
+	data() {
+		return {
+			datePicker: null,
+			isOpen: false,
+			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
+			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
+		};
+	},
+	computed: {
+		isDatePickerEnabled() {
+			return this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT;
+		},
+		eyebrowText() {
+			if (!this.date || this.state === DATE_PICKER_STATES.LOADING) {
+				return '';
+			}
+
+			return capitalizeFirstLetter(
+				this.date.toLocaleDateString(undefined, {
+					dateStyle: undefined,
+					timeStyle: undefined,
+					weekday: 'long',
+				}),
+			);
+		},
+		text() {
+			if (this.state === DATE_PICKER_STATES.LOADING || !this.date) {
+				return this.placeholder;
+			}
+
+			return this.date.toLocaleDateString(undefined, {
+				dateStyle: 'medium',
+				timeStyle: undefined,
+			});
+		},
+		tileIcon() {
+			if (!this.icon) {
+				return null;
+			}
+
+			return this.isOpen ? ICONS.FA_CHEVRON_UP : this.icon;
+		},
+		flatpickrConfigString() {
+			return [
+				this.maxDate,
+				this.minDate,
+				this.calendarPosition,
+				this.date,
+				...this.disableDates,
+			].concat('|');
+		},
+	},
+	watch: {
+		flatpickrConfigString: {
+			handler() {
+				this.datePicker?.set({
+					position: FLATPICKR_POSITIONS[this.calendarPosition],
+					defaultDate: this.date,
+					disable: this.disableDates.filter((date) => date instanceof Date),
+					minDate: this.minDate,
+					maxDate: this.maxDate,
+				});
+			},
+			flush: 'post' as const,
+		},
+	},
+	async mounted() {
+		if (this.isDatePickerEnabled && !this.datePicker) {
+			if (!flatpickr) {
+				const { default: flatpickrFunction } = await import('flatpickr');
+
+				flatpickr = flatpickrFunction;
+			}
+
+			const { Polish } = await import('flatpickr/dist/l10n/pl.js');
+
+			this.datePicker = flatpickr(this.$refs.flatpickrInput, {
+				locale: Polish,
+				positionElement: this.$el,
+				ignoredFocusElements: [this.$el],
+				appendTo: this.$el,
+				position: FLATPICKR_POSITIONS[this.calendarPosition],
+				defaultDate: this.date,
+				disable: this.disableDates.filter((date) => date instanceof Date),
+				minDate: this.minDate,
+				maxDate: this.maxDate,
+				onClose: [
+					() => {
+						this.isOpen = false;
+					},
+				],
+				onOpen: [
+					() => {
+						this.isOpen = true;
+					},
+				],
+				onChange: (event) => {
+					this.$emit('update:date', event[0]);
+				},
+			});
+		}
+	},
+	unmounted() {
+		this.datePicker?.destroy();
+		this.datePicker = null;
+	},
+	methods: {
+		toggle() {
+			if (this.isDatePickerEnabled && this.datePicker) {
+				this.datePicker.toggle();
+			}
+		},
+	},
+};
+</script>

package/lib/js/components/DatePickers/DatePicker/index.ts

@@ -0,0 +1,5 @@
+import DatePicker from './DatePicker.vue';
+
+export default DatePicker;
+
+export * from './DatePicker.consts';