@northlight/ui 2.33.5 → 2.33.7

package/dist/es/northlight.d.ts

@@ -3927,6 +3927,7 @@ type StepsProps = TabsProps$1;
 interface StepProps extends TabProps {
     label: string;
     description?: string;
+    indicator?: ReactNode;
 }
 
 /**
@@ -3948,9 +3949,13 @@ declare const StepPanel: (props: StepPanelProps) => JSX.Element;
  * (?
   <Steps>
     <StepList>
-      <Step label="Step 1" description="Name and email" />
-      <Step label="Step 2" description="Pick a password" />
-      <Step label="Step 3" description="Review" />
+      <Step label="Step 1" description="Name and email" indicator={1} />
+      <Step label="Step 2" description="Pick a password" indicator={2}  />
+      <Step label="Step 3"
+      description="Review"
+      indicator={<Icon as={ BrightnessSolid }
+      size="xs" /> }
+      />
     </StepList>
     <StepPanels>
       <StepPanel>1</StepPanel>
@@ -3970,10 +3975,16 @@ declare const Steps: (props: StepsProps) => JSX.Element;
  * @see Steps
  * @see {@link https://northlight.dev/reference/step}
  * @example
- * (? <Step label="Step 1" description="Personal information" /> ?)
+ * (?
+ <Steps>
+  <StepList>
+      <Step label="Step 1" description="Personal information" indicator={1} />
+  </StepList>
+</Steps>
+ * ?)
  *
  */
-declare const Step: ({ label, description, ...rest }: StepProps) => JSX.Element;
+declare const Step: ({ label, description, indicator, ...rest }: StepProps) => JSX.Element;
 
 /**
  * Used to render a navigational list of steps
@@ -3982,11 +3993,13 @@ declare const Step: ({ label, description, ...rest }: StepProps) => JSX.Element;
  * @see {@link https://northlight.dev/reference/step-list}
  * @example
  * (?
+ *    <Steps>
         <StepList>
           <Step label="Step 1" description="Name and email" />
           <Step label="Step 2" description="Pick a password" />
           <Step label="Step 3" description="Review" />
         </StepList>
+      </Steps>
  * ?)
  *
  */

package/dist/es/northlight.js

@@ -3,7 +3,7 @@ export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDial
 import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
-import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, add, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
+import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
@@ -19,7 +19,7 @@ import { useRadioGroupState } from '@react-stately/radio';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useDateSegment, useDateField, useDatePicker, useDateRangePicker } from '@react-aria/datepicker';
 import { useDateFieldState, useDatePickerState, useDateRangePickerState } from '@react-stately/datepicker';
-import { createCalendar, today, isSameMonth, getWeeksInMonth, getDayOfWeek, GregorianCalendar, parseDate, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear } from '@internationalized/date';
+import { createCalendar, today, isSameMonth, getWeeksInMonth, GregorianCalendar, parseDate, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear } from '@internationalized/date';
 import { useButton } from '@react-aria/button';
 import { useDateFormatter, useLocale, I18nProvider } from '@react-aria/i18n';
 import { useCalendarState } from '@react-stately/calendar';
@@ -326,7 +326,7 @@ const useOutsideRectClick = (ref, callback) => {
       document.removeEventListener("touchstart", onPointerDown, true);
       document.removeEventListener("touchend", onTouchEnd, true);
     };
