@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/datePicker/dateInput.js

@@ -1,2 +1,72 @@
-import{parseIsoDate as e,validateDateFormat as t}from"../utils/dates.js";import{formatDate as n}from"../utils/formatDate.js";import{T as r}from"../t/t.js";import{Input as i}from"../input/input.js";import{useEffect as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=({initialDate:c,onChange:l,onValidate:u,setValidateStatus:d,...f})=>{let p=c?n(c,`YYYY-MM-DD`,{timeZone:`UTC`}):``,[m,h]=o(p),[g,_]=o(!0),[v,y]=o(``),b=n=>!(!t(n)||!e(n)),x=()=>{_(!m);let t=e(m);if(t){h(n(t,`YYYY-MM-DD`,{timeZone:`UTC`}));let e=u(t);!e&&l(t),_(!e),y(e)}};return a(()=>{h(p);let e=u(c);_(!e),d(!e),y(e)},[c]),a(()=>{if(m)if(d(b(m)),!t(m))y(`Supported format is YYYY-MM-DD`);else if(!e(m))y(`Invalid date`);else{let t=e(m),n=u(t);!n&&l(t),_(!n),y(n)}},[m]),s(i,{borderColor:g?`sandstone.main`:`energyRed.main`,className:`dateInput`,"data-testid":`test-date-input`,errorText:!g&&s(r,{size:`md`,children:v}),onBlur:x,onChange:e=>h(e.target.value),placeholder:`YYYY-MM-DD`,size:`md`,state:!g&&!v?`error`:`default`,value:m,...f})};export{c as DateInput};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { parseIsoDate, validateDateFormat } from "../utils/dates.js";
+import { formatDate } from "../utils/formatDate.js";
+import { T } from "../t/t.js";
+import { Input } from "../input/input.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/datePicker/dateInput.tsx
+const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus,...rest }) => {
+	const formattedInitialDate = initialDate ? formatDate(initialDate, "YYYY-MM-DD", { timeZone: "UTC" }) : "";
+	const [dateInput, setDateInput] = useState(formattedInitialDate);
+	const [dateInputValidated, setDateInputValidated] = useState(true);
+	const [errorMessage, setErrorMessage] = useState("");
+	const isValidDate = (dateString) => {
+		if (!validateDateFormat(dateString)) return false;
+		if (!parseIsoDate(dateString)) return false;
+		return true;
+	};
+	const handleOnBlur = () => {
+		setDateInputValidated(!dateInput);
+		const parsedDate = parseIsoDate(dateInput);
+		if (parsedDate) {
+			setDateInput(formatDate(parsedDate, "YYYY-MM-DD", { timeZone: "UTC" }));
+			const validateMessage = onValidate(parsedDate);
+			!validateMessage && onChange(parsedDate);
+			setDateInputValidated(!validateMessage);
+			setErrorMessage(validateMessage);
+		}
+	};
+	useEffect(() => {
+		setDateInput(formattedInitialDate);
+		const validation = onValidate(initialDate);
+		setDateInputValidated(!validation);
+		setValidateStatus(!validation);
+		setErrorMessage(validation);
+	}, [initialDate]);
+	useEffect(() => {
+		if (dateInput) {
+			setValidateStatus(isValidDate(dateInput));
+			if (!validateDateFormat(dateInput)) setErrorMessage("Supported format is YYYY-MM-DD");
+			else if (!parseIsoDate(dateInput)) setErrorMessage("Invalid date");
+			else {
+				const parsedDate = parseIsoDate(dateInput);
+				const validateMessage = onValidate(parsedDate);
+				!validateMessage && onChange(parsedDate);
+				setDateInputValidated(!validateMessage);
+				setErrorMessage(validateMessage);
+			}
+		}
+	}, [dateInput]);
+	return /* @__PURE__ */ jsx(Input, {
+		borderColor: dateInputValidated ? "sandstone.main" : "energyRed.main",
+		className: "dateInput",
+		"data-testid": "test-date-input",
+		errorText: !dateInputValidated && /* @__PURE__ */ jsx(T, {
+			size: "md",
+			children: errorMessage
+		}),
+		onBlur: handleOnBlur,
+		onChange: (e) => setDateInput(e.target.value),
+		placeholder: "YYYY-MM-DD",
+		size: "md",
+		state: !dateInputValidated && !errorMessage ? "error" : "default",
+		value: dateInput,
+		...rest
+	});
+};
+
+//#endregion
+export { DateInput };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=dateInput.js.map

