@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/src/lib/styles/scss/mixins/_card-color.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-card-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+  solid-bg: 500,
+  solid-hover: 600,
+  solid-active: 700,
+);
+
+$dodo-ui-card-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+  solid-hover: 300,
+  solid-active: 200,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-card-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-card-scale-dark;
+  } @else {
+    $scale: $dodo-ui-card-scale-light;
+  }
+
+  --dodo-ui-Card-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-Card-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-Card-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-Card-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+
+  --dodo-ui-Card-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+  --dodo-ui-Card-solid-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-hover)
+    )};
+  --dodo-ui-Card-solid-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-active)
+    )};
+}
+
+@mixin generate-dodo-ui-card-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        background-color: var(--dodo-ui-Card-text-#{$theme}-bg);
+
+        &.outline {
+          border-color: var(--dodo-ui-Card-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        background-color: var(--dodo-ui-Card-solid-#{$theme}-bg);
+      }
+    }
+
+    &.active {
+      &.variant {
+        &--text {
+          &:hover {
+            background-color: var(--dodo-ui-Card-text-#{$theme}-hover-bg);
+          }
+
+          &:active {
+            background-color: var(--dodo-ui-Card-text-#{$theme}-active-bg);
+          }
+        }
+
+        &--solid {
+          &:hover {
+            background-color: var(--dodo-ui-Card-solid-#{$theme}-hover-bg);
+          }
+
+          &:active {
+            background-color: var(--dodo-ui-Card-solid-#{$theme}-active-bg);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/scss/mixins/_check-enclosure-colors.scss

@@ -0,0 +1,149 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-checkEnclosure-scale-light: (
+  outline: 300,
+  outline-checked: 500,
+  text-bg: 100,
+  text-active-bg: 200,
+  solid-bg: 500,
+);
+
+$dodo-ui-checkEnclosure-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  outline-checked: (
+    500,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-active-bg: (
+    100,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-checkEnclosure-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-checkEnclosure-scale-dark;
+  } @else {
+    $scale: $dodo-ui-checkEnclosure-scale-light;
+  }
+
+  --dodo-ui-CheckEnclosure-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-CheckEnclosure-outline-#{$color-name}-checked: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline-checked)
+    )};
+
+  --dodo-ui-CheckEnclosure-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+
+  --dodo-ui-CheckEnclosure-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active-bg)
+    )};
+
+  --dodo-ui-CheckEnclosure-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+}
+
+@mixin generate-dodo-ui-checkEnclosure-color($theme) {
+  &--#{$theme} {
+    &.outline {
+      border-color: var(--dodo-ui-CheckEnclosure-outline-#{$theme});
+    }
+
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-bg);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-color-#{$theme}-600);
+        }
+
+        &[data-state='checked'] {
+          border-color: var(--dodo-ui-CheckEnclosure-outline-#{$theme}-checked);
+
+          .CheckThumbInternal {
+            background-color: var(--dodo-color-#{$theme}-700);
+          }
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-bg);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-color-#{$theme}-600);
+        }
+
+        &[data-state='checked'] {
+          background-color: var(--dodo-ui-CheckEnclosure-solid-#{$theme}-bg);
+          border-color: transparent;
+
+          .CheckThumbInternal {
+            background-color: var(--dodo-color-constant-white);
+          }
+        }
+      }
+    }
+
+    &.CheckEnclosureBackdrop {
+      &.variant {
+        &--text {
+          &[data-state='checked'] {
+            background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-active-bg);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/scss/mixins/_utility-button-color.scss

@@ -0,0 +1,105 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-utility-button-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+);
+
+$dodo-ui-utility-button-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-utility-button-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-utility-button-scale-dark;
+  } @else {
+    $scale: $dodo-ui-utility-button-scale-light;
+  }
+
+  --dodo-ui-UtilityButton-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+}
+
+@mixin generate-dodo-ui-utility-button-color($theme) {
+  &--#{$theme} {
+    color: var(--dodo-color-neutral-800);
+    background-color: transparent;
+
+    &:hover {
+      color: var(--dodo-color-#{$theme}-800);
+      background-color: var(--dodo-ui-UtilityButton-text-#{$theme}-hover-bg);
+    }
+
+    &:active {
+      color: var(--dodo-color-#{$theme}-800);
+      background-color: var(--dodo-ui-UtilityButton-text-#{$theme}-active-bg);
+    }
+
+    &.outline {
+      border-color: var(--dodo-ui-UtilityButton-outline-#{$theme});
+    }
+  }
+}

package/src/lib/test/setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+
+// mock matchMedia globally
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })),
+});

package/src/lib/utils/time/date-creator/createDate/createDate.mdx

@@ -0,0 +1,123 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# createDate
+
+A centralized date factory built on top of `dayjs`.
+
+This utility ensures **consistent parsing, timezone handling, and validation** across your application.
+
+## 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { createDate } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## 🚀 Basic Usage
+
+### Current Date
+
+<Source
+  dark
+  language="ts"
+  code={`
+const now = createDate();
+console.log(now.format());
+`}
+/>
+
+### Parse a Date
+
+<Source
+  dark
+  language="ts"
+  code={`
+const date = createDate("01-02-2025", "DD-MM-YYYY");
+console.log(date.format());
+`}
+/>
+
+## 🌍 Timezone & UTC
+
+### UTC Mode
+
+<Source
+  dark
+  language="ts"
+  code={`
+const utcDate = createDate("2025-01-01T12:00:00Z", undefined, {
+  utc: true,
+});
+`}
+/>
+
+### Timezone Conversion
+
+<Source
+  dark
+  language="ts"
+  code={`
+const indiaTime = createDate("01-01-2025", "DD-MM-YYYY", {
+  timezone: "Asia/Kolkata",
+});
+`}
+/>
+
+## ⚙️ Options
+
+<Source
+  dark
+  language="ts"
+  code={`
+interface CreateDateOptions {
+  timezone?: string;
+  utc?: boolean;
+  strict?: boolean;
+  throwOnInvalid?: boolean;
+}
+`}
+/>
+
+## 🔁 Behavior Priority
+
+1. utc (highest priority)
+2. timezone
+3. local
+
+---
+
+### timezone
+
+- IANA timezone string
+- Interprets input in given timezone
+
+---
+
+### utc
+
+- Forces UTC mode
+
+---
+
+### strict
+
+- Only applies when format is provided
+- Has no effect on ISO / timestamps
+
+---
+
+### throwOnInvalid
+
+- Throws error if date is invalid
+
+---
+
+## 📥 Supported Inputs
+
+- string
+- number (timestamp)
+- Date object
+- undefined

package/src/lib/utils/time/date-creator/createDate/createDate.ts

@@ -0,0 +1,6 @@
+import { createDateFactory } from '../createDateFactory/createDateFactory.js';
+import defaultDayjs from '../createDateFactory/dayjs.js';
+
+const { createDate } = createDateFactory(defaultDayjs);
+
+export { createDate };

package/src/lib/utils/time/date-creator/createDateFactory/createDateFactory.mdx

@@ -0,0 +1,127 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# createDateFactory
+
+A **factory function** that creates a `createDate` utility with an optional custom `dayjs` instance.
+
+This allows advanced users to:
+
+- Inject their own configured `dayjs`
+- Share plugins across multiple libraries
+- Avoid global `dayjs.extend` pollution
+- Create isolated date environments
+
+---
+
+## 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { createDateFactory } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+---
+
+## 🚀 Basic Usage
+
+### Default Factory
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { createDateFactory } from '@flightlesslabs/dodo-ui';
+
+const { createDate } = createDateFactory();
+
+const now = createDate();
+console.log(now.format());
+`}
+/>
+
+---
+
+## 🧠 Why Use a Factory?
+
+Instead of relying on global `dayjs.extend`, you can:
+
+- isolate plugin setups
+- avoid conflicts in monorepos
+- support multiple configurations
+- improve testability
+
+---
+
+## 🔌 Custom Dayjs Instance
+
+### Inject your own configured instance
+
+<Source
+  dark
+  language="ts"
+  code={`
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const { createDate } = createDateFactory(dayjs);
+
+const date = createDate("2025-01-01", "YYYY-MM-DD");
+`}
+/>
+
+---
+
+## ⚙️ Behavior
+
+The factory wraps your `dayjs` instance and preserves:
+
+- UTC handling
+- Timezone support
+- Strict parsing
+- Validation options
+
+---
+
+## 🔁 Priority Order
+
+1. utc (highest priority)
+2. timezone
+3. local parsing
+
+---
+
+## 📥 Returned API
+
+<Source
+  dark
+  language="ts"
+  code={`
+{
+  createDate: Function,
+  dayjs: DayjsInstance
+}
+`}
+/>
+
+---
+
+## 🧪 Example: Multiple Factories
+
+<Source
+  dark
+  language="ts"
+  code={`
+const factoryA = createDateFactory(dayjsA);
+const factoryB = createDateFactory(dayjsB);
+
+factoryA.createDate("2025-01-01");
+factoryB.createDate("2025-01-01");
+`}
+/>

package/src/lib/utils/time/date-creator/createDateFactory/createDateFactory.ts

@@ -0,0 +1,54 @@
+import defaultDayjs from './dayjs.js';
+import type { CreateDateInput, CreateDateFormat, CreateDateOptions } from './types.js';
+
+type Dayjs = typeof defaultDayjs;
+
+export function createDateFactory(customDayjs?: Dayjs) {
+  const d = customDayjs ?? defaultDayjs;
+
+  function createDate(): ReturnType<Dayjs>;
+  function createDate(
+    date: CreateDateInput,
+    format?: CreateDateFormat,
+    options?: CreateDateOptions,
+  ): ReturnType<Dayjs>;
+
+  function createDate(
+    date?: CreateDateInput,
+    format?: CreateDateFormat,
+    options: CreateDateOptions = {},
+  ) {
+    const { timezone, utc, strict = false, throwOnInvalid = false } = options;
+
+    const input = date ?? undefined;
+
+    let instance: ReturnType<Dayjs>;
+
+    // 1. UTC takes highest priority
+    if (utc) {
+      instance = format ? d.utc(input, format, strict) : d.utc(input);
+    }
+
+    // 2. Timezone
+    else if (timezone) {
+      instance = format ? d.tz(input, format, timezone) : d.tz(input, timezone);
+    }
+
+    // 3. Local
+    else {
+      instance = format ? d(input, format, strict) : d(input);
+    }
+
+    // 4. Validation
+    if (throwOnInvalid && !instance.isValid()) {
+      throw new Error('Invalid date input');
+    }
+
+    return instance;
+  }
+
+  return {
+    createDate,
+    dayjs: d,
+  };
+}