-  }, []);
+  }, [callback]);
 };
 
 const useScreenSize = () => {
@@ -2591,13 +2591,8 @@ const ColorPicker$1 = {
 };
 
 const Step$1 = {
-  parts: ["step", "label", "description"],
-  baseStyle: ({ theme: {
-    colors: color,
-    fontWeights,
-    space: spacing,
-    borders: borderWidth
-  } }) => ({
+  parts: ["step", "label", "description", "indicator"],
+  baseStyle: ({ theme: { colors: color, fontWeights, space: spacing, borders: borderWidth } }) => ({
     step: {
       justifyContent: "start",
       alignItems: "start",
@@ -2622,6 +2617,9 @@ const Step$1 = {
         bgColor: color.background.step.selected,
         borderColor: color.border.step.selected,
         color: color.border.step.selected,
+        '[data-part="indicator"]': {
+          bg: color.border.step.selected
+        },
         _hover: {
           borderColor: color.border.step.selected,
           color: color.border.step.selected
@@ -2630,7 +2628,6 @@ const Step$1 = {
     },
     label: {
       color: "inherit",
-      pt: spacing.paddingTop.step.label,
       textAlign: "start",
       fontWeight: fontWeights.bold
     },
@@ -2638,6 +2635,19 @@ const Step$1 = {
       textAlign: "start",
       fontWeight: fontWeights.semiBold,
       color: color.text.default
+    },
+    indicator: {
+      minW: 6,
+      minH: 6,
+      borderRadius: "full",
+      bg: color.text.subdued,
+      color: "mono.white",
+      fontWeight: fontWeights.bold,
+      fontSize: "xs",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: "2xs"
     }
   })
 };
@@ -3170,21 +3180,25 @@ const EditableText$1 = {
 
 const Toolbox$1 = {
   parts: ["container", "header", "body", "footer"],
-  baseStyle: ({ theme: { sizes: sizing } }) => ({
+  baseStyle: ({ theme: {
+    colors: color,
+    sizes: sizing,
+    borders: borderWidth
+  } }) => ({
     container: {
       position: "relative",
       bg: "text.inverted",
       h: "100vh",
-      borderLeftWidth: "1px",
+      borderLeftWidth: borderWidth.xs,
       borderLeftStyle: "solid",
-      borderLeftColor: "gray.100"
+      borderLeftColor: color.border.default
     },
     header: {
       alignItems: "center",
       height: "16",
-      borderBottomWidth: "1px",
+      borderBottomWidth: borderWidth.xs,
       borderBottomStyle: "solid",
-      borderBottomColor: "gray.100",
+      borderBottomColor: color.border.default,
       pl: "4",
       pr: "16"
     },
@@ -3195,9 +3209,9 @@ const Toolbox$1 = {
       p: "4",
       alignItems: "center",
       height: "16",
-      borderTopWidth: "1px",
+      borderTopWidth: borderWidth.xs,
       borderTopStyle: "solid",
-      borderTopColor: "gray.100"
+      borderTopColor: color.border.default
     },
     body: {
       p: sizing["4"],
@@ -6602,8 +6616,7 @@ const months = [
   "September",
   "October",
   "November",
-  "December",
-  "January"
+  "December"
 ];
 
 const MonthSelect = ({ state }) => {
@@ -6704,30 +6717,50 @@ const YearSelectRangeCalendar = ({
   return /* @__PURE__ */ React.createElement(YearSelect, { onChange, years });
 };
 
-const getWeekNumberAtStartOfMonth = (year, month, weekDay) => {
-  if (month === 1) {
-    return weekDay > 3 ? 52 : 1;
+const MILLISECONDS_PER_DAY = 864e5;
+const getThursdayDate = (date) => {
+  const thursdayDate = new Date(date);
+  thursdayDate.setDate(date.getDate() + (4 - (date.getDay() || 7)));
+  return thursdayDate;
+};
+const hasWeek53 = (year) => {
+  const firstDayOfYear = new Date(year, 0, 1);
+  return firstDayOfYear.getDay() === 4 || firstDayOfYear.getDay() === 3 && new Date(year, 1, 29).getMonth() === 1;
+};
+const getWeekNumberAtStartOfMonth = (year, month) => {
+  const firstDayOfMonth = new Date(year, month - 1, 1);
+  const thursdayOfFirstWeek = getThursdayDate(firstDayOfMonth);
+  const firstDayOfYear = new Date(year, 0, 1);
+  const firstThursdayOfYear = getThursdayDate(firstDayOfYear);
+  const daysDifference = thursdayOfFirstWeek.getTime() - firstThursdayOfYear.getTime();
+  const weekNumber = Math.ceil((daysDifference / MILLISECONDS_PER_DAY + 1) / 7);
+  const isYearTransition = firstThursdayOfYear.getFullYear() < year;
+  const isJanuaryTransition = isYearTransition && thursdayOfFirstWeek.getFullYear() < year && month === 1;
+  if (isJanuaryTransition) {
+    return hasWeek53(year - 1) ? 53 : 52;
+  }
+  if (isYearTransition && month > 1) {
+    return weekNumber - 1;
+  }
+  if (month === 1 && weekNumber > 51) {
+    return !hasWeek53(year - 1) ? 1 : weekNumber;
   }
-  const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-  const daysInMonths = [
-    0,
-    31,
-    isLeapYear ? 29 : 28,
-    31,
-    30,
-    31,
-    30,
-    31,
-    31,
-    30,
-    31,
-    30,
-    31
-  ];
-  const totalDaysUntilMonth = daysInMonths.slice(1, month).reduce(add, 1);
-  const weekNumber = Math.ceil(totalDaysUntilMonth / 7);
   return weekNumber;
 };
+const getDisplayWeek = (baseWeek, weekIndex, year, month) => {
+  const isJanuaryEdgeCase = month === 1 && baseWeek > 51;
+  if (isJanuaryEdgeCase) {
+    return weekIndex === 0 ? baseWeek : weekIndex;
+  }
+  if (weekIndex === 0) {
+    return baseWeek;
+  }
+  const nextWeek = baseWeek + weekIndex;
+  if (nextWeek > 52) {
+    return hasWeek53(year) && nextWeek === 53 ? 53 : nextWeek - 52;
+  }
+  return nextWeek;
+};
 
 var __defProp$1v = Object.defineProperty;
 var __defProps$i = Object.defineProperties;
@@ -6855,17 +6888,18 @@ const StandaloneCalendarGrid = (_a) => {
   const { gridProps, headerProps } = useCalendarGrid(rest, state);
   const weekDays = getWeekdays(firstDayOfWeek);
   const weeksInMonth = getWeeksInMonth(startDate, locale);
-  const weekNumberStart = useMemo(
-    () => getWeekNumberAtStartOfMonth(
-      startDate.year,
-      startDate.month,
-      getDayOfWeek(startDate, locale)
-    ),
-    [startDate.year, startDate.month]
-  );
+  const weekNumberStart = useMemo(() => {
+    const weekNumber = getWeekNumberAtStartOfMonth(startDate.year, startDate.month);
+    return weekNumber;
+  }, [startDate.year, startDate.month]);
   return /* @__PURE__ */ React.createElement(Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React.createElement(chakra.tr, null, /* @__PURE__ */ React.createElement(chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(chakra.tbody, null, times((weekIndex) => {
-    const weekNumber = weekNumberStart + weekIndex;
-    return /* @__PURE__ */ React.createElement(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(chakra.td, null, /* @__PURE__ */ React.createElement(Small, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber > 52 ? weekNumber - 52 : weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
+    const weekNumber = getDisplayWeek(
+      weekNumberStart,
+      weekIndex,
+      startDate.year,
+      startDate.month
+    );
+    return /* @__PURE__ */ React.createElement(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(chakra.td, null, /* @__PURE__ */ React.createElement(Small, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
       (date) => date ? /* @__PURE__ */ React.createElement(
         RangeCell,
         {
@@ -8642,7 +8676,7 @@ const Toolbox = (_a) => {
           direction: direction === "left" ? "row-reverse" : "row"
         }, rest),
         isResizable && /* @__PURE__ */ React.createElement(ResizeHandle, __spreadValues$1d({}, resizeProps)),
-        /* @__PURE__ */ React.createElement(FocusScope, { autoFocus }, /* @__PURE__ */ React.createElement(VStack, { width: "full", height: "full" }, newChildren))
+        /* @__PURE__ */ React.createElement(FocusScope, { autoFocus }, /* @__PURE__ */ React.createElement(VStack, { w: "full", h: "full", alignItems: "normal" }, newChildren))
       )
     ))
   );
@@ -13518,7 +13552,15 @@ const Toast = (_a) => {
         color: `icon.toast.${variant}`,
         boxSize: 6
       }
-    ), /* @__PURE__ */ React.createElement(Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React.createElement(P, null, description)), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React.createElement(
+      P,
+      {
+        sx: {
+          color: variant === "ai" ? "color.text.inverted" : "text.default"
+        }
+      },
+      description
+    )), /* @__PURE__ */ React.createElement(
       CloseButton$1,
       {
         size: "sm",
@@ -13749,27 +13791,27 @@ var __objRest$9 = (source, exclude) => {
   return target;
 };
 const Step = (_a) => {
-  var _b = _a, { label, description } = _b, rest = __objRest$9(_b, ["label", "description"]);
+  var _b = _a, { label, description, indicator } = _b, rest = __objRest$9(_b, ["label", "description", "indicator"]);
   const {
     step,
     label: labelStyle,
-    description: descriptionStyle
+    description: descriptionStyle,
+    indicator: indicatorStyle
   } = useMultiStyleConfig("Step");
   return /* @__PURE__ */ React.createElement(
     Tab,
     __spreadValues$a({
       sx: step
     }, rest),
-    /* @__PURE__ */ React.createElement(
-      Flex,
+    /* @__PURE__ */ React.createElement(Flex, { flexDirection: "row", alignItems: "flex-start", gap: "4", _groupFocusVisible: ring }, indicator && /* @__PURE__ */ React.createElement(
+      Box,
       {
-        flexDirection: "column",
-        alignItems: "flex-start",
-        _groupFocusVisible: ring
+        sx: indicatorStyle,
+        "data-part": "indicator",
+        justifyContent: "center"
       },
-      /* @__PURE__ */ React.createElement(Capitalized, { sx: labelStyle }, label),
-      /* @__PURE__ */ React.createElement(Lead, { sx: descriptionStyle }, description)
-    )
+      indicator
+    ), /* @__PURE__ */ React.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Capitalized, { sx: labelStyle }, label), description && /* @__PURE__ */ React.createElement(Lead, { sx: descriptionStyle }, description)))
   );
 };