@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth.js

@@ -0,0 +1,74 @@
+import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { calendarWeekOptions } from '../../../../../index.js';
+import createDateOfMonth, {} from './createDateOfMonth.js';
+/**
+ * Divides an array into chunks of a given size.
+ *
+ * @template T - The type of elements in the array.
+ * @param {T[]} arr - The array to be chunked.
+ * @param {number} size - The chunk size.
+ * @returns {T[][]} - An array of chunks.
+ */
+function chunkArray(arr, size) {
+    const result = [];
+    for (let i = 0; i < arr.length; i += size) {
+        result.push(arr.slice(i, i + size));
+    }
+    return result;
+}
+function dateMoment(date, settings) {
+    return getMoment(date, undefined, {
+        timezone: settings?.timezone,
+        utc: settings?.utc,
+    });
+}
+/**
+ * Generates a calendar grid of dates for a given month.
+ *
+ * @param {Date} date - The base date for the month to generate.
+ * @param {GetDatesOfMonthSettings} [settings] - Optional settings for formatting and display.
+ * @returns {(DateOfMonth[][] | null)} - A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ */
+export default function getDatesOfMonth(date, settings) {
+    if (!date) {
+        return null;
+    }
+    const monthMoment = dateMoment(date, settings).startOf('month').startOf('day');
+    if (!monthMoment.isValid()) {
+        return null;
+    }
+    const showNextMonth = settings?.showNextMonth !== false;
+    const showLastMonth = settings?.showLastMonth !== false;
+    const startOfWeek = calendarWeekOptions.find((item) => item.abr3 === settings?.startOfWeek) ||
+        calendarWeekOptions[0];
+    const rawStartOfMonthDay = monthMoment.day();
+    const startOfMonthDay = (rawStartOfMonthDay - startOfWeek.value + 7) % 7;
+    const daysInMonth = monthMoment.daysInMonth();
+    const dates = [];
+    const lastMonth = monthMoment.clone().subtract(startOfMonthDay, 'days');
+    const nextMonth = monthMoment.clone().add(1, 'month');
+    if (showLastMonth) {
+        for (let gap = 0; gap < startOfMonthDay; gap++) {
+            const dayMoment = lastMonth.clone().add(gap, 'days');
+            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth'));
+        }
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+        const dayMoment = monthMoment.clone().set('date', day);
+        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth'));
+    }
+    const datesDivided = chunkArray(dates, 7);
+    if (showNextMonth) {
+        const lastRow = datesDivided[datesDivided.length - 1];
+        const nextMonthDaysRequired = 7 - lastRow.length;
+        if (nextMonthDaysRequired > 0) {
+            const nextMonthDates = [];
+            for (let gap = 0; gap < nextMonthDaysRequired; gap++) {
+                const dayMoment = nextMonth.clone().add(gap, 'days');
+                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth'));
+            }
+            datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
+        }
+    }
+    return datesDivided;
+}

package/dist/stories/components/Info/Calendar/utils/index.mdx