package/dist/datePicker/dateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { InputProps } from '../input'\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = InputProps & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {\n  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const isValidDate = (dateString: string) => {\n    if (!validateDateFormat(dateString)) return false\n    if (!parseIsoDate(dateString)) return false\n    return true\n  }\n\n  const handleOnBlur = () => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      !validateMessage && onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }\n\n  useEffect(() => {\n    setDateInput(formattedInitialDate)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate])\n\n  useEffect(() => {\n    if (dateInput) {\n      const isValidDateString = isValidDate(dateInput)\n      setValidateStatus(isValidDateString)\n      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')\n      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')\n      else {\n        const parsedDate = parseIsoDate(dateInput)\n        const validateMessage = onValidate(parsedDate)\n        !validateMessage && onChange(parsedDate)\n        setDateInputValidated(!validateMessage)\n        setErrorMessage(validateMessage)\n      }\n    }\n  }, [dateInput])\n\n  return (\n    <Input\n      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"6RAcA,MAAa,GAAa,CAAE,cAAa,WAAU,aAAY,oBAAmB,GAAG,KAAkB,CACrG,IAAM,EAAuB,EAAc,EAAW,EAAa,aAAc,CAAE,SAAU,MAAO,CAAC,CAAG,GAClG,CAAC,EAAW,GAAgB,EAAiB,EAAqB,CAClE,CAAC,EAAoB,GAAyB,EAAkB,GAAK,CACrE,CAAC,EAAc,GAAmB,EAAiB,GAAG,CAEtD,EAAe,GAEnB,EADI,CAAC,EAAmB,EAAW,EAC/B,CAAC,EAAa,EAAW,EAIzB,MAAqB,CACzB,EAAsB,CAAC,EAAU,CACjC,IAAM,EAAa,EAAa,EAAU,CAC1C,GAAI,EAAY,CACd,EAAa,EAAW,EAAY,aAAc,CAAE,SAAU,MAAO,CAAC,CAAC,CACvE,IAAM,EAAkB,EAAW,EAAW,CAC9C,CAAC,GAAmB,EAAS,EAAW,CACxC,EAAsB,CAAC,EAAgB,CACvC,EAAgB,EAAgB,GA4BpC,OAxBA,MAAgB,CACd,EAAa,EAAqB,CAClC,IAAM,EAAa,EAAW,EAAY,CAC1C,EAAsB,CAAC,EAAW,CAClC,EAAkB,CAAC,EAAW,CAC9B,EAAgB,EAAW,EAC1B,CAAC,EAAY,CAAC,CAEjB,MAAgB,CACd,GAAI,EAGF,GADA,EAD0B,EAAY,EAAU,CACZ,CAChC,CAAC,EAAmB,EAAU,CAAE,EAAgB,iCAAiC,SAC5E,CAAC,EAAa,EAAU,CAAE,EAAgB,eAAe,KAC7D,CACH,IAAM,EAAa,EAAa,EAAU,CACpC,EAAkB,EAAW,EAAW,CAC9C,CAAC,GAAmB,EAAS,EAAW,CACxC,EAAsB,CAAC,EAAgB,CACvC,EAAgB,EAAgB,GAGnC,CAAC,EAAU,CAAC,CAGb,EAAC,EAAA,CACC,YAAa,EAAqB,iBAAmB,iBACrD,UAAU,YACV,cAAY,kBACZ,UAAW,CAAC,GAAsB,EAAC,EAAA,CAAE,KAAK,cAAM,GAAiB,CACjE,OAAQ,EACR,SAAU,GAAK,EAAa,EAAE,OAAO,MAAM,CAC3C,YAAY,aACZ,KAAK,KACL,MAAO,CAAC,GAAsB,CAAC,EAAe,QAAU,UACxD,MAAO,EACP,GAAI,GACJ"}
+{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { InputProps } from '../input'\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = InputProps & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {\n  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const isValidDate = (dateString: string) => {\n    if (!validateDateFormat(dateString)) return false\n    if (!parseIsoDate(dateString)) return false\n    return true\n  }\n\n  const handleOnBlur = () => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      !validateMessage && onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }\n\n  useEffect(() => {\n    setDateInput(formattedInitialDate)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate])\n\n  useEffect(() => {\n    if (dateInput) {\n      const isValidDateString = isValidDate(dateInput)\n      setValidateStatus(isValidDateString)\n      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')\n      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')\n      else {\n        const parsedDate = parseIsoDate(dateInput)\n        const validateMessage = onValidate(parsedDate)\n        !validateMessage && onChange(parsedDate)\n        setDateInputValidated(!validateMessage)\n        setErrorMessage(validateMessage)\n      }\n    }\n  }, [dateInput])\n\n  return (\n    <Input\n      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,aAAa,EAAE,aAAa,UAAU,YAAY,kBAAmB,GAAG,WAAkB;CACrG,MAAM,uBAAuB,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,OAAO,CAAC,GAAG;CACxG,MAAM,CAAC,WAAW,gBAAgB,SAAiB,qBAAqB;CACxE,MAAM,CAAC,oBAAoB,yBAAyB,SAAkB,KAAK;CAC3E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAE5D,MAAM,eAAe,eAAuB;AAC1C,MAAI,CAAC,mBAAmB,WAAW,CAAE,QAAO;AAC5C,MAAI,CAAC,aAAa,WAAW,CAAE,QAAO;AACtC,SAAO;;CAGT,MAAM,qBAAqB;AACzB,wBAAsB,CAAC,UAAU;EACjC,MAAM,aAAa,aAAa,UAAU;AAC1C,MAAI,YAAY;AACd,gBAAa,WAAW,YAAY,cAAc,EAAE,UAAU,OAAO,CAAC,CAAC;GACvE,MAAM,kBAAkB,WAAW,WAAW;AAC9C,IAAC,mBAAmB,SAAS,WAAW;AACxC,yBAAsB,CAAC,gBAAgB;AACvC,mBAAgB,gBAAgB;;;AAIpC,iBAAgB;AACd,eAAa,qBAAqB;EAClC,MAAM,aAAa,WAAW,YAAY;AAC1C,wBAAsB,CAAC,WAAW;AAClC,oBAAkB,CAAC,WAAW;AAC9B,kBAAgB,WAAW;IAC1B,CAAC,YAAY,CAAC;AAEjB,iBAAgB;AACd,MAAI,WAAW;AAEb,qBAD0B,YAAY,UAAU,CACZ;AACpC,OAAI,CAAC,mBAAmB,UAAU,CAAE,iBAAgB,iCAAiC;YAC5E,CAAC,aAAa,UAAU,CAAE,iBAAgB,eAAe;QAC7D;IACH,MAAM,aAAa,aAAa,UAAU;IAC1C,MAAM,kBAAkB,WAAW,WAAW;AAC9C,KAAC,mBAAmB,SAAS,WAAW;AACxC,0BAAsB,CAAC,gBAAgB;AACvC,oBAAgB,gBAAgB;;;IAGnC,CAAC,UAAU,CAAC;AAEf,QACE,oBAAC;EACC,aAAa,qBAAqB,mBAAmB;EACrD,WAAU;EACV,eAAY;EACZ,WAAW,CAAC,sBAAsB,oBAAC;GAAE,MAAK;aAAM;IAAiB;EACjE,QAAQ;EACR,WAAU,MAAK,aAAa,EAAE,OAAO,MAAM;EAC3C,aAAY;EACZ,MAAK;EACL,OAAO,CAAC,sBAAsB,CAAC,eAAe,UAAU;EACxD,OAAO;EACP,GAAI;GACJ"}

package/dist/datePicker/datePicker.d.ts

@@ -1,5 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
 import { DatePickerProps } from "./datePicker.types.js";
+import "../index.js";
 
 //#region src/datePicker/datePicker.d.ts
 /** Select or input a date. */

package/dist/datePicker/datePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.d.ts","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":[],"mappings":";;;;;cAaa,YAAU,qBAAA"}
+{"version":3,"file":"datePicker.d.ts","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":[],"mappings":";;;;;;cAaa,YAAU,qBAAA"}

package/dist/datePicker/datePicker.js

@@ -1,2 +1,167 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../box/box.js";import a from"../button/button.js";import{LineButton as o}from"../button/buttons.js";import{maxDateTimestamp as s,minDateTimestamp as c}from"../calendar/consts.js";import l from"../calendar/calendar.js";import u from"../popover/popover.js";import{DateInput as d}from"./dateInput.js";import{useEffect as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=r((r,_)=>{let{autoOpened:v,boundaries:y,popupPosition:b,placement:x,selectedDate:S,showClearButton:C,slotBottom:w,slotTop:T,onSelected:E,children:D,className:O,...k}=t(r),A=n(`DatePicker`,r),[j,M]=m(S),[N,P]=m(!j&&v),[F,I]=m(!0),[L,R]=m(!j),z=p(S),B=C&&z.current,V=e=>y?.startDate&&e?e.getTime()-y.startDate.getTime()>=0:!0,H=e=>y?.endDate&&e?e.getTime()-y.endDate.getTime()<=0:!0,U=e=>e>=new Date(c)||e<=new Date(s);f(()=>{N||(M(S),z.current=S)},[N,S]),f(()=>{R(j&&!V(j)||j&&!H(j)||j&&!U(j)||!j)},[j]);let W=e=>{E?.(e),z.current=e,P(!1)},G=()=>{K(),E?.(void 0)},K=()=>{M(void 0),P(!1)},q=()=>{N&&K(),P(!N)},J=e=>M(e?.startDate),Y=e=>{let t=new Date(c),n=new Date(s);if(e){let[r]=[[isNaN(e.getTime()),`Supported format is YYYY-MM-DD`],[e<t,`Invalid date, the minimum date time is 1753-01-02`],[e>n,`Invalid date, the maximum date time is 9000-12-31`],[!!y?.startDate&&!V(e),`Invalid date`],[!!y?.endDate&&!H(e),`Invalid date`]].filter(([e])=>e);if(r){let[e,t]=r;return I(!0),t}}return``};return h(i,{className:e(`vui-datePicker`,O),position:`relative`,ref:_,...A,...k,children:g(u,{isOpen:N,onClose:()=>P(!1),placement:x||(b===`right`?`bottom-end`:void 0),children:[h(u.Trigger,{as:i,onClick:q,children:D}),g(u.Content,{column:!0,children:[!!T&&h(i,{px:2,children:T}),h(i,{display:`block`,mb:0,mt:2,mx:2,children:h(d,{autoFocus:!0,initialDate:j,onChange:e=>M(e),onValidate:Y,setValidateStatus:e=>I(!e)})}),h(i,{mx:2,my:1,children:h(l,{boundaries:y??{startDate:void 0,endDate:void 0},fixedNumberOfWeeks:!0,fontWeight:500,minH:200,mode:`exact`,onSelectDates:e=>J(e),selectedDates:{startDate:j,endDate:void 0},w:`100%`})}),h(i,{overflow:`unset`,children:g(i,{alignItems:`center`,flex:1,ml:`auto`,pb:2,px:2,children:[B&&h(o,{flex:1,onClick:G,size:`md`,children:`Clear`}),h(a,{disabled:L||F,flex:1,ml:B?1:0,onClick:()=>W(j),size:`md`,children:`Apply`})]})}),!!w&&h(i,{px:2,children:w})]})]})})});_.displayName=`DatePicker`;export{_ as DatePicker};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import button_default from "../button/button.js";
+import { LineButton } from "../button/buttons.js";
+import { maxDateTimestamp, minDateTimestamp } from "../calendar/consts.js";
+import calendar_default from "../calendar/calendar.js";
+import Popover from "../popover/popover.js";
+import { DateInput } from "./dateInput.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/datePicker/datePicker.tsx
+/** Select or input a date. */
+const DatePicker = vui((props, ref) => {
+	const { autoOpened, boundaries, popupPosition, placement, selectedDate: selectedDateProps, showClearButton, slotBottom, slotTop, onSelected, children, className,...rest } = omitThemingProps(props);
+	const styles = useStyleConfig("DatePicker", props);
+	const [selectedDate, setSelectedDate] = useState(selectedDateProps);
+	const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened);
+	const [isInvalidInputDate, setIsInvalidInputDate] = useState(true);
+	const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate);
+	const initialDateRef = useRef(selectedDateProps);
+	const isClearButtonVisible = showClearButton && initialDateRef.current;
+	const isStartDateInRange = (date) => !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true;
+	const isEndDateInRange = (date) => !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true;
+	const isValidDateRange = (date) => {
+		return date >= new Date(minDateTimestamp) || date <= new Date(maxDateTimestamp);
+	};
+	useEffect(() => {
+		if (!isOpen) {
+			setSelectedDate(selectedDateProps);
+			initialDateRef.current = selectedDateProps;
+		}
+	}, [isOpen, selectedDateProps]);
+	useEffect(() => {
+		setIsInvalidSelectedDate(selectedDate && !isStartDateInRange(selectedDate) || selectedDate && !isEndDateInRange(selectedDate) || selectedDate && !isValidDateRange(selectedDate) || !selectedDate);
+	}, [selectedDate]);
+	const onApplyDates = (date) => {
+		onSelected?.(date);
+		initialDateRef.current = date;
+		setIsOpen(false);
+	};
+	const onClear = () => {
+		onClose();
+		onSelected?.(void 0);
+	};
+	const onClose = () => {
+		setSelectedDate(void 0);
+		setIsOpen(false);
+	};
+	const onToggle = () => {
+		if (isOpen) onClose();
+		setIsOpen(!isOpen);
+	};
+	const selectDate = (range) => setSelectedDate(range?.startDate);
+	const onDateInputValidate = (date) => {
+		const minDateTime = new Date(minDateTimestamp);
+		const maxDateTime = new Date(maxDateTimestamp);
+		if (date) {
+			const [validateErrorPair] = [
+				[isNaN(date.getTime()), "Supported format is YYYY-MM-DD"],
+				[date < minDateTime, "Invalid date, the minimum date time is 1753-01-02"],
+				[date > maxDateTime, "Invalid date, the maximum date time is 9000-12-31"],
+				[!!boundaries?.startDate && !isStartDateInRange(date), "Invalid date"],
+				[!!boundaries?.endDate && !isEndDateInRange(date), "Invalid date"]
+			].filter(([result]) => result);
+			if (validateErrorPair) {
+				const [_, message] = validateErrorPair;
+				setIsInvalidInputDate(true);
+				return message;
+			}
+		}
+		return "";
+	};
+	return /* @__PURE__ */ jsx(box_default, {
+		className: cs("vui-datePicker", className),
+		position: "relative",
+		ref,
+		...styles,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			isOpen,
+			onClose: () => setIsOpen(false),
+			placement: placement ? placement : popupPosition === "right" ? "bottom-end" : void 0,
+			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+				as: box_default,
+				onClick: onToggle,
+				children
+			}), /* @__PURE__ */ jsxs(Popover.Content, {
+				column: true,
+				children: [
+					!!slotTop && /* @__PURE__ */ jsx(box_default, {
+						px: 2,
+						children: slotTop
+					}),
+					/* @__PURE__ */ jsx(box_default, {
+						display: "block",
+						mb: 0,
+						mt: 2,
+						mx: 2,
+						children: /* @__PURE__ */ jsx(DateInput, {
+							autoFocus: true,
+							initialDate: selectedDate,
+							onChange: (newDate) => setSelectedDate(newDate),
+							onValidate: onDateInputValidate,
+							setValidateStatus: (inValid) => setIsInvalidInputDate(!inValid)
+						})
+					}),
+					/* @__PURE__ */ jsx(box_default, {
+						mx: 2,
+						my: 1,
+						children: /* @__PURE__ */ jsx(calendar_default, {
+							boundaries: boundaries ?? {
+								startDate: void 0,
+								endDate: void 0
+							},
+							fixedNumberOfWeeks: true,
+							fontWeight: 500,
+							minH: 200,
+							mode: "exact",
+							onSelectDates: (range) => selectDate(range),
+							selectedDates: {
+								startDate: selectedDate,
+								endDate: void 0
+							},
+							w: "100%"
+						})
+					}),
+					/* @__PURE__ */ jsx(box_default, {
+						overflow: "unset",
+						children: /* @__PURE__ */ jsxs(box_default, {
+							alignItems: "center",
+							flex: 1,
+							ml: "auto",
+							pb: 2,
+							px: 2,
+							children: [isClearButtonVisible && /* @__PURE__ */ jsx(LineButton, {
+								flex: 1,
+								onClick: onClear,
+								size: "md",
+								children: "Clear"
+							}), /* @__PURE__ */ jsx(button_default, {
+								disabled: isInvalidSelectedDate || isInvalidInputDate,
+								flex: 1,
+								ml: isClearButtonVisible ? 1 : 0,
+								onClick: () => onApplyDates(selectedDate),
+								size: "md",
+								children: "Apply"
+							})]
+						})
+					}),
+					!!slotBottom && /* @__PURE__ */ jsx(box_default, {
+						px: 2,
+						children: slotBottom
+					})
+				]
+			})]
+		})
+	});
+});
+DatePicker.displayName = "DatePicker";
+
+//#endregion
+export { DatePicker };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=datePicker.js.map

