@m3e/card 1.0.0-rc.1 → 1.0.0-rc.2

package/src/styles/CardStyle.ts

@@ -1,163 +0,0 @@
-import { css, CSSResult, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-import { CardToken } from "./CardToken";
-import { CardVariantToken } from "./CardVariantToken";
-
-/**
- * Baseline styles for `M3eCardElement`.
- * @internal
- */
-export const CardStyle: CSSResult = css`
-  :host {
-    outline: none;
-  }
-  :host(:not([inline])) {
-    display: block;
-  }
-  :host(:not([inline])) .base {
-    display: flex;
-  }
-  :host([inline]) {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  :host([inline]) .base {
-    display: inline-flex;
-  }
-  .base {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: ${CardToken.shape};
-    transition: ${unsafeCSS(
-      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-      border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`
-    )};
-  }
-  :host([actionable]) .base {
-    user-select: none;
-  }
-  :host([actionable]:not(:disabled):not([disabled-interactive])) {
-    cursor: pointer;
-  }
-  :host([actionable][disabled-interactive]) {
-    cursor: not-allowed;
-  }
-  :host(:not([actionable])) .focus-ring,
-  :host(:not([actionable])) .state-layer,
-  :host(:not([actionable])) .ripple {
-    display: none;
-  }
-  :host([variant="outlined"]) .base {
-    border-style: solid;
-  }
-  ::slotted([slot="content"]) {
-    flex: 1 1 auto;
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]) {
-    margin-inline: ${CardToken.padding};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]:first-child) {
-    margin-block-start: ${CardToken.padding};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="content"]:last-child) {
-    margin-block-end: ${CardToken.padding};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]) {
-    margin-block: ${CardToken.padding};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]:first-child) {
-    margin-inline-start: ${CardToken.padding};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="content"]:last-child) {
-    margin-inline-end: ${CardToken.padding};
-  }
-  :host([orientation="vertical"]) ::slotted([slot="header"]:not(img):not(video)) {
-    margin-inline: ${CardToken.padding};
-    margin-block-start: ${CardToken.padding};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="header"]:not(img):not(video)) {
-    margin-inline-start: ${CardToken.padding};
-    margin-block: ${CardToken.padding};
-  }
-  ::slotted(img),
-  ::slotted(video) {
-    inset: 0;
-    object-fit: cover;
-  }
-  ::slotted(img[slot="header"]),
-  ::slotted(video[slot="header"]) {
-    border-radius: ${CardToken.shape};
-  }
-  ::slotted([slot="actions"]) {
-    margin-inline: ${CardToken.padding};
-    margin-block: ${CardToken.padding};
-  }
-  ::slotted([slot="actions"][end]) {
-    justify-content: flex-end;
-  }
-  :host([orientation="vertical"]) ::slotted([slot="footer"]) {
-    margin-inline: ${CardToken.padding};
-    margin-block-end: ${CardToken.padding};
-  }
-  :host([orientation="horizontal"]) ::slotted([slot="footer"]) {
-    margin-block: ${CardToken.padding};
-    margin-inline-end: ${CardToken.padding};
-  }
-  ::slotted([slot="header"]),
-  ::slotted([slot="actions"]),
-  ::slotted([slot="footer"]) {
-    flex: none;
-    display: flex;
-    align-items: center;
-  }
-  :host([orientation="vertical"]) .base,
-  :host([orientation="horizontal"]) ::slotted([slot="header"]),
-  :host([orientation="horizontal"]) ::slotted([slot="actions"]),
-  :host([orientation="horizontal"]) ::slotted([slot="footer"]) {
-    flex-direction: column;
-  }
-  :host([orientation="horizontal"]) .base,
-  :host([orientation="vertical"]) ::slotted([slot="header"]),
-  :host([orientation="vertical"]) ::slotted([slot="actions"]),
-  :host([orientation="vertical"]) ::slotted([slot="footer"]) {
-    flex-direction: row;
-  }
-  :host([orientation="horizontal"]) ::slotted(img),
-  :host([orientation="horizontal"]) ::slotted(video) {
-    aspect-ratio: 16 / 9;
-  }
-  a {
-    all: unset;
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    z-index: 1;
-  }
-  @media (forced-colors: active) {
-    .base {
-      transition: none;
-    }
-    :host([variant]) .base {
-      border-style: solid;
-      border-color: CanvasText;
-      border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant]:disabled) .base,
-    :host([actionable][variant][disabled-interactive]) .base {
-      color: GrayText;
-      border-color: GrayText;
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .base {
-      transition: none;
-    }
-  }
-`;

package/src/styles/CardToken.ts

@@ -1,12 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-/**
- * Component design tokens for `M3eCardElement`.
- * @internal
- */
-export const CardToken = {
-  padding: unsafeCSS("var(--m3e-card-padding, 1rem)"),
-  shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),
-} as const;

package/src/styles/CardVariantStyle.ts

@@ -1,99 +0,0 @@
-import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
-
-import { CardVariant } from "../CardVariant";
-
-import { CardVariantToken } from "./CardVariantToken";
-
-/** @private */
-function cardVariantStyle(variant: CardVariant): CSSResult {
-  return css`
-    :host([variant="${unsafeCSS(variant)}"]) .base {
-      background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS("unset")};
-      box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
-      border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]) .base {
-      --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};
-      --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};
-      --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};
-      --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};
-      --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};
-      --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};
-      --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
-      --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")};
-      --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")};
-      --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .base {
-      border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:focus .base) {
-      border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:hover .base) {
-      border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed {
-      border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .base {
-      color: ${CardVariantToken[variant].textColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:focus) .base {
-      color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:hover) .base {
-      color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed {
-      color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) .base,
-    :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
-      --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")};
-      --m3e-elevation-color: color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.containerElevationColor}
-          ${CardVariantToken[variant].disabled.containerElevationOpacity},
-        transparent
-      );
-      color: color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},
-        transparent
-      );
-      background-color: ${CardVariantToken[variant].disabled.containerColor &&
-      CardVariantToken[variant].disabled.containerOpacity
-        ? unsafeCSS(`color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},
-        transparent
-      )`)
-        : unsafeCSS("unset")};
-      border-color: ${CardVariantToken[variant].disabled.outlineColor &&
-      CardVariantToken[variant].disabled.outlineOpacity
-        ? unsafeCSS(`color-mix(
-        in srgb,
-        ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},
-        transparent
-      )`)
-        : unsafeCSS("unset")};
-    }
-    :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(img),
-    :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(img),
-    :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(video),
-    :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(video) {
-      opacity: ${CardVariantToken[variant].disabled.imageOpacity};
-    }
-  `;
-}
-
-/**
- * Appearance variant styles for `M3eCardElement`.
- * @internal
- */
-export const CardVariantStyle: CSSResultGroup = [
-  cardVariantStyle("filled"),
-  cardVariantStyle("elevated"),
-  cardVariantStyle("outlined"),
-];

package/src/styles/CardVariantToken.ts

@@ -1,205 +0,0 @@
-import { CSSResult, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-import { CardVariant } from "../CardVariant";
-
-/** @private */
-type _CardVariantToken = {
-  textColor: CSSResult;
-  containerColor?: CSSResult;
-  containerElevation: CSSResult;
-  outlineColor?: CSSResult;
-  outlineThickness?: CSSResult;
-  disabled: {
-    textColor: CSSResult;
-    textOpacity: CSSResult;
-    imageOpacity: CSSResult;
-    containerColor?: CSSResult;
-    containerOpacity?: CSSResult;
-    containerElevation: CSSResult;
-    containerElevationColor: CSSResult;
-    containerElevationOpacity: CSSResult;
-    outlineColor?: CSSResult;
-    outlineOpacity?: CSSResult;
-  };
-  hover: {
-    textColor: CSSResult;
-    stateLayerColor: CSSResult;
-    stateLayerOpacity: CSSResult;
-    containerElevation?: CSSResult;
-    outlineColor?: CSSResult;
-  };
-  focus: {
-    textColor: CSSResult;
-    stateLayerColor: CSSResult;
-    stateLayerOpacity: CSSResult;
-    containerElevation?: CSSResult;
-    outlineColor?: CSSResult;
-  };
-  pressed: {
-    textColor: CSSResult;
-    stateLayerColor: CSSResult;
-    stateLayerOpacity: CSSResult;
-    containerElevation?: CSSResult;
-    outlineColor?: CSSResult;
-  };
-};
-
-/**
- * Component design tokens that control the appearance variants of `M3eCardElement`.
- * @internal
- */
-export const CardVariantToken: Record<CardVariant, _CardVariantToken> = {
-  filled: {
-    textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken.color.onSurface})`),
-    containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken.color.surfaceContainerHighest})`),
-    containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken.elevation.level0})`),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
-      containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken.color.surfaceVariant})`),
-      containerElevation: unsafeCSS(
-        `var(--m3e-filled-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-      containerElevationColor: unsafeCSS(
-        `var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
-      ),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
-      containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`),
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-filled-card-hover-container-elevation, ${DesignToken.elevation.level1})`
-      ),
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-filled-card-focus-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-filled-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-    },
-  },
-  elevated: {
-    textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken.color.onSurface})`),
-    containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken.color.surfaceContainerLow})`),
-    containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken.elevation.level1})`),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
-      containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken.color.surface})`),
-      containerElevation: unsafeCSS(
-        `var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken.elevation.level1})`
-      ),
-      containerElevationColor: unsafeCSS(
-        `var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
-      ),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
-      containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`),
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-elevated-card-hover-container-elevation, ${DesignToken.elevation.level2})`
-      ),
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-elevated-card-focus-container-elevation, ${DesignToken.elevation.level1})`
-      ),
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken.elevation.level1})`
-      ),
-    },
-  },
-  outlined: {
-    textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken.color.onSurface})`),
-    containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken.elevation.level0})`),
-    outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken.color.outlineVariant})`),
-    outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
-    disabled: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
-      containerElevation: unsafeCSS(
-        `var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-      containerElevationColor: unsafeCSS(
-        `var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
-      ),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken.color.outline})`),
-      outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`),
-    },
-    hover: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-outlined-card-hover-container-elevation, ${DesignToken.elevation.level1})`
-      ),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken.color.outlineVariant})`),
-    },
-    focus: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-outlined-card-focus-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken.color.onSurface})`),
-    },
-    pressed: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(
-        `var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
-      ),
-      containerElevation: unsafeCSS(
-        `var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
-      ),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
-    },
-  },
-} as const;

package/src/styles/index.ts

@@ -1,2 +0,0 @@
-export * from "./CardStyle";
-export * from "./CardVariantStyle";

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist/src"
-  },
-  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
-  "exclude": []
-}