@@ -0,0 +1,64 @@
+import { Source } from '@storybook/blocks';
+
+# Utils
+
+## `getDatesOfMonth`
+
+`getDatesOfMonth(date, settings)` generates a calendar view of a given month with options to include dates from the previous and next month.
+
+### Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { getDatesOfMonth, getMoment} from '@flightlesslabs/dodo-ui';
+
+const dates = getDatesOfMonth(new Date(), {
+showLastMonth: false,
+showNextMonth: false,
+});
+
+// Or
+
+const dates2 = getDatesOfMonth(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
+
+`}
+/>
+
+## Types
+
+### `DateOfMonth`
+
+<Source
+  dark
+  language="ts"
+  code={`
+ type DateOfMonth = {
+  id: string;
+  dayNumber: number;
+  date: Date;
+  isCurrentMonth?: boolean;
+  isLastMonth?: boolean;
+  isNextMonth?: boolean;
+};
+`}
+/>
+
+### Enum: `DAYS_OF_WEEK`
+
+<Source
+  dark
+  language="ts"
+  code={`
+ const enum DAYS_OF_WEEK {
+  SUN,
+  MON,
+  TUE,
+  WED,
+  THU,
+  FRI,
+  SAT,
+}
+`}
+/>

package/dist/stories/components/Info/Calendar/utils/types.d.ts

@@ -0,0 +1,36 @@
+export declare const enum DAYS_OF_WEEK {
+    SUN = 0,
+    MON = 1,
+    TUE = 2,
+    WED = 3,
+    THU = 4,
+    FRI = 5,
+    SAT = 6
+}
+export declare const enum MONTHS {
+    JAN = 0,
+    FEB = 1,
+    MAR = 2,
+    APR = 3,
+    MAY = 4,
+    JUN = 5,
+    JUL = 6,
+    AUG = 7,
+    SEP = 8,
+    OCT = 9,
+    NOV = 10,
+    DEC = 11
+}
+export type DateOfMonth = {
+    id: string;
+    date: Date;
+    isCurrentMonth: boolean;
+    isLastMonth?: boolean;
+    isNextMonth?: boolean;
+    disabled?: boolean;
+    today?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+    inRange?: boolean;
+};
+export type DateRangeType = 'start' | 'end';

package/dist/stories/components/Info/Calendar/utils/types.js

@@ -0,0 +1,25 @@
+export var DAYS_OF_WEEK;
+(function (DAYS_OF_WEEK) {
+    DAYS_OF_WEEK[DAYS_OF_WEEK["SUN"] = 0] = "SUN";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["MON"] = 1] = "MON";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["TUE"] = 2] = "TUE";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["WED"] = 3] = "WED";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["THU"] = 4] = "THU";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["FRI"] = 5] = "FRI";
+    DAYS_OF_WEEK[DAYS_OF_WEEK["SAT"] = 6] = "SAT";
+})(DAYS_OF_WEEK || (DAYS_OF_WEEK = {}));
+export var MONTHS;
+(function (MONTHS) {
+    MONTHS[MONTHS["JAN"] = 0] = "JAN";
+    MONTHS[MONTHS["FEB"] = 1] = "FEB";
+    MONTHS[MONTHS["MAR"] = 2] = "MAR";
+    MONTHS[MONTHS["APR"] = 3] = "APR";
+    MONTHS[MONTHS["MAY"] = 4] = "MAY";
+    MONTHS[MONTHS["JUN"] = 5] = "JUN";
+    MONTHS[MONTHS["JUL"] = 6] = "JUL";
+    MONTHS[MONTHS["AUG"] = 7] = "AUG";
+    MONTHS[MONTHS["SEP"] = 8] = "SEP";
+    MONTHS[MONTHS["OCT"] = 9] = "OCT";
+    MONTHS[MONTHS["NOV"] = 10] = "NOV";
+    MONTHS[MONTHS["DEC"] = 11] = "DEC";
+})(MONTHS || (MONTHS = {}));

package/dist/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx

@@ -1,6 +1,6 @@
 import { Source } from '@storybook/blocks';
 
-# cleanNumericString
+# `cleanNumericString`
 
 Cleans the input string by removing all characters except numeric digits (0-9) and a single decimal point.
 Only the first decimal point is retained; all subsequent dots are removed.

package/dist/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx

@@ -1,6 +1,6 @@
 import { Source } from '@storybook/blocks';
 
-# isValidNumberValue
+# `isValidNumberValue`
 
 Utility function to validate whether a string is a valid number based on customizable settings including minimum, maximum, decimal places, and allowance of negative numbers.
 

package/dist/stories/developer tools/helpers/Time/getMoment/getMoment.d.ts

@@ -0,0 +1,38 @@
+import type { ConfigType, OptionType } from 'dayjs';
+import dayjs from 'dayjs';
+/**
+ * Acceptable input types for the `getMoment` function, compatible with dayjs.
+ */
+export type GetMomentDate = ConfigType;
+/**
+ * Optional formatting string used to parse the date.
+ * Refer to dayjs customParseFormat plugin for supported formats.
+ */
+export type GetMomentFormat = OptionType;
+/**
+ * Settings to control how the moment is returned (UTC, timezone, or local).
+ */
+export type GetMomentSettings = {
+    /**
+     * Timezone string (e.g., "America/New_York").
+     */
+    timezone?: string;
+    /**
+     * Whether to return the time in UTC. If true, overrides timezone.
+     */
+    utc?: boolean;
+};
+/**
+ * A wrapper around dayjs to return a moment-like object with optional formatting,
+ * timezone, or UTC handling.
+ *
+ * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
+ * @param {format} [format] - A custom format string for parsing the input date.
+ * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
+ * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ *
+ * @example
+ * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
+ * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ */
+export default function getMoment(date?: GetMomentDate, format?: GetMomentFormat, settings?: GetMomentSettings): dayjs.Dayjs;

package/dist/stories/developer tools/helpers/Time/getMoment/getMoment.js

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+/**
+ * A wrapper around dayjs to return a moment-like object with optional formatting,
+ * timezone, or UTC handling.
+ *
+ * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
+ * @param {format} [format] - A custom format string for parsing the input date.
+ * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
+ * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ *
+ * @example
+ * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
+ * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ */
+export default function getMoment(date, format, settings) {
+    const timezone = settings?.timezone;
+    const utc = settings?.utc ? true : false;
+    if (utc) {
+        return dayjs.utc(dayjs(date, format));
+    }
+    else if (timezone) {
+        return dayjs.tz(dayjs(date, format), timezone);
+    }
+    else {
+        return dayjs(date, format);
+    }
+}

package/dist/stories/developer tools/helpers/Time/getMoment/index.mdx

@@ -0,0 +1,18 @@
+import { Source } from '@storybook/blocks';
+
+# `getMoment`
+
+a Day.js wrapper
+
+## Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { getMoment } from '@flightlesslabs/dodo-ui';
+
+getMoment('2025-01-01T00:00:00Z', { utc: true }).format(); // "2025-01-01T00:00:00Z"
+getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format();
+`}
+/>