package/dist/datePicker/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":["Box","Calendar","Button"],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport type { DateRange } from '../calendar'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport type { DatePickerProps } from './datePicker.types'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n  const isClearButtonVisible = showClearButton && initialDateRef.current\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime || date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = (date?: Date) => {\n    onSelected?.(date)\n    initialDateRef.current = date\n    setIsOpen(false)\n  }\n\n  const onClear = () => {\n    onClose()\n    onSelected?.(undefined)\n  }\n\n  const onClose = () => {\n    setSelectedDate(undefined)\n    setIsOpen(false)\n  }\n\n  const onToggle = () => {\n    if (isOpen) onClose()\n    setIsOpen(!isOpen)\n  }\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = (date?: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n\n    if (date) {\n      const conditions: [boolean, string][] = [\n        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],\n        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date'],\n      ]\n      const [validateErrorPair] = conditions.filter(([result]) => result)\n\n      if (validateErrorPair) {\n        const [_, message] = validateErrorPair\n        setIsInvalidInputDate(true)\n        return message\n      }\n    }\n    return ''\n  }\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        <Popover.Trigger as={Box} onClick={onToggle}>\n          {children}\n        </Popover.Trigger>\n        <Popover.Content column>\n          {!!slotTop && <Box px={2}>{slotTop}</Box>}\n          <Box display=\"block\" mb={0} mt={2} mx={2}>\n            <DateInput\n              autoFocus\n              initialDate={selectedDate}\n              onChange={newDate => setSelectedDate(newDate)}\n              onValidate={onDateInputValidate}\n              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}\n            />\n          </Box>\n          <Box mx={2} my={1}>\n            <Calendar\n              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n              fixedNumberOfWeeks\n              fontWeight={500}\n              minH={200}\n              mode=\"exact\"\n              onSelectDates={range => selectDate(range)}\n              selectedDates={{ startDate: selectedDate, endDate: undefined }}\n              w=\"100%\"\n            />\n          </Box>\n          <Box overflow=\"unset\">\n            <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n              {isClearButtonVisible && (\n                <LineButton flex={1} onClick={onClear} size=\"md\">\n                  Clear\n                </LineButton>\n              )}\n              <Button\n                disabled={isInvalidSelectedDate || isInvalidInputDate}\n                flex={1}\n                ml={isClearButtonVisible ? 1 : 0}\n                onClick={() => onApplyDates(selectedDate)}\n                size=\"md\"\n              >\n                Apply\n              </Button>\n            </Box>\n          </Box>\n          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n        </Popover.Content>\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.js","names":["Box","Calendar","Button"],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport type { DateRange } from '../calendar'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport type { DatePickerProps } from './datePicker.types'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n  const isClearButtonVisible = showClearButton && initialDateRef.current\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime || date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = (date?: Date) => {\n    onSelected?.(date)\n    initialDateRef.current = date\n    setIsOpen(false)\n  }\n\n  const onClear = () => {\n    onClose()\n    onSelected?.(undefined)\n  }\n\n  const onClose = () => {\n    setSelectedDate(undefined)\n    setIsOpen(false)\n  }\n\n  const onToggle = () => {\n    if (isOpen) onClose()\n    setIsOpen(!isOpen)\n  }\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = (date?: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n\n    if (date) {\n      const conditions: [boolean, string][] = [\n        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],\n        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date'],\n      ]\n      const [validateErrorPair] = conditions.filter(([result]) => result)\n\n      if (validateErrorPair) {\n        const [_, message] = validateErrorPair\n        setIsInvalidInputDate(true)\n        return message\n      }\n    }\n    return ''\n  }\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        <Popover.Trigger as={Box} onClick={onToggle}>\n          {children}\n        </Popover.Trigger>\n        <Popover.Content column>\n          {!!slotTop && <Box px={2}>{slotTop}</Box>}\n          <Box display=\"block\" mb={0} mt={2} mx={2}>\n            <DateInput\n              autoFocus\n              initialDate={selectedDate}\n              onChange={newDate => setSelectedDate(newDate)}\n              onValidate={onDateInputValidate}\n              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}\n            />\n          </Box>\n          <Box mx={2} my={1}>\n            <Calendar\n              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n              fixedNumberOfWeeks\n              fontWeight={500}\n              minH={200}\n              mode=\"exact\"\n              onSelectDates={range => selectDate(range)}\n              selectedDates={{ startDate: selectedDate, endDate: undefined }}\n              w=\"100%\"\n            />\n          </Box>\n          <Box overflow=\"unset\">\n            <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n              {isClearButtonVisible && (\n                <LineButton flex={1} onClick={onClear} size=\"md\">\n                  Clear\n                </LineButton>\n              )}\n              <Button\n                disabled={isInvalidSelectedDate || isInvalidInputDate}\n                flex={1}\n                ml={isClearButtonVisible ? 1 : 0}\n                onClick={() => onApplyDates(selectedDate)}\n                size=\"md\"\n              >\n                Apply\n              </Button>\n            </Box>\n          </Box>\n          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n        </Popover.Content>\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,aAAa,KAA8B,OAAO,QAAQ;CACrE,MAAM,EACJ,YACA,YACA,eACA,WACA,cAAc,mBACd,iBACA,YACA,SACA,YACA,UACA,UACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,SAAS,eAAe,cAAc,MAAM;CAElD,MAAM,CAAC,cAAc,mBAAmB,SAAc,kBAAkB;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC,gBAAgB,WAAW;CACjE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,CAAC,aAAa;CACjF,MAAM,iBAAiB,OAAyB,kBAAkB;CAClE,MAAM,uBAAuB,mBAAmB,eAAe;CAE/D,MAAM,sBAAsB,SAC1B,CAAC,CAAC,YAAY,aAAa,CAAC,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,UAAU,SAAS,IAAI,IAAI;CAE7F,MAAM,oBAAoB,SACxB,CAAC,CAAC,YAAY,WAAW,CAAC,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,QAAQ,SAAS,IAAI,IAAI;CAEzF,MAAM,oBAAoB,SAAe;AAGvC,SAAO,QAFa,IAAI,KAAK,iBAAiB,IAEhB,QADV,IAAI,KAAK,iBAAiB;;AAIhD,iBAAgB;AACd,MAAI,CAAC,QAAQ;AACX,mBAAgB,kBAAkB;AAClC,kBAAe,UAAU;;IAE1B,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,iBAAgB;AACd,2BACG,gBAAgB,CAAC,mBAAmB,aAAa,IAC/C,gBAAgB,CAAC,iBAAiB,aAAa,IAC/C,gBAAgB,CAAC,iBAAiB,aAAa,IAChD,CAAC,aACJ;IACA,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAgB,SAAgB;AACpC,eAAa,KAAK;AAClB,iBAAe,UAAU;AACzB,YAAU,MAAM;;CAGlB,MAAM,gBAAgB;AACpB,WAAS;AACT,eAAa,OAAU;;CAGzB,MAAM,gBAAgB;AACpB,kBAAgB,OAAU;AAC1B,YAAU,MAAM;;CAGlB,MAAM,iBAAiB;AACrB,MAAI,OAAQ,UAAS;AACrB,YAAU,CAAC,OAAO;;CAGpB,MAAM,cAAc,UAAqB,gBAAgB,OAAO,UAAU;CAE1E,MAAM,uBAAuB,SAAgB;EAC3C,MAAM,cAAc,IAAI,KAAK,iBAAiB;EAC9C,MAAM,cAAc,IAAI,KAAK,iBAAiB;AAE9C,MAAI,MAAM;GAQR,MAAM,CAAC,qBAPiC;IACtC,CAAC,MAAM,KAAK,SAAS,CAAC,EAAE,iCAAiC;IACzD,CAAC,OAAO,aAAa,oDAAoD;IACzE,CAAC,OAAO,aAAa,oDAAoD;IACzE,CAAC,CAAC,CAAC,YAAY,aAAa,CAAC,mBAAmB,KAAK,EAAE,eAAe;IACtE,CAAC,CAAC,CAAC,YAAY,WAAW,CAAC,iBAAiB,KAAK,EAAE,eAAe;IACnE,CACsC,QAAQ,CAAC,YAAY,OAAO;AAEnE,OAAI,mBAAmB;IACrB,MAAM,CAAC,GAAG,WAAW;AACrB,0BAAsB,KAAK;AAC3B,WAAO;;;AAGX,SAAO;;AAGT,QACE,oBAACA;EAAI,WAAW,GAAG,kBAAkB,UAAU;EAAE,UAAS;EAAgB;EAAK,GAAI;EAAQ,GAAI;YAC7F,qBAAC;GACS;GACR,eAAe,UAAU,MAAM;GAC/B,WAAW,YAAY,YAAY,kBAAkB,UAAU,eAAe;cAE9E,oBAAC,QAAQ;IAAQ,IAAIA;IAAK,SAAS;IAChC;KACe,EAClB,qBAAC,QAAQ;IAAQ;;KACd,CAAC,CAAC,WAAW,oBAACA;MAAI,IAAI;gBAAI;OAAc;KACzC,oBAACA;MAAI,SAAQ;MAAQ,IAAI;MAAG,IAAI;MAAG,IAAI;gBACrC,oBAAC;OACC;OACA,aAAa;OACb,WAAU,YAAW,gBAAgB,QAAQ;OAC7C,YAAY;OACZ,oBAAmB,YAAW,sBAAsB,CAAC,QAAQ;QAC7D;OACE;KACN,oBAACA;MAAI,IAAI;MAAG,IAAI;gBACd,oBAACC;OACC,YAAY,cAAc;QAAE,WAAW;QAAW,SAAS;QAAW;OACtE;OACA,YAAY;OACZ,MAAM;OACN,MAAK;OACL,gBAAe,UAAS,WAAW,MAAM;OACzC,eAAe;QAAE,WAAW;QAAc,SAAS;QAAW;OAC9D,GAAE;QACF;OACE;KACN,oBAACD;MAAI,UAAS;gBACZ,qBAACA;OAAI,YAAW;OAAS,MAAM;OAAG,IAAG;OAAO,IAAI;OAAG,IAAI;kBACpD,wBACC,oBAAC;QAAW,MAAM;QAAG,SAAS;QAAS,MAAK;kBAAK;SAEpC,EAEf,oBAACE;QACC,UAAU,yBAAyB;QACnC,MAAM;QACN,IAAI,uBAAuB,IAAI;QAC/B,eAAe,aAAa,aAAa;QACzC,MAAK;kBACN;SAEQ;QACL;OACF;KACL,CAAC,CAAC,cAAc,oBAACF;MAAI,IAAI;gBAAI;OAAiB;;KAC/B;IACV;GACN;EAER;AAEF,WAAW,cAAc"}

package/dist/datePicker/datePicker.types.d.ts

@@ -1,6 +1,8 @@
 import { ThemingProps } from "../theme/types.js";
 import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
 import { DateRange } from "../calendar/calendar.types.js";
+import "../calendar/index.js";
 import { ReactNode } from "react";
 import { Placement } from "tippy.js";
 

package/dist/datePicker/datePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.types.d.ts","names":[],"sources":["../../src/datePicker/datePicker.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAOY,uBAAA,CAAA,CAAA;KAEA,eAAA,CAAA,CAAA,CAAkB,KAAK,gCACjC;EAHU,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,MAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,OAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA;EAEA,UAAA,CAAA,CAAA,CAAA,OAAe;EAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;YAAQ,CAAA,CAAA,CAKlB,SALkB;;eACjC,CAAA,CAAA,CAMkB,uBANlB;;WAMkB,CAAA,CAAA,CAEJ,SAFI;;cAID,CAAA,CAAA,CAAA,IAAA;;iBAML,CAAA,CAAA,CAAA,OAAA;;EAEe,UAAA,CAAA,CAAA,CAJZ,SAIY;;YAFf;;uBAEW"}
+{"version":3,"file":"datePicker.types.d.ts","names":[],"sources":["../../src/datePicker/datePicker.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;KAOY,uBAAA,CAAA,CAAA;KAEA,eAAA,CAAA,CAAA,CAAkB,KAAK,gCACjC;;;EAHU,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;EAEA,UAAA,CAAA,CAAA,CAKK,SALU;EAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA;EAAL,aAAA,CAAA,CAAA,CAOV,uBAPU;EAC5B,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,SAAA,CAAA,EAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,KAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAIe,SAAA,CAAA,CAAA,CAID,SAJC;EAEG,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA;EAEJ,YAAA,CAAA,CAAA,CAEG,IAFH;EAEG,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA;EAIF,eAAA,CAAA,CAAA,CAAA,OAAA;EAEH,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;EAEW,UAAA,CAAA,CAAA,CAJR,SAIQ;EAAI,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;YAFf;;uBAEW"}

package/dist/datePicker/index.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerPopupPosition, DatePickerProps } from "./datePicker.types.js";
+import { DatePicker } from "./datePicker.js";

package/dist/datePicker/theme.js

@@ -1,2 +1,16 @@
-var e={baseStyle:{},defaultProps:{},sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/datePicker/theme.ts
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/datePicker/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/datePicker/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAQA,IAAA,EAAe,CACb,UATgB,EAAE,CAUlB,aARmB,EAAE,CASrB,MAPY,EAAE,CAQd,SANe,EAAE,CAOlB"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/datePicker/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe,EAAE;AAEvB,MAAM,QAAQ,EAAE;AAEhB,MAAM,WAAW,EAAE;AAEnB,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/definition/definition.d.ts

@@ -1,6 +1,7 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { DefinitionProps } from "./definition.types.js";
+import "../index.js";
 import * as styled_components0 from "styled-components";
 
 //#region src/definition/definition.d.ts

package/dist/definition/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAQa,wBAAsB,kBAAA,CAAA,sBAqBlC,kBAAA,CArBkC,YAAA,CAAA,CAAA,WAAA,CAAA;cAuBtB,0BAAwB,kBAAA,CAAA,sBA+BpC,kBAAA,CA/BoC,YAAA,CAAA,CAAA,WAAA,CAAA;AAvBxB,OAAA,CAAA,KAAA,CAwDA,UAnCZ,CAAA,CAmCsB,YAnCtB,CAAA,CAAA,EAAA,CAAA,CAAA,CAmCsB,eAnCtB,CAAA"}
+{"version":3,"file":"definition.d.ts","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;cAQa,wBAAsB,kBAAA,CAAA,sBAqBlC,kBAAA,CArBkC,YAAA,CAAA,CAAA,WAAA,CAAA;cAuBtB,0BAAwB,kBAAA,CAAA,sBA+BpC,kBAAA,CA/BoC,YAAA,CAAA,CAAA,WAAA,CAAA;cAiCxB,YAAU,mBAAA"}

package/dist/definition/definition.js

@@ -1,4 +1,15 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{DefinitionContent as a}from"./definitionContent.js";import{jsx as o}from"react/jsx-runtime";const s=r.dlBox`
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { DefinitionContent } from "./definitionContent.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/definition/definition.tsx
+/**
+* Properties are definition lists
+* */
+const DefinitionVerticalBase = styled.dlBox`
   display: grid;
   gap: 1em;
   grid-template-columns: repeat(auto-fit, minmax(10em, 20em));
@@ -19,7 +30,8 @@ import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleCon
   dd > * {
     margin-left: 0 !important;
   }
-`,c=r.dlBox`
+`;
+const DefinitionHorizontalBase = styled.dlBox`
   padding: 10px;
   display: grid;
   gap: 0;
@@ -50,5 +62,33 @@ import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleCon
   dd > * {
     margin-left: 0 !important;
   }
-`,l=i((r,i)=>{let{orientation:l=`horizontal`,className:u,...d}=t(r),f=n(`Definition`,r);return l===`horizontal`?o(c,{className:e(`vui-definition vui-definition-horizontal`,u),ref:i,...f.container,...d,children:o(a,{orientation:`horizontal`,...d})}):o(s,{className:e(`vui-definition vui-definition-vertical`,u),ref:i,...f.container,...d,children:o(a,{orientation:`vertical`,...d})})});l.displayName=`Definition`;export{l as Definition,c as DefinitionHorizontalBase,s as DefinitionVerticalBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+const Definition = vui((props, ref) => {
+	const { orientation = "horizontal", className,...rest } = omitThemingProps(props);
+	const styles = useStyleConfig("Definition", props);
+	return orientation === "horizontal" ? /* @__PURE__ */ jsx(DefinitionHorizontalBase, {
+		className: cs("vui-definition vui-definition-horizontal", className),
+		ref,
+		...styles.container,
+		...rest,
+		children: /* @__PURE__ */ jsx(DefinitionContent, {
+			orientation: "horizontal",
+			...rest
+		})
+	}) : /* @__PURE__ */ jsx(DefinitionVerticalBase, {
+		className: cs("vui-definition vui-definition-vertical", className),
+		ref,
+		...styles.container,
+		...rest,
+		children: /* @__PURE__ */ jsx(DefinitionContent, {
+			orientation: "vertical",
+			...rest
+		})
+	});
+});
+Definition.displayName = "Definition";
+
+//#endregion
+export { Definition, DefinitionHorizontalBase, DefinitionVerticalBase };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=definition.js.map

package/dist/definition/definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.js","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DefinitionProps } from './definition.types'\nimport { DefinitionContent } from './definitionContent'\n\n/**\n * Properties are definition lists\n * */\nexport const DefinitionVerticalBase = styled.dlBox`\n  display: grid;\n  gap: 1em;\n  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  dt {\n    display: inline-flex;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const DefinitionHorizontalBase = styled.dlBox`\n  padding: 10px;\n  display: grid;\n  gap: 0;\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n    @media (min-width: 1024px) {\n      flex-direction: row;\n    }\n  }\n\n  dt,\n  dd {\n    display: inline-flex;\n    padding-left: 5px;\n  }\n\n  dt {\n    width: 20%;\n    min-width: 130px;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const Definition = vui<'dl', DefinitionProps>((props, ref) => {\n  const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Definition', props)\n  return orientation === 'horizontal' ? (\n    <DefinitionHorizontalBase\n      className={cs('vui-definition vui-definition-horizontal', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"horizontal\" {...rest} />\n    </DefinitionHorizontalBase>\n  ) : (\n    <DefinitionVerticalBase\n      className={cs('vui-definition vui-definition-vertical', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"vertical\" {...rest} />\n    </DefinitionVerticalBase>\n  )\n})\n\nDefinition.displayName = 'Definition'\nexport default Definition\n"],"mappings":"mSAQA,MAAa,EAAyB,EAAO,KAAK;;;;;;;;;;;;;;;;;;;;;EAuBrC,EAA2B,EAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCvC,EAAa,GAA4B,EAAO,IAAQ,CACnE,GAAM,CAAE,cAAc,aAAc,YAAW,GAAG,GAAS,EAAiB,EAAM,CAC5E,EAAS,EAAe,aAAc,EAAM,CAClD,OAAO,IAAgB,aACrB,EAAC,EAAA,CACC,UAAW,EAAG,2CAA4C,EAAU,CAC/D,MACL,GAAI,EAAO,UACX,GAAI,WAEJ,EAAC,EAAA,CAAkB,YAAY,aAAa,GAAI,GAAQ,EAC/B,CAE3B,EAAC,EAAA,CACC,UAAW,EAAG,yCAA0C,EAAU,CAC7D,MACL,GAAI,EAAO,UACX,GAAI,WAEJ,EAAC,EAAA,CAAkB,YAAY,WAAW,GAAI,GAAQ,EAC/B,EAE3B,CAEF,EAAW,YAAc"}
+{"version":3,"file":"definition.js","names":[],"sources":["../../src/definition/definition.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DefinitionProps } from './definition.types'\nimport { DefinitionContent } from './definitionContent'\n\n/**\n * Properties are definition lists\n * */\nexport const DefinitionVerticalBase = styled.dlBox`\n  display: grid;\n  gap: 1em;\n  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  dt {\n    display: inline-flex;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const DefinitionHorizontalBase = styled.dlBox`\n  padding: 10px;\n  display: grid;\n  gap: 0;\n\n  .vui-definitionItemWrapper {\n    display: flex;\n    flex-direction: column;\n    @media (min-width: 1024px) {\n      flex-direction: row;\n    }\n  }\n\n  dt,\n  dd {\n    display: inline-flex;\n    padding-left: 5px;\n  }\n\n  dt {\n    width: 20%;\n    min-width: 130px;\n  }\n\n  dd {\n    white-space: pre-wrap;\n  }\n\n  dd > * {\n    margin-left: 0 !important;\n  }\n`\n\nexport const Definition = vui<'dl', DefinitionProps>((props, ref) => {\n  const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Definition', props)\n  return orientation === 'horizontal' ? (\n    <DefinitionHorizontalBase\n      className={cs('vui-definition vui-definition-horizontal', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"horizontal\" {...rest} />\n    </DefinitionHorizontalBase>\n  ) : (\n    <DefinitionVerticalBase\n      className={cs('vui-definition vui-definition-vertical', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n    >\n      <DefinitionContent orientation=\"vertical\" {...rest} />\n    </DefinitionVerticalBase>\n  )\n})\n\nDefinition.displayName = 'Definition'\nexport default Definition\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,yBAAyB,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;AAuBlD,MAAa,2BAA2B,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCpD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,cAAc,cAAc,UAAW,GAAG,SAAS,iBAAiB,MAAM;CAClF,MAAM,SAAS,eAAe,cAAc,MAAM;AAClD,QAAO,gBAAgB,eACrB,oBAAC;EACC,WAAW,GAAG,4CAA4C,UAAU;EAC/D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC;GAAkB,aAAY;GAAa,GAAI;IAAQ;GAC/B,GAE3B,oBAAC;EACC,WAAW,GAAG,0CAA0C,UAAU;EAC7D;EACL,GAAI,OAAO;EACX,GAAI;YAEJ,oBAAC;GAAkB,aAAY;GAAW,GAAI;IAAQ;GAC/B;EAE3B;AAEF,WAAW,cAAc"}

package/dist/definition/definition.types.d.ts

@@ -1,6 +1,8 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { ReactNode } from "react";
 
 //#region src/definition/definition.types.d.ts

package/dist/definition/definition.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.types.d.ts","names":[],"sources":["../../src/definition/definition.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAMY,cAAA,CAAA,CAAA,CAAiB;;EAAjB,UAAA,CAAA,CAAA,CAAA,OAAc;EAAA,KAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAGY,SAHZ;cAAG,CAAA,CAAA,CAAA,OAAA;;AAGkB,IAAA,CAInC,eAAA,CAAA,CAAA,CAAkB,WAJiB,CAAA,CAAA,CAK7C,YAL6C,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAInC,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAe,QAAA,CAAA,CAAA,CAGZ,QAHY,CAAA,CAAA,CAGD,GAAA,CAAI,OAHH;;WACzB,CAAA,CAAA,CAIc,QAJd,CAAA,CAAA,CAIyB,GAAA,CAAI,OAJ7B;aAEa,CAAA,CAAA,CAAA,OAAA;aAAe,CAAA,CAAA,CAAA,OAAA;OAEd,CAAA,CAAA,CAGJ,cAHI,CAAA,CAAA;;aAGJ,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA;EAAc,IAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"definition.types.d.ts","names":[],"sources":["../../src/definition/definition.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,cAAA,CAAA,CAAA,CAAiB;;;sCAGS;EAH1B,YAAA,CAAA,CAAA,CAAA,OAAc;AAO1B,CAAA;AAA8B,IAAA,CAAlB,eAAA,CAAA,CAAA,CAAkB,WAAA,CAAA,CAAA,CAC5B,YAD4B,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAC5B,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAEa,QAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAW,GAAA,CAAI,OAAf;EAAW,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAEV,SAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAW,GAAA,CAAI,OAAf;EAAW,WAAI,CAAA,CAAA,CAAA,OAAA;EAGnB,WAAA,CAAA,CAAA,CAAA,OAAA;EAAc,KAAA,CAAA,CAAA,CAAd,cAAc,CAAA,CAAA"}

package/dist/definition/definitionContent.js

@@ -1,2 +1,81 @@
-import{isArray as e}from"../utils/assertion.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../box/box.js";import o from"../icon/icon.js";import s from"../p/p.js";import{createElement as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=r.dtBox``,p=r.ddBox``,m=i((r,i)=>{let{iconLeft:m,iconRight:h,isLabelBold:g,isValueBold:_,items:v,orientation:y}=r,b=n(`Definition`,r);return u(l,{children:e(v)?v.map(({key:n,value:r,...l},v)=>d(a,{className:`vui-definitionItemWrapper`,ref:i,children:[d(f,{fontWeight:g?`demi`:`default`,...b.dt,children:[l.keyHasIcon&&m&&u(o,{className:t(`vui-definitionIcon`),name:m,...b.icon}),n,l.keyHasIcon&&h&&u(o,{className:t(`vui-definitionIcon`),name:h,...b.icon})]}),e(r)?c(p,{display:`block`,fontWeight:_?`demi`:`default`,...b.dd,key:v},y===`horizontal`?r.join(`, `):r.map((e,n)=>d(s,{display:`flex`,children:[l.valueHasIcon&&m&&u(o,{className:t(`vui-definitionIcon`),name:m,...b.icon}),e,l.valueHasIcon&&h&&u(o,{className:t(`vui-definitionIcon`),name:h,...b.icon})]},n+e))):d(p,{fontWeight:_?`demi`:`default`,...b.dd,children:[l.valueHasIcon&&m&&u(o,{className:t(`vui-definitionIcon`),name:m,...b.icon}),r,l.valueHasIcon&&h&&u(o,{className:t(`vui-definitionIcon`),name:h,...b.icon})]})]},v)):v})});m.displayName=`DefinitionContent`;export{m as DefinitionContent};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { isArray } from "../utils/assertion.js";
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import icon_default from "../icon/icon.js";
+import p_default from "../p/p.js";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/definition/definitionContent.tsx
+const DefinitionItemKey = styled.dtBox``;
+const DefinitionItemValue = styled.ddBox``;
+const DefinitionContent = vui((props, ref) => {
+	const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props;
+	const styles = useStyleConfig("Definition", props);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: isArray(items) ? items.map(({ key, value,...props$1 }, index) => /* @__PURE__ */ jsxs(box_default, {
+		className: "vui-definitionItemWrapper",
+		ref,
+		children: [/* @__PURE__ */ jsxs(DefinitionItemKey, {
+			fontWeight: isLabelBold ? "demi" : "default",
+			...styles.dt,
+			children: [
+				props$1.keyHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconLeft,
+					...styles.icon
+				}),
+				key,
+				props$1.keyHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconRight,
+					...styles.icon
+				})
+			]
+		}), isArray(value) ? /* @__PURE__ */ createElement(DefinitionItemValue, {
+			display: "block",
+			fontWeight: isValueBold ? "demi" : "default",
+			...styles.dd,
+			key: index
+		}, orientation === "horizontal" ? value.join(", ") : value.map((value$1, index$1) => /* @__PURE__ */ jsxs(p_default, {
+			display: "flex",
+			children: [
+				props$1.valueHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconLeft,
+					...styles.icon
+				}),
+				value$1,
+				props$1.valueHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconRight,
+					...styles.icon
+				})
+			]
+		}, index$1 + value$1))) : /* @__PURE__ */ jsxs(DefinitionItemValue, {
+			fontWeight: isValueBold ? "demi" : "default",
+			...styles.dd,
+			children: [
+				props$1.valueHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconLeft,
+					...styles.icon
+				}),
+				value,
+				props$1.valueHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
+					className: cs("vui-definitionIcon"),
+					name: iconRight,
+					...styles.icon
+				})
+			]
+		})]
+	}, index)) : items });
+});
+DefinitionContent.displayName = "DefinitionContent";
+
+//#endregion
+export { DefinitionContent };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=definitionContent.js.map

