@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/button/utils.js

@@ -0,0 +1,60 @@
+//#region src/button/utils.ts
+/** Matches DEFAULT_BORDER_WIDTH in consts.ts; duplicated here to avoid a circular import. */
+const DEFAULT_BORDER_WIDTH_FALLBACK = 1;
+/** Canonical hierarchy keys recognised by the two-prop API. */
+const HIERARCHY_KEYS = new Set([
+	"primary",
+	"secondary",
+	"tertiary"
+]);
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+/**
+* Converts a two-prop variant+intent pair into the combined theme key used
+* internally (e.g. `resolveVariantKey('primary','brand') => 'primaryBrand'`).
+* When `intent` is omitted, `'brand'` is used as the default
+* (e.g. `resolveVariantKey('primary') => 'primaryBrand'`).
+*
+* If `variant` is already a fully-qualified legacy key (e.g. `'primaryBrand'`)
+* it is returned unchanged so the new API is backward-compatible.
+*
+* Returns `'primaryBrand'` (the default variant) when `variant` is absent.
+*/
+const resolveVariantKey = (variant, intent) => {
+	if (!variant) return `primary${capitalize(intent ?? "brand")}`;
+	if (!HIERARCHY_KEYS.has(variant)) return variant;
+	return `${variant}${capitalize(intent ?? "brand")}`;
+};
+/**
+* Extracts a numeric value from various input types (number, string with px, etc.).
+* Moved here from button.tsx so it can be used and tested independently.
+*
+* @param value   - Value to extract number from
+* @param fallback - Default value if extraction fails
+*/
+const extractNumericValue = (value, fallback = DEFAULT_BORDER_WIDTH_FALLBACK) => {
+	if (typeof value === "number") return value;
+	if (typeof value === "string") {
+		const parsed = parseInt(value, 10);
+		if (!isNaN(parsed)) return parsed;
+	}
+	return fallback;
+};
+/**
+* Wraps a props object so each mapped key becomes `var(--css-var, originalValue)`.
+* Unmapped keys are passed through unchanged.
+* Defined here (not in button.tsx) so it can be imported without pulling in React.
+*/
+const wrapWithVars = (props, mapping) => {
+	if (!props || Object.keys(props).length === 0) return {};
+	const result = {};
+	Object.entries(props).forEach(([key, value]) => {
+		if (key in mapping && value !== void 0) result[key] = `var(${mapping[key]}, ${value})`;
+		else if (!(key in mapping)) result[key] = value;
+	});
+	return result;
+};
+
+//#endregion
+export { extractNumericValue, resolveVariantKey, wrapWithVars };
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
+//# sourceMappingURL=utils.js.map