package/dist/styles/_components.css

@@ -5,9 +5,9 @@
   --dodo-ui-element-height-large: 50px;
 
   /* Roundness */
-  --dodo-ui-element-roundness-1: 7px;
-  --dodo-ui-element-roundness-2: 13px;
-  --dodo-ui-element-roundness-3: 31px;
+  --dodo-ui-element-roundness-1: 0.4375em;
+  --dodo-ui-element-roundness-2: 0.8125em;
+  --dodo-ui-element-roundness-3: 1.9375em;
 
   /* Border */
   --dodo-ui-element-border-width: 1px;

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
+  },
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -65,7 +78,7 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.33.2",
+    "svelte": "^5.33.3",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
@@ -81,17 +94,7 @@
     "pnpm": "10.11.0"
   },
   "dependencies": {
-    "@iconify/svelte": "^5.0.0"
-  },
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
+    "@iconify/svelte": "^5.0.0",
+    "dayjs": "^1.11.13"
   }
-}
+}

package/src/lib/index.ts

@@ -28,6 +28,14 @@ export type { IsValidNumberValueSettings } from '$lib/stories/developer tools/he
 /** developer tools: helpers: Numbers: cleanNumericString */
 export { default as cleanNumericString } from '$lib/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
 
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as getMoment } from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+export type {
+  GetMomentDate,
+  GetMomentFormat,
+  GetMomentSettings,
+} from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
 /** developer tools: directives: clickOutside */
 export { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
 
@@ -107,6 +115,13 @@ export type {
 export { default as NumericInput } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
 export type { NumericInputProps } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
 
+/** Form: DatePicker */
+export { default as DatePicker } from '$lib/stories/components/Form/DatePicker/DatePicker.svelte';
+export type {
+  DatePickerProps,
+  DatePickerCalendarIconPosition,
+} from '$lib/stories/components/Form/DatePicker/DatePicker.svelte';
+
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
@@ -131,3 +146,62 @@ export type {
   DynamicMenuItemOption,
   DynamicMenuProps,
 } from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+
+/** Info: Calendar */
+export { default as Calendar } from '$lib/stories/components/Info/Calendar/Calendar.svelte';
+export type {
+  CalendarProps,
+  CalendarActiveSection,
+} from '$lib/stories/components/Info/Calendar/Calendar.svelte';
+
+export { default as CalendarDatesChart } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
+export type { CalendarDatesChartProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
+export { default as CalendarDateChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
+export type { CalendarDateChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
+export {
+  default as CalendarWeek,
+  calendarWeekOptions,
+} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export type {
+  CalendarWeekProps,
+  CalendarWeekOption,
+  CalendarWeekNames,
+  CalendarWeekDayNameType,
+} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+
+export type { CalendarControlsProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
+export { default as CalendarControls } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
+export type {
+  CalendarMonthNames,
+  CalendarMonthOption,
+  calendarMonthNameType,
+  CalendarMonthSelectorProps,
+} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+export {
+  default as CalendarMonthSelector,
+  calendarMonthOptions,
+} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+export type { CalendarYearSelectorProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
+export { default as CalendarYearSelector } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
+
+export type { CalendarNavigationProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
+export { default as CalendarNavigation } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
+
+export type { CalendarMonthListProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
+export { default as CalendarMonthList } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
+export type { CalendarMonthChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
+export { default as CalendarMonthChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
+
+export type { CalendarYearListProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
+export { default as CalendarYearList } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
+export type { CalendarYearChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
+export { default as CalendarYearChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
+
+export type { DateOfMonth } from '$lib/stories/components/Info/Calendar/utils/types.js';
+export { DAYS_OF_WEEK, MONTHS } from '$lib/stories/components/Info/Calendar/utils/types.js';
+export { default as getDatesOfMonth } from '$lib/stories/components/Info/Calendar/utils/getDatesOfMonth.js';
+export { default as createDateOfMonth } from '$lib/stories/components/Info/Calendar/utils/createDateOfMonth.js';
+export type {
+  CreateDatesOfMonthSettings,
+  CreateDateOfMonthType,
+} from '$lib/stories/components/Info/Calendar/utils/createDateOfMonth.js';

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -230,7 +230,6 @@
     outline: 0;
     color: inherit;
     letter-spacing: 0.3px;
-    font-family: inherit;
 
     &.size {
       &--normal {

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss

@@ -19,11 +19,27 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors-dark($color-name) {
-  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-outline-#{$color-name}: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-300) 90%,
+    #fff
+  );
 
-  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
-  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 90%,
+    #fff
+  );
+  --dodo-ui-Button-text-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-200) 90%,
+    #fff
+  );
 
   --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
   --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);