package/dist/definition/definitionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitionContent.js","names":["props","Box","Icon","P","value","index"],"sources":["../../src/definition/definitionContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isArray } from '../utils'\nimport type { DefinitionItem, DefinitionProps } from './definition.types'\n\nexport const DefinitionItemKey = styled.dtBox``\nexport const DefinitionItemValue = styled.ddBox``\n\nexport const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {\n  const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props as DefinitionProps\n\n  const styles = useStyleConfig('Definition', props)\n\n  return (\n    <>\n      {isArray<DefinitionItem>(items)\n        ? items.map(({ key, value, ...props }, index) => (\n            <Box className=\"vui-definitionItemWrapper\" key={index} ref={ref}>\n              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>\n                {props.keyHasIcon && iconLeft && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                )}\n                {key}\n                {props.keyHasIcon && iconRight && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                )}\n              </DefinitionItemKey>\n              {isArray(value) ? (\n                <DefinitionItemValue\n                  display=\"block\"\n                  fontWeight={isValueBold ? 'demi' : 'default'}\n                  {...styles.dd}\n                  key={index}\n                >\n                  {orientation === 'horizontal'\n                    ? value.join(', ')\n                    : value.map((value, index) => (\n                        <P display=\"flex\" key={index + value}>\n                          {props.valueHasIcon && iconLeft && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                          )}\n                          {value}\n                          {props.valueHasIcon && iconRight && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                          )}\n                        </P>\n                      ))}\n                  {}\n                </DefinitionItemValue>\n              ) : (\n                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>\n                  {props.valueHasIcon && iconLeft && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                  )}\n                  {value}\n                  {props.valueHasIcon && iconRight && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                  )}\n                </DefinitionItemValue>\n              )}\n            </Box>\n          ))\n        : items}\n    </>\n  )\n})\n\nDefinitionContent.displayName = 'DefinitionContent'\n\nexport default DefinitionContent\n"],"mappings":"qZAOA,MAAa,EAAoB,EAAO,KAAK,GAChC,EAAsB,EAAO,KAAK,GAElC,EAAoB,GAA4B,EAAO,IAAQ,CAC1E,GAAM,CAAE,WAAU,YAAW,cAAa,cAAa,QAAO,eAAgB,EAExE,EAAS,EAAe,aAAc,EAAM,CAElD,OACE,EAAA,EAAA,CAAA,SACG,EAAwB,EAAM,CAC3B,EAAM,KAAK,CAAE,MAAK,QAAO,GAAGA,GAAS,IACnC,EAACC,EAAAA,CAAI,UAAU,4BAA6C,gBAC1D,EAAC,EAAA,CAAkB,WAAY,EAAc,OAAS,UAAW,GAAI,EAAO,aACzED,EAAM,YAAc,GACnB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAU,GAAI,EAAO,MAAQ,CAE/E,EACAF,EAAM,YAAc,GACnB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAW,GAAI,EAAO,MAAQ,GAE/D,CACnB,EAAQ,EAAM,CACb,EAAC,EAAA,CACC,QAAQ,QACR,WAAY,EAAc,OAAS,UACnC,GAAI,EAAO,GACX,IAAK,GAEJ,IAAgB,aACb,EAAM,KAAK,KAAK,CAChB,EAAM,KAAK,EAAO,IAChB,EAACC,EAAAA,CAAE,QAAQ,iBACRH,EAAM,cAAgB,GACrB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAU,GAAI,EAAO,MAAQ,CAE/EE,EACAJ,EAAM,cAAgB,GACrB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAW,GAAI,EAAO,MAAQ,GAN5DG,EAAQD,EAQ3B,CACJ,CAEc,CAEtB,EAAC,EAAA,CAAoB,WAAY,EAAc,OAAS,UAAW,GAAI,EAAO,aAC3EJ,EAAM,cAAgB,GACrB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAU,GAAI,EAAO,MAAQ,CAE/E,EACAF,EAAM,cAAgB,GACrB,EAACE,EAAAA,CAAK,UAAW,EAAG,qBAAqB,CAAE,KAAM,EAAW,GAAI,EAAO,MAAQ,GAE7D,CAAA,EAzCsB,EA2C1C,CACN,CACF,EAAA,CACH,EAEL,CAEF,EAAkB,YAAc"}
+{"version":3,"file":"definitionContent.js","names":["props","Box","Icon","P","value","index"],"sources":["../../src/definition/definitionContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport P from '../p'\nimport { cs, isArray } from '../utils'\nimport type { DefinitionItem, DefinitionProps } from './definition.types'\n\nexport const DefinitionItemKey = styled.dtBox``\nexport const DefinitionItemValue = styled.ddBox``\n\nexport const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {\n  const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props as DefinitionProps\n\n  const styles = useStyleConfig('Definition', props)\n\n  return (\n    <>\n      {isArray<DefinitionItem>(items)\n        ? items.map(({ key, value, ...props }, index) => (\n            <Box className=\"vui-definitionItemWrapper\" key={index} ref={ref}>\n              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>\n                {props.keyHasIcon && iconLeft && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                )}\n                {key}\n                {props.keyHasIcon && iconRight && (\n                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                )}\n              </DefinitionItemKey>\n              {isArray(value) ? (\n                <DefinitionItemValue\n                  display=\"block\"\n                  fontWeight={isValueBold ? 'demi' : 'default'}\n                  {...styles.dd}\n                  key={index}\n                >\n                  {orientation === 'horizontal'\n                    ? value.join(', ')\n                    : value.map((value, index) => (\n                        <P display=\"flex\" key={index + value}>\n                          {props.valueHasIcon && iconLeft && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                          )}\n                          {value}\n                          {props.valueHasIcon && iconRight && (\n                            <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                          )}\n                        </P>\n                      ))}\n                  {}\n                </DefinitionItemValue>\n              ) : (\n                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>\n                  {props.valueHasIcon && iconLeft && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />\n                  )}\n                  {value}\n                  {props.valueHasIcon && iconRight && (\n                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />\n                  )}\n                </DefinitionItemValue>\n              )}\n            </Box>\n          ))\n        : items}\n    </>\n  )\n})\n\nDefinitionContent.displayName = 'DefinitionContent'\n\nexport default DefinitionContent\n"],"mappings":";;;;;;;;;;;;AAOA,MAAa,oBAAoB,OAAO,KAAK;AAC7C,MAAa,sBAAsB,OAAO,KAAK;AAE/C,MAAa,oBAAoB,KAA4B,OAAO,QAAQ;CAC1E,MAAM,EAAE,UAAU,WAAW,aAAa,aAAa,OAAO,gBAAgB;CAE9E,MAAM,SAAS,eAAe,cAAc,MAAM;AAElD,QACE,4CACG,QAAwB,MAAM,GAC3B,MAAM,KAAK,EAAE,KAAK,MAAO,GAAGA,WAAS,UACnC,qBAACC;EAAI,WAAU;EAA6C;aAC1D,qBAAC;GAAkB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;;IACzED,QAAM,cAAc,YACnB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/E;IACAF,QAAM,cAAc,aACnB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;IAE/D,EACnB,QAAQ,MAAM,GACb,8BAAC;GACC,SAAQ;GACR,YAAY,cAAc,SAAS;GACnC,GAAI,OAAO;GACX,KAAK;KAEJ,gBAAgB,eACb,MAAM,KAAK,KAAK,GAChB,MAAM,KAAK,SAAO,YAChB,qBAACC;GAAE,SAAQ;;IACRH,QAAM,gBAAgB,YACrB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/EE;IACAJ,QAAM,gBAAgB,aACrB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;KAN5DG,UAAQD,QAQ3B,CACJ,CAEc,GAEtB,qBAAC;GAAoB,YAAY,cAAc,SAAS;GAAW,GAAI,OAAO;;IAC3EJ,QAAM,gBAAgB,YACrB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAU,GAAI,OAAO;MAAQ;IAE/E;IACAF,QAAM,gBAAgB,aACrB,oBAACE;KAAK,WAAW,GAAG,qBAAqB;KAAE,MAAM;KAAW,GAAI,OAAO;MAAQ;;IAE7D;IAzCsB,MA2C1C,CACN,GACF,QACH;EAEL;AAEF,kBAAkB,cAAc"}