package/dist/button/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/button/utils.ts"],"sourcesContent":["/**\n * Button utilities — pure functions shared by theme.ts and button.tsx.\n * Kept separate to avoid circular imports.\n */\n\nimport type { ButtonIntent, ButtonVariant } from './button.types'\n\n/** Matches DEFAULT_BORDER_WIDTH in consts.ts; duplicated here to avoid a circular import. */\nconst DEFAULT_BORDER_WIDTH_FALLBACK = 1\n\n/** Canonical hierarchy keys recognised by the two-prop API. */\nconst HIERARCHY_KEYS = new Set<string>(['primary', 'secondary', 'tertiary'])\n\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\n/**\n * Converts a two-prop variant+intent pair into the combined theme key used\n * internally (e.g. `resolveVariantKey('primary','brand') => 'primaryBrand'`).\n * When `intent` is omitted, `'brand'` is used as the default\n * (e.g. `resolveVariantKey('primary') => 'primaryBrand'`).\n *\n * If `variant` is already a fully-qualified legacy key (e.g. `'primaryBrand'`)\n * it is returned unchanged so the new API is backward-compatible.\n *\n * Returns `'primaryBrand'` (the default variant) when `variant` is absent.\n */\nexport const resolveVariantKey = (\n  variant: ButtonVariant | string | undefined,\n  intent: ButtonIntent | string | undefined,\n): string | undefined => {\n  if (!variant) return `primary${capitalize(intent ?? 'brand')}`\n\n  // Already a combined legacy key — pass through unchanged\n  if (!HIERARCHY_KEYS.has(variant)) return variant\n\n  // New two-prop API: combine hierarchy + intent (defaults to 'brand' when intent is absent)\n  return `${variant}${capitalize(intent ?? 'brand')}`\n}\n\n/**\n * Extracts a numeric value from various input types (number, string with px, etc.).\n * Moved here from button.tsx so it can be used and tested independently.\n *\n * @param value   - Value to extract number from\n * @param fallback - Default value if extraction fails\n */\nexport const extractNumericValue = (value: unknown, fallback = DEFAULT_BORDER_WIDTH_FALLBACK): number => {\n  if (typeof value === 'number') return value\n  if (typeof value === 'string') {\n    const parsed = parseInt(value, 10)\n    if (!isNaN(parsed)) return parsed\n  }\n  return fallback\n}\n\n/**\n * Wraps a props object so each mapped key becomes `var(--css-var, originalValue)`.\n * Unmapped keys are passed through unchanged.\n * Defined here (not in button.tsx) so it can be imported without pulling in React.\n */\nexport const wrapWithVars = (\n  props: Record<string, unknown>,\n  mapping: Record<string, string>,\n): Record<string, unknown> => {\n  if (!props || Object.keys(props).length === 0) return {}\n  const result: Record<string, unknown> = {}\n  Object.entries(props).forEach(([key, value]) => {\n    if (key in mapping && value !== undefined) {\n      result[key] = `var(${mapping[key]}, ${value})`\n    } else if (!(key in mapping)) {\n      result[key] = value\n    }\n  })\n  return result\n}\n"],"mappings":";;AAQA,MAAM,gCAAgC;;AAGtC,MAAM,iBAAiB,IAAI,IAAY;CAAC;CAAW;CAAa;CAAW,CAAC;AAE5E,MAAM,cAAc,MAAc,EAAE,OAAO,EAAE,CAAC,aAAa,GAAG,EAAE,MAAM,EAAE;;;;;;;;;;;;AAaxE,MAAa,qBACX,SACA,WACuB;AACvB,KAAI,CAAC,QAAS,QAAO,UAAU,WAAW,UAAU,QAAQ;AAG5D,KAAI,CAAC,eAAe,IAAI,QAAQ,CAAE,QAAO;AAGzC,QAAO,GAAG,UAAU,WAAW,UAAU,QAAQ;;;;;;;;;AAUnD,MAAa,uBAAuB,OAAgB,WAAW,kCAA0C;AACvG,KAAI,OAAO,UAAU,SAAU,QAAO;AACtC,KAAI,OAAO,UAAU,UAAU;EAC7B,MAAM,SAAS,SAAS,OAAO,GAAG;AAClC,MAAI,CAAC,MAAM,OAAO,CAAE,QAAO;;AAE7B,QAAO;;;;;;;AAQT,MAAa,gBACX,OACA,YAC4B;AAC5B,KAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAAG,QAAO,EAAE;CACxD,MAAM,SAAkC,EAAE;AAC1C,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;AAC9C,MAAI,OAAO,WAAW,UAAU,OAC9B,QAAO,OAAO,OAAO,QAAQ,KAAK,IAAI,MAAM;WACnC,EAAE,OAAO,SAClB,QAAO,OAAO;GAEhB;AACF,QAAO"}

package/dist/buttonGroup/buttonGroup.d.ts

@@ -1,28 +1,11 @@
-import { AnimationProps } from "../system/animations.js";
-import { BackgroundColorProps } from "../system/backgrounds.js";
-import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
-import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
-import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
-import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
-import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
-import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
-import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
-import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
-import { ColProps, RowProps } from "../system/flexboxGrids.js";
-import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
-import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
-import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
-import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
-import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
 import { VuiComponent } from "../core/vui.js";
 import { ButtonGroupProps } from "./buttonGroup.types.js";
-import "../index.js";
-import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/buttonGroup/buttonGroup.d.ts
-declare const ButtonGroupBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & {
+declare const ButtonGroupBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<any, {
   innerBorderColor: string;
-}, never>;
+}>> & string;
 /**
  * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
  * Exposes some props to the children via context.

package/dist/buttonGroup/buttonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;cAQa,eAAA,EAAe,kBAAA,CAAA,eAAA,QAoD3B,kBAAA,CApD2B,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA;;;;;;;cA0Df,WAAA,EAAW,YAAA,QAAA,gBAAA"}
+{"version":3,"file":"buttonGroup.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"mappings":";;;;;cAQa,eAAA,EAAe,6BAAA,CAAA,oBAAA,QAqC3B,6BAAA,CArC2B,UAAA;;;;;AAA5B;;cA2Ca,WAAA,EAAW,YAAA,QAAA,gBAAA"}

package/dist/buttonGroup/buttonGroup.js

@@ -1,4 +1,3 @@
-import { activeClassName } from "../utils/consts.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
 import { th } from "../core/theme.js";
@@ -41,26 +40,11 @@ const ButtonGroupBase = styled.divBox`
     border-color: ${(p) => th.color(p.innerBorderColor)};
   }
 
-  //
-  > .${activeClassName}.vui-button-variant-secondaryDark {
-    background-color: ${th.color("skyBlue.90")};
-  }
-
-  > .${activeClassName}.vui-button-variant-buttonGroupRounded {
-    background-color: ${th.color("seaBlue.main")};
-    color: ${th.color("white")};
-  }
 
+  // Rounded variant base styles
   > .vui-button-variant-buttonGroupRounded {
     border-left-width: 1px !important;
-  }
-
-  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
-    background-color: ${th.color("seaBlue.20")};
-  }
-
-  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {
-    background-color: ${th.color("seaBlue.35")};
+    border-color: var(--vui-control-placeholder);
   }
 `;
 /**
@@ -91,5 +75,5 @@ ButtonGroup.displayName = "ButtonGroup";
 
 //#endregion
 export { ButtonGroupBase, ButtonGroup as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=buttonGroup.js.map

package/dist/buttonGroup/buttonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.js","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { styled, th, vui } from '../core'\nimport { activeClassName, cs, filterUndefined } from '../utils'\nimport type { ButtonGroupProps } from './buttonGroup.types'\nimport { ButtonGroupProvider } from './context'\nimport { getInnerBorderColor } from './helpers'\n\nexport const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`\n  display: flex;\n\n  // Border color between Buttons\n  > *:not(:last-of-type):not(:focus) {\n    border-right-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // First Button\n  > *:first-of-type:not(:last-of-type) {\n    border-right-width: 1px;\n  }\n\n  // Middle Buttons\n  > *:not(:first-of-type):not(:last-of-type) {\n    border-left-width: 0px;\n    border-right-width: 1px;\n  }\n\n  // Last Button\n  > *:not(:first-of-type):last-of-type {\n    border-left-width: 0px;\n    margin-right: 0;\n  }\n\n  // Border color\n  > *,\n  *:hover {\n    border-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  //\n  > .${activeClassName}.vui-button-variant-secondaryDark {\n    background-color: ${th.color('skyBlue.90')};\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded {\n    background-color: ${th.color('seaBlue.main')};\n    color: ${th.color('white')};\n  }\n\n  > .vui-button-variant-buttonGroupRounded {\n    border-left-width: 1px !important;\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {\n    background-color: ${th.color('seaBlue.20')};\n  }\n\n  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {\n    background-color: ${th.color('seaBlue.35')};\n  }\n`\n\n/**\n * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.\n * Exposes some props to the children via context.\n */\nexport const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {\n  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',\n      }),\n    [disabled, size, variant],\n  )\n\n  return (\n    <ButtonGroupProvider value={context}>\n      <ButtonGroupBase\n        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}\n        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}\n        {...rest}\n      />\n    </ButtonGroupProvider>\n  )\n})\n\nButtonGroup.displayName = 'ButtonGroup'\nexport default ButtonGroup\n"],"mappings":";;;;;;;;;;;;AAQA,MAAa,kBAAkB,OAAO,MAAoC;;;;;2BAKhD,MAAK,GAAG,MAAM,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAuBxC,MAAK,GAAG,MAAM,EAAE,iBAAiB,CAAC;;;;OAI/C,gBAAgB;wBACC,GAAG,MAAM,aAAa,CAAC;;;OAGxC,gBAAgB;wBACC,GAAG,MAAM,eAAe,CAAC;aACpC,GAAG,MAAM,QAAQ,CAAC;;;;;;;OAOxB,gBAAgB;wBACC,GAAG,MAAM,aAAa,CAAC;;;OAGxC,gBAAgB;wBACC,GAAG,MAAM,aAAa,CAAC;;;;;;;AAQ/C,MAAa,cAAc,KAA8B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,UAAU,kBAAkB,MAAM,UAAU,WAAW,GAAG,SAAS;AAYtF,QACE,oBAAC;EAAoB,OAXP,cAEZ,gBAAgB;GACd;GACA;GACA,SAAS,YAAY,YAAY,uBAAuB;GACzD,CAAC,EACJ;GAAC;GAAU;GAAM;GAAQ,CAC1B;YAIG,oBAAC;GACC,WAAW,GAAG,mBAAmB,WAAW,2BAA2B,UAAU;GAC3E,kBAAkB,mBAAmB,mBAAmB,oBAAoB,MAAM;GAAE;GAC1F,GAAI;IACJ;GACkB;EAExB;AAEF,YAAY,cAAc"}
+{"version":3,"file":"buttonGroup.js","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { styled, th, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { ButtonGroupProps } from './buttonGroup.types'\nimport { ButtonGroupProvider } from './context'\nimport { getInnerBorderColor } from './helpers'\n\nexport const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`\n  display: flex;\n\n  // Border color between Buttons\n  > *:not(:last-of-type):not(:focus) {\n    border-right-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // First Button\n  > *:first-of-type:not(:last-of-type) {\n    border-right-width: 1px;\n  }\n\n  // Middle Buttons\n  > *:not(:first-of-type):not(:last-of-type) {\n    border-left-width: 0px;\n    border-right-width: 1px;\n  }\n\n  // Last Button\n  > *:not(:first-of-type):last-of-type {\n    border-left-width: 0px;\n    margin-right: 0;\n  }\n\n  // Border color\n  > *,\n  *:hover {\n    border-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n\n  // Rounded variant base styles\n  > .vui-button-variant-buttonGroupRounded {\n    border-left-width: 1px !important;\n    border-color: var(--vui-control-placeholder);\n  }\n`\n\n/**\n * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.\n * Exposes some props to the children via context.\n */\nexport const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {\n  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',\n      }),\n    [disabled, size, variant],\n  )\n\n  return (\n    <ButtonGroupProvider value={context}>\n      <ButtonGroupBase\n        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}\n        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}\n        {...rest}\n      />\n    </ButtonGroupProvider>\n  )\n})\n\nButtonGroup.displayName = 'ButtonGroup'\nexport default ButtonGroup\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,kBAAkB,OAAO,MAAoC;;;;;2BAKhD,MAAK,GAAG,MAAM,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAuBxC,MAAK,GAAG,MAAM,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;AAetD,MAAa,cAAc,KAA8B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,UAAU,kBAAkB,MAAM,UAAU,WAAW,GAAG,SAAS;AAYtF,QACE,oBAAC,qBAAD;EAAqB,OAXP,cAEZ,gBAAgB;GACd;GACA;GACA,SAAS,YAAY,YAAY,uBAAuB;GACzD,CAAC,EACJ;GAAC;GAAU;GAAM;GAAQ,CAC1B;YAIG,oBAAC,iBAAD;GACE,WAAW,GAAG,mBAAmB,WAAW,2BAA2B,UAAU;GAC3E,kBAAkB,mBAAmB,mBAAmB,oBAAoB,MAAM;GAAE;GAC1F,GAAI;GACJ;EACkB;EAExB;AAEF,YAAY,cAAc"}

package/dist/buttonGroup/buttonGroup.types.d.ts

@@ -1,7 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-
 //#region src/buttonGroup/buttonGroup.types.d.ts
 type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
   /** Available theme colors for this component. @deprecated */colorScheme?: string; /** Makes all wrapped buttons disabled. */

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.types.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.types.ts"],"mappings":";;;;;KAGY,gBAAA,GAAmB,WAAA,GAC7B,YAAA;+DAEE,WAAA,WAHQ;EAKR,QAAA;EAEA,gBAAA,WAP2B;EAS3B,OAAA;AAAA"}
+{"version":3,"file":"buttonGroup.types.d.ts","names":[],"sources":["../../src/buttonGroup/buttonGroup.types.ts"],"mappings":";;;KAGY,gBAAA,GAAmB,WAAA,GAC7B,YAAA;+DAEE,WAAA;EAEA,QAAA,YALwB;EAOxB,gBAAA,WANU;EAQV,OAAA;AAAA"}

package/dist/buttonGroup/context.d.ts

@@ -1,10 +1,13 @@
-import { Dict } from "../utils/types.js";
-import "../utils/index.js";
 import * as react from "react";
 
 //#region src/buttonGroup/context.d.ts
-declare const ButtonGroupProvider: react.Provider<Dict>, useButtonGroupContext: () => Dict;
+interface ButtonGroupContextValue {
+  disabled?: boolean;
+  size?: string;
+  variant?: string;
+}
+declare const ButtonGroupProvider: react.Provider<ButtonGroupContextValue>, useButtonGroupContext: () => ButtonGroupContextValue;
 //#endregion
-export { ButtonGroupProvider, useButtonGroupContext };
+export { ButtonGroupContextValue, ButtonGroupProvider, useButtonGroupContext };
 
 //# sourceMappingURL=context.d.ts.map

package/dist/buttonGroup/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/buttonGroup/context.ts"],"mappings":";;;;;cAGO,mBAAA,EAAmB,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,qBAAA,QAAqB,IAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/buttonGroup/context.ts"],"mappings":";;;UAEiB,uBAAA;EACf,QAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,cAGK,mBAAA,EAAmB,KAAA,CAAA,QAAA,CAAA,uBAAA,GAAE,qBAAA,QAAqB,uBAAA"}

package/dist/buttonGroup/context.js

@@ -5,5 +5,5 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext({ isOptional:
 
 //#endregion
 export { ButtonGroupProvider, useButtonGroupContext };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/buttonGroup/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/buttonGroup/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [ButtonGroupProvider, useButtonGroupContext] = createContext<Dict>({ isOptional: true })\n\nexport { ButtonGroupProvider, useButtonGroupContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,qBAAqB,yBAAyB,cAAoB,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/buttonGroup/context.ts"],"sourcesContent":["import { createContext } from '../utils'\n\nexport interface ButtonGroupContextValue {\n  disabled?: boolean\n  size?: string\n  variant?: string\n}\n\nconst [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>({ isOptional: true })\n\nexport { ButtonGroupProvider, useButtonGroupContext }\n"],"mappings":";;;AAQA,MAAM,CAAC,qBAAqB,yBAAyB,cAAuC,EAAE,YAAY,MAAM,CAAC"}

package/dist/buttonGroup/helpers.js

@@ -8,5 +8,5 @@ function getInnerBorderColor(props) {
 
 //#endregion
 export { getInnerBorderColor };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=helpers.js.map

package/dist/buttonGroup/index.d.ts

@@ -1,3 +1,3 @@
 import { ButtonGroupProps } from "./buttonGroup.types.js";
 import { ButtonGroup, ButtonGroupBase } from "./buttonGroup.js";
-import { ButtonGroupProvider, useButtonGroupContext } from "./context.js";
+import { ButtonGroupContextValue, ButtonGroupProvider, useButtonGroupContext } from "./context.js";

package/dist/buttonToggleGroup/buttonToggleGroup.js

@@ -19,5 +19,5 @@ ButtonToggleGroup.displayName = "ButtonToggleGroup";
 
 //#endregion
 export { ButtonToggleGroup as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=buttonToggleGroup.js.map

package/dist/buttonToggleGroup/buttonToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.js","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\nimport type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'ButtonToggleGroup'\nexport default ButtonToggleGroup\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,mBAAmB;AAEtC,QACE,oBAAC;EACC,WAAW,GAAG,yBAAyB,UAAU;EACjD,kBAAkB,iBAAiB,oBAAoB;EACvD,GAAI;GACJ;;AAIN,kBAAkB,cAAc"}
+{"version":3,"file":"buttonToggleGroup.js","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\nimport type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'ButtonToggleGroup'\nexport default ButtonToggleGroup\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,mBAAmB;AAEtC,QACE,oBAAC,aAAD;EACE,WAAW,GAAG,yBAAyB,UAAU;EACjD,kBAAkB,iBAAiB,oBAAoB;EACvD,GAAI;EACJ;;AAIN,kBAAkB,cAAc"}

package/dist/buttonToggleGroup/buttonToggleGroup.types.d.ts

@@ -1,6 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
 import { ButtonGroupProps } from "../buttonGroup/buttonGroup.types.js";
-import "../buttonGroup/index.js";
 import { ReactNode } from "react";
 
 //#region src/buttonToggleGroup/buttonToggleGroup.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.types.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.types.ts"],"mappings":";;;;;;KAKY,sBAAA,GAAyB,gBAAA,GACnC,YAAA;EACE,SAAA;EAEA,cAAA;EACA,QAAA,EAAU,SAAA;AAAA"}
+{"version":3,"file":"buttonToggleGroup.types.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.types.ts"],"mappings":";;;;;KAKY,sBAAA,GAAyB,gBAAA,GACnC,YAAA;EACE,SAAA;EAEA,cAAA;EACA,QAAA,EAAU,SAAA;AAAA"}

package/dist/calendar/calendar.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { CalendarProps } from "./calendar.types.js";
-import "../index.js";
-
 //#region src/calendar/calendar.d.ts
 /** Displays calendar. */
 declare const Calendar: VuiComponent<"div", CalendarProps>;

package/dist/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","names":[],"sources":["../../src/calendar/calendar.tsx"],"mappings":";;;;;;cAqBa,QAAA,EAAQ,YAAA,QAAA,aAAA"}
+{"version":3,"file":"calendar.d.ts","names":[],"sources":["../../src/calendar/calendar.tsx"],"mappings":";;;;cAqBa,QAAA,EAAQ,YAAA,QAAA,aAAA"}

package/dist/calendar/calendar.js

@@ -120,5 +120,5 @@ Calendar.displayName = "Calendar";
 
 //#endregion
 export { Calendar as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=calendar.js.map

package/dist/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","names":[],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'\nimport { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components'\nimport { useCalendar, useDefaultViewMonth } from './hooks'\nimport {\n  isDay,\n  isExact,\n  isFrom,\n  isMonth,\n  isTo,\n  isYear,\n  processSelectMonth,\n  processSelectYear,\n  processViewDate,\n} from './utils'\n\n/** Displays calendar. */\nexport const Calendar = vui<'div', CalendarProps>((props, ref) => {\n  const {\n    boundaries,\n    className,\n    fixedNumberOfWeeks = false,\n    disabled,\n    isStartDate,\n    mode,\n    onSelectDates,\n    selectedDates,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('Calendar', props)\n\n  const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate)\n\n  /**\n   * Effect to reset viewDate when selectedDates changes (onReset)\n   */\n  useEffect(() => {\n    currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate\n    currentDateRef.current && setViewDate(currentDateRef.current)\n  }, [selectedDates])\n\n  const calendarRef = useRef<TimeResult | null>(null)\n\n  const defaultViewMonth = useDefaultViewMonth({\n    boundaries,\n    selectedDate: currentDateRef.current,\n    isStartDate,\n  })\n\n  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')\n  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)\n\n  /**\n   * Handles clicking next/prev in header\n   */\n  const onChangeViewItem = (direction: FlowDirection) => {\n    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)\n    newViewMonth && setViewDate(newViewMonth)\n  }\n\n  /**\n   * Handles clicking on a day\n   */\n  const onSelectDay = (clickedDate: Date) => () => {\n    updateDateState(clickedDate)\n    setViewDate(clickedDate)\n  }\n\n  /**\n   * Handles clicking on a month\n   */\n  const onSelectMonth = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('day')\n  }\n\n  /**\n   * Handles clicking on a year\n   */\n  const onSelectYear = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('month')\n  }\n\n  /**\n   * Send update date to parent component\n   */\n  const updateDateState = (newDate: Date) => {\n    const dateRange: DateRange = { ...selectedDates }\n\n    if (dateRange) {\n      if (isTo(mode)) dateRange.endDate = newDate\n      else dateRange.startDate = newDate\n    }\n\n    if (newDate && !disabled) onSelectDates && onSelectDates(dateRange)\n  }\n\n  const calendar = (calendarRef.current = useCalendar({\n    boundaries,\n    mode,\n    selectedDates,\n    timeUnitMode,\n    viewDate,\n    fixedNumberOfWeeks,\n  }))\n\n  return (\n    <Box\n      className={cs('vui-calendar', className)}\n      column\n      cursor=\"default\"\n      minW={280}\n      position=\"relative\"\n      ref={ref}\n      w=\"fit-content\"\n      {...styles}\n      {...rest}\n    >\n      <CalendarHeader\n        nextDisabled={calendar.nextDisabled}\n        onChangeViewItem={onChangeViewItem}\n        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}\n        prevDisabled={calendar.prevDisabled}\n        timeUnitMode={timeUnitMode}\n        viewMonth={viewDate}\n      />\n      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}\n      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}\n      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}\n    </Box>\n  )\n})\n\nCalendar.displayName = 'Calendar'\n\nexport default Calendar\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,YACA,WACA,qBAAqB,OACrB,UACA,aACA,MACA,eACA,eACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,iBAAiB,OAAO,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe,QAAQ;;;;AAKhH,iBAAgB;AACd,iBAAe,UAAU,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe;AACnG,iBAAe,WAAW,YAAY,eAAe,QAAQ;IAC5D,CAAC,cAAc,CAAC;CAEnB,MAAM,cAAc,OAA0B,KAAK;CAEnD,MAAM,mBAAmB,oBAAoB;EAC3C;EACA,cAAc,eAAe;EAC7B;EACD,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmB,SAAuB,MAAM;CACrE,MAAM,CAAC,UAAU,eAAe,SAAe,iBAAiB;;;;CAKhE,MAAM,oBAAoB,cAA6B;EACrD,MAAM,eAAe,gBAAgB,UAAU,WAAW,cAAc,aAAa,SAAS,MAAM;AACpG,kBAAgB,YAAY,aAAa;;;;;CAM3C,MAAM,eAAe,sBAA4B;AAC/C,kBAAgB,YAAY;AAC5B,cAAY,YAAY;;;;;CAM1B,MAAM,iBAAiB,sBAA4B;EACjD,MAAM,mBAAmB,mBAAmB,aAAa,MAAM,WAAW;AAC1E,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,MAAM;;;;;CAMxB,MAAM,gBAAgB,sBAA4B;EAChD,MAAM,mBAAmB,kBAAkB,aAAa,MAAM,WAAW;AACzE,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,QAAQ;;;;;CAM1B,MAAM,mBAAmB,YAAkB;EACzC,MAAM,YAAuB,EAAE,GAAG,eAAe;AAEjD,MAAI,UACF,KAAI,KAAK,KAAK,CAAE,WAAU,UAAU;MAC/B,WAAU,YAAY;AAG7B,MAAI,WAAW,CAAC,SAAU,kBAAiB,cAAc,UAAU;;CAGrE,MAAM,WAAY,YAAY,UAAU,YAAY;EAClD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC;EACA,QAAO;EACP,MAAM;EACN,UAAS;EACJ;EACL,GAAE;EACF,GAAI;EACJ,GAAI;;GAEJ,oBAAC;IACC,cAAc,SAAS;IACL;IAClB,oBAAoB,SAAuB,gBAAgB,KAAK;IAChE,cAAc,SAAS;IACT;IACd,WAAW;KACX;GACD,MAAM,aAAa,IAAI,oBAAC;IAAoB;IAAuB;KAAe;GAClF,QAAQ,aAAa,IAAI,oBAAC;IAAsB;IAAyB;KAAiB;GAC1F,OAAO,aAAa,IAAI,oBAAC;IAAqB;IAAwB;KAAgB;;GACnF;EAER;AAEF,SAAS,cAAc"}
+{"version":3,"file":"calendar.js","names":[],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'\nimport { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components'\nimport { useCalendar, useDefaultViewMonth } from './hooks'\nimport {\n  isDay,\n  isExact,\n  isFrom,\n  isMonth,\n  isTo,\n  isYear,\n  processSelectMonth,\n  processSelectYear,\n  processViewDate,\n} from './utils'\n\n/** Displays calendar. */\nexport const Calendar = vui<'div', CalendarProps>((props, ref) => {\n  const {\n    boundaries,\n    className,\n    fixedNumberOfWeeks = false,\n    disabled,\n    isStartDate,\n    mode,\n    onSelectDates,\n    selectedDates,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('Calendar', props)\n\n  const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate)\n\n  /**\n   * Effect to reset viewDate when selectedDates changes (onReset)\n   */\n  useEffect(() => {\n    currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate\n    currentDateRef.current && setViewDate(currentDateRef.current)\n  }, [selectedDates])\n\n  const calendarRef = useRef<TimeResult | null>(null)\n\n  const defaultViewMonth = useDefaultViewMonth({\n    boundaries,\n    selectedDate: currentDateRef.current,\n    isStartDate,\n  })\n\n  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')\n  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)\n\n  /**\n   * Handles clicking next/prev in header\n   */\n  const onChangeViewItem = (direction: FlowDirection) => {\n    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)\n    newViewMonth && setViewDate(newViewMonth)\n  }\n\n  /**\n   * Handles clicking on a day\n   */\n  const onSelectDay = (clickedDate: Date) => () => {\n    updateDateState(clickedDate)\n    setViewDate(clickedDate)\n  }\n\n  /**\n   * Handles clicking on a month\n   */\n  const onSelectMonth = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('day')\n  }\n\n  /**\n   * Handles clicking on a year\n   */\n  const onSelectYear = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('month')\n  }\n\n  /**\n   * Send update date to parent component\n   */\n  const updateDateState = (newDate: Date) => {\n    const dateRange: DateRange = { ...selectedDates }\n\n    if (dateRange) {\n      if (isTo(mode)) dateRange.endDate = newDate\n      else dateRange.startDate = newDate\n    }\n\n    if (newDate && !disabled) onSelectDates && onSelectDates(dateRange)\n  }\n\n  const calendar = (calendarRef.current = useCalendar({\n    boundaries,\n    mode,\n    selectedDates,\n    timeUnitMode,\n    viewDate,\n    fixedNumberOfWeeks,\n  }))\n\n  return (\n    <Box\n      className={cs('vui-calendar', className)}\n      column\n      cursor=\"default\"\n      minW={280}\n      position=\"relative\"\n      ref={ref}\n      w=\"fit-content\"\n      {...styles}\n      {...rest}\n    >\n      <CalendarHeader\n        nextDisabled={calendar.nextDisabled}\n        onChangeViewItem={onChangeViewItem}\n        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}\n        prevDisabled={calendar.prevDisabled}\n        timeUnitMode={timeUnitMode}\n        viewMonth={viewDate}\n      />\n      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}\n      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}\n      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}\n    </Box>\n  )\n})\n\nCalendar.displayName = 'Calendar'\n\nexport default Calendar\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,YACA,WACA,qBAAqB,OACrB,UACA,aACA,MACA,eACA,eACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,iBAAiB,OAAO,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe,QAAQ;;;;AAKhH,iBAAgB;AACd,iBAAe,UAAU,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe;AACnG,iBAAe,WAAW,YAAY,eAAe,QAAQ;IAC5D,CAAC,cAAc,CAAC;CAEnB,MAAM,cAAc,OAA0B,KAAK;CAEnD,MAAM,mBAAmB,oBAAoB;EAC3C;EACA,cAAc,eAAe;EAC7B;EACD,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmB,SAAuB,MAAM;CACrE,MAAM,CAAC,UAAU,eAAe,SAAe,iBAAiB;;;;CAKhE,MAAM,oBAAoB,cAA6B;EACrD,MAAM,eAAe,gBAAgB,UAAU,WAAW,cAAc,aAAa,SAAS,MAAM;AACpG,kBAAgB,YAAY,aAAa;;;;;CAM3C,MAAM,eAAe,sBAA4B;AAC/C,kBAAgB,YAAY;AAC5B,cAAY,YAAY;;;;;CAM1B,MAAM,iBAAiB,sBAA4B;EACjD,MAAM,mBAAmB,mBAAmB,aAAa,MAAM,WAAW;AAC1E,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,MAAM;;;;;CAMxB,MAAM,gBAAgB,sBAA4B;EAChD,MAAM,mBAAmB,kBAAkB,aAAa,MAAM,WAAW;AACzE,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,QAAQ;;;;;CAM1B,MAAM,mBAAmB,YAAkB;EACzC,MAAM,YAAuB,EAAE,GAAG,eAAe;AAEjD,MAAI,UACF,KAAI,KAAK,KAAK,CAAE,WAAU,UAAU;MAC/B,WAAU,YAAY;AAG7B,MAAI,WAAW,CAAC,SAAU,kBAAiB,cAAc,UAAU;;CAGrE,MAAM,WAAY,YAAY,UAAU,YAAY;EAClD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EACE,WAAW,GAAG,gBAAgB,UAAU;EACxC;EACA,QAAO;EACP,MAAM;EACN,UAAS;EACJ;EACL,GAAE;EACF,GAAI;EACJ,GAAI;YATN;GAWE,oBAAC,gBAAD;IACE,cAAc,SAAS;IACL;IAClB,oBAAoB,SAAuB,gBAAgB,KAAK;IAChE,cAAc,SAAS;IACT;IACd,WAAW;IACX;GACD,MAAM,aAAa,IAAI,oBAAC,WAAD;IAAqB;IAAuB;IAAe;GAClF,QAAQ,aAAa,IAAI,oBAAC,aAAD;IAAuB;IAAyB;IAAiB;GAC1F,OAAO,aAAa,IAAI,oBAAC,YAAD;IAAsB;IAAwB;IAAgB;GACnF;;EAER;AAEF,SAAS,cAAc"}

package/dist/calendar/calendar.styles.js

@@ -70,5 +70,5 @@ const CalendarItemsContainer = styled(Box)`
 
 //#endregion
 export { CalendarItem, CalendarItemsContainer };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=calendar.styles.js.map

package/dist/calendar/calendar.types.d.ts

@@ -1,7 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
-
 //#region src/calendar/calendar.types.d.ts
 interface DateRange {
   startDate?: Date;

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.types.d.ts","names":[],"sources":["../../src/calendar/calendar.types.ts"],"mappings":";;;;;UAGiB,SAAA;EACf,SAAA,GAAY,IAAA;EACZ,OAAA,GAAU,IAAA;AAAA;AAAA,KAGA,aAAA;;;;;KAMA,YAAA;AAAA,UAEK,qBAAA;EACf,UAAA,GAAa,SAAA;EACb,WAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,UAGA,UAAA;EACf,UAAA,GAAa,SAAA;EACb,kBAAA;EACA,IAAA,EAAM,YAAA;EACN,aAAA,GAAgB,SAAA;EAChB,YAAA,GAAe,YAAA;EACf,QAAA,EAAU,IAAA;AAAA;AAAA,KAGA,SAAA;EACV,QAAA;EACA,OAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;AAAA;;;;UAMe,QAAA;EArBU;EAuBzB,QAAA;EAtBa;EAwBb,OAAA;EArBgB;EAuBhB,IAAA,EAAM,IAAA;EArBI;EAuBV,UAAA;EAvBc;;EA0Bd,QAAA;EA9BA;EAgCA,UAAA;EA/BM;EAiCN,OAAA;AAAA;;;;UAMe,UAAA;EACf,KAAA,EAAO,QAAA;EACP,YAAA;EACA,YAAA;AAAA;;;;KAMU,YAAA;AAAA,KAEA,aAAA,GAAgB,IAAA,CAAK,QAAA,wBAC/B,YAAA;EAzCA,mCA2CE,UAAA,GAAa,SAAA;EACb,SAAA;EACA,QAAA,YA3CQ;EA6CR,kBAAA;EACA,WAAA;EAEA,IAAA,EAAM,YAAA,EAxCR;EA0CE,aAAA,IAAiB,KAAA,EAAO,SAAA,WAtC1B;EAwCE,aAAA,GAAgB,SAAA;AAAA"}
+{"version":3,"file":"calendar.types.d.ts","names":[],"sources":["../../src/calendar/calendar.types.ts"],"mappings":";;;UAGiB,SAAA;EACf,SAAA,GAAY,IAAA;EACZ,OAAA,GAAU,IAAA;AAAA;AAAA,KAGA,aAAA;;;;;KAMA,YAAA;AAAA,UAEK,qBAAA;EACf,UAAA,GAAa,SAAA;EACb,WAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,UAGA,UAAA;EACf,UAAA,GAAa,SAAA;EACb,kBAAA;EACA,IAAA,EAAM,YAAA;EACN,aAAA,GAAgB,SAAA;EAChB,YAAA,GAAe,YAAA;EACf,QAAA,EAAU,IAAA;AAAA;AAAA,KAGA,SAAA;EACV,QAAA;EACA,OAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;AAAA;;;;UAMe,QAAA;EArBA;EAuBf,QAAA;;EAEA,OAAA;EAtBM;EAwBN,IAAA,EAAM,IAAA;EAtBS;EAwBf,UAAA;EAvBc;;EA0Bd,QAAA;EA/Ba;EAiCb,UAAA;EA/BA;EAiCA,OAAA;AAAA;;;;UAMe,UAAA;EACf,KAAA,EAAO,QAAA;EACP,YAAA;EACA,YAAA;AAAA;;;;KAMU,YAAA;AAAA,KAEA,aAAA,GAAgB,IAAA,CAAK,QAAA,wBAC/B,YAAA;EA1CA,mCA4CE,UAAA,GAAa,SAAA;EACb,SAAA;EACA,QAAA,YA3CQ;EA6CR,kBAAA;EACA,WAAA,YAxCqB;EA0CrB,IAAA,EAAM,YAAA,EApCE;EAsCR,aAAA,IAAiB,KAAA,EAAO,SAAA,WAxC1B;EA0CE,aAAA,GAAgB,SAAA;AAAA"}

package/dist/calendar/components/calendarHeader.js

@@ -48,5 +48,5 @@ const CalendarHeader = ({ nextDisabled, onChangeViewItem, onSetTimeUnitMode, pre
 
 //#endregion
 export { CalendarHeader };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=calendarHeader.js.map

package/dist/calendar/components/calendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendarHeader.js","names":[],"sources":["../../../src/calendar/components/calendarHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport Box from '../../box'\nimport { IconButton } from '../../button'\nimport { cs } from '../../utils'\nimport type { FlowDirection, TimeUnitMode } from '../calendar.types'\nimport { TimeUnitHeader } from './timeUnitHeader'\n\ntype Props = {\n  nextDisabled?: boolean\n  onChangeViewItem: (direction: FlowDirection) => void\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  prevDisabled?: boolean\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\nconst size = 40\n\n/**\n * Header for the calendar\n */\nexport const CalendarHeader: FC<Props> = ({\n  nextDisabled,\n  onChangeViewItem,\n  onSetTimeUnitMode,\n  prevDisabled,\n  timeUnitMode,\n  viewMonth,\n}) => (\n  <Box borderBottom=\"1px solid lightgray\" centerV className={cs('vui-calendar-header')}>\n    <Box className=\"vui-calendar-header-left\">\n      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />\n    </Box>\n    <Box className=\"vui-calendar-header-right\" flex=\"1\" justifyContent=\"right\">\n      <IconButton\n        aria-label=\"previous\"\n        className=\"icon\"\n        disabled={prevDisabled}\n        h={size}\n        icon=\"uiChevronLeft\"\n        onClick={() => onChangeViewItem('prev')}\n        size=\"sm\"\n        w={size}\n      />\n      <IconButton\n        aria-label=\"next\"\n        className=\"icon\"\n        disabled={nextDisabled}\n        h={size}\n        icon=\"uiChevronRight\"\n        onClick={() => onChangeViewItem('next')}\n        size=\"sm\"\n        w={size}\n      />\n    </Box>\n  </Box>\n)\n"],"mappings":";;;;;;;AAiBA,MAAM,OAAO;;;;AAKb,MAAa,kBAA6B,EACxC,cACA,kBACA,mBACA,cACA,cACA,gBAEA,qBAAC;CAAI,cAAa;CAAsB;CAAQ,WAAW,GAAG,sBAAsB;YAClF,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAkC;GAAiC;GAAyB;IAAa;GACtG,EACN,qBAAC;EAAI,WAAU;EAA4B,MAAK;EAAI,gBAAe;aACjE,oBAAC;GACC,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;IACH,EACF,oBAAC;GACC,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;IACH;GACE;EACF"}
+{"version":3,"file":"calendarHeader.js","names":[],"sources":["../../../src/calendar/components/calendarHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport Box from '../../box'\nimport { IconButton } from '../../button'\nimport { cs } from '../../utils'\nimport type { FlowDirection, TimeUnitMode } from '../calendar.types'\nimport { TimeUnitHeader } from './timeUnitHeader'\n\ntype Props = {\n  nextDisabled?: boolean\n  onChangeViewItem: (direction: FlowDirection) => void\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  prevDisabled?: boolean\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\nconst size = 40\n\n/**\n * Header for the calendar\n */\nexport const CalendarHeader: FC<Props> = ({\n  nextDisabled,\n  onChangeViewItem,\n  onSetTimeUnitMode,\n  prevDisabled,\n  timeUnitMode,\n  viewMonth,\n}) => (\n  <Box borderBottom=\"1px solid lightgray\" centerV className={cs('vui-calendar-header')}>\n    <Box className=\"vui-calendar-header-left\">\n      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />\n    </Box>\n    <Box className=\"vui-calendar-header-right\" flex=\"1\" justifyContent=\"right\">\n      <IconButton\n        aria-label=\"previous\"\n        className=\"icon\"\n        disabled={prevDisabled}\n        h={size}\n        icon=\"uiChevronLeft\"\n        onClick={() => onChangeViewItem('prev')}\n        size=\"sm\"\n        w={size}\n      />\n      <IconButton\n        aria-label=\"next\"\n        className=\"icon\"\n        disabled={nextDisabled}\n        h={size}\n        icon=\"uiChevronRight\"\n        onClick={() => onChangeViewItem('next')}\n        size=\"sm\"\n        w={size}\n      />\n    </Box>\n  </Box>\n)\n"],"mappings":";;;;;;;AAiBA,MAAM,OAAO;;;;AAKb,MAAa,kBAA6B,EACxC,cACA,kBACA,mBACA,cACA,cACA,gBAEA,qBAAC,KAAD;CAAK,cAAa;CAAsB;CAAQ,WAAW,GAAG,sBAAsB;WAApF,CACE,oBAAC,KAAD;EAAK,WAAU;YACb,oBAAC,gBAAD;GAAmC;GAAiC;GAAyB;GAAa;EACtG,GACN,qBAAC,KAAD;EAAK,WAAU;EAA4B,MAAK;EAAI,gBAAe;YAAnE,CACE,oBAAC,YAAD;GACE,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;GACH,GACF,oBAAC,YAAD;GACE,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;GACH,EACE;IACF"}

package/dist/calendar/components/dayPicker.js

@@ -47,5 +47,5 @@ const DayPicker = ({ calendar, onSelectDay }) => /* @__PURE__ */ jsxs(DaysContai
 
 //#endregion
 export { DayPicker };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dayPicker.js.map

package/dist/calendar/components/dayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dayPicker.js","names":[],"sources":["../../../src/calendar/components/dayPicker.tsx"],"sourcesContent":["import Box from '../../box'\nimport { styled, th } from '../../core'\nimport { cs } from '../../utils'\nimport { CalendarItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { ItemProps, TimeResult } from '../calendar.types'\nimport { weekDays } from '../consts'\n\ntype DayPickerProps = {\n  calendar: TimeResult\n  onSelectDay?: (date: Date) => void\n}\n\nconst DayItem = styled(CalendarItem)<ItemProps>`\n  aspect-ratio: 1;\n  position: relative;\n  font-size: 14px;\n  font-weight: 500;\n  width: 40px;\n  height: 40px;\n  color: ${th.color('seaBlue.main')};\n  display: inline-flex;\n  align-items: center;\n\n  & > .vui-t {\n    margin-bottom: -3px;\n  }\n`\n\nconst DaysContainer = styled(CalendarItemsContainer)`\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto;\n`\n\nexport const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (\n  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>\n    {weekDays.map((day, index) => (\n      <Box\n        border={0}\n        className=\"dayHeader\"\n        color=\"seaBlue.main\"\n        fontSize={16}\n        fontWeight={500}\n        key={`week-day-${index}`}\n      >\n        {day}\n      </Box>\n    ))}\n    {calendar.items.map(item => (\n      <DayItem\n        className={cs('vui-day-item')}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}\n        {...item}\n      >\n        {item.date.getUTCDate()}\n      </DayItem>\n    ))}\n  </DaysContainer>\n)\n"],"mappings":";;;;;;;;;AAYA,MAAM,UAAU,OAAO,aAAa,AAAW;;;;;;;WAOpC,GAAG,MAAM,eAAe,CAAC;;;;;;;;AASpC,MAAM,gBAAgB,OAAO,uBAAuB;;;;AAKpD,MAAa,aAAa,EAAE,UAAU,kBACpC,qBAAC;CAAc,WAAW,GAAG,iBAAiB;CAAE,IAAI;CAAG;YACpD,SAAS,KAAK,KAAK,UAClB,oBAAC;EACC,QAAQ;EACR,WAAU;EACV,OAAM;EACN,UAAU;EACV,YAAY;YAGX;IAFI,YAAY,QAGb,CACN,EACD,SAAS,MAAM,KAAI,SAClB,oBAAC;EACC,WAAW,GAAG,eAAe;EAE7B,SAAU,CAAC,KAAK,cAAc,cAAc,KAAK,KAAK,IAAK;EAC3D,GAAI;YAEH,KAAK,KAAK,YAAY;IAJlB,KAAK,KAAK,SAAS,CAKhB,CACV;EACY"}
+{"version":3,"file":"dayPicker.js","names":[],"sources":["../../../src/calendar/components/dayPicker.tsx"],"sourcesContent":["import Box from '../../box'\nimport { styled, th } from '../../core'\nimport { cs } from '../../utils'\nimport { CalendarItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { ItemProps, TimeResult } from '../calendar.types'\nimport { weekDays } from '../consts'\n\ntype DayPickerProps = {\n  calendar: TimeResult\n  onSelectDay?: (date: Date) => void\n}\n\nconst DayItem = styled(CalendarItem)<ItemProps>`\n  aspect-ratio: 1;\n  position: relative;\n  font-size: 14px;\n  font-weight: 500;\n  width: 40px;\n  height: 40px;\n  color: ${th.color('seaBlue.main')};\n  display: inline-flex;\n  align-items: center;\n\n  & > .vui-t {\n    margin-bottom: -3px;\n  }\n`\n\nconst DaysContainer = styled(CalendarItemsContainer)`\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto;\n`\n\nexport const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (\n  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>\n    {weekDays.map((day, index) => (\n      <Box\n        border={0}\n        className=\"dayHeader\"\n        color=\"seaBlue.main\"\n        fontSize={16}\n        fontWeight={500}\n        key={`week-day-${index}`}\n      >\n        {day}\n      </Box>\n    ))}\n    {calendar.items.map(item => (\n      <DayItem\n        className={cs('vui-day-item')}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}\n        {...item}\n      >\n        {item.date.getUTCDate()}\n      </DayItem>\n    ))}\n  </DaysContainer>\n)\n"],"mappings":";;;;;;;;;AAYA,MAAM,UAAU,OAAO,aAAa,AAAW;;;;;;;WAOpC,GAAG,MAAM,eAAe,CAAC;;;;;;;;AASpC,MAAM,gBAAgB,OAAO,uBAAuB;;;;AAKpD,MAAa,aAAa,EAAE,UAAU,kBACpC,qBAAC,eAAD;CAAe,WAAW,GAAG,iBAAiB;CAAE,IAAI;CAAG;WAAvD,CACG,SAAS,KAAK,KAAK,UAClB,oBAAC,KAAD;EACE,QAAQ;EACR,WAAU;EACV,OAAM;EACN,UAAU;EACV,YAAY;YAGX;EACG,EAHC,YAAY,QAGb,CACN,EACD,SAAS,MAAM,KAAI,SAClB,oBAAC,SAAD;EACE,WAAW,GAAG,eAAe;EAE7B,SAAU,CAAC,KAAK,cAAc,cAAc,KAAK,KAAK,IAAK;EAC3D,GAAI;YAEH,KAAK,KAAK,YAAY;EACf,EALH,KAAK,KAAK,SAAS,CAKhB,CACV,CACY"}

package/dist/calendar/components/monthPicker.js

@@ -19,5 +19,5 @@ const MonthPicker = ({ calendar, onSelectMonth }) => /* @__PURE__ */ jsx(Calenda
 
 //#endregion
 export { MonthPicker };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=monthPicker.js.map

package/dist/calendar/components/monthPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"monthPicker.js","names":["MonthItem"],"sources":["../../../src/calendar/components/monthPicker.tsx"],"sourcesContent":["import { cs } from '../../utils'\nimport { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\nimport { monthsShort } from '../consts'\n\ntype MonthPickerProps = {\n  calendar: TimeResult\n  onSelectMonth?: (date: Date) => void\n}\n\nexport const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (\n  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows=\"repeat(4, 65px)\">\n    {calendar.items.map(item => (\n      <MonthItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {monthsShort[item.date.getUTCMonth()]}\n      </MonthItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":";;;;;;AAUA,MAAa,eAAe,EAAE,UAAU,oBACtC,oBAAC;CAAuB,WAAW,GAAG,mBAAmB;CAAE,kBAAiB;WACzE,SAAS,MAAM,KAAI,SAClB,oBAACA;EACC,YAAY;EAEZ,SAAU,CAAC,KAAK,cAAc,iBAAiB,cAAc,KAAK,KAAK,IAAK;EAC5E,GAAI;EACJ,cAAa;EACb,WAAU;YAET,YAAY,KAAK,KAAK,aAAa;IAN/B,KAAK,KAAK,SAAS,CAOd,CACZ;EACqB"}
+{"version":3,"file":"monthPicker.js","names":["MonthItem"],"sources":["../../../src/calendar/components/monthPicker.tsx"],"sourcesContent":["import { cs } from '../../utils'\nimport { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\nimport { monthsShort } from '../consts'\n\ntype MonthPickerProps = {\n  calendar: TimeResult\n  onSelectMonth?: (date: Date) => void\n}\n\nexport const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (\n  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows=\"repeat(4, 65px)\">\n    {calendar.items.map(item => (\n      <MonthItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {monthsShort[item.date.getUTCMonth()]}\n      </MonthItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":";;;;;;AAUA,MAAa,eAAe,EAAE,UAAU,oBACtC,oBAAC,wBAAD;CAAwB,WAAW,GAAG,mBAAmB;CAAE,kBAAiB;WACzE,SAAS,MAAM,KAAI,SAClB,oBAACA,cAAD;EACE,YAAY;EAEZ,SAAU,CAAC,KAAK,cAAc,iBAAiB,cAAc,KAAK,KAAK,IAAK;EAC5E,GAAI;EACJ,cAAa;EACb,WAAU;YAET,YAAY,KAAK,KAAK,aAAa;EAC1B,EAPL,KAAK,KAAK,SAAS,CAOd,CACZ;CACqB"}

package/dist/calendar/components/timeUnitHeader.js

@@ -24,7 +24,8 @@ const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
 				fontSize,
 				h,
 				onClick: () => onSetTimeUnitMode("month"),
-				variant: "tertiaryDark",
+				variant: "tertiary",
+				intent: "brand",
 				px: "6px",
 				minW: "auto",
 				children: months[viewMonth.getUTCMonth()]
@@ -32,7 +33,8 @@ const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
 				fontSize,
 				h,
 				onClick: () => onSetTimeUnitMode("year"),
-				variant: "tertiaryDark",
+				variant: "tertiary",
+				intent: "brand",
 				px: "6px",
 				minW: "auto",
 				children: viewMonth.getUTCFullYear()
@@ -41,7 +43,8 @@ const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
 				fontSize,
 				h,
 				onClick: () => onSetTimeUnitMode("year"),
-				variant: "tertiaryDark",
+				variant: "tertiary",
+				intent: "brand",
 				px: "6px",
 				minW: "auto",
 				children: viewMonth.getUTCFullYear()
@@ -50,7 +53,8 @@ const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
 				fontSize,
 				h,
 				onClick: () => onSetTimeUnitMode("day"),
-				variant: "tertiaryDark",
+				variant: "tertiary",
+				intent: "brand",
 				px: "6px",
 				minW: "auto",
 				children: "Year"
@@ -61,5 +65,5 @@ const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
 
 //#endregion
 export { TimeUnitHeader };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=timeUnitHeader.js.map

package/dist/calendar/components/timeUnitHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeUnitHeader.js","names":[],"sources":["../../../src/calendar/components/timeUnitHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport { Box } from '../../box'\nimport { Button } from '../../button'\nimport { cs } from '../../utils'\nimport type { TimeUnitMode } from '../calendar.types'\nimport { months } from '../consts'\nimport { isDay, isMonth, isYear } from '../utils'\n\nconst h = 40\nconst fontSize = 16\n\ntype TimeUnitHeaderProps = {\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\n/**\n * Displays the header title with the month and year being viewed\n */\nexport const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {\n  return (\n    <Box center className={cs('vui-time-unit-header')} cursor=\"pointer\" flex=\"1\" justifyItems=\"flex-start\" gap=\"2px\">\n      {isDay(timeUnitMode) && (\n        <>\n          <Button\n            fontSize={fontSize}\n            h={h}\n            onClick={() => onSetTimeUnitMode('month')}\n            variant=\"tertiaryDark\"\n            px=\"6px\"\n            minW=\"auto\"\n          >\n            {months[viewMonth.getUTCMonth()]}\n          </Button>\n          <Button\n            fontSize={fontSize}\n            h={h}\n            onClick={() => onSetTimeUnitMode('year')}\n            variant=\"tertiaryDark\"\n            px=\"6px\"\n            minW=\"auto\"\n          >\n            {viewMonth.getUTCFullYear()}\n          </Button>\n        </>\n      )}\n      {isMonth(timeUnitMode) && (\n        <Button\n          fontSize={fontSize}\n          h={h}\n          onClick={() => onSetTimeUnitMode('year')}\n          variant=\"tertiaryDark\"\n          px=\"6px\"\n          minW=\"auto\"\n        >\n          {viewMonth.getUTCFullYear()}\n        </Button>\n      )}\n      {isYear(timeUnitMode) && (\n        <Button\n          fontSize={fontSize}\n          h={h}\n          onClick={() => onSetTimeUnitMode('day')}\n          variant=\"tertiaryDark\"\n          px=\"6px\"\n          minW=\"auto\"\n        >\n          Year\n        </Button>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAM,IAAI;AACV,MAAM,WAAW;;;;AAWjB,MAAa,kBAA2C,EAAE,mBAAmB,cAAc,gBAAgB;AACzG,QACE,qBAAC;EAAI;EAAO,WAAW,GAAG,uBAAuB;EAAE,QAAO;EAAU,MAAK;EAAI,cAAa;EAAa,KAAI;;GACxG,MAAM,aAAa,IAClB,4CACE,oBAAC;IACW;IACP;IACH,eAAe,kBAAkB,QAAQ;IACzC,SAAQ;IACR,IAAG;IACH,MAAK;cAEJ,OAAO,UAAU,aAAa;KACxB,EACT,oBAAC;IACW;IACP;IACH,eAAe,kBAAkB,OAAO;IACxC,SAAQ;IACR,IAAG;IACH,MAAK;cAEJ,UAAU,gBAAgB;KACpB,IACR;GAEJ,QAAQ,aAAa,IACpB,oBAAC;IACW;IACP;IACH,eAAe,kBAAkB,OAAO;IACxC,SAAQ;IACR,IAAG;IACH,MAAK;cAEJ,UAAU,gBAAgB;KACpB;GAEV,OAAO,aAAa,IACnB,oBAAC;IACW;IACP;IACH,eAAe,kBAAkB,MAAM;IACvC,SAAQ;IACR,IAAG;IACH,MAAK;cACN;KAEQ;;GAEP"}
+{"version":3,"file":"timeUnitHeader.js","names":[],"sources":["../../../src/calendar/components/timeUnitHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport { Box } from '../../box'\nimport { Button } from '../../button'\nimport { cs } from '../../utils'\nimport type { TimeUnitMode } from '../calendar.types'\nimport { months } from '../consts'\nimport { isDay, isMonth, isYear } from '../utils'\n\nconst h = 40\nconst fontSize = 16\n\ntype TimeUnitHeaderProps = {\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\n/**\n * Displays the header title with the month and year being viewed\n */\nexport const TimeUnitHeader: FC<TimeUnitHeaderProps> = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {\n  return (\n    <Box center className={cs('vui-time-unit-header')} cursor=\"pointer\" flex=\"1\" justifyItems=\"flex-start\" gap=\"2px\">\n      {isDay(timeUnitMode) && (\n        <>\n          <Button\n            fontSize={fontSize}\n            h={h}\n            onClick={() => onSetTimeUnitMode('month')}\n            variant=\"tertiary\"\n            intent=\"brand\"\n            px=\"6px\"\n            minW=\"auto\"\n          >\n            {months[viewMonth.getUTCMonth()]}\n          </Button>\n          <Button\n            fontSize={fontSize}\n            h={h}\n            onClick={() => onSetTimeUnitMode('year')}\n            variant=\"tertiary\"\n            intent=\"brand\"\n            px=\"6px\"\n            minW=\"auto\"\n          >\n            {viewMonth.getUTCFullYear()}\n          </Button>\n        </>\n      )}\n      {isMonth(timeUnitMode) && (\n        <Button\n          fontSize={fontSize}\n          h={h}\n          onClick={() => onSetTimeUnitMode('year')}\n          variant=\"tertiary\"\n          intent=\"brand\"\n          px=\"6px\"\n          minW=\"auto\"\n        >\n          {viewMonth.getUTCFullYear()}\n        </Button>\n      )}\n      {isYear(timeUnitMode) && (\n        <Button\n          fontSize={fontSize}\n          h={h}\n          onClick={() => onSetTimeUnitMode('day')}\n          variant=\"tertiary\"\n          intent=\"brand\"\n          px=\"6px\"\n          minW=\"auto\"\n        >\n          Year\n        </Button>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAM,IAAI;AACV,MAAM,WAAW;;;;AAWjB,MAAa,kBAA2C,EAAE,mBAAmB,cAAc,gBAAgB;AACzG,QACE,qBAAC,KAAD;EAAK;EAAO,WAAW,GAAG,uBAAuB;EAAE,QAAO;EAAU,MAAK;EAAI,cAAa;EAAa,KAAI;YAA3G;GACG,MAAM,aAAa,IAClB,4CACE,oBAAC,QAAD;IACY;IACP;IACH,eAAe,kBAAkB,QAAQ;IACzC,SAAQ;IACR,QAAO;IACP,IAAG;IACH,MAAK;cAEJ,OAAO,UAAU,aAAa;IACxB,GACT,oBAAC,QAAD;IACY;IACP;IACH,eAAe,kBAAkB,OAAO;IACxC,SAAQ;IACR,QAAO;IACP,IAAG;IACH,MAAK;cAEJ,UAAU,gBAAgB;IACpB,EACR;GAEJ,QAAQ,aAAa,IACpB,oBAAC,QAAD;IACY;IACP;IACH,eAAe,kBAAkB,OAAO;IACxC,SAAQ;IACR,QAAO;IACP,IAAG;IACH,MAAK;cAEJ,UAAU,gBAAgB;IACpB;GAEV,OAAO,aAAa,IACnB,oBAAC,QAAD;IACY;IACP;IACH,eAAe,kBAAkB,MAAM;IACvC,SAAQ;IACR,QAAO;IACP,IAAG;IACH,MAAK;cACN;IAEQ;GAEP"}

package/dist/calendar/components/yearPicker.js

@@ -16,5 +16,5 @@ const YearPicker = ({ calendar, onSelectYear }) => /* @__PURE__ */ jsx(CalendarI
 
 //#endregion
 export { YearPicker };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=yearPicker.js.map

package/dist/calendar/components/yearPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"yearPicker.js","names":["YearItem"],"sources":["../../../src/calendar/components/yearPicker.tsx"],"sourcesContent":["import { CalendarItem as YearItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\n\ntype YearPickerProps = {\n  calendar: TimeResult\n  onSelectYear?: (date: Date) => void\n}\n\nexport const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (\n  <CalendarItemsContainer className=\"vui-year-picker\">\n    {calendar.items.map(item => (\n      <YearItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {item.date.getUTCFullYear()}\n      </YearItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":";;;;AAQA,MAAa,cAAc,EAAE,UAAU,mBACrC,oBAAC;CAAuB,WAAU;WAC/B,SAAS,MAAM,KAAI,SAClB,oBAACA;EACC,YAAY;EAEZ,SAAU,CAAC,KAAK,cAAc,eAAe,KAAK,KAAK,IAAK;EAC5D,GAAI;EACJ,cAAa;EACb,WAAU;YAET,KAAK,KAAK,gBAAgB;IANtB,KAAK,KAAK,SAAS,CAOf,CACX;EACqB"}
+{"version":3,"file":"yearPicker.js","names":["YearItem"],"sources":["../../../src/calendar/components/yearPicker.tsx"],"sourcesContent":["import { CalendarItem as YearItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\n\ntype YearPickerProps = {\n  calendar: TimeResult\n  onSelectYear?: (date: Date) => void\n}\n\nexport const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (\n  <CalendarItemsContainer className=\"vui-year-picker\">\n    {calendar.items.map(item => (\n      <YearItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {item.date.getUTCFullYear()}\n      </YearItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":";;;;AAQA,MAAa,cAAc,EAAE,UAAU,mBACrC,oBAAC,wBAAD;CAAwB,WAAU;WAC/B,SAAS,MAAM,KAAI,SAClB,oBAACA,cAAD;EACE,YAAY;EAEZ,SAAU,CAAC,KAAK,cAAc,eAAe,KAAK,KAAK,IAAK;EAC5D,GAAI;EACJ,cAAa;EACb,WAAU;YAET,KAAK,KAAK,gBAAgB;EAClB,EAPJ,KAAK,KAAK,SAAS,CAOf,CACX;CACqB"}

package/dist/calendar/consts.js

@@ -42,5 +42,5 @@ const weekDays = [
 
 //#endregion
 export { maxDateTimestamp, minDateTimestamp, months, monthsShort, viewYears, weekDays };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/calendar/hooks/useBoundaries.js

@@ -17,5 +17,5 @@ const useBoundaries = ({ boundaries }) => {
 
 //#endregion
 export { useBoundaries };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useBoundaries.js.map

package/dist/calendar/hooks/useCalendar.js

@@ -45,10 +45,10 @@ const useCalendar = ({ boundaries, selectedDates, mode = "exact", timeUnitMode,
 			nextFirstDay = generateDateByUTCValue(viewDateYear + 1, 0, 1);
 			prevLastDay = generateDateByUTCValue(viewDateYear - 1, 11, 31);
 		} else {
-			const calendarStartYear = (/* @__PURE__ */ new Date()).getUTCFullYear() - viewYears / 2;
+			const calendarStartYear = (/* @__PURE__ */ new Date()).getUTCFullYear() - 12 / 2;
 			const diffYears = calendarStartYear - viewDateYear;
-			const startYear = calendarStartYear - Math.ceil(diffYears / viewYears) * viewYears;
-			const endYear = startYear + viewYears - 1;
+			const startYear = calendarStartYear - Math.ceil(diffYears / 12) * 12;
+			const endYear = startYear + 12 - 1;
 			if (startYear === 1753) calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 2);
 			else calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 1);
 			calendarLastDay = lastDay = generateDateByUTCValue(endYear, 11, 31);
@@ -115,5 +115,5 @@ const useCalendar = ({ boundaries, selectedDates, mode = "exact", timeUnitMode,
 
 //#endregion
 export { useCalendar };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useCalendar.js.map